[Enhancement] Dashboard UI/UX Improvements

frontend/package.json

@@ -15,7 +15,11 @@
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toast": "^1.2.14",

frontend/src/Components/DashBoard/ActivityHeatMap.jsx

@@ -1,38 +1,62 @@
 import React from "react";
 import { ResponsiveCalendar } from "@nivo/calendar";
+import { Card, CardHeader, CardContent } from "@/Components/ui/Card";
+
+export default function ActivityHeatmap({
+  activityData = [],
+  className = "",
+  onAddActivity,
+}) {
+  // Prepare data in {day: 'YYYY-MM-DD', value: n} format
+  const data = activityData.map((date) => ({ day: date, value: 1 }));
+
+  const handleClick = (day) => {
+    if (onAddActivity) {
+      onAddActivity(day); // parent will handle backend call & state update
+    }
+  };
 
-export default function ActivityHeatmap({ activityData, className = "" }) {
   return (
-  <div className={`bg-[var(--card)] rounded-xl shadow p-4 w-full ${className}`}>
-  <h3 className="text-lg font-semibold text-center text-[var(--primary)]">Activity</h3>
-      <div className="h-64 min-h-[40px] w-full overflow-x-auto">
-        <div className="min-w-[700px] h-full">
-        <ResponsiveCalendar
-          data={activityData}
-          from="2025-01-01"
-          to="2025-12-31"
-          emptyColor="#eeeeee"
-          colors={["#d6e685", "#8cc665", "#44a340", "#1e6823"]}
-          margin={{ top: 10, right: 10, bottom: 10, left: 50 }}
-          yearSpacing={40}
-          monthBorderColor="#ffffff"
-          dayBorderWidth={2}
-          dayBorderColor="#ffffff"
-          legends={[
-            {
-              anchor: "bottom-right",
-              direction: "row",
-              translateY: 36,
-              itemCount: 4,
-              itemWidth: 34,
-              itemHeight: 14,
-              itemsSpacing: 4,
-              itemDirection: "left-to-right",
-            },
-          ]}
-        />
-      </div>
-    </div>
-</div>
+    <Card className={`w-full ${className}`}>
+      <CardHeader>
+        <h3 className="text-lg font-semibold text-center text-[var(--primary)]">
+          Activity
+        </h3>
+      </CardHeader>
+      <CardContent className="p-2 overflow-x-auto">
+        <div className="min-w-[700px] h-64">
+          <ResponsiveCalendar
+            data={data}
+            from="2025-01-01"
+            to="2025-12-31"
+            emptyColor="var(--calendar-empty)"
+            colors={[
+              "var(--calendar-level-1)",
+              "var(--calendar-level-2)",
+              "var(--calendar-level-3)",
+              "var(--calendar-level-4)",
+            ]}
+            dayBorderWidth={2}
+            dayBorderColor="var(--calendar-day-border)"
+            monthBorderColor="var(--calendar-month-border)"
+            margin={{ top: 10, right: 10, bottom: 10, left: 40 }}
+            yearSpacing={40}
+            onClick={(day) => handleClick(day)}
+            legends={[
+              {
+                anchor: "bottom-right",
+                direction: "row",
+                translateY: 36,
+                itemCount: 4,
+                itemWidth: 34,
+                itemHeight: 14,
+                itemsSpacing: 4,
+                itemDirection: "left-to-right",
+              },
+            ]}
+          />
+        </div>
+      </CardContent>
+    </Card>
   );
 }

frontend/src/Components/DashBoard/GoalsCard.jsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import CardWrapper from "./CardWrapper";
+import { Card, CardHeader, CardContent } from "@/Components/ui/Card";
+import { Input } from "@/Components/ui/input";
 
 export default function GoalsCard({ goals = [], onGoalsChange }) {
   const [editingIndex, setEditingIndex] = useState(null);
@@ -13,7 +14,6 @@ export default function GoalsCard({ goals = [], onGoalsChange }) {
   const saveEdit = (i) => {
     let updated = [...goals];
     if (i === goals.length) {
-      // new goal
       if (draft.trim()) updated.push(draft.trim());
     } else {
       updated[i] = draft.trim() || goals[i];
@@ -24,54 +24,58 @@ export default function GoalsCard({ goals = [], onGoalsChange }) {
   };
 
   return (
-    <CardWrapper className="p-6">
-  <h3 className="font-semibold mb-2 text-[var(--primary)]">Goals</h3>
+    <Card className="w-full sm:w-auto p-4 sm:p-6 hover:shadow-lg transition-shadow duration-200">
+      <CardHeader>
+        <h3 className="font-semibold text-[var(--primary)]">Goals</h3>
+      </CardHeader>
+      <CardContent className="flex flex-col space-y-2 text-sm text-[var(--card-foreground)]">
+        <ul className="space-y-2">
+          {goals.map((goal, i) => (
+            <li key={i}>
+              {editingIndex === i ? (
+                <Input
+                  type="text"
+                  value={draft}
+                  onChange={(e) => setDraft(e.target.value)}
+                  onBlur={() => saveEdit(i)}
+                  onKeyDown={(e) => e.key === "Enter" && saveEdit(i)}
+                  autoFocus
+                  placeholder="Edit goal..."
+                  className="w-full"
+                />
+              ) : (
+                <span
+                  className="cursor-pointer hover:underline"
+                  onClick={() => startEditing(i, goal)}
+                >
+                  {goal}
+                </span>
+              )}
+            </li>
+          ))}
+        </ul>
 
-  <ul className="space-y-2 text-sm text-[var(--card-foreground)]">
-        {goals.map((goal, i) => (
-          <li key={i}>
-            {editingIndex === i ? (
-              <input
-                type="text"
-                value={draft}
-                onChange={(e) => setDraft(e.target.value)}
-                onBlur={() => saveEdit(i)}
-                onKeyDown={(e) => e.key === "Enter" && saveEdit(i)}
-                autoFocus
-                className="border border-[var(--input)] rounded px-2 py-1 text-sm w-full bg-[var(--card)] text-[var(--card-foreground)]"
-              />
-            ) : (
-              <span
-                className="cursor-pointer hover:underline"
-                onClick={() => startEditing(i, goal)}
-              >
-                {goal}
-              </span>
-            )}
-          </li>
-        ))}
-      </ul>
-
-      {/* Add new goal row */}
-      {editingIndex === goals.length ? (
-        <input
-          type="text"
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onBlur={() => saveEdit(goals.length)}
-          onKeyDown={(e) => e.key === "Enter" && saveEdit(goals.length)}
-          autoFocus
-          className="border border-[var(--input)] rounded px-2 py-1 text-sm w-full mt-2 bg-[var(--card)] text-[var(--card-foreground)]"
-          placeholder="New goal..."
-        />
-      ) : (
-        <button
-          onClick={() => startEditing(goals.length, "")}
-          className="text-[var(--primary)] text-sm mt-2 hover:underline"
-        >
-          + Add Goal
-        </button>
-      )}
-    </CardWrapper>
+        {/* Add new goal */}
+        {editingIndex === goals.length ? (
+          <Input
+            type="text"
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onBlur={() => saveEdit(goals.length)}
+            onKeyDown={(e) => e.key === "Enter" && saveEdit(goals.length)}
+            autoFocus
+            placeholder="New goal..."
+            className="w-full mt-2"
+          />
+        ) : (
+          <button
+            onClick={() => startEditing(goals.length, "")}
+            className="text-[var(--primary)] text-sm mt-2 hover:underline self-start"
+          >
+            + Add Goal
+          </button>
+        )}
+      </CardContent>
+    </Card>
   );
 }

frontend/src/Components/DashBoard/NotesCard.jsx

@@ -1,5 +1,7 @@
 import { useState } from "react";
-import CardWrapper from "./CardWrapper";
+import { Card, CardHeader, CardContent } from "@/Components/ui/Card";
+import { Button } from "@/Components/ui/button";
+import { Input } from "@/Components/ui/input";
 
 export default function NotesCard({ notes = [], onNotesChange }) {
   const [newNote, setNewNote] = useState("");
@@ -33,74 +35,84 @@ export default function NotesCard({ notes = [], onNotesChange }) {
   };
 
   return (
-    <CardWrapper className="p-6">
-      <h3 className="font-semibold mb-2">Notes</h3>
+    <Card className="p-4 sm:p-6 w-full sm:w-auto hover:shadow-lg transition-shadow duration-200">
+      <CardHeader>
+        <h3 className="font-semibold text-[var(--primary)]">Notes</h3>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        {notes.length > 0 ? (
+          <ul className="space-y-2 text-sm text-[var(--card-foreground)]">
+            {notes.map((note, i) => (
+              <li
+                key={i}
+                className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2"
+              >
+                {editingIndex === i ? (
+                  <>
+                    <Input
+                      type="text"
+                      value={editingValue}
+                      onChange={(e) => setEditingValue(e.target.value)}
+                      autoFocus
+                      className="flex-1"
+                    />
+                    <div className="flex gap-2 mt-2 sm:mt-0">
+                      <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => saveEdit(i)}
+                      >
+                        Save
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => setEditingIndex(null)}
+                      >
+                        Cancel
+                      </Button>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <span
+                      className="cursor-pointer hover:underline flex-1"
+                      onClick={() => startEditing(i)}
+                    >
+                      {note}
+                    </span>
+                    <Button
+                      size="sm"
+                      variant="destructive"
+                      onClick={() => removeNote(i)}
+                    >
+                      ✕
+                    </Button>
+                  </>
+                )}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="text-[var(--muted-foreground)] text-sm italic">
+            No notes yet.
+          </p>
+        )}
 
-      {notes.length > 0 ? (
-  <ul className="space-y-2 text-sm text-[var(--card-foreground)]">
-          {notes.map((note, i) => (
-            <li key={i} className="flex justify-between items-center gap-2">
-              {editingIndex === i ? (
-                <>
-                  <input
-                    type="text"
-                    value={editingValue}
-                    onChange={(e) => setEditingValue(e.target.value)}
-                    className="border border-[var(--input)] rounded px-2 py-1 text-sm flex-1 bg-[var(--card)] text-[var(--card-foreground)]"
-                    autoFocus
-                  />
-                  <button
-                    onClick={() => saveEdit(i)}
-                    className="text-[var(--accent)] text-xs"
-                  >
-                    Save
-                  </button>
-                  <button
-                    onClick={() => setEditingIndex(null)}
-                    className="text-[var(--muted-foreground)] text-xs"
-                  >
-                    Cancel
-                  </button>
-                </>
-              ) : (
-                <>
-                  <span
-                    className="cursor-pointer hover:underline flex-1"
-                    onClick={() => startEditing(i)}
-                  >
-                    {note}
-                  </span>
-                  <button
-                    className="text-[var(--destructive)] text-xs"
-                    onClick={() => removeNote(i)}
-                  >
-                    ✕
-                  </button>
-                </>
-              )}
-            </li>
-          ))}
-        </ul>
-      ) : (
-  <p className="text-[var(--muted-foreground)] text-sm italic">No notes yet.</p>
-      )}
-
-      {/* Add new note */}
-      <div className="flex gap-2 mt-4">
-  <input
-    type="text"
-    value={newNote}
-    onChange={(e) => setNewNote(e.target.value)}
-    placeholder="Add a new note..."
-    className="border border-[var(--input)] rounded px-1 h-8 text-sm flex-1 bg-[var(--card)] text-[var(--card-foreground)]"
-  />
-  <button
-    onClick={addNote}
-    className="bg-[var(--primary)] text-[var(--primary-foreground)] px-2 md:px-4 h-8 rounded text-sm"
-  >
-    Add
-  </button>
-</div>
-    </CardWrapper>
+        {/* Add new note */}
+        <div className="flex flex-col sm:flex-row gap-2 mt-3">
+          <Input
+            type="text"
+            value={newNote}
+            onChange={(e) => setNewNote(e.target.value)}
+            placeholder="Add a new note..."
+            className="flex-1"
+          />
+          <Button onClick={addNote} className="sm:w-auto w-full">
+            Add
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
   );
 }