chore(release): 1.2.4-rc.5

update: new org combobox

.env.example

@@ -1,37 +1,30 @@
 # Environnement
-NODE_ENV=production
+NODE_ENV=development
 
 # Base de données
-DATABASE_URL=postgresql://devuser:changeme@db:5432/devdb?schema=public
+DATABASE_URL=postgresql://devuser:changeme@localhost:5433/devdb?schema=public
 
 # Projet
 PROJECT_NAME="Portabase"
 PROJECT_DESCRIPTION="Portabase is a powerful database manager"
-PROJECT_URL=http://app.portabase.io
+PROJECT_URL=http://localhost:8887
 PROJECT_SECRET=
 
 # SMTP (email)
 SMTP_HOST=
-SMTP_PORT=587
+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=
 AUTH_GOOGLE_SECRET=
 AUTH_GOOGLE_METHOD=
 
-# S3
-S3_ENDPOINT=http://app.s3.portabase.io
-S3_ACCESS_KEY=
-S3_SECRET_KEY=
-S3_BUCKET_NAME=portabase
-S3_PORT=9000
-S3_USE_SSL=true
-
-# Storage Type (s3, local)
-STORAGE_TYPE=local
-
 # Retention
-RETENTION_CRON="* * * * *"
+RETENTION_CRON="* * * * *"

.github/CONTRIBUTING.md

@@ -26,7 +26,7 @@ Please take a moment to review this guide. It will help you understand how to co
 
 2. **Clone the repository**
    ```bash
-   git clone https://github.com/Soluce-Technologies/portabase
+   git clone https://github.com/Portabase/portabase
    ```
 
 3. **Set up the development environment**  

.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/SECURITY.md

@@ -7,9 +7,9 @@
 
 We take security seriously and aim to support the following versions of the project with security updates:
 
-| Version   | Supported          |  
-|-----------|--------------------|  
-| 1.x       | ✅ Fully Supported |  
+| Version | Supported          |  
+|---------|--------------------|  
+| Latest  | ✅ Fully Supported |  
 
 ---
 

.github/workflows/docker.yml

@@ -0,0 +1,97 @@
+name: Docker Publish
+
+on:
+  workflow_call:
+    inputs:
+      image_name:
+        required: false
+        type: string
+        default: 'solucetechnologies/portabase'
+      image_name2:
+        required: false
+        type: string
+        default: 'portabase/portabase'
+      add_latest:
+        required: false
+        type: boolean
+        default: false
+      target:
+        required: false
+        type: string
+        default: 'prod'
+      dockerfile:
+        required: false
+        type: string
+        default: './docker/dockerfile/Dockerfile'
+    secrets:
+      DOCKER_USERNAME:
+        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
+    steps:
+      - name: Check out the repo
+        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_name2 }}:latest"
+          fi
+          echo "tags=$TAGS" >> $GITHUB_OUTPUT
+          echo "tags2=$TAGS2" >> $GITHUB_OUTPUT
+
+      - name: Set up QEMU (enables multi-arch emulation)
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to Docker Hub account 1
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and push to solucetechnologies/portabase
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ${{ inputs.dockerfile }}
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.set-tags.outputs.tags }}
+          target: ${{ inputs.target }}
+
+      - name: Log in to Docker Hub account 2
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
+        with:
+          username: ${{ secrets.DOCKER_USERNAME_2 }}
+          password: ${{ secrets.DOCKER_PASSWORD_2 }}
+
+      - name: Build and push to portabase/portabase
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ${{ inputs.dockerfile }}
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.set-tags.outputs.tags2 }}
+          target: ${{ inputs.target }}

.github/workflows/github.yml

@@ -0,0 +1,128 @@
+name: GitHub Release
+
+on:
+  workflow_call:
+    inputs:
+      prerelease:
+        required: false
+        type: boolean
+        default: false
+      make_latest:
+        required: false
+        type: boolean
+        default: false
+      discord_title:
+        required: true
+        type: string
+      discord_color:
+        required: true
+        type: number
+      discord_footer:
+        required: true
+        type: string
+    secrets:
+      DISCORD_WEBHOOK:
+        required: true
+      GH_TOKEN:
+        required: true
+
+jobs:
+  create-release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Build Changelog
+        id: build_changelog
+        uses: mikepenz/release-changelog-builder-action@v5
+        with:
+          mode: "COMMIT"
+          configurationJson: |
+            {
+              "template": "#{{CHANGELOG}}",
+              "categories": [
+                {
+                    "title": "## Feature",
+                    "labels": ["feat", "feature"]
+                },
+                {
+                    "title": "## Fix",
+                    "labels": ["fix", "bug"]
+                },
+                {
+                    "title": "## Other",
+                    "labels": []
+                }
+              ],
+              "label_extractor": [
+                {
+                  "pattern": "^(build|chore|ci|docs|feat|fix|perf|refactor|revert|style|test){1}(\([\w\-\.]+\))?(!)?: ([\w ])+([\s\S]*)",
+                  "on_property": "title",
+                  "target": "$1"
+                }
+              ]
+            }
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          generate_release_notes: false
+          body: ${{ steps.build_changelog.outputs.changelog }}
+          prerelease: ${{ inputs.prerelease }}
+          make_latest: ${{ inputs.make_latest }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+
+      - name: Send Discord Notification
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+        run: |
+          RELEASE_INFO=$(gh release view "${{ github.ref_name }}" -R ${{ github.repository }} --json name,url,body,author)
+          
+          RELEASE_TITLE=$(echo "$RELEASE_INFO" | jq -r .name)
+          if [ -z "$RELEASE_TITLE" ] || [ "$RELEASE_TITLE" = "null" ]; then RELEASE_TITLE="${{ github.ref_name }}"; fi
+          
+          RELEASE_URL=$(echo "$RELEASE_INFO" | jq -r .url)
+          RELEASE_BODY=$(echo "$RELEASE_INFO" | jq -r .body)
+          
+          AUTHOR_NAME="Portabase"
+          AUTHOR_ICON="https://github.com/Portabase.png" 
+
+          PAYLOAD=$(jq -n \
+            --arg title "$RELEASE_TITLE" \
+            --arg description "$RELEASE_BODY" \
+            --arg url "$RELEASE_URL" \
+            --arg author "$AUTHOR_NAME" \
+            --arg icon "$AUTHOR_ICON" \
+            --arg discord_title "${{ inputs.discord_title }}" \
+            --arg discord_footer "${{ inputs.discord_footer }}" \
+            --argjson discord_color ${{ inputs.discord_color }} \
+            '{ 
+              content: $discord_title,
+              embeds: [{
+                title: $title,
+                url: $url,
+                description: $description,
+                color: $discord_color,
+                author: {
+                  name: $author,
+                  icon_url: $icon
+                },
+                footer: {
+                  text: $discord_footer
+                }
+              }]
+            }'
+          ) 
+          
+          curl -H "Content-Type: application/json" \
+               -d "$PAYLOAD" \
+               "$DISCORD_WEBHOOK"

.github/workflows/release-candidate.yml

@@ -0,0 +1,34 @@
+name: Publish Docker image for release candidate
+
+on:
+  push:
+    tags:
+      - '*-rc*'
+
+permissions:
+  contents: write
+  packages: write
+
+jobs:
+  docker_publish:
+    uses: ./.github/workflows/docker.yml
+    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 }}
+
+  github_release:
+    needs: docker_publish
+    uses: ./.github/workflows/github.yml
+    with:
+      prerelease: true
+      make_latest: false
+      discord_title: "||@release-dashboard|| New release candidate published"
+      discord_color: 16776960
+      discord_footer: "Portabase"
+    secrets:
+      DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -1,50 +1,35 @@
 name: Publish Docker image for release
 
 on:
-  release:
-    types: [published]
+  push:
+    tags:
+      - '*.*.*'
+      - '!*-*'
+
+permissions:
+  contents: write
+  packages: write
 
 jobs:
-  push_to_registry:
-    name: Push Docker image to Docker Hub
-    runs-on: ubuntu-latest
-    permissions:
-      packages: write
-      contents: read
-      attestations: write
-      id-token: write
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v4
+  docker_publish:
+    uses: ./.github/workflows/docker.yml
+    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 }}
 
-      - name: Log in to Docker Hub
-        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
-        with:
-          images: solucetechnologies/portabase
-
-      - name: Set tags
-        id: set-tags
-        run: |
-          echo "RELEASE_TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV
-          TAGS="solucetechnologies/portabase:${GITHUB_REF#refs/tags/}"
-          if [ "${{ github.event.release.target_commitish }}" = "main" ]; then
-            TAGS="$TAGS,solucetechnologies/portabase:latest"
-          fi
-          echo "tags=$TAGS" >> $GITHUB_OUTPUT
-
-      - name: Build and push Docker image
-        id: push
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: ./docker/dockerfile/Dockerfile
-          push: true
-          tags: ${{ steps.set-tags.outputs.tags }}
-          target: prod
+  github_release:
+    needs: docker_publish
+    uses: ./.github/workflows/github.yml
+    with:
+      prerelease: false
+      make_latest: true
+      discord_title: "||@release-dashboard|| New release published"
+      discord_color: 5814783
+      discord_footer: "Portabase"
+    secrets:
+      DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/security.yml

@@ -24,5 +24,8 @@ jobs:
         with:
           fetch-depth: 0   # Fetch full history for gitleaks
       - uses: gitleaks/gitleaks-action@v2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITLEAKS_LICENSE: ${{ secrets.GITLEAKS_LICENSE }}
         with:
           config-path: .gitleaks.toml  # Optional, if you have a custom config

.gitignore

@@ -1,5 +1,6 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 .idea
+.vscode
 # dependencies
 /node_modules
 /.pnp
