Changeset e9a0543 for frontend

Timestamp:

05/05/26 17:55:27 (2 months ago)

Author:

Andrej <asumanovski@…>

Branches:

master

Children:

b3d5fed

Parents:

4f85b41

Message:

Custom tracking category feature complete

Location:

frontend

Files:

• package-lock.json (modified) (2 diffs)
• package.json (modified) (1 diff)
• src/App.jsx (modified) (2 diffs)
• src/api/discipline.js (modified) (1 diff)
• src/pages/Dashboard/components/AddCustomCategoryModal.jsx (added)
• src/pages/Dashboard/components/DashboardSidebar.jsx (modified) (6 diffs)
• src/pages/Dashboard/pages/CustomCategory/CustomCategoryKanban.jsx (added)
• src/pages/Dashboard/pages/CustomCategory/components/CustomCategoryKanbanBoard.jsx (added)
• src/pages/Dashboard/pages/CustomCategory/components/KanbanColumn.jsx (added)
• src/pages/Dashboard/pages/CustomCategory/components/TaskTicketCard.jsx (added)

frontend/package-lock.json

@@ -9 +9 @@
       "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 +340 @@
       "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": {

frontend/package.json

@@ -11 +11 @@
   },
   "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",

frontend/src/App.jsx

@@ -20 +20 @@
 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 +62 @@
           <Route path="discipline" element={<Discipline />} />
            <Route path="discipline/tracking" element={<DisciplineTracking />} />
+           <Route path="custom/:customTrackingId" element={<CustomCategoryKanban />} />
         </Route>
         <Route path="*" element={<Navigate to="/" replace />} />

frontend/src/api/discipline.js

@@ -36 +36 @@
 }
 
+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}`
+  );
+}
+

frontend/src/pages/Dashboard/components/DashboardSidebar.jsx

@@ -1 @@
-import React from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 
@@ -20 +20 @@
   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 +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 +103 @@
           {navItems.map((item) => (
             <SidebarMenuItem key={item.title}>
+              {(() => {
+                const isActive =
+                  location.pathname === item.to ||
+                  location.pathname.startsWith(`${item.to}/`);
+
+                return (
+                  <SidebarMenuButton
+                    asChild
+                    isActive={isActive}
+                    className={
+                      isActive
+                        ? "!bg-green-400 !text-black hover:!bg-green-400 active:!bg-green-400"
+                        : ""
+                    }
+                  >
+                    <NavLink
+                      to={item.to}
+                      className="flex w-full items-center gap-3"
+                    >
+                      <item.icon
+                        className={
+                          isActive
+                            ? "size-6 shrink-0 text-black"
+                            : "size-6 shrink-0"
+                        }
+                      />
+                      <span className={isActive ? "text-black" : ""}>
+                        {item.title}
+                      </span>
+                    </NavLink>
+                  </SidebarMenuButton>
+                );
+              })()}
+            </SidebarMenuItem>
+          ))}
+
+          {customNavItems.length > 0 ? (
+            <div className="my-4 border-t border-white/10" />
+          ) : null}
+
+          {customNavItems.map((item) => (
+            <SidebarMenuItem key={`custom-${item.to}`}>
               {(() => {
                 const isActive =
@@ -94 +187 @@
             className="w-full justify-start gap-2 !bg-green-400 !text-black hover:!bg-green-500"
             type="button"
+            onClick={() => setCustomOpen(true)}
           >
             <MdAdd className="size-5" />
@@ -99 +193 @@
           </Button>
         </div>
+
+        <AddCustomCategoryModal
+          open={customOpen}
+          onClose={() => setCustomOpen(false)}
+          onSubmit={async (payload) => {
+            const created = await createCustomTrackingCategory(payload);
+            setCustomCategories((prev) => [created, ...(prev ?? [])]);
+          }}
+        />
       </SidebarContent>
     </Sidebar>