chore(release): 1.2.5-rc.7

# Conflicts:
#	CITATION.cff
#	package.json

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

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

.github/FUNDING.yml

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

.github/SECURITY.md

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

.github/workflows/docker.yml

@@ -0,0 +1,97 @@
+name: Docker Publish
+
+on:
+  workflow_call:
+    inputs:
+      image_name:
+        required: false
+        type: string
+        default: 'solucetechnologies/portabase'
+      image_name2:
+        required: false
+        type: string
+        default: 'portabase/portabase'
+      add_latest:
+        required: false
+        type: boolean
+        default: false
+      target:
+        required: false
+        type: string
+        default: 'prod'
+      dockerfile:
+        required: false
+        type: string
+        default: './docker/dockerfile/Dockerfile'
+    secrets:
+      DOCKER_USERNAME:
+        required: true
+      DOCKER_PASSWORD:
+        required: true
+      DOCKER_USERNAME_2:
+        required: true
+      DOCKER_PASSWORD_2:
+        required: true
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    permissions:
+      packages: write
+      contents: read
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set tags
+        id: set-tags
+        run: |
+          REF_NAME=${GITHUB_REF#refs/tags/}
+          TAGS="${{ inputs.image_name }}:$REF_NAME"
+          TAGS2="${{ inputs.image_name2 }}:$REF_NAME"
+          if [[ "${{ inputs.add_latest }}" == "true" ]]; then
+            TAGS="$TAGS,${{ inputs.image_name }}:latest"
+            TAGS2="$TAGS2,${{ inputs.image_name2 }}:latest"
+          fi
+          echo "tags=$TAGS" >> $GITHUB_OUTPUT
+          echo "tags2=$TAGS2" >> $GITHUB_OUTPUT
+
+      - name: Set up QEMU (enables multi-arch emulation)
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to Docker Hub account 1
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and push to solucetechnologies/portabase
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ${{ inputs.dockerfile }}
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.set-tags.outputs.tags }}
+          target: ${{ inputs.target }}
+
+      - name: Log in to Docker Hub account 2
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
+        with:
+          username: ${{ secrets.DOCKER_USERNAME_2 }}
+          password: ${{ secrets.DOCKER_PASSWORD_2 }}
+
+      - name: Build and push to portabase/portabase
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ${{ inputs.dockerfile }}
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.set-tags.outputs.tags2 }}
+          target: ${{ inputs.target }}

.github/workflows/github.yml

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

.github/workflows/release-candidate.yml

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

.github/workflows/release.yml

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

.github/workflows/security.yml

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

.gitignore

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

.idea/.gitignore

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

.idea/modules.xml

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

.idea/portabase.iml

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

.idea/vcs.xml

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

.vscode/settings.json

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

.yarnrc.yml

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

CITATION.cff

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

README.md

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

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

@@ -1,15 +1,25 @@
-import {PageParams} from "@/types/next";
-import {Metadata} from "next";
-import {ForgotPasswordForm} from "@/components/wrappers/auth/forgot-password/forgot-password-form";
+import {CardContent, CardHeader} from "@/components/ui/card";
 
-export const metadata: Metadata = {
-    title: "Forgot Password",
-};
+import {TooltipProvider} from "@/components/ui/tooltip";
+import {ForgotPasswordForm} from "@/components/wrappers/auth/login/forgot-password-form/forgot-password-form";
+import {CardAuth} from "@/features/layout/card-auth";
+
+export default async function RoutePage(props: { searchParams: Promise<{ callbackUrl: string | undefined }> }) {
 
-export default async function RoutePage(props: PageParams<{}>) {
     return (
-        <div className="mx-auto grid w-full gap-6">
-            <ForgotPasswordForm/>
-        </div>
-    )
-}
+        <TooltipProvider>
+            <CardAuth className="w-full">
+                <CardHeader>
+                    <div className="grid gap-2 text-center mb-2">
+                        <h1 className="text-3xl font-bold">Reset password</h1>
+                        <p className="text-balance text-muted-foreground">Enter your email address and we'll send you a
+                            link to reset your password.</p>
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    <ForgotPasswordForm/>
+                </CardContent>
+            </CardAuth>
+        </TooltipProvider>
+    );
+}

app/(auth)/guard/page.tsx

@@ -0,0 +1,33 @@
+import {CardContent, CardHeader} from "@/components/ui/card";
+import {TooltipProvider} from "@/components/ui/tooltip";
+import {GuardForm} from "@/components/wrappers/auth/guard/guard-form";
+import {cookies} from "next/headers";
+import {redirect} from "next/navigation";
+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 || cookieStore.get("__Secure-better-auth.two_factor")?.value;
+    
+    if (!token) {
+        redirect("/login");
+    }
+
+    return (
+        <TooltipProvider>
+            <CardAuth className="w-full max-w-md">
+                <CardHeader>
+                    <div className="grid gap-2 text-center mb-2">
+                        <h1 className="text-3xl font-bold">Two-factor verification</h1>
+                        <p className="text-balance text-muted-foreground">Please enter the verification code generated
+                            by your authentication app.</p>
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    <GuardForm/>
+                </CardContent>
+            </CardAuth>
+        </TooltipProvider>
+    );
+}

app/(auth)/login/page.tsx

@@ -1,17 +1,52 @@
-import {env} from "@/env.mjs";
 import {LoginForm} from "@/components/wrappers/auth/login/login-form/login-form";
 import {Metadata} from "next";
+import {SUPPORTED_PROVIDERS} from "../../../portabase.config";
+import {SocialAuthButtons} from "@/components/wrappers/auth/social-buttons";
+import {TooltipProvider} from "@/components/ui/tooltip";
+import {CardContent, CardHeader} from "@/components/ui/card";
+import Link from "next/link";
+import {Separator} from "@/components/ui/separator";
+import {CardAuth} from "@/features/layout/card-auth";
 
 export const metadata: Metadata = {
     title: "Login",
 };
 
 export default async function SignInPage() {
-    const authGoogleEnabled = env.AUTH_GOOGLE_METHOD;
 
     return (
-        <div className="mx-auto grid w-full gap-6">
-            <LoginForm authGoogleEnabled={authGoogleEnabled}/>
-        </div>
+        <TooltipProvider>
+            <CardAuth className="w-full">
+                <CardHeader>
+                    <div className="grid gap-2 text-center mb-2">
+                        <h1 className="text-3xl font-bold">Login</h1>
+                        <p className="text-balance text-muted-foreground">Fill your login informations</p>
+                    </div>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <LoginForm/>
+
+                    {SUPPORTED_PROVIDERS.filter((p) => !p.isManual && p.isActive).length > 0 && (
+                        <>
+                            <div className="relative my-4 flex items-center justify-center overflow-hidden">
+                                <Separator/>
+                                <div className="px-2 text-center  text-sm">OR</div>
+                                <Separator/>
+                            </div>
+                            <SocialAuthButtons providers={SUPPORTED_PROVIDERS}/>
+                        </>
+                    )}
+
+                    <div className="mt-4 text-center text-sm">
+                        Don&apos;t have an account ?{" "}
+                        <Link href="/register" className="underline">
+                            Sign up
+                        </Link>
+                    </div>
+                </CardContent>
+            </CardAuth>
+        </TooltipProvider>
+
+
     )
 }

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

@@ -1,15 +1,59 @@
-import {PageParams} from "@/types/next";
-import {Metadata} from "next";
-import {ResetPasswordSection} from "@/components/wrappers/auth/reset-password/reset-password-section";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { ResetPasswordForm } from "@/components/wrappers/auth/login/reset-password-form/reset-password-form";
+import { redirect } from "next/navigation";
+import { auth } from "@/lib/auth/auth";
+import { Avatar, AvatarImage, AvatarFallback } from "@radix-ui/react-avatar";
 
-export const metadata: Metadata = {
-    title: "Reset Password",
-};
+export default async function RoutePage(props: { searchParams: Promise<{ token: string | undefined }> }) {
+
+    const { token } = await props.searchParams;
+
+    if (!token) {
+        return redirect(`/login?error=invalid_or_expired_token`);
+    }
+
+    const verification = await (await auth.$context).internalAdapter.findVerificationValue(`reset-password:${token}`);
+
+    if (!verification || verification.expiresAt < new Date()) {
+        return redirect(`/login?error=invalid_or_expired_token`);
+    }
+
+    const user = await (await auth.$context).internalAdapter.findUserById(verification.value);
 
-export default async function RoutePage(props: PageParams<{}>) {
     return (
-        <div className="mx-auto grid w-full gap-6">
-            <ResetPasswordSection/>
-        </div>
-    )
-}
+        <TooltipProvider>
+            <Card className="w-full max-w-md shadow-lg">
+                <CardHeader className="space-y-4">
+                    <div className="space-y-1 text-center">
+                        <h1 className="text-2xl font-bold tracking-tight">Set a new password</h1>
+                        <p className="text-sm text-muted-foreground text-balance">Please enter your new password below.</p>
+                    </div>
+
+                    <div className="flex flex-col items-center space-y-2 text-center">
+                        <Avatar className="relative flex h-16 w-16 shrink-0 overflow-hidden rounded-full border">
+                            <AvatarImage src={user!.image ?? ""} alt={user!.name} className="aspect-square h-full w-full object-cover" />
+                            <AvatarFallback className="flex h-full w-full items-center justify-center rounded-full bg-muted text-2xl font-medium text-muted-foreground">
+                                {user!.name
+                                    .split(" ")
+                                    .map((n) => n[0])
+                                    .join("")
+                                    .toUpperCase()
+                                    .slice(0, 2)}
+                            </AvatarFallback>
+                        </Avatar>
+
+                        <div className="flex flex-col items-center">
+                            <div className="font-semibold text-lg">{user!.name}</div>
+                            <div className="text-sm text-muted-foreground">{user!.email}</div>
+                        </div>
+                    </div>
+                </CardHeader>
+
+                <CardContent>
+                    <ResetPasswordForm />
+                </CardContent>
+            </Card>
+        </TooltipProvider>
+    );
+}

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

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

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

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

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

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

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

