chore(release): 1.2.5-rc.15

UI/UX enhancements

.env.example

@@ -1,37 +1,31 @@
 # 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/FUNDING.yml

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

.github/workflows/docker.yml

@@ -0,0 +1,122 @@
+name: Docker Publish
+
+on:
+  workflow_call:
+    inputs:
+      image_name:
+        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
+
+jobs:
+
+  build:
+    name: Build and push Docker images
+    runs-on: ${{ matrix.platform == 'linux/amd64' && 'ubuntu-latest' || matrix.platform == 'linux/arm64' && 'ubuntu-24.04-arm' }}
+    strategy:
+      fail-fast: false
+      matrix:
+        platform: [ linux/amd64, linux/arm64 ]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Login to Docker
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Set image tag
+        id: set-tags
+        run: |
+          REF_NAME=${GITHUB_REF#refs/tags/}
+          if [ "${{ matrix.platform }}" = "linux/amd64" ]; then
+            IMAGE="${{ inputs.image_name }}:$REF_NAME-amd64"
+          else
+            IMAGE="${{ inputs.image_name }}:$REF_NAME-arm64"
+          fi
+          echo "image=$IMAGE" >> $GITHUB_OUTPUT
+
+      - name: Build and push image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ${{ inputs.dockerfile }}
+          platforms: ${{ matrix.platform }}
+          push: true
+          tags: ${{ steps.set-tags.outputs.image }}
+          target: ${{ inputs.target }}
+
+      - name: Prepare artifact name
+        id: artifact
+        run: |
+          platform=${{ matrix.platform }}
+          echo "safe_platform=${platform//\//-}" >> $GITHUB_OUTPUT
+          echo "${{ steps.set-tags.outputs.image }}" > image.txt
+
+      - uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f
+        with:
+          name: image-${{ steps.artifact.outputs.safe_platform }}
+          path: image.txt
+          if-no-files-found: warn
+          compression-level: 6
+          overwrite: false
+          include-hidden-files: false
+
+  create-manifest:
+    name: Create multi-arch Docker manifest (Portabase)
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131
+        with:
+          name: image-linux-amd64
+          path: /tmp/digests/amd64
+
+      - uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131
+        with:
+          name: image-linux-arm64
+          path: /tmp/digests/arm64
+
+      - name: Login to Docker
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Create and push manifest list
+        working-directory: /tmp/digests
+        run: |
+          DOCKER_IMAGES="$(cat amd64/image.txt) $(cat arm64/image.txt)"
+          REF_NAME=${GITHUB_REF#refs/tags/}
+          MANIFEST_IMAGE="${{ inputs.image_name }}:$REF_NAME"
+
+          docker buildx imagetools create $DOCKER_IMAGES -t $MANIFEST_IMAGE
+          docker buildx imagetools inspect $MANIFEST_IMAGE
+
+          if [ "${{ inputs.add_latest }}" = "true" ]; then
+            docker buildx imagetools create $DOCKER_IMAGES -t ${{ inputs.image_name }}:latest
+            docker buildx imagetools inspect ${{ inputs.image_name }}:latest
+          fi  
+
+  
+  
+  

.github/workflows/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,32 @@
+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_2 }}
+      DOCKER_PASSWORD: ${{ 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,33 @@
 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_2 }}
+      DOCKER_PASSWORD: ${{ 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 }}

.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

@@ -26,5 +26,5 @@ keywords:
   - web-ui
   - agent
 license: Apache-2.0
-version: 1.1.6
-date-released: "2026-01-01"
+version: 1.2.5-rc.15
+date-released: "2026-02-11"

README.md

@@ -1,37 +1,41 @@
 <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>
