commit

netmanager-app/app/(authenticated)/clients/columns.tsx

@@ -42,8 +42,19 @@ export const columns = ({ onActivate, onDeactivate }: ColumnProps): ColumnDef<Cl
     accessorKey: "access_token.expires",
     header: "Token Expiry",
     cell: ({ row }) => {
-      const expires = new Date(row.getValue("access_token.expires"))
-      return expires.toLocaleDateString()
+      const accessToken = row.original.access_token
+      if (!accessToken || !accessToken.expires) return "N/A"
+      const expires = new Date(accessToken.expires)
+      if (isNaN(expires.getTime())) return "Invalid Date"
+
+      const now = new Date()
+      const diffTime = expires.getTime() - now.getTime()
+      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+
+      if (diffDays < 0) return "Expired"
+      if (diffDays === 0) return "Expires today"
+      if (diffDays === 1) return "Expires tomorrow"
+      return `Expires in ${diffDays} days`
     },
   },
   {

netmanager-app/app/(authenticated)/clients/page.tsx

@@ -9,6 +9,21 @@ import { getClientsApi, activateUserClientApi } from "@/core/apis/analytics"
 import { useToast } from "@/components/ui/use-toast"
 import type { Client } from "@/app/types/clients"
 
+const formatDate = (dateString: string | undefined): string => {
+  if (!dateString) return "N/A"
+  const date = new Date(dateString)
+  if (isNaN(date.getTime())) return "Invalid Date"
+
+  const now = new Date()
+  const diffTime = date.getTime() - now.getTime()
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+
+  if (diffDays < 0) return "Expired"
+  if (diffDays === 0) return "Expires today"
+  if (diffDays === 1) return "Expires tomorrow"
+  return `Expires in ${diffDays} days`
+}
+
 const ClientManagement = () => {
   const [clients, setClients] = useState<Client[]>([])
   const [loading, setLoading] = useState(false)
@@ -71,14 +86,30 @@ const ClientManagement = () => {
     setDeactivateDialogOpen(true)
   }
 
+  const nearestExpiringToken = clients
+    .filter((client) => client.access_token && client.access_token.expires)
+    .filter((client) => {
+      const expiryDate = new Date(client.access_token.expires)
+      return expiryDate > new Date()
+    })
+    .sort((a, b) => {
+      const dateA = new Date(a.access_token.expires).getTime()
+      const dateB = new Date(b.access_token.expires).getTime()
+      return dateA - dateB
+    })[0]
+
+  const nearestExpiryDate = nearestExpiringToken
+    ? formatDate(nearestExpiringToken.access_token.expires)
+    : "No upcoming expiries"
+
   return (
     <div className="container mx-auto py-10">
       <div className="flex justify-between items-center mb-6">
         <h1 className="text-3xl font-bold">Client Management</h1>
         <Button onClick={fetchClients}>Refresh</Button>
       </div>
 
-      <div className="grid grid-cols-2 gap-4 mb-6">
+      <div className="grid grid-cols-3 gap-4 mb-6">
         <div className="bg-green-100 p-4 rounded-lg">
           <h2 className="text-lg font-semibold">Activated Clients</h2>
           <p className="text-3xl font-bold">{activatedClients}</p>
@@ -87,6 +118,13 @@ const ClientManagement = () => {
           <h2 className="text-lg font-semibold">Deactivated Clients</h2>
           <p className="text-3xl font-bold">{deactivatedClients}</p>
         </div>
+        <div className="bg-blue-100 p-4 rounded-lg">
+          <h2 className="text-lg font-semibold">Nearest Token Expiry</h2>
+          <p className="text-xl font-bold">
+            {nearestExpiringToken ? formatDate(nearestExpiringToken.access_token.expires) : "No upcoming expiries"}
+          </p>
+          <p className="text-sm">{nearestExpiringToken?.name || "N/A"}</p>
+        </div>
       </div>
 
       <DataTable