From cfa82b51fb1dcc628a70362914396ed45e16d7b4 Mon Sep 17 00:00:00 2001
From: Pallavi Kumari <pallavilpmt1995@gmail.com>
Date: Sat, 4 Oct 2025 12:20:46 +0530
Subject: [PATCH] refresh button in clients page

---
 src/components/ClientsDataTable.tsx |  8 +++-
 src/components/ClientsTable.tsx     | 74 +++++++++++++++++++----------
 2 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/src/components/ClientsDataTable.tsx b/src/components/ClientsDataTable.tsx
index 6242ba05..619f1fad 100644
--- a/src/components/ClientsDataTable.tsx
+++ b/src/components/ClientsDataTable.tsx
@@ -8,13 +8,17 @@ import { DataTable } from "@app/components/ui/data-table";
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
+    onRefresh?: () => void;
+    isRefreshing?: boolean;
     addClient?: () => void;
 }
 
 export function ClientsDataTable<TData, TValue>({
     columns,
     data,
-    addClient
+    addClient,
+    onRefresh,
+    isRefreshing
 }: DataTableProps<TData, TValue>) {
     return (
         <DataTable
@@ -25,6 +29,8 @@ export function ClientsDataTable<TData, TValue>({
             searchPlaceholder="Search clients..."
             searchColumn="name"
             onAdd={addClient}
+            onRefresh={onRefresh}
+            isRefreshing={isRefreshing}
             addButtonText="Add Client"
         />
     );
diff --git a/src/components/ClientsTable.tsx b/src/components/ClientsTable.tsx
index fc7c7c84..425b8395 100644
--- a/src/components/ClientsTable.tsx
+++ b/src/components/ClientsTable.tsx
@@ -25,6 +25,7 @@ import { toast } from "@app/hooks/useToast";
 import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useTranslations } from "next-intl";
 
 export type ClientRow = {
     id: number;
@@ -53,6 +54,25 @@ export default function ClientsTable({ clients, orgId }: ClientTableProps) {
     const [rows, setRows] = useState<ClientRow[]>(clients);
 
     const api = createApiClient(useEnvContext());
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const t = useTranslations();
+
+    const refreshData = async () => {
+        console.log("Data refreshed");
+        setIsRefreshing(true);
+        try {
+            await new Promise((resolve) => setTimeout(resolve, 200));
+            router.refresh();
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: t("refreshError"),
+                variant: "destructive"
+            });
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
 
     const deleteClient = (clientId: number) => {
         api.delete(`/client/${clientId}`)
@@ -207,32 +227,32 @@ export default function ClientsTable({ clients, orgId }: ClientTableProps) {
                 return (
                     <div className="flex items-center justify-end">
 
-                    <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                            <Button variant="ghost" className="h-8 w-8 p-0">
-                                <span className="sr-only">Open menu</span>
-                                <MoreHorizontal className="h-4 w-4" />
-                            </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                            {/* <Link */}
-                            {/*     className="block w-full" */}
-                            {/*     href={`/${clientRow.orgId}/settings/sites/${clientRow.nice}`} */}
-                            {/* > */}
-                            {/*     <DropdownMenuItem> */}
-                            {/*         View settings */}
-                            {/*     </DropdownMenuItem> */}
-                            {/* </Link> */}
-                            <DropdownMenuItem
-                                onClick={() => {
-                                    setSelectedClient(clientRow);
-                                    setIsDeleteModalOpen(true);
-                                }}
-                            >
-                                <span className="text-red-500">Delete</span>
-                            </DropdownMenuItem>
-                        </DropdownMenuContent>
-                    </DropdownMenu>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" className="h-8 w-8 p-0">
+                                    <span className="sr-only">Open menu</span>
+                                    <MoreHorizontal className="h-4 w-4" />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                                {/* <Link */}
+                                {/*     className="block w-full" */}
+                                {/*     href={`/${clientRow.orgId}/settings/sites/${clientRow.nice}`} */}
+                                {/* > */}
+                                {/*     <DropdownMenuItem> */}
+                                {/*         View settings */}
+                                {/*     </DropdownMenuItem> */}
+                                {/* </Link> */}
+                                <DropdownMenuItem
+                                    onClick={() => {
+                                        setSelectedClient(clientRow);
+                                        setIsDeleteModalOpen(true);
+                                    }}
+                                >
+                                    <span className="text-red-500">Delete</span>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
                         <Link
                             href={`/${clientRow.orgId}/settings/clients/${clientRow.id}`}
                         >
@@ -292,6 +312,8 @@ export default function ClientsTable({ clients, orgId }: ClientTableProps) {
                 addClient={() => {
                     router.push(`/${orgId}/settings/clients/create`);
                 }}
+                onRefresh={refreshData}
+                isRefreshing={isRefreshing}
             />
         </>
     );