-    Take full control of your databases with Portabase — the self-hosted, open-source platform 
-    for automated backup, restoration, and operational management. Powered by the <strong>Portabase Agent</strong>, 
-    every database in your infrastructure can be monitored, backed up, and managed in real time, 
-    with zero reliance on third-party services.
-  </p>
-  <p>
-    Secure, lightweight, and deployable anywhere — on Docker, Kubernetes, or directly on your servers. 
-    Designed for teams, DevOps, and enterprises who demand control, reliability, and automation at scale.
+
+  <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/Portabase/portabase)
+[![Docker Pulls](https://img.shields.io/docker/pulls/solucetechnologies/portabase?color=brightgreen)](https://hub.docker.com/r/solucetechnologies/portabase)
 [![Platform](https://img.shields.io/badge/platform-linux%20%7C%20macos%20%7C%20windows-lightgrey)](https://github.com/Portabase/portabase)
+[![Support Portabase](https://img.shields.io/badge/Support-Portabase-orange)](https://www.buymeacoffee.com/portabase)
 
 [![PostgreSQL](https://img.shields.io/badge/PostgreSQL-336791?logo=postgresql&logoColor=white)](https://www.postgresql.org/)
 [![MySQL](https://img.shields.io/badge/MySQL-4479A1?logo=mysql&logoColor=white)](https://www.mysql.com/)
 [![MariaDB](https://img.shields.io/badge/MariaDB-003545?logo=mariadb&logoColor=white)](https://mariadb.org/)
+[![MongoDB](https://img.shields.io/badge/-MongoDB-13aa52?logo=mongodb&logoColor=white)](https://www.mongodb.com/)
 [![Self Hosted](https://img.shields.io/badge/self--hosted-yes-brightgreen)](https://github.com/Portabase/portabase)
 [![Open Source](https://img.shields.io/badge/open%20source-❤️-red)](https://github.com/Portabase/portabase)
 
 
+[![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://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="#installation">Installation</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>
@@ -42,257 +46,29 @@
 
 </div>
 
----
+## Installation
 
-## ✨ About The Project
+You have 4 ways to install Portabase:
 
-**Portabase** is a server dashboard tool designed to simplify the backup and restoration of your database instances. It
-integrates seamlessly with [Portabase agents](https://github.com/Portabase/agent-portabase) for managing operations
-securely and efficiently.
-
-### 🔧 Built With
-
-- [![NextJS][NextJS]][NextJS-url]
-- [![Drizzle][Drizzle]][Drizzle-url]
-- [![ShadcnUI][ShadcnUI]][ShadcnUI-url]
-- [![BetterAuth][BetterAuth]][BetterAuth-url]
-- [![Docker][Docker]][Docker-url]
-
----
-
-## 📦 Features
-
-### 🗄️ Supported databases
-
-- PostgreSQL
-- MySQL
-- MariaDB
-
-### ⏱️ Scheduled backups
-
-- Cron-based scheduling for full control
-- Manual trigger support for on-demand backups
-
-### 💾 Storage backends
-
-- On-premise storage: Backups are stored directly on your VPS or server
-- Cloud storage: S3-compatible backends
-  supported ([documentation](https://portabase.io/docs/dashboard/advanced/storage/s3))
-- Full data ownership: No third-party access — your data stays under your control
-
-### 🔔 Smart notifications
-
-- Multi-channel delivery: Email, Slack, Discord, webhooks
-- Real-time alerts: Immediate feedback on success and failure
-- Custom alert policies: Database-level notification rules
-- Team-ready: Designed for DevOps, on-call, and incident workflows
-
-### 👥 Built for team environments
-
-- Workspaces: Organize databases, notification channels, and storage backends by organization and project
-- Access control: Fine-grained, role-based permissions on all resources
-- Role management: Member, admin, and owner roles at both system and organization levels
-
-### 🐳 Self-hosted & secure
-
-- Containerized deployment: Docker-based setup for predictable installation and operations
-- Privacy by design: All data remains within your own infrastructure
-- Open source: Apache 2.0 licensed — fully auditable codebase
-
-### 🤖 Portabase Agent ([details](https://github.com/Portabase/agent-portabase))
-
-- Headless architecture: Runs locally on your infrastructure to manage backups and database operations
-- Multi-target support: Single agent can connect to multiple databases across different servers
-- Lightweight & efficient: Minimal resource footprint while providing full operational control
-- Secure communication: Encrypted channels between agent and central dashboard
-
----
-
-## 🚀 Getting Started
-
-### Installation
-
-You have 3 ways to install **Portabase**:
-
-- Automated CLI (recommended) - [details](https://portabase.io/docs/cli)
-- Docker Compose setup - [details](https://portabase.io/docs/dashboard/setup)
+- 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)
 
-Ensure Docker is installed on your machine before getting started.
+**Ensure Docker is installed on your machine before getting started.**
 
-### 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/dashboard/advanced/reverse-proxy)
-
-#### 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/dashboard/advanced/environment)
-
-### Locally (Development)
-
-1. Clone the repository:
-    ```bash
-    git clone https://github.com/Portabase/portabase
-    cd portabase
-    ```
-2. Start the development database for Portabase service:
-    ```bash
-    docker compose up
-    ```
-
-3. Start the Next.js app:
-    ```bash
-    make up
-    ```
-
----
-
-## 🛠️ Usage
-
-Once the installation process is done, follow the steps to configure your instance.
-
-### Dashboard configuration 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/Portabase/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.
-
----
-
-## 🤝 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 features/your-feature
-    ```
-3. Commit your changes:
-    ```bash
-    git commit -m "Add YourFeature"
-    ```
-4. Push to the branch:
-    ```bash
-    git push origin features/your-feature
-    ```
-5. Open a pull request
-
-### Top Contributors
+## Contributors
 
 [![Contributors](https://contrib.rocks/image?repo=Portabase/portabase)](https://github.com/Portabase/portabase/graphs/contributors)
 
----
+[!["Support Portabase"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/portabase)
 
-## 📄 License
+## License
 
 Distributed under the Apache License. See `LICENSE.txt` for more details.
 
----
-
-## 🙏 Acknowledgments
-
-Thanks to all contributors and the open-source community!
-
-Give the project a ⭐ if you like it!
-
 
 [Docker]: https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=fff&style=for-the-badge
 

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/(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)/agents/[agentId]/edit/page.tsx

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

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

@@ -1,8 +1,5 @@
-import Link from "next/link";
-import {GearIcon} from "@radix-ui/react-icons";
 import {PageParams} from "@/types/next";
-import {Page, PageActions, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
-import {buttonVariants} from "@/components/ui/button";
+import {Page, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
 import {db} from "@/db";
 import * as drizzleDb from "@/db";
 import {eq} from "drizzle-orm";
@@ -12,6 +9,8 @@ import {capitalizeFirstLetter} from "@/utils/text";
 import {generateEdgeKey} from "@/utils/edge_key";
 import {getServerUrl} from "@/utils/get-server-url";
 import {AgentContentPage} from "@/components/wrappers/dashboard/agent/agent-content";
+import {AgentDialog} from "@/features/agents/components/agent.dialog";
+import {AgentType} from "@/features/agents/agents.schema";
 
 export default async function RoutePage(props: PageParams<{ agentId: string }>) {
 
@@ -33,16 +32,19 @@ 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 }} typeTrigger={"edit"}/>
+                        </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

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

app/(customer)/dashboard/(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

@@ -1,20 +1,15 @@
 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 {Page} from "@/features/layout/page";
 import {db} from "@/db";
 import {eq, and, inArray} from "drizzle-orm";
 import * as drizzleDb from "@/db";
 import {getOrganizationProjectDatabases} from "@/lib/services";
 import {getActiveMember, getOrganization} from "@/lib/auth/auth";
-import {RetentionPolicySheet} from "@/components/wrappers/dashboard/database/retention-policy/retention-policy-sheet";
-import {capitalizeFirstLetter} from "@/utils/text";
-import {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 {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 +34,8 @@ export default async function RoutePage(props: PageParams<{
         with: {
             project: true,
             retentionPolicy: true,
-            alertPolicies: true
+            alertPolicies: true,
+            storagePolicies: true
         }
     });
 
@@ -51,6 +47,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 +61,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,50 +88,32 @@ 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";
 
     return (
         <Page>
-
-            <div className="justify-between gap-2 sm:flex">
-                <PageTitle className="flex flex-col md:flex-row items-center justify-between w-full ">
-                    <div className="min-w-full md:min-w-fit ">
-                        {capitalizeFirstLetter(dbItem.name)}
-                    </div>
-                    {!isMember && (
-                        <div className="flex items-center gap-2 md:justify-between w-full ">
-                            <div className="flex items-center gap-2">
-                                {/* Do not delete*/}
-                                {/*<EditButton/>*/}
-                                <RetentionPolicySheet database={dbItem}/>
-                                <CronButton database={dbItem}/>
-                                <AlertPolicyModal database={dbItem} notificationChannels={activeOrganizationChannels}
-                                                  organizationId={organization.id}/>
-                                <ImportModal database={dbItem}/>
-                            </div>
-                            <div className="flex items-center gap-2">
-                                <BackupButton disable={isAlreadyBackup} databaseId={databaseId}/>
-                            </div>
-                        </div>
-                    )}
-                </PageTitle>
-
-
-            </div>
-
-            {dbItem.description && (
-                <PageDescription className="mt-5 sm:mt-0">{dbItem.description}</PageDescription>
-            )}
-            <PageContent className="flex flex-col w-full h-full">
-                <DatabaseKpi successRate={successRate} database={dbItem} availableBackups={availableBackups}
-                             totalBackups={totalBackups}/>
-                <DatabaseTabs activeMember={activeMember} settings={settings} database={dbItem}
-                              isAlreadyRestore={isAlreadyRestore}
-                              backups={backups}
-                              restorations={restorations}/>
-            </PageContent>
+            <BackupModalProvider>
+                <DatabaseContent
+                    activeMember={activeMember}
+                    settings={settings}
+                    database={dbItem}
+                    isAlreadyRestore={isAlreadyRestore}
+                    restorations={restorations}
+                    backups={backups}
+                    totalBackups={totalBackups}
+                    availableBackups={availableBackups}
+                    successRate={successRate}
+                    organizationId={organization.id}
+                    activeOrganizationChannels={activeOrganizationChannels}
+                    activeOrganizationStorageChannels={activeOrganizationStorageChannels}
+                />
+            </BackupModalProvider>
         </Page>
     );
-}
+}

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

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

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

@@ -1,8 +1,5 @@
 import {PageParams} from "@/types/next";
-import {Page, PageActions, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
-import {buttonVariants} from "@/components/ui/button";
-import {GearIcon} from "@radix-ui/react-icons";
-import Link from "next/link";
+import {Page, PageContent, PageTitle} from "@/features/layout/page";
 import {
     ButtonDeleteProject
 } from "@/components/wrappers/dashboard/projects/button-delete-project/button-delete-project";
@@ -15,6 +12,11 @@ import {eq} from "drizzle-orm";
 import {getActiveMember, getOrganization} from "@/lib/auth/auth";
 import * as drizzleDb from "@/db";
 import {capitalizeFirstLetter} from "@/utils/text";
+import {ProjectDialog} from "@/features/projects/components/project.dialog";
+import {DatabaseWith} from "@/db/schema/07_database";
+import {ProjectWith} from "@/db/schema/06_project";
+import {isUuidv4} from "@/utils/verify-uuid";
+
 
 export default async function RoutePage(props: PageParams<{
     projectId: string
@@ -23,6 +25,10 @@ export default async function RoutePage(props: PageParams<{
         projectId
     } = await props.params;
 
+    if (!isUuidv4(projectId)) {
+        notFound()
+    }
+
     const organization = await getOrganization({});
     const activeMember = await getActiveMember()
 
@@ -50,27 +56,45 @@ 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}
+                                    isEdit={true}
+                                />
+                            </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,8 +1,5 @@
-import Link from "next/link";
-
 import {PageParams} from "@/types/next";
 import {CardsWithPagination} from "@/components/wrappers/common/cards-with-pagination";
-import {Button} from "@/components/ui/button";
 import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
 import {ProjectCard} from "@/components/wrappers/dashboard/projects/project-card/project-card";
 import {db} from "@/db";
@@ -10,6 +7,8 @@ import {notFound} from "next/navigation";
 import {getActiveMember, getOrganization} from "@/lib/auth/auth";
 import {EmptyStatePlaceholder} from "@/components/wrappers/common/empty-state-placeholder";
 import {Metadata} from "next";
+import {ProjectDialog} from "@/features/projects/components/project.dialog";
+import {DatabaseWith} from "@/db/schema/07_database";
 
 export const metadata: Metadata = {
     title: "Projects",
@@ -36,6 +35,19 @@ export default async function RoutePage(props: PageParams<{}>) {
     });
     const isMember = activeMember?.role === "member";
 
+    const availableDatabases = (
+        await db.query.database.findMany({
+            where: (db, {isNull}) => isNull(db.projectId),
+            with: {
+                agent: true,
+                project: true,
+                backups: true,
+                restorations: true,
+            },
+            orderBy: (db, {desc}) => [desc(db.createdAt)],
+        })
+    ).filter((db) => db.project == null) as DatabaseWith[];
+
 
     return (
         <Page>
@@ -43,9 +55,7 @@ export default async function RoutePage(props: PageParams<{}>) {
                 <PageTitle>Projects</PageTitle>
                 {(projects.length > 0 && !isMember) && (
                     <PageActions>
-                        <Link href={`/dashboard/projects/new`}>
-                            <Button>+ Create Project</Button>
-                        </Link>
+                        <ProjectDialog databases={availableDatabases} organization={organization}/>
                     </PageActions>
                 )}
             </PageHeader>
@@ -56,15 +66,15 @@ export default async function RoutePage(props: PageParams<{}>) {
                         organizationSlug={organization.slug}
                         data={projects}
                         cardItem={ProjectCard}
-                        cardsPerPage={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} isEmpty={true}/>
                 )}
             </PageContent>
         </Page>
     );
-}
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,24 +1,24 @@
 import {NextResponse} from "next/server";
 import {Body} from "./route";
 import {isUuidv4} from "@/utils/verify-uuid";
-import {getFileUrlPresignedLocal, getFileUrlPreSignedS3Action} from "@/features/upload/private/upload.action";
 import {Agent} from "@/db/schema/08_agent";
-import {Database} from "@/db/schema/07_database";
+import {Database, DatabaseWith} from "@/db/schema/07_database";
 import * as drizzleDb from "@/db";
-import {db as dbClient} from "@/db";
-import {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 {db, db as dbClient} from "@/db";
+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 = [];
 
-    const formatDatabase = (database: Database, backupAction: boolean, restoreAction: boolean, UrlBackup: string) => ({
+    const formatDatabase = (database: DatabaseWith, backupAction: boolean, restoreAction: boolean, UrlBackup: string | null, storages: PingDatabaseStorageChannels[], urlMeta: string | null) => ({
         generatedId: database.agentDatabaseId,
         dbms: database.dbms,
+        storages: storages,
+        encrypt: false,
         data: {
             backup: {
                 action: backupAction,
@@ -27,6 +27,7 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
             restore: {
                 action: restoreAction,
                 file: UrlBackup,
+                metaFile: urlMeta
             },
         },
     });
@@ -34,12 +35,16 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
     for (const db of body.databases) {
 
         const existingDatabase = await dbClient.query.database.findFirst({
-            where: eq(drizzleDb.schemas.database.agentDatabaseId, db.generatedId)
+            where: eq(drizzleDb.schemas.database.agentDatabaseId, db.generatedId),
+            with: {
+                project: true
+            }
         });
 
         let backupAction: boolean = false
         let restoreAction: boolean = false
-        let urlBackup: string = ""
+        let urlBackup: string | null = null;
+        let urlMeta: string | null = null
 
         if (!existingDatabase) {
             if (!isUuidv4(db.generatedId)) {
@@ -48,6 +53,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({
@@ -59,8 +70,11 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
                 })
                 .returning();
 
+
             if (databaseCreated) {
-                databasesResponse.push(formatDatabase(databaseCreated, backupAction, restoreAction, urlBackup));
+                const storages = await getDatabaseStorageChannels(databaseCreated.id)
+
+                databasesResponse.push(formatDatabase(databaseCreated, backupAction, restoreAction, urlBackup, storages, null));
             }
         } else {
 
@@ -74,77 +88,77 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
                 .where(eq(drizzleDb.schemas.database.id, existingDatabase.id))
                 .returning();
 
-
-            const backup = await dbClient.query.backup.findFirst({
-                where: and(eq(drizzleDb.schemas.backup.databaseId, databaseUpdated.id), eq(drizzleDb.schemas.backup.status, "waiting"))
+            const activeBackup = await dbClient.query.backup.findFirst({
+                where: and(
+                    eq(drizzleDb.schemas.backup.databaseId, databaseUpdated.id),
+                    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 input: StorageInput = {
+                    action: "get",
+                    data: {
+                        path: restoration.backupStorage.path,
+                        signedUrl: true,
+                    },
+                    metadata: {
+                        storageId: restoration.backupStorage.storageChannelId,
+                        fileKind: "backups"
+                    }
+                };
 
-                const fileName = backupToRestore?.file
+                const inputMeta: StorageInput = {
+                    action: "get",
+                    data: {
+                        path: `${restoration.backupStorage.path}.meta`,
+                        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);
+                    const resultMeta = await dispatchStorage(inputMeta, 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 ?? null;
+                        urlMeta = resultMeta.url ?? null
                     } 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,17 +167,81 @@ 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;
                 }
+
                 await dbClient
                     .update(drizzleDb.schemas.restoration)
                     .set({status: "ongoing"})
                     .where(eq(drizzleDb.schemas.restoration.id, restoration.id));
             }
-            databasesResponse.push(formatDatabase(databaseUpdated, backupAction, restoreAction, urlBackup));
+            const storages = await getDatabaseStorageChannels(databaseUpdated.id)
+            databasesResponse.push(formatDatabase(databaseUpdated, backupAction, restoreAction, urlBackup, storages, urlMeta));
         }
     }
+
     return databasesResponse;
 }
 
+
+type PingDatabaseStorageChannels = {
+    id: string;
+    config: any
+    provider: string
+}
+
+async function getDatabaseStorageChannels(databaseId: string): Promise<PingDatabaseStorageChannels[]> {
+
+    const database = await db.query.database.findFirst({
+        where: eq(drizzleDb.schemas.database.id, databaseId),
+        with: {
+            project: true,
+            retentionPolicy: true,
+            alertPolicies: true,
+            storagePolicies: true
+        }
+    });
+
+    if (!database) {
+        return []
+    }
+
+    const settings = await db.query.setting.findFirst({
+        where: eq(drizzleDb.schemas.setting.name, "system"),
+        with: {storageChannel: true},
+    });
+
+    const defaultStorageChannel: PingDatabaseStorageChannels[] = settings?.storageChannel
+        ? [{
+            id: settings.storageChannel.id,
+            provider: settings.storageChannel.provider,
+            config: settings.storageChannel.config,
+        }]
+        : [];
+
+
+    const enabledDatabaseStorageChannels = await Promise.all(
+        (database.storagePolicies ?? [])
+            .filter(p => p.enabled)
+            .map(async policy => {
+                const storageChannel = await db.query.storageChannel.findFirst({
+                    where: eq(drizzleDb.schemas.storageChannel.id, policy.storageChannelId),
+                });
+
+                if (!storageChannel) return null;
+
+                return {
+                    id: storageChannel.id,
+                    config: storageChannel.config,
+                    provider: storageChannel.provider,
+                } as PingDatabaseStorageChannels;
+            })
+    );
+
+    const filteredChannels: PingDatabaseStorageChannels[] = enabledDatabaseStorageChannels.filter(
+        (c): c is PingDatabaseStorageChannels => c !== null
+    );
+
+    return filteredChannels.length > 0 ? filteredChannels : defaultStorageChannel;
+}
+

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

@@ -1,13 +1,12 @@
 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";
 import {db} from "@/db";
 import {EDbmsSchema} from "@/db/schema/types";
 import {eq} from "drizzle-orm";
 import {isUuidv4} from "@/utils/verify-uuid";
 import {withUpdatedAt} from "@/db/utils";
+import {eventEmitter} from "@/features/shared/event";
 
 export type databaseAgent = {
     name: string,
@@ -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,
@@ -34,14 +26,14 @@ export async function POST(
 ) {
     try {
         const agentId = (await params).agentId
+        console.log(agentId)
         const body: Body = await request.json();
         const lastContact = new Date();
         let message: string
 
-
         if (!isUuidv4(agentId)) {
             message = "agentId is not a valid uuid"
-            console.log(message)
+            console.error(message)
             return NextResponse.json(
                 {error: "agentId is not a valid uuid"},
                 {status: 500}
@@ -54,12 +46,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({
@@ -68,7 +58,6 @@ export async function POST(
             }))
             .where(eq(drizzleDb.schemas.agent.id, agentId));
 
-        eventEmitter.emit('modification', {update: true});
 
         const response = {
             agent: {
@@ -77,7 +66,7 @@ export async function POST(
             },
             databases: databasesResponse
         }
-        console.log(response)
+
 
         return Response.json(response)
     } catch (error) {

app/api/events/route.ts

@@ -1,9 +1,7 @@
-import {EventEmitter} from 'events';
 import {auth} from "@/lib/auth/auth";
 import {headers} from "next/headers";
 import {NextResponse} from "next/server";
-
-export const eventEmitter = new EventEmitter();
+import {eventEmitter} from "@/features/shared/event";
 
 export async function GET(request: Request) {
 
@@ -19,7 +17,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`);
@@ -28,7 +25,6 @@ export async function GET(request: Request) {
 
                 eventEmitter.on('modification', handleModification);
 
-                // Handle client disconnect
                 request.signal.addEventListener('abort', () => {
                     console.log('Client disconnected');
                     controller.close();
@@ -45,15 +41,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,46 @@
-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 provided 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 +57,15 @@ export async function GET(
         );
     }
 
-    const fileStream = fs.createReadStream(filePath);
+    if (!result.file || !(result.file instanceof Readable)) {
+        return NextResponse.json(
+            {error: "Invalid file payload"},
+            {status: 500}
+        );
+    }
+
+    const fileStream = Readable.from(result.file as Readable);
+
     const stream = new ReadableStream({
         start(controller) {
             fileStream.on('data', (chunk) => controller.enqueue(chunk));

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

@@ -0,0 +1,88 @@
+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 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 || !(result.file instanceof Readable)) {
+            console.error(`An error occurred while getting file :`, result);
+            return NextResponse.json(
+                {error: "Invalid file payload"},
+                {status: 500}
+            );
+        }
+
+        const fileStream = Readable.from(result.file as Readable);
+
+        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/api/tus/hooks/route.ts

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

app/globals.css

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

app/layout.tsx

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

app/providers.tsx

@@ -6,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

@@ -3,11 +3,11 @@ name: portabase-prod
 services:
 
   app:
-#    build:
-#      context: .
-#      dockerfile: docker/dockerfile/Dockerfile
-#      target: prod
-    image: solucetechnologies/portabase:1.1.4-rc.2
+    build:
+      context: .
+      dockerfile: docker/dockerfile/Dockerfile
+      target: prod
+    image: portabase/portabase:1.2.5-rc.9
     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:
@@ -17,5 +17,19 @@ services:
       timeout: 5s
       retries: 5
 
+  tusd:
+    image: tusproject/tusd:v2.8.0
+    ports:
+      - "1080:8080"
+    command: >
+      -upload-dir /data/uploads/tmp
+      -hooks-http http://localhost:8887/api/tus/hooks
+      -max-size 21474836480
+      -base-path /tus/files/
+    extra_hosts:
+      - "localhost:host-gateway"
+    volumes:
+      - ./private/uploads/tmp:/data/uploads/tmp
+
 volumes:
   postgres-data:

docker/dockerfile/Dockerfile

@@ -1,113 +1,107 @@
-FROM node:22-alpine AS base
+#FROM node:22-bullseye AS base
+FROM --platform=$BUILDPLATFORM node:22-bullseye AS base
 
-ENV YARN_VERSION=4.9.1
-
-RUN apk add --update --no-cache \
+RUN apt-get update && apt-get install -y \
+    curl \
+    ca-certificates \
+    bash \
     tzdata \
-    build-base \
-    libc6-compat \
-    openssl \
-    make \
+    libc6 \
+    build-essential \
     g++ \
-    jpeg-dev \
-    cairo-dev \
-    giflib-dev \
-    pango-dev \
-    libtool \
+    make \
     autoconf \
     automake \
-    libpng
-
-RUN corepack enable && corepack prepare yarn@${YARN_VERSION}
-RUN yarn set version ${YARN_VERSION}
+    libtool \
+    git \
+    nginx \
+    && rm -rf /var/lib/apt/lists/*
 
 
-FROM base AS deps
+FROM --platform=$BUILDPLATFORM golang:1.23-bookworm AS tusd-base
+
+ARG TUSD_VERSION=2.8.0
+
+RUN apt-get update && apt-get install -y --no-install-recommends git ca-certificates \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /build
+
+RUN git clone https://github.com/tus/tusd.git . \
+    && git checkout v${TUSD_VERSION}
+
+RUN CGO_ENABLED=0 GOOS=linux GOARCH=${TARGETARCH} \
+    go build -ldflags="-s -w" -o /tusddist/tusd ./cmd/tusd
+
+FROM scratch AS tusd-dist
+COPY --from=tusd-base /tusddist/tusd /tusd
+
+
+FROM base AS build-env
+
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+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
-
-WORKDIR /app
+FROM build-env AS dev
 
 COPY --from=deps /app/node_modules ./node_modules
+COPY --from=tusd-base /usr/local/bin/tusd /usr/local/bin/tusd
+WORKDIR /app
 COPY . .
 
 USER root
-
 RUN chmod +x /app/docker/entrypoints/app-dev-entrypoint.sh
+
 ENTRYPOINT ["sh","/app/docker/entrypoints/app-dev-entrypoint.sh"]
 
-
-# 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
 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
 
 WORKDIR /app
-
 ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1
+ENV PORT=80
+ENV HOSTNAME="0.0.0.0"
 
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
 COPY --from=builder /app/public ./public
-
-RUN mkdir .next
-RUN chown nextjs:nodejs .next
-RUN mkdir -p /app/private/uploads
-RUN chown -R nextjs:nodejs /app/private
-RUN chown -R nextjs:nodejs /app/public
-
-
 COPY --from=builder /app/next.config.ts ./
 COPY --from=builder /app/portabase.config.ts ./
 COPY --from=builder /app/drizzle.config.ts ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-COPY --chown=nextjs:nodejs src/db ./src/db
+COPY --from=builder --chown=1001:1001 /app/.next/standalone ./
+COPY --from=builder --chown=1001:1001 /app/.next/static ./.next/static
+COPY --chown=1001:1001 src/db ./src/db
+COPY --from=deps /app/node_modules ./node_modules
+
+COPY --from=tusd-dist /tusd /usr/local/bin/tusd
+RUN chmod +x /usr/local/bin/tusd
+
+COPY docker/nginx/nginx.conf /etc/nginx/nginx.conf
+
+
+RUN mkdir -p .next /app/private/uploads \
+    && chown -R nextjs:nodejs .next /app/private /app/public
 
 USER root
-
 COPY ./docker/entrypoints/app-prod-entrypoint.sh /app/app-prod-entrypoint.sh
 RUN chmod +x /app/app-prod-entrypoint.sh
 
 EXPOSE 80
-
-ENV PORT=80
-
-ENV HOSTNAME="0.0.0.0"
-
-USER nextjs
-
+#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

docker/entrypoints/app-prod-entrypoint.sh

@@ -7,8 +7,14 @@ else
     echo "[WARN] No TZ provided, using default container timezone"
 fi
 
+mkdir -p /app/private/uploads/tmp
+echo "▶ Starting tusd server..."
+tusd --base-path /tus/files/ --upload-dir /app/private/uploads/tmp --hooks-http http://127.0.0.1:3000/api/tus/hooks --port 1080 --max-size 21474836480 &
 
-node server.js
+echo "▶ Starting Next.js server..."
+PORT=3000 node server.js &
+
+echo "▶ Starting nginx..."
+exec nginx -g "daemon off;"
 
-exec "$@"
 

docker/nginx/nginx.conf

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

next.config.ts

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portabase",
-  "version": "1.1.7",
+  "version": "1.2.5-rc.15",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack -p 8887",
@@ -47,6 +47,7 @@
     "@t3-oss/env-nextjs": "^0.13.4",
     "@tanstack/react-query": "^5.76.1",
     "@tanstack/react-table": "^8.21.3",
+    "@types/express": "^5.0.6",
     "@types/nodemailer": "^6.4.17",
     "@types/ws": "^8.18.1",
     "@zenstackhq/runtime": "2.14.2",
@@ -62,11 +63,13 @@
     "drizzle-orm": "^0.43.1",
     "drizzle-zod": "^0.7.1",
     "embla-carousel-react": "^8.6.0",
+    "express": "^5.2.1",
+    "googleapis": "^170.1.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.553.0",
     "minio": "^8.0.5",
     "motion": "^12.23.24",
-    "next": "16.0.10",
+    "next": "16.1.5",
     "next-safe-action": "^7.10.8",
     "next-themes": "^0.4.6",
     "node-cron": "^4.2.1",
@@ -74,6 +77,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 +89,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 +103,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",
@@ -106,11 +113,13 @@
     "@types/react-dom": "^19.1.5",
     "@zenstackhq/openapi": "^2.14.2",
     "@zenstackhq/tanstack-query": "^2.14.2",
-    "baseline-browser-mapping": "^2.8.32",
+    "baseline-browser-mapping": "^2.9.19",
     "drizzle-kit": "^0.31.1",
+    "esbuild": "^0.27.2",
     "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 +127,5 @@
     "typescript": "^5.8.3",
     "zenstack": "2.14.2"
   },
-  "packageManager": "yarn@4.9.1"
+  "packageManager": "pnpm@10.29.2+sha512.bef43fa759d91fd2da4b319a5a0d13ef7a45bb985a3d7342058470f9d2051a3ba8674e629672654686ef9443ad13a82da2beb9eeb3e0221c87b8154fff9d74b8"
 }

pnpm-workspace.yaml

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

proxy.ts

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

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!"

server/api.ts

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

server/server.ts

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

src/components/ui/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);
                     },
                 }
@@ -87,7 +85,7 @@ export const LoginForm = (props: loginFormProps) => {
                     <FormItem>
                         <FormLabel>Email Address</FormLabel>
                         <FormControl>
-                            <Input autoComplete="email" autoFocus placeholder="exemple@portabase.io" {...field} />
+                            <Input autoComplete="email" autoFocus placeholder="example@portabase.io" {...field} />
                         </FormControl>
                         <FormMessage/>
                     </FormItem>

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);
                 },
             });
@@ -83,7 +88,7 @@ export const RegisterForm = (props: registerFormProps) => {
                                 <FormItem>
                                     <FormLabel>Email</FormLabel>
                                     <FormControl>
-                                        <Input placeholder="exemple@portabase.io" {...field} />
+                                        <Input placeholder="example@portabase.io" {...field} />
                                     </FormControl>
                                     <FormMessage/>
                                 </FormItem>

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/common/button/button-with-confirm.tsx

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

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

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

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

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

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

src/components/wrappers/common/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/dialog.tsx

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

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

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

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

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

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

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

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

@@ -0,0 +1,150 @@
+"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,255 @@
+"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} : {enabled: true});
+    }, [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>
+                    {kind == "storage" && (
+                        <ChannelTestButton
+                            kind={kind}
+                            organizationId={organization?.id}
+                            channel={form.getValues()}
+                        />
+                    )}
+                </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,92 @@
+"use client"
+
+import {useMutation} from "@tanstack/react-query";
+import {Send, ShieldCheck} from "lucide-react";
+import {toast} from "sonner";
+
+import {Button} from "@/components/ui/button";
+import {NotificationChannel} from "@/db/schema/09_notification-channel";
+import {dispatchNotification} from "@/features/notifications/dispatch";
+import {EventPayload} from "@/features/notifications/types";
+import {useIsMobile} from "@/hooks/use-mobile";
+import {cn} from "@/lib/utils";
+import {StorageChannel} from "@/db/schema/12_storage-channel";
+import {ChannelKind} 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 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, 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, undefined, channel);
+
+                if (result.success) {
+                    toast.success("Successfully connected to storage channel");
+                } else {
+                    console.error(result);
+                    toast.error("An error occurred while testing the storage channel, check your configuration");
+                }
+            } else {
+                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/smtp.form.tsx

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

src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/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: ""},
+            },
+        };
+    }
+});