@@ -1,22 +1,16 @@
-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 {formatDateLastContact} from "@/utils/date-formatting";
-import {buttonVariants} from "@/components/ui/button";
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
-import {CardsWithPagination} from "@/components/wrappers/common/cards-with-pagination";
-import {DatabaseCard} from "@/components/wrappers/dashboard/projects/project-card/project-database-card";
-import {AgentCardKey} from "@/components/wrappers/dashboard/agent/agent-card-key/agent-card-key";
+import {Page, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
 import {db} from "@/db";
 import * as drizzleDb from "@/db";
 import {eq} from "drizzle-orm";
 import {notFound} from "next/navigation";
 import {ButtonDeleteAgent} from "@/components/wrappers/dashboard/agent/button-delete-agent/button-delete-agent";
 import {capitalizeFirstLetter} from "@/utils/text";
-import {Server} from "lucide-react";
 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 }>) {
 
@@ -38,58 +32,29 @@ 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 && (
                 <PageDescription className="mt-5 sm:mt-0">{agent.description}</PageDescription>
             )}
             <PageContent className="flex flex-col w-full h-full justify-between gap-6">
-                <div className="flex flex-col sm:flex-row sm:justify-between gap-6 ">
-                    <Card className="w-full sm:w-auto flex-1">
-                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                            <CardTitle className="text-sm font-medium">Databases</CardTitle>
-                            <Server className="h-4 w-4 text-muted-foreground"/>
-                        </CardHeader>
-                        <CardContent>
-                            <div className="text-2xl font-bold">{agent.databases.length}</div>
-                            <p className="text-xs text-muted-foreground">Databases linked to this agent</p>
-                        </CardContent>
-                    </Card>
-
-                    <Card className="w-full sm:w-auto flex-1">
-                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                            <CardTitle className="text-sm font-medium">Last contact</CardTitle>
-                            <Server className="h-4 w-4 text-muted-foreground"/>
-                        </CardHeader>
-                        <CardContent>
-                            <div className="text-2xl font-bold">{formatDateLastContact(agent.lastContact)}</div>
-                            <p className="text-xs text-muted-foreground">Last contact with agent</p>
-                        </CardContent>
-                    </Card>
-
-                </div>
-                <Card className="w-full sm:w-auto flex-1 ">
-                    <CardHeader className="font-bold text-xl">
-                        Edge Key
-                    </CardHeader>
-                    <CardContent>
-                        <AgentCardKey
-                            edgeKey={edgeKey}
-                        />
-                    </CardContent>
-                </Card>
-                <CardsWithPagination cardsPerPage={4} numberOfColumns={2} data={agent.databases}
-                                     cardItem={DatabaseCard}/>
+                <AgentContentPage
+                    agent={agent}
+                    edgeKey={edgeKey}
+                />
             </PageContent>
         </Page>
     )

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)/_databases/[databaseId]/restore/page.tsx

@@ -1,41 +0,0 @@
-import {PageParams} from "@/types/next";
-import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
-import {notFound} from "next/navigation";
-// import {RestoreForm} from "@/components/wrappers/dashboard/database/restore-form";
-import {currentUser} from "@/lib/auth/current-user";
-
-import {db} from "@/db";
-import {eq} from "drizzle-orm";
-import * as drizzleDb from "@/db";
-
-
-export default async function RoutePage(
-    props: PageParams<{
-        databaseId: string;
-    }>
-) {
-    const {databaseId} = await props.params;
-
-    const user = await currentUser();
-    if (!user) notFound();
-
-    const [dbToRestore] = await db.select().from(drizzleDb.schemas.database).where(eq(drizzleDb.schemas.database.id, databaseId));
-
-    if (!dbToRestore) {
-        notFound();
-    }
-
-    const dbsOfSameType = await db.select().from(drizzleDb.schemas.database).where(eq(drizzleDb.schemas.database.dbms!, dbToRestore.dbms!));
-    const successfulBackups = await db.select().from(drizzleDb.schemas.backup).where(eq(drizzleDb.schemas.backup.status, "success"));
-
-    return (
-        <Page>
-            <PageHeader>
-                <PageTitle>Restore {dbToRestore.name}</PageTitle>
-            </PageHeader>
-            <PageContent>
-                {/*<RestoreForm databaseToRestore={dbToRestore} databases={dbsOfSameType} backups={successfulBackups}/>*/}
-            </PageContent>
-        </Page>
-    );
-}

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