@@ -41,3 +42,5 @@ public/uploads/*
 private/uploads/*
 
 /.env
+
+certificates

.idea/.gitignore

@@ -1,8 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/portabase.iml" filepath="$PROJECT_DIR$/.idea/portabase.iml" />
-    </modules>
-  </component>
-</project>

.idea/portabase.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="JAVA_MODULE" version="4">
-  <component name="NewModuleRootManager" inherit-compiler-output="true">
-    <exclude-output />
-    <content url="file://$MODULE_DIR$">
-      <sourceFolder url="file://$MODULE_DIR$/backend" isTestSource="false" />
-      <excludeFolder url="file://$MODULE_DIR$/venv" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "WillLuke.nextjs.hasPrompted": true
-}

.yarnrc.yml

@@ -1,2 +0,0 @@
-nodeLinker: node-modules
-

CITATION.cff

@@ -0,0 +1,30 @@
+cff-version: 1.2.0
+title: Portabase
+message: "If you use this software, please cite it as below."
+type: software
+authors:
+  - family-names: Gauthereau
+    given-names: Charles
+  - family-names: Larcher
+    given-names: Killian
+repository-code: https://github.com/Portabase/portabase
+url: https://portabase.io
+abstract: "Portabase is a free, open-source, self-hosted solution for database administration, providing backup and restore capabilities, scheduling, retention policies, notifications, and support for multiple storage backends. Its headless agent architecture enables connection to multiple database instances securely and efficiently."
+keywords:
+  - docker
+  - kubernetes
+  - backups
+  - postgresql
+  - mysql
+  - mariadb
+  - devops
+  - database
+  - monitoring
+  - s3
+  - self-hosted
+  - system-administration
+  - web-ui
+  - agent
+license: Apache-2.0
+version: 1.2.4-rc.5
+date-released: "2026-01-28"

README.md

@@ -1,291 +1,74 @@
 <br />
 <div align="center">
   <a href="https://portabase.io">
-    <img src="/public/images/logo.png" alt="Logo" width="80" height="80">
+    <img src="/.github/assets/logo.png" alt="Logo" width="80" height="80">
   </a>
 
 <h3 align="center">Portabase</h3>
-  <p>
-    Free, open-source, and self-hosted solution for automated backup and restoration of your database instances.
+
+  <p align="center" style="margin-top: 20px; font-style: italic;">
+  <i>Portabase is a tool designed to simplify the backup and restoration of your database instances. It integrates seamlessly with <a href="https://github.com/Portabase/agent">Portabase agents</a> for managing operations securely and efficiently.</i>
   </p>
 
+
 [![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/RostislavDugin/postgresus)
+[![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/)
-[![Self Hosted](https://img.shields.io/badge/self--hosted-yes-brightgreen)](https://github.com/RostislavDugin/postgresus)
+[![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)
+
+
+[![NextJS][NextJS]][NextJS-url]
+[![BetterAuth][BetterAuth]][BetterAuth-url]
+[![Drizzle][Drizzle]][Drizzle-url]
+[![ShadcnUI][ShadcnUI]][ShadcnUI-url]
+[![Docker][Docker]][Docker-url]
 
   <p>
     <strong>
-        <a href="https://portabase.io">Documentation</a> •
-        <a href="https://www.youtube.com/watch?v=D9uFrGxLc4s">Demo</a> •
-        <a href="#installation">Installation</a> •
-        <a href="#contributing">Contributing</a> •
-        <a href="https://github.com/Soluce-Technologies/portabase/issues/new?labels=bug&template=bug-report---.md">Report Bug</a> •
-        <a href="https://github.com/Soluce-Technologies/portabase/issues/new?labels=enhancement&template=feature-request---.md">Request Feature</a>
+        <a href="https://portabase.io">Website</a> •
+        <a href="https://portabase.io/docs">Documentation</a> •
+        <a href="https://www.youtube.com/watch?v=hvLbX5LN1UE">Demo</a> •
+        <a href="https://portabase.io/docs/dashboard/setup">Installation</a> •
+        <a href="https://github.com/Portabase/portabase/issues/new?labels=bug&template=bug-report---.md">Report Bug</a> •
+        <a href="https://github.com/Portabase/portabase/issues/new?labels=enhancement&template=feature-request---.md">Request Feature</a>
     </strong>
   </p>
 
-![portabase-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/e3929e58-fefd-44cc-ab26-6f8e1a860c43)
+![portabase-dashboard](https://github.com/user-attachments/assets/f5ec7204-79c0-43ac-ba17-f2ed682c39d6)
+
 
 </div>
 
-## 📚 Table of Contents
+## Installation
 
-- [About The Project](#-about-the-project)
-- [Getting Started](#-getting-started)
-- [Usage](#-usage)
-- [Roadmap](#-roadmap)
-- [Contributing](#-contributing)
-- [License](#-license)
-- [Contact](#-contact)
-- [Acknowledgments](#-acknowledgments)
+You have 4 ways to install Portabase:
 
----
+- Automated CLI (recommended) - [details](https://portabase.io/docs/dashboard/setup#cli)
+- Docker Compose setup - [details](https://portabase.io/docs/dashboard/setup#docker)
+- Kubernetes with Helm (soon)
+- Development setup - [details](https://portabase.io/docs/dashboard/setup#development)
 
-## ✨ About The Project
-
-**Portabase** is a server dashboard tool designed to simplify the backup and restoration of your database instances. It
-integrates seamlessly with Portabase agents for managing operations securely and efficiently.
-
-GitHub Repository: [Portabase](https://github.com/Soluce-Technologies/portabase)
-
-### 🔧 Built With
-
-- [![NextJS][NextJS]][NextJS-url] (v16 with App Router)
-- [![Drizzle][Drizzle]][Drizzle-url]
-- [![ShadcnUI][ShadcnUI]][ShadcnUI-url]
-- [![BetterAuth][BetterAuth]][BetterAuth-url]
-- [![Docker][Docker]][Docker-url]
+**Ensure Docker is installed on your machine before getting started.**
 
 
----
 
-## 🚀 Getting Started
+## Contributors
 
-### Installation
+[![Contributors](https://contrib.rocks/image?repo=Portabase/portabase)](https://github.com/Portabase/portabase/graphs/contributors)
 
-Ensure Docker is installed on your machine before getting started.
+[!["Support Portabase"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/portabase)
 
-### Option 1:  Docker Compose Setup
-
-Create a `docker-compose.yml` file with the following configuration:
-
-```yaml
-name: portabase
-
-services:
-
-  portabase:
-    image: solucetechnologies/portabase:latest
-    env_file:
-      - .env
-    ports:
-      - '8887:80'
-    environment:
-      - TZ="Europe/Paris"
-    volumes:
-      - portabase-private:/app/private
-    depends_on:
-      db:
-        condition: service_healthy
-    container_name: portabase-app
-
-  db:
-    image: postgres:17-alpine
-    ports:
-      - "5433:5432"
-    volumes:
-      - postgres-data:/var/lib/postgresql/data
-    environment:
-      - POSTGRES_DB=<your_database>
-      - POSTGRES_USER=<database_user>
-      - POSTGRES_PASSWORD=<database_password>
-    healthcheck:
-      test: [ "CMD-SHELL", "pg_isready -U <database_user> -d <your_database>" ]
-      interval: 10s
-      timeout: 5s
-      retries: 5
-
-volumes:
-  postgres-data:
-  portabase-private:
-```
-
-Then run:
-
-```bash
-docker compose up -d
-```
-
-If you use reverse proxy like
-Traefik : [Check this link](https://portabase.io/docs/portabase/advanced-topics/reverse-proxy)
-
-### Option 2:  Locally (Development)
-
-1. Clone the repository:
-    ```bash
-    git clone https://github.com/Soluce-Technologies/portabase
-    cd portabase
-    ```
-2. Start the development environment:
-    ```bash
-    docker compose up
-    ```
-
----
-
-## 🛠️ Usage
-
-Portabase provides a web dashboard to manage your database instances and backups.  
-It currently supports:
-
-- **PostgreSQL**
-- **MySQL**
-
-### Process
-
-1. **Access the dashboard** – Open `http://localhost:8887` in your browser.
-2. **Sign up** – Register the first user, who will automatically have the **Admin** role in the default workspace.
-3. **Add your first agent** – Follow [this guide](https://github.com/Soluce-Technologies/agent-portabase) for setup
-   instructions.
-4. **Create organizations and projects** – Link your databases to projects to enable backups and restores.
-5. **Configure backup policies** – Define schedules (hourly, daily, weekly, or monthly) and retention rules.
-6. **Choose a storage provider** – Select where backups will be stored (local, S3, etc.).
-7. **Save and start** – Portabase validates your configuration and starts automated backups based on your defined
-   policies.
-
----
-
-## 🗺️ Roadmap
-
-- [ ] Add changelog
-- [ ] Enhance documentation
-- [ ] Implement testing procedures
-- [ ] Include release file
-- [ ] Improve security
-- [ ] Enhance UX/UI
-- [ ] Improve workspace management system
-- [x] Migrate to Drizzle ORM
-- [ ] Add multi-language support
-- [ ] Extend multi-database support:
-    - [x] PostgreSQL
-    - [ ] MongoDB
-    - [x] MySQL
-    - [x] MariaDB
-
-Check out [open issues](https://github.com/Soluce-Technologies/portabase/issues) for more.
-
----
-
-## 🤝 Contributing
-
-Contributions are welcome and appreciated! Here's how to get started:
-
-1. Fork the repository
-2. Create a new branch:
-    ```bash
-    git checkout -b feature/YourFeature
-    ```
-3. Commit your changes:
-    ```bash
-    git commit -m "Add YourFeature"
-    ```
-4. Push to the branch:
-    ```bash
-    git push origin feature/YourFeature
-    ```
-5. Open a pull request
-
-Give the project a ⭐ if you like it!
-
-### Top Contributors
-
-[![Contributors](https://contrib.rocks/image?repo=Soluce-Technologies/portabase)](https://github.com/Soluce-Technologies/portabase/graphs/contributors)
-
----
-
-## Developer Notes
-
-### Environment Variables
-
-```yml
-# Environment
-NODE_ENV=production
-
-  # Database
-DATABASE_URL=postgresql://devuser:changeme@db:5432/devdb?schema=public
-
-  # Project Info
-PROJECT_NAME="Portabase"
-PROJECT_DESCRIPTION="Portabase is a powerful database manager"
-PROJECT_URL=http://app.portabase.io
-PROJECT_SECRET=
-
-  # SMTP (Email)
-SMTP_HOST=
-SMTP_PORT=587
-SMTP_USER=
-SMTP_PASSWORD=
-SMTP_FROM=
-
-  # Google OAuth
-AUTH_GOOGLE_ID=
-AUTH_GOOGLE_SECRET=
-AUTH_GOOGLE_METHOD=
-
-  # S3/MinIO Configuration
-S3_ENDPOINT=http://app.s3.portabase.io
-S3_ACCESS_KEY=
-S3_SECRET_KEY=
-S3_BUCKET_NAME=portabase
-S3_PORT=9000
-S3_USE_SSL=true
-
-  # Storage Backend: 'local' or 's3'
-STORAGE_TYPE=local
-
-  # Retention
-RETENTION_CRON="* * * * *"
-```
-
-To get more information about env variables, check
-that [link](https://portabase.io/docs/portabase/advanced-topics/environment)
-
-### Semantic Versioning
-
-Use the following format for Docker image versioning:
-
-```bash
-major.minor.patch-rc.release
-# Example: 1.0.0-rc.1
-
-major.minor.patch-rc.release-tag
-# Example: 1.0.0-rc.1-dev
-```
-
----
-
-## 📄 License
+## License
 
 Distributed under the Apache License. See `LICENSE.txt` for more details.
 
----
-
-## 📬 Contact
-
-- Killian Larcher - killian.larcher@soluce-technologies.com
-- Charles Gauthereau - charles.gauthereau@soluce-technologies.com
-- Project Link: [Portabase GitHub](https://github.com/Soluce-Technologies/portabase)
-
----
-
-## 🙏 Acknowledgments
-
-Thanks to all contributors and the open-source community!
 
 [Docker]: https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=fff&style=for-the-badge
 
@@ -304,5 +87,6 @@ Thanks to all contributors and the open-source community!
 [Drizzle-url]: https://orm.drizzle.team/
 
 [ShadcnUI-url]: https://ui.shadcn.com/
+
 [Docker-url]: https://www.docker.com/
 

app/(auth)/guard/page.tsx

@@ -8,8 +8,8 @@ import {CardAuth} from "@/features/layout/card-auth";
 export default async function GuardPage() {
 
     const cookieStore = await cookies();
-    const token = cookieStore.get("better-auth.two_factor")?.value;
-
+    const token = cookieStore.get("better-auth.two_factor")?.value || cookieStore.get("__Secure-better-auth.two_factor")?.value;
+    
     if (!token) {
         redirect("/login");
     }

app/(auth)/login/page.tsx

@@ -24,18 +24,16 @@ export default async function SignInPage() {
                     </div>
                 </CardHeader>
                 <CardContent className="space-y-4">
-                    <LoginForm />
+                    <LoginForm/>
 
-                    {SUPPORTED_PROVIDERS.filter((p) => !p.isManual).length > 0 && (
+                    {SUPPORTED_PROVIDERS.filter((p) => !p.isManual && p.isActive).length > 0 && (
                         <>
-
                             <div className="relative my-4 flex items-center justify-center overflow-hidden">
                                 <Separator/>
                                 <div className="px-2 text-center  text-sm">OR</div>
                                 <Separator/>
                             </div>
-
-                            <SocialAuthButtons />
+                            <SocialAuthButtons providers={SUPPORTED_PROVIDERS}/>
                         </>
                     )}
 
@@ -50,7 +48,5 @@ export default async function SignInPage() {
         </TooltipProvider>
 
 
-
-
     )
 }

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

@@ -0,0 +1,40 @@
+import {PageParams} from "@/types/next";
+import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
+import {db} from "@/db";
+import {notFound} from "next/navigation";
+import {SettingsTabs} from "@/components/wrappers/dashboard/admin/settings/settings-tabs";
+import {desc, isNull} from "drizzle-orm";
+import * as drizzleDb from "@/db";
+import {StorageChannelWith} from "@/db/schema/12_storage-channel";
+
+export default async function RoutePage(props: PageParams<{}>) {
+
+    const settings = await db.query.setting.findFirst({
+        where: (fields, {eq}) => eq(fields.name, "system"),
+    });
+
+    const storageChannels = await db.query.storageChannel.findMany({
+        with: {
+            organizations: true
+        },
+        where: isNull(drizzleDb.schemas.storageChannel.organizationId),
+        orderBy: desc(drizzleDb.schemas.storageChannel.createdAt)
+    }) as StorageChannelWith[]
+
+    if (!settings || !storageChannels ) {
+        notFound()
+    }
+
+    return (
+        <Page>
+            <PageHeader className="flex flex-col">
+                <div className="flex justify-between">
+                    <PageTitle className="mb-3">System settings</PageTitle>
+                </div>
+            </PageHeader>
+            <PageContent className="flex flex-col gap-5">
+                <SettingsTabs storageChannels={storageChannels} settings={settings} />
+            </PageContent>
+        </Page>
+    );
+}

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

@@ -1,9 +1,9 @@
 import {PageParams} from "@/types/next";
-import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
+import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
 import {db} from "@/db";
-import {DataTable} from "@/components/wrappers/common/table/data-table";
-import {usersColumnsAdmin} from "@/components/wrappers/dashboard/admin/users/columns-users";
-import {isNull} from "drizzle-orm";
+import {desc, isNull} from "drizzle-orm";
+import {AdminUserList} from "@/components/wrappers/dashboard/admin/users/admin-user-list";
+import {AdminUserAddModal} from "@/components/wrappers/dashboard/admin/users/admin-user-add-modal";
 
 export default async function RoutePage(props: PageParams<{}>) {
 
@@ -11,7 +11,14 @@ export default async function RoutePage(props: PageParams<{}>) {
         where: (fields) => isNull(fields.deletedAt),
         with: {
             accounts: true
-        }
+        },
+        orderBy: (fields) => desc(fields.createdAt),
+
+    });
+    const organizations = await db.query.organization.findMany({
+        with: {
+            members: true,
+        },
     });
 
     return (
@@ -19,14 +26,16 @@ export default async function RoutePage(props: PageParams<{}>) {
             <PageHeader className="flex flex-col">
                 <div className="flex justify-between">
                     <PageTitle className="mb-3">Active users</PageTitle>
+                    <PageActions>
+                        <AdminUserAddModal organizations={organizations}/>
+                    </PageActions>
                 </div>
             </PageHeader>
             <PageContent className="flex flex-col gap-5">
-                <DataTable
-                    enableSelect={false}
-                    columns={usersColumnsAdmin}
-                    data={users}/>
+                <AdminUserList users={users}/>
             </PageContent>
         </Page>
     );
 }
+
+

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

@@ -12,6 +12,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 }>) {
 
@@ -33,16 +35,23 @@ export default async function RoutePage(props: PageParams<{ agentId: string }>)
     return (
         <Page>
             <div className="justify-between gap-2 sm:flex">
-                <PageTitle className="flex items-center">
-                    {capitalizeFirstLetter(agent.name)}
-                    <Link className={buttonVariants({variant: "outline"})}
-                          href={`/dashboard/agents/${agent.id}/edit`}>
-                        <GearIcon className="w-7 h-7"/>
-                    </Link>
+                <PageTitle className="flex flex-col md:flex-row items-center justify-between w-full ">
+                    <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">
+                                <AgentDialog agent={agent as AgentType & { id: string }}>
+                                    <div className={buttonVariants({variant: "outline", className: "cursor-pointer"})}>
+                                        <GearIcon className="w-7 h-7"/>
+                                    </div>
+                                </AgentDialog>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <ButtonDeleteAgent agentId={agentId} text={"Delete Agent"}/>
+                            </div>
+                        </div>
                 </PageTitle>
-                <PageActions className="justify-between">
-                    <ButtonDeleteAgent agentId={agentId} text={"Delete Agent"}/>
-                </PageActions>
             </div>
 
             {agent.description && (

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

@@ -2,14 +2,14 @@ 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 {eq, not} from "drizzle-orm";
+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",
@@ -21,11 +21,10 @@ export default async function RoutePage(props: PageParams<{}>) {
         where: not(eq(drizzleDb.schemas.agent.isArchived, true)),
         with: {
             databases: true
-        }
+        },
+        orderBy: (fields) => desc(fields.lastContact),
     });
 
-    console.log(agents);
-
 
     if (!agents) {
         notFound();
@@ -37,9 +36,9 @@ export default async function RoutePage(props: PageParams<{}>) {
                 <PageTitle>Agents</PageTitle>
                 {agents.length > 0 && (
                     <PageActions>
-                        <Link href={"/dashboard/agents/new"}>
+                         <AgentDialog>
                             <Button>+ Create Agent</Button>
-                        </Link>
+                        </AgentDialog>
                     </PageActions>
                 )}
             </PageHeader>
@@ -47,12 +46,13 @@ 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>
+                        <EmptyStatePlaceholder
+                            text={"Create new Agent"}
+                        />
+                    </AgentDialog>
                 )}
             </PageContent>
         </Page>
     );
-}
+}

app/(customer)/dashboard/(admin)/notifications/channels/page.tsx

@@ -1,13 +1,12 @@
 import {PageParams} from "@/types/next";
 import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
 import {Metadata} from "next";
-import {
-    NotificationChannelsSection
-} from "@/components/wrappers/dashboard/admin/notifications/channels/notification-channels-section";
 import {db} from "@/db";
-import {notificationChannel, NotificationChannel, NotificationChannelWith} from "@/db/schema/09_notification-channel";
-import {NotifierAddEditModal} from "@/components/wrappers/dashboard/common/notifier/notifier-add-edit-modal";
+import {notificationChannel, NotificationChannelWith} from "@/db/schema/09_notification-channel";
 import {desc, isNull} from "drizzle-orm";
+import {ChannelsSection} from "@/components/wrappers/dashboard/admin/channels/channels-section";
+import {ChannelAddEditModal} from "@/components/wrappers/dashboard/admin/channels/channel/channel-add-edit-modal";
+import * as drizzleDb from "@/db";
 
 export const metadata: Metadata = {
     title: "Notification Channels",
@@ -19,6 +18,7 @@ export default async function RoutePage(props: PageParams<{}>) {
         with: {
             organizations: true
         },
+        where: isNull(drizzleDb.schemas.notificationChannel.organizationId),
         orderBy: desc(notificationChannel.createdAt)
     }) as NotificationChannelWith[]
 
@@ -35,11 +35,14 @@ export default async function RoutePage(props: PageParams<{}>) {
             <PageHeader>
                 <PageTitle>Notification channels</PageTitle>
                 <PageActions>
-                    <NotifierAddEditModal adminView={false}/>
+                    {/*<NotifierAddEditModal adminView={false}/>*/}
+                    <ChannelAddEditModal kind="notification" adminView={false}/>
                 </PageActions>
             </PageHeader>
             <PageContent>
-                <NotificationChannelsSection organizations={organizations} notificationChannels={notificationChannels}/>
+                {/*<NotificationChannelsSection organizations={organizations} notificationChannels={notificationChannels}/>*/}
+                <ChannelsSection kind="notification" organizations={organizations}
+                                 channels={notificationChannels}/>
             </PageContent>
         </Page>
     );

