chore(release): 1.2.6-rc.2

feat/internal-database

.env.example

@@ -2,7 +2,7 @@
 NODE_ENV=development
 
 # Base de données
-DATABASE_URL=postgresql://devuser:changeme@localhost:5432/devdb?schema=public
+DATABASE_URL=postgresql://devuser:changeme@localhost:5433/devdb?schema=public
 
 # Projet
 PROJECT_NAME="Portabase"
@@ -16,6 +16,10 @@ SMTP_PORT=
 SMTP_USER=
 SMTP_PASSWORD=
 SMTP_FROM=
+#SMTP_SECURE="true"
+#Port 587 -> secure: false
+#Port 465 -> secure: true
+#By default : true
 
 # Google
 AUTH_GOOGLE_ID=
@@ -24,3 +28,4 @@ AUTH_GOOGLE_METHOD=
 
 # Retention
 RETENTION_CRON="* * * * *"
+

.github/FUNDING.yml

@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: portabase
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/workflows/docker.yml

@@ -4,10 +4,6 @@ on:
   workflow_call:
     inputs:
       image_name:
-        required: false
-        type: string
-        default: 'solucetechnologies/portabase'
-      image_name2:
         required: false
         type: string
         default: 'portabase/portabase'
@@ -28,63 +24,99 @@ on:
         required: true
       DOCKER_PASSWORD:
         required: true
-      DOCKER_USERNAME_2:
-        required: true
-      DOCKER_PASSWORD_2:
-        required: true
 
 jobs:
-  build-and-push:
-    runs-on: ubuntu-latest
-    permissions:
-      packages: write
-      contents: read
+
+  build:
+    name: Build and push Docker images
+    runs-on: ${{ matrix.platform == 'linux/amd64' && 'ubuntu-latest' || matrix.platform == 'linux/arm64' && 'ubuntu-24.04-arm' }}
+    strategy:
+      fail-fast: false
+      matrix:
+        platform: [ linux/amd64, linux/arm64 ]
     steps:
-      - name: Check out the repo
+      - name: Checkout
         uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
 
-      - name: Set tags
-        id: set-tags
-        run: |
-          REF_NAME=${GITHUB_REF#refs/tags/}
-          TAGS="${{ inputs.image_name }}:$REF_NAME"
-          TAGS2="${{ inputs.image_name2 }}:$REF_NAME"
-          if [[ "${{ inputs.add_latest }}" == "true" ]]; then
-            TAGS="$TAGS,${{ inputs.image_name }}:latest"
-            TAGS2="$TAGS2,${{ inputs.image_name }}:latest"
-          fi
-          echo "tags=$TAGS" >> $GITHUB_OUTPUT
-          echo "tags2=$TAGS2" >> $GITHUB_OUTPUT
-
-
-      - name: Log in to Docker Hub account 1
+      - name: Login to Docker
         uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
-      - name: Build and push to solucetechnologies/portabase
+      - name: Set image tag
+        id: set-tags
+        run: |
+          REF_NAME=${GITHUB_REF#refs/tags/}
+          if [ "${{ matrix.platform }}" = "linux/amd64" ]; then
+            IMAGE="${{ inputs.image_name }}:$REF_NAME-amd64"
+          else
+            IMAGE="${{ inputs.image_name }}:$REF_NAME-arm64"
+          fi
+          echo "image=$IMAGE" >> $GITHUB_OUTPUT
+
+      - name: Build and push image
         uses: docker/build-push-action@v6
         with:
           context: .
           file: ${{ inputs.dockerfile }}
+          platforms: ${{ matrix.platform }}
           push: true
-          tags: ${{ steps.set-tags.outputs.tags }}
+          tags: ${{ steps.set-tags.outputs.image }}
           target: ${{ inputs.target }}
 
-      - name: Log in to Docker Hub account 2
+      - name: Prepare artifact name
+        id: artifact
+        run: |
+          platform=${{ matrix.platform }}
+          echo "safe_platform=${platform//\//-}" >> $GITHUB_OUTPUT
+          echo "${{ steps.set-tags.outputs.image }}" > image.txt
+
+      - uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f
+        with:
+          name: image-${{ steps.artifact.outputs.safe_platform }}
+          path: image.txt
+          if-no-files-found: warn
+          compression-level: 6
+          overwrite: false
+          include-hidden-files: false
+
+  create-manifest:
+    name: Create multi-arch Docker manifest (Portabase)
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131
+        with:
+          name: image-linux-amd64
+          path: /tmp/digests/amd64
+
+      - uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131
+        with:
+          name: image-linux-arm64
+          path: /tmp/digests/arm64
+
+      - name: Login to Docker
         uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
         with:
-          username: ${{ secrets.DOCKER_USERNAME_2 }}
-          password: ${{ secrets.DOCKER_PASSWORD_2 }}
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
 
-      - name: Build and push to portabase/portabase
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: ${{ inputs.dockerfile }}
-          push: true
-          tags: ${{ steps.set-tags.outputs.tags2 }}
-          target: ${{ inputs.target }}
+      - name: Create and push manifest list
+        working-directory: /tmp/digests
+        run: |
+          DOCKER_IMAGES="$(cat amd64/image.txt) $(cat arm64/image.txt)"
+          REF_NAME=${GITHUB_REF#refs/tags/}
+          MANIFEST_IMAGE="${{ inputs.image_name }}:$REF_NAME"
+
+          docker buildx imagetools create $DOCKER_IMAGES -t $MANIFEST_IMAGE
+          docker buildx imagetools inspect $MANIFEST_IMAGE
+
+          if [ "${{ inputs.add_latest }}" = "true" ]; then
+            docker buildx imagetools create $DOCKER_IMAGES -t ${{ inputs.image_name }}:latest
+            docker buildx imagetools inspect ${{ inputs.image_name }}:latest
+          fi  
+
+  
+  
+  

.github/workflows/release-candidate.yml

@@ -15,10 +15,8 @@ jobs:
     with:
       add_latest: false
     secrets:
-      DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
-      DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
-      DOCKER_USERNAME_2: ${{ secrets.DOCKER_USERNAME_2 }}
-      DOCKER_PASSWORD_2: ${{ secrets.DOCKER_PASSWORD_2 }}
+      DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME_2 }}
+      DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD_2 }}
 
   github_release:
     needs: docker_publish

.github/workflows/release.yml

@@ -16,10 +16,8 @@ jobs:
     with:
       add_latest: true
     secrets:
-      DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
-      DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
-      DOCKER_USERNAME_2: ${{ secrets.DOCKER_USERNAME_2 }}
-      DOCKER_PASSWORD_2: ${{ secrets.DOCKER_PASSWORD_2 }}
+      DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME_2 }}
+      DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD_2 }}
 
   github_release:
     needs: docker_publish

.gitignore

