feat: integrate diary entries into MyDay calendar and refactor medication management in patient profile

Author: SuvinCode

src/components/dashboard/DayTimeline.jsx

@@ -232,11 +232,17 @@ function MedicationBlock({ med, selectedDate, onToggle, onEdit }) {
       className={`mb-1 rounded-lg px-3 py-2 border flex items-center gap-3 text-sm transition-colors ${statusStyles}`}
     >
       <div className="flex items-center gap-3 flex-1 min-w-0">
-        <Checkbox
-          checked={isTaken}
-          onCheckedChange={() => onToggle?.(med.data, format(selectedDate, 'yyyy-MM-dd'))}
-          className={`h-5 w-5 rounded-md shrink-0 ${isTaken ? 'border-green-500' : isMissed ? 'border-red-400' : 'border-yellow-500'}`}
-        />
+        {onToggle ? (
+          <Checkbox
+            checked={isTaken}
+            onCheckedChange={() => onToggle?.(med.data, format(selectedDate, 'yyyy-MM-dd'))}
+            className={`h-5 w-5 rounded-md shrink-0 ${isTaken ? 'border-green-500' : isMissed ? 'border-red-400' : 'border-yellow-500'}`}
+          />
+        ) : (
+          <div className={`h-5 w-5 rounded-md border shrink-0 flex items-center justify-center ${isTaken ? 'bg-green-500 border-green-500' : isMissed ? 'border-red-400' : 'border-yellow-500'}`}>
+            {isTaken && <CheckCircle2 className="w-3 h-3 text-white" />}
+          </div>
+        )}
         <div className="shrink-0">
           <span className="text-xs font-bold opacity-80">{med.time}</span>
         </div>

src/pages/Diary.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import { apiClient } from '@/api/client';
 import { useAuth } from '@/lib/AuthContext';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { format, parseISO, subDays, isToday } from 'date-fns';
+import { format, parseISO, subDays, isToday, eachDayOfInterval, startOfDay } from 'date-fns';
 import { motion, AnimatePresence } from 'framer-motion';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
@@ -24,21 +24,24 @@ const MOODS = [
 const getMood = (value) => MOODS.find(m => m.value === value) || MOODS[2];
 
 // ─── Mini Mood Bar Chart ─────────────────────────────────────────────────────
-function MoodChart({ entries }) {
+function MoodChart({ entries, onDateSelect }) {
   const last7 = Array.from({ length: 7 }, (_, i) => {
     const date = subDays(new Date(), 6 - i);
     const dateStr = format(date, 'yyyy-MM-dd');
     const entry = entries.find(e => e.date === dateStr);
-    return { date, mood: entry?.mood_score ?? null };
+    return { date, dateStr, mood: entry?.mood_score ?? null };
   });
 
   return (
     <div className="flex items-end gap-1.5 h-12">
-      {last7.map(({ date, mood }, i) => {
+      {last7.map(({ date, dateStr, mood }, i) => {
         const m = mood ? getMood(mood) : null;
         return (
           <div key={i} className="flex flex-col items-center gap-1 flex-1">
-            <motion.div
+            <motion.button
+              whileHover={{ scale: 1.1, y: -2 }}
+              whileTap={{ scale: 0.9 }}
+              onClick={() => onDateSelect?.(dateStr)}
               initial={{ scaleY: 0 }}
               animate={{ scaleY: 1 }}
               transition={{ delay: i * 0.05, duration: 0.4, ease: 'easeOut' }}
@@ -47,7 +50,8 @@ function MoodChart({ entries }) {
                 backgroundColor: m ? m.color : '#e2e8f0',
                 originY: 1,
               }}
-              className="w-full rounded-t-sm"
+              className="w-full rounded-t-sm cursor-pointer"
+              title={mood ? `Mood: ${m.label} on ${format(date, 'MMM d')}` : `No entry for ${format(date, 'MMM d')}`}
             />
             <span className="text-[9px] text-muted-foreground font-medium">
               {format(date, 'EEE')[0]}
@@ -165,10 +169,10 @@ function EntryCard({ entry, onEdit }) {
           <Button
             variant="ghost"
             size="icon"
-            className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+            className="h-8 w-8 transition-all shrink-0 hover:bg-black/5 rounded-full"
             onClick={() => onEdit(entry)}
           >
-            <Pencil className="w-3.5 h-3.5" />
+            <Pencil className="w-4 h-4 text-muted-foreground" />
           </Button>
         )}
       </div>
@@ -277,20 +281,7 @@ export default function Diary() {
     }
   }, [isDoctor, todayEntry, mode]);
 
-  if (isDoctor) {
-    return (
-      <div className="max-w-xl mx-auto py-16 px-4 text-center space-y-4 text-muted-foreground">
-        <BookOpen className="w-10 h-10 mx-auto opacity-30" />
-        <p className="text-sm">Diary entries are available in each patient's profile.</p>
-        <Button asChild variant="outline" className="rounded-full gap-2">
-          <Link to="/patient-logs">
-            <Users className="w-4 h-4" />
-            Go to Patient Logs
-          </Link>
-        </Button>
-      </div>
-    );
-  }
+
 
   // ── Mutation ─────────────────────────────────────────────────────────────
   const saveMutation = useMutation({
@@ -354,10 +345,37 @@ export default function Diary() {
     saveMutation.mutate({ entryId: editingEntry.id, mood: selectedMood, text: notes, date: editingEntry.date });
   };
 
-  const avgMood = entries.length > 0
-    ? (entries.slice(0, 7).reduce((s, e) => s + e.mood_score, 0) / Math.min(entries.length, 7)).toFixed(1)
+  const avgMood = entries.length > 0 
+    ? (entries.reduce((s, e) => s + e.mood_score, 0) / entries.length).toFixed(1)
     : null;
 
+  if (isDoctor) {
+    return (
+      <motion.div 
+        initial={{ opacity: 0, y: 15 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
+        className="max-w-xl mx-auto py-16 px-4 text-center space-y-6"
+      >
+         <div className="w-20 h-20 bg-violet-50 rounded-3xl flex items-center justify-center mx-auto mb-6">
+            <BookOpen className="w-10 h-10 text-violet-300" />
+         </div>
+         <div className="space-y-2">
+            <h2 className="text-xl font-bold font-heading">Patient Diary View</h2>
+            <p className="text-sm text-muted-foreground max-w-xs mx-auto">
+              Diary entries reach you directly via each patient's profile clinical dashboard.
+            </p>
+         </div>
+         <Button asChild variant="outline" className="rounded-full gap-2 h-11 px-6 font-bold shadow-sm hover:shadow-md transition-all">
+          <Link to="/patient-logs">
+            <Users className="w-4 h-4" />
+            View Patient Logs
+          </Link>
+        </Button>
+      </motion.div>
+    );
+  }
+
   const showSuccessCard = mode === 'view' && todayEntry;
   const showInlineForm = mode === 'editing';
 
@@ -374,7 +392,16 @@ export default function Diary() {
           <BookOpen className="w-6 h-6 text-violet-500" />
           My Diary
         </h1>
-        <p className="text-sm text-muted-foreground mt-0.5">How are you feeling today?</p>
+        <div className="flex items-center justify-between mt-0.5">
+          <p className="text-sm text-muted-foreground">How are you feeling today?</p>
+          <Button 
+            variant="link" 
+            className="h-auto p-0 text-violet-600 text-xs font-bold"
+            onClick={() => document.getElementById('previous-entries')?.scrollIntoView({ behavior: 'smooth' })}
+          >
+            View History ↓
+          </Button>
+        </div>
       </div>
 
       {/* 7-day Mood Trend */}
@@ -391,12 +418,27 @@ export default function Diary() {
               </Badge>
             )}
           </div>
-          <MoodChart entries={entries} />
+          <MoodChart 
+            entries={entries} 
+            onDateSelect={(dateStr) => {
+              const el = document.getElementById(`entry-${dateStr}`);
+              if (el) {
+                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                el.classList.add('ring-2', 'ring-violet-400', 'ring-offset-2');
+                setTimeout(() => el.classList.remove('ring-2', 'ring-violet-400', 'ring-offset-2'), 2000);
+              } else if (dateStr === todayStr) {
+                document.getElementById('today-section')?.scrollIntoView({ behavior: 'smooth' });
+              } else {
+                toast.info(`No entry found for ${format(parseISO(dateStr), 'MMM d')}`);
+              }
+            }}
+          />
         </div>
       )}
 
       {/* Today: success card OR inline form */}
-      <AnimatePresence mode="wait">
+      <div id="today-section">
+        <AnimatePresence mode="wait">
         {showSuccessCard ? (
           <motion.div
             key="success"
@@ -538,19 +580,22 @@ export default function Diary() {
           </motion.div>
         ) : null}
       </AnimatePresence>
+    </div>
 
       {/* Past Entries */}
       {entries.filter(e => e.date !== todayStr).length > 0 && (
         <div className="space-y-3">
-          <p className="text-xs font-bold text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
+          <p id="previous-entries" className="text-xs font-bold text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
             <Calendar className="w-3.5 h-3.5" />
             Previous entries
           </p>
           <div className="space-y-2">
             {entries
               .filter(e => e.date !== todayStr)
               .map(entry => (
-                <EntryCard key={entry.id} entry={entry} onEdit={openPastEdit} />
+                <div key={entry.id} id={`entry-${entry.date}`}>
+                  <EntryCard entry={entry} onEdit={openPastEdit} />
+                </div>
               ))}
           </div>
         </div>

src/pages/Landing.jsx

@@ -178,6 +178,15 @@ export default function Landing() {
           >
             See how it works
           </motion.button>
+          <motion.button
+            whileHover={{ scale: 1.05, shadow: "0px 10px 30px rgba(30, 45, 78, 0.2)" }}
+            whileTap={{ scale: 0.95 }}
+            onClick={() => scrollTo('reviews-section')}
+            style={{ backgroundColor: '#1E2D4E' }}
+            className="text-white px-8 py-4 rounded-xl font-medium text-lg hover:opacity-90 transition-all shadow-lg shadow-slate-900/10"
+          >
+            Leave a review
+          </motion.button>
         </motion.div>
       </section>
       </div>{/* end hero gradient wrapper */}
@@ -320,7 +329,7 @@ export default function Landing() {
       </section>
 
       {/* Reviews Section */}
-      <section className="px-8 py-32 bg-primary/5">
+      <section id="reviews-section" className="px-8 py-32 bg-primary/5">
         <div className="max-w-3xl mx-auto">
           <motion.div
             initial={{ y: 30, opacity: 0 }}

src/pages/Myday.jsx

@@ -2,19 +2,18 @@
 // This is the daily schedule/timeline view (medications, appointments).
 // The "Diary" name now belongs to the mood & journal feature.
 
-import { useState, useMemo, useEffect } from 'react';
+import { useState, useMemo } from 'react';
 import { apiClient } from '@/api/client';
 import { useAuth } from '@/lib/AuthContext';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Checkbox } from '@/components/ui/checkbox';
-import { ChevronLeft, ChevronRight, Pill, Calendar as CalIcon, Clock, FileText, CheckCircle2, Pencil } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Pill, Clock, FileText, Pencil } from 'lucide-react';
 import { 
   format, isSameDay, isWithinInterval, parseISO, addMonths, subMonths, 
-  startOfMonth, endOfMonth, eachDayOfInterval, getDay, startOfDay, addDays, 
-  subDays, isToday, startOfWeek, endOfWeek 
+  startOfMonth, endOfMonth, eachDayOfInterval, getDay, addDays, 
+  subDays, isToday 
 } from 'date-fns';
 import { motion, AnimatePresence } from 'framer-motion';
 import { toast } from 'sonner';
@@ -29,8 +28,18 @@ const TYPE_COLORS = {
   medicationDone: 'bg-green-100 border-green-300 text-green-800',
   appointment: 'bg-emerald-100 border-emerald-200 text-emerald-700',
   form: 'bg-amber-100 border-amber-200 text-amber-700',
+  diary: 'bg-violet-100 border-violet-200 text-violet-700',
 };
 
+const MOODS = [
+  { value: 1, emoji: '😞', label: 'Rough', color: '#ef4444' },
+  { value: 2, emoji: '😕', label: 'Low',   color: '#f97316' },
+  { value: 3, emoji: '😐', label: 'Okay',  color: '#eab308' },
+  { value: 4, emoji: '🙂', label: 'Good',  color: '#84cc16' },
+  { value: 5, emoji: '😄', label: 'Great', color: '#22c55e' },
+];
+const getMood = (v) => MOODS.find(m => m.value === v) || MOODS[2];
+
 const getEventColor = (event) => {
   if (event.type === 'medication') {
     return event.completed ? TYPE_COLORS.medicationDone : TYPE_COLORS.medication;
@@ -75,6 +84,16 @@ export default function MyDay() {
     initialData: [],
   });
 
+  const { data: diaryEntries } = useQuery({
+    queryKey: ['my-diary', user?.email],
+    queryFn: async () => {
+      const all = await apiClient.entities.DiaryEntry.filter();
+      return all.filter(e => e.patient_email === user?.email);
+    },
+    enabled: !!user?.email,
+    initialData: [],
+  });
+
   const toggleMedication = useMutation({
     mutationFn: async ({ task, dateStr }) => {
       const completed = task.completed_dates || [];
@@ -129,6 +148,19 @@ export default function MyDay() {
       }
     });
 
+    diaryEntries.forEach(e => {
+      if (e.date === dateStr) {
+        events.push({
+          id: `diary-${e.id}`,
+          type: 'diary',
+          title: `Diary: ${getMood(e.mood_score).label}`,
+          time: '08:00',
+          duration: 45,
+          data: e,
+        });
+      }
+    });
+
     return events.sort((a, b) => a.time.localeCompare(b.time));
   }, [medications, appointments, selectedDate]);
 
@@ -226,22 +258,34 @@ export default function MyDay() {
               </div>
             </div>
             <div className="grid grid-cols-7 gap-y-1 text-center">
-              {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map(d => (
-                <div key={d} className="text-[10px] font-bold text-muted-foreground/60 uppercase">{d}</div>
+              {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d, i) => (
+                <div key={`${d}-${i}`} className="text-[10px] font-bold text-muted-foreground/60 uppercase">{d}</div>
               ))}
               {Array.from({ length: startPadding }).map((_, i) => <div key={`pad-${i}`} />)}
-              {calendarDays.map(day => (
-                <button
-                  key={day.toISOString()}
-                  onClick={() => setSelectedDate(day)}
-                  className={`text-xs h-8 w-8 rounded-full flex items-center justify-center transition-all ${
-                    isSameDay(day, selectedDate) ? 'bg-primary text-primary-foreground font-bold' :
-                    isToday(day) ? 'text-primary font-bold' : 'hover:bg-muted text-foreground/80'
-                  }`}
-                >
-                  {format(day, 'd')}
-                </button>
-              ))}
+              {calendarDays.map(day => {
+                const dayStr = format(day, 'yyyy-MM-dd');
+                const hasDiary = diaryEntries.some(e => e.date === dayStr);
+                const mood = hasDiary ? getMood(diaryEntries.find(e => e.date === dayStr).mood_score) : null;
+                
+                return (
+                  <button
+                    key={day.toISOString()}
+                    onClick={() => setSelectedDate(day)}
+                    className={`text-xs h-8 w-8 rounded-full flex flex-col items-center justify-center transition-all relative ${
+                      isSameDay(day, selectedDate) ? 'bg-primary text-primary-foreground font-bold' :
+                      isToday(day) ? 'text-primary font-bold' : 'hover:bg-muted text-foreground/80'
+                    }`}
+                  >
+                    {format(day, 'd')}
+                    {hasDiary && (
+                      <div 
+                        className="absolute bottom-1 w-1 h-1 rounded-full" 
+                        style={{ backgroundColor: mood.color }}
+                      />
+                    )}
+                  </button>
+                );
+              })}
             </div>
           </motion.div>