app/(customer)/dashboard/(admin)/storages/channels/page.tsx

@@ -0,0 +1,50 @@
+import {PageParams} from "@/types/next";
+import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
+import {Metadata} from "next";
+import {ChannelsSection} from "@/components/wrappers/dashboard/admin/channels/channels-section";
+import {db} from "@/db";
+import {desc, eq, isNull} from "drizzle-orm";
+import * as drizzleDb from "@/db";
+import {StorageChannelWith} from "@/db/schema/12_storage-channel";
+import {ChannelAddEditModal} from "@/components/wrappers/dashboard/admin/channels/channel/channel-add-edit-modal";
+
+export const metadata: Metadata = {
+    title: "Storage Channels",
+};
+
+export default async function RoutePage(props: PageParams<{}>) {
+
+    const storageChannels = await db.query.storageChannel.findMany({
+        with: {
+            organizations: true
+        },
+        where: isNull(drizzleDb.schemas.storageChannel.organizationId),
+        orderBy: desc(drizzleDb.schemas.storageChannel.createdAt)
+    }) as StorageChannelWith[]
+
+    const organizations = await db.query.organization.findMany({
+        where: (fields) => isNull(fields.deletedAt),
+        with: {
+            members: true,
+        },
+    });
+
+    const settings = await db.query.setting.findFirst({
+        where: eq(drizzleDb.schemas.setting.name, "system"),
+    });
+
+
+    return (
+        <Page>
+            <PageHeader>
+                <PageTitle>Storage channels</PageTitle>
+                <PageActions>
+                    <ChannelAddEditModal kind={"storage"} adminView={false}/>
+                </PageActions>
+            </PageHeader>
+            <PageContent>
+                <ChannelsSection defaultStorageChannelId={settings?.defaultStorageChannelId} kind={"storage"} organizations={organizations} channels={storageChannels}/>
+            </PageContent>
+        </Page>
+    );
+}

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

@@ -2,7 +2,6 @@ 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 {DatabaseTabs} from "@/components/wrappers/dashboard/projects/database/database-tabs";
 import {DatabaseKpi} from "@/components/wrappers/dashboard/projects/database/database-kpi";
 import {CronButton} from "@/components/wrappers/dashboard/database/cron-button/cron-button";
 import {db} from "@/db";