@@ -40,6 +40,7 @@ public/uploads/*
 !public/uploads/
 
 private/uploads/*
+private/keys/*
 
 /.env
 

CITATION.cff

@@ -26,5 +26,5 @@ keywords:
   - web-ui
   - agent
 license: Apache-2.0
-version: 1.2.1-rc.1
-date-released: "2026-01-18"
+version: 1.2.6-rc.2
+date-released: "2026-02-15"

LICENSE

@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2024 Soluce Technologies
+   Copyright 2024 Portabase
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

README.md

@@ -14,10 +14,12 @@
 [![License: Apache](https://img.shields.io/badge/License-apache-yellow.svg)](LICENSE)
 [![Docker Pulls](https://img.shields.io/docker/pulls/solucetechnologies/portabase?color=brightgreen)](https://hub.docker.com/r/solucetechnologies/portabase)
 [![Platform](https://img.shields.io/badge/platform-linux%20%7C%20macos%20%7C%20windows-lightgrey)](https://github.com/Portabase/portabase)
+[![Support Portabase](https://img.shields.io/badge/Support-Portabase-orange)](https://www.buymeacoffee.com/portabase)
 
 [![PostgreSQL](https://img.shields.io/badge/PostgreSQL-336791?logo=postgresql&logoColor=white)](https://www.postgresql.org/)
 [![MySQL](https://img.shields.io/badge/MySQL-4479A1?logo=mysql&logoColor=white)](https://www.mysql.com/)
 [![MariaDB](https://img.shields.io/badge/MariaDB-003545?logo=mariadb&logoColor=white)](https://mariadb.org/)
+[![MongoDB](https://img.shields.io/badge/-MongoDB-13aa52?logo=mongodb&logoColor=white)](https://www.mongodb.com/)
 [![Self Hosted](https://img.shields.io/badge/self--hosted-yes-brightgreen)](https://github.com/Portabase/portabase)
 [![Open Source](https://img.shields.io/badge/open%20source-❤️-red)](https://github.com/Portabase/portabase)
 
@@ -61,6 +63,7 @@ You have 4 ways to install Portabase:
 
 [![Contributors](https://contrib.rocks/image?repo=Portabase/portabase)](https://github.com/Portabase/portabase/graphs/contributors)
 
+[!["Support Portabase"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/portabase)
 
 ## License
 

app/(auth)/guard/page.tsx

@@ -16,7 +16,7 @@ export default async function GuardPage() {
 
     return (
         <TooltipProvider>
-            <CardAuth className="w-full max-w-md">
+            <CardAuth className="w-full">
                 <CardHeader>
                     <div className="grid gap-2 text-center mb-2">
                         <h1 className="text-3xl font-bold">Two-factor verification</h1>

app/(auth)/layout.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import {redirect} from "next/navigation";
 import {currentUser} from "@/lib/auth/current-user";
 import {AuthLogoSection} from "@/components/wrappers/auth/auth-logo-section";
+import {env} from "@/env.mjs";
+import {Heart} from "lucide-react";
 
 export default async function Layout({children}: { children: React.ReactNode }) {
 
@@ -12,13 +14,18 @@ export default async function Layout({children}: { children: React.ReactNode })
     }
 
     return (
-        <div className="flex min-h-full flex-1 flex-col justify-center py-12 sm:px-6 lg:px-8 ">
-            <div className="mx-auto w-full max-w-md">
-                <AuthLogoSection/>
-                <div>{children}</div>
+        <div className="flex min-h-screen flex-col justify-between py-10 sm:px-6 lg:px-8 ">
+            <div className="flex flex-col items-center justify-center flex-1">
+                <div className="mx-auto w-full max-w-md">
+                    <AuthLogoSection/>
+                    <div className="mt-4">{children}</div>
+                </div>
             </div>
-            <footer className="py-4 text-center text-xs justify-items-end text-muted-foreground">
-                Powered by <span className="font-medium">Soluce Technologies</span>
+            <footer className="mt-8 text-center text-xs text-muted-foreground flex flex-col gap-1">
+                <p className="flex items-center justify-center gap-1">
+                    Made with <Heart className="size-3 fill-red-500 text-red-500" /> by <span className="font-medium text-foreground">Portabase</span>
+                </p>
+                <p>v{env.NEXT_PUBLIC_PROJECT_VERSION}</p>
             </footer>
         </div>
     )

app/(auth)/reset-password/page.tsx

@@ -1,9 +1,10 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { CardContent, CardHeader } from "@/components/ui/card";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { ResetPasswordForm } from "@/components/wrappers/auth/login/reset-password-form/reset-password-form";
 import { redirect } from "next/navigation";
 import { auth } from "@/lib/auth/auth";
 import { Avatar, AvatarImage, AvatarFallback } from "@radix-ui/react-avatar";
+import {CardAuth} from "@/features/layout/card-auth";
 
 export default async function RoutePage(props: { searchParams: Promise<{ token: string | undefined }> }) {
 
@@ -23,7 +24,7 @@ export default async function RoutePage(props: { searchParams: Promise<{ token:
 
     return (
         <TooltipProvider>
-            <Card className="w-full max-w-md shadow-lg">
+            <CardAuth className="w-full">
                 <CardHeader className="space-y-4">
                     <div className="space-y-1 text-center">
                         <h1 className="text-2xl font-bold tracking-tight">Set a new password</h1>
@@ -53,7 +54,7 @@ export default async function RoutePage(props: { searchParams: Promise<{ token:
                 <CardContent>
                     <ResetPasswordForm />
                 </CardContent>
-            </Card>
+            </CardAuth>
         </TooltipProvider>
     );
 }

app/(customer)/dashboard/(admin)/agents/[agentId]/edit/page.tsx

@@ -1,32 +0,0 @@
-import { PageParams } from "@/types/next";
-import { Page, PageContent, PageHeader, PageTitle } from "@/features/layout/page";
-import { AgentForm } from "@/components/wrappers/dashboard/agent/agent-form/agent-form";
-import { notFound } from "next/navigation";
-import { db } from "@/db";
-
-export default async function RoutePage(
-    props: PageParams<{
-        agentId: string;
-    }>
-) {
-    const { agentId } = await props.params;
-
-    const agent = await db.query.agent.findFirst({
-        where: (fields, { eq }) => eq(fields.id, agentId),
-    });
-
-    if (!agent) {
-        notFound();
-    }
-
-    return (
-        <Page>
-            <PageHeader>
-                <PageTitle>Edit {agent.name}</PageTitle>
-            </PageHeader>
-            <PageContent>
-                <AgentForm defaultValues={agent} agentId={agent.id} />
-            </PageContent>
-        </Page>
-    );
-}

app/(customer)/dashboard/(admin)/agents/[agentId]/page.tsx

@@ -1,8 +1,5 @@
-import Link from "next/link";
-import {GearIcon} from "@radix-ui/react-icons";
 import {PageParams} from "@/types/next";
-import {Page, PageActions, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
-import {buttonVariants} from "@/components/ui/button";
+import {Page, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
 import {db} from "@/db";
 import * as drizzleDb from "@/db";
 import {eq} from "drizzle-orm";
@@ -12,6 +9,8 @@ import {capitalizeFirstLetter} from "@/utils/text";
 import {generateEdgeKey} from "@/utils/edge_key";
 import {getServerUrl} from "@/utils/get-server-url";
 import {AgentContentPage} from "@/components/wrappers/dashboard/agent/agent-content";
+import {AgentDialog} from "@/features/agents/components/agent.dialog";
+import {AgentType} from "@/features/agents/agents.schema";
 
 export default async function RoutePage(props: PageParams<{ agentId: string }>) {
 
@@ -29,7 +28,7 @@ export default async function RoutePage(props: PageParams<{ agentId: string }>)
     }
 
     const edgeKey = await generateEdgeKey(getServerUrl(), agent.id);
-
+    
     return (
         <Page>
             <div className="justify-between gap-2 sm:flex">
@@ -37,17 +36,14 @@ export default async function RoutePage(props: PageParams<{ agentId: string }>)
                     <div className="min-w-full md:min-w-fit ">
                         {capitalizeFirstLetter(agent.name)}
                     </div>
-                        <div className="flex items-center gap-2 md:justify-between w-full ">
-                            <div className="flex items-center gap-2">
-                                <Link className={buttonVariants({variant: "outline"})}
-                                      href={`/dashboard/agents/${agent.id}/edit`}>
-                                    <GearIcon className="w-7 h-7"/>
-                                </Link>
-                            </div>
-                            <div className="flex items-center gap-2">
-                                <ButtonDeleteAgent agentId={agentId} text={"Delete Agent"}/>
-                            </div>
+                    <div className="flex items-center gap-2 md:justify-between w-full ">
+                        <div className="flex items-center gap-2">
+                            <AgentDialog agent={agent as AgentType & { id: string }} typeTrigger={"edit"}/>
                         </div>
+                        <div className="flex items-center gap-2">
+                            <ButtonDeleteAgent agentId={agentId} text={"Delete Agent"}/>
+                        </div>
+                    </div>
                 </PageTitle>
             </div>
 

app/(customer)/dashboard/(admin)/agents/new/page.tsx

@@ -1,21 +0,0 @@
-import {PageParams} from "@/types/next";
-import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
-import {AgentForm} from "@/components/wrappers/dashboard/agent/agent-form/agent-form";
-import {Metadata} from "next";
-
-export const metadata: Metadata = {
-    title: "Create Agent",
-};
-
-export default async function RoutePage(props: PageParams<{}>) {
-    return (
-        <Page>
-            <PageHeader>
-                <PageTitle>Create new agent</PageTitle>
-            </PageHeader>
-            <PageContent>
-                <AgentForm/>
-            </PageContent>
-        </Page>
-    );
-}

app/(customer)/dashboard/(admin)/agents/page.tsx

@@ -1,15 +1,13 @@
 import {PageParams} from "@/types/next";
 import {AgentCard} from "@/components/wrappers/dashboard/agent/agent-card/agent-card";
 import {CardsWithPagination} from "@/components/wrappers/common/cards-with-pagination";
-import {Button} from "@/components/ui/button";
-import Link from "next/link";
 import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
 import {notFound} from "next/navigation";
 import {db} from "@/db";
 import * as drizzleDb from "@/db";
 import {desc, eq, not} from "drizzle-orm";
-import {EmptyStatePlaceholder} from "@/components/wrappers/common/empty-state-placeholder";
 import {Metadata} from "next";
+import {AgentDialog} from "@/features/agents/components/agent.dialog";
 
 export const metadata: Metadata = {
     title: "Agents",
@@ -25,7 +23,6 @@ export default async function RoutePage(props: PageParams<{}>) {
         orderBy: (fields) => desc(fields.lastContact),
     });
 
-
     if (!agents) {
         notFound();
     }
@@ -36,9 +33,7 @@ export default async function RoutePage(props: PageParams<{}>) {
                 <PageTitle>Agents</PageTitle>
                 {agents.length > 0 && (
                     <PageActions>
-                        <Link href={"/dashboard/agents/new"}>
-                            <Button>+ Create Agent</Button>
-                        </Link>
+                         <AgentDialog typeTrigger={"create"} />
                     </PageActions>
                 )}
             </PageHeader>
@@ -46,12 +41,9 @@ export default async function RoutePage(props: PageParams<{}>) {
                 {agents.length > 0 ? (
                     <CardsWithPagination data={agents} cardItem={AgentCard} cardsPerPage={4} numberOfColumns={1}/>
                 ) : (
-                    <EmptyStatePlaceholder
-                        url={"/dashboard/agents/new"}
-                        text={"Create new Agent"}
-                    />
+                     <AgentDialog typeTrigger="empty"/>
                 )}
             </PageContent>
         </Page>
     );
-}
+}

app/(customer)/dashboard/(organization)/projects/[projectId]/database/[databaseId]/page.tsx

@@ -1,21 +1,11 @@
 import {PageParams} from "@/types/next";
 import {notFound, redirect} from "next/navigation";
-import {Page, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
-import {BackupButton} from "@/components/wrappers/dashboard/backup/backup-button/backup-button";
-import {DatabaseKpi} from "@/components/wrappers/dashboard/projects/database/database-kpi";
-import {CronButton} from "@/components/wrappers/dashboard/database/cron-button/cron-button";
+import {Page} from "@/features/layout/page";
 import {db} from "@/db";
 import {eq, and, inArray} from "drizzle-orm";
 import * as drizzleDb from "@/db";
 import {getOrganizationProjectDatabases} from "@/lib/services";
 import {getActiveMember, getOrganization} from "@/lib/auth/auth";
-import {RetentionPolicySheet} from "@/components/wrappers/dashboard/database/retention-policy/retention-policy-sheet";
-import {capitalizeFirstLetter} from "@/utils/text";
-import {getOrganizationChannels} from "@/db/services/notification-channel";
-import {ImportModal} from "@/components/wrappers/dashboard/database/import/import-modal";
-import {getOrganizationStorageChannels} from "@/db/services/storage-channel";
-import {ChannelPoliciesModal} from "@/components/wrappers/dashboard/database/channels-policy/policy-modal";
-import {HardDrive, Megaphone} from "lucide-react";
 import {BackupModalProvider} from "@/components/wrappers/dashboard/database/backup/backup-modal-context";
 import {DatabaseContent} from "@/components/wrappers/dashboard/projects/database/database-content";
 
@@ -93,12 +83,6 @@ export default async function RoutePage(props: PageParams<{
         notFound();
     }
 
-    const organizationChannels = await getOrganizationChannels(organization.id);
-    const activeOrganizationChannels = organizationChannels.filter(channel => channel.enabled);
-
-    const organizationStorageChannels = await getOrganizationStorageChannels(organization.id);
-    const activeOrganizationStorageChannels = organizationStorageChannels.filter(channel => channel.enabled);
-
 
     const successRate = totalBackups > 0 ? (successfulBackups / totalBackups) * 100 : null;
 
@@ -106,60 +90,22 @@ export default async function RoutePage(props: PageParams<{
 
     return (
         <Page>
-
-            <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(dbItem.name)}
-                    </div>
-                    {!isMember && (
-                        <div className="flex items-center gap-2 md:justify-between w-full ">
-                            <div className="flex items-center gap-2">
-                                <RetentionPolicySheet database={dbItem}/>
-                                <CronButton database={dbItem}/>
-                                <ChannelPoliciesModal
-                                    database={dbItem}
-                                    kind={"notification"}
-                                    icon={<Megaphone/>}
-                                    channels={activeOrganizationChannels}
-                                    organizationId={organization.id}
-                                />
-                                <ChannelPoliciesModal
-                                    database={dbItem}
-                                    icon={<HardDrive/>}
-                                    kind={"storage"}
-                                    channels={activeOrganizationStorageChannels}
-                                    organizationId={organization.id}
-                                />
-                                <ImportModal database={dbItem}/>
-                            </div>
-                            <div className="flex items-center gap-2">
-                                <BackupButton disable={isAlreadyBackup} databaseId={databaseId}/>
-                            </div>
-                        </div>
-                    )}
-                </PageTitle>
-
-
-            </div>
-
-            {dbItem.description && (
-                <PageDescription className="mt-5 sm:mt-0">{dbItem.description}</PageDescription>
-            )}
-            <PageContent className="flex flex-col w-full h-full">
-                <DatabaseKpi successRate={successRate} database={dbItem} availableBackups={availableBackups}
-                             totalBackups={totalBackups}/>
-                <BackupModalProvider>
-                    <DatabaseContent
-                        activeMember={activeMember}
-                        settings={settings}
-                        database={dbItem}
-                        isAlreadyRestore={isAlreadyRestore}
-                        restorations={restorations}
-                        backups={backups}
-                    />
-                </BackupModalProvider>
-            </PageContent>
+            <BackupModalProvider>
+                <DatabaseContent
+                    activeMember={activeMember}
+                    settings={settings}
+                    database={dbItem}
+                    isAlreadyRestore={isAlreadyRestore}
+                    restorations={restorations}
+                    backups={backups}
+                    totalBackups={totalBackups}
+                    availableBackups={availableBackups}
+                    successRate={successRate}
+                    organizationId={organization.id}
+                    activeOrganizationChannels={[]}
+                    activeOrganizationStorageChannels={[]}
+                />
+            </BackupModalProvider>
         </Page>
     );
-}
+}

app/(customer)/dashboard/(organization)/projects/[projectId]/edit/page.tsx

@@ -1,65 +0,0 @@
-import {notFound} from "next/navigation";
-import {PageParams} from "@/types/next";
-import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
-import {ProjectForm} from "@/components/wrappers/dashboard/projects/project-form/project-form";
-import * as drizzleDb from "@/db";
-
-import {db} from "@/db";
-import {eq} from "drizzle-orm";
-import {DatabaseWith} from "@/db/schema/07_database";
-
-export default async function RoutePage(props: PageParams<{ projectId: string }>) {
-    const {projectId} = await props.params;
-
-    const proj = await db.query.project.findFirst({
-        where: eq(drizzleDb.schemas.project.id, projectId),
-        with: {
-            databases: true,
-        },
-    });
-
-    if (!proj) {
-        notFound();
-    }
-
-
-    const org = await db.query.organization.findFirst({
-        where: eq(drizzleDb.schemas.organization.slug, "default"),
-    });
-
-    if (!org) {
-        notFound();
-    }
-
-    const availableDatabases = (
-        await db.query.database.findMany({
-            where: (db, {or, eq, isNull}) => or(isNull(db.projectId), eq(db.projectId, proj.id)),
-            with: {
-                agent: true,
-                project: true,
-                backups: true,
-                restorations: true,
-            },
-            orderBy: (db, {desc}) => [desc(db.createdAt)],
-        })
-    )
-        // .filter((db) => db.project !== null) as DatabaseWith[];
-
-
-
-    return (
-        <Page>
-            <PageHeader>
-                <PageTitle>Edit {proj.name}</PageTitle>
-            </PageHeader>
-            <PageContent>
-                <ProjectForm
-                    organization={org}
-                    databases={availableDatabases as DatabaseWith[]}
-                    defaultValues={{...proj, databases: proj.databases.map((db) => db.id)}}
-                    projectId={proj.id}
-                />
-            </PageContent>
-        </Page>
-    );
-}

app/(customer)/dashboard/(organization)/projects/[projectId]/page.tsx

@@ -1,8 +1,5 @@
 import {PageParams} from "@/types/next";
-import {Page, PageActions, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
-import {buttonVariants} from "@/components/ui/button";
-import {GearIcon} from "@radix-ui/react-icons";
-import Link from "next/link";
+import {Page, PageContent, PageTitle} from "@/features/layout/page";
 import {
     ButtonDeleteProject
 } from "@/components/wrappers/dashboard/projects/button-delete-project/button-delete-project";
@@ -15,6 +12,10 @@ import {eq} from "drizzle-orm";
 import {getActiveMember, getOrganization} from "@/lib/auth/auth";
 import * as drizzleDb from "@/db";
 import {capitalizeFirstLetter} from "@/utils/text";
+import {ProjectDialog} from "@/features/projects/components/project.dialog";
+import {DatabaseWith} from "@/db/schema/07_database";
+import {ProjectWith} from "@/db/schema/06_project";
+import {isUuidv4} from "@/utils/verify-uuid";
 
 
 export default async function RoutePage(props: PageParams<{
@@ -24,6 +25,10 @@ export default async function RoutePage(props: PageParams<{
         projectId
     } = await props.params;
 
+    if (!isUuidv4(projectId)) {
+        notFound()
+    }
+
     const organization = await getOrganization({});
     const activeMember = await getActiveMember()
 
@@ -51,6 +56,19 @@ export default async function RoutePage(props: PageParams<{
         redirect("/dashboard/projects");
     }
 
+    const availableDatabases = (
+        await db.query.database.findMany({
+            where: (db, {or, eq, isNull}) => or(isNull(db.projectId), eq(db.projectId, proj.id)),
+            with: {
+                agent: true,
+                project: true,
+                backups: true,
+                restorations: true,
+            },
+            orderBy: (db, {desc}) => [desc(db.createdAt)],
+        })
+    ) as DatabaseWith[];
+
     const isMember = activeMember?.role === "member";
 
     return (
@@ -63,10 +81,12 @@ export default async function RoutePage(props: PageParams<{
                     {!isMember && (
                         <div className="flex items-center gap-2 md:justify-between w-full ">
                             <div className="flex items-center gap-2">
-                                <Link className={buttonVariants({variant: "outline"})}
-                                      href={`/dashboard/projects/${proj.id}/edit`}>
-                                    <GearIcon className="w-7 h-7"/>
-                                </Link>
+                                <ProjectDialog
+                                    databases={availableDatabases}
+                                    organization={org}
+                                    project={proj as ProjectWith}
+                                    isEdit={true}
+                                />
                             </div>
                             <div className="flex items-center gap-2">
                                 <ButtonDeleteProject projectId={projectId} text={"Delete Project"}/>
@@ -95,4 +115,4 @@ export default async function RoutePage(props: PageParams<{
             </PageContent>
         </Page>
     );
-}
+}

app/(customer)/dashboard/(organization)/projects/new/page.tsx

@@ -1,50 +0,0 @@
-import {PageParams} from "@/types/next";
-import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
-import {ProjectForm} from "@/components/wrappers/dashboard/projects/project-form/project-form";
-import {notFound} from "next/navigation";
-import {db} from "@/db";
-import {eq} from "drizzle-orm";
-import {getOrganization} from "@/lib/auth/auth";
-import * as drizzleDb from "@/db";
-import {DatabaseWith} from "@/db/schema/07_database";
-
-
-export default async function RoutePage(props: PageParams<{}>) {
-
-    const organization = await getOrganization({});
-
-    if (!organization) {
-        notFound();
-    }
-
-    const availableDatabases = (
-        await db.query.database.findMany({
-            where: (db, {isNull}) => isNull(db.projectId),
-            with: {
-                agent: true,
-                project: true,
-                backups: true,
-                restorations: true,
-            },
-            orderBy: (db, {desc}) => [desc(db.createdAt)],
-        })
-    ).filter((db) => db.project == null) as DatabaseWith[];
-
-    const org = await db.query.organization.findFirst({
-        where: eq(drizzleDb.schemas.organization.slug, organization.slug),
-    });
-
-    if (!org) notFound();
-
-
-    return (
-        <Page>
-            <PageHeader>
-                <PageTitle>Create new project</PageTitle>
-            </PageHeader>
-            <PageContent>
-                <ProjectForm databases={availableDatabases} organization={org}/>
-            </PageContent>
-        </Page>
-    );
-}

app/(customer)/dashboard/(organization)/projects/page.tsx

@@ -1,8 +1,5 @@
-import Link from "next/link";
-
 import {PageParams} from "@/types/next";
 import {CardsWithPagination} from "@/components/wrappers/common/cards-with-pagination";
-import {Button} from "@/components/ui/button";
 import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
 import {ProjectCard} from "@/components/wrappers/dashboard/projects/project-card/project-card";
 import {db} from "@/db";
@@ -10,6 +7,8 @@ import {notFound} from "next/navigation";
 import {getActiveMember, getOrganization} from "@/lib/auth/auth";
 import {EmptyStatePlaceholder} from "@/components/wrappers/common/empty-state-placeholder";
 import {Metadata} from "next";
+import {ProjectDialog} from "@/features/projects/components/project.dialog";
+import {DatabaseWith} from "@/db/schema/07_database";
 
 export const metadata: Metadata = {
     title: "Projects",
@@ -36,6 +35,19 @@ export default async function RoutePage(props: PageParams<{}>) {
     });
     const isMember = activeMember?.role === "member";
 
+    const availableDatabases = (
+        await db.query.database.findMany({
+            where: (db, {isNull}) => isNull(db.projectId),
+            with: {
+                agent: true,
+                project: true,
+                backups: true,
+                restorations: true,
+            },
+            orderBy: (db, {desc}) => [desc(db.createdAt)],
+        })
+    ).filter((db) => db.project == null) as DatabaseWith[];
+
 
     return (
         <Page>
@@ -43,9 +55,7 @@ export default async function RoutePage(props: PageParams<{}>) {
                 <PageTitle>Projects</PageTitle>
                 {(projects.length > 0 && !isMember) && (
                     <PageActions>
-                        <Link href={`/dashboard/projects/new`}>
-                            <Button>+ Create Project</Button>
-                        </Link>
+                        <ProjectDialog databases={availableDatabases} organization={organization}/>
                     </PageActions>
                 )}
             </PageHeader>
@@ -56,15 +66,15 @@ export default async function RoutePage(props: PageParams<{}>) {
                         organizationSlug={organization.slug}
                         data={projects}
                         cardItem={ProjectCard}
-                        cardsPerPage={6}
+                        cardsPerPage={9}
                         numberOfColumns={3}
                     />
                 ) : isMember ? (
                     <EmptyStatePlaceholder text="No project available"/>
                 ) : (
-                    <EmptyStatePlaceholder url="/dashboard/projects/new" text="Create new Project"/>
+                    <ProjectDialog databases={availableDatabases} organization={organization} isEmpty={true}/>
                 )}
             </PageContent>
         </Page>
     );
-}
+}

app/(customer)/dashboard/(organization)/settings/edit/page.tsx

@@ -1,37 +0,0 @@
-import {PageParams} from "@/types/next";
-import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
-import {notFound} from "next/navigation";
-import {OrganizationForm} from "@/components/wrappers/dashboard/organization/organization-form/organization-form";
-import {getOrganization} from "@/lib/auth/auth";
-import {db} from "@/db";
-import {isNull} from "drizzle-orm";
-import {currentUser} from "@/lib/auth/current-user";
-
-export default async function RoutePage(props: PageParams<{
-
-}>) {
-    const user = await currentUser();
-
-    const organization = await getOrganization({});
-
-    const users = await db.query.user.findMany({
-        where: (fields) => isNull(fields.deletedAt)
-    });
-
-    if (!user || !users || !organization || organization.slug == "default") {
-        notFound();
-    }
-
-    return(
-        <Page>
-            <PageHeader>
-                <PageTitle>
-                    Edit {organization.name}
-                </PageTitle>
-            </PageHeader>
-            <PageContent>
-                <OrganizationForm currentUser={user} users={users} defaultValues={organization}/>
-            </PageContent>
-        </Page>
-    )
-}

app/(customer)/dashboard/(organization)/settings/page.tsx

@@ -9,9 +9,13 @@ import {getOrganizationChannels} from "@/db/services/notification-channel";
 import {computeOrganizationPermissions} from "@/lib/acl/organization-acl";
 import {getOrganizationStorageChannels} from "@/db/services/storage-channel";
 import {DeleteOrganizationButton} from "@/components/wrappers/dashboard/organization/delete-organization-button";
-import {
-    EditButtonSettings
-} from "@/components/wrappers/dashboard/organization/settings/edit-button-settings/edit-button-settings";
+import {EditOrganizationDialog} from "@/features/organization/components/edit-organization.dialog";
+import {Button} from "@/components/ui/button";
+import {GearIcon} from "@radix-ui/react-icons";
+import {db} from "@/db";
+import {isNull} from "drizzle-orm";
+import * as drizzleDb from "@/db";
+import {eq} from "drizzle-orm";
 
 export const metadata: Metadata = {
     title: "Settings",
@@ -22,7 +26,7 @@ export default async function RoutePage(props: PageParams<{ slug: string }>) {
     const user = await currentUser();
     const activeMember = await getActiveMember()
 
-    if (!organization || !activeMember) {
+    if (!organization || !activeMember || !user) {
         notFound();
     }
 
@@ -30,6 +34,22 @@ export default async function RoutePage(props: PageParams<{ slug: string }>) {
     const storageChannels = await getOrganizationStorageChannels(organization.id)
     const permissions = computeOrganizationPermissions(activeMember);
 
+    const users = await db.query.user.findMany({
+        where: (fields) => isNull(fields.deletedAt)
+    });
+
+    const organizationWithMembers = await db.query.organization.findFirst({
+        where: eq(drizzleDb.schemas.organization.id, organization.id),
+        with: {
+            members: {
+                with: {
+                    user: true
+                }
+            }
+        }
+    });
+
+    if (!organizationWithMembers) notFound();
 
     return (
         <Page>
@@ -41,7 +61,11 @@ export default async function RoutePage(props: PageParams<{ slug: string }>) {
                         <div className="flex items-center gap-2 md:justify-between w-full ">
                             <div className="flex items-center gap-2">
                                 {permissions.canManageSettings && organization.slug !== "default" && (
-                                    <EditButtonSettings/>
+                                    <EditOrganizationDialog 
+                                        organization={organizationWithMembers} 
+                                        users={users} 
+                                        currentUser={user}
+                                    />
                                 )}
                             </div>
                             <div className="flex items-center gap-2">
@@ -62,4 +86,4 @@ export default async function RoutePage(props: PageParams<{ slug: string }>) {
             </PageContent>
         </Page>
     )
-}
+}

app/api/agent/[agentId]/backup/helpers.ts

@@ -1,53 +1,52 @@
-import fs from "node:fs";
-import forge from "node-forge";
+import { NextResponse } from "next/server";
+import { eq } from "drizzle-orm";
+import { db } from "@/db";
+import * as drizzleDb from "@/db";
+
+export function withAgentCheck(handler: Function) {
+    return async (request: Request, context: { params: Promise<{ agentId: string }> }) => {
+        try {
+            const agentId = (await context.params).agentId;
+
+            const agent = await db.query.agent.findFirst({
+                where: eq(drizzleDb.schemas.agent.id, agentId),
+            });
+
+            if (!agent) {
+                return NextResponse.json(
+                    { error: "Agent not found" },
+                    { status: 404 }
+                );
+            }
+
+            return handler(request, { ...context, agent });
+        } catch (err) {
+            console.error("Error in agent middleware:", err);
+            return NextResponse.json(
+                { error: "Internal server error" },
+                { status: 500 }
+            );
+        }
+    };
+}
 
 
-export async function decryptedDump(file: File, aesKeyHex: string, ivHex: string, fileExtension: string): Promise<File> {
-    const privateKeyPem = fs.readFileSync("private/keys/server_private.pem", "utf8");
-    const privateKey = forge.pki.privateKeyFromPem(privateKeyPem);
-
-    // Decrypt AES key with RSA-OAEP
-    const encryptedAesKey = forge.util.hexToBytes(aesKeyHex);
-    const aesKey = privateKey.decrypt(encryptedAesKey, "RSA-OAEP", {
-        md: forge.md.sha256.create(),
-        mgf1: {md: forge.md.sha256.create()},
+export async function getDatabaseOrThrow(generatedId: string) {
+    const database = await db.query.database.findFirst({
+        where: eq(drizzleDb.schemas.database.agentDatabaseId, generatedId),
+        with: {
+            project: true,
+            alertPolicies: true,
+            storagePolicies: true
+        }
     });
 
-    // Read encrypted file content
-    const encryptedBuffer = Buffer.from(await file.arrayBuffer());
-    const iv = forge.util.hexToBytes(ivHex);
-
-    // AES decryption
-    const decipher = forge.cipher.createDecipher("AES-CBC", aesKey);
-    decipher.start({iv});
-    decipher.update(forge.util.createBuffer(encryptedBuffer.toString("binary")));
-    const success = decipher.finish();
-
-    if (!success) {
-        throw new Error("Decryption failed");
+    if (!database) {
+        throw NextResponse.json(
+            { error: "Database associated with generatedId not found" },
+            { status: 404 }
+        );
     }
 
-    const decryptedBytes = decipher.output.getBytes();
-    const decryptedBuffer = Buffer.from(decryptedBytes, "binary");
-
-    // Return a File so you can use file.arrayBuffer() later
-    return new File(
-        [decryptedBuffer],
-        file.name.replace(/\.enc$/, fileExtension),
-        {type: "application/octet-stream"}
-    );
-}
-
-
-export function getFileExtension(dbType: string) {
-    switch (dbType) {
-        case "postgresql":
-            return ".dump";
-        case "mysql":
-            return ".sql";
-        default:
-            return ".dump";
-    }
-}
-
-
+    return database;
+}

app/api/agent/[agentId]/backup/route.ts

@@ -1,88 +1,63 @@
 import {NextResponse} from "next/server";
-import {isUuidv4} from "@/utils/verify-uuid";
-import {v4 as uuidv4} from "uuid";
-import {eventEmitter} from "../../../events/route";
-import * as drizzleDb from "@/db";
-import {db} from "@/db";
-import {Backup} from "@/db/schema/07_database";
 import {and, eq} from "drizzle-orm";
+import * as drizzleDb from "@/db";
+import {db as dbClient, db} from "@/db";
+import {getDatabaseOrThrow, withAgentCheck} from "./helpers";
+import {Backup} from "@/db/schema/07_database";
 import {withUpdatedAt} from "@/db/utils";
-import {decryptedDump, getFileExtension} from "./helpers";
+import {eventEmitter} from "@/features/shared/event";
 import {sendNotificationsBackupRestore} from "@/features/notifications/helpers";
-import {storeBackupFiles} from "@/features/storages/helpers";
+import {EventKind} from "@/features/notifications/types";
 
-export async function POST(
-    request: Request,
-    {params}: { params: Promise<{ agentId: string }> }
-) {
+export type BodyPost = {
+    method: "manual" | "automatic"
+    generatedId: string
+}
+
+export type BodyPatch = {
+    backupId: string
+    status: "success" | "failed"
+    size: number
+    generatedId: string
+}
+
+export const POST = withAgentCheck(async (request: Request, {params, agent}: {
+    params: Promise<{ agentId: string }>,
+    agent: any
+}) => {
     try {
-        const contentType = request.headers.get("Content-Type");
-
-        if (!contentType || !contentType.includes("multipart/form-data")) {
-            return NextResponse.json(
-                {error: "Unsupported or missing Content-Type"},
-                {status: 400}
-            );
-        }
-
-        eventEmitter.emit('modification', {update: true});
-
-        const agentId = (await params).agentId;
-        const formData = await request.formData();
-        const aesKeyHex = formData.get("aes_key") as string;
-        const ivHex = formData.get("iv") as string;
-        const generatedId = formData.get("generatedId") as string | null;
-        const method = formData.get("method") as string | null;
-
-        if (!generatedId || !isUuidv4(generatedId)) {
-            return NextResponse.json(
-                {error: "generatedId is not a valid UUID"},
-                {status: 400}
-            );
-        }
-
-        const agent = await db.query.agent.findFirst({
-            where: eq(drizzleDb.schemas.agent.id, agentId),
-        });
-
-        if (!agent) {
-            return NextResponse.json(
-                {error: "Agent not found"},
-                {status: 404}
-            );
-        }
-
-        const database = await db.query.database.findFirst({
-            where: eq(drizzleDb.schemas.database.agentDatabaseId, generatedId),
-            with: {
-                project: true,
-                alertPolicies: true,
-                storagePolicies: true
-            }
-        });
-
-        if (!database) {
-            return NextResponse.json(
-                {error: "Database associated with generatedId not found"},
-                {status: 404}
-            );
-        }
+        const body: BodyPost = await request.json();
+        const method = body.method
+        const database = await getDatabaseOrThrow(body.generatedId);
 
         let backup: Backup | null | undefined = null;
 
         if (method === "automatic") {
-            [backup] = await db
-                .insert(drizzleDb.schemas.backup)
-                .values({
-                    status: 'ongoing',
-                    databaseId: database.id,
-                })
-                .returning();
 
+            const ongoingBackup = await db.query.backup.findFirst({
+                where: and(
+                    eq(drizzleDb.schemas.backup.status, 'ongoing'),
+                    eq(drizzleDb.schemas.backup.databaseId, database.id),
+                ),
+            });
 
-            if (!backup) {
+            if (!ongoingBackup) {
+                [backup] = await db
+                    .insert(drizzleDb.schemas.backup)
+                    .values({
+                        status: 'ongoing',
+                        databaseId: database.id,
+                    })
+                    .returning();
+                if (!backup) {
+                    return NextResponse.json(
+                        {error: "Unable to create an automatic backup"},
+                        {status: 500}
+                    );
+                }
+            } else {
                 return NextResponse.json(
-                    {error: "Unable to create an automatic backup"},
+                    {error: "A backup is already ongoing"},
                     {status: 500}
                 );
             }
@@ -94,7 +69,6 @@ export async function POST(
                 ),
             });
 
-
             if (!backup) {
                 return NextResponse.json(
                     {error: "Unable to find the corresponding backup"},
@@ -103,66 +77,77 @@ export async function POST(
             }
         }
 
-        const status = formData.get("status") as string | null;
 
-        if (status === "success") {
-            const file = formData.get("file") as File | null;
-            const extension = formData.get("extension") as string | null;
-            if (!aesKeyHex || !ivHex) {
-                return NextResponse.json({error: "Missing fields"}, {status: 400});
-            }
+        eventEmitter.emit('modification', {update: true});
 
-
-            if (!file) {
-                return NextResponse.json(
-                    {error: "File is required for successful backup"},
-                    {status: 400}
-                );
-            }
-            const fileSizeBytes = file.size;
-            // const fileExtension = '.' + (file.name.split('.').pop()?.toLowerCase() || '');
-            const fileExtension = extension ? extension : getFileExtension(database.dbms)
-            const decryptedFile = await decryptedDump(file, aesKeyHex, ivHex, fileExtension);
-            const uuid = uuidv4();
-            const fileName = `${uuid}${fileExtension}`;
-            const buffer = Buffer.from(await decryptedFile.arrayBuffer());
-
-            await storeBackupFiles(backup, database, buffer, fileName)
-            eventEmitter.emit('modification', {update: true});
-
-            await sendNotificationsBackupRestore(database, "success_backup");
-
-            return NextResponse.json(
-                {
-                    message: "Backup successfully uploaded",
-                },
-                {status: 200}
-            );
-        } else {
-
-            await db
-                .update(drizzleDb.schemas.backup)
-                .set(withUpdatedAt({status: 'failed'}))
-                .where(eq(drizzleDb.schemas.backup.id, backup.id));
-
-            eventEmitter.emit('modification', {update: true});
-
-            await sendNotificationsBackupRestore(database, "error_backup");
-
-
-            return NextResponse.json(
-                {
-                    message: "Backup successfully updated with status failed",
-                },
-                {status: 200}
-            );
-        }
+        return NextResponse.json(
+            {
+                message: "Init backup success",
+                backup: backup,
+            },
+            {status: 200}
+        );
     } catch (error) {
-        console.error("Error in POST handler:", error);
+        console.error("Error in POST for INIT backup:", error);
         return NextResponse.json(
             {error: "Internal server error"},
             {status: 500}
         );
     }
-}
+});
+
+export const PATCH = withAgentCheck(async (request: Request, {params, agent}: {
+    params: Promise<{ agentId: string }>,
+    agent: any
+}) => {
+    try {
+        const body: BodyPatch = await request.json();
+
+        const status = body.status
+        const backupId = body.backupId
+        const backupSize = body.size
+
+        const database = await getDatabaseOrThrow(body.generatedId);
+
+        const backup = await db.query.backup.findFirst({
+            where: eq(drizzleDb.schemas.backup.id, backupId),
+        });
+
+        if (!backup) {
+            return NextResponse.json(
+                {error: "No backup found"},
+                {status: 500}
+            );
+        }
+
+        const [backupUpdated] = await dbClient
+            .update(drizzleDb.schemas.backup)
+            .set(withUpdatedAt({
+                status: status,
+                fileSize: backupSize
+            }))
+            .where(eq(drizzleDb.schemas.backup.id, backup.id))
+            .returning();
+
+
+        eventEmitter.emit('modification', {update: true});
+        await sendNotificationsBackupRestore(database, `${status}_backup` as EventKind);
+
+        return NextResponse.json(
+            {
+                message: "Backup successfully updated",
+                backup: backupUpdated,
+            },
+            {status: 200}
+        );
+    } catch (error) {
+
+
+        console.error("Error in PATCH backup:", error);
+        return NextResponse.json(
+            {error: "Internal server error"},
+            {status: 500}
+        );
+    }
+});
 

app/api/agent/[agentId]/backup/upload/init/route.ts

@@ -0,0 +1,76 @@
+import {NextResponse} from "next/server";
+import {and, eq} from "drizzle-orm";
+import * as drizzleDb from "@/db";
+import {db} from "@/db";
+import {getDatabaseOrThrow, withAgentCheck} from "../../helpers";
+import {isUuidv4} from "@/utils/verify-uuid";
+import {eventEmitter} from "@/features/shared/event";
+
+export type Body = {
+    generatedId: string
+    storageChannelId: string
+    backupId: string
+}
+export const POST = withAgentCheck(async (request: Request, {params, agent}: {
+    params: Promise<{ agentId: string }>,
+    agent: any
+}) => {
+    try {
+        const body: Body = await request.json();
+
+        console.log("body", body);
+
+        const generatedId = body.generatedId;
+        const storageChannelId = body.storageChannelId;
+        const backupId = body.backupId;
+
+        if (!generatedId || !isUuidv4(generatedId)) {
+            return NextResponse.json(
+                {error: "generatedId is not a valid UUID"},
+                {status: 400}
+            );
+        }
+
+        const database = await getDatabaseOrThrow(generatedId);
+
+        const backup = await db.query.backup.findFirst({
+            where: and(
+                eq(drizzleDb.schemas.backup.id, backupId),
+                eq(drizzleDb.schemas.backup.databaseId, database.id),
+            ),
+        });
+
+        if (!backup) {
+            return NextResponse.json(
+                {error: "Unable to find the corresponding backup"},
+                {status: 404}
+            );
+        }
+
+        const [backupStorage] = await db
+            .insert(drizzleDb.schemas.backupStorage)
+            .values({
+                backupId: backup.id,
+                storageChannelId: storageChannelId,
+                status: "pending",
+            })
+            .returning();
+
+        eventEmitter.emit('modification', {update: true});
+
+        return NextResponse.json(
+            {
+                message: "Backup storage successfully created",
+                backupStorage: backupStorage
+            },
+            {status: 200}
+        );
+    } catch (error) {
+        console.error("Error in POST for INIT backup:", error);
+        return NextResponse.json(
+            {error: "Internal server error"},
+            {status: 500}
+        );
+    }
+});
+

app/api/agent/[agentId]/backup/upload/status/route.ts

@@ -0,0 +1,95 @@
+import {NextResponse} from "next/server";
+import {and, eq} from "drizzle-orm";
+import * as drizzleDb from "@/db";
+import {db as dbClient, db} from "@/db";
+import {withUpdatedAt} from "@/db/utils";
+import {getDatabaseOrThrow, withAgentCheck} from "../../helpers";
+import {eventEmitter} from "@/features/shared/event";
+
+export type Body = {
+    generatedId: string
+    status: "success" | "failed"
+    backupStorageId: string
+    path: string
+    size: number
+    backupId: string
+}
+export const PATCH = withAgentCheck(async (request: Request, {params, agent}: {
+    params: Promise<{ agentId: string }>,
+    agent: any
+}) => {
+    try {
+        const body: Body = await request.json();
+        const generatedId = body.generatedId;
+        const status = body.status;
+        const filePath = body.path;
+        const fileSize = body.size;
+        const backupStorageId = body.backupStorageId;
+        const backupId = body.backupId;
+
+
+        console.log("body", body);
+
+        const database = await getDatabaseOrThrow(generatedId);
+
+        const backup = await db.query.backup.findFirst({
+            where: and(
+                eq(drizzleDb.schemas.backup.id, backupId),
+                eq(drizzleDb.schemas.backup.databaseId, database.id),
+            ),
+            with: {
+                storages: true
+            }
+        });
+
+        if (!backup) {
+            return NextResponse.json(
+                {error: "Unable to find the corresponding backup"},
+                {status: 404}
+            );
+        }
+
+        const [backupStorage] = await dbClient
+            .update(drizzleDb.schemas.backupStorage)
+            .set(withUpdatedAt({
+                status: status,
+                path: filePath,
+                size: fileSize
+            }))
+            .where(eq(drizzleDb.schemas.backupStorage.id, backupStorageId))
+            .returning();
+
+
+        if (backup.storages.length > 0) {
+            const hasSuccessfulStorage = backup.storages.some(
+                (storage) => storage.status === "success"
+            );
+
+            if (hasSuccessfulStorage && backup.status !== "success") {
+                await db
+                    .update(drizzleDb.schemas.backup)
+                    .set({
+                        status: "success",
+                        fileSize: fileSize,
+                    })
+                    .where(eq(drizzleDb.schemas.backup.id, backup.id));
+            }
+        }
+
+        eventEmitter.emit('modification', {update: true});
+
+        return NextResponse.json({
+                message: "Backup status successfully updated",
+                backupStorage: backupStorage
+            },
+            {status: 200}
+        );
+    } catch (error) {
+        console.error("Error in POST for INIT backup:", error);
+        return NextResponse.json(
+            {error: "Internal server error"},
+            {status: 500}
+        );
+    }
+});
+

app/api/agent/[agentId]/restore/route.ts

@@ -1,10 +1,10 @@
 import {NextResponse} from "next/server";
 import {isUuidv4} from "@/utils/verify-uuid";
-import {eventEmitter} from "../../../events/route";
 import * as drizzleDb from "@/db";
 import {db} from "@/db";
 import {and, eq} from "drizzle-orm";
 import {sendNotificationsBackupRestore} from "@/features/notifications/helpers";
+import {eventEmitter} from "@/features/shared/event";
 
 export type BodyResultRestore = {
     generatedId: string
@@ -19,7 +19,6 @@ export async function POST(
 ) {
 
     try {
-        eventEmitter.emit('modification', {update: true});
 
         const agentId = (await params).agentId
         const body: BodyResultRestore = await request.json();
@@ -72,7 +71,6 @@ export async function POST(
             details: "Restoration successfully updated"
         }
 
-        eventEmitter.emit('modification', {update: true});
 
         return Response.json(response, {status: 200})
     } catch (error) {

app/api/agent/[agentId]/status/helpers.ts

@@ -1,26 +1,25 @@
 import {NextResponse} from "next/server";
 import {Body} from "./route";
 import {isUuidv4} from "@/utils/verify-uuid";
-import {getFileUrlPresignedLocal, getFileUrlPreSignedS3Action} from "@/features/upload/private/upload.action";
 import {Agent} from "@/db/schema/08_agent";
-import {Database} from "@/db/schema/07_database";
+import {Database, DatabaseWith} from "@/db/schema/07_database";
 import * as drizzleDb from "@/db";
-import {db as dbClient} from "@/db";
+import {db, db as dbClient} from "@/db";
 import {and, eq, inArray} from "drizzle-orm";
-import {EDbmsSchema} from "@/db/schema/types";
-import {ServerActionResult} from "@/types/action-type";
-import {SafeActionResult} from "next-safe-action";
-import {ZodString} from "zod";
+import {dbmsEnumSchema, EDbmsSchema} from "@/db/schema/types";
 import {withUpdatedAt} from "@/db/utils";
 import type {StorageInput} from "@/features/storages/types";
 import {dispatchStorage} from "@/features/storages/dispatch";
+import {Setting} from "@/db/schema/01_setting";
 
-export async function handleDatabases(body: Body, agent: Agent, lastContact: Date) {
+export async function handleDatabases(body: Body, agent: Agent, lastContact: Date, settings: Setting) {
     const databasesResponse = [];
 
-    const formatDatabase = (database: Database, backupAction: boolean, restoreAction: boolean, UrlBackup: string) => ({
+    const formatDatabase = (database: DatabaseWith, backupAction: boolean, restoreAction: boolean, UrlBackup: string | null, storages: PingDatabaseStorageChannels[], urlMeta: string | null) => ({
         generatedId: database.agentDatabaseId,
         dbms: database.dbms,
+        storages: storages,
+        encrypt: settings.encryption,
         data: {
             backup: {
                 action: backupAction,
@@ -29,6 +28,7 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
             restore: {
                 action: restoreAction,
                 file: UrlBackup,
+                metaFile: urlMeta
             },
         },
     });
@@ -36,12 +36,16 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
     for (const db of body.databases) {
 
         const existingDatabase = await dbClient.query.database.findFirst({
-            where: eq(drizzleDb.schemas.database.agentDatabaseId, db.generatedId)
+            where: eq(drizzleDb.schemas.database.agentDatabaseId, db.generatedId),
+            with: {
+                project: true
+            }
         });
 
         let backupAction: boolean = false
         let restoreAction: boolean = false
-        let urlBackup: string = ""
+        let urlBackup: string | null = null;
+        let urlMeta: string | null = null
 
         if (!existingDatabase) {
             if (!isUuidv4(db.generatedId)) {
@@ -50,6 +54,12 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
                     {status: 500}
                 );
             }
+
+            if (!dbmsEnumSchema.safeParse(db.dbms).success) {
+                console.log(`Database type not available: ${db.dbms}`);
+                continue;
+            }
+
             const [databaseCreated] = await dbClient
                 .insert(drizzleDb.schemas.database)
                 .values({
@@ -61,8 +71,11 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
                 })
                 .returning();
 
+
             if (databaseCreated) {
-                databasesResponse.push(formatDatabase(databaseCreated, backupAction, restoreAction, urlBackup));
+                const storages = await getDatabaseStorageChannels(databaseCreated.id)
+
+                databasesResponse.push(formatDatabase(databaseCreated, backupAction, restoreAction, urlBackup, storages, null));
             }
         } else {
 
@@ -76,11 +89,6 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
                 .where(eq(drizzleDb.schemas.database.id, existingDatabase.id))
                 .returning();
 
-
-            // const backup = await dbClient.query.backup.findFirst({
-            //     where: and(eq(drizzleDb.schemas.backup.databaseId, databaseUpdated.id), eq(drizzleDb.schemas.backup.status, "waiting"))
-            // })
-
             const activeBackup = await dbClient.query.backup.findFirst({
                 where: and(
                     eq(drizzleDb.schemas.backup.databaseId, databaseUpdated.id),
@@ -88,7 +96,6 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
                 )
             })
 
-
             const restoration = await dbClient.query.restoration.findFirst({
                 where: and(eq(drizzleDb.schemas.restoration.databaseId, databaseUpdated.id), eq(drizzleDb.schemas.restoration.status, "waiting")),
                 with: {
@@ -96,7 +103,6 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
                 }
             })
 
-
             if (activeBackup && activeBackup.status == "waiting") {
                 backupAction = true
 
@@ -109,46 +115,43 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
             if (restoration) {
                 restoreAction = true
 
-
-                // const backupToRestore = await dbClient.query.backup.findFirst({
-                //     where: eq(drizzleDb.schemas.backup.id, restoration.backupId),
-                //     with: {
-                //         database: {
-                //             with: {
-                //                 project: true
-                //             }
-                //         }
-                //     }
-                // })
-
-                // const [settings] = await dbClient.select().from(drizzleDb.schemas.setting).where(eq(drizzleDb.schemas.setting.name, "system")).limit(1);
-                // if (!settings) {
-                //     return NextResponse.json(
-                //         {error: "Unable to find settings"},
-                //         {status: 500}
-                //     );
-                // }
-
                 if (!restoration.backupStorage || restoration.backupStorage.status != "success" || !restoration.backupStorage.path) {
                     restoreAction = false
                     continue;
                 }
 
-
                 const input: StorageInput = {
                     action: "get",
                     data: {
                         path: restoration.backupStorage.path,
                         signedUrl: true,
                     },
+                    metadata: {
+                        storageId: restoration.backupStorage.storageChannelId,
+                        fileKind: "backups"
+                    }
+                };
+
+                const inputMeta: StorageInput = {
+                    action: "get",
+                    data: {
+                        path: `${restoration.backupStorage.path}.meta`,
+                        signedUrl: true,
+                    },
+                    metadata: {
+                        storageId: restoration.backupStorage.storageChannelId,
+                        fileKind: "backups"
+                    }
                 };
 
 
                 try {
                     const result = await dispatchStorage(input, undefined, restoration.backupStorage.storageChannelId);
+                    const resultMeta = await dispatchStorage(inputMeta, undefined, restoration.backupStorage.storageChannelId);
 
                     if (result.success) {
-                        urlBackup = result.url ?? "";
+                        urlBackup = result.url ?? null;
+                        urlMeta = resultMeta.url ?? null
                     } else {
                         await dbClient
                             .update(drizzleDb.schemas.restoration)
@@ -168,53 +171,78 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
                     continue;
                 }
 
-
-                // const fileName = backupToRestore?.file
-                //
-                // let data: SafeActionResult<string, ZodString, readonly [], {
-                //     _errors?: string[] | undefined;
-                // }, readonly [], ServerActionResult<string>, object> | undefined
-                //
-                // try {
-                //
-                //     if (settings.storage == "local") {
-                //         data = await getFileUrlPresignedLocal({fileName: fileName!})
-                //     } else if (settings.storage == "s3") {
-                //
-                //         data = await getFileUrlPreSignedS3Action(`backups/${backupToRestore?.database.project?.slug}/${fileName}`);
-                //     }
-                //
-                //     if (data?.data?.success) {
-                //         urlBackup = data.data.value ?? "";
-                //     } else {
-                //         await dbClient
-                //             .update(drizzleDb.schemas.restoration)
-                //             .set({status: "failed"})
-                //             .where(eq(drizzleDb.schemas.restoration.id, restoration.id));
-                //
-                //         // @ts-ignore
-                //         const errorMessage = data?.data?.actionError?.message || "Failed to get presigned URL";
-                //         console.error("Restoration failed: ", errorMessage);
-                //
-                //         continue;
-                //     }
-                // } catch (err) {
-                //     console.error("Restoration crashed unexpectedly:", err);
-                //     await dbClient
-                //         .update(drizzleDb.schemas.restoration)
-                //         .set({status: "failed"})
-                //         .where(eq(drizzleDb.schemas.restoration.id, restoration.id));
-                //
-                //     continue;
-                // }
                 await dbClient
                     .update(drizzleDb.schemas.restoration)
                     .set({status: "ongoing"})
                     .where(eq(drizzleDb.schemas.restoration.id, restoration.id));
             }
-            databasesResponse.push(formatDatabase(databaseUpdated, backupAction, restoreAction, urlBackup));
+            const storages = await getDatabaseStorageChannels(databaseUpdated.id)
+            databasesResponse.push(formatDatabase(databaseUpdated, backupAction, restoreAction, urlBackup, storages, urlMeta));
         }
     }
+
     return databasesResponse;
 }
 
+
+type PingDatabaseStorageChannels = {
+    id: string;
+    config: any
+    provider: string
+}
+
+async function getDatabaseStorageChannels(databaseId: string): Promise<PingDatabaseStorageChannels[]> {
+
+    const database = await db.query.database.findFirst({
+        where: eq(drizzleDb.schemas.database.id, databaseId),
+        with: {
+            project: true,
+            retentionPolicy: true,
+            alertPolicies: true,
+            storagePolicies: true
+        }
+    });
+
+    if (!database) {
+        return []
+    }
+
+    const settings = await db.query.setting.findFirst({
+        where: eq(drizzleDb.schemas.setting.name, "system"),
+        with: {storageChannel: true},
+    });
+
+    const defaultStorageChannel: PingDatabaseStorageChannels[] = settings?.storageChannel
+        ? [{
+            id: settings.storageChannel.id,
+            provider: settings.storageChannel.provider,
+            config: settings.storageChannel.config,
+        }]
+        : [];
+
+
+    const enabledDatabaseStorageChannels = await Promise.all(
+        (database.storagePolicies ?? [])
+            .filter(p => p.enabled)
+            .map(async policy => {
+                const storageChannel = await db.query.storageChannel.findFirst({
+                    where: eq(drizzleDb.schemas.storageChannel.id, policy.storageChannelId),
+                });
+
+                if (!storageChannel) return null;
+
+                return {
+                    id: storageChannel.id,
+                    config: storageChannel.config,
+                    provider: storageChannel.provider,
+                } as PingDatabaseStorageChannels;
+            })
+    );
+
+    const filteredChannels: PingDatabaseStorageChannels[] = enabledDatabaseStorageChannels.filter(
+        (c): c is PingDatabaseStorageChannels => c !== null
+    );
+
+    return filteredChannels.length > 0 ? filteredChannels : defaultStorageChannel;
+}
+

app/api/agent/[agentId]/status/route.ts

@@ -1,12 +1,13 @@
 import {NextResponse} from "next/server";
 import {handleDatabases} from "./helpers";
-import {eventEmitter} from "../../../events/route";
 import * as drizzleDb from "@/db";
 import {db} from "@/db";
 import {EDbmsSchema} from "@/db/schema/types";
 import {eq} from "drizzle-orm";
 import {isUuidv4} from "@/utils/verify-uuid";
 import {withUpdatedAt} from "@/db/utils";
+import {eventEmitter} from "@/features/shared/event";
+import {notFound} from "next/navigation";
 
 export type databaseAgent = {
     name: string,
@@ -26,12 +27,14 @@ export async function POST(
 ) {
     try {
         const agentId = (await params).agentId
+        console.log(agentId)
         const body: Body = await request.json();
         const lastContact = new Date();
         let message: string
 
         if (!isUuidv4(agentId)) {
             message = "agentId is not a valid uuid"
+            console.error(message)
             return NextResponse.json(
                 {error: "agentId is not a valid uuid"},
                 {status: 500}
@@ -46,7 +49,14 @@ export async function POST(
             message = "Agent not found"
             return NextResponse.json({error: message}, {status: 404})
         }
-        const databasesResponse = await handleDatabases(body, agent, lastContact)
+
+        const [settings] = await db.select().from(drizzleDb.schemas.setting).where(eq(drizzleDb.schemas.setting.name, "system")).limit(1);
+        if (!settings) {
+            return NextResponse.json({error: "An error occured"}, {status: 404})
+        }
+
+
+        const databasesResponse = await handleDatabases(body, agent, lastContact, settings)
 
         await db
             .update(drizzleDb.schemas.agent)
@@ -56,7 +66,6 @@ export async function POST(
             }))
             .where(eq(drizzleDb.schemas.agent.id, agentId));
 
-        eventEmitter.emit('modification', {update: true});
 
         const response = {
             agent: {
@@ -66,6 +75,7 @@ export async function POST(
             databases: databasesResponse
         }
 
+
         return Response.json(response)
     } catch (error) {
         console.error('Error in POST handler:', error);

app/api/events/route.ts

@@ -1,9 +1,7 @@
-import {EventEmitter} from 'events';
 import {auth} from "@/lib/auth/auth";
 import {headers} from "next/headers";
 import {NextResponse} from "next/server";
-
-export const eventEmitter = new EventEmitter();
+import {eventEmitter} from "@/features/shared/event";
 
 export async function GET(request: Request) {
 
@@ -27,7 +25,6 @@ export async function GET(request: Request) {
 
                 eventEmitter.on('modification', handleModification);
 
-                // Handle client disconnect
                 request.signal.addEventListener('abort', () => {
                     console.log('Client disconnected');
                     controller.close();

app/api/files/backups/route.ts

@@ -1,8 +1,5 @@
 import {NextResponse} from "next/server";
 import path from "path";
-import {db} from "@/db";
-import {eq} from "drizzle-orm";
-import * as drizzleDb from "@/db";
 import type {StorageInput} from "@/features/storages/types";
 import {dispatchStorage} from "@/features/storages/dispatch";
 import {Readable} from "node:stream";
@@ -15,17 +12,10 @@ export async function GET(
     const token = searchParams.get('token');
     const expires = searchParams.get('expires');
     const pathFromUrl = searchParams.get('path');
+    const storageId = searchParams.get('storageId');
 
-    if (!pathFromUrl) {
-        return NextResponse.json({error: "Missing file path in search params"}, {status: 404})
-    }
-
-    const localStorageChannel = await db.query.storageChannel.findFirst({
-        where: eq(drizzleDb.schemas.storageChannel.provider, "local"),
-    })
-
-    if (!localStorageChannel) {
-        return NextResponse.json({error: "No local storage channel found"})
+    if (!pathFromUrl || !storageId) {
+        return NextResponse.json({error: "Missing search params"}, {status: 404})
     }
 
     const input: StorageInput = {
@@ -34,17 +24,20 @@ export async function GET(
             path: pathFromUrl,
             signedUrl: true,
         },
+        metadata: {
+            storageId: storageId,
+            fileKind: "backups",
+        }
     };
 
     console.debug(input);
 
-    const result = await dispatchStorage(input, undefined, localStorageChannel.id);
+    const result = await dispatchStorage(input, undefined, storageId);
 
     if (!result.success) {
-        return NextResponse.json({error: "Enable to get file from local storage channel, an error occurred !"})
+        return NextResponse.json({error: "Enable to get file from provided storage channel, an error occurred !"})
     }
 
-
     const fileName = path.basename(pathFromUrl);
 
     const crypto = require('crypto');
@@ -64,14 +57,14 @@ export async function GET(
         );
     }
 
-    if (!result.file || !Buffer.isBuffer(result.file)) {
+    if (!result.file || !(result.file instanceof Readable)) {
         return NextResponse.json(
             {error: "Invalid file payload"},
             {status: 500}
         );
     }
 
-    const fileStream = Readable.from(result.file);
+    const fileStream = Readable.from(result.file as Readable);
 
     const stream = new ReadableStream({
         start(controller) {

app/api/files/images/[fileName]/route.ts

@@ -1,10 +1,6 @@
 import {NextResponse} from "next/server";
 import {auth} from "@/lib/auth/auth";
 import {headers} from "next/headers";
-import {checkFileExistsInBucket, getObjectFromClient} from "@/utils/s3-file-management";
-import {env} from "@/env.mjs";
-import * as stream from "node:stream";
-import path from "path";
 import {db} from "@/db";
 import * as drizzleDb from "@/db";
 import {eq} from "drizzle-orm";
@@ -16,28 +12,20 @@ export async function GET(
     req: Request,
     {params}: { params: Promise<{ fileName: string }> }
 ) {
-
-
+    const {searchParams} = new URL(req.url);
     const fileName = (await params).fileName;
-
+    const storageId = searchParams.get('storageId');
 
     if (!fileName) return NextResponse.json({error: "Missing file parameter"}, {status: 400});
 
     const session = await auth.api.getSession({headers: await headers()});
     if (!session) return NextResponse.json({error: "Unauthorized"}, {status: 403});
 
-    const settings = await db.query.setting.findFirst({
-        where: eq(drizzleDb.schemas.setting.name, "system"),
-        with: {
-            storageChannel: true
-        }
-    });
 
-    if (!settings || !settings.storageChannel) {
-        return NextResponse.json({error: "Unable to get settings or no default storage channel"});
+    if (!storageId) {
+        return NextResponse.json({error: "Missing storageId in search params"}, {status: 404})
     }
 
-
     const ext = fileName.split(".").pop()?.toLowerCase();
     const contentType =
         ext === "png"
@@ -58,19 +46,24 @@ export async function GET(
             action: "get",
             data: {
                 path: path,
+            },
+            metadata: {
+                storageId: storageId,
+                fileKind: "images"
             }
         }
 
-        const result = await dispatchStorage(input, undefined, settings.storageChannel.id);
+        const result = await dispatchStorage(input, undefined, storageId);
 
-        if (!result.file || !Buffer.isBuffer(result.file)) {
+        if (!result.file || !(result.file instanceof Readable)) {
+            console.error(`An error occurred while getting file :`, result);
             return NextResponse.json(
                 {error: "Invalid file payload"},
                 {status: 500}
             );
         }
 
-        const fileStream = Readable.from(result.file);
+        const fileStream = Readable.from(result.file as Readable);
 
         const stream = new ReadableStream({
             start(controller) {

app/api/google/drive/callback/route.ts

@@ -0,0 +1,23 @@
+export async function GET(request: Request) {
+    const url = new URL(request.url);
+    const code = url.searchParams.get("code");
+
+    const success = Boolean(code);
+
+    return new Response(
+        `
+        <!DOCTYPE html>
+        <html>
+            <body>
+                <h1>${success ? "Success" : "Failed"}</h1>
+            </body>
+        </html>
+        `,
+        {
+            status: success ? 200 : 400,
+            headers: {
+                "Content-Type": "text/html; charset=utf-8",
+            },
+        }
+    );
+}

app/api/tus/hooks/route.ts

@@ -0,0 +1,80 @@
+import {NextResponse} from "next/server";
+import fs from "fs";
+import path from "path";
+import {env} from "@/env.mjs";
+
+
+export async function POST(request: Request) {
+    try {
+        const body = await request.json();
+        const event = body.Event
+        const headers = event.HTTPRequest.Header
+        const uploadLength = headers["X-File-Size"]?.[0];
+        const uploadOffset = headers["Upload-Offset"]?.[0];
+        const status = headers["X-Status"]?.[0];
+
+        console.log(`Upload ID : ${event.Upload.ID} (${uploadOffset}/${uploadLength})`);
+
+        if (status === "success") {
+            if (
+                body.Type === "post-receive" &&
+                event.Upload.SizeIsDeferred === false &&
+                event.Upload.Offset === event.Upload.Size
+            ) {
+                const id = event.Upload.ID;
+                const fileName = headers["X-File-Name"]?.[0];
+                const filePath = headers["X-File-Path"]?.[0];
+
+                if (!filePath) {
+                    return NextResponse.json({error: "Missing X-File-Path"}, {status: 500});
+                }
+
+
+                // const uploadDir = path.join(process.cwd(), "/private/uploads/");
+                const uploadDir = path.join(env.PRIVATE_PATH, "/uploads/");
+
+                const oldFilePath = path.join(uploadDir, "tmp", id);
+                const newFilePath = path.join(uploadDir, filePath);
+
+                fs.mkdirSync(path.dirname(newFilePath), {recursive: true});
+
+                let retries = 10;
+                while (!fs.existsSync(oldFilePath)) {
+                    if (retries-- === 0) {
+                        return NextResponse.json({error: `Upload file not found: ${oldFilePath}`}, {status: 500});
+                    }
+                    await new Promise(r => setTimeout(r, 200));
+                }
+
+                fs.renameSync(oldFilePath, newFilePath);
+
+                const infoFilePath = `${oldFilePath}.info`;
+                if (fs.existsSync(infoFilePath)) {
+                    fs.unlinkSync(infoFilePath);
+                }
+
+                const metadataHeaderB64 = headers["Upload-Metadata"]?.[0];
+
+                if (metadataHeaderB64) {
+                    const metadataHeader = Buffer.from(metadataHeaderB64, "base64").toString("utf-8");
+                    if (metadataHeader) {
+                        const tomlContent = metadataHeader
+                            .split(",")
+                            .map((pair) => {
+                                const [key, value] = pair.split(" ");
+                                const escapedValue = value.replace(/"/g, '\\"');
+                                return `${key} = "${escapedValue}"`;
+                            })
+                            .join("\n");
+                        const metaFilePath = `${newFilePath}.meta`;
+                        fs.writeFileSync(metaFilePath, tomlContent, "utf-8");
+                    }
+                }
+            }
+        }
+        return NextResponse.json({});
+    } catch (error) {
+        console.error("Hook error:", error);
+        return NextResponse.json({error: "Internal server error"}, {status: 500});
+    }
+}

app/globals.css

@@ -6,8 +6,11 @@
 @theme inline {
     --color-background: var(--background);
     --color-foreground: var(--foreground);
-    --font-sans: var(--font-geist-sans);
+    --font-sans: var(--font-poppins), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-title: var(--font-poppins), var(--font-poppins), sans-serif;
     --font-mono: var(--font-geist-mono);
+    --font-author: var(--font-author);
+    --font-poppins: var(--font-poppins);
     --color-sidebar-ring: var(--sidebar-ring);
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -71,7 +74,7 @@
     --card-foreground: oklch(0.145 0 0);
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
+    --primary: oklch(0.611 0.204 42.149);
     --primary-foreground: oklch(0.985 0 0);
     --secondary: oklch(0.97 0 0);
     --secondary-foreground: oklch(0.205 0 0);
@@ -82,7 +85,7 @@
     --destructive: oklch(0.577 0.245 27.325);
     --border: oklch(0.922 0 0);
     --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
+    --ring: oklch(0.611 0.204 42.149);
     --chart-1: oklch(0.646 0.222 41.116);
     --chart-2: oklch(0.6 0.118 184.704);
     --chart-3: oklch(0.398 0.07 227.392);
@@ -90,12 +93,12 @@
     --chart-5: oklch(0.769 0.188 70.08);
     --sidebar: oklch(0.985 0 0);
     --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary: oklch(0.611 0.204 42.149);
     --sidebar-primary-foreground: oklch(0.985 0 0);
     --sidebar-accent: oklch(0.97 0 0);
     --sidebar-accent-foreground: oklch(0.205 0 0);
     --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
+    --sidebar-ring: oklch(0.611 0.204 42.149);
 }
 
 .dark {
@@ -105,8 +108,8 @@
     --card-foreground: oklch(0.985 0 0);
     --popover: oklch(0.205 0 0);
     --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
+    --primary: oklch(0.704 0.191 47.132);
+    --primary-foreground: oklch(0.985 0 0);
     --secondary: oklch(0.269 0 0);
     --secondary-foreground: oklch(0.985 0 0);
     --muted: oklch(0.269 0 0);
@@ -116,7 +119,7 @@
     --destructive: oklch(0.704 0.191 22.216);
     --border: oklch(1 0 0 / 10%);
     --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
+    --ring: oklch(0.704 0.191 47.132);
     --chart-1: oklch(0.488 0.243 264.376);
     --chart-2: oklch(0.696 0.17 162.48);
     --chart-3: oklch(0.769 0.188 70.08);
@@ -124,12 +127,12 @@
     --chart-5: oklch(0.645 0.246 16.439);
     --sidebar: oklch(0.205 0 0);
     --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary: oklch(0.704 0.191 47.132);
     --sidebar-primary-foreground: oklch(0.985 0 0);
     --sidebar-accent: oklch(0.269 0 0);
     --sidebar-accent-foreground: oklch(0.985 0 0);
     --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
+    --sidebar-ring: oklch(0.704 0.191 47.132);
 }
 
 @layer base {
@@ -137,6 +140,18 @@
         @apply border-border outline-ring/50;
     }
     body {
-        @apply bg-background text-foreground;
+        @apply bg-background text-foreground font-sans;
+    }
+    h1, h2, h3, h4, h5, h6 {
+        @apply font-title;
+    }
+
+    .scrollbar-hide {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+
+    .scrollbar-hide::-webkit-scrollbar {
+        display: none;
     }
 }

app/layout.tsx

@@ -4,7 +4,7 @@ import "./globals.css";
 import {Providers} from "./providers";
 import {cn} from "@/lib/utils";
 import {ConsoleSilencer} from "@/components/wrappers/common/console-silencer";
-import {inter} from "@/fonts/fonts";
+import {author, geistMono, poppins} from "@/fonts/fonts";
 
 const title = process.env.PROJECT_NAME ?? "App Title";
 
@@ -27,7 +27,7 @@ export default async function RootLayout({
         <head>
             <meta name="apple-mobile-web-app-title" content={title}/>
         </head>
-        <body className={cn(inter.className, "h-full")}>
+        <body className={cn(poppins.variable, author.variable, geistMono.variable, "font-sans h-full")}>
         <ConsoleSilencer/>
         <Providers>
             {children}

app/providers.tsx

@@ -6,7 +6,6 @@ import {ThemeProvider} from "@/features/theme/theme-provider";
 import {Toaster} from "@/components/ui/sonner";
 import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 import {ThemeMetaUpdaterRoot} from "@/features/browser/theme-meta-updater-root";
-import {BackupModalProvider} from "@/components/wrappers/dashboard/database/backup/backup-modal-context";
 
 
 export type ProviderProps = PropsWithChildren<{}>;

docker-compose.prod.yml

@@ -1,19 +1,18 @@
-name: portabase-prod
-
 services:
-
   app:
-#    build:
-#      context: .
-#      dockerfile: docker/dockerfile/Dockerfile
-#      target: prod
-    image: solucetechnologies/portabase:1.1.4-rc.2
+#        build:
+#          context: .
+#          dockerfile: docker/dockerfile/Dockerfile
+#          target: prod
+    image: portabase/portabase:latest
     ports:
       - '8887:80'
     environment:
       TZ: "Europe/Paris"
     env_file:
       - .env
+    volumes:
+      - portabase-data:/data
     depends_on:
       db:
         condition: service_healthy
@@ -36,4 +35,5 @@ services:
       retries: 5
 
 volumes:
+  portabase-data:
   postgres-data:

docker-compose.yml

@@ -17,5 +17,19 @@ services:
       timeout: 5s
       retries: 5
 
+  tusd:
+    image: tusproject/tusd:v2.8.0
+    ports:
+      - "1080:8080"
+    command: >
+      -upload-dir /data/uploads/tmp
+      -hooks-http http://localhost:8887/api/tus/hooks
+      -max-size 21474836480
+      -base-path /tus/files/
+    extra_hosts:
+      - "localhost:host-gateway"
+    volumes:
+      - ./private/uploads/tmp:/data/uploads/tmp
+
 volumes:
   postgres-data:

docker/dockerfile/Dockerfile

@@ -1,53 +1,80 @@
-FROM node:22-alpine AS base
+#FROM node:22-bullseye AS base
+FROM --platform=$BUILDPLATFORM node:22-bullseye AS base
+
+RUN apt-get update && apt-get install -y \
+    curl \
+    ca-certificates \
+    bash \
+    tzdata \
+    libc6 \
+    build-essential \
+    g++ \
+    make \
+    autoconf \
+    automake \
+    libtool \
+    git \
+    nginx \
+    && rm -rf /var/lib/apt/lists/*
+
+
+RUN mkdir -p /etc/apt/keyrings \
+    && curl -fsSL https://www.postgresql.org/media/keys/ACCC4CF8.asc \
+    | gpg --dearmor -o /etc/apt/keyrings/postgresql.gpg \
+    && echo "deb [signed-by=/etc/apt/keyrings/postgresql.gpg] http://apt.postgresql.org/pub/repos/apt bullseye-pgdg main" \
+    > /etc/apt/sources.list.d/pgdg.list
+
+RUN apt-get update && apt-get install -y \
+    postgresql-18 \
+    postgresql-client-18 \
+    postgresql-contrib-18 \
+    && rm -rf /var/lib/apt/lists/*
+
+ENV PATH="/usr/lib/postgresql/18/bin:${PATH}"
+
+
+FROM --platform=$BUILDPLATFORM golang:1.23-bookworm AS tusd-base
+
+ARG TUSD_VERSION=2.8.0
+
+RUN apt-get update && apt-get install -y --no-install-recommends git ca-certificates \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /build
+
+RUN git clone https://github.com/tus/tusd.git . \
+    && git checkout v${TUSD_VERSION}
+
+RUN CGO_ENABLED=0 GOOS=linux GOARCH=${TARGETARCH} \
+    go build -ldflags="-s -w" -o /tusddist/tusd ./cmd/tusd
+
+FROM scratch AS tusd-dist
+COPY --from=tusd-base /tusddist/tusd /tusd
 
-RUN apk add --update --no-cache \
-    libc6-compat \
-    openssl \
-    tzdata
 
 FROM base AS build-env
 
-RUN apk add --update --no-cache \
-    build-base \
-    g++ \
-    make \
-    libtool \
-    autoconf \
-    automake
-
 RUN corepack enable && corepack prepare pnpm@latest --activate
 
-
-
-
 FROM build-env AS deps
 
 WORKDIR /app
 
 COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
-
 RUN pnpm i --frozen-lockfile
 
-
-
-
 FROM build-env AS dev
 
-WORKDIR /app
-
 COPY --from=deps /app/node_modules ./node_modules
+COPY --from=tusd-base /usr/local/bin/tusd /usr/local/bin/tusd
+WORKDIR /app
 COPY . .
 
 USER root
-
 RUN chmod +x /app/docker/entrypoints/app-dev-entrypoint.sh
+
 ENTRYPOINT ["sh","/app/docker/entrypoints/app-dev-entrypoint.sh"]
 
-
-
-
-
-
 FROM build-env AS builder
 
 WORKDIR /app
@@ -55,51 +82,46 @@ COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
 ENV NEXT_TELEMETRY_DISABLED=1
-
 RUN pnpm run build
 
-
-
-
-
-
 FROM base AS prod
 
 WORKDIR /app
-
 ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1
+ENV PORT=80
+ENV HOSTNAME="0.0.0.0"
+ENV PGDATA=/data/postgres
+ENV PRIVATE_PATH=/data/private
+
 
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
 COPY --from=builder /app/public ./public
-
-RUN mkdir .next
-RUN chown nextjs:nodejs .next
-RUN mkdir -p /app/private/uploads
-RUN chown -R nextjs:nodejs /app/private
-RUN chown -R nextjs:nodejs /app/public
-
-
 COPY --from=builder /app/next.config.ts ./
 COPY --from=builder /app/portabase.config.ts ./
 COPY --from=builder /app/drizzle.config.ts ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-COPY --chown=nextjs:nodejs src/db ./src/db
+COPY --from=builder --chown=1001:1001 /app/.next/standalone ./
+COPY --from=builder --chown=1001:1001 /app/.next/static ./.next/static
+COPY --chown=1001:1001 src/db ./src/db
+COPY --from=deps /app/node_modules ./node_modules
+
+COPY --from=tusd-dist /tusd /usr/local/bin/tusd
+RUN chmod +x /usr/local/bin/tusd
+
+COPY docker/nginx/nginx.conf /etc/nginx/nginx.conf
+
+#RUN mkdir -p .next /app/private/uploads \
+#    && chown -R nextjs:nodejs .next /app/private /app/public
+
+RUN mkdir -p .next /data/private/uploads \
+    && chown -R nextjs:nodejs .next /data/private /app/public
+
 
 USER root
-
 COPY ./docker/entrypoints/app-prod-entrypoint.sh /app/app-prod-entrypoint.sh
 RUN chmod +x /app/app-prod-entrypoint.sh
 
 EXPOSE 80
-
-ENV PORT=80
-
-ENV HOSTNAME="0.0.0.0"
-
-USER nextjs
-
 ENTRYPOINT ["sh","/app/app-prod-entrypoint.sh"]

docker/entrypoints/app-prod-entrypoint.sh

@@ -7,8 +7,77 @@ else
     echo "[WARN] No TZ provided, using default container timezone"
 fi
 
+POSTGRES_BIN=$(ls -d /usr/lib/postgresql/*/bin | head -n 1)
 
