refresh button in clients page

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"
         />
     );

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}`)
@@ -292,6 +312,8 @@ export default function ClientsTable({ clients, orgId }: ClientTableProps) {
                 addClient={() => {
                     router.push(`/${orgId}/settings/clients/create`);
                 }}
+                onRefresh={refreshData}
+                isRefreshing={isRefreshing}
             />
         </>
     );