solved potential issue

client/.env

@@ -1 +0,0 @@
-VITE_API_URL='https://subly-backend-iuej.onrender.com'

client/src/components/Navbar.jsx

@@ -1,4 +1,4 @@
-import { NavLink } from "react-router"
+import { NavLink, useRouteLoaderData } from "react-router"
 import { navLinks } from "../lib/var"
 
 function BottomNavLink({ item }) {
@@ -36,10 +36,15 @@ function BottomNavLink({ item }) {
 }
 
 export function Navbar() {
+    const data = useRouteLoaderData("dashboard");
+    const visibleLinks = navLinks.filter(
+      (item) => !item.adminOnly || data?.user?.role === "ADMIN",
+    );
+
     return (
       <nav className="fixed bottom-0 left-0 right-0 z-50 border-t border-subly-border bg-subly-card/95 px-2 py-2 shadow-[0_-8px_30px_rgba(8,17,31,0.08)] backdrop-blur lg:hidden">
         <div className="mx-auto flex max-w-md items-center gap-1">
-          {navLinks.map((item) => (
+          {visibleLinks.map((item) => (
             <BottomNavLink key={item.path} item={item} />
           ))}
         </div>

client/src/components/Sidebar.jsx

@@ -1,4 +1,4 @@
-import { NavLink} from "react-router";
+import { NavLink, useRouteLoaderData } from "react-router";
 import { navLinks } from "../lib/var";
 import SublyLogo from "./SublyLogo";
 
@@ -40,14 +40,19 @@ function SidebarLink({ item }) {
   );
 }
 export function Sidebar() {
+  const data = useRouteLoaderData("dashboard");
+  const visibleLinks = navLinks.filter(
+    (item) => !item.adminOnly || data?.user?.role === "ADMIN",
+  );
+
   return (
     <aside className="fixed left-0 top-0 hidden h-screen w-72 border-r border-subly-border bg-subly-card px-5 py-6 lg:block">
       <div className="mb-10">
         <SublyLogo />
       </div>
 
       <nav className="space-y-2">
-        {navLinks.map((item) => (
+        {visibleLinks.map((item) => (
           <SidebarLink key={item.path} item={item} />
         ))}
       </nav>
@@ -64,4 +69,3 @@ export function Sidebar() {
     </aside>
   );
 }
-

client/src/components/dashboard/Chart.jsx

@@ -190,6 +190,11 @@ export function SpendingOverviewChart({ chartData, baseCurrency }) {
 }
 
 export function SpendingByCategoryChart({ pieChart, baseCurrency }) {
+  const categoryTotal = Array.isArray(pieChart?.categoryTotal)
+    ? pieChart.categoryTotal
+    : [];
+  const grandTotal = pieChart?.grandTotal ?? 0;
+
   return (
     <Card className="rounded-3xl border-subly-border bg-subly-card shadow-sm">
       <CardHeader>
@@ -220,15 +225,15 @@ export function SpendingByCategoryChart({ pieChart, baseCurrency }) {
               />
 
               <Pie
-                data={pieChart.categoryTotal}
+                data={categoryTotal}
                 dataKey="amount"
                 nameKey="category"
                 innerRadius={65}
                 outerRadius={92}
                 paddingAngle={4}
                 strokeWidth={0}
               >
-                {pieChart?.categoryTotal.map((item) => (
+                {categoryTotal.map((item) => (
                   <Cell
                     key={item.category}
                     fill={chartConfig[item.id]?.color || "#888888"}
@@ -243,14 +248,14 @@ export function SpendingByCategoryChart({ pieChart, baseCurrency }) {
               Total
             </p>
             <p className="text-lg font-bold text-subly-text-primary">
-              {formatMoney(pieChart?.grandTotal, baseCurrency)}
+              {formatMoney(grandTotal, baseCurrency)}
             </p>
           </div>
         </div>
 
         <div className="mt-5 space-y-3">
-          {pieChart &&
-            pieChart?.categoryTotal.map((item) => {
+          {categoryTotal.length > 0 ? (
+            categoryTotal.map((item) => {
               return (
                 <div
                   key={item.category}
@@ -277,7 +282,12 @@ export function SpendingByCategoryChart({ pieChart, baseCurrency }) {
                   </div>
                 </div>
               );
-            })}
+            })
+          ) : (
+            <p className="rounded-xl border border-dashed border-subly-border px-4 py-6 text-center text-sm text-subly-text-secondary">
+              No category spending yet.
+            </p>
+          )}
         </div>
       </CardContent>
     </Card>

client/src/components/ui/alert-dialog.jsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"

client/src/components/ui/badge.jsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+/* eslint-disable react-refresh/only-export-components */
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui"
 

client/src/components/ui/breadcrumb.jsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { Slot } from "radix-ui"
 
 import { cn } from "@/lib/utils"

client/src/components/ui/button.jsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+/* eslint-disable react-refresh/only-export-components */
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui"
 

client/src/components/ui/card.jsx

@@ -1,5 +1,3 @@
-import * as React from "react"
-
 import { cn } from "@/lib/utils"
 
 function Card({

client/src/components/ui/input.jsx

@@ -1,5 +1,3 @@
-import * as React from "react"
-
 import { cn } from "@/lib/utils"
 
 function Input({

client/src/components/ui/label.jsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { Label as LabelPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"

client/src/components/ui/pagination.jsx

@@ -1,5 +1,3 @@
-import * as React from "react"
-
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"

client/src/components/ui/select.jsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { Select as SelectPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"

client/src/components/ui/separator.jsx

@@ -1,6 +1,5 @@
 "use client"
 
-import * as React from "react"
 import { Separator as SeparatorPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"

client/src/components/ui/table.jsx

@@ -1,5 +1,3 @@
-import * as React from "react"
-
 import { cn } from "@/lib/utils"
 
 function Table({

client/src/lib/action.js

@@ -1,17 +1,16 @@
 import { redirect } from "react-router";
 import { RegisterSchemas, LoginSchemas } from "./zodType";
+import { getApiBaseUrl } from "./utils";
 
 
 export const register = async ({ request }) => {
-  const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:3000";
+  const API_BASE_URL = getApiBaseUrl();
   try {
     const formData = await request.formData();
 
     const result = Object.fromEntries(formData);
     const confirmPassword = result.confirmPassword;
 
-    console.log(result);
-
     const parsedData = RegisterSchemas.safeParse(result);
 
     if (!parsedData.success) {
@@ -31,8 +30,6 @@ export const register = async ({ request }) => {
         message: "Invalid form input",
       };
     }
-    console.log(confirmPassword);
-
     const response = await fetch(`${API_BASE_URL}/api/auth/register`, {
       method: "POST",
       headers: {
@@ -53,9 +50,7 @@ export const register = async ({ request }) => {
       };
     }
 
-    console.log(data);
-
-    return redirect("/auth/login");
+    return redirect("/dashboard");
   } catch (err) {
     console.error(err);
 
@@ -66,7 +61,7 @@ export const register = async ({ request }) => {
 };
 
 export const login = async ({ request }) => {
-  const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:3000";
+  const API_BASE_URL = getApiBaseUrl();
   try {
     const formData = await request.formData();
 
@@ -95,7 +90,6 @@ export const login = async ({ request }) => {
         message: data.message || "Login failed",
       };
     }
-    console.log(data);
     return redirect("/dashboard");
   } catch (err) {
     console.error(err);
@@ -104,4 +98,4 @@ export const login = async ({ request }) => {
       message: "Something went wrong",
     };
   }
-};
+};

client/src/lib/loader.js

@@ -9,10 +9,24 @@ export async function dashboardLoader() {
         return await response.json();
     } catch (err) {
         console.error("Error fetching user data:", err);
-        redirect("/auth/login"); // Redirect to login page if unauthorized or on error
+        return redirect("/auth/login");
    }
 }
 
+export async function adminLoader() {
+  const data = await dashboardLoader();
+
+  if (data instanceof Response) {
+    return data;
+  }
+
+  if (data?.user?.role !== "ADMIN") {
+    return redirect("/dashboard");
+  }
+
+  return data;
+}
+
 export async function authLoader() {
   try {
     const response = await fetchWithAuth("/api/me");
@@ -24,4 +38,3 @@ export async function authLoader() {
     return null;
   }
 }
-

client/src/lib/utils.js

@@ -6,6 +6,10 @@ export function cn(...inputs) {
   return twMerge(clsx(...inputs));
 }
 
+export function getApiBaseUrl() {
+  return import.meta.env.VITE_API_URL || "http://localhost:3000";
+}
+
 export function formatMoney(amountInMinorUnit, currency) {
   return new Intl.NumberFormat("en-NG", {
     style: "currency",
@@ -141,7 +145,7 @@ async function extractErrorMessage(response) {
 let refreshPromise = null;
 
 export async function fetchWithAuth(url, options = {}) {
-  const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:3000";
+  const API_BASE_URL = getApiBaseUrl();
   try {
     let response = await fetch(`${API_BASE_URL}${url}`, {
       ...options,

client/src/lib/var.js

@@ -4,6 +4,7 @@ import {
   History,
   Bell,
   Settings,
+  ShieldCheck,
 
 } from "lucide-react";
 
@@ -39,6 +40,12 @@ export const navLinks = [
     path: "/dashboard/settings",
     icon: Settings,
   },
+  {
+    label: "Admin",
+    path: "/dashboard/admin",
+    icon: ShieldCheck,
+    adminOnly: true,
+  },
 ];
 
 export const toneStyles = {
@@ -61,4 +68,3 @@ export const toneStyles = {
 };
 
 
-

client/src/main.jsx

@@ -10,13 +10,15 @@ import Overview from "./pages/dashboard/Overview.jsx";
 import Settings from "./pages/dashboard/Settings.jsx";
 import Notification from "./pages/dashboard/Notification.jsx";
 import History from "./pages/dashboard/History.jsx";
+import Admin from "./pages/dashboard/Admin.jsx";
 import Subscriptions from "./pages/dashboard/Subscriptions.jsx";
 import Dashboard from "./layout/Dashboard.jsx";
 import Add from "./pages/dashboard/subscription/Add";
 import Edit from "./pages/dashboard/subscription/Edit";
 import Error from "./pages/Error";
+import NotFound from "./pages/NotFound";
 
-import { authLoader, dashboardLoader } from "./lib/loader.js";
+import { adminLoader, authLoader, dashboardLoader } from "./lib/loader.js";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
@@ -71,9 +73,15 @@ const router = createBrowserRouter([
       { path: "subscriptions/:id/edit", element: <Edit /> },
       { path: "notifications", element: <Notification /> },
       { path: "history", element: <History /> },
+      { path: "admin", element: <Admin />, loader: adminLoader },
       { path: "settings", element: <Settings /> },
+      { path: "*", element: <NotFound /> },
     ],
   },
+  {
+    path: "*",
+    element: <NotFound />,
+  },
 ]);
 
 createRoot(document.getElementById("root")).render(

client/src/pages/NotFound.jsx

@@ -0,0 +1,23 @@
+import { Link } from "react-router";
+import { SearchX } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+export default function NotFound() {
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-subly-background px-4">
+      <div className="w-full max-w-md rounded-xl border border-subly-border bg-subly-card p-8 text-center shadow-sm">
+        <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-subly-soft-blue text-subly-brand-blue">
+          <SearchX size={26} />
+        </div>
+        <h1 className="mt-5 text-3xl font-bold text-subly-text-primary">404</h1>
+        <p className="mt-2 text-sm text-subly-text-secondary">
+          The page you are looking for does not exist.
+        </p>
+        <Button asChild className="mt-6">
+          <Link to="/dashboard">Go to dashboard</Link>
+        </Button>
+      </div>
+    </main>
+  );
+}