-node server.js
+if [ -z "$POSTGRES_BIN" ]; then
+    echo "PostgreSQL binaries not found"
+    exit 1
+fi
+
+export PATH="$POSTGRES_BIN:$PATH"
+
+if [ -z "$DATABASE_URL" ]; then
+    echo "[INFO] No DATABASE_URL provided, starting internal Postgres..."
+
+    mkdir -p "$PGDATA"
+    chown -R postgres:postgres "$PGDATA"
+
+    if [ ! -f "$PGDATA/PG_VERSION" ]; then
+        echo "[INFO] Initializing database cluster..."
+        if ! su postgres -c "initdb -D '$PGDATA'" > /dev/null 2>&1; then
+            echo "[ERROR] initdb failed"
+            exit 1
+        fi
+    fi
+
+    if ! su postgres -c "pg_ctl -D '$PGDATA' \
+        -o \"-c listen_addresses='localhost' -c logging_collector=on\" \
+        -l $PGDATA/postgres.log -w start" > /dev/null 2>&1; then
+        echo "[ERROR] PostgreSQL failed to start"
+        exit 1
+    fi
+
+    until su postgres -c "pg_isready -h 127.0.0.1 -p 5432" > /dev/null 2>&1; do
+        sleep 1
+    done
+
+    echo "[INFO] PostgreSQL server is up and accepting connections"
+
+    DB_USER="${POSTGRES_USER:-portabase_user}"
+    DB_PASS="${POSTGRES_PASSWORD:-JaB6b1SUtIWYvt7srnOt}"
+    DB_NAME="${POSTGRES_DB:-portabase_db}"
+
+    USER_EXISTS=$(su postgres -c "psql -tAc \"SELECT 1 FROM pg_roles WHERE rolname='$DB_USER'\"" 2>/dev/null)
+    if [ "$USER_EXISTS" != "1" ]; then
+        if ! su postgres -c "psql -c \"CREATE USER $DB_USER WITH PASSWORD '$DB_PASS';\"" > /dev/null 2>&1; then
+            echo "[ERROR] Failed creating user"
+            exit 1
+        fi
+    fi
+
+    DB_EXISTS=$(su postgres -c "psql -tAc \"SELECT 1 FROM pg_database WHERE datname='$DB_NAME'\"" 2>/dev/null)
+    if [ "$DB_EXISTS" != "1" ]; then
+        if ! su postgres -c "psql -c \"CREATE DATABASE $DB_NAME OWNER $DB_USER;\"" > /dev/null 2>&1; then
+            echo "[ERROR] Failed creating database"
+            exit 1
+        fi
+    fi
+
+    export DATABASE_URL="postgres://$DB_USER:$DB_PASS@127.0.0.1:5432/$DB_NAME"
+
+    echo "[SUCCESS] Internal PostgreSQL started successfully"
+    echo "[SUCCESS] Database: $DB_NAME | User: $DB_USER | Host: 127.0.0.1:5432"
+fi
+
+
+mkdir -p /data/private/uploads/tmp
+echo "▶ Starting tusd server..."
+tusd --base-path /tus/files/ --upload-dir /data/private/uploads/tmp --hooks-http http://127.0.0.1:3000/api/tus/hooks --port 1080 --max-size 21474836480 &
+
+echo "▶ Starting Next.js server..."
+PORT=3000 node server.js &
+
+echo "▶ Starting nginx..."
+exec nginx -g "daemon off;"
 
