fix: project details table refresh

src/components/wrappers/dashboard/projects/database/database-content.tsx

@@ -5,6 +5,17 @@ import {Setting} from "@/db/schema/01_setting";
 import {BackupWith, DatabaseWith, Restoration} from "@/db/schema/07_database";
 import {MemberWithUser} from "@/db/schema/03_organization";
 import {useBackupModal} from "@/components/wrappers/dashboard/database/backup/backup-modal-context";
+import {DatabaseKpi} from "@/components/wrappers/dashboard/projects/database/database-kpi";
+import {useQuery, useQueryClient} from "@tanstack/react-query";
+import {getDatabaseDataAction} from "@/components/wrappers/dashboard/database/backup/actions/get-data.action";
+import {PageContent, PageDescription, PageTitle} from "@/features/layout/page";
+import {capitalizeFirstLetter} from "@/utils/text";
+import {RetentionPolicySheet} from "@/components/wrappers/dashboard/database/retention-policy/retention-policy-sheet";
+import {CronButton} from "@/components/wrappers/dashboard/database/cron-button/cron-button";
+import {ChannelPoliciesModal} from "@/components/wrappers/dashboard/database/channels-policy/policy-modal";
+import {HardDrive, Megaphone} from "lucide-react";
+import {ImportModal} from "@/components/wrappers/dashboard/database/import/import-modal";
+import {BackupButton} from "@/components/wrappers/dashboard/backup/backup-button/backup-button";
 
 
 export type DatabaseContentProps = {
@@ -13,27 +24,114 @@ export type DatabaseContentProps = {
     restorations: Restoration[],
     isAlreadyRestore: boolean,
     database: DatabaseWith,
-    activeMember: MemberWithUser
+    activeMember: MemberWithUser,
+    totalBackups: number,
+    availableBackups: number,
+    successRate: number | null,
+    organizationId: string,
+    activeOrganizationChannels: any[],
+    activeOrganizationStorageChannels: any[]
 }
 
 
-export const DatabaseContent = ({
-                                    settings,
-                                    backups,
-                                    activeMember,
-                                    isAlreadyRestore,
-                                    restorations,
-                                    database
-                                }: DatabaseContentProps) => {
+export const DatabaseContent = (props: DatabaseContentProps) => {
     const {} = useBackupModal();
 
+    const {data} = useQuery({
+        queryKey: ["database-data", props.database.id],
+        queryFn: async () => {
+            const result = await getDatabaseDataAction({databaseId: props.database.id});
+            return result?.data;
+        },
+        initialData: {
+            database: {
+                ...props.database,
+                project: props.database.project ?? null,
+            },
+            backups: props.backups,
+            restorations: props.restorations,
+            stats: {
+                totalBackups: props.totalBackups,
+                availableBackups: props.availableBackups,
+                successRate: props.successRate
+            }
+        },
+        staleTime: 0,
+        gcTime: 0,
+        refetchInterval: 5000,
+    });
+
+    const database = data?.database ?? props.database;
+    const backups = data?.backups ?? props.backups;
+    const restorations = data?.restorations ?? props.restorations;
+    const stats = data?.stats ?? {
+        totalBackups: props.totalBackups,
+        availableBackups: props.availableBackups,
+        successRate: props.successRate
+    };
+
+    const isAlreadyRestore = restorations.some((r) => r.status === "waiting");
+    const isAlreadyBackup = backups.some((b) => b.status === "waiting" || b.status === "ongoing");
+
+    const isMember = props.activeMember.role === "member";
+
     return (
         <>
-            <DatabaseBackupActionsModal/>
-            <DatabaseTabs activeMember={activeMember} settings={settings} database={database}
-                          isAlreadyRestore={isAlreadyRestore}
-                          backups={backups}
-                          restorations={restorations}/>
+            <div className="justify-between gap-2 sm:flex">
+                <PageTitle className="flex flex-col md:flex-row items-center justify-between w-full ">
+                    <div className="min-w-full md:min-w-fit ">
+                        {capitalizeFirstLetter(database.name)}
+                    </div>
+                    {!isMember && (
+                        <div className="flex items-center gap-2 md:justify-between w-full ">
+                            <div className="flex items-center gap-2">
+                                <RetentionPolicySheet database={database}/>
+                                <CronButton database={database}/>
+                                <ChannelPoliciesModal
+                                    database={database}
+                                    kind={"notification"}
+                                    icon={<Megaphone/>}
+                                    channels={props.activeOrganizationChannels}
+                                    organizationId={props.organizationId}
+                                />
+                                <ChannelPoliciesModal
+                                    database={database}
+                                    icon={<HardDrive/>}
+                                    kind={"storage"}
+                                    channels={props.activeOrganizationStorageChannels}
+                                    organizationId={props.organizationId}
+                                />
+                                <ImportModal database={database}/>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <BackupButton disable={isAlreadyBackup} databaseId={database.id}/>
+                            </div>
+                        </div>
+                    )}
+                </PageTitle>
+            </div>
+
+            {database.description && (
+                <PageDescription className="mt-5 sm:mt-0">{database.description}</PageDescription>
+            )}
+
+            <PageContent className="flex flex-col w-full h-full">
+                <DatabaseKpi 
+                    successRate={stats.successRate} 
+                    database={database} 
+                    availableBackups={stats.availableBackups}
+                    totalBackups={stats.totalBackups}
+                />
+                <DatabaseBackupActionsModal/>
+                <DatabaseTabs 
+                    activeMember={props.activeMember} 
+                    settings={props.settings} 
+                    database={database}
+                    isAlreadyRestore={isAlreadyRestore}
+                    backups={backups}
+                    restorations={restorations}
+                />
+            </PageContent>
         </>
     )
 }