fix router error

client/.env

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

client/package.json

@@ -15,6 +15,7 @@
     "@tailwindcss/vite": "^4.3.0",
     "@tanstack/react-query": "^5.100.14",
     "@tanstack/react-query-devtools": "^5.101.0",
+    "@vercel/analytics": "^2.0.1",
     "axios": "^1.16.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

client/src/components/Breadcrumb.jsx

@@ -1,29 +1,33 @@
-import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbLink, BreadcrumbPage } from "./ui/breadcrumb";
+import { Fragment } from "react";
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbSeparator,
+  BreadcrumbLink,
+  BreadcrumbPage,
+} from "./ui/breadcrumb";
 import { Link } from "react-router";
 
-
-export default function Breadcrumbs({crumbs}) {
-    return (
-      <Breadcrumb>
-        <BreadcrumbList>
-          {crumbs.map((item, index) => (
-            <BreadcrumbItem
-              key={item.href}
-
-            >
+export default function Breadcrumbs({ crumbs }) {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        {crumbs.map((item, index) => (
+          <Fragment key={item.href}>
+            <BreadcrumbItem key={item.href}>
               {index === crumbs.length - 1 ? (
-                <BreadcrumbPage>
-                  {item.name}
-                </BreadcrumbPage>
+                <BreadcrumbPage>{item.name}</BreadcrumbPage>
               ) : (
                 <BreadcrumbLink asChild={true}>
                   <Link to={item.href}>{item.name}</Link>
                 </BreadcrumbLink>
               )}
-              {index < crumbs.length - 1 && <BreadcrumbSeparator />}
             </BreadcrumbItem>
-          ))}
-        </BreadcrumbList>
-      </Breadcrumb>
-    );
-};
+            {index < crumbs.length - 1 && <BreadcrumbSeparator />}
+          </Fragment>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}

client/src/components/dashboard/AddForm.jsx

@@ -49,7 +49,7 @@ const AddForm = ({ rates, isError, mutation }) => {
       name: "",
       amount: undefined,
       currency: "",
-      duration: "",
+      billingCycle: "",
       category: "",
     },
   });
@@ -65,7 +65,9 @@ const AddForm = ({ rates, isError, mutation }) => {
     // We swap React Router's <Form> action logic for RHF's handleSubmit
     <form onSubmit={handleSubmit(onSubmit)}>
       {mutation.isError && (
-        <p className="mb-4 text-sm text-red-500 bg-red-200 p-2 rounded-md">{mutation.error.message}</p>
+        <p className="mb-4 text-sm text-red-500 bg-red-200 p-2 rounded-md">
+          {mutation.error.message}
+        </p>
       )}
       <FieldSet>
         <FieldGroup>

client/src/components/dashboard/Overview.jsx

@@ -232,7 +232,7 @@ export function OverviewTable({ subscriptions, baseCurrency }) {
   // ensure we always have an array to pass down to Desktop/Mobile
 
 
-  console.log(subscriptions);
+
   return (
     <Card className="rounded-3xl border-subly-border bg-subly-card shadow-sm mt-6">
 

client/src/components/dashboard/Stats.jsx

@@ -23,7 +23,7 @@ const toneStyles = {
 
 export function StatCard({ stat , baseCurrency }) {
 
-  console.log("StatCard received stat:", stat);
+
 
   return (
     <>

client/src/lib/utils.js

@@ -7,7 +7,7 @@ export function cn(...inputs) {
 }
 
 export function getApiBaseUrl() {
-  return import.meta.env.VITE_API_URL || "http://localhost:3000";
+  return import.meta.env.VITE_API_URL;
 }
 
 export function formatMoney(amountInMinorUnit, currency) {

client/src/main.jsx

@@ -21,7 +21,7 @@ import NotFound from "./pages/NotFound";
 import { adminLoader, authLoader, dashboardLoader } from "./lib/loader.js";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-
+import { Analytics } from "@vercel/analytics/react";
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -90,6 +90,7 @@ createRoot(document.getElementById("root")).render(
       <RouterProvider router={router} />
 
       <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
+      <Analytics />
     </QueryClientProvider>
   </StrictMode>,
 );

client/src/pages/dashboard/Admin.jsx

@@ -1,5 +1,12 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { ShieldCheck, Users, CreditCard, History, RefreshCw } from "lucide-react";
+import {
+  ShieldCheck,
+  Users,
+  CreditCard,
+  History,
+  RefreshCw,
+  Shield,
+} from "lucide-react";
 import { toast } from "sonner";
 
 import Breadcrumbs from "@/components/Breadcrumb";
@@ -22,32 +29,57 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { fetchWithAuth, formatDate } from "@/lib/utils";
+import { toneStyles } from "@/lib/var";
 
 const metricCards = [
   {
     key: "users",
     label: "Total users",
     icon: Users,
     getValue: (stats) => stats?.users?.total ?? 0,
+
+    color: "blue",
+  },
+  {
+    key: "admin",
+    label: "Total user with admin role",
+    icon: Shield,
+    getValue: (stats) => stats?.totalUserByRoles?.ADMIN ?? 0,
+
+    color: "success",
+  },
+  {
+    key: "user",
+    label: "Total user with user role",
+    icon: Users,
+    getValue: (stats) => stats?.totalUserByRoles?.USER ?? 0,
+
+    color: "danger",
   },
   {
     key: "subscriptions",
-    label: "Subscriptions",
+    label: "Total Subscriptions",
     icon: CreditCard,
     getValue: (stats) => stats?.subscriptions?.total ?? 0,
+
+    color: "purple",
   },
   {
     key: "history",
     label: "History records",
     icon: History,
     getValue: (stats) => stats?.history?.total ?? 0,
+    color: "purple",
   },
   {
     key: "currency",
     label: "Rates updated",
     icon: RefreshCw,
     getValue: (stats) =>
-      stats?.currency?.lastUpdated ? formatDate(stats.currency.lastUpdated) : "N/A",
+      stats?.currency?.lastUpdated
+        ? formatDate(stats.currency.lastUpdated)
+        : "N/A",
+    color: "danger",
   },
 ];
 
@@ -56,15 +88,23 @@ function AdminMetricCard({ item, stats }) {
 
   return (
     <Card className="rounded-xl border-subly-border bg-subly-card shadow-sm">
-      <CardContent className="flex items-center gap-4 pt-2">
+      <CardContent className="flex flex-row-reverse justify-between items-center gap-4 pt-2">
         <span className="flex h-11 w-11 items-center justify-center rounded-xl bg-subly-soft-blue text-subly-brand-blue">
           <Icon size={20} />
         </span>
         <div>
-          <p className="text-sm text-subly-text-secondary">{item.label}</p>
-          <p className="mt-1 text-xl font-bold text-subly-text-primary">
+          <p className="text-sm text-subly-text-secondary font-medium capitalize">
+            {item.key}
+          </p>
+          <p className="mt-3 text-3xl font-bold tracking-tight text-subly-text-primary">
             {item.getValue(stats)}
           </p>
+          <p className="mt-2 flex items-center gap-2 text-xs font-medium text-subly-text-secondary">
+            <span
+              className={`h-2 w-2 rounded-full ${toneStyles[item.color].dot}`}
+            />
+            {item.label}
+          </p>
         </div>
       </CardContent>
     </Card>
@@ -184,12 +224,14 @@ export default function Admin() {
                   <TableHead>Name</TableHead>
                   <TableHead>Username</TableHead>
                   <TableHead>Email</TableHead>
+                  <TableHead>Roles</TableHead>
                   <TableHead className="text-right">Role actions</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 {users.map((user) => {
-                  const pendingUser = roleMutation.variables?.userId === user.id;
+                  const pendingUser =
+                    roleMutation.variables?.userId === user.id;
 
                   return (
                     <TableRow key={user.id}>
@@ -198,6 +240,11 @@ export default function Admin() {
                       </TableCell>
                       <TableCell>{user.username}</TableCell>
                       <TableCell>{user.email}</TableCell>
+                      <TableCell
+                        className={`rounded-md  ${user.role === "ADMIN" ? "text-green-400" : "text-red-400"} `}
+                      >
+                        {user.role}
+                      </TableCell>
                       <TableCell>
                         <div className="flex justify-end gap-2">
                           <Button

client/src/pages/dashboard/Overview.jsx

@@ -16,19 +16,18 @@ import { useQuery } from "@tanstack/react-query";
 import { fetchWithAuth } from "@/lib/utils";
 import { SubscriptionTableSkeleton } from "@/components/dashboard/Skeleton";
 const Overview = () => {
-  const data = useRouteLoaderData("dashboard")
-
+  const data = useRouteLoaderData("dashboard");
 
   const { data: stats, isLoading } = useQuery({
     queryKey: ["subscriptions", "info"],
-    queryFn: () => fetchWithAuth("/api/subscription/info").then(res => res.json()),
-
+    queryFn: () =>
+      fetchWithAuth("/api/subscription/info").then((res) => res.json()),
   });
 
-  const { data: rawData, isLoading:subsLoading  } = useQuery({
-    queryKey: ['subscription'],
-    queryFn: ()=> fetchWithAuth('/api/subscription').then(res => res.json())
-  })
+  const { data: rawData, isLoading: subsLoading } = useQuery({
+    queryKey: ["subscription"],
+    queryFn: () => fetchWithAuth("/api/subscription").then((res) => res.json()),
+  });
 
   const { data: chartData, isLoading: chartDataLoading } = useQuery({
     queryKey: ["chart", "line chart"],
@@ -41,11 +40,6 @@ const Overview = () => {
     queryFn: () =>
       fetchWithAuth("/api/subscription/categories").then((res) => res.json()),
   });
-  console.log(pieChart);
-
-
-
-  console.log(rawData)
 
   return (
     <section>

client/src/pages/dashboard/Subscriptions.jsx

@@ -14,14 +14,11 @@ const Subscriptions = () => {
   const page = searchParams.get("page") || 1;
   const userData = useRouteLoaderData("dashboard");
   const handlePageChange = (newPage) => {
-
     searchParams.set("page", newPage);
 
-
     setSearchParams(searchParams);
   };
-  console.log("User data in Subscriptions:", userData);
-
+
   const { data, isLoading, isError, error } = useQuery({
     queryKey: ["subscriptions", { search: searchQuery, page }],
 

client/vercel.json

@@ -0,0 +1,8 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}