-exec "$@"
 

docker/nginx/nginx.conf

@@ -0,0 +1,41 @@
+events {}
+
+http {
+    client_max_body_size 20G;
+    ignore_invalid_headers  off;
+
+    server {
+        listen 80;
+
+       location /tus/ {
+            proxy_pass http://127.0.0.1:1080/tus/;
+
+            proxy_pass_request_headers on;
+
+            proxy_request_buffering  off;
+            proxy_buffering          off;
+            proxy_http_version       1.1;
+
+            proxy_set_header Host $http_host;
+            proxy_set_header X-Forwarded-Host $http_host;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+
+            proxy_set_header         Upgrade $http_upgrade;
+            proxy_set_header         Connection "upgrade";
+        }
+
+        location / {
+            proxy_pass http://127.0.0.1:3000;
+
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+
+            proxy_set_header Host $http_host;
+            proxy_set_header X-Forwarded-Host $http_host;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        }
+    }
+}

next.config.ts

@@ -1,6 +1,8 @@
 import type {NextConfig} from "next";
 import {PORTABASE_DEFAULT_SETTINGS} from "./portabase.config";
 
+const isDev = process.env.NODE_ENV === "development";
+
 
 function buildCSPHeader(): string {
     const {CSP} = PORTABASE_DEFAULT_SETTINGS.SECURITY;
@@ -46,8 +48,18 @@ const nextConfig: NextConfig = {
             bodySizeLimit: "10gb",
         },
         proxyClientMaxBodySize: '10gb',
-
     },