@@ -12,9 +11,13 @@ 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 {AlertPolicyModal} from "@/components/wrappers/dashboard/database/alert-policy/alert-policy-modal";
 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";
 
 export default async function RoutePage(props: PageParams<{
     projectId: string;
@@ -39,7 +42,8 @@ export default async function RoutePage(props: PageParams<{
         with: {
             project: true,
             retentionPolicy: true,
-            alertPolicies: true
+            alertPolicies: true,
+            storagePolicies: true
         }
     });
 
@@ -51,6 +55,11 @@ export default async function RoutePage(props: PageParams<{
         where: eq(drizzleDb.schemas.backup.databaseId, dbItem.id),
         with: {
             restorations: true,
+            storages: {
+                with: {
+                    storageChannel: true
+                }
+            }
         },
         orderBy: (b, {desc}) => [desc(b.createdAt)],
     });
@@ -60,7 +69,7 @@ export default async function RoutePage(props: PageParams<{
         orderBy: (r, {desc}) => [desc(r.createdAt)],
     });
 
-    const isAlreadyBackup = backups.some((b) => b.status === "waiting");
+    const isAlreadyBackup = backups.some((b) => b.status === "waiting" || b.status === "ongoing");
     const isAlreadyRestore = restorations.some((r) => r.status === "waiting");
 
     const totalBackups = await db.select({count: drizzleDb.schemas.backup.id})
@@ -87,6 +96,10 @@ export default async function RoutePage(props: PageParams<{
     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;
 
     const isMember = activeMember?.role === "member";
@@ -102,12 +115,22 @@ 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">
-                                {/* Do not delete*/}
-                                {/*<EditButton/>*/}
                                 <RetentionPolicySheet database={dbItem}/>
                                 <CronButton database={dbItem}/>
-                                <AlertPolicyModal database={dbItem} notificationChannels={activeOrganizationChannels}
-                                                  organizationId={organization.id}/>
+                                <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">
@@ -126,10 +149,16 @@ export default async function RoutePage(props: PageParams<{
             <PageContent className="flex flex-col w-full h-full">
                 <DatabaseKpi successRate={successRate} database={dbItem} availableBackups={availableBackups}
                              totalBackups={totalBackups}/>
-                <DatabaseTabs activeMember={activeMember} settings={settings} database={dbItem}
-                              isAlreadyRestore={isAlreadyRestore}
-                              backups={backups}
-                              restorations={restorations}/>
+                <BackupModalProvider>
+                    <DatabaseContent
+                        activeMember={activeMember}
+                        settings={settings}
+                        database={dbItem}
+                        isAlreadyRestore={isAlreadyRestore}
+                        restorations={restorations}
+                        backups={backups}
+                    />
+                </BackupModalProvider>
             </PageContent>
         </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,7 @@
 import {PageParams} from "@/types/next";
-import {Page, PageActions, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
+import {Page, PageContent, PageTitle} from "@/features/layout/page";
 import {buttonVariants} from "@/components/ui/button";
 import {GearIcon} from "@radix-ui/react-icons";
-import Link from "next/link";
 import {
     ButtonDeleteProject
 } from "@/components/wrappers/dashboard/projects/button-delete-project/button-delete-project";
@@ -15,6 +14,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";
+
 
 export default async function RoutePage(props: PageParams<{
     projectId: string
@@ -50,27 +53,48 @@ 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 (
         <Page>
             <div className="justify-between gap-2 sm:flex">
-                <PageTitle className="flex items-center">
-                    {capitalizeFirstLetter(proj.name)}
+                <PageTitle className="flex flex-col md:flex-row items-center justify-between w-full ">
+                    <div className="min-w-full md:min-w-fit ">
+                        {capitalizeFirstLetter(proj.name)}
+                    </div>
                     {!isMember && (
-                        <Link className={buttonVariants({variant: "outline"})}
-                              href={`/dashboard/projects/${proj.id}/edit`}>
-                            <GearIcon className="w-7 h-7"/>
-                        </Link>
+                        <div className="flex items-center gap-2 md:justify-between w-full ">
+                            <div className="flex items-center gap-2">
+                                <ProjectDialog 
+                                    databases={availableDatabases} 
+                                    organization={org}
+                                    project={proj as ProjectWith}
+                                >
+                                    <div className={buttonVariants({variant: "outline", className: "cursor-pointer"})}>
+                                        <GearIcon className="w-7 h-7"/>
+                                    </div>
+                                </ProjectDialog>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <ButtonDeleteProject projectId={projectId} text={"Delete Project"}/>
+                            </div>
+                        </div>
                     )}
                 </PageTitle>
-                {!isMember && (
-                    <PageActions className="justify-between">
-                        <ButtonDeleteProject projectId={projectId} text={"Delete Project"}/>
-                    </PageActions>
-                )}
             </div>
-            <PageDescription>The list of associated databases</PageDescription>
             <PageContent className="flex flex-col w-full h-full">
                 {proj.databases.length > 0 ? (
                     <CardsWithPagination
@@ -78,8 +102,8 @@ export default async function RoutePage(props: PageParams<{
                         organizationSlug={organization.slug}
                         // @ts-ignore
                         cardItem={ProjectDatabaseCard}
-                        cardsPerPage={4}
-                        numberOfColumns={1}
+                        cardsPerPage={6}
+                        numberOfColumns={3}
                         extendedProps={proj}
                     />
                 ) : (
@@ -91,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,5 +1,3 @@
-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";
@@ -10,6 +8,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 +36,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 +56,9 @@ export default async function RoutePage(props: PageParams<{}>) {
                 <PageTitle>Projects</PageTitle>
                 {(projects.length > 0 && !isMember) && (
                     <PageActions>
-                        <Link href={`/dashboard/projects/new`}>
+                        <ProjectDialog databases={availableDatabases} organization={organization}>
                             <Button>+ Create Project</Button>
-                        </Link>
+                        </ProjectDialog>
                     </PageActions>
                 )}
             </PageHeader>
@@ -56,15 +69,17 @@ export default async function RoutePage(props: PageParams<{}>) {
                         organizationSlug={organization.slug}
                         data={projects}
                         cardItem={ProjectCard}
-                        cardsPerPage={4}
-                        numberOfColumns={1}
+                        cardsPerPage={6}
+                        numberOfColumns={3}
                     />
                 ) : isMember ? (
                     <EmptyStatePlaceholder text="No project available"/>
                 ) : (
-                    <EmptyStatePlaceholder url="/dashboard/projects/new" text="Create new Project"/>
+                    <ProjectDialog databases={availableDatabases} organization={organization}>
+                        <EmptyStatePlaceholder text="Create new Project"/>
+                    </ProjectDialog>
                 )}
             </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

@@ -3,14 +3,19 @@ import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/
 import {currentUser} from "@/lib/auth/current-user";
 import {getActiveMember, getOrganization} from "@/lib/auth/auth";
 import {notFound} from "next/navigation";
-import {
-    DeleteOrganizationButton
-} from "@/components/wrappers/dashboard/organization/delete-organization/delete-organization-button";
-import {EditButtonSettings} from "@/components/wrappers/dashboard/settings/edit-button-settings/edit-button-settings";
 import {Metadata} from "next";
 import {OrganizationTabs} from "@/components/wrappers/dashboard/organization/tabs/organization-tabs";
 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 {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",
@@ -21,38 +26,76 @@ 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();
     }
 
     const notificationChannels = await getOrganizationChannels(organization.id)
-
+    const storageChannels = await getOrganizationStorageChannels(organization.id)
     const permissions = computeOrganizationPermissions(activeMember);
 
+    // Fetch users for the form
+    const users = await db.query.user.findMany({
+        where: (fields) => isNull(fields.deletedAt)
+    });
+
+    // Re-fetch organization with members to match type expectations if needed, 
+    // although getOrganization returns OrganizationWithMembers usually, let's verify or cast.
+    // getOrganization returns Organization type from database schema, which includes relations if defined in auth lib.
+    // However, OrganizationForm expects OrganizationWithMembers. 
+    // Let's ensure we have members.
+    
+    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>
             <PageHeader>
-                <PageTitle className="flex items-center">
-                    Organization settings
-                    {permissions.canManageSettings && organization.slug !== "default" && (
-                        <EditButtonSettings/>
-                    )}
+                <PageTitle className="flex flex-col md:flex-row items-center justify-between w-full ">
+                    <div className="min-w-full md:min-w-fit ">
+                        Organization settings
+                    </div>
+                        <div className="flex items-center gap-2 md:justify-between w-full ">
+                            <div className="flex items-center gap-2">
+                                {permissions.canManageSettings && organization.slug !== "default" && (
+                                    <EditOrganizationDialog 
+                                        organization={organizationWithMembers} 
+                                        users={users} 
+                                        currentUser={user}
+                                    >
+                                        <Button variant="outline">
+                                            <GearIcon className="w-7 h-7"/>
+                                        </Button>
+                                    </EditOrganizationDialog>
+                                )}
+                            </div>
+                            <div className="flex items-center gap-2">
+                                {permissions.canManageDangerZone && organization.slug !== "default" && (
+                                    <DeleteOrganizationButton organizationSlug={organization.slug}/>
+                                )}
+                            </div>
+                        </div>
                 </PageTitle>
-
-                <PageActions>
-                    {permissions.canManageDangerZone && organization.slug !== "default" && (
-                        <DeleteOrganizationButton organizationSlug={organization.slug}/>
-                    )}
-                </PageActions>
             </PageHeader>
             <PageContent>
                 <OrganizationTabs
                     activeMember={activeMember}
                     organization={organization}
                     notificationChannels={notificationChannels}
+                    storageChannels={storageChannels}
                 />
             </PageContent>
         </Page>
     )
-}
+}

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

@@ -78,9 +78,6 @@ export default async function RoutePage(props: PageParams<{}>) {
         (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
     );
 
-    const Placeholder = ({text}: { text: string }) => (
-        <div className="flex h-48 items-center justify-center text-sm text-muted-foreground">{text}</div>
-    );
 
     return (
         <Page>
@@ -125,31 +122,12 @@ export default async function RoutePage(props: PageParams<{}>) {
                 </div>
 
                 <div className="flex flex-col md:flex-row gap-4">
-                    <Card className="w-full">
-                        <CardHeader>
-                            <CardTitle>Evolution of the number of backups</CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                            {sortedBackupsEvolution.length > 0 ? (
-                                <EvolutionLineChart data={sortedBackupsEvolution}/>
-                            ) : (
-                                <Placeholder text="No backup data available"/>
-                            )}
-                        </CardContent>
-                    </Card>
+                    <EvolutionLineChart
+                        data={sortedBackupsEvolution}
+                    />
 
-                    <Card className="w-full">
-                        <CardHeader>
-                            <CardTitle>Success rate of backups</CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                            {backupsRate.length > 0 ? (
-                                <PercentageLineChart data={backupsRate}/>
-                            ) : (
-                                <Placeholder text="No backup rate data available"/>
-                            )}
-                        </CardContent>
-                    </Card>
+                    <PercentageLineChart
+                        data={backupsRate}/>
                 </div>
             </PageContent>
         </Page>

app/(customer)/dashboard/layout.tsx

@@ -6,6 +6,7 @@ import {AppSidebar} from "@/components/wrappers/dashboard/common/sidebar/app-sid
 import {Header} from "@/features/layout/Header";
 import {currentUser} from "@/lib/auth/current-user";
 import {ThemeMetaUpdater} from "@/features/browser/theme-meta-updater";
+import {BackupModalProvider} from "@/components/wrappers/dashboard/database/backup/backup-modal-context";
 
 export default async function Layout({children}: { children: ReactNode }) {
     const user = await currentUser();

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

@@ -1,8 +1,5 @@
 import fs from "node:fs";
 import forge from "node-forge";
-import {EventPayload} from "@/features/notifications/types";
-import {dispatchNotification} from "@/features/notifications/dispatch";
-import {Database, DatabaseWith} from "@/db/schema/07_database";
 
 
 export async function decryptedDump(file: File, aesKeyHex: string, ivHex: string, fileExtension: string): Promise<File> {

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

@@ -1,16 +1,15 @@
 import {NextResponse} from "next/server";
 import {isUuidv4} from "@/utils/verify-uuid";
-import {uploadLocalPrivate, uploadS3Private} from "@/features/upload/private/upload.action";
 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 {env} from "@/env.mjs";
 import {withUpdatedAt} from "@/db/utils";
 import {decryptedDump, getFileExtension} from "./helpers";
 import {sendNotificationsBackupRestore} from "@/features/notifications/helpers";
+import {storeBackupFiles} from "@/features/storages/helpers";
 
 export async function POST(
     request: Request,
@@ -25,6 +24,7 @@ export async function POST(
                 {status: 400}
             );
         }
+
         eventEmitter.emit('modification', {update: true});
 
         const agentId = (await params).agentId;
@@ -34,6 +34,9 @@ export async function POST(
         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"},
@@ -56,7 +59,8 @@ export async function POST(
             where: eq(drizzleDb.schemas.database.agentDatabaseId, generatedId),
             with: {
                 project: true,
-                alertPolicies: true
+                alertPolicies: true,
+                storagePolicies: true
             }
         });
 
@@ -106,53 +110,32 @@ export async function POST(
 
         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});
             }
 
 
+
             if (!file) {
                 return NextResponse.json(
                     {error: "File is required for successful backup"},
                     {status: 400}
                 );
             }
-            const fileExtension = getFileExtension(database.dbms)
+            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());
 
-            const [settings] = await db.select().from(drizzleDb.schemas.setting).where(eq(drizzleDb.schemas.setting.name, "system")).limit(1);
-            if (!settings) {
-                throw new Error("System settings not found.");
-            }
 
-            let success: boolean, message: string, filePath: string;
+            console.log(extension)
 
-            const result =
-                settings.storage === "local"
-                    ? await uploadLocalPrivate(fileName, buffer)
-                    : await uploadS3Private(`${database.project?.slug}/${fileName}`, buffer, env.S3_BUCKET_NAME!);
-
-            ({success, message, filePath} = result);
-
-            if (!success) {
-                return NextResponse.json(
-                    {error: message},
-                    {status: 500}
-                );
-            }
-
-            await db
-                .update(drizzleDb.schemas.backup)
-                .set(withUpdatedAt({
-                    file: fileName,
-                    status: 'success',
-                }))
-                .where(eq(drizzleDb.schemas.backup.id, backup.id));
 
+            const storageResults = await storeBackupFiles(backup, database, buffer, fileName)
             eventEmitter.emit('modification', {update: true});
 
             await sendNotificationsBackupRestore(database, "success_backup");

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

@@ -24,7 +24,6 @@ export async function POST(
         const agentId = (await params).agentId
         const body: BodyResultRestore = await request.json();
 
-        console.log(body)
 
         if (!isUuidv4(body.generatedId)) {
             return NextResponse.json(

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

@@ -1,17 +1,15 @@
 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 * as drizzleDb from "@/db";
 import {db as dbClient} from "@/db";
-import {and, eq} 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 {and, eq, inArray} from "drizzle-orm";
+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";
 
 export async function handleDatabases(body: Body, agent: Agent, lastContact: Date) {
     const databasesResponse = [];
@@ -48,6 +46,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({
@@ -75,76 +79,67 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
                 .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),
+                    inArray(drizzleDb.schemas.backup.status, ["waiting", "ongoing"])
+                )
             })
 
 
             const restoration = await dbClient.query.restoration.findFirst({
-                where: and(eq(drizzleDb.schemas.restoration.databaseId, databaseUpdated.id), eq(drizzleDb.schemas.restoration.status, "waiting"))
+                where: and(eq(drizzleDb.schemas.restoration.databaseId, databaseUpdated.id), eq(drizzleDb.schemas.restoration.status, "waiting")),
+                with: {
+                    backupStorage: true
+                }
             })
 
 
-            if (backup) {
+            if (activeBackup && activeBackup.status == "waiting") {
                 backupAction = true
 
                 await dbClient
                     .update(drizzleDb.schemas.backup)
                     .set(withUpdatedAt({status: "ongoing"}))
-                    .where(eq(drizzleDb.schemas.backup.id, backup.id));
+                    .where(eq(drizzleDb.schemas.backup.id, activeBackup.id));
             }
 
             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 fileName = backupToRestore?.file
+                const input: StorageInput = {
+                    action: "get",
+                    data: {
+                        path: restoration.backupStorage.path,
+                        signedUrl: true,
+                    },
+                    metadata: {
+                        storageId: restoration.backupStorage.storageChannelId,
+                        fileKind: "backups"
+                    }
+                };
 
-                let data: SafeActionResult<string, ZodString, readonly [], {
-                    _errors?: string[] | undefined;
-                }, readonly [], ServerActionResult<string>, object> | undefined
 
                 try {
+                    const result = await dispatchStorage(input, undefined, restoration.backupStorage.storageChannelId);
 
-                    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 ?? "";
+                    if (result.success) {
+                        urlBackup = result.url ?? "";
                     } 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";
+                        const errorMessage = "Failed to get backup URL";
                         console.error("Restoration failed: ", errorMessage);
-
                         continue;
                     }
                 } catch (err) {
@@ -153,9 +148,48 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
                         .update(drizzleDb.schemas.restoration)
                         .set({status: "failed"})
                         .where(eq(drizzleDb.schemas.restoration.id, restoration.id));
-
                     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"})

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

@@ -1,5 +1,4 @@
 import {NextResponse} from "next/server";
-import {getFileUrlPresignedLocal} from "@/features/upload/private/upload.action";
 import {handleDatabases} from "./helpers";
 import {eventEmitter} from "../../../events/route";
 import * as drizzleDb from "@/db";
@@ -20,13 +19,6 @@ export type Body = {
     databases: databaseAgent[]
 }
 
-// Function to test the get file url presigned local
-export async function GET(request: Request) {
-    const url = await getFileUrlPresignedLocal({fileName: "d4a7fa35-2506-4d01-a612-a8ef2e2cc1c5.dump"})
-    return Response.json({
-        message: url
-    })
-}
 
 export async function POST(
     request: Request,
@@ -38,10 +30,8 @@ export async function POST(
         const lastContact = new Date();
         let message: string
 
-
         if (!isUuidv4(agentId)) {
             message = "agentId is not a valid uuid"
-            console.log(message)
             return NextResponse.json(
                 {error: "agentId is not a valid uuid"},
                 {status: 500}
@@ -54,12 +44,10 @@ export async function POST(
 
         if (!agent) {
             message = "Agent not found"
-            console.log(message)
             return NextResponse.json({error: message}, {status: 404})
         }
         const databasesResponse = await handleDatabases(body, agent, lastContact)
 
-
         await db
             .update(drizzleDb.schemas.agent)
             .set(withUpdatedAt({
@@ -77,7 +65,6 @@ export async function POST(
             },
             databases: databasesResponse
         }
-        console.log(response)
 
         return Response.json(response)
     } catch (error) {

app/api/events/route.ts

@@ -19,7 +19,6 @@ export async function GET(request: Request) {
         new ReadableStream({
             start(controller) {
                 console.log('Stream started');
-
                 const handleModification = (data: any) => {
                     console.log('Modification event triggered:', data);
                     controller.enqueue(`event: modification\n`);
@@ -45,15 +44,4 @@ export async function GET(request: Request) {
             },
         }
     );
-}
-
-// export async function POST(request: Request) {
-//     console.log('POST request received');
-//     const data = await request.json();
-//     console.log('Data received:', data);
-//
-//     // Emit the event to all connected clients
-//     eventEmitter.emit('modification', data);
-//
-//     return new Response('Event sent', {status: 200});
-// }
+}

app/api/files/backups/route.ts

@@ -1,29 +1,47 @@
-import * as fs from "node:fs";
 import {NextResponse} from "next/server";
 import path from "path";
+import type {StorageInput} from "@/features/storages/types";
+import {dispatchStorage} from "@/features/storages/dispatch";
+import {Readable} from "node:stream";
 
 export async function GET(
     request: Request,
-    {params}: { params: Promise<{ fileName: string }> }
 ) {
 
     const {searchParams} = new URL(request.url);
     const token = searchParams.get('token');
     const expires = searchParams.get('expires');
-    const fileName = (await params).fileName
+    const pathFromUrl = searchParams.get('path');
+    const storageId = searchParams.get('storageId');
 
-    const uploadsDir = "private/uploads/files/";
-    const uploadPath = path.join(uploadsDir, fileName);
-
-    const crypto = require('crypto');
-
-    let filePath = null;
-    if (fs.existsSync(uploadPath)) {
-        filePath = uploadPath;
-    } else {
-        return NextResponse.json({error: "File not found"}, {status: 404})
+    if (!pathFromUrl || !storageId) {
+        return NextResponse.json({error: "Missing search params"}, {status: 404})
     }
 
+    const input: StorageInput = {
+        action: "get",
+        data: {
+            path: pathFromUrl,
+            signedUrl: true,
+        },
+        metadata: {
+            storageId: storageId,
+            fileKind: "backups",
+        }
+    };
+
+    console.debug(input);
+
+    const result = await dispatchStorage(input, undefined, storageId);
+
+    if (!result.success) {
+        return NextResponse.json({error: "Enable to get file from privided storage channel, an error occurred !"})
+    }
+
+
+    const fileName = path.basename(pathFromUrl);
+
+    const crypto = require('crypto');
     const expectedToken = crypto.createHash('sha256').update(`${fileName}${expires}`).digest('hex');
     if (token !== expectedToken) {
         return NextResponse.json(
@@ -40,7 +58,15 @@ export async function GET(
         );
     }
 
-    const fileStream = fs.createReadStream(filePath);
+    if (!result.file || !Buffer.isBuffer(result.file)) {
+        return NextResponse.json(
+            {error: "Invalid file payload"},
+            {status: 500}
+        );
+    }
+
+    const fileStream = Readable.from(result.file);
+
     const stream = new ReadableStream({
         start(controller) {
             fileStream.on('data', (chunk) => controller.enqueue(chunk));

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

@@ -0,0 +1,102 @@
+import {NextResponse} from "next/server";
+import {auth} from "@/lib/auth/auth";
+import {headers} from "next/headers";
+import {db} from "@/db";
+import * as drizzleDb from "@/db";
+import {eq} from "drizzle-orm";
+import {StorageInput} from "@/features/storages/types";
+import {dispatchStorage} from "@/features/storages/dispatch";
+import {Readable} from "node:stream";
+
+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});
+
+
+    if (!storageId) {
+        return NextResponse.json({error: "Missing storageId in search params"}, {status: 404})
+    }
+
+
+
+    // 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"});
+    // }
+
+
+    const ext = fileName.split(".").pop()?.toLowerCase();
+    const contentType =
+        ext === "png"
+            ? "image/png"
+            : ext === "jpg" || ext === "jpeg"
+                ? "image/jpeg"
+                : ext === "gif"
+                    ? "image/gif"
+                    : ext === "webp"
+                        ? "image/webp"
+                        : "application/octet-stream";
+
+    try {
+
+        const path = `images/${fileName}`;
+
+        const input: StorageInput = {
+            action: "get",
+            data: {
+                path: path,
+            },
+            metadata: {
+                storageId: storageId,
+                fileKind: "images"
+            }
+        }
+
+        const result = await dispatchStorage(input, undefined, storageId);
+
+        if (!result.file || !Buffer.isBuffer(result.file)) {
+            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 stream = new ReadableStream({
+            start(controller) {
+                fileStream.on('data', (chunk) => controller.enqueue(chunk));
+                fileStream.on('end', () => controller.close());
+                fileStream.on('error', (err) => controller.error(err));
+            },
+        });
+
+        return new NextResponse(stream, {
+            headers: {
+                'Content-Disposition': `inline; filename="${fileName}"`,
+                "Cache-Control": "no-store",
+                "Content-Type": contentType,
+            },
+        });
+
+    } catch (err) {
+        console.error("Error streaming image:", err);
+        return NextResponse.json({error: "Error fetching file"}, {status: 500});
+    }
+}

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/images/[fileName]/route.ts

@@ -1,103 +0,0 @@
-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";
-import fs from "fs/promises";
-
-function nodeStreamToWebStream(nodeStream: stream.Readable) {
-    return new ReadableStream({
-        start(controller) {
-            nodeStream.on("data", chunk => controller.enqueue(chunk));
-            nodeStream.on("end", () => controller.close());
-            nodeStream.on("error", err => controller.error(err));
-        },
-        cancel() {
-            nodeStream.destroy();
-        },
-    });
-}
-
-const privateS3ImageDir = "images/";
-
-
-export async function GET(
-    req: Request,
-    {params}: { params: Promise<{ fileName: string }> }
-) {
-    const fileName = (await params).fileName;
-    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
-        .select()
-        .from(drizzleDb.schemas.setting)
-        .where(eq(drizzleDb.schemas.setting.name, "system"))
-        .limit(1);
-
-    if (!settings) throw new Error("System settings not found.");
-
-    const storageType = settings.storage; // "local" or "s3"
-    const ext = fileName.split(".").pop()?.toLowerCase();
-    const contentType =
-        ext === "png"
-            ? "image/png"
-            : ext === "jpg" || ext === "jpeg"
-                ? "image/jpeg"
-                : ext === "gif"
-                    ? "image/gif"
-                    : ext === "webp"
-                        ? "image/webp"
-                        : "application/octet-stream";
-
-    try {
-        if (storageType === "local") {
-            const filePath = path.join(process.cwd(), "private/uploads/images", fileName);
-
-            try {
-                await fs.access(filePath);
-                const file = await fs.readFile(filePath);
-
-                return new NextResponse(file, {
-                    headers: {
-                        "Content-Type": contentType,
-                        "Cache-Control": "no-store",
-                        "Content-Disposition": `inline; filename="${fileName}"`,
-                    },
-                });
-            } catch {
-                // if not found locally, fallback to S3
-            }
-        }
-
-        const exists = await checkFileExistsInBucket({
-            bucketName: env.S3_BUCKET_NAME!,
-            fileName: `${privateS3ImageDir}${fileName}`,
-        });
-        if (!exists) return NextResponse.json({error: "File not found"}, {status: 404});
-
-        const nodeStream = await getObjectFromClient({
-            bucketName: env.S3_BUCKET_NAME!,
-            fileName: `${privateS3ImageDir}${fileName}`,
-        });
-        const webStream = nodeStreamToWebStream(nodeStream);
-
-        return new NextResponse(webStream, {
-            headers: {
-                "Content-Type": contentType,
-                "Cache-Control": "no-store",
-                "Content-Disposition": `inline; filename="${fileName}"`,
-            },
-        });
-    } catch (err) {
-        console.error("Error streaming image:", err);
-        return NextResponse.json({error: "Error fetching file"}, {status: 500});
-    }
-}

app/providers.tsx

@@ -6,6 +6,7 @@ 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<{}>;
@@ -21,8 +22,8 @@ export const Providers = (props: ProviderProps) => {
             >
                 <ThemeMetaUpdaterRoot/>
                 <QueryClientProvider client={queryClient}>
-                    <Toaster/>
-                    {props.children}
+                        <Toaster/>
+                        {props.children}
                 </QueryClientProvider>
             </ThemeProvider>
         </Suspense>

docker-compose.prod.yml

@@ -7,7 +7,7 @@ services:
 #      context: .
 #      dockerfile: docker/dockerfile/Dockerfile
 #      target: prod
-    image: solucetechnologies/portabase:1.1.4-rc.2
+    image: solucetechnologies/portabase:latest
     ports:
       - '8887:80'
     environment:

docker-compose.yml

@@ -2,7 +2,7 @@ name: portabase-dev
 
 services:
   db:
-    image: postgres:16-alpine
+    image: postgres:17-alpine
     ports:
       - "5433:5432"
     volumes:

docker/dockerfile/Dockerfile

@@ -1,45 +1,37 @@
 FROM node:22-alpine AS base
 
-ENV YARN_VERSION=4.9.1
-
 RUN apk add --update --no-cache \
-    tzdata \
-    build-base \
     libc6-compat \
     openssl \
-    make \
+    tzdata
+
+FROM base AS build-env
+
+RUN apk add --update --no-cache \
+    build-base \
     g++ \
-    jpeg-dev \
-    cairo-dev \
-    giflib-dev \
-    pango-dev \
+    make \
     libtool \
     autoconf \
-    automake \
-    libpng
+    automake
 
-RUN corepack enable && corepack prepare yarn@${YARN_VERSION}
-RUN yarn set version ${YARN_VERSION}
+RUN corepack enable && corepack prepare pnpm@latest --activate
 
 
-FROM base AS deps
+
+
+FROM build-env AS deps
 
 WORKDIR /app
 
-COPY .yarn ./.yarn
-COPY .yarnrc.yml ./
-COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+
+RUN pnpm i --frozen-lockfile
 
 
-RUN \
-  if [ -f yarn.lock ]; then yarn; \
-  elif [ -f package-lock.json ]; then npm ci; \
-  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
 
 
-FROM base AS dev
+FROM build-env AS dev
 
 WORKDIR /app
 
@@ -52,8 +44,11 @@ RUN chmod +x /app/docker/entrypoints/app-dev-entrypoint.sh
 ENTRYPOINT ["sh","/app/docker/entrypoints/app-dev-entrypoint.sh"]
 
 
-# Rebuild the source code only when needed
-FROM base AS builder
+
+
+
+
+FROM build-env AS builder
 
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
@@ -61,12 +56,11 @@ COPY . .
 
 ENV NEXT_TELEMETRY_DISABLED=1
 
-RUN \
-  if [ -f yarn.lock ]; then yarn run build; \
-  elif [ -f package-lock.json ]; then npm run build; \
-  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
+RUN pnpm run build
+
+
+
+
 
 
 FROM base AS prod
@@ -109,5 +103,3 @@ ENV HOSTNAME="0.0.0.0"
 USER nextjs
 
 ENTRYPOINT ["sh","/app/app-prod-entrypoint.sh"]
-
-

docker/entrypoints/app-dev-entrypoint.sh

@@ -3,10 +3,10 @@
 set -euo pipefail
 
 echo "▶ Running Drizzle codegen..."
-npx drizzle-kit generate
+pnpm drizzle-kit generate
 
 echo "▶ Applying migrations..."
-npx drizzle-kit migrate
+pnpm drizzle-kit migrate
 
 echo "▶ Starting Next.js dev server..."
-exec npm run dev
+exec pnpm dev

next.config.ts

@@ -43,8 +43,10 @@ const nextConfig: NextConfig = {
     },
     experimental: {
         serverActions: {
-            bodySizeLimit: "50mb",
+            bodySizeLimit: "10gb",
         },
+        proxyClientMaxBodySize: '10gb',
+
     },
     async headers() {
         return [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portabase",
-  "version": "1.1.6",
+  "version": "1.2.4-rc.5",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack -p 8887",
@@ -62,6 +62,7 @@
     "drizzle-orm": "^0.43.1",
     "drizzle-zod": "^0.7.1",
     "embla-carousel-react": "^8.6.0",
+    "googleapis": "^170.1.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.553.0",
     "minio": "^8.0.5",
@@ -74,6 +75,7 @@
     "nodemailer": "^7.0.3",
     "npm-check-updates": "^18.0.1",
     "pg": "^8.16.0",
+    "prettier": "^3.8.0",
     "react": "^19.2.0",
     "react-day-picker": "9.7.0",
     "react-dom": "^19.2.0",
@@ -85,9 +87,11 @@
     "react-twc": "^1.4.2",
     "react-use-measure": "^2.1.7",
     "recharts": "^2.15.3",
+    "sharp": "^0.34.5",
     "socket.io": "^4.8.1",
     "socket.io-client": "^4.8.1",
     "sonner": "^2.0.3",
+    "swiper": "^12.0.3",
     "tailwind-merge": "^3.3.0",
     "uuid": "^11.1.0",
     "vaul": "^1.1.2",
@@ -97,6 +101,7 @@
   "devDependencies": {
     "@iconify/react": "^6.0.0",
     "@react-email/preview-server": "4.3.2",
+    "@react-email/render": "^2.0.1",
     "@tailwindcss/postcss": "^4.1.7",
     "@types/eslint-plugin-tailwindcss": "^3.17.0",
     "@types/node": "^22.15.18",
@@ -111,6 +116,7 @@
     "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",
@@ -118,5 +124,5 @@
     "typescript": "^5.8.3",
     "zenstack": "2.14.2"
   },
-  "packageManager": "yarn@4.9.1"
+  "packageManager": "pnpm@10.28.1+sha512.7d7dbbca9e99447b7c3bf7a73286afaaf6be99251eb9498baefa7d406892f67b879adb3a1d7e687fc4ccc1a388c7175fbaae567a26ab44d1067b54fcb0d6a316"
 }

pnpm-workspace.yaml

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

portabase.config.ts

@@ -1,9 +1,9 @@
-import {Chrome, KeyRound, LucideIcon} from "lucide-react";
 
 
 export interface AuthProviderConfig {
     id: "google" | "github" | "credential";
-    icon: LucideIcon;
+    isActive: boolean;
+    icon: string;
     isManual?: boolean;
     credentials?: {
         clientId: string;
@@ -80,27 +80,27 @@ export const PORTABASE_DEFAULT_SETTINGS = {
 export const SUPPORTED_PROVIDERS: AuthProviderConfig[] = [
     {
         id: "google",
-        icon: Chrome,
+        icon: "hugeicons:chrome",
+        isActive: Boolean(process.env.AUTH_GOOGLE_METHOD),
         // isManual: true,
         credentials: {
-            clientId: process.env.GOOGLE_CLIENT_ID || "",
-            clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
+            clientId: process.env.AUTH_GOOGLE_ID || "",
+            clientSecret: process.env.AUTH_GOOGLE_SECRET || "",
         },
     },
-    /*
     {
         id: "github",
-        name: "GitHub",
-        icon: Github,
-        description: "Connexion via GitHub",
+        icon: "iconoir:github",
+        isActive: Boolean(process.env.AUTH_GITHUB_METHOD),
         credentials: {
-            clientId: process.env.GITHUB_CLIENT_ID || "",
-            clientSecret: process.env.GITHUB_CLIENT_SECRET || "",
+            clientId: process.env.AUTH_GITHUB_ID || "",
+            clientSecret: process.env.AUTH_GITHUB_SECRET || "",
         },
-    },*/
+    },
     {
         id: "credential",
-        icon: KeyRound,
+        isActive: true,
+        icon: "proicons:key",
         isManual: true,
         credentials: {
             clientId: "",

proxy.ts

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

release

@@ -0,0 +1,95 @@
+#!/bin/bash
+
+set -e
+
+if [ -z "$1" ]; then
+  echo "Usage: ./release <version>"
+  echo "Example: ./release v1.0.0"
+  exit 1
+fi
+
+VERSION=$1
+CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD)
+
+if [ "$CURRENT_BRANCH" = "main" ]; then
+  if [[ ! "$VERSION" =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+    echo "Error: On 'main' branch, only release tags (X.Y.Z) are allowed."
+    exit 1
+  fi
+else
+  if [[ ! "$VERSION" =~ ^[0-9]+\.[0-9]+\.[0-9]+-rc\.[0-9]+$ ]]; then
+    echo "Error: On branch '$CURRENT_BRANCH', only RC tags matching X.Y.Z-rc.W are allowed (e.g., 1.0.0-rc.1)."
+    exit 1
+  fi
+fi
+
+CLEAN_VERSION=${VERSION#v}
+CURRENT_DATE=$(date +%Y-%m-%d)
+
+echo "Preparing release $VERSION..."
+
+
+# package.json
+if [ -f package.json ]; then
+  echo "Updating package.json..."
+  if sed --version >/dev/null 2>&1; then
+    sed -i "s/\"version\": \".*\"/\"version\": \"$CLEAN_VERSION\"/" package.json
+  else
+    sed -i '' "s/\"version\": \".*\"/\"version\": \"$CLEAN_VERSION\"/" package.json
+  fi
+fi
+
+# pyproject.toml
+if [ -f pyproject.toml ]; then
+  echo "Updating pyproject.toml..."
+  if sed --version >/dev/null 2>&1; then
+    sed -i "s/^version = \".*\"/version = \"$CLEAN_VERSION\"/" pyproject.toml
+  else
+    sed -i '' "s/^version = \".*\"/version = \"$CLEAN_VERSION\"/" pyproject.toml
+  fi
+fi
+
+# Cargo.toml
+if [ -f Cargo.toml ]; then
+  echo "Updating Cargo.toml..."
+  if sed --version >/dev/null 2>&1; then
+    sed -i "s/^version = \".*\"/version = \"$CLEAN_VERSION\"/" Cargo.toml
+  else
+    sed -i '' "s/^version = \".*\"/version = \"$CLEAN_VERSION\"/" Cargo.toml
+  fi
+fi
+
+# CITATION.cff
+if [ -f CITATION.cff ]; then
+  echo "Updating CITATION.cff..."
+  if sed --version >/dev/null 2>&1; then
+    sed -i "s/^version: .*/version: $CLEAN_VERSION/" CITATION.cff
+    sed -i "s/^date-released: .*/date-released: \"$CURRENT_DATE\"/" CITATION.cff
+  else
+    sed -i '' "s/^version: .*/version: $CLEAN_VERSION/" CITATION.cff
+    sed -i '' "s/^date-released: .*/date-released: \"$CURRENT_DATE\"/" CITATION.cff
+  fi
+fi
+
+git add .
+
+if ! git diff-index --quiet HEAD --; then
+  echo "Committing changes..."
+  git commit -m "chore(release): $VERSION"
+else
+  echo "No changes to commit. Proceeding to tag..."
+fi
+
+if git rev-parse "$VERSION" >/dev/null 2>&1; then
+    echo "Tag $VERSION already exists. Aborting."
+    exit 1
+fi
+
+echo "Creating tag $VERSION..."
+git tag -a "$VERSION" -m "Release $VERSION"
+
+echo "Pushing changes and tags to remote..."
+git push
+git push origin "$VERSION"
+
+echo "Successfully released $VERSION!"

src/components/emails/email-create-user.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import EmailLayout from "./email-layout";
+import {Heading, Text, Section, Button} from "@react-email/components";
+import {getServerUrl} from "@/utils/get-server-url";
+import {env} from "@/env.mjs";
+
+interface EmailCreateUserProps {
+    email: string;
+    password: string;
+}
+
+export const EmailCreateUser = ({email, password}: EmailCreateUserProps) => {
+    const baseUrl = getServerUrl();
+
+
+    return (
+        <EmailLayout preview="Portabase Dashboard">
+            <Heading className="mx-0 my-[30px] p-0 text-center font-normal text-[24px] text-black">
+                Your account on {env.PROJECT_NAME} has just been created!
+            </Heading>
+
+            <Text className="text-[14px] text-black leading-[24px]">
+                <strong>Email: </strong>{email}
+            </Text>
+
+            <Text className="text-[14px] text-black leading-[24px]">
+                <strong>Default password: </strong>{password}
+            </Text>
+
+            <Section className="mt-[32px] mb-[32px] text-center">
+                <Button
+                    className="rounded bg-[#000000] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline"
+                    href={baseUrl}
+                >
+                    Sign in
+                </Button>
+            </Section>
+        </EmailLayout>
+    );
+};
+
+export default EmailCreateUser;

src/components/emails/email-layout.tsx

@@ -10,11 +10,19 @@ export const EmailLayout = ({ children, preview }: PropsWithChildren<{ preview?:
         <Tailwind>
             <Html>
                 <Head />
-                {preview ? <Preview>{preview}</Preview> : <Preview>Please check your mails</Preview>}
-                <Body className="bg-gray-100 py-4" style={{ fontFamily: "Arial, sans-serif" }}>
-                    <Container className="bg-white border border-gray-200 p-12">
-                        <Img src={`${baseUrl}/images/logo-dark.png`} width="200" height="auto" alt="Logo" />
-                        <Section>{children}</Section>
+                <Body className="mx-auto my-auto bg-white px-2 font-sans">
+                    {preview ? <Preview>{preview}</Preview> : <Preview>Please check your mails</Preview>}
+                    <Container className="mx-auto my-[40px] max-w-[465px] rounded border border-[#eaeaea] border-solid p-[20px]">
+                        <Section className="mt-[32px]">
+                            <Img
+                                src={`${baseUrl}/images/logo.png`}
+                                width="50"
+                                height="auto"
+                                alt="Logo"
+                                className="mx-auto my-0"
+                            />
+                        </Section>
+                        {children}
                     </Container>
                 </Body>
             </Html>

src/components/ui/calendar.tsx

@@ -46,7 +46,9 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: R
                 ...classNames,
             }}
             components={{
+                // @ts-ignore
                 IconLeft: ({ className, children: _children, ...props }) => <ChevronLeftIcon className={cn("size-4", className)} {...props} />,
+                // @ts-ignore
                 IconRight: ({ className, children: _children, ...props }) => <ChevronRightIcon className={cn("size-4", className)} {...props} />,
             }}
             {...props}

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/wrappers/auth/auth-logo-section.tsx

@@ -41,7 +41,7 @@ export const AuthLogoSection = () => {
 
                 />
             )}
-            <span className="absolute bottom-10 right-5 text-sm text-muted-foreground" style={style}>
+            <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/login-form/login-form.tsx

@@ -3,7 +3,6 @@
 import {useEffect, useState} from "react";
 import {useMutation} from "@tanstack/react-query";
 import {toast} from "sonner";
-
 import {FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm} from "@/components/ui/form";
 import {Input} from "@/components/ui/input";
 import {Form} from "@/components/ui/form";
@@ -63,7 +62,6 @@ export const LoginForm = (props: loginFormProps) => {
                         toast.success("Login success");
                     },
                     onError: (error) => {
-                        console.log(error);
                         toast.error(error.error.message);
                     },
                 }

src/components/wrappers/auth/login/reset-password-form/reset-password-form.action.ts

@@ -28,7 +28,6 @@ export const resetPasswordAction = action
             }
 
             const user = await (await auth.$context).internalAdapter.findUserById(verification.value);
-            console.log(user)
             if (!user) {
                 return {
                     success: false,
@@ -39,28 +38,6 @@ export const resetPasswordAction = action
                 };
             }
 
-            const hashedPassword = await (await auth.$context).password.hash(parsedInput.schema.password);
-            console.log(hashedPassword)
-            console.log("ok")
-            // await (await auth.$context).internalAdapter.updatePassword(user.id, hashedPassword);
-            console.log("ici")
-            // await (await auth.$context).internalAdapter.deleteSessions(user.id);
-            // console.log("ici2")
-            // await (await auth.$context).internalAdapter.deleteVerificationValue(verification.id);
-            // console.log("ici3");
-            //
-            // (await auth.$context).internalAdapter.updateUser(user.id, {
-            //     lastChangedPasswordAt: new Date(),
-            // });
-
-            // await auth.api.resetPassword({
-            //     headers: await headers(),
-            //     body: {
-            //         newPassword: parsedInput.schema.password,
-            //         token: parsedInput.token,
-            //     },
-            // });
-
             await (
                 await auth.$context
             ).internalAdapter.updateUser(user.id, {

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

@@ -44,7 +44,6 @@ export const ResetPasswordForm = (props: ResetPasswordFormProps) => {
             setTimeout(() => router.push("/"), 1400);
         },
         onError: (error: BetterAuthError) => {
-            console.log(error)
             toast.error("An error occurred while resetting password");
         },
     });

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

@@ -1,21 +1,25 @@
 "use client";
 
 import {useRouter} from "next/navigation";
-import {Info} from "lucide-react";
 import {useMutation} from "@tanstack/react-query";
 import {toast} from "sonner";
-
-import {Card, CardContent, CardHeader} from "@/components/ui/card";
-import {FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm} from "@/components/ui/form";
-import {Input} from "@/components/ui/input";
+import {CardContent, CardHeader} from "@/components/ui/card";
 import {Form} from "@/components/ui/form";
-import {Button} from "@/components/ui/button";
 import {TooltipProvider, TooltipTrigger, Tooltip, TooltipContent} from "@/components/ui/tooltip";
 import {RegisterSchema, RegisterType} from "@/components/wrappers/auth/register/register-form/register-form.schema";
-import {PasswordInput} from "@/components/ui/password-input";
 import {signUp} from "@/lib/auth/auth-client";
-import Link from "next/link";
+import {useZodForm} from "@/components/ui/form";
 import {CardAuth} from "@/features/layout/card-auth";
+import {FormField} from "@/components/ui/form";
+import {FormItem} from "@/components/ui/form";
+import {FormLabel} from "@/components/ui/form";
+import {FormControl} from "@/components/ui/form";
+import {FormMessage} from "@/components/ui/form";
+import {Input} from "@/components/ui/input";
+import {PasswordInput} from "@/components/ui/password-input";
+import {Button} from "@/components/ui/button";
+import Link from "next/link";
+import {Info} from "lucide-react";
 
 export type registerFormProps = {
     defaultValues?: RegisterType;
@@ -26,9 +30,11 @@ export const RegisterForm = (props: registerFormProps) => {
     const form = useZodForm({
         schema: RegisterSchema,
     });
+
     const router = useRouter();
     const mutation = useMutation({
         mutationFn: async (values: RegisterType) => {
+            // @ts-ignore
             await signUp.email(values, {
                 onSuccess: () => {
                     toast.success(`Account successfully created`);
@@ -36,7 +42,6 @@ export const RegisterForm = (props: registerFormProps) => {
                     router.push(`/login`);
                 },
                 onError: (error) => {
-                    console.log(error);
                     toast.error(error.error.message);
                 },
             });

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

@@ -6,7 +6,7 @@ import {Form, FormControl, FormField, FormItem, FormLabel, useZodForm} from "@/c
 import {PasswordStrengthInput} from "@/components/ui/password-input-indicator";
 import {ResetPasswordSchema, ResetPasswordType} from "@/components/wrappers/auth/reset-password/reset-password-schema";
 import {PasswordInput} from "@/components/ui/password-input";
-import {Card, CardContent, CardHeader} from "@/components/ui/card";
+import {CardContent, CardHeader} from "@/components/ui/card";
 import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
 import {authClient} from "@/lib/auth/auth-client";
 import {toast} from "sonner";
@@ -31,7 +31,6 @@ export const ResetPasswordForm = ({token}: ResetPasswordFormProps) => {
                 token,
             }, {
                 onSuccess: (response) => {
-                    console.log(response);
                     toast.success("Password changed successfully.");
                     setTimeout(() => router.push("/"), 1000);
                 },

src/components/wrappers/auth/social-buttons.tsx

@@ -5,9 +5,12 @@ import { Button } from "@/components/ui/button";
 import { authClient } from "@/lib/auth/auth-client";
 import { Loader2 } from "lucide-react";
 import { toast } from "sonner";
-import {SUPPORTED_PROVIDERS} from "../../../../portabase.config";
+import {AuthProviderConfig} from "../../../../portabase.config";
+import {Icon} from "@iconify/react";
+
+export function SocialAuthButtons({ providers }: { providers: AuthProviderConfig[] }) {
+    const socialProviders = providers.filter(p => p.isActive && !p.isManual);
 
-export function SocialAuthButtons() {
     const [isLoading, setIsLoading] = useState<string | null>(null);
 
     const handleSocialSignIn = async (providerId: string) => {
@@ -30,16 +33,15 @@ export function SocialAuthButtons() {
         }
     };
 
-    const socialProviders = SUPPORTED_PROVIDERS.filter((p) => !p.isManual);
-
     if (socialProviders.length === 0) return null;
 
-
     return (
         <div className="flex flex-col gap-2 w-full">
             {socialProviders.map((provider) => (
                 <Button key={provider.id} variant="outline" className="w-full gap-2" onClick={() => handleSocialSignIn(provider.id)} disabled={!!isLoading}>
-                    {isLoading === provider.id ? <Loader2 className="h-4 w-4 animate-spin" /> : <provider.icon className="h-4 w-4" />}
+                    {isLoading === provider.id ? <Loader2 className="h-4 w-4 animate-spin" /> :
+                        <Icon icon={provider.icon} className="h-4 w-4"/>
+                     }
                     <span>{PROVIDERS_TEXT[provider.id].title}</span>
                 </Button>
             ))}

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

@@ -1,48 +1,3 @@
-// "use client";
-//
-// import { Button } from "@/components/ui/button";
-// import { useState } from "react";
-// import { Loader2 } from "lucide-react";
-//
-// export type VariantButton = {
-//     secondary: string;
-//     default: string;
-//     outline: string;
-//     ghost: string;
-//     link: string;
-//     destructive: string;
-// };
-//
-// export type ButtonWithConfirmProps = {
-//     icon?: any;
-//     text: string;
-//     variant?: keyof VariantButton;
-//     className?: string;
-//     onClick?: () => void;
-//     isPending?: boolean;
-// };
-//
-// export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
-//     const [isConfirming, setIsConfirming] = useState(false);
-//
-//     return (
-//         <Button
-//             onClick={() => {
-//                 if (isConfirming && props.onClick) {
-//                     props.onClick();
-//                 } else {
-//                     setIsConfirming(true);
-//                 }
-//             }}
-//             variant={props.variant ? props.variant : "default"}
-//             className={props.className}
-//         >
-//             {props.isPending && <Loader2 className="animate-spin mr-4" size={16} />}
-//             {isConfirming ? "Are you sure ?" : `${props.text}`}
-//             <>{props.icon ? props.icon : null}</>
-//         </Button>
-//     );
-// };
 "use client"
 import {Button, ButtonVariantsProps} from "@/components/ui/button";
 import {useState} from "react";
@@ -57,6 +12,7 @@ export type ButtonWithConfirmProps = {
     button: {
         main: {
             className?: string;
+            type?: "button" | "submit" | "reset" | undefined;
             text?: string;
             icon?: any;
             variant?: ButtonVariantsProps["variant"];
@@ -100,6 +56,7 @@ export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
                             )}
                             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"}
@@ -108,7 +65,8 @@ export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
                                   if (!props.button.main.disabled) setIsConfirming(true);
                               }}
                           >
-                            {props.button.main.icon}
+                              {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>

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

@@ -109,7 +109,6 @@ export const ButtonWithLoading = ({
             {isPending && <Loader2 className="mr-2 animate-spin" size={16} />}
             {children && children}
             <>{icon ? icon : null}</>
-            {/*{icon && <span className="ml-2">{icon}</span>}*/}
         </Button>
     );
 };

src/components/wrappers/common/combobox.tsx

@@ -43,13 +43,17 @@ export function ComboBox<T = string>(props: ComboBoxProps<T>) {
                 <PopoverTrigger asChild>
                     {sideBar ? (
                         <SidebarMenuButton>
+                            <label className="max-w-[170px] truncate">
                             {value ? choices.find((c) => c.value === value)?.label : "Select choice..."}
-                            <ChevronDown className="ml-auto"/>
+                            </label>
+                                <ChevronDown className="ml-auto"/>
                         </SidebarMenuButton>
                     ) : (
                         <Button variant="outline" role="combobox" aria-expanded={open}
                                 className="w-full justify-between">
-                            {value ? choices.find((c) => c.value === value)?.label : "Select choice..."}
+                            <label className="max-w-[170px] truncate">
+                                {value ? choices.find((c) => c.value === value)?.label : "Select choice..."}
+                            </label>
                             <ChevronDown className="opacity-50"/>
                         </Button>
                     )}
@@ -59,7 +63,7 @@ export function ComboBox<T = string>(props: ComboBoxProps<T>) {
                     className="p-0"
                     align="start"
                     sideOffset={4}
-                    style={{ width: 'var(--radix-popover-trigger-width)' }}
+                    style={{width: 'var(--radix-popover-trigger-width)'}}
 
                 >
                     <Command>
@@ -80,7 +84,9 @@ export function ComboBox<T = string>(props: ComboBoxProps<T>) {
                                             }
                                         }}
                                     >
-                                        {choice.label}
+                                        <label className="max-w-[170px] truncate">
+                                            {choice.label}
+                                        </label>
                                         <Check
                                             className={cn("ml-auto", value === choice.value ? "opacity-100" : "opacity-0")}/>
                                     </CommandItem>

src/components/wrappers/common/connection-circle.tsx

@@ -1,31 +0,0 @@
-import {cn} from "@/lib/utils";
-
-export type ConnectionCircleProps = {
-    date?: Date | null;
-};
-
-export const ConnectionCircle = ({date}: ConnectionCircleProps) => {
-    let style = "bg-gray-300 border-gray-400";
-
-    if (date instanceof Date && !isNaN(date.getTime())) {
-        const now = Date.now();
-        const timestamp = date.getTime();
-        const interval_seconds = (now - timestamp) / 1000;
-
-        console.log({now, timestamp, interval_seconds});
-
-        if (interval_seconds < 55) {
-            style = "bg-green-400 border-green-600";
-        } else if (interval_seconds <= 60) {
-            style = "bg-orange-400 border-orange-600";
-        } else {
-            style = "bg-red-400 border-red-600";
-        }
-    } else {
-        console.warn("Invalid date passed to ConnectionCircle:", date);
-    }
-
-    console.log(style);
-
-    return <div className={cn("w-5 h-5 rounded-full border-4", style)}/>;
-};

src/components/wrappers/common/connection-indicator.tsx

@@ -0,0 +1,46 @@
+import {cn} from "@/lib/utils";
+
+export type ConnectionIndicatorProps = {
+    date?: Date | null;
+};
+
+export const ConnectionIndicator = ({date}: ConnectionIndicatorProps) => {
+    let style = "bg-gray-300";
+
+    if (date instanceof Date && !isNaN(date.getTime())) {
+        const intervalSeconds = (Date.now() - date.getTime()) / 1000;
+
+        if (intervalSeconds < 55) {
+            style = "bg-green-500";
+        } else if (intervalSeconds <= 60) {
+            style = "bg-orange-400";
+        } else {
+            style = "bg-red-500";
+        }
+    }
+
+    return (
+        <div className="relative w-3 h-3">
+
+                <span
+                    className={cn(
+                        "absolute -inset-0.25 rounded-full opacity-60 animate-ping",
+                        style
+                    )}
+                    style={{
+                        animationDuration: "2s",
+                    }}
+                />
+
+            <div
+                className={cn(
+                    "relative w-3 h-3 rounded-full shadow-sm animate-pulse",
+                    style
+                )}
+                style={{
+                    animationDuration: "2s",
+                }}
+            />
+        </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} from "react";
 
 type EmptyStatePlaceholderProps = {
     url?: string;
     onClick?: () => void;
     text: string;
     className?: string;
-};
+} & React.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

@@ -9,7 +9,7 @@ export const GitHubStarsButtonCustom = () => {
     const [stars, setStars] = React.useState(0);
     const [isLoading, setIsLoading] = React.useState(true);
 
-    const username = "Soluce-Technologies"
+    const username = "Portabase"
     const repo = "portabase"
 
 

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/dashboard/admin/channels/channel/channel-add-edit-modal.tsx

@@ -0,0 +1,149 @@
+"use client"
+
+import {Pencil, Plus} from "lucide-react";
+
+import {
+    Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger
+} from "@/components/ui/dialog";
+import {Button} from "@/components/ui/button";
+import {OrganizationWithMembers} from "@/db/schema/03_organization";
+import {NotificationChannelWith} from "@/db/schema/09_notification-channel";
+import {useIsMobile} from "@/hooks/use-mobile";
+import {useEffect, useState} from "react";
+import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
+import {StorageChannelWith} from "@/db/schema/12_storage-channel";
+import {ChannelForm} from "@/components/wrappers/dashboard/admin/channels/channel/channel-form/channel-form";
+import {ChannelKind, getChannelTextBasedOnKind} from "@/components/wrappers/dashboard/admin/channels/helpers/common";
+import {
+    ChannelOrganisationForm
+} from "@/components/wrappers/dashboard/admin/channels/organization/channels-organization-form";
+
+type ChannelAddModalProps = {
+    channel?: NotificationChannelWith | StorageChannelWith
+    organization?: OrganizationWithMembers;
+    open?: boolean;
+    onOpenChangeAction?: (open: boolean) => void;
+    adminView?: boolean;
+    organizations?: OrganizationWithMembers[]
+    trigger?: boolean;
+    kind: ChannelKind;
+}
+
+
+export const ChannelAddEditModal = ({
+                                        organization,
+                                        channel,
+                                        open = false,
+                                        onOpenChangeAction,
+                                        adminView,
+                                        organizations,
+                                        trigger = true,
+                                        kind
+                                    }: ChannelAddModalProps) => {
+    const isMobile = useIsMobile();
+    const [openInternal, setOpen] = useState(open);
+    const isLocalSystem = channel?.provider == "local";
+
+    const isCreate = !Boolean(channel);
+
+    useEffect(() => {
+        setOpen(open);
+    }, [open])
+
+
+    const channelText = getChannelTextBasedOnKind(kind)
+
+
+    return (
+        <Dialog open={openInternal} onOpenChange={(state) => {
+            onOpenChangeAction?.(state);
+            setOpen(state);
+        }}>
+            {trigger && (
+                <DialogTrigger asChild>
+                    {isCreate ?
+                        <Button>
+                            <Plus/>{!isMobile && `Add ${channelText} channel`}
+                        </Button>
+                        :
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                        >
+                            <Pencil className="h-4 w-4"/>
+                        </Button>
+                    }
+                </DialogTrigger>
+            )}
+            <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
+                <DialogHeader>
+                    <DialogTitle> {isCreate ? "Add" : "Edit"} {channelText} Channel</DialogTitle>
+                    <DialogDescription>
+                        Configure your {channelText.toLowerCase()} channel preferences.
+                    </DialogDescription>
+                </DialogHeader>
+                <div>
+                    <>
+                        {!isLocalSystem ? (
+                                <>
+                                    {adminView ?
+                                        <Tabs className="flex flex-col flex-1" defaultValue="configuration">
+                                            <TabsList className="grid w-full grid-cols-2">
+                                                <TabsTrigger value="configuration">Configuration</TabsTrigger>
+                                                <TabsTrigger value="organizations">Organizations</TabsTrigger>
+                                            </TabsList>
+                                            <TabsContent className="h-full justify-between" value="configuration">
+                                                <ChannelForm
+                                                    kind={kind}
+                                                    adminView={adminView}
+                                                    defaultValues={channel}
+                                                    organization={organization}
+                                                    onSuccessAction={() => {
+                                                        onOpenChangeAction?.(false)
+                                                        setOpen(false);
+                                                    }}
+                                                />
+                                            </TabsContent>
+                                            <TabsContent className="h-full justify-between" value="organizations">
+                                                <ChannelOrganisationForm
+                                                    defaultValues={channel}
+                                                    kind={kind}
+                                                    organizations={organizations}
+                                                />
+                                            </TabsContent>
+                                        </Tabs>
+                                        :
+                                        <>
+                                            <ChannelForm
+                                                kind={kind}
+                                                adminView={adminView}
+                                                defaultValues={channel}
+                                                organization={organization}
+                                                onSuccessAction={() => {
+                                                    onOpenChangeAction?.(false)
+                                                    setOpen(false);
+                                                }}
+                                            />
+                                        </>
+                                    }
+                                </>
+                            )
+
+                            :
+
+                            <>
+                                <ChannelOrganisationForm
+                                    defaultValues={channel}
+                                    kind={kind}
+                                    organizations={organizations}
+                                />
+                            </>
+                        }
+
+
+                    </>
+                </div>
+            </DialogContent>
+        </Dialog>
+    )
+}

src/components/wrappers/dashboard/admin/channels/channel/channel-card/button-delete-channel.tsx

@@ -5,20 +5,31 @@ import {useRouter} from "next/navigation";
 import {Trash2} from "lucide-react";
 import {
     removeNotificationChannelAction,
-} from "@/components/wrappers/dashboard/common/notifier/notifier-form/notifier-form.action";
+} from "@/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/notifications/action";
 import {toast} from "sonner";
+import {ChannelKind, getChannelTextBasedOnKind} from "@/components/wrappers/dashboard/admin/channels/helpers/common";
+import {
+    removeStorageChannelAction
+} from "@/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/storages/action";
 
-export type DeleteNotifierButtonProps = {
-    notificationChannelId: string;
+export type DeleteChannelButtonProps = {
+    channelId: string;
+    kind: ChannelKind;
     organizationId?: string;
 };
 
-export const DeleteNotifierButton = ({notificationChannelId, organizationId}: DeleteNotifierButtonProps) => {
+export const DeleteChannelButton = ({channelId, organizationId, kind}: DeleteChannelButtonProps) => {
     const router = useRouter();
+    const channelText = getChannelTextBasedOnKind(kind)
+
 
     const mutation = useMutation({
         mutationFn: async () => {
-            const result = await removeNotificationChannelAction({organizationId, notificationChannelId})
+
+            const result = kind === "notification" ? await removeNotificationChannelAction({
+                organizationId,
+                notificationChannelId: channelId
+            }) : await removeStorageChannelAction({organizationId, id: channelId})
             const inner = result?.data;
 
             if (inner?.success) {
@@ -32,8 +43,8 @@ export const DeleteNotifierButton = ({notificationChannelId, organizationId}: De
 
     return (
         <ButtonWithConfirm
-            title="Delete Notifier"
-            description="Are you sure you want to remove this notifier ? This action cannot be undone and will delete all alert policies related to this channel !"
+            title={`Delete ${channelText.toLowerCase()} channel`}
+            description={`Are you sure you want to remove this ${channelText.toLowerCase()} channel ? This action cannot be undone and will delete all alert policies related to this channel !`}
             button={{
                 main: {
                     size: "icon",

src/components/wrappers/dashboard/admin/channels/channel/channel-card/button-edit-channel.tsx

@@ -0,0 +1,94 @@
+"use client";
+import {useMutation} from "@tanstack/react-query";
+import {useRouter} from "next/navigation";
+import {NotificationChannelWith} from "@/db/schema/09_notification-channel";
+import {Switch} from "@/components/ui/switch";
+import {toast} from "sonner";
+import {useState} from "react";
+import {OrganizationWithMembers} from "@/db/schema/03_organization";
+import {StorageChannelWith} from "@/db/schema/12_storage-channel";
+import {ChannelKind} from "@/components/wrappers/dashboard/admin/channels/helpers/common";
+import {
+    updateNotificationChannelAction
+} from "@/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/notifications/action";
+import {ChannelAddEditModal} from "@/components/wrappers/dashboard/admin/channels/channel/channel-add-edit-modal";
+import {
+    updateStorageChannelAction
+} from "@/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/storages/action";
+
+export type EditChannelButtonProps = {
+    channel: NotificationChannelWith | StorageChannelWith;
+    organization?: OrganizationWithMembers;
+    organizations?: OrganizationWithMembers[];
+    adminView?: boolean;
+    kind: ChannelKind;
+};
+
+export const EditChannelButton = ({
+                                      organizations,
+                                      adminView = false,
+                                      channel,
+                                      organization,
+                                      kind
+                                  }: EditChannelButtonProps) => {
+    const router = useRouter();
+    const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+    const isLocalSystem = channel.provider == "local";
+
+
+    const mutation = useMutation({
+        mutationFn: async (value: boolean) => {
+
+
+            const payload = {
+                data: {
+                    name: channel.name,
+                    provider: channel.provider,
+                    config: channel.config as Record<string, any>,
+                    enabled: value
+                },
+                id: channel.id
+            };
+
+            let result: any;
+            if (kind == "notification") {
+                // @ts-ignore
+                result = await updateNotificationChannelAction(payload)
+            } else if (kind == "storage") {
+                // @ts-ignore
+                result = await updateStorageChannelAction(payload)
+            } else {
+                toast.error("An error occurred while updating storage channel")
+                return;
+            }
+            const inner = result?.data;
+
+            if (inner?.success) {
+                toast.success(inner.actionSuccess?.message);
+                router.refresh();
+            } else {
+                toast.error(inner?.actionError?.message);
+            }
+        },
+    });
+
+    return (
+        <>
+
+            {!isLocalSystem && (
+                <Switch checked={channel.enabled} onCheckedChange={async () => {
+                    await mutation.mutateAsync(!channel.enabled)
+                }}/>
+            )}
+            <ChannelAddEditModal
+                kind={kind}
+                organizations={organizations}
+                adminView={adminView}
+                organization={organization}
+                channel={channel}
+                open={isAddModalOpen}
+                onOpenChangeAction={setIsAddModalOpen}
+            />
+        </>
+    );
+};

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

@@ -0,0 +1,88 @@
+"use client";
+
+import {Card} from "@/components/ui/card";
+import {NotificationChannelWith} from "@/db/schema/09_notification-channel";
+import {Badge} from "@/components/ui/badge";
+import {OrganizationWithMembers} from "@/db/schema/03_organization";
+import {truncateWords} from "@/utils/text";
+import {useIsMobile} from "@/hooks/use-mobile";
+import {StorageChannelWith} from "@/db/schema/12_storage-channel";
+import {
+    EditChannelButton
+} from "@/components/wrappers/dashboard/admin/channels/channel/channel-card/button-edit-channel";
+import {ChannelKind, getChannelIcon} from "@/components/wrappers/dashboard/admin/channels/helpers/common";
+import {
+    DeleteChannelButton
+} from "@/components/wrappers/dashboard/admin/channels/channel/channel-card/button-delete-channel";
+
+export type ChannelCardProps = {
+    data: NotificationChannelWith | StorageChannelWith;
+    organization?: OrganizationWithMembers;
+    organizations?: OrganizationWithMembers[];
+    adminView?: boolean;
+    kind?: ChannelKind;
+    defaultStorageChannelId?: string | null | undefined
+
+};
+
+
+export const ChannelCard = (props: ChannelCardProps) => {
+    const {data, organization, kind, adminView, defaultStorageChannelId} = props;
+    const isMobile = useIsMobile()
+
+    const isDefaultSystemStorage = defaultStorageChannelId === data.id;
+
+    const isOwned = data.organizationId ? true : !organization;
+    const isLocalSystem = data.provider == "local";
+
+    return (
+        <div className="block transition-all duration-200 rounded-xl">
+            <Card className="flex flex-row justify-between p-4">
+                <div className="flex items-center gap-3">
+                    <div
+                        className="flex h-10 w-10 items-center justify-center rounded-md bg-secondary border border-border">
+                        {getChannelIcon(data.provider)}
+                    </div>
+                    <div className={`h-2 w-2 rounded-full ${data.enabled ? "bg-green-600" : "bg-muted"}`}/>
+                </div>
+                <div className="flex justify-start w-full">
+                    <div className="flex flex-col items-start md:flex-row md:items-center gap-2 ">
+                        <h3 className="font-medium text-foreground">{isMobile ? truncateWords(data.name, 2) : data.name}</h3>
+                        <Badge variant="secondary" className="text-xs font-mono">
+                            {data.provider}
+                        </Badge>
+                        {isDefaultSystemStorage && (
+                            <Badge variant="secondary" className="text-xs font-mono">
+                                default
+                            </Badge>
+                        )}
+                    </div>
+                </div>
+                {kind && (
+                    <div className="flex items-center gap-2">
+                        {(isOwned) && (
+                            <>
+                                <EditChannelButton
+                                    organizations={props.organizations}
+                                    adminView={props.adminView}
+                                    organization={organization}
+                                    channel={data}
+                                    kind={kind}
+                                />
+                                {!isLocalSystem && (
+                                    <DeleteChannelButton
+                                        kind={kind}
+                                        organizationId={organization?.id}
+                                        channelId={data.id}
+                                    />
+                                )}
+                            </>
+                        )}
+                    </div>
+                )}
+            </Card>
+        </div>
+    );
+};
+
+

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

@@ -0,0 +1,27 @@
+import {z} from "zod";
+
+
+export const ChannelFormSchema = z.object({
+    name: z
+        .string()
+        .min(5, "Name must be at least 5 characters long")
+        .max(40, "Name must be at most 40 characters long"),
+    config: z.record(z.union([z.string(), z.number(), z.boolean(), z.null(), z.undefined()])).optional(),
+    enabled: z.boolean().default(true),
+});
+
+
+export const NotificationChannelFormSchema = ChannelFormSchema.extend({
+    provider: z.enum(
+        ["slack", "smtp", "discord", "telegram", "gotify", "ntfy", "webhook"],
+        {required_error: "Provider is required"}
+    ),
+});
+
+export const StorageChannelFormSchema = ChannelFormSchema.extend({
+    provider: z.enum(["local", "s3", "google-drive"], {required_error: "Provider is required"}),
+});
+
+
+export type NotificationChannelFormType = z.infer<typeof NotificationChannelFormSchema>;
+export type StorageChannelFormType = z.infer<typeof StorageChannelFormSchema>;

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

@@ -0,0 +1,254 @@
+"use client";
+
+import {useRouter} from "next/navigation";
+import {useMutation} from "@tanstack/react-query";
+import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm} from "@/components/ui/form";
+import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
+import {Input} from "@/components/ui/input";
+
+import {
+    addStorageChannelAction, updateStorageChannelAction
+} from "@/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/storages/action";
+import {toast} from "sonner";
+import {OrganizationWithMembers} from "@/db/schema/03_organization";
+import {Button} from "@/components/ui/button";
+import {NotificationChannelWith} from "@/db/schema/09_notification-channel";
+import {useEffect} from "react";
+import {cn} from "@/lib/utils";
+import {Card} from "@/components/ui/card";
+import {ArrowLeft} from "lucide-react";
+import {StorageChannelWith} from "@/db/schema/12_storage-channel";
+import {
+    NotificationChannelFormSchema, NotificationChannelFormType, StorageChannelFormSchema, StorageChannelFormType
+} from "@/components/wrappers/dashboard/admin/channels/channel/channel-form/channel-form.schema";
+import {
+    ChannelKind,
+    renderChannelForm
+} from "@/components/wrappers/dashboard/admin/channels/helpers/common";
+import {storageProviders} from "@/components/wrappers/dashboard/admin/channels/helpers/storage";
+import {notificationProviders} from "@/components/wrappers/dashboard/admin/channels/helpers/notification";
+import {
+    ChannelTestButton
+} from "@/components/wrappers/dashboard/admin/channels/channel/channel-form/channel-test-button";
+import {
+    addNotificationChannelAction, updateNotificationChannelAction
+} from "@/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/notifications/action";
+
+type NotifierFormProps = {
+    onSuccessAction?: () => void;
+    organization?: OrganizationWithMembers;
+    defaultValues?: NotificationChannelWith | StorageChannelWith
+    adminView?: boolean
+    kind: ChannelKind
+};
+
+export const ChannelForm = ({onSuccessAction, organization, defaultValues, kind}: NotifierFormProps) => {
+
+    const router = useRouter();
+    const isCreate = !Boolean(defaultValues);
+
+    const form = useZodForm({
+        schema: kind == "notification" ? NotificationChannelFormSchema : StorageChannelFormSchema,
+        // @ts-ignore
+        defaultValues: {...defaultValues},
+    });
+
+    useEffect(() => {
+        form.reset(defaultValues ? {...defaultValues} : {});
+    }, [defaultValues]);
+
+    const mutationAddNotificationChannel = useMutation({
+        mutationFn: async (values: NotificationChannelFormType | StorageChannelFormType) => {
+
+            const payload = {
+                data: values,
+                ...(organization && {organizationId: organization.id}),
+                ...((defaultValues && {id: defaultValues.id}))
+            };
+
+
+            let result: any;
+
+            if (kind === "notification") {
+                // @ts-ignore
+                result = isCreate ? await addNotificationChannelAction(payload) : await updateNotificationChannelAction(payload);
+            } else if (kind === "storage") {
+                // @ts-ignore
+                result = isCreate ? await addStorageChannelAction(payload) : await updateStorageChannelAction(payload);
+            } else {
+                toast.error("An error occurred");
+                return;
+            }
+
+            const inner = result?.data;
+
+            if (inner?.success) {
+                toast.success(inner.actionSuccess?.message);
+                isCreate && onSuccessAction?.();
+                router.refresh();
+            } else {
+                toast.error(inner?.actionError?.message);
+                isCreate && onSuccessAction?.();
+            }
+        }
+    });
+
+    const provider = form.watch("provider");
+    const channelTypes = kind == "notification" ? notificationProviders : storageProviders
+    const selectedProviderDetails = channelTypes.find(t => t.value === provider);
+
+    if (isCreate && !provider) {
+        return (
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-4 py-4">
+                {channelTypes.filter(p => p.value != "local").map((type) => {
+                    const Icon = type.icon;
+                    return (
+                        <Card
+                            key={type.value}
+                            className={cn(
+                                "relative flex flex-col items-center justify-center gap-3 p-4 transition-all border",
+                                type.preview
+                                    ? "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;
+                                form.setValue("provider", type.value as any);
+                                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-5 flex items-center justify-center
+                                            transform -rotate-45 translate-x-14 -translate-y-4"
+                                        style={{backgroundColor: "#FE6702"}}
+                                    >
+                                        <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 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 text-center leading-tight",
+                                    type.preview ? "text-muted-foreground" : "text-foreground"
+                                )}
+                            >
+                                {type.label}
+                            </span>
+                        </Card>
+
+                    );
+                })}
+            </div>
+        );
+    }
+
+    return (
+        <Form
+            form={form}
+            className="flex flex-col gap-4"
+            onSubmit={async (values) => {
+                await mutationAddNotificationChannel.mutateAsync(values);
+            }}
+        >
+            <div className="flex items-center gap-3 mb-2 p-3 bg-secondary/30 rounded-lg border border-border">
+                {selectedProviderDetails && (
+                    <div
+                        className="h-10 w-10 bg-background rounded-full flex items-center justify-center border border-border shadow-sm">
+                        <selectedProviderDetails.icon className="h-5 w-5"/>
+                    </div>
+                )}
+                <div className="flex-1">
+                    <p className="text-sm font-medium">Configuring {selectedProviderDetails?.label}</p>
+                    <p className="text-xs text-muted-foreground">{isCreate ? "New Channel" : "Edit Channel"}</p>
+                </div>
+                {isCreate && (
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => {
+                            form.setValue("provider", undefined as any);
+                            form.setValue("config", undefined);
+                        }}
+                    >
+                        <ArrowLeft className="h-4 w-4 mr-2"/>
+                        Change
+                    </Button>
+                )}
+            </div>
+
+            <FormField
+                control={form.control}
+                name="name"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Channel Name</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder={`My ${selectedProviderDetails?.label} Channel`}
+                                   value={field.value ?? ""}/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+
+            <FormField
+                control={form.control}
+                name="provider"
+                render={({field}) => (
+                    <input type="hidden" {...field} value={field.value || ""}/>
+                )}
+            />
+
+            {renderChannelForm(provider, form)}
+
+            <div className="flex justify-between mt-4">
+                <div>
+                    {defaultValues && (
+                        <ChannelTestButton
+                            kind={kind}
+                            organizationId={organization?.id}
+                            channel={defaultValues}
+                        />
+                    )}
+                </div>
+                <div className="flex gap-2">
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => {
+                            onSuccessAction?.();
+                            form.reset();
+                        }}
+                    >
+                        Cancel
+                    </Button>
+                    <ButtonWithLoading isPending={mutationAddNotificationChannel.isPending}>
+                        {isCreate ? "Add" : "Save"} Channel
+                    </ButtonWithLoading>
+                </div>
+
+            </div>
+        </Form>
+    );
+};
+

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

@@ -0,0 +1,88 @@
+"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 {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 type {StorageInput} from "@/features/storages/types";
+import {dispatchStorage} from "@/features/storages/dispatch";
+
+type NotifierTestChannelButtonProps = {
+    channel: NotificationChannel | StorageChannel;
+    organizationId?: string;
+    kind: ChannelKind;
+}
+
+export const ChannelTestButton = ({channel, organizationId, kind}: NotifierTestChannelButtonProps) => {
+    const channelText = getChannelTextBasedOnKind(kind)
+    const isMobile = useIsMobile()
+    const mutation = useMutation({
+        mutationFn: async () => {
+            if (kind === "notification") {
+                const payload: EventPayload = {
+                    title: 'Test Channel',
+                    message: `We are testing channel ${channel.name}`,
+                    level: 'info',
+                };
+                const result = await dispatchNotification(payload, undefined, channel.id, organizationId);
+
+                if (result.success) {
+                    toast.success(result.message);
+                } else {
+                    toast.error("An error occurred while testing the notification channel, check your configuration");
+                }
+            } else if (kind === "storage") {
+                const input: StorageInput = {
+                    action: "ping",
+                };
+                const result = await dispatchStorage(input, undefined, channel.id);
+
+                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 {
+                toast.error("Not yet supported");
+            }
+
+        },
+    });
+
+    return (
+        <Button
+            type="button"
+            variant="default"
+            onClick={() => mutation.mutateAsync()}
+            disabled={mutation.isPending}
+            className="bg-green-600 hover:bg-green-700 text-white font-medium shadow-sm transition-all"
+        >
+            {mutation.isPending ? (
+                <>
+                    <div
+                        className={cn(" h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white", !isMobile && "mr-2")}/>
+                    {!isMobile && `Sending...`}
+                </>
+            ) : (
+                <div className="flex flex-row justify-center items-center">
+                    {kind === "notification" ?
+                        <>
+                            <Send className={cn("h-4 w-4", !isMobile && "mr-2")}/>{!isMobile && ` Test Channel`}
+                        </>
+                        :
+                        <>
+                            <ShieldCheck className={cn("h-4 w-4", !isMobile && "mr-2")}/>{!isMobile && ` Test Storage`}
+                        </>
+                    }
+                </div>
+            )}
+        </Button>
+    )
+}

src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/notifications/action.ts

@@ -6,11 +6,11 @@ import * as drizzleDb from "@/db";
 import {userAction} from "@/lib/safe-actions/actions";
 import {NotificationChannel} from "@/db/schema/09_notification-channel";
 import {db} from "@/db";
-import {
-    NotificationChannelFormSchema
-} from "@/components/wrappers/dashboard/common/notifier/notifier-form/notifier-form.schema";
 import {and, eq} from "drizzle-orm";
 import {withUpdatedAt} from "@/db/utils";
+import {
+    NotificationChannelFormSchema
+} from "@/components/wrappers/dashboard/admin/channels/channel/channel-form/channel-form.schema";
 
 
 export const addNotificationChannelAction = userAction.schema(
@@ -20,7 +20,6 @@ export const addNotificationChannelAction = userAction.schema(
     })
 ).action(async ({parsedInput}): Promise<ServerActionResult<NotificationChannel>> => {
     const {organizationId, data} = parsedInput;
-
     try {
         const [channel] = await db
             .insert(drizzleDb.schemas.notificationChannel)
@@ -29,6 +28,7 @@ export const addNotificationChannelAction = userAction.schema(
                 name: data.name,
                 config: data.config,
                 enabled: data.enabled ?? true,
+                organizationId: organizationId ?? null,
             })
             .returning();
 
@@ -128,11 +128,11 @@ export const removeNotificationChannelAction = userAction.schema(
 
 export const updateNotificationChannelAction = userAction.schema(
     z.object({
-        notificationChannelId: z.string(),
+        id: z.string(),
         data: NotificationChannelFormSchema
     })
 ).action(async ({parsedInput}): Promise<ServerActionResult<NotificationChannel>> => {
-    const {notificationChannelId, data} = parsedInput;
+    const {id, data} = parsedInput;
 
     try {
         const [channel] = await db
@@ -143,7 +143,7 @@ export const updateNotificationChannelAction = userAction.schema(
                 config: data.config,
                 enabled: data.enabled ?? true,
             }))
-            .where(eq(drizzleDb.schemas.notificationChannel.id, notificationChannelId))
+            .where(eq(drizzleDb.schemas.notificationChannel.id, id))
             .returning();
 
         return {
@@ -154,7 +154,7 @@ export const updateNotificationChannelAction = userAction.schema(
             },
             actionSuccess: {
                 message: `Notification channel "${channel.name}" has been successfully updated.`,
-                messageParams: {notificationChannelId: channel.id},
+                messageParams: {id: channel.id},
             },
         };
     } catch (error) {
@@ -165,7 +165,7 @@ export const updateNotificationChannelAction = userAction.schema(
                 message: "Failed to update notification channel.",
                 status: 500,
                 cause: error instanceof Error ? error.message : "Unknown error",
-                messageParams: {notificationChannelId: ""},
+                messageParams: {id: ""},
             },
         };
     }

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

@@ -0,0 +1,30 @@
+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";
+
+
+type NotifierDiscordFormProps = {
+    form: UseFormReturn<any, any, any>
+}
+
+export const NotifierDiscordForm = ({form}: NotifierDiscordFormProps) => {
+    return (
+        <>
+            <Separator className="my-1"/>
+            <FormField
+                control={form.control}
+                name="config.discordWebhook"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Discord Webhook URL</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="https://discord.com/api/webhooks/..."/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+        </>
+    )
+}

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

@@ -0,0 +1,43 @@
+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";
+
+
+type NotifierGotifyFormProps = {
+    form: UseFormReturn<any, any, any>
+}
+
+export const NotifierGotifyForm = ({form}: NotifierGotifyFormProps) => {
+    return (
+        <>
+            <Separator className="my-1"/>
+            <FormField
+                control={form.control}
+                name="config.gotifyServerUrl"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Gotify Server URL</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="https://gotify.example.com"/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+            <FormField
+                control={form.control}
+                name="config.gotifyAppToken"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Application Token</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="A1b2C3d4E5f6G7h"/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+        </>
+    )
+}

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

@@ -0,0 +1,90 @@
+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";
+
+type NotifierNtfyFormProps = {
+    form: UseFormReturn<any, any, any>
+}
+
+export const NotifierNtfyForm = ({form}: NotifierNtfyFormProps) => {
+    return (
+        <>
+            <Separator className="my-1"/>
+
+            <FormField
+                control={form.control}
+                name="config.ntfyTopic"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Topic Name</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="my-secret-topic"/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+
+            <FormField
+                control={form.control}
+                name="config.ntfyServerUrl"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Server URL (Optional)</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="https://ntfy.sh (default)"/>
+                        </FormControl>
+                        <p className="text-xs text-muted-foreground">Leave empty to use the official ntfy.sh server.</p>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+
+            <FormField
+                control={form.control}
+                name="config.ntfyToken"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Access Token (Optional)</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="tk_..."/>
+                        </FormControl>
+                        <p className="text-xs text-muted-foreground">Only required for protected topics or self-hosted instances with auth.</p>
+                        <FormMessage/>
+                    </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/telegram.form.tsx

@@ -0,0 +1,48 @@
+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";
+
+
+type NotifierTelegramFormProps = {
+    form: UseFormReturn<any, any, any>
+}
+
+export const NotifierTelegramForm = ({form}: NotifierTelegramFormProps) => {
+    return (
+        <>
+            <Separator className="my-1"/>
+            <FormField
+                control={form.control}
+                name="config.telegramBotToken"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Telegram Bot Token</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+            <FormField
+                control={form.control}
+                name="config.telegramChatId"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Telegram Chat ID</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="-100123456789 or 123456789"/>
+                        </FormControl>
+                        <p className="text-xs text-muted-foreground">
+                            You must start the conversation with the bot first (<strong>/start</strong>). <br/>
+                            For groups, add the bot to the group. <br/>
+                            You can use <a href="https://t.me/userinfobot" target="_blank" rel="noopener noreferrer" className="underline">@userinfobot</a> to find your ID.
+                        </p>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+        </>
+    )
+}

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

@@ -0,0 +1,65 @@
+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";
+
+
+type NotifierWebhookFormProps = {
+    form: UseFormReturn<any, any, any>
+}
+
+export const NotifierWebhookForm = ({form}: NotifierWebhookFormProps) => {
+    return (
+        <>
+            <Separator className="my-1"/>
+            <FormField
+                control={form.control}
+                name="config.webhookUrl"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Webhook URL</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="https://example.com/api/webhook"/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+            <div className="flex gap-4">
+                <div className="flex-1">
+                    <FormField
+                        control={form.control}
+                        name="config.webhookSecretHeader"
+                        render={({field}) => (
+                            <FormItem>
+                                <FormLabel>Header Name (Optional)</FormLabel>
+                                <FormControl>
+                                    <Input {...field} placeholder="X-Webhook-Secret"/>
+                                </FormControl>
+                                <FormMessage/>
+                            </FormItem>
+                        )}
+                    />
+                </div>
+                <div className="flex-1">
+                    <FormField
+                        control={form.control}
+                        name="config.webhookSecret"
+                        render={({field}) => (
+                            <FormItem>
+                                <FormLabel>Secret Value (Optional)</FormLabel>
+                                <FormControl>
+                                    <Input {...field} placeholder="Secret value..."/>
+                                </FormControl>
+                                <FormMessage/>
+                            </FormItem>
+                        )}
+                    />
+                </div>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2">
+                If provided, the secret will be sent in the specified header (defaults to <code>X-Webhook-Secret</code>).
+            </p>
+        </>
+    )
+}

src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/storages/action.ts

@@ -0,0 +1,173 @@
+"use server";
+
+import {z} from "zod";
+import {ServerActionResult} from "@/types/action-type";
+import * as drizzleDb from "@/db";
+import {userAction} from "@/lib/safe-actions/actions";
+import {db} from "@/db";
+import {and, eq} from "drizzle-orm";
+import {withUpdatedAt} from "@/db/utils";
+import {
+    StorageChannelFormSchema
+} from "@/components/wrappers/dashboard/admin/channels/channel/channel-form/channel-form.schema";
+import {StorageChannel} from "@/db/schema/12_storage-channel";
+
+
+export const addStorageChannelAction = userAction.schema(
+    z.object({
+        organizationId: z.string().optional(),
+        data: StorageChannelFormSchema
+    })
+).action(async ({parsedInput}): Promise<ServerActionResult<StorageChannel>> => {
+    const {organizationId, data} = parsedInput;
+
+    try {
+        const [channel] = await db
+            .insert(drizzleDb.schemas.storageChannel)
+            .values({
+                provider: data.provider,
+                name: data.name,
+                config: data.config,
+                enabled: data.enabled ?? true,
+                organizationId: organizationId ?? null
+            })
+            .returning();
+
+        if (organizationId) {
+            await db.insert(drizzleDb.schemas.organizationStorageChannel).values({
+                organizationId,
+                storageChannelId: channel.id,
+            });
+        }
+
+        return {
+            success: true,
+            value: {
+                ...channel,
+                config: channel.config as JSON
+            },
+            actionSuccess: {
+                message: "Storage channel has been successfully created.",
+                messageParams: {id: channel.id},
+            },
+        };
+    } catch (error) {
+        console.error("Error:", error);
+        return {
+            success: false,
+            actionError: {
+                message: "Failed to create storage channel.",
+                status: 500,
+                cause: error instanceof Error ? error.message : "Unknown error",
+                messageParams: {id: ""},
+            },
+        };
+    }
+});
+
+export const removeStorageChannelAction = userAction.schema(
+    z.object({
+        organizationId: z.string().optional(),
+        id: z.string(),
+    })
+).action(async ({parsedInput}): Promise<ServerActionResult<StorageChannel>> => {
+    const {organizationId, id} = parsedInput;
+
+    try {
+        if (organizationId) {
+            await db
+                .delete(drizzleDb.schemas.organizationStorageChannel)
+                .where(
+                    and(
+                        eq(drizzleDb.schemas.organizationStorageChannel.organizationId, organizationId),
+                        eq(drizzleDb.schemas.organizationStorageChannel.storageChannelId, id)
+                    )
+                );
+        }
+
+        const [deletedChannel] = await db
+            .delete(drizzleDb.schemas.storageChannel)
+            .where(eq(drizzleDb.schemas.storageChannel.id, id))
+            .returning();
+
+        if (!deletedChannel) {
+            return {
+                success: false,
+                actionError: {
+                    message: "Storage channel not found.",
+                    status: 404,
+                    messageParams: {id: id},
+                },
+            };
+        }
+
+        return {
+            success: true,
+            value: {
+                ...deletedChannel,
+                config: deletedChannel.config as JSON
+            },
+            actionSuccess: {
+                message: "Storage channel has been successfully removed.",
+                messageParams: {id: id},
+            },
+        };
+    } catch (error) {
+        console.error("Error:", error);
+        return {
+            success: false,
+            actionError: {
+                message: "Failed to remove storage channel.",
+                status: 500,
+                cause: error instanceof Error ? error.message : "Unknown error",
+                messageParams: {id: id},
+            },
+        };
+    }
+});
+
+
+export const updateStorageChannelAction = userAction.schema(
+    z.object({
+        id: z.string(),
+        data: StorageChannelFormSchema
+    })
+).action(async ({parsedInput}): Promise<ServerActionResult<StorageChannel>> => {
+    const {id, data} = parsedInput;
+
+    try {
+        const [channel] = await db
+            .update(drizzleDb.schemas.storageChannel)
+            .set(withUpdatedAt({
+                provider: data.provider,
+                name: data.name,
+                config: data.config,
+                enabled: data.enabled ?? true,
+            }))
+            .where(eq(drizzleDb.schemas.storageChannel.id, id))
+            .returning();
+
+        return {
+            success: true,
+            value: {
+                ...channel,
+                config: channel.config as JSON
+            },
+            actionSuccess: {
+                message: `Storage channel "${channel.name}" has been successfully updated.`,
+                messageParams: {id: channel.id},
+            },
+        };
+    } catch (error) {
+        console.error("Error:", error);
+        return {
+            success: false,
+            actionError: {
+                message: "Failed to update storage channel.",
+                status: 500,
+                cause: error instanceof Error ? error.message : "Unknown error",
+                messageParams: {id: ""},
+            },
+        };
+    }
+});