Index: frontend/package-lock.json =================================================================== --- frontend/package-lock.json (revision 4f85b41e4eaa6d668912791fb3cff6efbe7dc1a4) +++ frontend/package-lock.json (revision e9a0543bbb622a2b343d1f5fe3b2df7ddb6a0bd3) @@ -9,4 +9,7 @@ "version": "0.0.0", "dependencies": { + "@dnd-kit/core": "^6.3.1", + "@dnd-kit/sortable": "^10.0.0", + "@dnd-kit/utilities": "^3.2.2", "@relume_io/relume-tailwind": "^1.3.0", "@relume_io/relume-ui": "^1.3.1", @@ -337,4 +340,57 @@ "integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==", "license": "MIT" + }, + "node_modules/@dnd-kit/accessibility": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz", + "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==", + "license": "MIT", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@dnd-kit/core": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz", + "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==", + "license": "MIT", + "dependencies": { + "@dnd-kit/accessibility": "^3.1.1", + "@dnd-kit/utilities": "^3.2.2", + "tslib": "^2.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@dnd-kit/sortable": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz", + "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==", + "license": "MIT", + "dependencies": { + "@dnd-kit/utilities": "^3.2.2", + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@dnd-kit/core": "^6.3.0", + "react": ">=16.8.0" + } + }, + "node_modules/@dnd-kit/utilities": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz", + "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==", + "license": "MIT", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0" + } }, "node_modules/@esbuild/aix-ppc64": { Index: frontend/package.json =================================================================== --- frontend/package.json (revision 4f85b41e4eaa6d668912791fb3cff6efbe7dc1a4) +++ frontend/package.json (revision e9a0543bbb622a2b343d1f5fe3b2df7ddb6a0bd3) @@ -11,4 +11,7 @@ }, "dependencies": { + "@dnd-kit/core": "^6.3.1", + "@dnd-kit/sortable": "^10.0.0", + "@dnd-kit/utilities": "^3.2.2", "@relume_io/relume-tailwind": "^1.3.0", "@relume_io/relume-ui": "^1.3.1", Index: frontend/src/App.jsx =================================================================== --- frontend/src/App.jsx (revision 4f85b41e4eaa6d668912791fb3cff6efbe7dc1a4) +++ frontend/src/App.jsx (revision e9a0543bbb622a2b343d1f5fe3b2df7ddb6a0bd3) @@ -20,4 +20,5 @@ import Discipline from "./pages/Dashboard/pages/Discipline/Discipline.jsx"; import DisciplineTracking from "./pages/Dashboard/pages/Discipline/DisciplineTracking.jsx"; +import CustomCategoryKanban from "./pages/Dashboard/pages/CustomCategory/CustomCategoryKanban.jsx"; function RequireAuth({ children }) { @@ -61,4 +62,5 @@ } /> } /> + } /> } /> Index: frontend/src/api/discipline.js =================================================================== --- frontend/src/api/discipline.js (revision 4f85b41e4eaa6d668912791fb3cff6efbe7dc1a4) +++ frontend/src/api/discipline.js (revision e9a0543bbb622a2b343d1f5fe3b2df7ddb6a0bd3) @@ -36,2 +36,53 @@ } +export async function getCustomTrackingCategories() { + const res = await api.get("/discipline/custom-tracking-categories"); + return res?.data; +} + +export async function createCustomTrackingCategory(payload) { + const res = await api.post("/discipline/custom-tracking-categories", payload); + return res?.data; +} + +export async function getCustomCategoryTasks(customTrackingId) { + const res = await api.get( + `/discipline/custom-tracking-categories/${customTrackingId}/tasks` + ); + return res?.data; +} + +export async function createCustomCategoryTask(customTrackingId, payload) { + const res = await api.post( + `/discipline/custom-tracking-categories/${customTrackingId}/tasks`, + payload + ); + return res?.data; +} + +export async function updateCustomCategoryTask(customTrackingId, taskId, payload) { + const res = await api.put( + `/discipline/custom-tracking-categories/${customTrackingId}/tasks/${taskId}`, + payload + ); + return res?.data; +} + +export async function updateCustomCategoryTaskFinished( + customTrackingId, + taskId, + isFinished +) { + const res = await api.patch( + `/discipline/custom-tracking-categories/${customTrackingId}/tasks/${taskId}/finished`, + { isFinished } + ); + return res?.data; +} + +export async function deleteCustomCategoryTask(customTrackingId, taskId) { + return api.delete( + `/discipline/custom-tracking-categories/${customTrackingId}/tasks/${taskId}` + ); +} + Index: frontend/src/pages/Dashboard/components/AddCustomCategoryModal.jsx =================================================================== --- frontend/src/pages/Dashboard/components/AddCustomCategoryModal.jsx (revision e9a0543bbb622a2b343d1f5fe3b2df7ddb6a0bd3) +++ frontend/src/pages/Dashboard/components/AddCustomCategoryModal.jsx (revision e9a0543bbb622a2b343d1f5fe3b2df7ddb6a0bd3) @@ -0,0 +1,101 @@ +import React, { useEffect, useMemo, useState } from "react"; +import { createPortal } from "react-dom"; + +export default function AddCustomCategoryModal({ open, onClose, onSubmit }) { + const [name, setName] = useState(""); + const [submitting, setSubmitting] = useState(false); + const [error, setError] = useState(null); + + // Reset the form whenever the modal is opened. + // NOTE: Hooks must be called in the same order on every render; do not early-return before hooks. + useEffect(() => { + if (!open) return; + setName(""); + setError(null); + setSubmitting(false); + }, [open]); + + const canSubmit = useMemo(() => { + return name.trim().length > 0 && name.trim().length <= 100 && !submitting; + }, [name, submitting]); + + async function handleSubmit(e) { + e.preventDefault(); + if (!canSubmit) return; + + setSubmitting(true); + setError(null); + try { + await onSubmit({ name: name.trim() }); + onClose?.(); + } catch (err) { + setError( + err?.response?.data?.message || + err?.message || + "Failed to create custom category" + ); + setSubmitting(false); + } + } + + if (!open) return null; + + return createPortal( +
+ +
+ +
+
+ + setName(e.target.value)} + maxLength={100} + autoFocus + className="w-full rounded-lg border border-white/10 bg-black/40 px-3 py-2 text-sm outline-none focus:border-green-400" + placeholder="e.g. My Habit Tracking" + /> +
+ {name.trim().length}/100 +
+
+ + {error ? ( +
+ {error} +
+ ) : null} + + +
+ + , + document.body + ); +} + + + Index: frontend/src/pages/Dashboard/components/DashboardSidebar.jsx =================================================================== --- frontend/src/pages/Dashboard/components/DashboardSidebar.jsx (revision 4f85b41e4eaa6d668912791fb3cff6efbe7dc1a4) +++ frontend/src/pages/Dashboard/components/DashboardSidebar.jsx (revision e9a0543bbb622a2b343d1f5fe3b2df7ddb6a0bd3) @@ -1,3 +1,3 @@ -import React from "react"; +import React, { useEffect, useMemo, useState } from "react"; import { NavLink, useLocation } from "react-router-dom"; @@ -20,7 +20,19 @@ MdChecklist, MdAdd, + MdBook, + MdFlag, + MdStar, + MdBolt, + MdNoteAlt, + MdAutoGraph, } from "react-icons/md"; import logo from "../../../assets/logo.png"; + +import AddCustomCategoryModal from "./AddCustomCategoryModal.jsx"; +import { + createCustomTrackingCategory, + getCustomTrackingCategories, +} from "../../../api/discipline.js"; const navItems = [ @@ -33,6 +45,45 @@ ]; +const CUSTOM_ICONS = [MdBook, MdFlag, MdStar, MdBolt, MdNoteAlt, MdAutoGraph]; + +function stableIconForId(id) { + const n = Number(id); + if (!Number.isFinite(n)) return CUSTOM_ICONS[0]; + return CUSTOM_ICONS[Math.abs(n) % CUSTOM_ICONS.length]; +} + const DashboardSidebar = () => { const location = useLocation(); + const [customOpen, setCustomOpen] = useState(false); + const [customCategories, setCustomCategories] = useState([]); + + useEffect(() => { + let mounted = true; + (async () => { + try { + const res = await getCustomTrackingCategories(); + const items = res?.items ?? []; + if (mounted) setCustomCategories(items); + } catch { + // If the user isn't authenticated yet or the endpoint fails, + // keep the sidebar usable (no custom categories). + if (mounted) setCustomCategories([]); + } + })(); + return () => { + mounted = false; + }; + }, []); + + const customNavItems = useMemo(() => { + return (customCategories ?? []).map((c) => { + const Icon = stableIconForId(c.customTrackingId); + return { + title: c.name, + to: `/dashboard/custom/${c.customTrackingId}`, + icon: Icon, + }; + }); + }, [customCategories]); return ( @@ -52,4 +103,46 @@ {navItems.map((item) => ( + {(() => { + const isActive = + location.pathname === item.to || + location.pathname.startsWith(`${item.to}/`); + + return ( + + + + + {item.title} + + + + ); + })()} + + ))} + + {customNavItems.length > 0 ? ( +
+ ) : null} + + {customNavItems.map((item) => ( + {(() => { const isActive = @@ -94,4 +187,5 @@ className="w-full justify-start gap-2 !bg-green-400 !text-black hover:!bg-green-500" type="button" + onClick={() => setCustomOpen(true)} > @@ -99,4 +193,13 @@
+ + setCustomOpen(false)} + onSubmit={async (payload) => { + const created = await createCustomTrackingCategory(payload); + setCustomCategories((prev) => [created, ...(prev ?? [])]); + }} + /> Index: frontend/src/pages/Dashboard/pages/CustomCategory/CustomCategoryKanban.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/CustomCategory/CustomCategoryKanban.jsx (revision e9a0543bbb622a2b343d1f5fe3b2df7ddb6a0bd3) +++ frontend/src/pages/Dashboard/pages/CustomCategory/CustomCategoryKanban.jsx (revision e9a0543bbb622a2b343d1f5fe3b2df7ddb6a0bd3) @@ -0,0 +1,128 @@ +import React, { useEffect, useMemo, useState } from "react"; +import { useParams } from "react-router-dom"; + +import { + createCustomCategoryTask, + deleteCustomCategoryTask, + getCustomCategoryTasks, + getCustomTrackingCategories, + updateCustomCategoryTask, + updateCustomCategoryTaskFinished, +} from "../../../../api/discipline.js"; + +import CustomCategoryKanbanBoard from "./components/CustomCategoryKanbanBoard"; + +export default function CustomCategoryKanban() { + const params = useParams(); + const customTrackingId = Number(params.customTrackingId); + + const [loading, setLoading] = useState(true); + const [categoryName, setCategoryName] = useState("Custom Category"); + const [tasks, setTasks] = useState([]); + const [error, setError] = useState(null); + + const lanes = useMemo(() => { + const notDone = (tasks ?? []).filter((t) => !t.isFinished); + const done = (tasks ?? []).filter((t) => t.isFinished); + return { notDone, done }; + }, [tasks]); + + async function refresh() { + setLoading(true); + setError(null); + try { + const [catsRes, tasksRes] = await Promise.all([ + getCustomTrackingCategories(), + getCustomCategoryTasks(customTrackingId), + ]); + + const cats = catsRes?.items ?? []; + const found = cats.find((c) => Number(c.customTrackingId) === customTrackingId); + setCategoryName(found?.name ?? "Custom Category"); + + setTasks(tasksRes?.tasks ?? []); + } catch (e) { + setError(e?.response?.data?.message || e?.message || "Failed to load category"); + } finally { + setLoading(false); + } + } + + useEffect(() => { + if (!Number.isFinite(customTrackingId)) { + setLoading(false); + setError("Invalid category id"); + return; + } + refresh(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [customTrackingId]); + + async function handleAddTask(name) { + const created = await createCustomCategoryTask(customTrackingId, { name }); + setTasks((prev) => [created, ...(prev ?? [])]); + } + + async function handleEditTask(taskId, name) { + const updated = await updateCustomCategoryTask(customTrackingId, taskId, { name }); + setTasks((prev) => (prev ?? []).map((t) => (t.taskId === taskId ? updated : t))); + } + + async function handleDeleteTask(taskId) { + await deleteCustomCategoryTask(customTrackingId, taskId); + setTasks((prev) => (prev ?? []).filter((t) => t.taskId !== taskId)); + } + + async function handleMoveTask(taskId, toFinished) { + // optimistic update + setTasks((prev) => + (prev ?? []).map((t) => + t.taskId === taskId ? { ...t, isFinished: toFinished } : t + ) + ); + + try { + const saved = await updateCustomCategoryTaskFinished( + customTrackingId, + taskId, + toFinished + ); + setTasks((prev) => (prev ?? []).map((t) => (t.taskId === taskId ? saved : t))); + } catch (e) { + // revert by refetching (simple + correct) + await refresh(); + throw e; + } + } + + return ( +
+
+
+

{categoryName}

+

+ Drag tickets between columns to mark them done / not done. +

+
+
+ + {error ? ( +
+ {error} +
+ ) : null} + + +
+ ); +} + + Index: frontend/src/pages/Dashboard/pages/CustomCategory/components/CustomCategoryKanbanBoard.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/CustomCategory/components/CustomCategoryKanbanBoard.jsx (revision e9a0543bbb622a2b343d1f5fe3b2df7ddb6a0bd3) +++ frontend/src/pages/Dashboard/pages/CustomCategory/components/CustomCategoryKanbanBoard.jsx (revision e9a0543bbb622a2b343d1f5fe3b2df7ddb6a0bd3) @@ -0,0 +1,238 @@ +import React, { useMemo, useState } from "react"; + +import { + DndContext, + PointerSensor, + closestCenter, + useSensor, + useSensors, +} from "@dnd-kit/core"; +import { + SortableContext, + arrayMove, + rectSortingStrategy, +} from "@dnd-kit/sortable"; + +import KanbanColumn from "./KanbanColumn"; +import TaskTicketCard from "./TaskTicketCard"; + +function laneIdForTask(task) { + return task?.isFinished ? "done" : "notDone"; +} + +export default function CustomCategoryKanbanBoard({ + loading, + notDone, + done, + onAddTask, + onEditTask, + onDeleteTask, + onMoveTask, +}) { + const [newName, setNewName] = useState(""); + const [submitting, setSubmitting] = useState(false); + + const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } })); + + // Keep a local order per lane for nicer UX, but still driven by server state. + const [notDoneOrder, setNotDoneOrder] = useState([]); + const [doneOrder, setDoneOrder] = useState([]); + + const orderedNotDone = useMemo(() => { + const byId = new Map((notDone ?? []).map((t) => [String(t.taskId), t])); + const ids = [ + ...notDoneOrder.filter((id) => byId.has(id)), + ...Array.from(byId.keys()).filter((id) => !notDoneOrder.includes(id)), + ]; + return ids.map((id) => byId.get(id)); + }, [notDone, notDoneOrder]); + + const orderedDone = useMemo(() => { + const byId = new Map((done ?? []).map((t) => [String(t.taskId), t])); + const ids = [ + ...doneOrder.filter((id) => byId.has(id)), + ...Array.from(byId.keys()).filter((id) => !doneOrder.includes(id)), + ]; + return ids.map((id) => byId.get(id)); + }, [done, doneOrder]); + + async function submitNewTask(e) { + e.preventDefault(); + const name = newName.trim(); + if (!name || submitting) return; + setSubmitting(true); + try { + await onAddTask(name); + setNewName(""); + } finally { + setSubmitting(false); + } + } + + function findTaskById(id) { + const all = [...(notDone ?? []), ...(done ?? [])]; + return all.find((t) => String(t.taskId) === String(id)); + } + + async function handleDragEnd(event) { + const { active, over } = event; + if (!over) return; + + const activeId = String(active.id); + const overId = String(over.id); + + if (activeId === overId) return; + + const task = findTaskById(activeId); + if (!task) return; + + // Moving over a column dropzone + if (overId === "lane:notDone" || overId === "lane:done") { + const toFinished = overId === "lane:done"; + if (Boolean(task.isFinished) === toFinished) return; + await onMoveTask(task.taskId, toFinished); + return; + } + + // Sorting within a lane: keep it frontend-only. + const overTask = findTaskById(overId); + if (!overTask) return; + + const fromLane = laneIdForTask(task); + const toLane = laneIdForTask(overTask); + + if (fromLane !== toLane) { + // if dropped onto a card in the other lane => treat as lane move + await onMoveTask(task.taskId, toLane === "done"); + return; + } + + if (fromLane === "notDone") { + const ids = orderedNotDone.map((t) => String(t.taskId)); + const oldIndex = ids.indexOf(activeId); + const newIndex = ids.indexOf(overId); + if (oldIndex >= 0 && newIndex >= 0 && oldIndex !== newIndex) { + setNotDoneOrder(arrayMove(ids, oldIndex, newIndex)); + } + } else { + const ids = orderedDone.map((t) => String(t.taskId)); + const oldIndex = ids.indexOf(activeId); + const newIndex = ids.indexOf(overId); + if (oldIndex >= 0 && newIndex >= 0 && oldIndex !== newIndex) { + setDoneOrder(arrayMove(ids, oldIndex, newIndex)); + } + } + } + + return ( +
+
+
+
+
+ Tickets + + Drag cards left/right to change status. + +
+
+ Tip: grab the drag handle. +
+
+ +
+ + Not done: {(notDone ?? []).length} + + + Done: {(done ?? []).length} + +
+
+ +
+ setNewName(e.target.value)} + placeholder="Add a new ticket (e.g. Fix bug #123)" + maxLength={200} + className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm outline-none focus:border-green-400" + /> + +
+
+ + +
+ + String(t.taskId))} + strategy={rectSortingStrategy} + > +
+ {loading ? ( +
Loading...
+ ) : orderedNotDone.length === 0 ? ( +
No tickets yet.
+ ) : ( + orderedNotDone.map((t) => ( + onEditTask(t.taskId, name)} + onDelete={() => onDeleteTask(t.taskId)} + /> + )) + )} +
+ + + + + String(t.taskId))} + strategy={rectSortingStrategy} + > +
+ {loading ? ( +
Loading...
+ ) : orderedDone.length === 0 ? ( +
Nothing done yet.
+ ) : ( + orderedDone.map((t) => ( + onEditTask(t.taskId, name)} + onDelete={() => onDeleteTask(t.taskId)} + /> + )) + )} +
+ + +
+ +
+ ); +} + + Index: frontend/src/pages/Dashboard/pages/CustomCategory/components/KanbanColumn.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/CustomCategory/components/KanbanColumn.jsx (revision e9a0543bbb622a2b343d1f5fe3b2df7ddb6a0bd3) +++ frontend/src/pages/Dashboard/pages/CustomCategory/components/KanbanColumn.jsx (revision e9a0543bbb622a2b343d1f5fe3b2df7ddb6a0bd3) @@ -0,0 +1,70 @@ +import React, { useMemo } from "react"; +import { useDroppable } from "@dnd-kit/core"; +import { MdCheckCircle, MdRadioButtonUnchecked } from "react-icons/md"; + +export default function KanbanColumn({ title, droppableId, count, children }) { + const { setNodeRef, isOver } = useDroppable({ id: droppableId }); + + const variant = useMemo(() => { + if (droppableId === "lane:done") { + return { + Icon: MdCheckCircle, + header: "from-emerald-500/25 via-emerald-500/10 to-transparent", + badge: "bg-emerald-500/15 text-emerald-200 border-emerald-500/30", + ring: "group-hover:ring-emerald-500/25", + drop: "border-emerald-400/60 bg-emerald-400/10", + border: "border-emerald-500/20", + }; + } + + return { + Icon: MdRadioButtonUnchecked, + header: "from-sky-500/25 via-sky-500/10 to-transparent", + badge: "bg-sky-500/15 text-sky-200 border-sky-500/30", + ring: "group-hover:ring-sky-500/25", + drop: "border-sky-400/60 bg-sky-400/10", + border: "border-sky-500/20", + }; + }, [droppableId]); + + return ( +
+
+
+
+ +

+ {title} +

+
+ + {count} + +
+
+ +
+ {children} +
+
+ ); +} + Index: frontend/src/pages/Dashboard/pages/CustomCategory/components/TaskTicketCard.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/CustomCategory/components/TaskTicketCard.jsx (revision e9a0543bbb622a2b343d1f5fe3b2df7ddb6a0bd3) +++ frontend/src/pages/Dashboard/pages/CustomCategory/components/TaskTicketCard.jsx (revision e9a0543bbb622a2b343d1f5fe3b2df7ddb6a0bd3) @@ -0,0 +1,120 @@ +import React, { useMemo, useState } from "react"; +import { useSortable } from "@dnd-kit/sortable"; +import { CSS } from "@dnd-kit/utilities"; +import { MdDelete, MdDragIndicator, MdEdit, MdSave } from "react-icons/md"; + +export default function TaskTicketCard({ task, onEdit, onDelete }) { + const id = String(task.taskId); + const { + attributes, + listeners, + setNodeRef, + transform, + transition, + isDragging, + } = useSortable({ id }); + + const style = useMemo( + () => ({ + transform: CSS.Transform.toString(transform), + transition, + }), + [transform, transition] + ); + + const [editing, setEditing] = useState(false); + const [draft, setDraft] = useState(task.name ?? ""); + + async function submitEdit(e) { + e.preventDefault(); + const next = draft.trim(); + if (!next) return; + await onEdit(next); + setEditing(false); + } + + return ( +
+
+
+ {editing ? ( +
+ setDraft(e.target.value)} + maxLength={200} + className="w-full rounded-md border border-white/10 bg-black/40 px-2 py-1 text-sm outline-none focus:border-green-400" + autoFocus + /> + +
+ ) : ( +
+ +
+ {task.name} +
+
+ )} + +
Ticket #{task.taskId}
+
+ +
+ {!editing ? ( + + ) : null} + + + + +
+
+
+ ); +} +