+    async rewrites() {
+        if (!isDev) return [];
+
+        return [
+            {
+                source: "/tus/:path*",
+                destination: "http://localhost:1080/tus/:path*",
+            },
+        ];
+    },
+
     async headers() {
         return [
             {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portabase",
-  "version": "1.2.1-rc.1",
+  "version": "1.2.6-rc.2",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack -p 8887",
@@ -14,113 +14,118 @@
     "auth:generate": "npx @better-auth/cli generate --config ./src/lib/auth/auth.ts"
   },
   "dependencies": {
-    "@hookform/resolvers": "^5.0.1",
-    "@radix-ui/react-accordion": "^1.2.10",
-    "@radix-ui/react-alert-dialog": "^1.1.13",
-    "@radix-ui/react-aspect-ratio": "^1.1.6",
-    "@radix-ui/react-avatar": "^1.1.9",
-    "@radix-ui/react-checkbox": "^1.3.1",
-    "@radix-ui/react-collapsible": "^1.1.10",
-    "@radix-ui/react-context-menu": "^2.2.14",
-    "@radix-ui/react-dialog": "^1.1.13",
-    "@radix-ui/react-dropdown-menu": "^2.1.14",
-    "@radix-ui/react-hover-card": "^1.1.13",
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-label": "^2.1.6",
-    "@radix-ui/react-menubar": "^1.1.14",
-    "@radix-ui/react-navigation-menu": "^1.2.12",
-    "@radix-ui/react-popover": "^1.1.13",
-    "@radix-ui/react-progress": "^1.1.6",
-    "@radix-ui/react-radio-group": "^1.3.6",
-    "@radix-ui/react-scroll-area": "^1.2.8",
-    "@radix-ui/react-select": "^2.2.4",
-    "@radix-ui/react-separator": "^1.1.6",
-    "@radix-ui/react-slider": "^1.3.4",
-    "@radix-ui/react-slot": "^1.2.2",
-    "@radix-ui/react-switch": "^1.2.4",
-    "@radix-ui/react-tabs": "^1.1.11",
-    "@radix-ui/react-toast": "^1.2.13",
-    "@radix-ui/react-toggle": "^1.1.8",
-    "@radix-ui/react-toggle-group": "^1.1.9",
-    "@radix-ui/react-tooltip": "^1.2.6",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-email/components": "^0.0.41",
-    "@t3-oss/env-nextjs": "^0.13.4",
-    "@tanstack/react-query": "^5.76.1",
+    "@t3-oss/env-nextjs": "^0.13.10",
+    "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-table": "^8.21.3",
-    "@types/nodemailer": "^6.4.17",
+    "@types/express": "^5.0.6",
+    "@types/nodemailer": "^6.4.22",
     "@types/ws": "^8.18.1",
     "@zenstackhq/runtime": "2.14.2",
-    "argon2": "^0.43.0",
+    "argon2": "^0.43.1",
     "bcrypt": "^6.0.0",
     "better-auth": "1.4.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
-    "dockerode": "^4.0.6",
-    "dotenv": "^16.5.0",
+    "dockerode": "^4.0.9",
+    "dotenv": "^16.6.1",
     "drizzle-orm": "^0.43.1",
     "drizzle-zod": "^0.7.1",
     "embla-carousel-react": "^8.6.0",
+    "express": "^5.2.1",
+    "googleapis": "^170.1.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.553.0",
-    "minio": "^8.0.5",
-    "motion": "^12.23.24",
-    "next": "16.0.10",
+    "minio": "^8.0.6",
+    "motion": "^12.34.0",
+    "next": "16.1.5",
     "next-safe-action": "^7.10.8",
     "next-themes": "^0.4.6",
     "node-cron": "^4.2.1",
-    "node-forge": "^1.3.1",
-    "nodemailer": "^7.0.3",
-    "npm-check-updates": "^18.0.1",
-    "pg": "^8.16.0",
-    "prettier": "^3.8.0",
-    "react": "^19.2.0",
+    "node-forge": "^1.3.3",
+    "nodemailer": "^7.0.13",
+    "npm-check-updates": "^18.3.1",
+    "pg": "^8.18.0",
+    "prettier": "^3.8.1",
+    "react": "^19.2.4",
     "react-day-picker": "9.7.0",
-    "react-dom": "^19.2.0",
-    "react-dropzone": "^14.3.8",
-    "react-email": "^4.0.13",
-    "react-hook-form": "^7.56.3",
+    "react-dom": "^19.2.4",
+    "react-dropzone": "^14.4.1",
+    "react-email": "^4.3.2",
+    "react-hook-form": "^7.71.1",
     "react-qr-code": "^2.0.18",
-    "react-resizable-panels": "^3.0.2",
-    "react-twc": "^1.4.2",
+    "react-resizable-panels": "^3.0.6",
+    "react-twc": "^1.5.1",
     "react-use-measure": "^2.1.7",
-    "recharts": "^2.15.3",
-    "socket.io": "^4.8.1",
-    "socket.io-client": "^4.8.1",
-    "sonner": "^2.0.3",
-    "swiper": "^12.0.3",
-    "tailwind-merge": "^3.3.0",
+    "recharts": "^2.15.4",
+    "sharp": "^0.34.5",
+    "socket.io": "^4.8.3",
+    "socket.io-client": "^4.8.3",
+    "sonner": "^2.0.7",
+    "swiper": "^12.1.0",
+    "tailwind-merge": "^3.4.0",
     "uuid": "^11.1.0",
     "vaul": "^1.1.2",
-    "ws": "^8.18.2",
-    "zod": "^3.24.4"
+    "ws": "^8.19.0",
+    "zod": "^3.25.76"
   },
   "devDependencies": {
-    "@iconify/react": "^6.0.0",
+    "@iconify/react": "^6.0.2",
     "@react-email/preview-server": "4.3.2",
-    "@react-email/render": "^2.0.1",
-    "@tailwindcss/postcss": "^4.1.7",
+    "@react-email/render": "^2.0.4",
+    "@tailwindcss/postcss": "^4.1.18",
     "@types/eslint-plugin-tailwindcss": "^3.17.0",
-    "@types/node": "^22.15.18",
-    "@types/node-forge": "^1",
-    "@types/pg": "^8.15.2",
-    "@types/react": "^19.1.4",
-    "@types/react-dom": "^19.1.5",
-    "@zenstackhq/openapi": "^2.14.2",
-    "@zenstackhq/tanstack-query": "^2.14.2",
-    "baseline-browser-mapping": "^2.8.32",
-    "drizzle-kit": "^0.31.1",
-    "eslint": "^9.39.0",
-    "eslint-config-next": "^16.0.1",
-    "eslint-plugin-tailwindcss": "^3.18.0",
-    "framer-motion": "^12.24.7",
-    "postcss": "^8.5.3",
-    "tailwindcss": "^4.1.7",
-    "tsx": "^4.19.4",
-    "tw-animate-css": "^1.2.9",
-    "typescript": "^5.8.3",
+    "@types/node": "^22.19.11",
+    "@types/node-forge": "^1.3.14",
+    "@types/pg": "^8.16.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@zenstackhq/openapi": "^2.22.1",
+    "@zenstackhq/tanstack-query": "^2.22.2",
+    "baseline-browser-mapping": "^2.9.19",
+    "drizzle-kit": "^0.31.9",
+    "esbuild": "^0.27.3",
+    "eslint": "^9.39.2",
+    "eslint-config-next": "^16.1.6",
+    "eslint-plugin-tailwindcss": "^3.18.2",
+    "framer-motion": "^12.34.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "tsx": "^4.21.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3",
     "zenstack": "2.14.2"
   },
-  "packageManager": "pnpm@10.27.0"
+  "packageManager": "pnpm@10.29.2+sha512.bef43fa759d91fd2da4b319a5a0d13ef7a45bb985a3d7342058470f9d2051a3ba8674e629672654686ef9443ad13a82da2beb9eeb3e0221c87b8154fff9d74b8"
 }

pnpm-workspace.yaml

@@ -1,2 +1,13 @@
 onlyBuiltDependencies:
+  - '@prisma/client'
+  - '@prisma/engines'
+  - argon2
+  - bcrypt
+  - cpu-features
+  - esbuild
+  - prisma
+  - protobufjs
+  - sharp
+  - ssh2
+  - unrs-resolver
   - zenstack

proxy.ts

@@ -53,12 +53,15 @@ function checkRouteExists(pathname: string) {
     const routePatterns = [
         /^\/api\/agent\/[^/]+\/status\/?$/,
         /^\/api\/agent\/[^/]+\/backup\/?$/,
+        /^\/api\/agent\/[^/]+\/backup\/upload\/init\/?$/,
+        /^\/api\/agent\/[^/]+\/backup\/upload\/status\/?$/,
         /^\/api\/agent\/[^/]+\/restore\/?$/,
-        /^\/api\/files\/?$/,
-        /^\/api\/images\/[^/]+\/?$/,
+        /^\/api\/files\/images\/[^/]+\/?$/,
+        /^\/api\/files\/backups\/?$/,
+        /^\/api\/tus\/hooks\/?$/,
         /^\/api\/events\/?$/,
-        /^\/api\/init\/?$/,
         /^\/api\/config\/?$/,
+        /^\/api\/google\/drive\/callback\/?$/,
     ];
     return routePatterns.some((pattern) => pattern.test(pathname));
 }

server/api.ts

@@ -0,0 +1,6 @@
+import express from "express";
+import router from "../src/features/api/router";
+
+export function mountApi(app: express.Express) {
+    app.use("/services/v1", router);
+}

server/server.ts

@@ -0,0 +1,52 @@
+import next from "next";
+import express from "express";
+import {mountApi} from "./api";
+import http from "http";
+
+const port = Number(process.env.PORT) || 8887;
+const dev = process.env.NODE_ENV !== "production";
+
+async function start() {
+    const nextApp = next({
+        dev,
+        hostname: "0.0.0.0",
+        turbopack: dev,
+        port
+    });
+
+    const handle = nextApp.getRequestHandler();
+
+    await nextApp.prepare();
+
+    const app = express();
+
+    app.use((req, res, next) => {
+        req.setTimeout(0);
+        res.setTimeout(0);
+        next();
+    });
+
+    mountApi(app);
+
+    app.use((req, res, next) => {
+        if (req.path.startsWith('/services/v1')) return next();
+        handle(req, res).catch((err) => {
+            console.error('Next.js App Router error:', err);
+            res.status(500).send('Internal Server Error');
+        });
+    });
+
+    const server = http.createServer(app);
+
+    server.setTimeout(0);
+    server.headersTimeout = 0;
+    server.requestTimeout = 0;
+    server.keepAliveTimeout = 0;
+
+    server.listen(port, "0.0.0.0", () => {
+        console.log(`NEXT APP → http://localhost:${port}`);
+        console.log(`API → http://localhost:${port}/services/v1`);
+    });
+}
+
+start();

src/components/ui/dialog.tsx

@@ -58,7 +58,7 @@ function DialogContent({
             data-slot="dialog-content"
             className={cn(
                 "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-                "max-h-[90vh] overflow-y-auto",
+                "max-h-[90vh] overflow-y-auto overflow-x-hidden",
                 className
             )}
             {...props}

src/components/ui/github-button.tsx

@@ -7,7 +7,7 @@ import { motion, useInView, type SpringOptions, type UseInViewOptions } from 'mo
 import { cn } from '@/lib/utils';
 
 const githubButtonVariants = cva(
-  'cursor-pointer relative overflow-hidden will-change-transform backface-visibility-hidden transform-gpu transition-transform duration-200 ease-out hover:scale-105 group whitespace-nowrap focus-visible:outline-hidden inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0',
+  'cursor-pointer relative overflow-hidden will-change-transform backface-visibility-hidden transform-gpu group whitespace-nowrap focus-visible:outline-hidden inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0',
   {
     variants: {
       variant: {

src/components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent px-4 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className

src/components/ui/sidebar.tsx

@@ -374,7 +374,7 @@ function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="sidebar-content"
       data-sidebar="content"
       className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto scrollbar-hide group-data-[collapsible=icon]:overflow-hidden",
         className
       )}
       {...props}

src/components/wrappers/auth/auth-logo-section.tsx

@@ -41,9 +41,6 @@ export const AuthLogoSection = () => {
 
                 />
             )}
-            <span className="absolute bottom-8 right-5 text-sm text-muted-foreground" style={style}>
-                v{env.NEXT_PUBLIC_PROJECT_VERSION}
-            </span>
         </div>
     );
 };

src/components/wrappers/auth/login/forgot-password-form/forgot-password-form.tsx

@@ -68,7 +68,7 @@ export const ForgotPasswordForm = (props: ForgotPasswordFormProps) => {
             />
 
             <div className="flex flex-col items-center gap-y-6 w-full">
-                <ButtonWithLoading className="mt-2 w-full" isPending={mutation.isPending}>
+                <ButtonWithLoading className="mt-2 w-full h-11" isPending={mutation.isPending}>
                     Send reset link
                 </ButtonWithLoading>
                 <Link href="/login" className="group flex items-center text-sm hover:underline">

src/components/wrappers/auth/login/login-form/login-form.tsx

@@ -85,7 +85,7 @@ export const LoginForm = (props: loginFormProps) => {
                     <FormItem>
                         <FormLabel>Email Address</FormLabel>
                         <FormControl>
-                            <Input autoComplete="email" autoFocus placeholder="exemple@portabase.io" {...field} />
+                            <Input autoComplete="email" autoFocus placeholder="example@portabase.io" {...field} />
                         </FormControl>
                         <FormMessage/>
                     </FormItem>
@@ -113,7 +113,7 @@ export const LoginForm = (props: loginFormProps) => {
                     </FormItem>
                 )}
             />
-            <ButtonWithLoading className="mt-2" isPending={mutation.isPending}>
+            <ButtonWithLoading className="mt-2 h-11" isPending={mutation.isPending}>
                 Login
             </ButtonWithLoading>
         </Form>

src/components/wrappers/auth/login/reset-password-form/reset-password-form.tsx

@@ -82,7 +82,7 @@ export const ResetPasswordForm = (props: ResetPasswordFormProps) => {
             />
 
             <div className="flex flex-col items-center gap-y-6 w-full">
-                <ButtonWithLoading className="mt-2 w-full" isPending={mutation.isPending}>
+                <ButtonWithLoading className="mt-2 w-full h-11" isPending={mutation.isPending}>
                     Reset
                 </ButtonWithLoading>
                 <Link href="/login" className="group flex items-center text-sm hover:underline">

src/components/wrappers/auth/register/register-form/register-form.tsx

@@ -55,7 +55,7 @@ export const RegisterForm = (props: registerFormProps) => {
                 <CardHeader>
                     <div className="grid gap-2 text-center mb-2">
                         <h1 className="text-3xl font-bold">Create an account</h1>
-                        <p className="text-balance text-muted-foreground">Enter your informations bellow to register</p>
+                        <p className="text-balance text-muted-foreground">Enter your informations below to register</p>
                     </div>
                 </CardHeader>
                 <CardContent>
@@ -88,7 +88,7 @@ export const RegisterForm = (props: registerFormProps) => {
                                 <FormItem>
                                     <FormLabel>Email</FormLabel>
                                     <FormControl>
-                                        <Input placeholder="exemple@portabase.io" {...field} />
+                                        <Input placeholder="example@portabase.io" {...field} />
                                     </FormControl>
                                     <FormMessage/>
                                 </FormItem>
@@ -138,7 +138,7 @@ export const RegisterForm = (props: registerFormProps) => {
                                 </FormItem>
                             )}
                         />
-                        <Button type="submit" disabled={mutation.isPending}>
+                        <Button type="submit" className="h-11" disabled={mutation.isPending}>
                             Sign up
                         </Button>
                         <div className="mt-4 text-center text-sm">

src/components/wrappers/auth/reset-password/reset-password-form.tsx

@@ -47,7 +47,7 @@ export const ResetPasswordForm = ({token}: ResetPasswordFormProps) => {
             <CardHeader>
                 <div className="grid gap-2 text-center mb-2">
                     <h1 className="text-3xl font-bold">Reset Password</h1>
-                    <p className="text-balance text-muted-foreground">Fill information bellow to change your
+                    <p className="text-balance text-muted-foreground">Fill information below to change your
                         password</p>
                 </div>
             </CardHeader>

src/components/wrappers/common/button/button-with-confirm.tsx

@@ -1,15 +1,15 @@
 "use client"
 import {Button, ButtonVariantsProps} from "@/components/ui/button";
-import {useState} from "react";
+import {ReactNode, useState} from "react";
 import {Loader2} from "lucide-react";
 import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
 import {cn} from "@/lib/utils";
-import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip";
 
 export type ButtonWithConfirmProps = {
     title: string;
     description: string;
-    button: {
+    button?: {
         main: {
             className?: string;
             type?: "button" | "submit" | "reset" | undefined;
@@ -37,6 +37,11 @@ export type ButtonWithConfirmProps = {
             onClick?: () => void;
         };
     };
+    children?: ReactNode;
+    onConfirm?: (e: React.MouseEvent) => void;
+    onCancel?: (e: React.MouseEvent) => void;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
     isPending?: boolean;
 };
 
@@ -44,41 +49,86 @@ export type ButtonWithConfirmProps = {
 export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
     const [isConfirming, setIsConfirming] = useState(false);
 
-    return (
-        <Popover open={isConfirming} onOpenChange={!props.button.main.disabled ? setIsConfirming : undefined}>
+    const isLegacy = !!props.button;
+    const isDisabled = isLegacy ? !!props.button?.main.disabled : false;
+
+    const handleConfirm = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isLegacy) {
+            props.button?.confirm.onClick?.();
+        } else {
+            props.onConfirm?.(e);
+        }
+        setIsConfirming(false);
+    };
+
+    const handleCancel = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isLegacy) {
+            props.button?.cancel.onClick?.();
+        } else {
+            props.onCancel?.(e);
+        }
+        setIsConfirming(false);
+    };
+
+    const triggerContent = isLegacy ? (
+        <Button
+            type={props.button?.main.type}
+            disabled={isDisabled}
+            variant={props.button?.main.variant ?? "default"}
+            size={props.button?.main.size ?? "default"}
+            className={props.button?.main.className}
+            onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!isDisabled) setIsConfirming(true);
+            }}
+        >
+            {props.isPending && <Loader2 className="animate-spin mr-4" size={16}/>}
+            {props.button?.main.icon}
+            {props.button?.main.text && <span>{props.button.main.text}</span>}
+        </Button>
+    ) : (
+        <div onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsConfirming(true);
+        }}>
+            {props.children}
+        </div>
+    );
+
+    const withTooltip = isLegacy && props.button?.main.tooltipText && isDisabled ? (
+        <TooltipProvider>
             <Tooltip>
                 <TooltipTrigger asChild>
-                    <PopoverTrigger asChild>
-                        <span
-                            className={cn(
-                                "inline-flex",
-                                props.button.main.disabled ? "cursor-not-allowed" : ""
-                            )}
-                            role="button">
-                          <Button
-                              type={props.button.main.type}
-                              disabled={!!props.button.main.disabled}
-                              variant={props.button.main.variant ?? "default"}
-                              size={props.button.main.size ?? "default"}
-                              className={props.button.main.className}
-                              onClick={() => {
-                                  if (!props.button.main.disabled) setIsConfirming(true);
-                              }}
-                          >
-                              {props.isPending && <Loader2 className="animate-spin mr-4" size={16}/>}
-                              {props.button.main.icon}
-                              {props.button.main.text && <span>{props.button.main.text}</span>}
-                          </Button>
-                        </span>
-                    </PopoverTrigger>
+                    <div>{triggerContent}</div>
                 </TooltipTrigger>
-                {props.button.main.tooltipText && props.button.main.disabled && (
-                    <TooltipContent>
-                        <p>{props.button.main.tooltipText}</p>
-                    </TooltipContent>
-                )}
+                <TooltipContent>
+                    <p>{props.button?.main.tooltipText}</p>
+                </TooltipContent>
             </Tooltip>
-            <PopoverContent className="w-80">
+        </TooltipProvider>
+    ) : triggerContent;
+
+    return (
+        <Popover open={isConfirming} onOpenChange={setIsConfirming}>
+            <PopoverTrigger asChild>
+                {withTooltip}
+            </PopoverTrigger>
+            <PopoverContent 
+                className="w-80" 
+                onPointerDownOutside={(e) => e.preventDefault()}
+                onInteractOutside={(e) => e.preventDefault()}
+                onClick={(e) => e.stopPropagation()}
+                onMouseMove={(e) => e.stopPropagation()}
+                onMouseEnter={(e) => e.stopPropagation()}
+                onMouseLeave={(e) => e.stopPropagation()}
+                onOpenAutoFocus={(e) => e.preventDefault()}
+            >
                 <div className="grid gap-4">
                     <div className="space-y-2">
                         <h4 className="font-medium leading-none">{props.title}</h4>
@@ -86,34 +136,26 @@ export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
                     </div>
                     <div className="grid gap-2">
                         <Button
-                            onClick={() => {
-                                if (isConfirming && props.button.confirm.onClick) {
-                                    props.button.confirm.onClick();
-                                    setIsConfirming(false);
-                                } else {
-                                    setIsConfirming(true);
-                                }
-                            }}
-                            variant={props.button.confirm.variant ? props.button.confirm.variant : "default"}
-                            size={props.button.main.size ?? "default"}
-                            className={cn(props.button.main.className, "w-full")}
+                            onClick={handleConfirm}
+                            variant={isLegacy ? (props.button?.confirm.variant ?? "default") : "default"}
+                            size={isLegacy ? (props.button?.main.size ?? "default") : "default"}
+                            className={cn(isLegacy ? props.button?.main.className : "", "w-full")}
                         >
                             {props.isPending && <Loader2 className="animate-spin mr-4" size={16}/>}
-                            {props.button.confirm.icon ? props.button.confirm.icon : null}
-                            <span>{props.button.confirm.text}</span>
+                            {isLegacy && props.button?.confirm.icon}
+                            <span>{isLegacy ? props.button?.confirm.text : (props.confirmButtonText ?? "Confirm")}</span>
                         </Button>
                         <Button
-                            variant={props.button.cancel.variant ? props.button.cancel.variant : "default"}
-                            onClick={props.button.cancel.onClick ? () => props.button.cancel.onClick!() : () => setIsConfirming(false)}
-                            className={cn(props.button.main.className, "w-full")}
-                            size={props.button.main.size ?? "default"}
+                            variant={isLegacy ? (props.button?.cancel.variant ?? "outline") : "outline"}
+                            onClick={handleCancel}
+                            className={cn(isLegacy ? props.button?.main.className : "", "w-full")}
+                            size={isLegacy ? (props.button?.main.size ?? "default") : "default"}
                         >
-                            Cancel
+                            {isLegacy ? (props.button?.cancel.text ?? "Cancel") : (props.cancelButtonText ?? "Cancel")}
                         </Button>
                     </div>
                 </div>
             </PopoverContent>
         </Popover>
     );
-};
-
+};

src/components/wrappers/common/button/button-with-loading.tsx

