Dev

package.json

@@ -29,9 +29,9 @@
     "markdown-to-jsx": "^9.7.16",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
-    "react": "^19.2.6",
+    "react": "19.2.6",
     "react-day-picker": "^9.14.0",
-    "react-dom": "^19.2.6",
+    "react-dom": "19.2.6",
     "react-hook-form": "^7.75.0",
     "react-icons": "^5.6.0",
     "react-router": "^7.15.0",

src/App.css

@@ -1,16 +1,17 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
 
-@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
-
 @custom-variant dark (&:is(.dark *));
 @plugin "@tailwindcss/typography";
 
 /* ─── Prevent flash on load ─────────────────────────────────────────────── */
 html {
   color-scheme: light;
 }
+
 html.dark {
   color-scheme: dark;
 }
@@ -91,7 +92,9 @@ body {
   --color-cd-primary-subtle: var(--cd-primary-subtle);
   --color-cd-primary-text: var(--cd-primary-text);
   --color-cd-secondary: var(--cd-secondary);
+  --color-cd-secondary-subtle: var(--cd-secondary-subtle);
   --color-cd-accent: var(--cd-accent);
+  --color-cd-accent-subtle: var(--cd-accent-subtle);
   --color-cd-success: var(--cd-success);
   --color-cd-success-subtle: var(--cd-success-subtle);
   --color-cd-warning: var(--cd-warning);
@@ -143,17 +146,19 @@ body {
   --cd-surface: #ffffff;
   --cd-surface-2: #f1f5f9;
   --cd-surface-3: #eef2f7;
-  --cd-border: #e2e8f0;
-  --cd-border-subtle: #f1f5f9;
+  --cd-border: #d8e1ee;
+  --cd-border-subtle: #e9eef6;
   --cd-text: #1e293b;
-  --cd-text-2: #64748b;
-  --cd-text-muted: #94a3b8;
+  --cd-text-2: #53657d;
+  --cd-text-muted: #8392a8;
   --cd-primary: #2563eb;
   --cd-primary-hover: #1d4ed8;
   --cd-primary-subtle: #eff6ff;
   --cd-primary-text: #1d4ed8;
   --cd-secondary: #9333ea;
+  --cd-secondary-subtle: #f5f3ff;
   --cd-accent: #06b6d4;
+  --cd-accent-subtle: #ecfeff;
   --cd-success: #16a34a;
   --cd-success-subtle: #f0fdf4;
   --cd-warning: #ca8a04;
@@ -201,12 +206,12 @@ body {
   --sidebar-ring: #3b82f6;
 
   /* CommDesk design tokens – dark */
-  --cd-bg: #0f1320;
-  --cd-surface: #1a1f2e;
-  --cd-surface-2: #151929;
-  --cd-surface-3: #1e293b;
-  --cd-border: rgba(255, 255, 255, 0.08);
-  --cd-border-subtle: rgba(255, 255, 255, 0.04);
+  --cd-bg: #0b0d12;
+  --cd-surface: #11151d;
+  --cd-surface-2: #171c25;
+  --cd-surface-3: #202632;
+  --cd-border: rgba(255, 255, 255, 0.1);
+  --cd-border-subtle: rgba(255, 255, 255, 0.065);
   --cd-text: #f8fafc;
   --cd-text-2: #94a3b8;
   --cd-text-muted: #64748b;
@@ -215,14 +220,16 @@ body {
   --cd-primary-subtle: rgba(59, 130, 246, 0.12);
   --cd-primary-text: #93c5fd;
   --cd-secondary: #a855f7;
+  --cd-secondary-subtle: rgba(168, 85, 247, 0.12);
   --cd-accent: #22d3ee;
+  --cd-accent-subtle: rgba(34, 211, 238, 0.12);
   --cd-success: #4ade80;
   --cd-success-subtle: rgba(74, 222, 128, 0.1);
   --cd-warning: #facc15;
   --cd-warning-subtle: rgba(250, 204, 21, 0.1);
   --cd-danger: #f87171;
   --cd-danger-subtle: rgba(248, 113, 113, 0.1);
-  --cd-hover: rgba(255, 255, 255, 0.05);
+  --cd-hover: rgba(255, 255, 255, 0.045);
   --cd-shadow: rgba(0, 0, 0, 0.3);
   --cd-shadow-md: rgba(0, 0, 0, 0.4);
 }
@@ -236,13 +243,15 @@ body {
       border-color 0.2s ease,
       color 0.15s ease;
   }
+
   body {
     @apply bg-background text-foreground;
   }
 }
 
 /* ─── CommDesk utility classes ───────────────────────────────────────────── */
 @layer utilities {
+
   /* Cards */
   .cd-card {
     background-color: var(--cd-surface);
@@ -254,9 +263,11 @@ body {
       box-shadow 0.2s ease,
       transform 0.2s ease;
   }
+
   .cd-card:hover {
     box-shadow: 0 4px 12px var(--cd-shadow-md);
   }
+
   .cd-card-hover:hover {
     transform: translateY(-2px);
   }
@@ -285,22 +296,27 @@ body {
     font-weight: 500;
     line-height: 1.4;
   }
+
   .cd-badge-success {
     background-color: var(--cd-success-subtle);
     color: var(--cd-success);
   }
+
   .cd-badge-warning {
     background-color: var(--cd-warning-subtle);
     color: var(--cd-warning);
   }
+
   .cd-badge-danger {
     background-color: var(--cd-danger-subtle);
     color: var(--cd-danger);
   }
+
   .cd-badge-primary {
     background-color: var(--cd-primary-subtle);
     color: var(--cd-primary-text);
   }
+
   .cd-badge-neutral {
     background-color: var(--cd-surface-2);
     color: var(--cd-text-2);
@@ -320,41 +336,50 @@ body {
     transition: all 0.15s ease;
     border: 1px solid transparent;
   }
+
   .cd-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
+
   .cd-btn-primary {
     background-color: var(--cd-primary);
     color: #ffffff;
     border-color: var(--cd-primary);
   }
+
   .cd-btn-primary:hover:not(:disabled) {
     background-color: var(--cd-primary-hover);
     border-color: var(--cd-primary-hover);
   }
+
   .cd-btn-secondary {
     background-color: var(--cd-surface-2);
     color: var(--cd-text);
     border-color: var(--cd-border);
   }
+
   .cd-btn-secondary:hover:not(:disabled) {
     background-color: var(--cd-hover);
   }
+
   .cd-btn-ghost {
     background-color: transparent;
     color: var(--cd-text-2);
     border-color: transparent;
   }
+
   .cd-btn-ghost:hover:not(:disabled) {
     background-color: var(--cd-hover);
     color: var(--cd-text);
   }
+
   .cd-btn-danger {
     background-color: var(--cd-danger-subtle);
     color: var(--cd-danger);
     border-color: var(--cd-danger-subtle);
   }
+
   .cd-btn-danger:hover:not(:disabled) {
     background-color: var(--cd-danger);
     color: #ffffff;
@@ -374,13 +399,16 @@ body {
       border-color 0.15s ease,
       box-shadow 0.15s ease;
   }
+
   .cd-input::placeholder {
     color: var(--cd-text-muted);
   }
+
   .cd-input:focus {
     border-color: var(--cd-primary);
     box-shadow: 0 0 0 3px var(--cd-primary-subtle);
   }
+
   .cd-input:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -391,9 +419,11 @@ body {
     width: 100%;
     border-collapse: collapse;
   }
+
   .cd-table thead {
     background-color: var(--cd-surface-2);
   }
+
   .cd-table th {
     padding: 0.75rem 1.25rem;
     text-align: left;
@@ -404,15 +434,18 @@ body {
     letter-spacing: 0.05em;
     border-bottom: 1px solid var(--cd-border);
   }
+
   .cd-table td {
     padding: 0.875rem 1.25rem;
     font-size: 0.875rem;
     color: var(--cd-text);
     border-bottom: 1px solid var(--cd-border-subtle);
   }
+
   .cd-table tbody tr:hover {
     background-color: var(--cd-hover);
   }
+
   .cd-table tbody tr:last-child td {
     border-bottom: none;
   }
@@ -436,10 +469,12 @@ body {
     transition: all 0.15s ease;
     text-decoration: none;
   }
+
   .cd-nav-link:hover {
     background-color: var(--cd-hover);
     color: var(--cd-text);
   }
+
   .cd-nav-link.active {
     background-color: var(--cd-primary-subtle);
     color: var(--cd-primary-text);
@@ -478,16 +513,19 @@ body {
       box-shadow 0.2s ease,
       transform 0.2s ease;
   }
+
   .section-title {
     font-size: 1rem;
     font-weight: 600;
     color: var(--cd-text);
     margin-bottom: 1rem;
   }
+
   .text-muted {
     font-size: 0.875rem;
     color: var(--cd-text-2);
   }
+
   .badge-success {
     display: inline-flex;
     align-items: center;
@@ -499,6 +537,7 @@ body {
     background-color: var(--cd-success-subtle);
     color: var(--cd-success);
   }
+
   .badge-warning {
     display: inline-flex;
     align-items: center;
@@ -510,6 +549,7 @@ body {
     background-color: var(--cd-warning-subtle);
     color: var(--cd-warning);
   }
+
   .badge-default {
     display: inline-flex;
     align-items: center;
@@ -521,6 +561,16 @@ body {
     background-color: var(--cd-surface-2);
     color: var(--cd-text-2);
   }
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  .animate-\[shimmer_1\.4s_infinite\] {
+    animation: shimmer 1.4s infinite;
+  }
 }
 
 /* ─── Smooth theme transition ────────────────────────────────────────────── */
@@ -540,13 +590,35 @@ html {
   width: 6px;
   height: 6px;
 }
+
 ::-webkit-scrollbar-track {
   background: transparent;
 }
+
 ::-webkit-scrollbar-thumb {
   background-color: var(--cd-border);
   border-radius: 9999px;
 }
+
 ::-webkit-scrollbar-thumb:hover {
   background-color: var(--cd-text-muted);
 }
+
+/* ─── Custom Scrollbar Utility ───────────────────────────────────────────── */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 5px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--cd-border);
+  border-radius: 10px;
+  border: 1px solid transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--cd-primary);
+}

src/App.tsx

@@ -7,7 +7,7 @@ import "./App.css";
 import { dashboardData } from "./features/Member/v1/mock/dashboardData";
 import { startAutoUpdater } from "./system/updater/autoUpdater";
 
-import { ThemeProvider } from "next-themes";
+import { ThemeProvider } from "./theme";
 import OrgRoute from "./routes/OrgRoute";
 import MemberRoutes from "./routes/MemberRoutes";
 
@@ -19,7 +19,7 @@ function App() {
   const user = dashboardData.user;
 
   return (
-    <ThemeProvider attribute="class" defaultTheme="light">
+    <ThemeProvider>
       <BrowserRouter>
 
        <OrgRoute />

src/config/them.config.ts

@@ -3,8 +3,9 @@
 import { theme, type ThemeMode, type ThemeTokens } from "../theme/theme.config";
 
 export type { ThemeMode };
-export type Theme = ThemeTokens[ThemeMode];
+export type Theme = ThemeTokens;
 
-export function getTheme(mode: ThemeMode): Theme {
-  return theme[mode];
+/** Returns the single flat token object — CSS variables resolve per mode automatically. */
+export function getTheme(_mode?: ThemeMode): Theme {
+  return theme;
 }

src/features/Dashboard/components/AISuggestions.tsx

@@ -1,5 +1,5 @@
 import { Sparkles } from "lucide-react";
-import { Task } from "@/features/Dashboard/types/dashboard";
+import { Task } from "@/features/Dashboard/Member/v1/Type/dashboard";
 import { getAISuggestions } from "@/utils/aisuggestions";
 
 interface Props {