refresh button inside admin

src/components/AdminIdpDataTable.tsx

@@ -8,11 +8,15 @@ import { useTranslations } from "next-intl";
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
+    onRefresh?: () => void;
+    isRefreshing?: boolean;
 }
 
 export function IdpDataTable<TData, TValue>({
     columns,
-    data
+    data,
+    onRefresh,
+    isRefreshing
 }: DataTableProps<TData, TValue>) {
     const router = useRouter();
     const t = useTranslations();
@@ -29,6 +33,8 @@ export function IdpDataTable<TData, TValue>({
             onAdd={() => {
                 router.push("/admin/idp/create");
             }}
+            onRefresh={onRefresh}
+            isRefreshing={isRefreshing}
         />
     );
 }

src/components/AdminIdpTable.tsx

@@ -39,8 +39,26 @@ export default function IdpTable({ idps }: Props) {
     const [selectedIdp, setSelectedIdp] = useState<IdpRow | null>(null);
     const api = createApiClient(useEnvContext());
     const router = useRouter();
+    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 deleteIdp = async (idpId: number) => {
         try {
             await api.delete(`/idp/${idpId}`);
@@ -194,7 +212,12 @@ export default function IdpTable({ idps }: Props) {
                 />
             )}
 
-            <IdpDataTable columns={columns} data={idps} />
+            <IdpDataTable
+                columns={columns}
+                data={idps}
+                onRefresh={refreshData}
+                isRefreshing={isRefreshing}
+            />
         </>
     );
 }

src/components/AdminUsersDataTable.tsx

@@ -9,11 +9,15 @@ import { useTranslations } from "next-intl";
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
+    onRefresh?: () => void;
+    isRefreshing?: boolean;
 }
 
 export function UsersDataTable<TData, TValue>({
     columns,
-    data
+    data,
+    onRefresh,
+    isRefreshing
 }: DataTableProps<TData, TValue>) {
 
     const t = useTranslations();
@@ -26,6 +30,8 @@ export function UsersDataTable<TData, TValue>({
             title={t('userServer')}
             searchPlaceholder={t('userSearch')}
             searchColumn="email"
+            onRefresh={onRefresh}
+            isRefreshing={isRefreshing}
         />
     );
 }

src/components/AdminUsersTable.tsx

@@ -46,6 +46,25 @@ export default function UsersTable({ users }: Props) {
 
     const api = createApiClient(useEnvContext());
 
+    const [isRefreshing, setIsRefreshing] = useState(false);
+
+    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 deleteUser = (id: string) => {
         api.delete(`/user/${id}`)
             .catch((e) => {
@@ -168,7 +187,7 @@ export default function UsersTable({ users }: Props) {
                     <div className="flex flex-row items-center gap-2">
                         <span>
                             {userRow.twoFactorEnabled ||
-                            userRow.twoFactorSetupRequested ? (
+                                userRow.twoFactorSetupRequested ? (
                                 <span className="text-green-500">
                                     {t("enabled")}
                                 </span>
@@ -263,7 +282,12 @@ export default function UsersTable({ users }: Props) {
                 />
             )}
 
-            <UsersDataTable columns={columns} data={rows} />
+            <UsersDataTable
+                columns={columns}
+                data={rows}
+                onRefresh={refreshData}
+                isRefreshing={isRefreshing}
+            />
         </>
     );
 }

src/components/ApiKeysDataTable.tsx

@@ -33,16 +33,20 @@ interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
     addApiKey?: () => void;
+    onRefresh?: () => void;
+    isRefreshing?: boolean;
 }
 
 export function ApiKeysDataTable<TData, TValue>({
     addApiKey,
     columns,
-    data
+    data,
+    onRefresh,
+    isRefreshing
 }: DataTableProps<TData, TValue>) {
 
     const t = useTranslations();
-    
+
     return (
         <DataTable
             columns={columns}
@@ -53,6 +57,8 @@ export function ApiKeysDataTable<TData, TValue>({
             searchColumn="name"
             onAdd={addApiKey}
             addButtonText={t('apiKeysAdd')}
+            onRefresh={onRefresh}
+            isRefreshing={isRefreshing}
         />
     );
 }

src/components/ApiKeysTable.tsx

@@ -43,6 +43,25 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
 
     const t = useTranslations();
 
+    const [isRefreshing, setIsRefreshing] = useState(false);
+
+    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 deleteSite = (apiKeyId: string) => {
         api.delete(`/api-key/${apiKeyId}`)
             .catch((e) => {
@@ -186,6 +205,8 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
                 addApiKey={() => {
                     router.push(`/admin/api-keys/create`);
                 }}
+                onRefresh={refreshData}
+                isRefreshing={isRefreshing}
             />
         </>
     );