@@ -2,7 +2,6 @@ import {PageParams} from "@/types/next";
 import {notFound, redirect} from "next/navigation";
 import {Page, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
 import {BackupButton} from "@/components/wrappers/dashboard/backup/backup-button/backup-button";
-import {DatabaseTabs} from "@/components/wrappers/dashboard/projects/database/database-tabs";
 import {DatabaseKpi} from "@/components/wrappers/dashboard/projects/database/database-kpi";
 import {CronButton} from "@/components/wrappers/dashboard/database/cron-button/cron-button";
 import {db} from "@/db";
@@ -12,8 +11,13 @@ import {getOrganizationProjectDatabases} from "@/lib/services";
 import {getActiveMember, getOrganization} from "@/lib/auth/auth";
 import {RetentionPolicySheet} from "@/components/wrappers/dashboard/database/retention-policy/retention-policy-sheet";
 import {capitalizeFirstLetter} from "@/utils/text";
-import {AlertPolicyModal} from "@/components/wrappers/dashboard/database/alert-policy/alert-policy-modal";
 import {getOrganizationChannels} from "@/db/services/notification-channel";
+import {ImportModal} from "@/components/wrappers/dashboard/database/import/import-modal";
+import {getOrganizationStorageChannels} from "@/db/services/storage-channel";
+import {ChannelPoliciesModal} from "@/components/wrappers/dashboard/database/channels-policy/policy-modal";
+import {HardDrive, Megaphone} from "lucide-react";
+import {BackupModalProvider} from "@/components/wrappers/dashboard/database/backup/backup-modal-context";
+import {DatabaseContent} from "@/components/wrappers/dashboard/projects/database/database-content";
 
 export default async function RoutePage(props: PageParams<{
     projectId: string;
@@ -38,7 +42,8 @@ export default async function RoutePage(props: PageParams<{
         with: {
             project: true,
             retentionPolicy: true,
-            alertPolicies: true
+            alertPolicies: true,
+            storagePolicies: true
         }
     });
 
@@ -50,6 +55,11 @@ export default async function RoutePage(props: PageParams<{
         where: eq(drizzleDb.schemas.backup.databaseId, dbItem.id),
         with: {
             restorations: true,
+            storages: {
+                with: {
+                    storageChannel: true
+                }
+            }
         },
         orderBy: (b, {desc}) => [desc(b.createdAt)],
     });
@@ -59,7 +69,7 @@ export default async function RoutePage(props: PageParams<{
         orderBy: (r, {desc}) => [desc(r.createdAt)],
     });
 
-    const isAlreadyBackup = backups.some((b) => b.status === "waiting");
+    const isAlreadyBackup = backups.some((b) => b.status === "waiting" || b.status === "ongoing");
     const isAlreadyRestore = restorations.some((r) => r.status === "waiting");
 
     const totalBackups = await db.select({count: drizzleDb.schemas.backup.id})
@@ -86,6 +96,10 @@ export default async function RoutePage(props: PageParams<{
     const organizationChannels = await getOrganizationChannels(organization.id);
     const activeOrganizationChannels = organizationChannels.filter(channel => channel.enabled);
 
+    const organizationStorageChannels = await getOrganizationStorageChannels(organization.id);
+    const activeOrganizationStorageChannels = organizationStorageChannels.filter(channel => channel.enabled);
+
+
     const successRate = totalBackups > 0 ? (successfulBackups / totalBackups) * 100 : null;
 
     const isMember = activeMember?.role === "member";
@@ -101,12 +115,23 @@ export default async function RoutePage(props: PageParams<{
                     {!isMember && (
                         <div className="flex items-center gap-2 md:justify-between w-full ">
                             <div className="flex items-center gap-2">
-                                {/* Do not delete*/}
-                                {/*<EditButton/>*/}
                                 <RetentionPolicySheet database={dbItem}/>
                                 <CronButton database={dbItem}/>
-                                <AlertPolicyModal database={dbItem} notificationChannels={activeOrganizationChannels}
-                                                  organizationId={organization.id}/>
+                                <ChannelPoliciesModal
+                                    database={dbItem}
+                                    kind={"notification"}
+                                    icon={<Megaphone/>}
+                                    channels={activeOrganizationChannels}
+                                    organizationId={organization.id}
+                                />
+                                <ChannelPoliciesModal
+                                    database={dbItem}
+                                    icon={<HardDrive/>}
+                                    kind={"storage"}
+                                    channels={activeOrganizationStorageChannels}
+                                    organizationId={organization.id}
+                                />
+                                <ImportModal database={dbItem}/>
                             </div>
                             <div className="flex items-center gap-2">
                                 <BackupButton disable={isAlreadyBackup} databaseId={databaseId}/>
@@ -124,10 +149,16 @@ export default async function RoutePage(props: PageParams<{
             <PageContent className="flex flex-col w-full h-full">
                 <DatabaseKpi successRate={successRate} database={dbItem} availableBackups={availableBackups}
                              totalBackups={totalBackups}/>
-                <DatabaseTabs activeMember={activeMember} settings={settings} database={dbItem}
-                              isAlreadyRestore={isAlreadyRestore}
-                              backups={backups}
-                              restorations={restorations}/>
+                <BackupModalProvider>
+                    <DatabaseContent
+                        activeMember={activeMember}
+                        settings={settings}
+                        database={dbItem}
+                        isAlreadyRestore={isAlreadyRestore}
+                        restorations={restorations}
+                        backups={backups}
+                    />
+                </BackupModalProvider>
             </PageContent>
         </Page>
     );

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

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

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

@@ -1,8 +1,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/(organization)/statistics/page.tsx

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

app/(customer)/dashboard/layout.tsx

@@ -1,26 +1,27 @@
-import React from "react";
+import React, {ReactNode} from "react";
 import {redirect} from "next/navigation";
 
 import {SidebarInset, SidebarProvider} from "@/components/ui/sidebar";
 import {AppSidebar} from "@/components/wrappers/dashboard/common/sidebar/app-sidebar";
 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: React.ReactNode }) {
+export default async function Layout({children}: { children: ReactNode }) {
     const user = await currentUser();
     if (!user) redirect("/login");
 
     return (
-        <>
-            <SidebarProvider>
-                <div className="flex flex-col lg:flex-row w-full">
-                    <AppSidebar/>
-                    <SidebarInset>
-                        <Header/>
-                        <main className="h-full">{children}</main>
-                    </SidebarInset>
-                </div>
-            </SidebarProvider>
-        </>
+        <SidebarProvider>
+            <div className="flex flex-col lg:flex-row w-full">
+                <ThemeMetaUpdater/>
+                <AppSidebar/>
+                <SidebarInset>
+                    <Header/>
+                    <main className="h-full">{children}</main>
+                </SidebarInset>
+            </div>
+        </SidebarProvider>
     );
 }

app/(customer)/dashboard/profile/page.tsx

@@ -1,62 +0,0 @@
-import {PageParams} from "@/types/next";
-import {Page, PageContent, PageTitle} from "@/features/layout/page";
-import {notFound} from "next/navigation";
-import {UserForm} from "@/components/wrappers/dashboard/profile/user-form/user-form";
-import {Badge} from "@/components/ui/badge";
-import {AvatarWithUpload} from "@/components/wrappers/dashboard/profile/avatar/avatar-with-upload";
-import {currentUser} from "@/lib/auth/current-user";
-import {getAccounts, getSessions} from "@/lib/auth/auth";
-import {Metadata} from "next";
-
-export const metadata: Metadata = {
-    title: "Profile",
-};
-
-export default async function RoutePage(props: PageParams<{}>) {
-    const user = await currentUser();
-    if (!user) {
-        return notFound();
-    }
-
-    if (user.role !== "user" && user.role !== "admin" && user.role !== "superadmin") {
-        return notFound();
-    }
-
-    const sessions = await getSessions();
-    const accounts = await getAccounts();
-
-
-    return (
-        <Page>
-            <div className="justify-between gap-2 sm:flex">
-                <PageTitle className="flex items-center">
-                    <AvatarWithUpload
-                        user={{
-                            ...user,
-                            image: user.image ?? null,
-                            role: user.role ?? null,
-                            banned: user.banned ?? null,
-                            banReason: user.banReason ?? null,
-                            banExpires: user.banExpires ?? null,
-                            deletedAt: user.deletedAt ? new Date(user.deletedAt) : null,
-                        }}
-                    />
-                    {user.name}
-                    <Badge className="ml-3 hidden lg:block">{user.role}</Badge>
-                </PageTitle>
-            </div>
-            <PageContent>
-                <UserForm
-                    userId={user.id}
-                    sessions={sessions}
-                    accounts={accounts}
-                    defaultValues={{
-                        name: user.name,
-                        email: user.email,
-                        role: user.role ?? undefined,
-                    }}
-                />
-            </PageContent>
-        </Page>
-    );
-}

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

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

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

@@ -1,16 +1,15 @@
 import {NextResponse} from "next/server";
 import {isUuidv4} from "@/utils/verify-uuid";
-import {uploadLocalPrivate, uploadS3Private} from "@/features/upload/private/upload.action";
 import {v4 as uuidv4} from "uuid";
-import {eventEmitter} from "../../../events/route";
 import * as drizzleDb from "@/db";
 import {db} from "@/db";
 import {Backup} from "@/db/schema/07_database";
 import {and, eq} from "drizzle-orm";
-import {env} from "@/env.mjs";
 import {withUpdatedAt} from "@/db/utils";
 import {decryptedDump, getFileExtension} from "./helpers";
 import {sendNotificationsBackupRestore} from "@/features/notifications/helpers";
+import {storeBackupFiles} from "@/features/storages/helpers";
+import {eventEmitter} from "@/features/shared/event";
 
 export async function POST(
     request: Request,
@@ -25,6 +24,7 @@ export async function POST(
                 {status: 400}
             );
         }
+
         eventEmitter.emit('modification', {update: true});
 
         const agentId = (await params).agentId;
@@ -34,6 +34,7 @@ export async function POST(
         const generatedId = formData.get("generatedId") as string | null;
         const method = formData.get("method") as string | null;
 
+
         if (!generatedId || !isUuidv4(generatedId)) {
             return NextResponse.json(
                 {error: "generatedId is not a valid UUID"},
@@ -56,7 +57,8 @@ export async function POST(
             where: eq(drizzleDb.schemas.database.agentDatabaseId, generatedId),
             with: {
                 project: true,
-                alertPolicies: true
+                alertPolicies: true,
+                storagePolicies: true
             }
         });
 
@@ -106,7 +108,7 @@ export async function POST(
 
         if (status === "success") {
             const file = formData.get("file") as File | null;
-
+            const extension = formData.get("extension") as string | null;
             if (!aesKeyHex || !ivHex) {
                 return NextResponse.json({error: "Missing fields"}, {status: 400});
             }
@@ -118,41 +120,16 @@ export async function POST(
                     {status: 400}
                 );
             }
-            const fileExtension = getFileExtension(database.dbms)
+            const fileSizeBytes = file.size;
+            // const fileExtension = '.' + (file.name.split('.').pop()?.toLowerCase() || '');
+            const fileExtension = extension ? extension : getFileExtension(database.dbms)
             const decryptedFile = await decryptedDump(file, aesKeyHex, ivHex, fileExtension);
             const uuid = uuidv4();
             const fileName = `${uuid}${fileExtension}`;
             const buffer = Buffer.from(await decryptedFile.arrayBuffer());
 
-            const [settings] = await db.select().from(drizzleDb.schemas.setting).where(eq(drizzleDb.schemas.setting.name, "system")).limit(1);
-            if (!settings) {
-                throw new Error("System settings not found.");
-            }
-
-            let success: boolean, message: string, filePath: string;
-
-            const result =
-                settings.storage === "local"
-                    ? await uploadLocalPrivate(fileName, buffer)
-                    : await uploadS3Private(`${database.project?.slug}/${fileName}`, buffer, env.S3_BUCKET_NAME!);
-
-            ({success, message, filePath} = result);
-
-            if (!success) {
-                return NextResponse.json(
-                    {error: message},
-                    {status: 500}
-                );
-            }
-
-            await db
-                .update(drizzleDb.schemas.backup)
-                .set(withUpdatedAt({
-                    file: fileName,
-                    status: 'success',
-                }))
-                .where(eq(drizzleDb.schemas.backup.id, backup.id));
 
+            const storageResults = await storeBackupFiles(backup, database, buffer, fileName)
             eventEmitter.emit('modification', {update: true});
 
             await sendNotificationsBackupRestore(database, "success_backup");
@@ -190,4 +167,3 @@ export async function POST(
         );
     }
 }
-

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

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

@@ -1,17 +1,15 @@
 import {NextResponse} from "next/server";
 import {Body} from "./route";
 import {isUuidv4} from "@/utils/verify-uuid";
-import {getFileUrlPresignedLocal, getFileUrlPreSignedS3Action} from "@/features/upload/private/upload.action";
 import {Agent} from "@/db/schema/08_agent";
 import {Database} from "@/db/schema/07_database";
 import * as drizzleDb from "@/db";
 import {db as dbClient} from "@/db";
-import {and, eq} from "drizzle-orm";
+import {and, eq, inArray} from "drizzle-orm";
 import {dbmsEnumSchema, EDbmsSchema} from "@/db/schema/types";
-import {ServerActionResult} from "@/types/action-type";
-import {SafeActionResult} from "next-safe-action";
-import {ZodString} from "zod";
 import {withUpdatedAt} from "@/db/utils";
+import type {StorageInput} from "@/features/storages/types";
+import {dispatchStorage} from "@/features/storages/dispatch";
 
 export async function handleDatabases(body: Body, agent: Agent, lastContact: Date) {
     const databasesResponse = [];
@@ -48,6 +46,12 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
                     {status: 500}
                 );
             }
+
+            if (!dbmsEnumSchema.safeParse(db.dbms).success) {
+                console.log(`Database type not available: ${db.dbms}`);
+                continue;
+            }
+
             const [databaseCreated] = await dbClient
                 .insert(drizzleDb.schemas.database)
                 .values({
@@ -66,84 +70,76 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
 
             const [databaseUpdated] = await dbClient
                 .update(drizzleDb.schemas.database)
-                .set({
+                .set(withUpdatedAt({
+                    name: db.name,
                     agentId: agent.id,
                     lastContact: lastContact
-                })
+                }))
                 .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 fileName = backupToRestore?.file
+                const input: StorageInput = {
+                    action: "get",
+                    data: {
+                        path: restoration.backupStorage.path,
+                        signedUrl: true,
+                    },
+                    metadata: {
+                        storageId: restoration.backupStorage.storageChannelId,
+                        fileKind: "backups"
+                    }
+                };
 
-                let data: SafeActionResult<string, ZodString, readonly [], {
-                    _errors?: string[] | undefined;
-                }, readonly [], ServerActionResult<string>, object> | undefined
 
                 try {
+                    const result = await dispatchStorage(input, undefined, restoration.backupStorage.storageChannelId);
 
-                    if (settings.storage == "local") {
-                        data = await getFileUrlPresignedLocal({fileName: fileName!})
-                    } else if (settings.storage == "s3") {
-
-                        data = await getFileUrlPreSignedS3Action(`backups/${backupToRestore?.database.project?.slug}/${fileName}`);
-                    }
-
-                    if (data?.data?.success) {
-                        urlBackup = data.data.value ?? "";
+                    if (result.success) {
+                        urlBackup = result.url ?? "";
                     } else {
                         await dbClient
                             .update(drizzleDb.schemas.restoration)
                             .set({status: "failed"})
                             .where(eq(drizzleDb.schemas.restoration.id, restoration.id));
 
-                        // @ts-ignore
-                        const errorMessage = data?.data?.actionError?.message || "Failed to get presigned URL";
+                        const errorMessage = "Failed to get backup URL";
                         console.error("Restoration failed: ", errorMessage);
-
                         continue;
                     }
                 } catch (err) {
@@ -152,9 +148,48 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
                         .update(drizzleDb.schemas.restoration)
                         .set({status: "failed"})
                         .where(eq(drizzleDb.schemas.restoration.id, restoration.id));
-
                     continue;
                 }
+
+
+                // const fileName = backupToRestore?.file
+                //
+                // let data: SafeActionResult<string, ZodString, readonly [], {
+                //     _errors?: string[] | undefined;
+                // }, readonly [], ServerActionResult<string>, object> | undefined
+                //
+                // try {
+                //
+                //     if (settings.storage == "local") {
+                //         data = await getFileUrlPresignedLocal({fileName: fileName!})
+                //     } else if (settings.storage == "s3") {
+                //
+                //         data = await getFileUrlPreSignedS3Action(`backups/${backupToRestore?.database.project?.slug}/${fileName}`);
+                //     }
+                //
+                //     if (data?.data?.success) {
+                //         urlBackup = data.data.value ?? "";
+                //     } else {
+                //         await dbClient
+                //             .update(drizzleDb.schemas.restoration)
+                //             .set({status: "failed"})
+                //             .where(eq(drizzleDb.schemas.restoration.id, restoration.id));
+                //
+                //         // @ts-ignore
+                //         const errorMessage = data?.data?.actionError?.message || "Failed to get presigned URL";
+                //         console.error("Restoration failed: ", errorMessage);
+                //
+                //         continue;
+                //     }
+                // } catch (err) {
+                //     console.error("Restoration crashed unexpectedly:", err);
+                //     await dbClient
+                //         .update(drizzleDb.schemas.restoration)
+                //         .set({status: "failed"})
+                //         .where(eq(drizzleDb.schemas.restoration.id, restoration.id));
+                //
+                //     continue;
+                // }
                 await dbClient
                     .update(drizzleDb.schemas.restoration)
                     .set({status: "ongoing"})

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

@@ -1,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,
@@ -38,10 +30,8 @@ export async function POST(
         const lastContact = new Date();
         let message: string
 
-
         if (!isUuidv4(agentId)) {
             message = "agentId is not a valid uuid"
-            console.log(message)
             return NextResponse.json(
                 {error: "agentId is not a valid uuid"},
                 {status: 500}
@@ -54,12 +44,10 @@ export async function POST(
 
         if (!agent) {
             message = "Agent not found"
-            console.log(message)
             return NextResponse.json({error: message}, {status: 404})
         }
         const databasesResponse = await handleDatabases(body, agent, lastContact)
 
-
         await db
             .update(drizzleDb.schemas.agent)
             .set(withUpdatedAt({
@@ -77,7 +65,6 @@ export async function POST(
             },
             databases: databasesResponse
         }
-        console.log(response)
 
         return Response.json(response)
     } catch (error) {

app/api/events/route.ts

@@ -2,8 +2,9 @@ import {EventEmitter} from 'events';
 import {auth} from "@/lib/auth/auth";
 import {headers} from "next/headers";
 import {NextResponse} from "next/server";
+import {eventEmitter} from "@/features/shared/event";
 
-export const eventEmitter = new EventEmitter();
+// export const eventEmitter = new EventEmitter();
 
 export async function GET(request: Request) {
 
@@ -19,7 +20,6 @@ export async function GET(request: Request) {
         new ReadableStream({
             start(controller) {
                 console.log('Stream started');
-
                 const handleModification = (data: any) => {
                     console.log('Modification event triggered:', data);
                     controller.enqueue(`event: modification\n`);
@@ -45,15 +45,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/layout.tsx

@@ -16,19 +16,22 @@ export const metadata: Metadata = {
     description: process.env.PROJECT_DESCRIPTION ?? undefined,
 };
 
-export default function RootLayout({
-                                       children,
-                                   }: Readonly<{
+export default async function RootLayout({
+                                             children,
+                                         }: Readonly<{
     children: React.ReactNode;
 }>) {
+
     return (
         <html lang="en" suppressHydrationWarning>
         <head>
-            <meta name="apple-mobile-web-app-title" content="Portabase"/>
+            <meta name="apple-mobile-web-app-title" content={title}/>
         </head>
         <body className={cn(inter.className, "h-full")}>
         <ConsoleSilencer/>
-        <Providers>{children}</Providers>
+        <Providers>
+            {children}
+        </Providers>
         </body>
         </html>
     );

app/providers.tsx

@@ -1,10 +1,13 @@
 "use client";
 
-import { PropsWithChildren, Suspense } from "react";
-import { ThemeProvider } from "@/features/theme/theme-provider";
+import {PropsWithChildren, Suspense} from "react";
+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";
 
-import { Toaster } from "@/components/ui/sonner";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 export type ProviderProps = PropsWithChildren<{}>;
 const queryClient = new QueryClient();
@@ -12,10 +15,15 @@ const queryClient = new QueryClient();
 export const Providers = (props: ProviderProps) => {
     return (
         <Suspense fallback={null}>
-            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <ThemeProvider
+                attribute="class"
+                defaultTheme="system"
+                enableSystem
+            >
+                <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: solucetechnologies/portabase:latest
     ports:
       - '8887:80'
     environment:

docker-compose.yml

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

docker/dockerfile/Dockerfile

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

docker/entrypoints/app-dev-entrypoint.sh

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

docker/entrypoints/app-prod-entrypoint.sh

@@ -7,8 +7,8 @@ else
     echo "[WARN] No TZ provided, using default container timezone"
 fi
 
-
-node server.js
+pnpm run start
+#node server.js
 
 exec "$@"
 

next.config.ts

@@ -41,6 +41,12 @@ const nextConfig: NextConfig = {
     typescript: {
         ignoreBuildErrors: true,
     },
+    experimental: {
+        serverActions: {
+            bodySizeLimit: "10gb",
+        },
+        proxyClientMaxBodySize: '10gb',
+    },
     async headers() {
         return [
             {

package.json

@@ -1,11 +1,12 @@
 {
   "name": "portabase",
-  "version": "1.1.5",
+  "version": "1.2.5-rc.7",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack -p 8887",
+    "dev": "NODE_ENV=development tsx watch server/server.ts",
     "build": "next build --experimental-build-mode compile",
-    "start": "next start",
+    "start": "NODE_ENV=production tsx server/server.ts",
+
     "lint": "next lint",
     "email": "email dev --dir ./src/components/emails",
     "db:generate": "drizzle-kit generate",
@@ -47,6 +48,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 +64,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,19 +78,23 @@
     "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",
     "react-dropzone": "^14.3.8",
     "react-email": "^4.0.13",
     "react-hook-form": "^7.56.3",
+    "react-qr-code": "^2.0.18",
     "react-resizable-panels": "^3.0.2",
     "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",
@@ -96,6 +104,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",
@@ -105,11 +114,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",
@@ -117,5 +128,5 @@
     "typescript": "^5.8.3",
     "zenstack": "2.14.2"
   },
-  "packageManager": "yarn@4.9.1"
+  "packageManager": "pnpm@10.28.1+sha512.7d7dbbca9e99447b7c3bf7a73286afaaf6be99251eb9498baefa7d406892f67b879adb3a1d7e687fc4ccc1a388c7175fbaae567a26ab44d1067b54fcb0d6a316"
 }

pnpm-workspace.yaml

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

portabase.config.ts

@@ -1,4 +1,17 @@
 
+
+export interface AuthProviderConfig {
+    id: "google" | "github" | "credential";
+    isActive: boolean;
+    icon: string;
+    isManual?: boolean;
+    credentials?: {
+        clientId: string;
+        clientSecret: string;
+    };
+}
+
+
 export const PORTABASE_DEFAULT_SETTINGS = {
     SECURITY: {
         CSP: {
@@ -62,3 +75,36 @@ export const PORTABASE_DEFAULT_SETTINGS = {
         },
     },
 };
+
+
+export const SUPPORTED_PROVIDERS: AuthProviderConfig[] = [
+    {
+        id: "google",
+        icon: "hugeicons:chrome",
+        isActive: Boolean(process.env.AUTH_GOOGLE_METHOD),
+        // isManual: true,
+        credentials: {
+            clientId: process.env.AUTH_GOOGLE_ID || "",
+            clientSecret: process.env.AUTH_GOOGLE_SECRET || "",
+        },
+    },
+    {
+        id: "github",
+        icon: "iconoir:github",
+        isActive: Boolean(process.env.AUTH_GITHUB_METHOD),
+        credentials: {
+            clientId: process.env.AUTH_GITHUB_ID || "",
+            clientSecret: process.env.AUTH_GITHUB_SECRET || "",
+        },
+    },
+    {
+        id: "credential",
+        isActive: true,
+        icon: "proicons:key",
+        isManual: true,
+        credentials: {
+            clientId: "",
+            clientSecret: "",
+        },
+    },
+];

proxy.ts

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

release

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

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/emails/auth/email-forgot-password.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import EmailLayout from "../email-layout";
+import {Heading, Text, Section, Button} from "@react-email/components";
+import {getServerUrl} from "@/utils/get-server-url";
+
+interface EmailCreateUserProps {
+    firstname?: string;
+    token: string;
+}
+
+export const EmailForgotPassword = ({firstname, token}: EmailCreateUserProps) => {
+    const baseUrl = getServerUrl();
+
+    return (
+        <EmailLayout preview="Portabase - Forgot Password">
+            <Heading className="mx-0 my-[30px] p-0 text-center font-normal text-[24px] text-black">
+                Hello <strong>{firstname}</strong>,
+            </Heading>
+            <Text className="text-[14px] text-black leading-[24px]">
+                We received a request to reset the password for your account associated with this email.
+            </Text>
+            <Text className="text-[14px] text-black leading-[24px]">
+                If you did not request this password reset, please ignore this email. Your current password
+                will remain unchanged. If this seems suspicious, please contact your administrator.
+            </Text>
+            <Section className="mt-[32px] mb-[32px] text-center">
+                <Button
+                    className="rounded bg-[#000000] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline"
+                    href={`${baseUrl}/reset-password?token=${token}`}
+                >
+                    Reset my password
+                </Button>
+            </Section>
+        </EmailLayout>
+    );
+};
+
+export default EmailForgotPassword;

src/components/emails/auth/email-new-login.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import EmailLayout from "../email-layout";
+import {Heading, Text} from "@react-email/components";
+
+interface EmailCreateUserProps {
+    firstname?: string;
+    os: string;
+    browser: string;
+    ipAddress?: string;
+}
+
+export const EmailNewLogin = ({firstname, ipAddress, os, browser}: EmailCreateUserProps) => {
+    return (
+        <EmailLayout preview="Portabase - New Login">
+            <Heading className="mx-0 my-[30px] p-0 text-center font-normal text-[24px] text-black">
+                Hello <strong>{firstname}</strong>,
+            </Heading>
+            <Text className="text-[14px] text-black leading-[24px]">
+                We detected a new login to your account.
+            </Text>
+            <Text className="text-[14px] text-black leading-[24px]">
+                <strong>Login details:</strong>
+                <br/>
+                Device: {os} - {browser}
+                <br/>
+                IP Address: {ipAddress}
+            </Text>
+        </EmailLayout>
+    );
+};
+
+export default EmailNewLogin;

src/components/emails/auth/email-verification.tsx

@@ -0,0 +1,51 @@
+import {Heading, Text, Section, Button} from "@react-email/components";
+import {getServerUrl} from "@/utils/get-server-url";
+import EmailLayout from "@/components/emails/email-layout";
+
+interface EmailCreateUserProps {
+    firstname?: string;
+    oldEmail?: string;
+    newEmail?: string;
+    url: string;
+}
+
+export const EmailVerification = ({firstname, oldEmail, newEmail, url: urlVerification}: EmailCreateUserProps) => {
+    const serverUrl = new URL(getServerUrl());
+    const url = new URL(urlVerification);
+    url.hostname = serverUrl.hostname;
+    url.port = serverUrl.port == "80" ? "" : serverUrl.port;
+    const newUrl = url.toString();
+
+    return (
+        <EmailLayout preview="Portabase email verification">
+            <Heading className="mx-0 my-[30px] p-0 text-center font-normal text-[24px] text-black">
+                Hello <strong>{firstname}</strong>,
+            </Heading>
+            <Text className="text-[14px] text-black leading-[24px]">
+                We received a request to change the email address associated with your account.
+            </Text>
+            <Text className="text-[14px] text-black leading-[24px]">
+                If you did not request this change, please ignore this email. Your current email address will remain
+                unchanged. If this seems suspicious, contact your administrator.
+            </Text>
+
+            {oldEmail && newEmail ? (
+                <Text className="text-[14px] text-black leading-[24px]">
+                    <strong>Old email address:</strong> {oldEmail}
+                    <br/>
+                    <strong>New email address:</strong> {newEmail}
+                </Text>
+            ) : null}
+
+            <Section className="mt-[32px] mb-[32px] text-center">
+                <Button
+                    className="rounded bg-[#000000] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline"
+                    href={newUrl}>
+                    Confirm email address
+                </Button>
+            </Section>
+        </EmailLayout>
+    );
+};
+
+export default EmailVerification;

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

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

src/components/emails/email-layout.tsx

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

src/components/emails/email-reset-password.tsx

@@ -1,30 +0,0 @@
-import * as React from "react";
-import EmailLayout from "./email-layout";
-import {Text, Section, Button} from "@react-email/components";
-
-export interface EmailResetPasswordProps {
-    url: string;
-}
-
-export const EmailResetPassword = ({url}: EmailResetPasswordProps) => {
-    return (
-        <EmailLayout preview="Email for password reset of your Portabase account">
-            <Text className="text-base   font-bold ">Hello !</Text>
-            <Text className="text-base font-light  ">You are receiving this email because we
-                received a password reset request for your account.</Text>{" "}
-            <Section className="mt-[32px] mb-[32px] text-center">
-                <Button
-                    className="rounded bg-[#000000] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline"
-                    href={url}
-                >
-                    Reset Password
-                </Button>
-            </Section>
-            <Text className="text-base font-light  ">If you did not request a password reset, no
-                further action is required.</Text>
-            <Text className="text-base font-light  ">Regards,<br/>Portabase</Text>
-        </EmailLayout>
-    );
-};
-
-export default EmailResetPassword;

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/ui/dropzone.tsx

@@ -0,0 +1,850 @@
+"use client"
+import {cn} from "@/lib/utils";
+import {
+    createContext,
+    forwardRef,
+    useCallback,
+    useContext,
+    useId,
+    useMemo,
+    useReducer,
+    useState,
+} from "react";
+import {
+    Accept,
+    FileRejection,
+    useDropzone as rootUseDropzone,
+} from "react-dropzone";
+import {Button, ButtonVariantsProps} from "@/components/ui/button";
+
+type DropzoneResult<TUploadRes, TUploadError> =
+    | {
+    status: "pending";
+}
+    | {
+    status: "error";
+    error: TUploadError;
+}
+    | {
+    status: "success";
+    result: TUploadRes;
+};
+
+export type FileStatus<TUploadRes, TUploadError> = {
+    id: string;
+    fileName: string;
+    file: File;
+    tries: number;
+} & (
+    | {
+    status: "pending";
+    result?: undefined;
+    error?: undefined;
+}
+    | {
+    status: "error";
+    error: TUploadError;
+    result?: undefined;
+}
+    | {
+    status: "success";
+    result: TUploadRes;
+    error?: undefined;
+}
+    );
+
+const fileStatusReducer = <TUploadRes, TUploadError>(
+    state: FileStatus<TUploadRes, TUploadError>[],
+    action:
+        | {
+        type: "add";
+        id: string;
+        fileName: string;
+        file: File;
+    }
+        | {
+        type: "remove";
+        id: string;
+    }
+        | ({
+        type: "update-status";
+        id: string;
+    } & DropzoneResult<TUploadRes, TUploadError>),
+): FileStatus<TUploadRes, TUploadError>[] => {
+    switch (action.type) {
+        case "add":
+            return [
+                ...state,
+                {
+                    id: action.id,
+                    fileName: action.fileName,
+                    file: action.file,
+                    status: "pending",
+                    tries: 1,
+                },
+            ];
+        case "remove":
+            return state.filter((fileStatus) => fileStatus.id !== action.id);
+        case "update-status":
+            return state.map((fileStatus) => {
+                if (fileStatus.id === action.id) {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const {id, type, ...rest} = action;
+                    return {
+                        ...fileStatus,
+                        ...rest,
+                        tries:
+                            action.status === "pending"
+                                ? fileStatus.tries + 1
+                                : fileStatus.tries,
+                    } as FileStatus<TUploadRes, TUploadError>;
+                }
+                return fileStatus;
+            });
+    }
+};
+type DropZoneErrorCode = (typeof dropZoneErrorCodes)[number];
+const dropZoneErrorCodes = [
+    "file-invalid-type",
+    "file-too-large",
+    "file-too-small",
+    "too-many-files",
+] as const;
+
+const getDropZoneErrorCodes = (fileRejections: FileRejection[]) => {
+    const errors = fileRejections.map((rejection) => {
+        return rejection.errors
+            .filter((error) =>
+                dropZoneErrorCodes.includes(error.code as DropZoneErrorCode),
+            )
+            .map((error) => error.code) as DropZoneErrorCode[];
+    });
+    return Array.from(new Set(errors.flat()));
+};
+
+const getRootError = (
+    errorCodes: DropZoneErrorCode[],
+    limits: {
+        accept?: Accept;
+        maxSize?: number;
+        minSize?: number;
+        maxFiles?: number;
+    },
+) => {
+    const errors = errorCodes.map((error) => {
+        switch (error) {
+            case "file-invalid-type":
+                const acceptedTypes = Object.values(limits.accept ?? {})
+                    .flat()
+                    .join(", ");
+                return `only ${acceptedTypes} are allowed`;
+            case "file-too-large":
+                const maxMb = limits.maxSize
+                    ? (limits.maxSize / (1024 * 1024)).toFixed(2)
+                    : "infinite?";
+                return `max size is ${maxMb}MB`;
+            case "file-too-small":
+                const roundedMinSize = limits.minSize
+                    ? (limits.minSize / (1024 * 1024)).toFixed(2)
+                    : "negative?";
+                return `min size is ${roundedMinSize}MB`;
+            case "too-many-files":
+                return `max ${limits.maxFiles} files`;
+        }
+    });
+    const joinedErrors = errors.join(", ");
+    return joinedErrors.charAt(0).toUpperCase() + joinedErrors.slice(1);
+};
+
+type UseDropzoneProps<TUploadRes, TUploadError> = {
+    onDropFile: (
+        file: File,
+    ) => Promise<
+        Exclude<DropzoneResult<TUploadRes, TUploadError>, { status: "pending" }>
+    >;
+    onRemoveFile?: (id: string) => void | Promise<void>;
+    onFileUploaded?: (result: TUploadRes) => void;
+    onFileUploadError?: (error: TUploadError) => void;
+    onAllUploaded?: () => void;
+    onRootError?: (error: string | undefined) => void;
+    maxRetryCount?: number;
+    autoRetry?: boolean;
+    validation?: {
+        accept?: Accept;
+        minSize?: number;
+        maxSize?: number;
+        maxFiles?: number;
+    };
+    shiftOnMaxFiles?: boolean;
+} & (TUploadError extends string
+    ? {
+        shapeUploadError?: (error: TUploadError) => string | void;
+    }
+    : {
+        shapeUploadError: (error: TUploadError) => string | void;
+    });
+
+interface UseDropzoneReturn<TUploadRes, TUploadError> {
+    getRootProps: ReturnType<typeof rootUseDropzone>["getRootProps"];
+    getInputProps: ReturnType<typeof rootUseDropzone>["getInputProps"];
+    onRemoveFile: (id: string) => Promise<void>;
+    onRetry: (id: string) => Promise<void>;
+    canRetry: (id: string) => boolean;
+    fileStatuses: FileStatus<TUploadRes, TUploadError>[];
+    isInvalid: boolean;
+    isDragActive: boolean;
+    rootError: string | undefined;
+    inputId: string;
+    rootMessageId: string;
+    rootDescriptionId: string;
+    getFileMessageId: (id: string) => string;
+}
+
+const useDropzone = <TUploadRes, TUploadError = string>(
+    props: UseDropzoneProps<TUploadRes, TUploadError>,
+): UseDropzoneReturn<TUploadRes, TUploadError> => {
+    const {
+        onDropFile: pOnDropFile,
+        onRemoveFile: pOnRemoveFile,
+        shapeUploadError: pShapeUploadError,
+        onFileUploaded: pOnFileUploaded,
+        onFileUploadError: pOnFileUploadError,
+        onAllUploaded: pOnAllUploaded,
+        onRootError: pOnRootError,
+        maxRetryCount,
+        autoRetry,
+        validation,
+        shiftOnMaxFiles,
+    } = props;
+
+    const inputId = useId();
+    const rootMessageId = `${inputId}-root-message`;
+    const rootDescriptionId = `${inputId}-description`;
+    const [rootError, _setRootError] = useState<string | undefined>(undefined);
+
+    const setRootError = useCallback(
+        (error: string | undefined) => {
+            _setRootError(error);
+            if (pOnRootError !== undefined) {
+                pOnRootError(error);
+            }
+        },
+        [pOnRootError, _setRootError],
+    );
+
+    const [fileStatuses, dispatch] = useReducer(fileStatusReducer, []);
+
+    const isInvalid = useMemo(() => {
+        return (
+            fileStatuses.filter((file) => file.status === "error").length > 0 ||
+            rootError !== undefined
+        );
+    }, [fileStatuses, rootError]);
+
+    const _uploadFile = useCallback(
+        async (file: File, id: string, tries = 0) => {
+            const result = await pOnDropFile(file);
+
+            if (result.status === "error") {
+                if (autoRetry === true && tries < (maxRetryCount ?? Infinity)) {
+                    dispatch({type: "update-status", id, status: "pending"});
+                    return _uploadFile(file, id, tries + 1);
+                }
+
+                dispatch({
+                    type: "update-status",
+                    id,
+                    status: "error",
+                    error:
+                        pShapeUploadError !== undefined
+                            ? pShapeUploadError(result.error)
+                            : result.error,
+                });
+                if (pOnFileUploadError !== undefined) {
+                    pOnFileUploadError(result.error);
+                }
+                return;
+            }
+            if (pOnFileUploaded !== undefined) {
+                pOnFileUploaded(result.result);
+            }
+            dispatch({
+                type: "update-status",
+                id,
+                ...result,
+            });
+        },
+        [
+            autoRetry,
+            maxRetryCount,
+            pOnDropFile,
+            pShapeUploadError,
+            pOnFileUploadError,
+            pOnFileUploaded,
+        ],
+    );
+
+    const onRemoveFile = useCallback(
+        async (id: string) => {
+            await pOnRemoveFile?.(id);
+            dispatch({type: "remove", id});
+        },
+        [pOnRemoveFile],
+    );
+
+    const canRetry = useCallback(
+        (id: string) => {
+            const fileStatus = fileStatuses.find((file) => file.id === id);
+            return (
+                fileStatus?.status === "error" &&
+                fileStatus.tries < (maxRetryCount ?? Infinity)
+            );
+        },
+        [fileStatuses, maxRetryCount],
+    );
+
+    const onRetry = useCallback(
+        async (id: string) => {
+            if (!canRetry(id)) {
+                return;
+            }
+            dispatch({type: "update-status", id, status: "pending"});
+            const fileStatus = fileStatuses.find((file) => file.id === id);
+            if (!fileStatus || fileStatus.status !== "error") {
+                return;
+            }
+            await _uploadFile(fileStatus.file, id);
+        },
+        [canRetry, fileStatuses, _uploadFile],
+    );
+
+    const getFileMessageId = (id: string) => `${inputId}-${id}-message`;
+
+    const dropzone = rootUseDropzone({
+        accept: validation?.accept,
+        minSize: validation?.minSize,
+        maxSize: validation?.maxSize,
+        onDropAccepted: async (newFiles) => {
+            setRootError(undefined);
+
+            // useDropzone hook only checks max file count per group of uploaded files, allows going over if in multiple batches
+            const fileCount = fileStatuses.length;
+            const maxNewFiles =
+                validation?.maxFiles === undefined
+                    ? Infinity
+                    : validation?.maxFiles - fileCount;
+
+            if (maxNewFiles < newFiles.length) {
+                if (shiftOnMaxFiles === true) {
+                } else {
+                    setRootError(getRootError(["too-many-files"], validation ?? {}));
+                }
+            }
+
+            const slicedNewFiles =
+                shiftOnMaxFiles === true ? newFiles : newFiles.slice(0, maxNewFiles);
+
+            const onDropFilePromises = slicedNewFiles.map(async (file, index) => {
+                if (fileCount + 1 > maxNewFiles) {
+                    await onRemoveFile(fileStatuses[index].id);
+                }
+
+                const id = crypto.randomUUID();
+                dispatch({type: "add", fileName: file.name, file, id});
+                await _uploadFile(file, id);
+            });
+
+            await Promise.all(onDropFilePromises);
+            if (pOnAllUploaded !== undefined) {
+                pOnAllUploaded();
+            }
+        },
+        onDropRejected: (fileRejections) => {
+            const errorMessage = getRootError(
+                getDropZoneErrorCodes(fileRejections),
+                validation ?? {}
+            );
+            setRootError(errorMessage);
+        },
+    });
+
+    return {
+        getRootProps: dropzone.getRootProps,
+        getInputProps: dropzone.getInputProps,
+        inputId,
+        rootMessageId,
+        rootDescriptionId,
+        getFileMessageId,
+        onRemoveFile,
+        onRetry,
+        canRetry,
+        fileStatuses: fileStatuses as FileStatus<TUploadRes, TUploadError>[],
+        isInvalid,
+        rootError,
+        isDragActive: dropzone.isDragActive,
+    };
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const DropZoneContext = createContext<UseDropzoneReturn<any, any>>({
+    getRootProps: () => ({}) as never,
+    getInputProps: () => ({}) as never,
+    onRemoveFile: async () => {
+    },
+    onRetry: async () => {
+    },
+    canRetry: () => false,
+    fileStatuses: [],
+    isInvalid: false,
+    isDragActive: false,
+    rootError: undefined,
+    inputId: "",
+    rootMessageId: "",
+    rootDescriptionId: "",
+    getFileMessageId: () => "",
+});
+
+const useDropzoneContext = <TUploadRes, TUploadError>() => {
+    return useContext(DropZoneContext) as UseDropzoneReturn<
+        TUploadRes,
+        TUploadError
+    >;
+};
+
+interface DropzoneProps<TUploadRes, TUploadError>
+    extends UseDropzoneReturn<TUploadRes, TUploadError> {
+    children: React.ReactNode;
+}
+
+const Dropzone = <TUploadRes, TUploadError>(
+    props: DropzoneProps<TUploadRes, TUploadError>,
+) => {
+    const {children, ...rest} = props;
+    return (
+        <DropZoneContext.Provider value={rest}>{children}</DropZoneContext.Provider>
+    );
+};
+Dropzone.displayName = "Dropzone";
+
+interface DropZoneAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+
+const DropZoneArea = forwardRef<HTMLDivElement, DropZoneAreaProps>(
+    ({className, children, ...props}, forwardedRef) => {
+        const context = useDropzoneContext();
+
+        if (!context) {
+            throw new Error("DropzoneArea must be used within a Dropzone");
+        }
+
+        const {onFocus, onBlur, onDragEnter, onDragLeave, onDrop, ref} =
+            context.getRootProps();
+
+        return (
+            // A11y behavior is handled through Trigger. All of these are only relevant to drag and drop which means this should be fine?
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            <div
+                ref={(instance) => {
+                    // TODO: test if this actually works?
+                    ref.current = instance;
+                    if (typeof forwardedRef === "function") {
+                        forwardedRef(instance);
+                    } else if (forwardedRef) {
+                        forwardedRef.current = instance;
+                    }
+                }}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                onDragEnter={onDragEnter}
+                onDragLeave={onDragLeave}
+                onDrop={onDrop}
+                {...props}
+                aria-label="dropzone"
+                className={cn(
+                    "flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                    context.isDragActive && "animate-pulse bg-black/5",
+                    context.isInvalid && "border-destructive",
+                    className,
+                )}
+            >
+                {children}
+            </div>
+        );
+    },
+);
+DropZoneArea.displayName = "DropZoneArea";
+
+export interface DropzoneDescriptionProps
+    extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+
+const DropzoneDescription = forwardRef<
+    HTMLParagraphElement,
+    DropzoneDescriptionProps
+>((props, ref) => {
+    const {className, ...rest} = props;
+    const context = useDropzoneContext();
+    if (!context) {
+        throw new Error("DropzoneDescription must be used within a Dropzone");
+    }
+
+    return (
+        <p
+            ref={ref}
+            id={context.rootDescriptionId}
+            {...rest}
+            className={cn("pb-1 text-sm text-muted-foreground", className)}
+        />
+    );
+});
+DropzoneDescription.displayName = "DropzoneDescription";
+
+interface DropzoneFileListContext<TUploadRes, TUploadError> {
+    onRemoveFile: () => Promise<void>;
+    onRetry: () => Promise<void>;
+    fileStatus: FileStatus<TUploadRes, TUploadError>;
+    canRetry: boolean;
+    dropzoneId: string;
+    messageId: string;
+}
+
+const DropzoneFileListContext = createContext<
+    DropzoneFileListContext<unknown, unknown>
+>({
+    onRemoveFile: async () => {
+    },
+    onRetry: async () => {
+    },
+    fileStatus: {} as FileStatus<unknown, unknown>,
+    canRetry: false,
+    dropzoneId: "",
+    messageId: "",
+});
+
+const useDropzoneFileListContext = () => {
+    return useContext(DropzoneFileListContext);
+};
+
+interface DropZoneFileListProps
+    extends React.OlHTMLAttributes<HTMLOListElement> {
+}
+
+const DropzoneFileList = forwardRef<HTMLOListElement, DropZoneFileListProps>(
+    (props, ref) => {
+        const context = useDropzoneContext();
+        if (!context) {
+            throw new Error("DropzoneFileList must be used within a Dropzone");
+        }
+        return (
+            <ol
+                ref={ref}
+                aria-label="dropzone-file-list"
+                {...props}
+                className={cn("flex flex-col gap-4", props.className)}
+            >
+                {props.children}
+            </ol>
+        );
+    },
+);
+DropzoneFileList.displayName = "DropzoneFileList";
+
+interface DropzoneFileListItemProps<TUploadRes, TUploadError>
+    extends React.LiHTMLAttributes<HTMLLIElement> {
+    file: FileStatus<TUploadRes, TUploadError>;
+}
+
+const DropzoneFileListItem = forwardRef<
+    HTMLLIElement,
+    DropzoneFileListItemProps<unknown, unknown>
+>(({className, ...props}, ref) => {
+    const fileId = props.file.id;
+    const {
+        onRemoveFile: cOnRemoveFile,
+        onRetry: cOnRetry,
+        getFileMessageId: cGetFileMessageId,
+        canRetry: cCanRetry,
+        inputId: cInputId,
+    } = useDropzoneContext();
+
+    const onRemoveFile = useCallback(
+        () => cOnRemoveFile(fileId),
+        [fileId, cOnRemoveFile],
+    );
+    const onRetry = useCallback(() => cOnRetry(fileId), [fileId, cOnRetry]);
+    const messageId = cGetFileMessageId(fileId);
+    const isInvalid = props.file.status === "error";
+    const canRetry = useMemo(() => cCanRetry(fileId), [fileId, cCanRetry]);
+    return (
+        <DropzoneFileListContext.Provider
+            value={{
+                onRemoveFile,
+                onRetry,
+                fileStatus: props.file,
+                canRetry,
+                dropzoneId: cInputId,
+                messageId,
+            }}
+        >
+            <li
+                ref={ref}
+                aria-label="dropzone-file-list-item"
+                aria-describedby={isInvalid ? messageId : undefined}
+                className={cn(
+                    "flex flex-col justify-center gap-2 rounded-md bg-muted/40 px-4 py-2",
+                    className,
+                )}
+            >
+                {props.children}
+            </li>
+        </DropzoneFileListContext.Provider>
+    );
+});
+DropzoneFileListItem.displayName = "DropzoneFileListItem";
+
+interface DropzoneFileMessageProps
+    extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+
+const DropzoneFileMessage = forwardRef<
+    HTMLParagraphElement,
+    DropzoneFileMessageProps
+>((props, ref) => {
+    const {children, ...rest} = props;
+    const context = useDropzoneFileListContext();
+    if (!context) {
+        throw new Error(
+            "DropzoneFileMessage must be used within a DropzoneFileListItem",
+        );
+    }
+
+    const body =
+        context.fileStatus.status === "error"
+            ? String(context.fileStatus.error)
+            : children;
+    return (
+        <p
+            ref={ref}
+            id={context.messageId}
+            {...rest}
+            className={cn(
+                "h-5 text-[0.8rem] font-medium text-destructive",
+                rest.className,
+            )}
+        >
+            {body}
+        </p>
+    );
+});
+DropzoneFileMessage.displayName = "DropzoneFileMessage";
+
+interface DropzoneMessageProps
+    extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+
+const DropzoneMessage = forwardRef<HTMLParagraphElement, DropzoneMessageProps>(
+    (props, ref) => {
+        const {children, ...rest} = props;
+        const context = useDropzoneContext();
+        if (!context) {
+            throw new Error("DropzoneRootMessage must be used within a Dropzone");
+        }
+
+        const body = context.rootError ? String(context.rootError) : children;
+        return (
+            <p
+                ref={ref}
+                id={context.rootMessageId}
+                {...rest}
+                className={cn(
+                    "h-5 text-[0.8rem] font-medium text-destructive",
+                    rest.className,
+                )}
+            >
+                {body}
+            </p>
+        );
+    },
+);
+DropzoneMessage.displayName = "DropzoneMessage";
+
+interface DropzoneRemoveFileProps extends ButtonVariantsProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+
+const DropzoneRemoveFile = forwardRef<
+    HTMLButtonElement,
+    DropzoneRemoveFileProps
+>(({className, ...props}, ref) => {
+    const context = useDropzoneFileListContext();
+    if (!context) {
+        throw new Error(
+            "DropzoneRemoveFile must be used within a DropzoneFileListItem",
+        );
+    }
+    return (
+        <Button
+            ref={ref}
+            onClick={context.onRemoveFile}
+            type="button"
+            size="icon"
+            {...props}
+            className={cn(
+                "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+                className,
+            )}
+        >
+            {props.children}
+            <span className="sr-only">Remove file</span>
+        </Button>
+    );
+});
+DropzoneRemoveFile.displayName = "DropzoneRemoveFile";
+
+interface DropzoneRetryFileProps extends ButtonVariantsProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+
+const DropzoneRetryFile = forwardRef<HTMLButtonElement, DropzoneRetryFileProps>(
+    ({className, ...props}, ref) => {
+        const context = useDropzoneFileListContext();
+
+        if (!context) {
+            throw new Error(
+                "DropzoneRetryFile must be used within a DropzoneFileListItem",
+            );
+        }
+
+        const canRetry = context.canRetry;
+
+        return (
+            <Button
+                ref={ref}
+                aria-disabled={!canRetry}
+                aria-label="retry"
+                onClick={context.onRetry}
+                type="button"
+                size="icon"
+                {...props}
+                className={cn(
+                    "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+                    className,
+                )}
+            >
+                {props.children}
+                <span className="sr-only">Retry</span>
+            </Button>
+        );
+    },
+);
+DropzoneRetryFile.displayName = "DropzoneRetryFile";
+
+interface DropzoneTriggerProps
+    extends React.LabelHTMLAttributes<HTMLLabelElement> {
+}
+
+const DropzoneTrigger = forwardRef<HTMLLabelElement, DropzoneTriggerProps>(
+    ({className, children, ...props}, ref) => {
+        const context = useDropzoneContext();
+        if (!context) {
+            throw new Error("DropzoneTrigger must be used within a Dropzone");
+        }
+
+        const {fileStatuses, getFileMessageId} = context;
+
+        const fileMessageIds = useMemo(
+            () =>
+                fileStatuses
+                    .filter((file) => file.status === "error")
+                    .map((file) => getFileMessageId(file.id)),
+            [fileStatuses, getFileMessageId],
+        );
+
+        return (
+            <label
+                ref={ref}
+                {...props}
+                className={cn(
+                    "cursor-pointer rounded-sm bg-secondary px-4 py-2 font-medium ring-offset-background transition-colors focus-within:outline-none hover:bg-secondary/80 has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-ring has-[input:focus-visible]:ring-offset-2",
+                    className,
+                )}
+            >
+                {children}
+                <input
+                    {...context.getInputProps({
+                        style: {
+                            display: undefined,
+                        },
+                        className: "sr-only",
+                        tabIndex: undefined,
+                    })}
+                    aria-describedby={
+                        context.isInvalid
+                            ? [context.rootMessageId, ...fileMessageIds].join(" ")
+                            : undefined
+                    }
+                    aria-invalid={context.isInvalid}
+                />
+            </label>
+        );
+    },
+);
+DropzoneTrigger.displayName = "DropzoneTrigger";
+
+interface InfiniteProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    status: "pending" | "success" | "error";
+}
+
+const valueTextMap = {
+    pending: "indeterminate",
+    success: "100%",
+    error: "error",
+};
+
+const InfiniteProgress = forwardRef<HTMLDivElement, InfiniteProgressProps>(
+    ({className, ...props}, ref) => {
+        const done = props.status === "success" || props.status === "error";
+        const error = props.status === "error";
+        return (
+            <div
+                ref={ref}
+                role="progressbar"
+                aria-valuemin={0}
+                aria-valuemax={100}
+                aria-valuetext={valueTextMap[props.status]}
+                {...props}
+                className={cn(
+                    "relative h-2 w-full overflow-hidden rounded-full bg-muted",
+                    className,
+                )}
+            >
+                <div
+                    //   TODO: add proper done transition
+                    className={cn(
+                        "h-full w-full rounded-full bg-primary",
+                        done ? "translate-x-0" : "animate-infinite-progress",
+                        error && "bg-destructive",
+                    )}
+                />
+            </div>
+        );
+    },
+);
+InfiniteProgress.displayName = "InfiniteProgress";
+
+export {
+    Dropzone,
+    DropZoneArea,
+    DropzoneDescription,
+    DropzoneFileList,
+    DropzoneFileListItem,
+    DropzoneFileMessage,
+    DropzoneMessage,
+    DropzoneRemoveFile,
+    DropzoneRetryFile,
+    DropzoneTrigger,
+    InfiniteProgress,
+    useDropzone,
+};

src/components/ui/password-input-indicator.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {Ref, useState} from "react";
+import {Ref, useEffect, useState} from "react";
 import {Check, X} from "lucide-react";
 import {motion, AnimatePresence} from "framer-motion";
 import {
@@ -22,6 +22,9 @@ interface PasswordStrengthInputProps {
     };
     label?: string;
     description?: string;
+    disabled?: boolean;
+    onValidChange?: (isValid: boolean) => void;
+
 }
 
 const passwordTextsFields = {
@@ -48,6 +51,7 @@ export function PasswordStrengthInput({
                                           field,
                                           label,
                                           description,
+                                          disabled, onValidChange
                                       }: PasswordStrengthInputProps) {
     const text = passwordTextsFields
     const [isVisible, setIsVisible] = useState(false);
@@ -83,6 +87,14 @@ export function PasswordStrengthInput({
         return text.strength.strong;
     };
 
+    useEffect(() => {
+        if (strengthScore === requirements.length) {
+            onValidChange?.(true);
+        } else {
+            onValidChange?.(false);
+        }
+    }, [strengthScore, onValidChange]);
+
     return (
         <FormItem>
             <FormLabel>{label ?? text.label}</FormLabel>
@@ -99,6 +111,8 @@ export function PasswordStrengthInput({
                         }}
                         ref={field.ref}
                         name={field.name}
+                        disabled={disabled}
+
                     />
                 </FormControl>
             </div>

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

@@ -1,31 +1,49 @@
-"use client"
-import {env} from "@/env.mjs";
-import React, {useEffect, useState} from "react";
-import {useTheme} from "next-themes";
+"use client";
 
+import {env} from "@/env.mjs";
+import {useTheme} from "next-themes";
+import Image from "next/image";
+import {useEffect, useState} from "react";
 
 export const AuthLogoSection = () => {
-
     const {resolvedTheme} = useTheme();
     const [mounted, setMounted] = useState(false);
+    const [loaded, setLoaded] = useState(false);
 
     useEffect(() => {
         setMounted(true);
     }, []);
 
-    if (!mounted) return null;
+    const imageTheme =
+        resolvedTheme === "dark"
+            ? "/images/logo-dark.png"
+            : "/images/logo-light.png";
 
+    const handleLoad = () => setLoaded(true);
+
+    const style = {
+        transition: "opacity 0.3s ease-in-out",
+        opacity: loaded ? 1 : 0,
+    };
 
-    const imageTheme = resolvedTheme === "dark" ? "/images/logo-white.png" : "/images/logo-black.png";
 
     return (
-        <div className="sm:mx-auto sm:w-full sm:max-w-md flex items-center justify-center space-x-2">
-            <img
-                className="p-12 text-black dark:text-white"
-                src={imageTheme}
-                alt="Logo"
-            />
-            <span className="text-sm text-muted-foreground -ml-12 -mb-12">v{env.NEXT_PUBLIC_PROJECT_VERSION}</span>
+        <div className="sm:mx-auto sm:w-full sm:max-w-md relative flex items-center justify-center h-[160px]">
+            {mounted && (
+                <Image
+                    src={imageTheme}
+                    alt="Logo"
+                    fill
+                    priority
+                    className="object-contain p-10"
+                    onLoad={handleLoad}
+                    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/forgot-password/forgot-password-form.tsx

@@ -1,113 +0,0 @@
-"use client";
-
-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 {Form} from "@/components/ui/form";
-import {Button} from "@/components/ui/button";
-import {toast} from "sonner";
-import {useMutation} from "@tanstack/react-query";
-import {TooltipProvider} from "@/components/ui/tooltip";
-import Link from "next/link";
-import {PasswordInput} from "@/components/ui/password-input";
-import {LoginSchema, LoginType} from "@/components/wrappers/auth/login/login-form/login-form.schema";
-import {SocialAuthButton, SocialProviderType} from "@/components/wrappers/auth/login/button-auth/social-auth-button";
-import {authClient, signIn} from "@/lib/auth/auth-client";
-import {useRouter} from "next/navigation";
-import {Icon} from "@iconify/react";
-import {useEffect, useState} from "react";
-import {Separator} from "@/components/ui/separator";
-import {
-    ForgotPasswordSchema,
-    ForgotPasswordType
-} from "@/components/wrappers/auth/forgot-password/forgot-password.schema";
-import {ArrowLeft} from "lucide-react";
-import {getServerUrl} from "@/utils/get-server-url";
-
-export type ForgotPasswordFormProps = {};
-
-export const ForgotPasswordForm = (props: ForgotPasswordFormProps) => {
-    const router = useRouter();
-
-    const form = useZodForm({
-        schema: ForgotPasswordSchema,
-    });
-
-
-    const mutation = useMutation({
-        mutationFn: async (values: ForgotPasswordType) => {
-            try {
-                const {data, error} = await authClient.requestPasswordReset({
-                    email: values.email,
-                    redirectTo: `${getServerUrl()}/reset-password`,
-                });
-                if (error) {
-                    toast.error(error.message);
-                } else {
-                    // @ts-ignore
-                    toast.success(data.message);
-                }
-            } catch (err) {
-                console.error(err);
-                toast.error("Unexpected client error during login");
-            }
-        },
-        onError: (err: any) => {
-            toast.error(err.message || "Client error");
-        },
-    });
-
-    return (
-        <TooltipProvider>
-            <Card>
-                <CardHeader>
-                    <div className="grid gap-2 text-center mb-2">
-                        <h1 className="text-3xl font-bold">Forgot Password</h1>
-                        <p className="text-balance text-muted-foreground">
-                            Enter your email to reset your password
-                        </p>
-                    </div>
-                </CardHeader>
-                <CardContent>
-                    <Form
-                        form={form}
-                        className="flex flex-col gap-4"
-                        onSubmit={async (values) => {
-                            await mutation.mutateAsync(values);
-                        }}
-                    >
-                        <FormField
-                            control={form.control}
-                            name="email"
-                            defaultValue=""
-                            render={({field}) => (
-                                <FormItem>
-                                    <FormLabel>Email</FormLabel>
-                                    <FormControl>
-                                        <Input
-                                            autoComplete="email"
-                                            placeholder="example@portabase.io"
-                                            {...field}
-                                        />
-                                    </FormControl>
-                                    <FormMessage/>
-                                </FormItem>
-                            )}
-                        />
-
-                        <Button type="submit" disabled={mutation.isPending}>
-                            Send reset link
-                        </Button>
-                    </Form>
-
-                    <div className="mt-4 text-center text-sm flex items-center justify-center gap-1">
-                        <ArrowLeft size={14} className="text-gray-400"/>
-                        <Link href="/login" className="underline">
-                            Go back
-                        </Link>
-                    </div>
-                </CardContent>
-            </Card>
-        </TooltipProvider>
-    );
-};

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

@@ -0,0 +1,24 @@
+"use client";
+
+import { toast } from "sonner";
+import { useRouter, useSearchParams } from "next/navigation";
+import TwoFactorForm from "@/components/wrappers/dashboard/profile/form/2fa-form";
+
+export const GuardForm = () => {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const callbackUrl = searchParams.get("redirect") || "/dashboard";
+
+    return (
+        <TwoFactorForm
+            onSuccess={(success) => {
+                if (success) {
+                    toast.success("Successfully logged in!");
+                    //@ts-ignore
+                    router.push(callbackUrl);
+                    router.refresh();
+                }
+            }}
+        />
+    );
+};

src/components/wrappers/auth/login/button-auth/social-auth-button.tsx

@@ -1,55 +0,0 @@
-"use client";
-import {Button} from "@/components/ui/button";
-import {signIn} from "@/lib/auth/auth-client";
-import {JSX} from "react";
-
-export type AuthButtonProps = {
-    providers: SocialProviderType[];
-    callBackURL?: string;
-};
-
-export type SocialProviderType = {
-    id:
-        | "github"
-        | "apple"
-        | "discord"
-        | "facebook"
-        | "microsoft"
-        | "google"
-        | "spotify"
-        | "twitch"
-        | "twitter"
-        | "dropbox"
-        | "kick"
-        | "linkedin"
-        | "gitlab"
-        | "tiktok"
-        | "reddit"
-        | "roblox"
-        | "vk";
-    name: string;
-    icon: JSX.Element;
-};
-
-export const SocialAuthButton = (props: AuthButtonProps): JSX.Element => {
-    return (
-        <div className="flex flex-col gap-4 mt-5">
-            {props.providers.map((provider) => (
-                <Button
-                    key={provider.id}
-                    aria-label={`Sign in with ${provider.name}`}
-                    onClick={(e) => {
-                        e.preventDefault();
-                        void signIn.social({
-                            provider: provider.id,
-                            callbackURL: props.callBackURL ?? "/dashboard/profile",
-                        });
-                    }}
-                >
-                    {provider.icon}
-                    Sign in with {provider.name}
-                </Button>
-            ))}
-        </div>
-    );
-};

src/components/wrappers/auth/login/forgot-password-form/forgot-password-form.schema.ts

@@ -1,10 +1,10 @@
+"use client";
+
 import { z } from "zod";
+import { zEmail } from "@/lib/zod";
 
 export const ForgotPasswordSchema = z.object({
-    email: z
-        .string()
-        .min(1, "Email is required")
-        .email("Invalid email address"),
+    email: zEmail(),
 });
 
-export type ForgotPasswordType = z.infer<typeof ForgotPasswordSchema>;
+export type ForgotPasswordType = z.infer<typeof ForgotPasswordSchema>;

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

@@ -0,0 +1,81 @@
+"use client";
+
+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";
+import { requestPasswordReset } from "@/lib/auth/auth-client";
+import { ButtonWithLoading } from "@/components/wrappers/common/button/button-with-loading";
+import Link from "next/link";
+import { ForgotPasswordSchema, ForgotPasswordType } from "./forgot-password-form.schema";
+import { ArrowLeft } from "lucide-react";
+
+export type ForgotPasswordFormProps = {
+    defaultValues?: ForgotPasswordType;
+};
+
+export const ForgotPasswordForm = (props: ForgotPasswordFormProps) => {
+
+    const form = useZodForm({
+        schema: ForgotPasswordSchema,
+    });
+
+    const mutation = useMutation({
+        mutationFn: async (values: ForgotPasswordType) => {
+            await requestPasswordReset(
+                {
+                    email: values.email,
+                },
+                {
+                    onSuccess: () => {
+                        toast.success("If an account with this email address exists, you will receive an email with instructions to reset your password.");
+                    },
+                    onError: (error) => {
+                        toast.error(error.error.message);
+                    },
+                }
+            );
+        },
+    });
+
+
+
+    return (
+        <Form
+            form={form}
+            className="flex flex-col gap-4 mb-1"
+            onSubmit={async (values) => {
+                await mutation.mutateAsync(values);
+            }}
+        >
+            <FormField
+                control={form.control}
+                name="email"
+                defaultValue=""
+                render={({ field }) => (
+                    <FormItem>
+                        <FormLabel>Email Address</FormLabel>
+                        <FormControl>
+                            <Input autoComplete="email" autoFocus
+                                   placeholder="example@portabase.io"
+                                   {...field} />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                )}
+            />
+
+            <div className="flex flex-col items-center gap-y-6 w-full">
+                <ButtonWithLoading className="mt-2 w-full" isPending={mutation.isPending}>
+                    Send reset link
+                </ButtonWithLoading>
+                <Link href="/login" className="group flex items-center text-sm hover:underline">
+                    <ArrowLeft className="mr-1 size-4 text-muted-foreground transition-transform group-hover:-translate-x-1" />
+                    Back to login
+                </Link>
+            </div>
+        </Form>
+    );
+};