@@ -83,7 +83,7 @@ export type ButtonWithLoadingProps = {
     icon?: ReactNode;
     variant?: keyof VariantButton;
     className?: string;
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     isPending?: boolean;
     size?: keyof SizeButton;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
@@ -100,7 +100,7 @@ export const ButtonWithLoading = ({
                                   }: ButtonWithLoadingProps) => {
     return (
         <Button
-            onClick={() => onClick?.()}
+            onClick={(e) => onClick?.(e)}
             variant={variant}
             className={className}
             size={size}

src/components/wrappers/common/button/copy-button.tsx

@@ -26,7 +26,6 @@ export const CopyButton = (props: CopyButtonProps) => {
 
     return (
         <Button
-            // className={cn(buttonVariants({size: "sm"}))}
             onClick={() => {
                 copyToClipboardWithMeta(value);
                 setHasCopied(true);

src/components/wrappers/common/code-snippet.tsx

@@ -1,21 +1,46 @@
-import { PropsWithChildren } from "react";
-import { Button } from "@/components/ui/button";
+"use client";
+
+import {PropsWithChildren, useState} from "react";
+import {Button} from "@/components/ui/button";
+import {Check, Copy, Terminal} from "lucide-react";
+import {copyToClipboardWithMeta} from "@/components/wrappers/common/button/copy-button";
+import {cn} from "@/lib/utils";
 
 export type CodeSnippetProps = PropsWithChildren<{
     code: string;
+    title?: string;
+    className?: string;
 }>;
 
 export const CodeSnippet = (props: CodeSnippetProps) => {
+    const [isCopied, setIsCopied] = useState(false);
+
+    const handleCopy = async () => {
+        await copyToClipboardWithMeta(props.code);
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2000);
+    };
+
     return (
-        <div className="rounded-lg border bg-background">
-            <div className="flex items-center justify-between border-b bg-muted px-4 py-2">
-                <div className="text-sm font-medium">.env</div>
-                <Button variant="ghost" size="icon" className="hover:bg-muted/50 text-muted-foreground"></Button>
-            </div>
-            <div className="p-4 font-mono text-sm leading-6 text-foreground truncate">
-                <pre className="language-javascript overflow-x-auto">
-                    <code className="mb-6">{props.code}</code>
+        <div className={cn("relative group rounded-md bg-muted/50 border overflow-hidden", props.className)}>
+            {props.title && (
+                <div className="flex items-center px-4 py-2 text-xs font-medium text-muted-foreground border-b bg-muted/30">
+                    {props.title}
+                </div>
+            )}
+            <div className="flex items-center p-4">
+                 <pre className="flex-1 overflow-x-auto font-mono text-sm leading-relaxed">
+                    <code className="break-all whitespace-pre-wrap">{props.code}</code>
                 </pre>
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    className="ml-2 h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity"
+                    onClick={handleCopy}
+                >
+                    {isCopied ? <Check size={14} className="text-green-500" /> : <Copy size={14} />}
+                    <span className="sr-only">Copy code</span>
+                </Button>
             </div>
         </div>
     );

src/components/wrappers/common/dialog.tsx

@@ -23,7 +23,7 @@ export const AgentRegistrationDialog = (props: agentRegistrationDialogProps) =>
                 <div className="grid gap-4 py-4">
                     <div className="grid grid-cols-4 items-center gap-4">
                         <Label htmlFor="name" className="text-right">
-                            EDGE KEY
+                            CONNECTION KEY
                         </Label>
                         <Input id="name" value="Pedro Duarte" readOnly className="col-span-3" />
                     </div>

src/components/wrappers/common/empty-state-placeholder.tsx

@@ -1,20 +1,22 @@
 import Link from "next/link";
 import {cn} from "@/lib/utils";
 import {Plus} from "lucide-react";
+import {forwardRef, HTMLAttributes} from "react";
 
 type EmptyStatePlaceholderProps = {
     url?: string;
     onClick?: () => void;
     text: string;
     className?: string;
-};
+} & HTMLAttributes<HTMLDivElement>;
 
-export const EmptyStatePlaceholder = ({
+export const EmptyStatePlaceholder = forwardRef<HTMLDivElement, EmptyStatePlaceholderProps>(({
                                           url,
                                           onClick,
                                           text,
                                           className,
-                                      }: EmptyStatePlaceholderProps) => {
+                                          ...props
+                                      }, ref) => {
     const Container = (
         <div
             className={cn(
@@ -37,5 +39,7 @@ export const EmptyStatePlaceholder = ({
         );
     }
 
-    return <div className={cn(className)}>{Container}</div>;
-};
+    return <div className={cn(className)} ref={ref} {...props}>{Container}</div>;
+});
+
+EmptyStatePlaceholder.displayName = "EmptyStatePlaceholder";

src/components/wrappers/common/github/github-button.tsx

@@ -34,7 +34,7 @@ export const GitHubStarsButtonCustom = () => {
             <GithubButton
                 initialStars={0}
                 targetStars={stars}
-                label="Github Stars"
+                label=""
                 size="sm"
                 separator={true}
                 roundStars={true}

src/components/wrappers/common/multiselect/multi-select.tsx

@@ -15,7 +15,7 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
  * Variants for the multi-select component to handle different styles.
  * Uses class-variance-authority (cva) to define different styles based on "variant" prop.
  */
-const multiSelectVariants = cva("m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300", {
+const multiSelectVariants = cva("m-1 transition ease-in-out duration-300", {
     variants: {
         variant: {
             default: "border-foreground/10 text-foreground bg-card hover:bg-card/80",
@@ -177,13 +177,13 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                                         return (
                                             <Badge
                                                 key={value}
-                                                className={cn(isAnimating ? "animate-bounce" : "", multiSelectVariants({ variant }))}
+                                                className={cn(isAnimating ? "animate-bounce" : "", "max-w-full", multiSelectVariants({ variant }))}
                                                 style={{ animationDuration: `${animation}s` }}
                                             >
                                                 {IconComponent && <IconComponent className="h-4 w-4 mr-2" />}
-                                                {option?.label}
+                                                <span className="truncate">{option?.label}</span>
                                                 <XCircle
-                                                    className="ml-2 h-4 w-4 cursor-pointer"
+                                                    className="ml-2 h-4 w-4 cursor-pointer shrink-0"
                                                     onClick={(event) => {
                                                         event.stopPropagation();
                                                         toggleOption(value);
@@ -196,6 +196,7 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                                         <Badge
                                             className={cn(
                                                 "bg-transparent text-foreground border-foreground/1 hover:bg-transparent",
+                                                "max-w-full",
                                                 isAnimating ? "animate-bounce" : "",
                                                 multiSelectVariants({ variant })
                                             )}
@@ -203,7 +204,7 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                                         >
                                             {`+ ${selectedValues.length - maxCount} more`}
                                             <XCircle
-                                                className="ml-2 h-4 w-4 cursor-pointer"
+                                                className="ml-2 h-4 w-4 cursor-pointer shrink-0"
                                                 onClick={(event) => {
                                                     event.stopPropagation();
                                                     clearExtraOptions();

src/components/wrappers/common/pagination/pagination-navigation.tsx

@@ -15,6 +15,8 @@ export type paginationNavigationProps = {
 export const PaginationNavigation = (props: paginationNavigationProps) => {
     const { className, totalPages, currentPage, goToPage, goToPrevPage, goToNextPage, maxVisiblePages = 3 } = props;
 
+    if (totalPages <= 1) return null;
+
     return (
         <Pagination className={cn("", className)}>
             <PaginationContent>

src/components/wrappers/common/table/data-table.tsx

@@ -14,7 +14,7 @@ import {
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
 import {Input} from "@/components/ui/input";
 
-import {ReactNode, useEffect, useState} from "react";
+import {ReactNode, useMemo, useState} from "react";
 import {TablePagination} from "./table-pagination";
 import {Checkbox} from "@/components/ui/checkbox";
 import {Button} from "@/components/ui/button";
@@ -63,35 +63,38 @@ export function DataTable<TData, TValue>({
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
     const [rowSelection, setRowSelection] = useState({});
 
-    useEffect(() => {
-        setRowSelection({});
-    }, [data]);
-
-    if (enableSelect && data.length > 0) {
+    const finalColumns = useMemo(() => {
         const selectColumnExists = columns.some((column) => column.id === "select");
-
-        if (!selectColumnExists) {
-            columns.unshift({
-                id: "select",
-                header: ({table}) => (
-                    <Checkbox
-                        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")}
-                        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-                        aria-label="Select all"
-                    />
-                ),
-                cell: ({row}) => <Checkbox checked={row.getIsSelected()}
-                                           onCheckedChange={(value) => row.toggleSelected(!!value)}
-                                           aria-label="Select row"/>,
-                enableSorting: false,
-                enableHiding: false,
-            });
+        if (enableSelect && data.length > 0 && !selectColumnExists) {
+            return [
+                {
+                    id: "select",
+                    header: ({table}: {table: any}) => (
+                        <Checkbox
+                            checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")}
+                            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+                            aria-label="Select all"
+                        />
+                    ),
+                    cell: ({row}: {row: any}) => (
+                        <Checkbox
+                            checked={row.getIsSelected()}
+                            onCheckedChange={(value) => row.toggleSelected(!!value)}
+                            aria-label="Select row"
+                        />
+                    ),
+                    enableSorting: false,
+                    enableHiding: false,
+                },
+                ...columns,
+            ];
         }
-    }
+        return columns;
+    }, [columns, enableSelect, data.length]);
 
     const table = useReactTable({
         data,
-        columns,
+        columns: finalColumns,
         getCoreRowModel: getCoreRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         onSortingChange: setSorting,
@@ -99,6 +102,10 @@ export function DataTable<TData, TValue>({
         onColumnFiltersChange: setColumnFilters,
         getFilteredRowModel: getFilteredRowModel(),
         onRowSelectionChange: setRowSelection,
+        getRowId: (row: any) => row.id || row.uuid,
+        autoResetPageIndex: false,
+        autoResetExpanded: false,
+        enableRowSelection: true,
         state: {
             sorting,
             columnFilters,

src/components/wrappers/common/table/table-pagination.tsx

@@ -14,6 +14,10 @@ interface tablePaginationProps {
 export function TablePagination(props: tablePaginationProps) {
     const {className, table, maxVisiblePages = 3, pageSizeOptions = [10, 20, 30, 40, 50]} = props;
 
+    const totalPages = table.getPageCount();
+
+    if (totalPages <= 1) return null;
+
     return (
         <div
             className={cn("flex gap-x-4", className)}

src/components/wrappers/dashboard/admin/channels/channel/channel-add-edit-modal.tsx

@@ -18,6 +18,7 @@ import {
     ChannelOrganisationForm
 } from "@/components/wrappers/dashboard/admin/channels/organization/channels-organization-form";
 
+
 type ChannelAddModalProps = {
     channel?: NotificationChannelWith | StorageChannelWith
     organization?: OrganizationWithMembers;

src/components/wrappers/dashboard/admin/channels/channel/channel-form/channel-form.schema.ts

@@ -19,7 +19,7 @@ export const NotificationChannelFormSchema = ChannelFormSchema.extend({
 });
 
 export const StorageChannelFormSchema = ChannelFormSchema.extend({
-    provider: z.enum(["local", "s3"], {required_error: "Provider is required"}),
+    provider: z.enum(["local", "s3", "google-drive"], {required_error: "Provider is required"}),
 });
 
 

src/components/wrappers/dashboard/admin/channels/channel/channel-form/channel-form.tsx

@@ -34,6 +34,7 @@ import {
     addNotificationChannelAction, updateNotificationChannelAction
 } from "@/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/notifications/action";
 
+
 type NotifierFormProps = {
     onSuccessAction?: () => void;
     organization?: OrganizationWithMembers;
@@ -54,7 +55,7 @@ export const ChannelForm = ({onSuccessAction, organization, defaultValues, kind}
     });
 
     useEffect(() => {
-        form.reset(defaultValues ? {...defaultValues} : {});
+        form.reset(defaultValues ? {...defaultValues} : {enabled: true});
     }, [defaultValues]);
 
     const mutationAddNotificationChannel = useMutation({
@@ -106,10 +107,10 @@ export const ChannelForm = ({onSuccessAction, organization, defaultValues, kind}
                         <Card
                             key={type.value}
                             className={cn(
-                                "relative flex flex-col items-center justify-center gap-3 p-4 transition-all",
+                                "relative flex flex-col items-center justify-center gap-3 p-4 transition-all border",
                                 type.preview
-                                    ? "cursor-not-allowed bg-gray-200 border-gray-300 opacity-70"
-                                    : "cursor-pointer hover:bg-accent/50 hover:border-primary/50"
+                                    ? "cursor-not-allowed bg-muted/60 border-border text-muted-foreground"
+                                    : "cursor-pointer bg-background hover:bg-accent/40 hover:border-primary/50"
                             )}
                             onClick={() => {
                                 if (type.preview) return;
@@ -117,30 +118,42 @@ export const ChannelForm = ({onSuccessAction, organization, defaultValues, kind}
                                 form.setValue("config", {});
                             }}
                         >
+
                             {type.preview && (
                                 <div
                                     className="absolute bottom-0 right-0 overflow-hidden w-20 h-20 pointer-events-none">
                                     <div
-                                        className="absolute bottom-0 right-0 w-38 h-6 flex items-center justify-center
+                                        className="absolute bottom-0 right-0 w-38 h-5 flex items-center justify-center
                                             transform -rotate-45 translate-x-14 -translate-y-4"
                                         style={{backgroundColor: "#FE6702"}}
                                     >
-                                        <span className="text-white text-[8px] pr-3 font-medium text-center w-full">coming soon</span>
+                                        <span className="text-white text-[7px] pr-3 font-medium text-center w-full">COMING SOON</span>
                                     </div>
                                 </div>
                             )}
-                            <div className={cn(
-                                "h-10 w-10 rounded-full flex items-center justify-center",
-                                type.preview ? "bg-gray-400" : "bg-secondary"
-                            )}>
-                                <Icon className={cn("h-6 w-6 text-foreground", type.preview && "text-gray-700")}/>
+                            <div
+                                className={cn(
+                                    "h-10 w-10 rounded-full flex items-center justify-center transition-colors",
+                                    type.preview
+                                        ? "bg-muted"
+                                        : "bg-accent text-accent-foreground"
+                                )}
+                            >
+                                <Icon
+                                    className={cn(
+                                        "h-6 w-6",
+                                        type.preview ? "text-muted-foreground" : "text-foreground"
+                                    )}
+                                />
                             </div>
-                            <span className={cn(
-                                "font-medium text-sm align-middle text-center",
-                                type.preview ? "text-gray-500" : "text-foreground"
-                            )}>
-                            {type.label}
-                          </span>
+                            <span
+                                className={cn(
+                                    "font-medium text-sm text-center leading-tight",
+                                    type.preview ? "text-muted-foreground" : "text-foreground"
+                                )}
+                            >
+                                {type.label}
+                            </span>
                         </Card>
 
                     );
@@ -211,11 +224,11 @@ export const ChannelForm = ({onSuccessAction, organization, defaultValues, kind}
 
             <div className="flex justify-between mt-4">
                 <div>
-                    {defaultValues && (
+                    {kind == "storage" && (
                         <ChannelTestButton
                             kind={kind}
                             organizationId={organization?.id}
-                            channel={defaultValues}
+                            channel={form.getValues()}
                         />
                     )}
                 </div>
@@ -238,4 +251,5 @@ export const ChannelForm = ({onSuccessAction, organization, defaultValues, kind}
             </div>
         </Form>
     );
-};
+};
+

src/components/wrappers/dashboard/admin/channels/channel/channel-form/channel-test-button.tsx

@@ -1,18 +1,21 @@
 "use client"
-import {Button} from "@/components/ui/button";
-import {NotificationChannel} from "@/db/schema/09_notification-channel";
+
 import {useMutation} from "@tanstack/react-query";
-import {dispatchNotification} from "@/features/notifications/dispatch";
-import {EventPayload} from "@/features/notifications/types";
 import {Send, ShieldCheck} from "lucide-react";
 import {toast} from "sonner";
+
+import {Button} from "@/components/ui/button";
+import {NotificationChannel} from "@/db/schema/09_notification-channel";
+import {dispatchNotification} from "@/features/notifications/dispatch";
+import {EventPayload} from "@/features/notifications/types";
 import {useIsMobile} from "@/hooks/use-mobile";
 import {cn} from "@/lib/utils";
 import {StorageChannel} from "@/db/schema/12_storage-channel";
-import {ChannelKind, getChannelTextBasedOnKind} from "@/components/wrappers/dashboard/admin/channels/helpers/common";
+import {ChannelKind} from "@/components/wrappers/dashboard/admin/channels/helpers/common";
 import type {StorageInput} from "@/features/storages/types";
 import {dispatchStorage} from "@/features/storages/dispatch";
 
+
 type NotifierTestChannelButtonProps = {
     channel: NotificationChannel | StorageChannel;
     organizationId?: string;
@@ -20,8 +23,9 @@ type NotifierTestChannelButtonProps = {
 }
 
 export const ChannelTestButton = ({channel, organizationId, kind}: NotifierTestChannelButtonProps) => {
-    const channelText = getChannelTextBasedOnKind(kind)
+
     const isMobile = useIsMobile()
+
     const mutation = useMutation({
         mutationFn: async () => {
             if (kind === "notification") {
@@ -30,7 +34,7 @@ export const ChannelTestButton = ({channel, organizationId, kind}: NotifierTestC
                     message: `We are testing channel ${channel.name}`,
                     level: 'info',
                 };
-                const result = await dispatchNotification(payload, undefined, channel.id, organizationId);
+                const result = await dispatchNotification(payload, undefined, channel, organizationId);
 
                 if (result.success) {
                     toast.success(result.message);
@@ -41,11 +45,12 @@ export const ChannelTestButton = ({channel, organizationId, kind}: NotifierTestC
                 const input: StorageInput = {
                     action: "ping",
                 };
-                const result = await dispatchStorage(input, undefined, channel.id);
+                const result = await dispatchStorage(input, undefined, undefined, channel);
 
                 if (result.success) {
                     toast.success("Successfully connected to storage channel");
                 } else {
+                    console.error(result);
                     toast.error("An error occurred while testing the storage channel, check your configuration");
                 }
             } else {

src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/notifications/forms/ntfy.form.tsx

@@ -3,7 +3,6 @@ import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/compon
 import {Input} from "@/components/ui/input";
 import {Separator} from "@/components/ui/separator";
 
-
 type NotifierNtfyFormProps = {
     form: UseFormReturn<any, any, any>
 }
@@ -12,6 +11,7 @@ export const NotifierNtfyForm = ({form}: NotifierNtfyFormProps) => {
     return (
         <>
             <Separator className="my-1"/>
+
             <FormField
                 control={form.control}
                 name="config.ntfyTopic"
@@ -25,6 +25,7 @@ export const NotifierNtfyForm = ({form}: NotifierNtfyFormProps) => {
                     </FormItem>
                 )}
             />
+
             <FormField
                 control={form.control}
                 name="config.ntfyServerUrl"
@@ -39,6 +40,7 @@ export const NotifierNtfyForm = ({form}: NotifierNtfyFormProps) => {
                     </FormItem>
                 )}
             />
+
             <FormField
                 control={form.control}
                 name="config.ntfyToken"
@@ -53,6 +55,36 @@ export const NotifierNtfyForm = ({form}: NotifierNtfyFormProps) => {
                     </FormItem>
                 )}
             />
+
+            <Separator className="my-1"/>
+
+            <FormField
+                control={form.control}
+                name="config.ntfyUsername"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Basic Auth Username (Optional)</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="username"/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+
+            <FormField
+                control={form.control}
+                name="config.ntfyPassword"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Basic Auth Password (Optional)</FormLabel>
+                        <FormControl>
+                            <Input {...field} type="password" placeholder="password"/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
         </>
     )
 }

src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/notifications/forms/smtp.form.tsx

@@ -47,7 +47,7 @@ export const NotifierSmtpForm = ({form}: NotifierSmtpFormProps) => {
                     <FormItem>
                         <FormLabel>Username</FormLabel>
                         <FormControl>
-                            <Input placeholder="contact@exemple.com" {...field} value={field.value ?? ""}/>
+                            <Input placeholder="contact@example.com" {...field} value={field.value ?? ""}/>
                         </FormControl>
                         <FormMessage/>
                     </FormItem>
@@ -77,7 +77,7 @@ export const NotifierSmtpForm = ({form}: NotifierSmtpFormProps) => {
                     <FormItem>
                         <FormLabel>From Email</FormLabel>
                         <FormControl>
-                            <Input placeholder={`"Portabase" <exemple@portabase.io>`} {...field}
+                            <Input placeholder={`"Portabase" <example@portabase.io>`} {...field}
                                    value={field.value ?? ""}/>
                         </FormControl>
                         <FormMessage/>

src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/storages/forms/google-drive.form.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import {UseFormReturn} from "react-hook-form";
+import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
+import {Input} from "@/components/ui/input";
+import {Separator} from "@/components/ui/separator";
+import {Button} from "@/components/ui/button";
+import {PasswordInput} from "@/components/ui/password-input";
+import {
+    googleDriveRefreshTokenAction
+} from "@/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/storages/forms/google-drive/helpers";
+import {toast} from "sonner";
+
+type StorageGoogleDriveFormProps = {
+    form: UseFormReturn<any>;
+};
+
+export const StorageGoogleDriveForm = ({form}: StorageGoogleDriveFormProps) => {
+    const refreshToken = form.watch("config.refreshToken");
+    const isConnected = Boolean(refreshToken);
+
+    const handleConnect = () => {
+        const clientId = form.getValues("config.clientId");
+        const clientSecret = form.getValues("config.clientSecret");
+        const redirectUri = `${window.location.origin}/api/google/drive/callback`;
+
+        if (!clientId || !clientSecret) {
+            form.setError("config.clientId", {message: "Client ID and Secret are required"});
+            return;
+        }
+
+        const scope = encodeURIComponent("https://www.googleapis.com/auth/drive.file");
+        const oauthUrl =
+            `https://accounts.google.com/o/oauth2/v2/auth` +
+            `?client_id=${clientId}` +
+            `&redirect_uri=${encodeURIComponent(redirectUri)}` +
+            `&response_type=code` +
+            `&scope=${scope}` +
+            `&access_type=offline` +
+            `&prompt=consent`;
+
+        const oauthWindow = window.open(oauthUrl, "_blank", "width=500,height=600");
+
+        const interval = setInterval(async () => {
+            try {
+                if (!oauthWindow || oauthWindow.closed) {
+                    clearInterval(interval);
+                    return;
+                }
+
+                if (oauthWindow.location.href.startsWith(redirectUri)) {
+                    const code = new URL(oauthWindow.location.href).searchParams.get("code");
+                    if (!code) return;
+
+                    const result = await googleDriveRefreshTokenAction({
+                        code,
+                        clientId,
+                        clientSecret,
+                        redirectUri,
+                    });
+                    const inner = result?.data;
+
+                    if (inner?.success) {
+                        toast.success(inner.actionSuccess?.message);
+
+                        if (!inner.value) {
+                            form.setError("config", {message: "OAuth succeeded but no refresh token returned"});
+                            return;
+                        }
+
+                        form.setValue("config.refreshToken", inner.value, {
+                            shouldValidate: true,
+                            shouldDirty: true,
+                        });
+
+                    } else {
+                        toast.error(inner?.actionError?.message);
+                    }
+
+
+                    oauthWindow.close();
+                    clearInterval(interval);
+                }
+            } catch {
+                // Ignore cross-origin errors until redirect
+            }
+        }, 500);
+    };
+
+    return (
+        <>
+            <Separator className="my-1"/>
+
+            <FormField
+                control={form.control}
+                name="config.clientId"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Client ID</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="xxxx.apps.googleusercontent.com"/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+
+            <FormField
+                control={form.control}
+                name="config.clientSecret"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Client Secret</FormLabel>
+                        <FormControl>
+                            <PasswordInput {...field} />
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+
+            <FormField
+                control={form.control}
+                name="config.folderId"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Folder ID</FormLabel>
+                        <FormControl>
+                            <Input {...field} />
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+
+            <input type="hidden" {...form.register("config.refreshToken")} />
+
+            <div className="flex items-center gap-3">
+                <Button type="button" variant={"secondary"} className="hover:cursor-pointer" onClick={handleConnect}>
+                    {isConnected ? "Reconnect Google Drive" : "Connect Google Drive"}
+                </Button>
+
+                {isConnected && (
+                    <span className="text-sm text-green-600 font-medium">
+            Google Drive connected
+          </span>
+                )}
+            </div>
+        </>
+    );
+};

src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/storages/forms/google-drive/helpers.ts

@@ -0,0 +1,52 @@
+"use server"
+import {userAction} from "@/lib/safe-actions/actions";
+import {z} from "zod";
+import {ServerActionResult} from "@/types/action-type";
+
+
+export const googleDriveRefreshTokenAction = userAction.schema(
+    z.object({
+        code: z.string(),
+        clientId: z.string(),
+        clientSecret: z.string(),
+        redirectUri: z.string(),
+    })).action(async ({parsedInput}): Promise<ServerActionResult<string>> => {
+        const {code, clientId, clientSecret, redirectUri} = parsedInput;
+
+        try {
+
+            const tokenRes = await fetch("https://oauth2.googleapis.com/token", {
+                method: "POST",
+                headers: { "Content-Type": "application/x-www-form-urlencoded" },
+                body: new URLSearchParams({
+                    client_id: clientId,
+                    client_secret: clientSecret,
+                    code: code,
+                    grant_type: "authorization_code",
+                    redirect_uri: redirectUri,
+                }),
+            });
+
+            const tokens = await tokenRes.json();
+
+            return {
+                success: true,
+                value: tokens.refresh_token,
+                actionSuccess: {
+                    message: "Refresh token successfully fetched",
+                    messageParams: {code: code},
+                },
+            };
+        }catch {
+            return {
+                success: false,
+                actionError: {
+                    message: "An error occurred",
+                    status: 404,
+                    messageParams: {code: code},
+                },
+            };
+        }
+
+
+});

src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/storages/forms/s3.form.tsx

@@ -19,9 +19,22 @@ export const StorageS3Form = ({form}: StorageS3FormProps) => {
                 name="config.endPointUrl"
                 render={({field}) => (
                     <FormItem>
-                        <FormLabel>Endpoind URL</FormLabel>
+                        <FormLabel>Endpoint URL</FormLabel>
                         <FormControl>
-                            <Input {...field} placeholder="s3.exemple.com"/>
+                            <Input {...field} placeholder="s3.amazonaws.com"/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+            <FormField
+                control={form.control}
+                name="config.region"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Region</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="us-east-1"/>
                         </FormControl>
                         <FormMessage/>
                     </FormItem>
@@ -82,7 +95,7 @@ export const StorageS3Form = ({form}: StorageS3FormProps) => {
 
             <FormField
                 control={form.control}
-                name="config.useSSL"
+                name="config.ssl"
                 render={({ field }) => (
                     <FormItem>
                         <FormLabel>Use SSL</FormLabel>

src/components/wrappers/dashboard/admin/channels/helpers/common.tsx

@@ -29,6 +29,9 @@ import {LucideProps} from "lucide-react";
 import {
     StorageS3Form
 } from "@/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/storages/forms/s3.form";
+import {
+    StorageGoogleDriveForm
+} from "@/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/storages/forms/google-drive.form";
 
 export type ChannelKind = "notification" | "storage";
 
@@ -86,6 +89,8 @@ export const renderChannelForm = (provider: string | undefined, form: UseFormRet
             return <NotifierWebhookForm form={form}/>;
         case "s3":
             return <StorageS3Form form={form}/>
+        case "google-drive":
+            return <StorageGoogleDriveForm form={form}/>
         case "local":
             return <></>
         default:

src/components/wrappers/dashboard/admin/channels/helpers/storage.tsx

@@ -4,7 +4,10 @@ import {ProviderIconTypes} from "@/components/wrappers/dashboard/admin/channels/
 
 export const storageProviders: ProviderIconTypes[] = [
     {value: "local", label: "Local", icon: Server},
-    {value: "s3", label: "s3", icon: S3Icon},
+    {value: "s3", label: "S3", icon: S3Icon},
+    {value: "google-drive", label: "Google Drive", icon: GoogleDriveIcon},
+    {value: "blob", label: "Azure Blob Storage", icon: BlobIcon, preview: true},
+    {value: "gcs", label: "Google Cloud Storage", icon: GCSIcon, preview: true},
 ]
 
 export function S3Icon(props: SVGProps<SVGSVGElement>) {
@@ -16,3 +19,58 @@ export function S3Icon(props: SVGProps<SVGSVGElement>) {
     );
 }
 
+export function GoogleDriveIcon(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width={256} height={199}  {...props}  viewBox="0 0 256 229"><path fill="#0066da" d="m19.354 196.034l11.29 19.5c2.346 4.106 5.718 7.332 9.677 9.678q17.009-21.591 23.68-33.137q6.77-11.717 16.641-36.655q-26.604-3.502-40.32-3.502q-13.165 0-40.322 3.502c0 4.545 1.173 9.09 3.519 13.196z"/><path fill="#ea4335" d="M215.681 225.212c3.96-2.346 7.332-5.572 9.677-9.677l4.692-8.064l22.434-38.855a26.57 26.57 0 0 0 3.518-13.196q-27.315-3.502-40.247-3.502q-13.899 0-40.248 3.502q9.754 25.075 16.422 36.655q6.724 11.683 23.752 33.137"/><path fill="#00832d" d="M128.001 73.311q19.68-23.768 27.125-36.655q5.996-10.377 13.196-33.137C164.363 1.173 159.818 0 155.126 0h-54.25C96.184 0 91.64 1.32 87.68 3.519q9.16 26.103 15.544 37.154q7.056 12.213 24.777 32.638"/><path fill="#2684fc" d="M175.36 155.42H80.642l-40.32 69.792c3.958 2.346 8.503 3.519 13.195 3.519h148.968c4.692 0 9.238-1.32 13.196-3.52z"/><path fill="#00ac47" d="M128.001 73.311L87.681 3.52c-3.96 2.346-7.332 5.571-9.678 9.677L3.519 142.224A26.57 26.57 0 0 0 0 155.42h80.642z"/><path fill="#ffba00" d="m215.242 77.71l-37.243-64.514c-2.345-4.106-5.718-7.331-9.677-9.677l-40.32 69.792l47.358 82.109h80.496c0-4.546-1.173-9.09-3.519-13.196z"/></svg>
+    )
+}
+
+
+export function BlobIcon(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width={256} height={199} {...props} viewBox="0 0 48 48">
+            <path fill="#2979ff"
+                  d="M32.66,7H15.34c-0.715,0-1.375,0.381-1.732,1l-8.66,15c-0.357,0.619-0.357,1.381,0,2l8.66,15c0.357,0.619,1.018,1,1.732,1H32.66c0.715,0,1.375-0.381,1.732-1l8.66-15c0.357-0.619,0.357-1.381,0-2l-8.66-15C34.035,7.381,33.375,7,32.66,7z"></path>
+            <path fill="#fff"
+                  d="M32,35H16c-0.552,0-1-0.448-1-1V14c0-0.552,0.448-1,1-1h13l4,4v17C33,34.552,32.552,35,32,35z"></path>
+            <path fill="#b1cfff" d="M29,13v3c0,0.552,0.448,1,1,1h3L29,13z"></path>
+            <path fill="#03a9f4"
+                  d="M22.265 23.831H20.93V19.58l-1.312.383v-1.011l2.524-.873h.122V23.831zM28.702 21.48c0 .416-.049.776-.146 1.081-.097.303-.234.556-.411.756-.176.2-.387.349-.632.446-.245.097-.515.146-.81.146-.298 0-.57-.049-.816-.146-.246-.097-.457-.246-.633-.446-.176-.2-.315-.453-.413-.756-.099-.305-.147-.665-.147-1.081v-1.051c0-.413.049-.773.146-1.078.097-.305.234-.558.411-.758.176-.2.387-.349.632-.446C26.126 18.049 26.397 18 26.695 18c.295 0 .565.049.811.146.246.097.458.246.635.446.176.2.313.453.412.758.099.305.149.665.149 1.078V21.48zM27.37 20.26c0-.229-.016-.421-.047-.579-.032-.155-.076-.283-.134-.381-.058-.097-.129-.167-.212-.209-.083-.042-.176-.063-.282-.063-.105 0-.2.021-.283.063-.083.042-.153.112-.209.209-.057.097-.1.225-.13.381-.03.158-.045.35-.045.579v1.383c0 .234.014.431.045.589.03.158.075.286.133.381.058.097.129.166.213.208.084.042.179.063.284.063.103 0 .195-.021.278-.063.083-.042.154-.111.212-.208.058-.095.101-.223.132-.381.03-.158.046-.354.046-.589V20.26zM23.308 29.571c0 .416-.049.776-.146 1.081-.097.303-.234.556-.411.756-.176.2-.387.349-.632.446C21.874 31.951 21.604 32 21.309 32c-.298 0-.57-.049-.816-.146-.246-.097-.457-.246-.633-.446-.176-.2-.315-.453-.413-.756-.099-.305-.147-.665-.147-1.081V28.52c0-.413.049-.773.146-1.078.097-.305.234-.558.411-.758.176-.2.387-.349.632-.446.245-.097.516-.146.814-.146.295 0 .565.049.811.146.246.097.458.246.635.446.176.2.313.453.412.758s.149.665.149 1.078V29.571zM21.977 28.35c0-.229-.016-.421-.047-.579-.032-.155-.076-.283-.134-.381-.058-.097-.129-.167-.212-.209-.083-.042-.176-.063-.282-.063s-.2.021-.283.063c-.083.042-.153.112-.209.209-.057.097-.1.225-.13.381-.03.158-.045.35-.045.579v1.383c0 .234.014.431.045.589.03.158.075.286.133.381.058.097.129.166.213.208s.179.063.284.063c.103 0 .195-.021.278-.063.083-.042.154-.111.212-.208.058-.095.101-.223.132-.381.03-.158.046-.354.046-.589V28.35zM27.659 31.921h-1.335V27.67l-1.312.383v-1.011l2.524-.873h.122V31.921z"></path>
+        </svg>
+    );
+}
+
+export function GCSIcon(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            id="standard_product_icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 512 512"
+            {...props}
+        >
+            <g id="bounding_box">
+                <rect width="512" height="512" fill="none"/>
+            </g>
+            <g id="art">
+                <path
+                    fill="#34a853"
+                    d="M442,277.9H70c-8.8,0-16,7.2-16,16v148.1c0,8.8,7.2,16,16,16h107.2c1.5.5,3.1.7,4.8.7s3.3-.3,4.8-.7h255.2c8.8,0,16-7.2,16-16v-148.1c0-8.8-7.2-16-16-16ZM86,309.9h80v116.1h-80v-116.1ZM426,425.9h-228v-116.1h228v116.1Z"
+                />
+                <path
+                    fill="#fbbc04"
+                    d="M442,54H70c-8.8,0-16,7.2-16,16v148.8c0,8.8,7.2,16,16,16h372c8.8,0,16-7.2,16-16V70c0-8.8-7.2-16-16-16ZM86,86h80v116.8h-80v-116.8ZM426,202.8h-228v-116.8h228v116.8Z"
+                />
+                <path
+                    fill="#ea4335"
+                    d="M442,234.8h-16V86H54v-16c0-8.8,7.2-16,16-16h372c8.8,0,16,7.2,16,16v148.8c0,8.8-7.2,16-16,16Z"
+                />
+                <path
+                    fill="#4285f4"
+                    d="M442,457.9h-16v-148.1H54v-16c0-8.8,7.2-16,16-16h372c8.8,0,16,7.2,16,16v148.1c0,8.8-7.2,16-16,16Z"
+                />
+                <circle fill="#ea4335" cx="349" cy="144.4" r="37"/>
+                <circle fill="#4285f4" cx="349" cy="367.9" r="37"/>
+            </g>
+        </svg>
+    );
+}

src/components/wrappers/dashboard/admin/organizations/organization/button-delete-organization.tsx

@@ -6,7 +6,7 @@ import {Trash2} from "lucide-react";
 import {toast} from "sonner";
 import {ButtonWithConfirm} from "@/components/wrappers/common/button/button-with-confirm";
 import {authClient} from "@/lib/auth/auth-client";
-import {deleteOrganizationAction} from "@/components/wrappers/dashboard/organization/organization.action";
+import {deleteOrganizationAction} from "@/features/organization/organization.action";
 
 export type ButtonDeleteFleetProps = {
     text?: string;

src/components/wrappers/dashboard/admin/organizations/organization/details/update-organization-form.tsx

@@ -13,7 +13,7 @@ import {Input} from "@/components/ui/input";
 import {authClient} from "@/lib/auth/auth-client";
 import {toast} from "sonner";
 import {OrganizationWithMembersAndUsers} from "@/db/schema/03_organization";
-import {updateOrganizationAction} from "@/components/wrappers/dashboard/organization/organization.action";
+import {updateOrganizationAction} from "@/features/organization/organization.action";
 
 type UpdateOrganizationFormProps = {
     onSuccessAction?: () => void;

src/components/wrappers/dashboard/admin/settings/email/email-form/email-form.tsx

@@ -26,7 +26,7 @@ import {
 } from "@/components/wrappers/dashboard/admin/settings/email/email-form/email-form.action";
 import {toast} from "sonner";
 import {useRouter} from "next/navigation";
-import {sendEmail} from "@/lib/email/email-helper";
+import {sendEmail} from "@/lib/email";
 import {render} from "@react-email/components";
 import EmailSettingsTest from "@/components/emails/email-settings-test";
 import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
@@ -110,7 +110,7 @@ export const EmailForm = (props: EmailFormProps) => {
                                 <FormItem>
                                     <FormLabel>From Email *</FormLabel>
                                     <FormControl>
-                                        <Input placeholder={"exemple@portabase.com"} {...field} />
+                                        <Input placeholder={"example@portabase.com"} {...field} />
                                     </FormControl>
                                     <FormDescription>{"The email from where the email will be send"}</FormDescription>
                                     <FormMessage/>
@@ -172,7 +172,7 @@ export const EmailForm = (props: EmailFormProps) => {
                                 <FormItem>
                                     <FormLabel>User Email *</FormLabel>
                                     <FormControl>
-                                        <Input placeholder={"exemple@portabase.com"} {...field} />
+                                        <Input placeholder={"example@portabase.com"} {...field} />
                                     </FormControl>
                                     <FormDescription>{"The email server user"}</FormDescription>
                                     <FormMessage/>

src/components/wrappers/dashboard/admin/settings/settings-tabs.tsx

@@ -7,6 +7,7 @@ import {Setting} from "@/db/schema/01_setting";
 import {SettingsEmailSection} from "@/components/wrappers/dashboard/admin/settings/email/settings-email-section";
 import {SettingsStorageSection} from "@/components/wrappers/dashboard/admin/settings/storage/settings-storage-section";
 import {StorageChannelWith} from "@/db/schema/12_storage-channel";
+import {MailboxIcon, Save} from "lucide-react";
 
 export type SettingsTabsProps = {
     settings: Setting
@@ -30,29 +31,44 @@ export const SettingsTabs = ({settings, storageChannels}: SettingsTabsProps) =>
     };
 
 
+    const tabs = [
+        {
+            name: 'System Email',
+            value: 'email',
+            icon: MailboxIcon,
+            content: (
+                <SettingsEmailSection settings={settings}/>
+            )
+        },
+        {
+            name: 'Storage',
+            value: 'storage',
+            icon: Save,
+            content: (
+                <SettingsStorageSection storageChannels={storageChannels} settings={settings}/>
+
+            )
+        }
+    ]
+
+
     return (
         <div className="h-full mt-3">
-            <Tabs className="h-full" value={tab} onValueChange={handleChangeTab}>
-                <TabsList className='bg-background rounded-none border-b p-0 min-w-48'>
-                    <TabsTrigger
-                        value="email"
-                        className='bg-background data-[state=active]:border-primary dark:data-[state=active]:border-primary h-full rounded-none border-0 border-b-2 border-transparent data-[state=active]:shadow-none'
-                    >
-                        Email
-                    </TabsTrigger>
-                    <TabsTrigger
-                        value="storage"
-                        className='bg-background data-[state=active]:border-primary dark:data-[state=active]:border-primary h-full rounded-none border-0 border-b-2 border-transparent data-[state=active]:shadow-none'
-                    >
-                        Default storage
-                    </TabsTrigger>
+            <Tabs className="h-full gap-4" value={tab} onValueChange={handleChangeTab}>
+                <TabsList>
+                    {tabs.map(({icon: Icon, name, value}) => (
+                        <TabsTrigger key={value} value={value} className='flex items-center gap-1 px-2.5 sm:px-3'>
+                            <Icon/>
+                            {name}
+                        </TabsTrigger>
+                    ))}
                 </TabsList>
-                <TabsContent className="h-full" value="email">
-                    <SettingsEmailSection settings={settings}/>
-                </TabsContent>
-                <TabsContent className="h-full" value="storage">
-                    <SettingsStorageSection storageChannels={storageChannels} settings={settings}/>
-                </TabsContent>
+
+                {tabs.map(tab => (
+                    <TabsContent key={tab.value} value={tab.value} className="h-full">
+                        {tab.content}
+                    </TabsContent>
+                ))}
             </Tabs>
         </div>
 

src/components/wrappers/dashboard/admin/settings/storage/settings-storage-section.tsx

@@ -4,7 +4,7 @@ import {Info} from "lucide-react";
 import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
 import {useRouter} from "next/navigation";
 import {Setting} from "@/db/schema/01_setting";
-import {Form, FormField, FormItem, useZodForm} from "@/components/ui/form";
+import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm} from "@/components/ui/form";
 import {StorageChannelWith} from "@/db/schema/12_storage-channel";
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
 import {useMutation} from "@tanstack/react-query";
@@ -17,6 +17,7 @@ import {
     updateStorageSettingsAction
 } from "@/components/wrappers/dashboard/admin/settings/storage/settings-storage.action";
 import {toast} from "sonner";
+import {Switch} from "@/components/ui/switch";
 
 export type SettingsStorageSectionProps = {
     settings: Setting;
@@ -29,7 +30,8 @@ export const SettingsStorageSection = ({settings, storageChannels}: SettingsStor
     const form = useZodForm({
         schema: DefaultStorageSchema,
         defaultValues: {
-            storageChannelId: settings.defaultStorageChannelId ?? undefined
+            storageChannelId: settings.defaultStorageChannelId ?? undefined,
+            encryption: settings.encryption ?? false
         }
     });
 
@@ -59,19 +61,21 @@ export const SettingsStorageSection = ({settings, storageChannels}: SettingsStor
             </Alert>
             <div className="flex flex-col h-full  py-4 ">
                 <Form
+                    className="space-y-4"
                     form={form}
                     onSubmit={async (values) => {
                         await mutation.mutateAsync(values);
                     }}
                 >
-                    <div className="flex items-center gap-3">
+                    <div className="flex flex-wrap items-center gap-3">
                         <FormField
                             control={form.control}
                             name="storageChannelId"
                             render={({field}) => (
-                                <FormItem className="flex items-center  justify-center">
+                                <FormItem className="flex-grow min-w-[200px] sm:flex-grow-0 sm:w-64">
+                                    <FormLabel>Default Storage Provider</FormLabel>
                                     <Select value={field.value} onValueChange={field.onChange}>
-                                        <SelectTrigger className="w-90 h-full  mb-0">
+                                        <SelectTrigger className="w-full h-full mb-0">
                                             <SelectValue placeholder="Select a default storage channel"/>
                                         </SelectTrigger>
                                         <SelectContent>
@@ -83,7 +87,7 @@ export const SettingsStorageSection = ({settings, storageChannels}: SettingsStor
                                                         <span
                                                             className="text-[9px] uppercase bg-secondary px-1.5 py-0.5 rounded">
                                                             {channel.provider}
-                                                        </span>
+                                                          </span>
                                                     </div>
                                                 </SelectItem>
                                             ))}
@@ -92,10 +96,29 @@ export const SettingsStorageSection = ({settings, storageChannels}: SettingsStor
                                 </FormItem>
                             )}
                         />
-                        <ButtonWithLoading type="submit">
-                            Confirm
-                        </ButtonWithLoading>
+
+
+                        <FormField
+                            control={form.control}
+                            name="encryption"
+                            render={({field}) => (
+                                <FormItem>
+                                    <FormLabel>Backups Encryption</FormLabel>
+                                    <FormControl>
+                                        <Switch
+                                            checked={field.value}
+                                            onCheckedChange={field.onChange}
+                                        />
+                                    </FormControl>
+                                    <FormMessage/>
+                                </FormItem>
+                            )}
+                        />
                     </div>
+
+                    <ButtonWithLoading className="flex-shrink-0 w-full sm:w-auto" type="submit">
+                        Confirm
+                    </ButtonWithLoading>
                 </Form>
             </div>
         </div>

src/components/wrappers/dashboard/admin/settings/storage/settings-storage.action.ts

@@ -20,11 +20,11 @@ export const updateStorageSettingsAction = userAction
         const {name, data} = parsedInput;
 
         try {
-
             const [updatedSettings] = await db
                 .update(drizzleDb.schemas.setting)
                 .set({
                     defaultStorageChannelId: data.storageChannelId,
+                    encryption: data.encryption,
                 })
                 .where(eq(drizzleDb.schemas.setting.name, name))
                 .returning();

src/components/wrappers/dashboard/admin/settings/storage/settings-storage.schema.ts

@@ -1,7 +1,8 @@
-import { z } from "zod";
+import {z} from "zod";
 
 export const DefaultStorageSchema = z.object({
     storageChannelId: z.string(),
+    encryption: z.boolean(),
 });
 
 export type DefaultStorageType = z.infer<typeof DefaultStorageSchema>;

src/components/wrappers/dashboard/admin/users/user.action.ts

@@ -18,7 +18,7 @@ import {userAction} from "@/lib/safe-actions/actions";
 import {
     addMemberOrganizationAction
 } from "@/components/wrappers/dashboard/admin/organizations/organization/details/add-member.action";
-import {sendEmail} from "@/lib/email/email-helper";
+import {sendEmail} from "@/lib/email";
 import EmailCreateUser from "@/components/emails/email-create-user";
 import {SignUpUser} from "@/types/auth";
 import {createUserDb} from "@/db/services/user";

src/components/wrappers/dashboard/agent/agent-card-key/agent-card-key.tsx

@@ -1,23 +1,145 @@
 "use client";
-import {PasswordInput} from "@/components/ui/password-input";
+
+import {Input} from "@/components/ui/input";
+import {Button} from "@/components/ui/button";
+import {Copy, Check, Eye, EyeOff, Terminal, Key, Info} from "lucide-react";
 import {useState} from "react";
-import {CopyButton} from "@/components/wrappers/common/button/copy-button";
+import {copyToClipboardWithMeta} from "@/components/wrappers/common/button/copy-button";
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
 
 export type AgentCardKeyProps = {
     edgeKey: string;
+    agentName: string;
 };
 
-export const AgentCardKey = ({edgeKey}: AgentCardKeyProps) => {
-    const [code, setCode] = useState<string>(`${edgeKey}`);
+export const AgentCardKey = ({edgeKey, agentName}: AgentCardKeyProps) => {
+    const [isCopiedKey, setIsCopiedKey] = useState(false);
+    const [isCopiedCommand, setIsCopiedCommand] = useState(false);
+    const [isVisible, setIsVisible] = useState(false);
+
+    const command = `portabase agent "${agentName}" --key ${edgeKey}`;
+    const maskedKey = "••••••••••••••••••••••••••••••••";
+
+    const handleCopy = async (text: string, setter: (v: boolean) => void) => {
+        await copyToClipboardWithMeta(text);
+        setter(true);
+    };
+
     return (
-        <>
-            <PasswordInput
-                value={code}
-                onChange={() => {
-                    setCode(edgeKey);
-                }}
-            />
-            <CopyButton className="mt-5" value={code}/>
-        </>
+        <div className="flex flex-col gap-4 py-2">
+                    <Card className="border-muted/60 shadow-none py-0">
+                        <CardHeader className="px-4 pt-4">
+                            <CardTitle className="text-sm font-semibold flex items-center gap-2 uppercase tracking-tight">
+                                CLI Setup
+                            </CardTitle>
+                            <CardDescription className="text-xs leading-relaxed">
+                                To setup your agent using the CLI, copy the command below and paste it in your terminal.
+                                Make sure you have the PortaBase CLI installed. If not, you can <a href="https://portabase.io/docs/cli" target="_blank" className="underline hover:text-primary">install it here</a>.
+                            </CardDescription>
+                        </CardHeader>
+                        <CardContent className="px-4 pb-4 space-y-4">
+                            <div className="flex items-center gap-2">
+                                <div className="relative flex-1">
+                                    <Input
+                                        readOnly
+                                        value={isVisible ? command : `portabase agent "${agentName}" --key ${maskedKey}`}
+                                        onFocus={(e) => {
+                                            setIsVisible(true);
+                                            handleCopy(command, setIsCopiedCommand);
+                                            e.currentTarget.select();
+                                        }}
+                                        onClick={(e) => e.currentTarget.select()}
+                                        onBlur={() => {
+                                            setIsVisible(false);
+                                            setIsCopiedCommand(false);
+                                        }}
+                                        className="font-mono text-xs bg-muted/30 h-10 pr-10 cursor-pointer"
+                                    />
+                                    <Button
+                                        variant="ghost"
+                                        size="icon"
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            setIsVisible(!isVisible);
+                                        }}
+                                        className="absolute right-1 top-1.5 h-7 w-7"
+                                        type="button"
+                                    >
+                                        {isVisible ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+                                    </Button>
+                                </div>
+                                <Button
+                                    variant="outline"
+                                    onClick={() => handleCopy(command, setIsCopiedCommand)}
+                                    className="shrink-0 gap-2 h-10 px-4"
+                                    type="button"
+                                >
+                                    {isCopiedCommand ? (
+                                        <><Check className="h-4 w-4 text-green-500" /></>
+                                    ) : (
+                                        <><Copy className="h-4 w-4" /></>
+                                    )}
+                                </Button>
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                  <Card className="border-muted/60 shadow-none py-0">
+                        <CardHeader className="px-4 pt-4">
+                            <CardTitle className="text-sm font-semibold flex items-center gap-2 uppercase tracking-tight">
+                                Manual Setup
+                            </CardTitle>
+                            <CardDescription className="text-xs leading-relaxed">
+                                Use this key to manually configure your agent in your configuration file.
+                                If you need help for manual configuration, you can follow our guide in the <a href="https://portabase.io/docs" target="_blank" className="underline hover:text-primary">documentation</a>.
+                            </CardDescription>
+                        </CardHeader>
+                        <CardContent className="px-4 pb-4 space-y-4">
+                            <div className="flex items-center gap-2">
+                                <div className="relative flex-1">
+                                    <Input
+                                        readOnly
+                                        value={isVisible ? edgeKey : maskedKey}
+                                        onFocus={(e) => {
+                                            setIsVisible(true);
+                                            handleCopy(edgeKey, setIsCopiedKey);
+                                            e.currentTarget.select();
+                                        }}
+                                        onClick={(e) => e.currentTarget.select()}
+                                        onBlur={() => {
+                                            setIsVisible(false);
+                                            setIsCopiedKey(false);
+                                        }}
+                                        className="font-mono text-xs bg-muted/30 h-10 pr-10 cursor-pointer"
+                                    />
+                                    <Button
+                                        variant="ghost"
+                                        size="icon"
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            setIsVisible(!isVisible);
+                                        }}
+                                        className="absolute right-1 top-1.5 h-7 w-7 hover:bg-transparent"
+                                        type="button"
+                                    >
+                                        {isVisible ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+                                    </Button>
+                                </div>
+                                <Button
+                                    variant="outline"
+                                    onClick={() => handleCopy(edgeKey, setIsCopiedKey)}
+                                    className="shrink-0 gap-2 h-10 px-4 "
+                                    type="button"
+                                >
+                                    {isCopiedKey ? (
+                                        <><Check className="h-4 w-4 text-green-500" /></>
+                                    ) : (
+                                        <><Copy className="h-4 w-4" /></>
+                                    )}
+                                </Button>
+                            </div>
+                        </CardContent>
+                    </Card>
+        </div>
     );
 };

src/components/wrappers/dashboard/agent/agent-card/agent-card.tsx

@@ -6,10 +6,12 @@ import {Card} from "@/components/ui/card";
 import {ConnectionIndicator} from "@/components/wrappers/common/connection-indicator";
 import {formatDateLastContact} from "@/utils/date-formatting";
 import {AgentWith} from "@/db/schema/08_agent";
-import {Activity, ChevronRight, Copy, Check, Fingerprint, Server, Database} from "lucide-react";
+import {Activity, ChevronRight, Copy, Check, Fingerprint, Server, Database, AlertCircle} from "lucide-react";
 import {Badge} from "@/components/ui/badge";
 import {truncateWords} from "@/utils/text";
 import {useIsMobile} from "@/hooks/use-mobile";
+import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
+import {useAgentUpdateCheck} from "@/features/agents/hooks/use-agent-update-check";
 
 export type agentCardProps = {
     data: AgentWith;
@@ -20,6 +22,8 @@ export const AgentCard = (props: agentCardProps) => {
     const isMobile = useIsMobile();
     const [isCopied, setIsCopied] = useState(false);
 
+    const {newRelease, isUpdateAvailable} = useAgentUpdateCheck(agent.version);
+
     const handleCopy = (e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
@@ -44,9 +48,23 @@ export const AgentCard = (props: agentCardProps) => {
                             {isMobile ? truncateWords(agent.name, 2) : agent.name}
                         </h3>
                         {agent.version && (
-                            <Badge variant="secondary" className="h-5 px-1.5 text-[10px] font-bold tracking-wider">
-                                v{agent.version}
-                            </Badge>
+                            <div className="flex items-center gap-2">
+                                <Badge variant="secondary" className="h-5 px-1.5 text-[10px] font-bold tracking-wider">
+                                    v{agent.version}
+                                </Badge>
+                                {isUpdateAvailable && (
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <div className="flex items-center justify-center w-5 h-5 bg-yellow-500/10 rounded-full border border-yellow-500/20 text-yellow-600">
+                                                <AlertCircle className="w-3 h-3" />
+                                            </div>
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                            <p>Update available: {newRelease?.tag_name}</p>
+                                        </TooltipContent>
+                                    </Tooltip>
+                                )}
+                            </div>
                         )}
                     </div>
                     

src/components/wrappers/dashboard/agent/agent-content.tsx

@@ -4,76 +4,111 @@ import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Server} from "lucide-react";
 import {formatDateLastContact} from "@/utils/date-formatting";
 import {AgentCardKey} from "@/components/wrappers/dashboard/agent/agent-card-key/agent-card-key";
+import {AgentWithDatabases} from "@/db/schema/08_agent";
+import {useQuery} from "@tanstack/react-query";
+import {getAgentAction} from "@/features/agents/agents.action";
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from "@/components/ui/accordion";
+import {Separator} from "@/components/ui/separator";
+import {Badge} from "@/components/ui/badge";
 import {CardsWithPagination} from "@/components/wrappers/common/cards-with-pagination";
 import {AgentDatabaseCard} from "@/components/wrappers/dashboard/agent/agent-database-card";
-import {AgentWithDatabases} from "@/db/schema/08_agent";
-import {eventUpdate} from "@/types/events";
-import {useAutoRefresh} from "@/hooks/use-auto-refresh";
 
 type AgentContentPageProps = {
     edgeKey: string;
     agent: AgentWithDatabases
-
 }
 
-export const AgentContentPage = ({edgeKey, agent}: AgentContentPageProps) => {
+export const AgentContentPage = ({edgeKey, agent: initialAgent}: AgentContentPageProps) => {
 
-    useAutoRefresh({
-        poll: {
-            enabled: true,
-            intervalMs: 5000,
+    const {data} = useQuery({
+        queryKey: ["agent-data", initialAgent.id],
+        queryFn: async () => {
+            const result = await getAgentAction(initialAgent.id);
+            return result?.data;
         },
-        sse: {
-            enabled: true,
-            url: "/api/events",
-            eventName: "modification",
-            shouldRefresh: (data) => {
-                const update = data as eventUpdate;
-                return Boolean(update?.update);
-            },
+        initialData: {
+            data: initialAgent
         },
+        staleTime: 0,
+        gcTime: 0,
+        refetchInterval: 1000,
     });
 
+    const agent = data?.data ?? initialAgent;
 
     return (
-        <>
+        <div className="space-y-10">
             <div className="flex flex-col sm:flex-row sm:justify-between gap-6 ">
-                <Card className="w-full sm:w-auto flex-1">
+                <Card className="w-full sm:w-auto flex-1 border-none shadow-none bg-muted/30">
                     <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                        <CardTitle className="text-sm font-medium">Databases</CardTitle>
-                        <Server className="h-4 w-4 text-muted-foreground"/>
+                        <CardTitle className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Databases</CardTitle>
+                        <Server className="h-4 w-4 text-muted-foreground opacity-50"/>
                     </CardHeader>
                     <CardContent>
-                        <div className="text-2xl font-bold">{agent.databases.length}</div>
-                        <p className="text-xs text-muted-foreground">Databases linked to this agent</p>
+                        <div className="text-3xl font-bold tracking-tight">{agent.databases.length}</div>
+                        <p className="text-xs text-muted-foreground mt-1">Linked resources</p>
                     </CardContent>
                 </Card>
 
-                <Card className="w-full sm:w-auto flex-1">
+                <Card className="w-full sm:w-auto flex-1 border-none shadow-none bg-muted/30">
                     <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                        <CardTitle className="text-sm font-medium">Last contact</CardTitle>
-                        <Server className="h-4 w-4 text-muted-foreground"/>
+                        <CardTitle className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Last contact</CardTitle>
+                        <Server className="h-4 w-4 text-muted-foreground opacity-50"/>
                     </CardHeader>
                     <CardContent>
-                        <div className="text-2xl font-bold">{formatDateLastContact(agent.lastContact)}</div>
-                        <p className="text-xs text-muted-foreground">Last contact with agent</p>
+                        <div className="text-3xl font-bold tracking-tight">{formatDateLastContact(agent.lastContact)}</div>
+                        <p className="text-xs text-muted-foreground mt-1">Status heartbeat</p>
                     </CardContent>
                 </Card>
-
             </div>
-            <Card className="w-full sm:w-auto flex-1 ">
-                <CardHeader className="font-bold text-xl">
-                    Edge Key
-                </CardHeader>
-                <CardContent>
-                    <AgentCardKey
-                        edgeKey={edgeKey}
-                    />
-                </CardContent>
-            </Card>
-            <CardsWithPagination cardsPerPage={4} numberOfColumns={2} data={agent.databases}
-                                 cardItem={AgentDatabaseCard}/>
 
-        </>
+            <div className="space-y-6">
+                <Accordion type="single" collapsible defaultValue={!agent.lastContact ? "registration" : undefined}>
+                    <AccordionItem value="registration" className="border rounded-xl px-6 bg-card shadow-sm overflow-hidden transition-all duration-300">
+                        <AccordionTrigger className="hover:no-underline py-4 group">
+                            <div className="flex items-center gap-3">
+                                <span className="text-xl font-bold tracking-tight">Registration & Setup</span>
+                                {!agent.lastContact && (
+                                    <Badge variant="outline" className="bg-orange-500/10 text-orange-600 border-orange-500/20 animate-pulse">
+                                        Action Required
+                                    </Badge>
+                                )}
+                            </div>
+                        </AccordionTrigger>
+                        <AccordionContent className="pb-6 pt-2 border-t border-dashed">
+                            <AgentCardKey
+                                edgeKey={edgeKey}
+                                agentName={agent.name}
+                            />
+                        </AccordionContent>
+                    </AccordionItem>
+                </Accordion>
+            </div>
+
+            {agent.databases.length > 0 && (
+                            <div className="space-y-6">
+                <div className="flex items-center justify-between px-1">
+                    <div className="space-y-1">
+                        <h2 className="text-2xl font-bold tracking-tight">Managed Databases</h2>
+                        <p className="text-sm text-muted-foreground">
+                            Resources currently connected to this agent.
+                        </p>
+                    </div>
+                </div>
+                <Separator className="opacity-50" />
+                <CardsWithPagination
+                    cardsPerPage={4}
+                    numberOfColumns={2}
+                    data={agent.databases}
+                    cardItem={AgentDatabaseCard}
+                />
+            </div>
+            )}
+        </div>
     )
 }

src/components/wrappers/dashboard/agent/agent-database-columns.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import {ColumnDef} from "@tanstack/react-table"
+import {Database} from "@/db/schema/07_database"
+import Image from "next/image"
+import {ConnectionIndicator} from "@/components/wrappers/common/connection-indicator"
+import {formatDateLastContact} from "@/utils/date-formatting"
+import Link from "next/link"
+import {Button} from "@/components/ui/button"
+import {ChevronRight} from "lucide-react"
+
+export const agentDatabaseColumns: ColumnDef<Database>[] = [
+    {
+        accessorKey: "dbms",
+        header: "Type",
+        cell: ({row}) => (
+            <div className="flex items-center justify-center w-8 h-8 p-1.5 bg-muted/50 rounded-lg border border-border/50">
+                <Image
+                    src={`/images/${row.original.dbms}.png`}
+                    alt={row.original.dbms}
+                    width={20}
+                    height={20}
+                    className="object-contain"
+                />
+            </div>
+        )
+    },
+    {
+        accessorKey: "name",
+        header: "Name",
+        cell: ({row}) => (
+            <div className="flex flex-col">
+                <span className="font-bold text-sm">{row.original.name}</span>
+                <span className="text-[10px] text-muted-foreground font-mono truncate max-w-[150px]">
+                    {row.original.agentDatabaseId}
+                </span>
+            </div>
+        )
+    },
+    {
+        accessorKey: "lastContact",
+        header: "Last Contact",
+        cell: ({row}) => (
+            <div className="flex flex-col">
+                <span className="text-xs">
+                    {formatDateLastContact(row.original.lastContact)}
+                </span>
+            </div>
+        )
+    },
+    {
+        id: "status",
+        header: "Status",
+        cell: ({row}) => (
+            <div className="flex justify-center w-full">
+                <ConnectionIndicator date={row.original.lastContact} />
+            </div>
+        )
+    },
+    {
+        id: "actions",
+        header: () => null,
+        cell: ({row}) => {
+             const href = row.original.projectId 
+                ? `/dashboard/projects/${row.original.projectId}/database/${row.original.id}`
+                : "#";
+                
+             return (
+                 <div className="flex justify-end">
+                    <Button variant="ghost" size="icon" asChild className="hover:bg-accent group">
+                        <Link href={href}>
+                            <ChevronRight className="h-4 w-4 text-muted-foreground group-hover:text-foreground transition-transform group-hover:translate-x-0.5" />
+                        </Link>
+                    </Button>
+                 </div>
+             )
+        }
+    }
+]

src/components/wrappers/dashboard/agent/agent-modal-key/agent-modal-key.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DialogClose } from "@/components/ui/dialog";
 
 import { generateEdgeKey } from "@/utils/edge_key";
 import { PropsWithChildren } from "react";
@@ -16,26 +16,29 @@ export type agentRegistrationDialogProps = PropsWithChildren<{
 
 export function AgentModalKey(props: agentRegistrationDialogProps) {
     const edge_key = generateEdgeKey(getServerUrl(), props.agent.id);
-    const code = `EDGE_KEY = ${edge_key}`;
+    const command = `portabase agent "${props.agent.name}" --key ${edge_key}`;
 
     return (
         <Dialog>
             <DialogTrigger asChild>{props.children}</DialogTrigger>
             <DialogContent className="sm:max-w-[425px] w-full">
                 <DialogHeader>
-                    <DialogTitle>Agent Edge Key</DialogTitle>
+                    <DialogTitle>Agent Connection</DialogTitle>
                 </DialogHeader>
-                <div className="sm:max-w-[375px] w-full">
+                <div className="sm:max-w-[375px] w-full space-y-4">
                     <CodeSnippet
-                        code={code}
-                        // className="w-full overflow-x-auto break-words"
+                        title="Installation Command"
+                        code={command}
+                    />
+                    <CodeSnippet
+                        title="Agent Key (Manual)"
+                        code={edge_key}
                     />
                 </div>
                 <DialogFooter>
-                    <div className="flex items-center justify-between w-full">
-                        <CopyButton value={code} />
-                        <Button type="submit">Save changes</Button>
-                    </div>
+                    <DialogClose asChild>
+                        <Button type="button" variant="outline">Close</Button>
+                    </DialogClose>
                 </DialogFooter>
             </DialogContent>
         </Dialog>

src/components/wrappers/dashboard/backup/backup-button/backup-button.tsx

@@ -1,8 +1,7 @@
 "use client";
 
+import {useMutation, useQueryClient} from "@tanstack/react-query";
 import {useRouter} from "next/navigation";
-
-import {useMutation} from "@tanstack/react-query";
 import {toast} from "sonner";
 
 import {backupButtonAction} from "@/components/wrappers/dashboard/backup/backup-button/backup-button.action";
@@ -16,6 +15,7 @@ export type BackupButtonProps = {
 };
 
 export const BackupButton = (props: BackupButtonProps) => {
+    const queryClient = useQueryClient();
     const router = useRouter();
     const isMobile = useIsMobile()
 
@@ -24,6 +24,7 @@ export const BackupButton = (props: BackupButtonProps) => {
             const backup = await backupButtonAction(databaseId);
             if (backup?.data?.success) {
                 toast.success(backup.data.actionSuccess?.message || "Backup created successfully!");
+                queryClient.invalidateQueries({queryKey: ["database-data", props.databaseId]});
                 router.refresh();
             } else {
                 toast.error(backup?.serverError || "Failed to create backup.");

src/components/wrappers/dashboard/common/logged-in/logged-in-button.server.tsx

@@ -3,6 +3,7 @@ import {getAccounts, getSession, getSessions} from "@/lib/auth/auth";
 import {LoggedInButtonClient} from "./logged-in-button";
 import {SUPPORTED_PROVIDERS} from "../../../../../../portabase.config";
 
+
 export const LoggedInButton = async () => {
     const user = await currentUser();
     const sessions = await getSessions();
@@ -16,7 +17,7 @@ export const LoggedInButton = async () => {
         <LoggedInButtonClient
             user={user}
             sessions={sessions}
-             // @ts-ignore
+            // @ts-ignore
             currentSession={currentSession.session}
             accounts={accounts}
             providers={SUPPORTED_PROVIDERS.filter((p) => p.isActive)}

src/components/wrappers/dashboard/common/logged-in/logged-in-button.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {ChevronsUpDown, ChevronUp} from "lucide-react";
+import {ChevronsUpDown} from "lucide-react";
 import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
 import {SidebarMenuButton} from "@/components/ui/sidebar";
 import {LoggedInDropdown} from "./logged-in-dropdown";
@@ -15,6 +15,7 @@ type LoggedInButtonClientProps = {
     providers: AuthProviderConfig[]
 }
 
+
 export const LoggedInButtonClient = ({
                                          user,
                                          sessions,
@@ -35,14 +36,15 @@ export const LoggedInButtonClient = ({
             accounts={accounts}
             providers={providers}
         >
-            <SidebarMenuButton type="button" className="h-auto  justify-between py-2" >
+            <SidebarMenuButton type="button" className="h-auto  justify-between py-2">
                 <div className="flex items-center gap-2">
                     <Avatar className="size-6">
                         <AvatarFallback>{user.name[0].toUpperCase()}</AvatarFallback>
                         {user.image && <AvatarImage src={user.image}/>}
                     </Avatar>
                     <div className="flex flex-col items-start">
-                        <span className="text-sm font-medium first-letter:capitalize max-w-[170px] truncate">{user.name}</span>
+                        <span
+                            className="text-sm font-medium first-letter:capitalize max-w-[170px] truncate">{user.name}</span>
                         <span
                             className="text-xs text-muted-foreground max-w-[170px] truncate"
                             title={user.email}

src/components/wrappers/dashboard/common/logged-in/logged-in-dropdown.tsx

@@ -1,26 +1,36 @@
 "use client";
 
 import {PropsWithChildren, ReactNode, useState} from "react";
+
 import { useRouter } from "next/navigation";
-import { CircleUser, LogOut } from "lucide-react";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+
+import { LogOut, User } from "lucide-react";
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+
 import { signOut } from "@/lib/auth/auth-client";
+
 import {ProfileModal} from "@/components/wrappers/dashboard/common/profile/profile-modal";
-import {Account, Session, User} from "@/db/schema/02_user";
+
+import {Account, Session, User as UserType} from "@/db/schema/02_user";
+
 import {AuthProviderConfig} from "../../../../../../portabase.config";
 
 export type LoggedInDropdownProps = PropsWithChildren<{
-    user: User;
+    user: UserType;
     sessions: Session[];
     currentSession: Session;
     accounts: Account[];
     children: ReactNode;
     providers: AuthProviderConfig[]
-
 }>;
 
+
+
 export const LoggedInDropdown = ({ user, sessions, currentSession, accounts, children, providers }: LoggedInDropdownProps) => {
+
     const router = useRouter();
+
     const [isModalOpen, setIsModalOpen] = useState(false);
 
     return (
@@ -34,34 +44,50 @@ export const LoggedInDropdown = ({ user, sessions, currentSession, accounts, chi
                 onOpenChange={setIsModalOpen}
                 providers={providers}
             />
-
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
-                <DropdownMenuContent side="top" className="min-w-[var(--radix-popper-anchor-width)]">
-                    <DropdownMenuItem onClick={() => setIsModalOpen(!isModalOpen)}>
-                        <div className="flex justify-start items-center gap-2">
-                            <CircleUser size={16} />
-                            <span>Account</span>
-                        </div>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                        onClick={async () => {
-                            await signOut({
-                                fetchOptions: {
-                                    onSuccess: () => {
-                                        router.push("/login");
-                                    },
-                                },
-                            });
-                        }}
-                    >
-                        <div className="flex justify-start items-center gap-2">
-                            <LogOut size={16} className="text-red-500" />
-                            <span className="text-red-500">Logout</span>
-                        </div>
-                    </DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+                            <DropdownMenuContent
+                                className="w-[var(--radix-popper-anchor-width)] rounded-xl border-2 border-border bg-popover shadow-none p-1"
+                                align="start"
+                                side="top"
+                                sideOffset={8}
+                            >
+                                <DropdownMenuItem
+                                    onClick={() => setIsModalOpen(!isModalOpen)}
+                                    className="group gap-2 p-1 cursor-pointer rounded-lg mb-1 transition-colors focus:bg-accent hover:bg-accent/50 border border-transparent"
+                                >
+                                    <div className="flex size-9 items-center justify-center rounded-md border border-border bg-muted/50 shadow-sm transition-all group-hover:shadow-md group-hover:bg-background">
+                                        <User size={18} className="text-muted-foreground group-hover:text-foreground transition-colors" />
+                                    </div>
+                                    <div className="flex flex-col">
+                                        <span className="text-sm font-medium leading-none">Account Settings</span>
+                                    </div>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem
+                                    className="group gap-2 p-1 cursor-pointer rounded-lg transition-colors focus:bg-red-50 dark:focus:bg-red-950/20 border border-transparent text-red-600 focus:text-red-600"
+                                    onClick={async () => {
+                                        await signOut({
+                                            fetchOptions: {
+                                                onSuccess: () => {
+                                                    router.push("/login");
+                                                },
+                                            },
+                                        });
+                                    }}
+                                >
+                                    <div className="flex size-9 items-center justify-center rounded-md border border-red-100 bg-red-50/50 dark:border-red-900/30 dark:bg-red-950/20 shadow-sm transition-all group-hover:shadow-md">
+                                        <LogOut size={18} className="text-red-500" />
+                                    </div>
+                                    <div className="flex flex-col">
+                                        <span className="text-sm font-medium leading-none">Logout</span>
+                                    </div>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
         </>
+
     );
+
 };
+
+