simplified sorting

Author: chaitanyakadu

apps/frontend/app/(app)/dashboard/page.tsx

@@ -30,7 +30,7 @@ export default function Page() {
             />
           ) : (
             // @ts-ignore
-            <CustomTable userHistory={userHistory} />
+            <CustomTable userHistory={[...userHistory].reverse()} />
           )}
         </div>
       </div>

apps/frontend/components/composite/custom-table.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 
 import {
   Table,
@@ -36,17 +36,11 @@ export default function CustomTable({
 }: {
   userHistory: Array<UserHistory>;
 }) {
-  const [userHistoryArr, setUserHistoryArr] =
-    useState<Array<UserHistory>>(userHistory);
   const PAGE_SIZE = 10;
 
-  useEffect(() => {
-    setUserHistoryArr([...userHistory].reverse());
-  }, [userHistory]);
-
   const [page, setPage] = useState(1);
 
-  const total = userHistoryArr?.length ?? 0;
+  const total = userHistory?.length ?? 0;
   const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
   // Clamp page if data changes
   const currentPage = Math.min(page, totalPages);
@@ -55,13 +49,13 @@ export default function CustomTable({
     const startIdx = (currentPage - 1) * PAGE_SIZE;
     const endIdx = startIdx + PAGE_SIZE;
     return {
-      rows: (userHistoryArr ?? []).slice(startIdx, endIdx),
+      rows: (userHistory ?? []).slice(startIdx, endIdx),
       start: startIdx + 1,
       end: Math.min(endIdx, total),
     };
-  }, [currentPage, userHistoryArr, total]);
+  }, [currentPage, userHistory, total]);
 
-  if (!userHistoryArr || userHistoryArr.length === 0) {
+  if (!userHistory || userHistory.length === 0) {
     return (
       <div className="mx-4 lg:mx-6 flex items-center justify-center rounded-lg border border-zinc-200 bg-white p-10 text-sm text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400">
         No history yet.

apps/frontend/components/composite/leads-counter.tsx

@@ -1,9 +1,17 @@
 // components/Stopwatch.tsx
 "use client";
 
-export default function LeadsCount({ count }: { count: number }) {
+export default function LeadsCount({
+  count,
+  state,
+}: {
+  count: number;
+  state: any;
+}) {
   return (
-    <div className="w-full max-w-md mx-auto p-5 rounded-2xl bg-gradient-to-r from-green-600/95 to-emerald-500/95 shadow-xl backdrop-blur-sm border border-white/10">
+    <div
+      className={`w-full max-w-md mx-auto p-5 rounded-2xl ${state.metaData.maxLeads.value > count ? "bg-gradient-to-r from-green-600/95 to-emerald-500/95" : "bg-neutral-200"} shadow-xl backdrop-blur-sm border border-white/10`}
+    >
       <div className="flex flex-col items-center gap-2">
         {/* stopwatch / uptime */}
         <div className="text-5xl md:text-6xl font-mono font-extrabold text-white drop-shadow-md tracking-wider">

apps/frontend/components/sections/service-monitor.tsx

@@ -18,10 +18,7 @@ import LeadsCount from "../composite/leads-counter";
 import CustomTable from "../composite/custom-table";
 import { usePathname } from "next/navigation";
 
-export default function ServiceMonitor({
-  setServiceRunning,
-  state
-}: any) {
+export default function ServiceMonitor({ setServiceRunning, state }: any) {
   const [messages, socket, status] = useSocket();
   const pathname = usePathname();
   const oldPathname = pathname;
@@ -115,15 +112,15 @@ export default function ServiceMonitor({
 
         <div className="grid grid-cols-2 gap-6">
           {/* @ts-ignore */}
-          <Stopwatch count={messages.length} state={state}/>
+          <Stopwatch count={messages.length} state={state} />
           {/* @ts-ignore */}
-          <LeadsCount count={messages.length} />
+          <LeadsCount count={messages.length} state={state} />
         </div>
 
         <hr className="border-t border-zinc-100 dark:border-zinc-800" />
 
         {/* @ts-ignore */}
-        <CustomTable userHistory={messages} />
+        <CustomTable userHistory={[...messages].reverse()} />
       </CardContent>
     </Card>
   );