chore(release): 1.1.10-rc.2

ui fixes
chore(release): 1.1.10-rc.1
2026-07-14 11:16:13 +02:00 · 2026-01-07 15:00:21 +01:00 · 2026-01-07 15:00:11 +01:00 · 2026-01-07 13:33:42 +01:00 · 2026-01-07 13:33:23 +01:00 · 2026-01-07 09:50:42 +01:00
141 changed files with 25318 additions and 16143 deletions
@@ -34,4 +34,4 @@ S3_USE_SSL=true
 STORAGE_TYPE=local

 # Retention
-RETENTION_CRON="* * * * *"
+RETENTION_CRON="* * * * *"
@@ -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**  
@@ -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 |  

 ---

@@ -0,0 +1,63 @@
+name: Docker Publish
+
+on:
+  workflow_call:
+    inputs:
+      image_name:
+        required: false
+        type: string
+        default: 'solucetechnologies/portabase'
+      add_latest:
+        required: false
+        type: boolean
+        default: false
+      target:
+        required: false
+        type: string
+        default: 'prod'
+      dockerfile:
+        required: false
+        type: string
+        default: './docker/dockerfile/Dockerfile'
+    secrets:
+      DOCKER_USERNAME:
+        required: true
+      DOCKER_PASSWORD:
+        required: true
+
+jobs:
+  build-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: Log in to Docker Hub
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Set tags
+        id: set-tags
+        run: |
+          REF_NAME=${GITHUB_REF#refs/tags/}
+          TAGS="${{ inputs.image_name }}:$REF_NAME"
+          if [[ "${{ inputs.add_latest }}" == "true" ]]; then
+            TAGS="$TAGS,${{ inputs.image_name }}:latest"
+          fi
+          echo "tags=$TAGS" >> $GITHUB_OUTPUT
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ${{ inputs.dockerfile }}
+          push: true
+          tags: ${{ steps.set-tags.outputs.tags }}
+          target: ${{ inputs.target }}
@@ -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"
@@ -0,0 +1,32 @@
+name: Publish Docker image for release candidate
+
+on:
+  push:
+    tags:
+      - '*-rc*'
+
+permissions:
+  contents: write
+  packages: write
+
+jobs:
+  docker_publish:
+    uses: ./.github/workflows/docker.yml
+    with:
+      add_latest: false
+    secrets:
+      DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+      DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+
+  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 }}
@@ -1,50 +1,33 @@
 name: Publish Docker image for release

 on:
-  release:
-    types: [published]
+  push:
+    tags:
+      - '*.*.*'
+      - '!*-*'
+
+permissions:
+  contents: write
+  packages: write

 jobs:
-  push_to_registry:
-    name: Push Docker image to Docker Hub
-    runs-on: ubuntu-latest
-    permissions:
-      packages: write
-      contents: read
-      attestations: write
-      id-token: write
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v4
+  docker_publish:
+    uses: ./.github/workflows/docker.yml
+    with:
+      add_latest: true
+    secrets:
+      DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+      DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}

-      - 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 }}
@@ -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
@@ -1,2 +0,0 @@
-nodeLinker: node-modules
-
@@ -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.1.10-rc.2
+date-released: "2026-01-07"
@@ -1,291 +1,71 @@
 <br />
 <div align="center">
  <a href="https://portabase.io">
-    <img src="/public/images/logo.png" alt="Logo" width="80" height="80">
+    <img src="/.github/assets/logo.png" alt="Logo" width="80" height="80">
  </a>

 <h3 align="center">Portabase</h3>
-  <p>
-    Free, open-source, and self-hosted solution for automated backup and restoration of your database instances.
+
+  <p align="center" style="margin-top: 20px; font-style: italic;">
+  <i>Portabase is a tool designed to simplify the backup and restoration of your database instances. It integrates seamlessly with <a href="https://github.com/Portabase/agent">Portabase agents</a> for managing operations securely and efficiently.</i>
  </p>

+
 [![License: Apache](https://img.shields.io/badge/License-apache-yellow.svg)](LICENSE)
 [![Docker Pulls](https://img.shields.io/docker/pulls/solucetechnologies/portabase?color=brightgreen)](https://hub.docker.com/r/solucetechnologies/portabase)
-[![Platform](https://img.shields.io/badge/platform-linux%20%7C%20macos%20%7C%20windows-lightgrey)](https://github.com/RostislavDugin/postgresus)
+[![Platform](https://img.shields.io/badge/platform-linux%20%7C%20macos%20%7C%20windows-lightgrey)](https://github.com/Portabase/portabase)

 [![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)
+[![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.

-### Option 1:  Docker Compose Setup
-
-Create a `docker-compose.yml` file with the following configuration:
-
-```yaml
-name: portabase
-
-services:
-
-  portabase:
-    image: solucetechnologies/portabase:latest
-    env_file:
-      - .env
-    ports:
-      - '8887:80'
-    environment:
-      - TZ="Europe/Paris"
-    volumes:
-      - portabase-private:/app/private
-    depends_on:
-      db:
-        condition: service_healthy
-    container_name: portabase-app
-
-  db:
-    image: postgres:17-alpine
-    ports:
-      - "5433:5432"
-    volumes:
-      - postgres-data:/var/lib/postgresql/data
-    environment:
-      - POSTGRES_DB=<your_database>
-      - POSTGRES_USER=<database_user>
-      - POSTGRES_PASSWORD=<database_password>
-    healthcheck:
-      test: [ "CMD-SHELL", "pg_isready -U <database_user> -d <your_database>" ]
-      interval: 10s
-      timeout: 5s
-      retries: 5
-
-volumes:
-  postgres-data:
-  portabase-private:
-```
-
-Then run:
-
-```bash
-docker compose up -d
-```
-
-If you use reverse proxy like
-Traefik : [Check this link](https://portabase.io/docs/portabase/advanced-topics/reverse-proxy)
-
-### Option 2:  Locally (Development)
-
-1. Clone the repository:
-    ```bash
-    git clone https://github.com/Soluce-Technologies/portabase
-    cd portabase
-    ```
-2. Start the development environment:
-    ```bash
-    docker compose up
-    ```
-
---
-
-## 🛠️ Usage
-
-Portabase provides a web dashboard to manage your database instances and backups.  
-It currently supports:
-
- **PostgreSQL**
- **MySQL**
-
-### Process
-
-1. **Access the dashboard** – Open `http://localhost:8887` in your browser.
-2. **Sign up** – Register the first user, who will automatically have the **Admin** role in the default workspace.
-3. **Add your first agent** – Follow [this guide](https://github.com/Soluce-Technologies/agent-portabase) for setup
-   instructions.
-4. **Create organizations and projects** – Link your databases to projects to enable backups and restores.
-5. **Configure backup policies** – Define schedules (hourly, daily, weekly, or monthly) and retention rules.
-6. **Choose a storage provider** – Select where backups will be stored (local, S3, etc.).
-7. **Save and start** – Portabase validates your configuration and starts automated backups based on your defined
-   policies.
-
---
-
-## 🗺️ Roadmap
-
- [ ] Add changelog
- [ ] Enhance documentation
- [ ] Implement testing procedures
- [ ] Include release file
- [ ] Improve security
- [ ] Enhance UX/UI
- [ ] Improve workspace management system
- [x] Migrate to Drizzle ORM
- [ ] Add multi-language support
- [ ] Extend multi-database support:
-    - [x] PostgreSQL
-    - [ ] MongoDB
-    - [x] MySQL
-    - [x] MariaDB
-
-Check out [open issues](https://github.com/Soluce-Technologies/portabase/issues) for more.
-
---
-
-## 🤝 Contributing
-
-Contributions are welcome and appreciated! Here's how to get started:
-
-1. Fork the repository
-2. Create a new branch:
-    ```bash
-    git checkout -b feature/YourFeature
-    ```
-3. Commit your changes:
-    ```bash
-    git commit -m "Add YourFeature"
-    ```
-4. Push to the branch:
-    ```bash
-    git push origin feature/YourFeature
-    ```
-5. Open a pull request
-
-Give the project a ⭐ if you like it!
-
-### Top Contributors
-
-[![Contributors](https://contrib.rocks/image?repo=Soluce-Technologies/portabase)](https://github.com/Soluce-Technologies/portabase/graphs/contributors)
-
---
-
-## Developer Notes
-
-### Environment Variables
-
-```yml
-# Environment
-NODE_ENV=production
-
-  # Database
-DATABASE_URL=postgresql://devuser:changeme@db:5432/devdb?schema=public
-
-  # Project Info
-PROJECT_NAME="Portabase"
-PROJECT_DESCRIPTION="Portabase is a powerful database manager"
-PROJECT_URL=http://app.portabase.io
-PROJECT_SECRET=
-
-  # SMTP (Email)
-SMTP_HOST=
-SMTP_PORT=587
-SMTP_USER=
-SMTP_PASSWORD=
-SMTP_FROM=
-
-  # Google OAuth
-AUTH_GOOGLE_ID=
-AUTH_GOOGLE_SECRET=
-AUTH_GOOGLE_METHOD=
-
-  # S3/MinIO Configuration
-S3_ENDPOINT=http://app.s3.portabase.io
-S3_ACCESS_KEY=
-S3_SECRET_KEY=
-S3_BUCKET_NAME=portabase
-S3_PORT=9000
-S3_USE_SSL=true
-
-  # Storage Backend: 'local' or 's3'
-STORAGE_TYPE=local
-
-  # Retention
-RETENTION_CRON="* * * * *"
-```
-
-To get more information about env variables, check
-that [link](https://portabase.io/docs/portabase/advanced-topics/environment)
-
-### Semantic Versioning
-
-Use the following format for Docker image versioning:
-
-```bash
-major.minor.patch-rc.release
-# Example: 1.0.0-rc.1
-
-major.minor.patch-rc.release-tag
-# Example: 1.0.0-rc.1-dev
-```
-
---
-
-## 📄 License
+## License

 Distributed under the Apache License. See `LICENSE.txt` for more details.

---
-
-## 📬 Contact
-
- Killian Larcher - killian.larcher@soluce-technologies.com
- Charles Gauthereau - charles.gauthereau@soluce-technologies.com
- Project Link: [Portabase GitHub](https://github.com/Soluce-Technologies/portabase)
-
---
-
-## 🙏 Acknowledgments
-
-Thanks to all contributors and the open-source community!

 [Docker]: https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=fff&style=for-the-badge

@@ -304,5 +84,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/

@@ -24,18 +24,16 @@ export default async function SignInPage() {
                    </div>
                </CardHeader>
                <CardContent className="space-y-4">
-                    <LoginForm />
+                    <LoginForm/>

-                    {SUPPORTED_PROVIDERS.filter((p) => !p.isManual).length > 0 && (
+                    {SUPPORTED_PROVIDERS.filter((p) => !p.isManual && p.isActive).length > 0 && (
                        <>
-
                            <div className="relative my-4 flex items-center justify-center overflow-hidden">
                                <Separator/>
                                <div className="px-2 text-center  text-sm">OR</div>
                                <Separator/>
                            </div>
-
-                            <SocialAuthButtons />
+                            <SocialAuthButtons providers={SUPPORTED_PROVIDERS}/>
                        </>
                    )}

@@ -50,7 +48,5 @@ export default async function SignInPage() {
        </TooltipProvider>


-
-
    )
 }
@@ -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>
    );
 }
+
+
@@ -7,7 +7,7 @@ import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/
 import {notFound} from "next/navigation";
 import {db} from "@/db";
 import * as drizzleDb from "@/db";
-import {eq, not} from "drizzle-orm";
+import {desc, eq, not} from "drizzle-orm";
 import {EmptyStatePlaceholder} from "@/components/wrappers/common/empty-state-placeholder";
 import {Metadata} from "next";

@@ -21,11 +21,10 @@ export default async function RoutePage(props: PageParams<{}>) {
        where: not(eq(drizzleDb.schemas.agent.isArchived, true)),
        with: {
            databases: true
-        }
+        },
+        orderBy: (fields) => desc(fields.createdAt),
    });

-    console.log(agents);
-

    if (!agents) {
        notFound();
@@ -78,8 +78,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}
                    />
                ) : (
@@ -56,8 +56,8 @@ 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"/>
@@ -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>
@@ -106,7 +106,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,12 +118,13 @@ 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.");
@@ -149,6 +150,7 @@ export async function POST(
                .update(drizzleDb.schemas.backup)
                .set(withUpdatedAt({
                    file: fileName,
+                    fileSize: fileSizeBytes,
                    status: 'success',
                }))
                .where(eq(drizzleDb.schemas.backup.id, backup.id));
@@ -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(
@@ -41,7 +41,6 @@ export async function POST(

        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,7 +53,6 @@ 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)
@@ -77,7 +75,6 @@ export async function POST(
            },
            databases: databasesResponse
        }
-        console.log(response)

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

-ENV YARN_VERSION=4.9.1
-
 RUN apk add --update --no-cache \
-    tzdata \
-    build-base \
    libc6-compat \
    openssl \
-    make \
+    tzdata
+
+FROM base AS build-env
+
+RUN apk add --update --no-cache \
+    build-base \
    g++ \
-    jpeg-dev \
-    cairo-dev \
-    giflib-dev \
-    pango-dev \
+    make \
    libtool \
    autoconf \
-    automake \
-    libpng
+    automake

-RUN corepack enable && corepack prepare yarn@${YARN_VERSION}
-RUN yarn set version ${YARN_VERSION}
+RUN corepack enable && corepack prepare pnpm@latest --activate


-FROM base AS deps
+
+
+FROM build-env AS deps

 WORKDIR /app

-COPY .yarn ./.yarn
-COPY .yarnrc.yml ./
-COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+
+RUN pnpm i --frozen-lockfile


-RUN \
-  if [ -f yarn.lock ]; then yarn; \
-  elif [ -f package-lock.json ]; then npm ci; \
-  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
-  else echo "Lockfile not found." && exit 1; \
-  fi


-FROM base AS dev
+FROM build-env AS dev

 WORKDIR /app

@@ -52,8 +44,11 @@ RUN chmod +x /app/docker/entrypoints/app-dev-entrypoint.sh
 ENTRYPOINT ["sh","/app/docker/entrypoints/app-dev-entrypoint.sh"]


-# Rebuild the source code only when needed
-FROM base AS builder
+
+
+
+
+FROM build-env AS builder

 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
@@ -61,12 +56,11 @@ COPY . .

 ENV NEXT_TELEMETRY_DISABLED=1

-RUN \
-  if [ -f yarn.lock ]; then yarn run build; \
-  elif [ -f package-lock.json ]; then npm run build; \
-  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
+RUN pnpm run build
+
+
+
+


 FROM base AS prod
@@ -109,5 +103,3 @@ ENV HOSTNAME="0.0.0.0"
 USER nextjs

 ENTRYPOINT ["sh","/app/app-prod-entrypoint.sh"]
-
-
@@ -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
@@ -43,8 +43,10 @@ const nextConfig: NextConfig = {
    },
    experimental: {
        serverActions: {
-            bodySizeLimit: "50mb",
+            bodySizeLimit: "10gb",
        },
+        proxyClientMaxBodySize: '10gb',
+
    },
    async headers() {
        return [
@@ -1,6 +1,6 @@
 {
  "name": "portabase",
-  "version": "1.1.6",
+  "version": "1.1.10-rc.2",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack -p 8887",
@@ -97,6 +97,7 @@
  "devDependencies": {
    "@iconify/react": "^6.0.0",
    "@react-email/preview-server": "4.3.2",
+    "@react-email/render": "^2.0.1",
    "@tailwindcss/postcss": "^4.1.7",
    "@types/eslint-plugin-tailwindcss": "^3.17.0",
    "@types/node": "^22.15.18",
@@ -111,6 +112,7 @@
    "eslint": "^9.39.0",
    "eslint-config-next": "^16.0.1",
    "eslint-plugin-tailwindcss": "^3.18.0",
+    "framer-motion": "^12.24.7",
    "postcss": "^8.5.3",
    "tailwindcss": "^4.1.7",
    "tsx": "^4.19.4",
@@ -118,5 +120,5 @@
    "typescript": "^5.8.3",
    "zenstack": "2.14.2"
  },
-  "packageManager": "yarn@4.9.1"
+  "packageManager": "pnpm@10.27.0"
 }
@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - zenstack
@@ -1,9 +1,9 @@
-import {Chrome, KeyRound, LucideIcon} from "lucide-react";


 export interface AuthProviderConfig {
    id: "google" | "github" | "credential";
-    icon: LucideIcon;
+    isActive: boolean;
+    icon: string;
    isManual?: boolean;
    credentials?: {
        clientId: string;
@@ -80,27 +80,27 @@ export const PORTABASE_DEFAULT_SETTINGS = {
 export const SUPPORTED_PROVIDERS: AuthProviderConfig[] = [
    {
        id: "google",
-        icon: Chrome,
+        icon: "hugeicons:chrome",
+        isActive: Boolean(process.env.AUTH_GOOGLE_METHOD),
        // isManual: true,
        credentials: {
-            clientId: process.env.GOOGLE_CLIENT_ID || "",
-            clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
+            clientId: process.env.AUTH_GOOGLE_ID || "",
+            clientSecret: process.env.AUTH_GOOGLE_SECRET || "",
        },
    },
-    /*
    {
        id: "github",
-        name: "GitHub",
-        icon: Github,
-        description: "Connexion via GitHub",
+        icon: "iconoir:github",
+        isActive: Boolean(process.env.AUTH_GITHUB_METHOD),
        credentials: {
-            clientId: process.env.GITHUB_CLIENT_ID || "",
-            clientSecret: process.env.GITHUB_CLIENT_SECRET || "",
+            clientId: process.env.AUTH_GITHUB_ID || "",
+            clientSecret: process.env.AUTH_GITHUB_SECRET || "",
        },
-    },*/
+    },
    {
        id: "credential",
-        icon: KeyRound,
+        isActive: true,
+        icon: "proicons:key",
        isManual: true,
        credentials: {
            clientId: "",
@@ -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!"
@@ -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;
@@ -10,11 +10,19 @@ export const EmailLayout = ({ children, preview }: PropsWithChildren<{ preview?:
        <Tailwind>
            <Html>
                <Head />
-                {preview ? <Preview>{preview}</Preview> : <Preview>Please check your mails</Preview>}
-                <Body className="bg-gray-100 py-4" style={{ fontFamily: "Arial, sans-serif" }}>
-                    <Container className="bg-white border border-gray-200 p-12">
-                        <Img src={`${baseUrl}/images/logo-dark.png`} width="200" height="auto" alt="Logo" />
-                        <Section>{children}</Section>
+                <Body className="mx-auto my-auto bg-white px-2 font-sans">
+                    {preview ? <Preview>{preview}</Preview> : <Preview>Please check your mails</Preview>}
+                    <Container className="mx-auto my-[40px] max-w-[465px] rounded border border-[#eaeaea] border-solid p-[20px]">
+                        <Section className="mt-[32px]">
+                            <Img
+                                src={`${baseUrl}/images/logo.png`}
+                                width="50"
+                                height="auto"
+                                alt="Logo"
+                                className="mx-auto my-0"
+                            />
+                        </Section>
+                        {children}
                    </Container>
                </Body>
            </Html>
@@ -63,7 +63,6 @@ export const LoginForm = (props: loginFormProps) => {
                        toast.success("Login success");
                    },
                    onError: (error) => {
-                        console.log(error);
                        toast.error(error.error.message);
                    },
                }
@@ -28,7 +28,6 @@ export const resetPasswordAction = action
            }

            const user = await (await auth.$context).internalAdapter.findUserById(verification.value);
-            console.log(user)
            if (!user) {
                return {
                    success: false,
@@ -39,28 +38,6 @@ export const resetPasswordAction = action
                };
            }

-            const hashedPassword = await (await auth.$context).password.hash(parsedInput.schema.password);
-            console.log(hashedPassword)
-            console.log("ok")
-            // await (await auth.$context).internalAdapter.updatePassword(user.id, hashedPassword);
-            console.log("ici")
-            // await (await auth.$context).internalAdapter.deleteSessions(user.id);
-            // console.log("ici2")
-            // await (await auth.$context).internalAdapter.deleteVerificationValue(verification.id);
-            // console.log("ici3");
-            //
-            // (await auth.$context).internalAdapter.updateUser(user.id, {
-            //     lastChangedPasswordAt: new Date(),
-            // });
-
-            // await auth.api.resetPassword({
-            //     headers: await headers(),
-            //     body: {
-            //         newPassword: parsedInput.schema.password,
-            //         token: parsedInput.token,
-            //     },
-            // });
-
            await (
                await auth.$context
            ).internalAdapter.updateUser(user.id, {
@@ -44,7 +44,6 @@ export const ResetPasswordForm = (props: ResetPasswordFormProps) => {
            setTimeout(() => router.push("/"), 1400);
        },
        onError: (error: BetterAuthError) => {
-            console.log(error)
            toast.error("An error occurred while resetting password");
        },
    });
@@ -36,7 +36,6 @@ export const RegisterForm = (props: registerFormProps) => {
                    router.push(`/login`);
                },
                onError: (error) => {
-                    console.log(error);
                    toast.error(error.error.message);
                },
            });
@@ -6,7 +6,7 @@ import {Form, FormControl, FormField, FormItem, FormLabel, useZodForm} from "@/c
 import {PasswordStrengthInput} from "@/components/ui/password-input-indicator";
 import {ResetPasswordSchema, ResetPasswordType} from "@/components/wrappers/auth/reset-password/reset-password-schema";
 import {PasswordInput} from "@/components/ui/password-input";
-import {Card, CardContent, CardHeader} from "@/components/ui/card";
+import {CardContent, CardHeader} from "@/components/ui/card";
 import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
 import {authClient} from "@/lib/auth/auth-client";
 import {toast} from "sonner";
@@ -31,7 +31,6 @@ export const ResetPasswordForm = ({token}: ResetPasswordFormProps) => {
                token,
            }, {
                onSuccess: (response) => {
-                    console.log(response);
                    toast.success("Password changed successfully.");
                    setTimeout(() => router.push("/"), 1000);
                },
@@ -5,9 +5,12 @@ import { Button } from "@/components/ui/button";
 import { authClient } from "@/lib/auth/auth-client";
 import { Loader2 } from "lucide-react";
 import { toast } from "sonner";
-import {SUPPORTED_PROVIDERS} from "../../../../portabase.config";
+import {AuthProviderConfig} from "../../../../portabase.config";
+import {Icon} from "@iconify/react";
+
+export function SocialAuthButtons({ providers }: { providers: AuthProviderConfig[] }) {
+    const socialProviders = providers.filter(p => p.isActive && !p.isManual);

-export function SocialAuthButtons() {
    const [isLoading, setIsLoading] = useState<string | null>(null);

    const handleSocialSignIn = async (providerId: string) => {
@@ -30,16 +33,15 @@ export function SocialAuthButtons() {
        }
    };

-    const socialProviders = SUPPORTED_PROVIDERS.filter((p) => !p.isManual);
-
    if (socialProviders.length === 0) return null;

-
    return (
        <div className="flex flex-col gap-2 w-full">
            {socialProviders.map((provider) => (
                <Button key={provider.id} variant="outline" className="w-full gap-2" onClick={() => handleSocialSignIn(provider.id)} disabled={!!isLoading}>
-                    {isLoading === provider.id ? <Loader2 className="h-4 w-4 animate-spin" /> : <provider.icon className="h-4 w-4" />}
+                    {isLoading === provider.id ? <Loader2 className="h-4 w-4 animate-spin" /> :
+                        <Icon icon={provider.icon} className="h-4 w-4"/>
+                     }
                    <span>{PROVIDERS_TEXT[provider.id].title}</span>
                </Button>
            ))}
@@ -43,13 +43,17 @@ export function ComboBox<T = string>(props: ComboBoxProps<T>) {
                <PopoverTrigger asChild>
                    {sideBar ? (
                        <SidebarMenuButton>
+                            <label className="max-w-[170px] truncate">
                            {value ? choices.find((c) => c.value === value)?.label : "Select choice..."}
-                            <ChevronDown className="ml-auto"/>
+                            </label>
+                                <ChevronDown className="ml-auto"/>
                        </SidebarMenuButton>
                    ) : (
                        <Button variant="outline" role="combobox" aria-expanded={open}
                                className="w-full justify-between">
-                            {value ? choices.find((c) => c.value === value)?.label : "Select choice..."}
+                            <label className="max-w-[170px] truncate">
+                                {value ? choices.find((c) => c.value === value)?.label : "Select choice..."}
+                            </label>
                            <ChevronDown className="opacity-50"/>
                        </Button>
                    )}
@@ -59,7 +63,7 @@ export function ComboBox<T = string>(props: ComboBoxProps<T>) {
                    className="p-0"
                    align="start"
                    sideOffset={4}
-                    style={{ width: 'var(--radix-popover-trigger-width)' }}
+                    style={{width: 'var(--radix-popover-trigger-width)'}}

                >
                    <Command>
@@ -80,7 +84,9 @@ export function ComboBox<T = string>(props: ComboBoxProps<T>) {
                                            }
                                        }}
                                    >
-                                        {choice.label}
+                                        <label className="max-w-[170px] truncate">
+                                            {choice.label}
+                                        </label>
                                        <Check
                                            className={cn("ml-auto", value === choice.value ? "opacity-100" : "opacity-0")}/>
                                    </CommandItem>
@@ -12,8 +12,6 @@ export const ConnectionCircle = ({date}: ConnectionCircleProps) => {
        const timestamp = date.getTime();
        const interval_seconds = (now - timestamp) / 1000;

-        console.log({now, timestamp, interval_seconds});
-
        if (interval_seconds < 55) {
            style = "bg-green-400 border-green-600";
        } else if (interval_seconds <= 60) {
@@ -25,7 +23,5 @@ export const ConnectionCircle = ({date}: ConnectionCircleProps) => {
        console.warn("Invalid date passed to ConnectionCircle:", date);
    }

-    console.log(style);
-
    return <div className={cn("w-5 h-5 rounded-full border-4", style)}/>;
 };
@@ -9,7 +9,7 @@ export const GitHubStarsButtonCustom = () => {
    const [stars, setStars] = React.useState(0);
    const [isLoading, setIsLoading] = React.useState(true);

-    const username = "Soluce-Technologies"
+    const username = "Portabase"
    const repo = "portabase"


@@ -29,10 +29,6 @@ export const NotifierChannelOrganisationForm = ({

    const router = useRouter();

-
-    console.log("defaultValues", defaultValues);
-    console.log("organizations", organizations);
-
    const defaultOrganizationIds = defaultValues?.organizations?.map(organization => organization.organizationId) ?? []


@@ -1,4 +1,5 @@
-import {Mail, MessageSquare, Webhook} from "lucide-react";
+import {Mail} from "lucide-react";
+import type { SVGProps } from 'react';

 export const getNotificationChannelIcon = (type: string) => {
    const Icon = notificationTypes.find((t) => t.value === type)?.icon
@@ -6,8 +7,481 @@ export const getNotificationChannelIcon = (type: string) => {
 }


-const notificationTypes = [
+export const notificationTypes = [
    {value: "smtp", label: "Email", icon: Mail},
-    {value: "slack", label: "Slack", icon: MessageSquare},
-    {value: "webhook", label: "Webhook", icon: Webhook},
-]
+    {value: "slack", label: "Slack", icon: SlackIcon},
+    {value: "discord", label: "Discord", icon: DiscordIcon},
+    {value: "telegram", label: "Telegram", icon: TelegramIcon},
+    {value: "gotify", label: "Gotify", icon: GotifyIcon},
+    {value: "ntfy", label: "ntfy.sh", icon: NtfyIcon},
+    {value: "webhook", label: "Webhook", icon: WebhookIcon},
+]
+
+
+export function SlackIcon(props: SVGProps<SVGSVGElement>) {
+	return (<svg xmlns="http://www.w3.org/2000/svg" width={256} height={256} viewBox="0 0 256 256" {...props}><path fill="#e01e5a" d="M53.841 161.32c0 14.832-11.987 26.82-26.819 26.82S.203 176.152.203 161.32c0-14.831 11.987-26.818 26.82-26.818H53.84zm13.41 0c0-14.831 11.987-26.818 26.819-26.818s26.819 11.987 26.819 26.819v67.047c0 14.832-11.987 26.82-26.82 26.82c-14.83 0-26.818-11.988-26.818-26.82z"></path><path fill="#36c5f0" d="M94.07 53.638c-14.832 0-26.82-11.987-26.82-26.819S79.239 0 94.07 0s26.819 11.987 26.819 26.819v26.82zm0 13.613c14.832 0 26.819 11.987 26.819 26.819s-11.987 26.819-26.82 26.819H26.82C11.987 120.889 0 108.902 0 94.069c0-14.83 11.987-26.818 26.819-26.818z"></path><path fill="#2eb67d" d="M201.55 94.07c0-14.832 11.987-26.82 26.818-26.82s26.82 11.988 26.82 26.82s-11.988 26.819-26.82 26.819H201.55zm-13.41 0c0 14.832-11.988 26.819-26.82 26.819c-14.831 0-26.818-11.987-26.818-26.82V26.82C134.502 11.987 146.489 0 161.32 0s26.819 11.987 26.819 26.819z"></path><path fill="#ecb22e" d="M161.32 201.55c14.832 0 26.82 11.987 26.82 26.818s-11.988 26.82-26.82 26.82c-14.831 0-26.818-11.988-26.818-26.82V201.55zm0-13.41c-14.831 0-26.818-11.988-26.818-26.82c0-14.831 11.987-26.818 26.819-26.818h67.25c14.832 0 26.82 11.987 26.82 26.819s-11.988 26.819-26.82 26.819z"></path></svg>);
+}
+
+export function DiscordIcon(props: SVGProps<SVGSVGElement>) {
+	return (<svg xmlns="http://www.w3.org/2000/svg" width={256} height={199} viewBox="0 0 256 199" {...props}><path fill="#5865f2" d="M216.856 16.597A208.5 208.5 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046q-29.538-4.442-58.533 0c-1.832-4.4-4.55-9.933-6.846-14.046a207.8 207.8 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161 161 0 0 0 79.735 175.3a136.4 136.4 0 0 1-21.846-10.632a109 109 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a132 132 0 0 0 5.355 4.237a136 136 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848c21.142-6.58 42.646-16.637 64.815-33.213c5.316-56.288-9.08-105.09-38.056-148.36M85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2s23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18m85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2c0 14.375-10.148 26.18-23.015 26.18"></path></svg>);
+}
+
+export function TelegramIcon(props: SVGProps<SVGSVGElement>) {
+	return (<svg xmlns="http://www.w3.org/2000/svg" width={256} height={256} viewBox="0 0 256 256" {...props}><defs><linearGradient id="SVGuySfwdaH" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stopColor="#2aabee"></stop><stop offset="100%" stopColor="#229ed9"></stop></linearGradient></defs><path fill="url(#SVGuySfwdaH)" d="M128 0C94.06 0 61.48 13.494 37.5 37.49A128.04 128.04 0 0 0 0 128c0 33.934 13.5 66.514 37.5 90.51C61.48 242.506 94.06 256 128 256s66.52-13.494 90.5-37.49c24-23.996 37.5-56.576 37.5-90.51s-13.5-66.514-37.5-90.51C194.52 13.494 161.94 0 128 0"></path><path fill="#fff" d="M57.94 126.648q55.98-24.384 74.64-32.152c35.56-14.786 42.94-17.354 47.76-17.441c1.06-.017 3.42.245 4.96 1.49c1.28 1.05 1.64 2.47 1.82 3.467c.16.996.38 3.266.2 5.038c-1.92 20.24-10.26 69.356-14.5 92.026c-1.78 9.592-5.32 12.808-8.74 13.122c-7.44.684-13.08-4.912-20.28-9.63c-11.26-7.386-17.62-11.982-28.56-19.188c-12.64-8.328-4.44-12.906 2.76-20.386c1.88-1.958 34.64-31.748 35.26-34.45c.08-.338.16-1.598-.6-2.262c-.74-.666-1.84-.438-2.64-.258c-1.14.256-19.12 12.152-54 35.686c-5.1 3.508-9.72 5.218-13.88 5.128c-4.56-.098-13.36-2.584-19.9-4.708c-8-2.606-14.38-3.984-13.82-8.41c.28-2.304 3.46-4.662 9.52-7.072"></path></svg>);
+}
+
+
+export function NtfyIcon(props: SVGProps<SVGSVGElement>) {
+
+    return (  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    id="Layer_1"
+    x={0}
+    y={0}
+    viewBox="0 0 512 512"
+    {...props}
+  >
+    <style>{".st1{fill:#fff}"}</style>
+    <linearGradient
+      id="SVGID_1_"
+      x1={115.045}
+      x2={142.93}
+      y1={512.747}
+      y2={491.741}
+      gradientTransform="matrix(15.8584 0 0 -15.8584 -1816.246 8200.18)"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop
+        offset={0}
+        style={{
+          stopColor: "#348878",
+        }}
+      />
+      <stop
+        offset={1}
+        style={{
+          stopColor: "#56bda8",
+        }}
+      />
+    </linearGradient>
+    <path
+      d="M441.8 64.8H84.7c-24.5 0-44.6 19-44.6 42.1l.3 285.3-6.7 38.4 95.6-28.8h312.4c24.5 0 44.6-19 44.6-42.1V106.9c.1-23.2-20-42.1-44.5-42.1"
+      style={{
+        fill: "url(#SVGID_1_)",
+      }}
+    />
+    <path
+      d="M78.1 32.7C40.9 32.7 9 62 9 99.2l.4 311.2-9.4 69 127.1-33.8H443c37.2 0 69.1-29.3 69.1-66.5V99.2c0-37.2-31.9-66.5-69-66.5zm0 46.9H443c13.1 0 22.1 9.5 22.1 19.6V379c0 10-9 19.8-22.1 19.6H120.2l-64.6 19.5.7-3.8-.4-315.1c0-10.1 9.1-19.6 22.2-19.6"
+      className="st1"
+    />
+    <path
+      d="M116.4 310.9v-34.8l73.1-38.7c2.4-1.2 4.6-2.1 6.8-2.7 2.3-.8 4.5-1.4 6.3-1.8l6-.6V230q-3-.3-6-1.2-2.85-.6-6.3-1.5c-2.2-.8-4.5-1.8-6.8-3l-73.1-38.7v-35.1l113 61.5v37.4z"
+      className="st1"
+    />
+    <path
+      d="M110.5 139.7v50.4l76.6 40.6.5.2-.5.2-76.6 40.6v50.1l8.2-4.5L235.1 254v-46.4zm11.8 21.7 101.2 55.1V245l-101.2 55.1v-19.4l69.6-36.8.1-.1c1.9-1 3.8-1.7 5.8-2.3h.1l.2-.1c2.1-.7 3.9-1.2 5.5-1.6l11.1-1.1v-15.2l-5.4-.5c-1.7-.2-3.5-.5-5.1-1.1h-.2l-.2-.1c-2-.4-3.9-.9-5.9-1.4-2-.7-4-1.6-5.9-2.6l-.1-.1-69.6-36.7zm152.3 137.4h120.7v32.6H274.6z"
+      className="st1"
+    />
+    <path
+      d="M268.7 292.1v46h132.4v-46zm11.7 13.4h109v19.2h-109z"
+      className="st1"
+    />
+  </svg>)
+
+}
+
+
+export function GotifyIcon(props: SVGProps<SVGSVGElement>) {
+
+    return (
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    id="Layer_2"
+    x={0}
+    y={0}
+    viewBox="46.6 113.46 377.2 307.81"
+    {...props}
+  >
+    <style>
+      {
+        ".st0{fill:#ddcba2}.st0,.st1,.st2,.st4,.st5{stroke:#000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10}.st1{fill:#71caee}.st2{fill:#fff}.st4{fill:#f0f0f0}.st5{fill:none}"
+      }
+    </style>
+    <switch>
+      <foreignObject
+        width={1}
+        height={1}
+        x={0}
+        y={0}
+        requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/"
+      />
+      <g>
+        <path
+          d="M317.7 376.2c6.2-1.7 15.8 0 19.5 3.2 5.5 4.8 4.9 20.9 1.1 29-.8 1.7-1.8 3.4-3.2 4.4s-3.4 1.2-4.7 0-1.7-3.3-1.9-5.2c-.2-3.1-.2-6.2.3-9.2.2-1.3.2-2.9-.2-4.2-.6-2.2-2.5-3.1-4.5-3.5-3.4-.8-14.3-.7-19.5-.7-.8 0 1.5-9.1 2-9.7 2.6-2.9 7.5-3.1 11.1-4.1z"
+          className="st0"
+        />
+        <path
+          d="m258.9 119.7-9-2.7c-4.6-1.4-9.2-2.8-14-2.5-2.8.2-6.1 1.3-6.9 4-.6 2-1.6 7.3-1.3 7.9 1.5 3.4 13.9 6.7 18.3 6.7"
+          className="st1"
+        />
+        <path d="M392.6 177.9c-1.4 1.4-2.2 3.5-2.5 5.5-.2 1.4-.1 3 .5 4.3s1.8 2.3 3.1 3c1.3.6 2.8.9 4.3.9 1.1 0 2.3-.1 3.1-.9.6-.7.8-1.6.9-2.5.2-2.3-.1-4.7-.9-6.9-.4-1.1-.9-2.3-1.8-3.1-1.7-1.8-4.5-2.2-6.4-.5-.1 0-.2.1-.3.2" />
+        <path
+          d="M358.5 164.2c-1-1 0-2.7 1-3.7 5.8-5.2 15.1-4.6 21.8-.6 10.9 6.6 15.6 19.9 17.2 32.5.6 5.2.9 10.6-.5 15.7s-4.6 9.9-9.3 12.1c-1.1.5-2.3.9-3.4.5s-1.9-1.8-1.2-2.8c-9.4-13.6-19-26.8-20.9-43.2-.5-4.1-1.8-7.4-4.7-10.5z"
+          className="st2"
+        />
+        <path
+          d="M134.7 328.4c-5.1-3.1-9.9-6.6-14.3-10.6-1.3-1.2-2.6-2.5-2.6-4.3 0-1.2.6-2.2 1.2-3.2.8-1.4 1.7-2.8 2.5-4.1 1.1-1.8 2.9-3.9 4.9-3.2.9.3 1.5 1.1 2 1.8 2.4 3.3 4.9 6.6 7.3 9.8 1.5 2 3.7 4.3 6.1 3.5"
+          className="st1"
+        />
+        <path
+          d="M209.6 133c33.2-18 77.8-19.6 111.5-8.7 24.3 7.9 43.4 26.7 53.3 50 8.7 20.6 10.5 43.6 8.1 65.7-4.4 40.2-20.2 77.9-40.3 112.6-11.1 19-21.8 36-40.5 48.5-36.8 24.6-87.2 22.1-128.4 11.5-19.9-5.1-39.7-17.3-47.2-37.3-4.8-12.8-4.2-27.6 1.5-40 11.6-24.8 43.2-38.4 45.6-67.9.7-8.7-1.6-17.3-3.6-25.7-5.6-23.4-8.9-45.8 1.4-68.7 8.1-17.7 21.9-31 38.6-40z"
+          className="st1"
+        />
+        <path
+          d="M189.8 151.4c-5.4-5.2-11.9-8.8-19-10.3-2.2-.5-4.7-.7-6.9.7-1.8 1.2-3.1 3.3-4.2 5.3-1.6 3-3 6.2-4.1 9.4-.4 1.2-.6 2.5 0 3.5.3.6.9.9 1.5 1.2 8.1 4.2 16.8 7.1 25.5 9.8"
+          className="st1"
+        />
+        <path
+          d="M183.7 158.7c-2.5-1.8-16.8-12.1-18.7-4.8-.4 1.6.5 3.9 1.5 4.8"
+          className="st1"
+        />
+        <path
+          d="M264.5 174.9c-.5.5-.9 1-1.3 1.6-9 11.6-12 27.9-9.3 42.1 1.7 9 5.9 17.9 13.2 23.4 19.3 14.6 51.5 13.5 68.4-1.5 24.4-21.7 13-67.6-14-78.8-17.6-7.2-43.7-1.6-57 13.2zm117.6 62.2c1.4-.1 2.9-.1 4.3.1.3 0 .7.1 1 .4.2.3.4.7.5 1.1 1 3.9.5 8.2.1 12.4-.1.9-.2 1.8-.6 2.6-1 2.1-3.1 2.7-4.7 2.7-.1 0-.2 0-.3-.1-.3-.2-.3-.7-.2-1.2.3-5.9-.1-11.9-.1-18q0 .15 0 0z"
+          className="st2"
+        />
+        <path
+          d="M378.7 236.8c-1.4.4-2.5 2-2.8 4.4-.5 4.4-.7 8.9-.5 13.4 0 .9.1 1.9.5 2.4.2.3.5.4.8.4 1.6.3 4.1-.6 5.6-1 0 0 0-5.2-.1-8s-.1-6.1-.2-8.9v-2.2c.1-.7-2.6-.7-3.3-.5z"
+          className="st2"
+        />
+        <path
+          d="M358.3 231.8c-.3 2.2.1 4.7 1.7 7.4 2.6 4.4 7 6.1 11.9 5.8 8.9-.6 25.3-5.4 27.5-15.7.6-3-.3-6.1-2.2-8.5-6.2-7.8-17.8-5.7-25.6-2-5.9 2.7-12.4 7-13.3 13z"
+          className="st0"
+        />
+        <path
+          d="M386.4 208.6c2.2 1.4 3.7 3.8 4 7 .3 3.6-1.4 7.5-5 8.8-2.9 1.1-6.2.6-9.1-.4s-5.8-2.8-6.8-5.7c-.7-2-.3-4.3.7-6.1 1.1-1.8 2.8-3.2 4.7-4.1 3.9-1.8 8.4-1.6 11.5.5z"
+          style={{
+            fill: "#888e93",
+            stroke: "#000",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeMiterlimit: 10,
+          }}
+        />
+        <path
+          d="M414.7 262.6c2.4.6 4.8 2.1 5.6 4.4s.1 4.9-1.6 6.7-4.2 2.5-6.6 2.5c-.8 0-1.7-.1-2.4-.5-2.5-1.1-3.5-4-4.2-6.6-1.8-6.8 3.6-7.8 9.2-6.5z"
+          className="st0"
+        />
+        <path
+          d="M267.1 284.7c2.3-4.5 141.3-36.2 144.7-31.6 3.4 4.5 15.8 88.2 9 90.4-6.8 2.3-119.8 37.3-126.6 35s-29.4-89.3-27.1-93.8z"
+          className="st4"
+        />
+        <path
+          d="M294.2 378.5s54.3-74.6 59.9-76.9c5.7-2.3 67.3 41.3 67.3 41.3"
+          className="st5"
+        />
+        <path
+          d="M267 287.7s86 38.8 91.6 36.6c5.7-2.3 53.1-71.2 53.1-71.2"
+          className="st4"
+        />
+        <linearGradient
+          id="SVGID_1_"
+          x1={131.119}
+          x2={103.259}
+          y1={373.573}
+          y2={396.951}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop
+            offset={0}
+            style={{
+              stopColor: "#71caee",
+            }}
+          />
+          <stop
+            offset={0.041}
+            style={{
+              stopColor: "#83cae2",
+            }}
+          />
+          <stop
+            offset={0.121}
+            style={{
+              stopColor: "#9fcace",
+            }}
+          />
+          <stop
+            offset={0.211}
+            style={{
+              stopColor: "#b6cbbe",
+            }}
+          />
+          <stop
+            offset={0.314}
+            style={{
+              stopColor: "#c7cbb1",
+            }}
+          />
+          <stop
+            offset={0.438}
+            style={{
+              stopColor: "#d4cba8",
+            }}
+          />
+          <stop
+            offset={0.606}
+            style={{
+              stopColor: "#dbcba3",
+            }}
+          />
+          <stop
+            offset={1}
+            style={{
+              stopColor: "#ddcba2",
+            }}
+          />
+        </linearGradient>
+        <path
+          d="M132.8 375.6c-3.5 3.8-7.3 7.8-13 9.2-4.6 1.2-10 .2-13.6-2.3-1.4-1-2.6-2.2-4-3.2-1.5-1-3.4-1.7-5.3-1.3-2.7.5-4.1 3.1-3.6 5.3 2 8.8 17 15.6 27.5 15.5 9 0 19-4.6 21.4-11.8"
+          style={{
+            fill: "url(#SVGID_1_)",
+          }}
+        />
+        <path
+          d="M132.8 375.6c-3.5 3.8-7.3 7.8-13 9.2-4.6 1.2-10 .2-13.6-2.3-1.4-1-2.6-2.2-4-3.2-1.5-1-3.4-1.7-5.3-1.3-2.7.5-4.1 3.1-3.6 5.3 2 8.8 17 15.6 27.5 15.5 9 0 19-4.6 21.4-11.8"
+          className="st5"
+        />
+        <linearGradient
+          id="SVGID_2_"
+          x1={265.033}
+          x2={275.301}
+          y1={280.295}
+          y2={302.314}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop
+            offset={0}
+            style={{
+              stopColor: "#71caee",
+            }}
+          />
+          <stop
+            offset={0.041}
+            style={{
+              stopColor: "#83cae2",
+            }}
+          />
+          <stop
+            offset={0.121}
+            style={{
+              stopColor: "#9fcace",
+            }}
+          />
+          <stop
+            offset={0.211}
+            style={{
+              stopColor: "#b6cbbe",
+            }}
+          />
+          <stop
+            offset={0.314}
+            style={{
+              stopColor: "#c7cbb1",
+            }}
+          />
+          <stop
+            offset={0.438}
+            style={{
+              stopColor: "#d4cba8",
+            }}
+          />
+          <stop
+            offset={0.606}
+            style={{
+              stopColor: "#dbcba3",
+            }}
+          />
+          <stop
+            offset={1}
+            style={{
+              stopColor: "#ddcba2",
+            }}
+          />
+        </linearGradient>
+        <path
+          d="M261.9 283.5c-.1 4.2 4.3 7.3 8.4 7.6s8.2-1.3 12.2-2.6c1.4-.4 2.9-.8 4.2-.2 1.8.9 2.7 4.1 1.8 5.9s-3.4 3.5-5.3 4.4c-6.5 3-12.9 3.6-19.9 2-5.3-1.2-11.3-4.3-13-13.5"
+          style={{
+            fill: "url(#SVGID_2_)",
+          }}
+        />
+        <path
+          d="M261.9 283.5c-.1 4.2 4.3 7.3 8.4 7.6s8.2-1.3 12.2-2.6c1.4-.4 2.9-.8 4.2-.2 1.8.9 2.7 4.1 1.8 5.9s-3.4 3.5-5.3 4.4c-6.5 3-12.9 3.6-19.9 2-5.3-1.2-11.3-4.3-13-13.5"
+          className="st5"
+        />
+        <path d="M318.4 198.4c-2-.3-4.1.1-5.9 1.3-3.2 2.1-4.7 6.2-4.7 9.9 0 1.9.4 3.8 1.4 5.3 1.2 1.7 3.1 2.9 5.2 3.4 3.4.8 8.2.7 10.5-2.5 1-1.5 1.4-3.3 1.5-5.1.5-5.7-1.8-11.4-8-12.3" />
+        <path
+          d="M320.4 203.3c.9.3 1.7.8 2.1 1.7.4.8.4 1.7.3 2.5-.1 1-.6 2-1.5 2.7-.7.5-1.7.7-2.6.5s-1.7-.8-2.2-1.6c-1.1-1.6-.9-4.4.9-5.5.9-.4 2-.6 3-.3"
+          style={{
+            fill: "#fff",
+          }}
+        />
+        <linearGradient
+          id="SVGID_3_"
+          x1={-18.456}
+          x2={110.382}
+          y1={252.286}
+          y2={252.286}
+          gradientTransform="rotate(-5.297 -26.409 -856.73)scale(.99997)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop
+            offset={0}
+            style={{
+              stopColor: "#333",
+              stopOpacity: 0,
+            }}
+          />
+          <stop
+            offset={0.477}
+            style={{
+              stopColor: "#575756",
+              stopOpacity: 0.2,
+            }}
+          />
+          <stop
+            offset={0.995}
+            style={{
+              stopColor: "#333",
+              stopOpacity: 0.001911551,
+            }}
+          />
+          <stop
+            offset={1}
+            style={{
+              stopColor: "#333",
+              stopOpacity: 0,
+            }}
+          />
+        </linearGradient>
+        <path
+          d="M81.6 222.4s56.5 68.4 123.9 42.4l6.6-29.7C150 272.2 82.8 214.3 82.8 214.3z"
+          style={{
+            fill: "url(#SVGID_3_)",
+          }}
+        />
+        <linearGradient
+          id="SVGID_4_"
+          x1={110.198}
+          x2={283.737}
+          y1={262.493}
+          y2={262.493}
+          gradientTransform="matrix(.9991 .04164 -.04164 .9991 -36.323 1.051)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop
+            offset={0}
+            style={{
+              stopColor: "#333",
+              stopOpacity: 0,
+            }}
+          />
+          <stop
+            offset={0.477}
+            style={{
+              stopColor: "#575756",
+              stopOpacity: 0.2,
+            }}
+          />
+          <stop
+            offset={0.995}
+            style={{
+              stopColor: "#333",
+              stopOpacity: 0.001911551,
+            }}
+          />
+          <stop
+            offset={1}
+            style={{
+              stopColor: "#333",
+              stopOpacity: 0,
+            }}
+          />
+        </linearGradient>
+        <path
+          d="M64.2 234.9s63.1 101.5 157.8 78.9l14.2-38.5c-89.5 38.3-168.9-51-168.9-51z"
+          style={{
+            fill: "url(#SVGID_4_)",
+          }}
+        />
+        <linearGradient
+          id="SVGID_5_"
+          x1={218.967}
+          x2={428.745}
+          y1={263.594}
+          y2={263.594}
+          gradientTransform="rotate(9.265 -38.832 -826.002)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop
+            offset={0}
+            style={{
+              stopColor: "#333",
+              stopOpacity: 0,
+            }}
+          />
+          <stop
+            offset={0.477}
+            style={{
+              stopColor: "#575756",
+              stopOpacity: 0.2,
+            }}
+          />
+          <stop
+            offset={0.995}
+            style={{
+              stopColor: "#333",
+              stopOpacity: 0.001911551,
+            }}
+          />
+          <stop
+            offset={1}
+            style={{
+              stopColor: "#333",
+              stopOpacity: 0,
+            }}
+          />
+        </linearGradient>
+        <path
+          d="M46.6 251.5s61.1 130.9 178 117.5l22.6-44.2c-113 33-195.3-85.7-195.3-85.7z"
+          style={{
+            fill: "url(#SVGID_5_)",
+          }}
+        />
+      </g>
+    </switch>
+  </svg>
+    )
+}
+
+export function WebhookIcon(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={2500}
+        height={2448}
+        fillRule="evenodd"
+        strokeLinejoin="round"
+        strokeMiterlimit={2}
+        clipRule="evenodd"
+        viewBox="-6.74 -6.74 223.55 218.799"
+        {...props}
+        >
+        <path
+            fill="#7547db"
+            d="M111.134 71.906a21 21 0 0 1-1.324.042c-11.314 0-20.5-9.186-20.5-20.5s9.186-20.5 20.5-20.5 20.5 9.186 20.5 20.5a20.4 20.4 0 0 1-4.582 12.913l22.66 41.655a51 51 0 0 1 17.422-3.068c28.148 0 51 22.852 51 51s-22.852 51-51 51a51.2 51.2 0 0 1-28.036-8.373 7.303 7.303 0 0 1-1.359-11.105c.015-.016.031-.033.061-.036a7.665 7.665 0 0 1 9.736-1.228 36.06 36.06 0 0 0 19.598 5.792c19.897 0 36.05-16.153 36.05-36.05s-16.153-36.05-36.05-36.05c-6.89 0-16.669 3.014-22.548 6.745a2.637 2.637 0 0 1-3.899-.845zm-9.412 88.614a51 51 0 0 1-6.054 16.62c-14.074 24.378-45.29 32.743-69.667 18.669S-6.74 150.518 7.333 126.14a51.2 51.2 0 0 1 21.27-20.094 7.3 7.3 0 0 1 6.167-.211 7.3 7.3 0 0 1 4.13 4.587c.006.022.012.043 0 .07a7.665 7.665 0 0 1-3.804 9.047 36.05 36.05 0 0 0-14.816 14.076c-9.948 17.23-4.036 39.297 13.195 49.246 17.231 9.948 39.298 4.035 49.246-13.196 3.445-5.967 5.724-15.943 5.433-22.9a2.632 2.632 0 0 1 2.681-2.953l59.054 1.499q.292-.59.626-1.168c5.657-9.798 18.205-13.161 28.003-7.504 9.8 5.658 13.161 18.206 7.504 28.004s-18.205 13.16-28.004 7.503a20.4 20.4 0 0 1-8.892-10.424zM76.97 90.555A51 51 0 0 1 65.601 77c-14.074-24.377-5.71-55.594 18.667-69.667S139.862 1.624 153.935 26a51.2 51.2 0 0 1 6.768 28.466 7.306 7.306 0 0 1-8.938 6.73c-.022-.005-.044-.011-.062-.035a7.664 7.664 0 0 1-5.932-7.817 36.04 36.04 0 0 0-4.783-19.87c-9.948-17.23-32.014-23.143-49.245-13.195S68.599 52.294 78.548 69.525c3.445 5.967 10.945 12.929 17.115 16.155a2.635 2.635 0 0 1 1.218 3.799l-30.826 50.393q.366.548.7 1.125c5.656 9.799 2.294 22.347-7.505 28.004s-22.346 2.295-28.003-7.504-2.295-22.346 7.503-28.003a20.4 20.4 0 0 1 13.474-2.488z"
+        />
+        </svg>    
+    )
+}
+
@@ -34,13 +34,11 @@ export const OrganizationAddMemberForm = ({onSuccessAction, users, organization}

    const mutationAddMemberOrganisation = useMutation({
        mutationFn: async (data: AddMemberSchemaType) => {
-            console.log(data);
            const result = await addMemberOrganizationAction({
                userId: data.userId,
                organizationId: organization.id,
                role: "member",
            });
-            console.log(result);
            toast.success("Member successfully added!");
            router.refresh();
            onSuccessAction?.();
@@ -71,7 +69,6 @@ export const OrganizationAddMemberForm = ({onSuccessAction, users, organization}
                                placeholder="Enter a user email"
                                entries={filteredUsers}
                                onSelect={(entySelected: any) => {
-                                    console.log("Form selection:", entySelected);
                                    field.onChange(entySelected.value);
                                }}
                            />
@@ -35,13 +35,11 @@ export const OrganizationDeleteMemberModal = ({ member, open, onOpenChangeAction
                },
                {
                    onSuccess: async (response) => {
-                        console.log(response);
                        toast.success("Member successfully deleted!");
                        onOpenChangeAction(false);
                        router.refresh();
                    },
                    onError: async (error) => {
-                        console.log(error);
                        toast.error("An error occurred while deleting member!");
                        onOpenChangeAction(false);
                    },
@@ -49,7 +49,6 @@ export const OrganizationMemberChangeRoleModal = (props: OrganizationMemberChang
            router.refresh();
        },
        onError: (error) => {
-            console.log(error);
            toast.error("An error occurred while updating member");
            onOpenChangeAction(false);
        },
@@ -28,11 +28,9 @@ export const StorageS3Form = (props: S3FormProps) => {

    const mutation = useMutation({
        mutationFn: async (values: S3FormType) => {
-            console.log(values);
            const updateS3Settings = await updateS3SettingsAction({ name: "system", data: values });
            const data = updateS3Settings?.data?.data;
            if (updateS3Settings?.serverError || !data) {
-                console.log(updateS3Settings?.serverError);
                toast.error(updateS3Settings?.serverError);
                return;
            }
@@ -0,0 +1,35 @@
+"use client";
+
+import { useState } from "react";
+import { Plus } from "lucide-react";
+
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Organization } from "@/db/schema/03_organization";
+import {AdminUserForm} from "@/components/wrappers/dashboard/admin/users/admin-user-form";
+
+type AdminUserAddModalProps = {
+    organizations: Organization[];
+};
+
+export const AdminUserAddModal = ({ organizations }: AdminUserAddModalProps) => {
+
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                <Button>
+                    <Plus /> Create a user
+                </Button>
+            </DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Create a new user</DialogTitle>
+                    <DialogDescription>To create a new user please provide following informations</DialogDescription>
+                        <AdminUserForm organizations={organizations} onSuccess={() => setOpen(false)} />
+                </DialogHeader>
+            </DialogContent>
+        </Dialog>
+    );
+};
@@ -0,0 +1,65 @@
+"use client";
+
+import { useMutation } from "@tanstack/react-query";
+import { User } from "@/db/schema/02_user";
+import { ButtonWithLoading } from "@/components/wrappers/common/button/button-with-loading";
+import {
+    AlertDialog,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { requestPasswordReset } from "@/lib/auth/auth-client";
+import { toast } from "sonner";
+
+type AdminUserChangePasswordProps = {
+    open: boolean;
+    user: User;
+    onOpenChange: (open: boolean) => void;
+};
+
+export const AdminUserChangePassword = ({ user, open, onOpenChange }: AdminUserChangePasswordProps) => {
+
+    const mutation = useMutation({
+        mutationFn: async () => {
+            await requestPasswordReset(
+                {
+                    email: user.email,
+
+                },
+                {
+                    onSuccess: () => {
+                        toast.success("Reset password request successfully sent!");
+                        onOpenChange(false);
+                    },
+                    onError: (error) => {
+                        toast.error(error.error.message);
+                    },
+                }
+            );
+        },
+        onError: (error) => {
+            toast.error(error.message);
+        },
+    });
+
+    return (
+        <AlertDialog open={open} onOpenChange={onOpenChange}>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Change {user.name}'s password</AlertDialogTitle>
+                    <AlertDialogDescription>This action will send an email to the user to reset their password.</AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <ButtonWithLoading onClick={async () => await mutation.mutateAsync()} isPending={mutation.isPending}>
+                        Validate
+                    </ButtonWithLoading>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+};
@@ -0,0 +1,91 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { authClient } from "@/lib/auth/auth-client";
+import { User } from "@/db/schema/02_user";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { ButtonWithLoading } from "@/components/wrappers/common/button/button-with-loading";
+
+type AdminUserChangeRoleModalProps = {
+    open: boolean;
+    user: User;
+    onOpenChange: (open: boolean) => void;
+};
+
+export const AdminUserChangeRoleModal = (props: AdminUserChangeRoleModalProps) => {
+
+
+    const { user, open, onOpenChange } = props;
+    const router = useRouter();
+    const [role, setRole] = useState<string | null>(user.role);
+
+    const mutation = useMutation({
+        mutationFn: async () => {
+            await authClient.admin.setRole(
+                {
+                    userId: user.id,
+                    // @ts-ignore
+                    role: role,
+                },
+                {
+                    onSuccess: async (response) => {
+                        toast.success("User role changed successfully.");
+                        onOpenChange(false);
+                        router.refresh();
+                    },
+                    onError: async (error) => {
+                        console.error("AdminUserChangeRoleModal - setRole", error);
+                        toast.error("An error occurred while updating user roles.");
+                        onOpenChange(false);
+                    },
+                }
+            );
+        },
+    });
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Change the user's role</DialogTitle>
+                    <DialogDescription>Modify this user's role within your organization.</DialogDescription>
+                </DialogHeader>
+                <Select defaultValue={user.role ?? ""} onValueChange={setRole}>
+                    <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Sélectionnez un rôle" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="pending">Pending</SelectItem>
+                        <SelectItem value="user">User</SelectItem>
+                        <SelectItem value="admin">Admin</SelectItem>
+                    </SelectContent>
+                </Select>
+                <DialogFooter>
+                    <div className="flex gap-4 justify-end">
+                        <ButtonWithLoading
+                            variant="outline"
+                            onClick={() => {
+                                onOpenChange(false);
+                            }}
+                        >
+                            Cancel
+                        </ButtonWithLoading>
+                        <ButtonWithLoading
+                            isPending={mutation.isPending}
+                            onClick={async () => {
+                                await mutation.mutateAsync();
+                            }}
+                        >
+                            Validate
+                        </ButtonWithLoading>
+                    </div>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+};
@@ -0,0 +1,75 @@
+"use client";
+
+import {useMutation} from "@tanstack/react-query";
+import {User} from "@/db/schema/02_user";
+import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
+import {useRouter} from "next/navigation";
+import {
+    AlertDialog,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {authClient} from "@/lib/auth/auth-client";
+import {toast} from "sonner";
+import {setSuperAdminOwnerOfOrganizationsOwnedByUser} from "@/components/wrappers/dashboard/admin/users/user.action";
+
+type AdminDeleteUserModalProps = {
+    open: boolean;
+    user: User;
+    onOpenChange: (open: boolean) => void;
+};
+
+export const AdminDeleteUserModal = ({user, open, onOpenChange}: AdminDeleteUserModalProps) => {
+    const router = useRouter();
+
+    const mutation = useMutation({
+        mutationFn: async () => {
+            const res = await setSuperAdminOwnerOfOrganizationsOwnedByUser({userId: user.id});
+            const result = res?.data;
+            if (result?.success) {
+                await authClient.admin.removeUser(
+                    {
+                        userId: user.id,
+                    },
+                    {
+                        onSuccess: async (response) => {
+                            toast.success(`User ${user.name} successfully deleted`);
+                            onOpenChange(false);
+                            router.refresh();
+                        },
+                        onError: async (error) => {
+                            toast.error("An error has occurred while deleting user");
+                            onOpenChange(false);
+                        },
+                    }
+                );
+            } else {
+                toast.error("An error has occurred while deleting user");
+            }
+        },
+        onError: (error) => {
+            toast.error(error.message);
+        },
+    });
+
+    return (
+        <AlertDialog open={open} onOpenChange={onOpenChange}>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Are you sure you want to delete {user.name} ?</AlertDialogTitle>
+                    <AlertDialogDescription>This action is irreversible: it will lead to the deletion of the user's
+                        data.</AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <ButtonWithLoading
+                        onClick={async () => await mutation.mutateAsync()}>Confirm</ButtonWithLoading>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+};
@@ -0,0 +1,99 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { ButtonWithLoading } from "@/components/wrappers/common/button/button-with-loading";
+import {Button} from "@/components/ui/button";
+import {UserEditSchema, UserEditType, UserSchema} from "@/components/wrappers/dashboard/admin/users/user.schema";
+import {updateUserAction} from "@/components/wrappers/dashboard/admin/users/user.action";
+type AdminUserEditFormProps = {
+    onSuccess?: () => void;
+    defaultValues: {
+        id: string;
+    } & UserEditType;
+};
+
+export const AdminUserEditForm = ({ onSuccess, defaultValues }: AdminUserEditFormProps) => {
+
+
+    const router = useRouter();
+    const form = useZodForm({
+        schema: defaultValues ? UserEditSchema : UserSchema,
+        defaultValues: {
+            name: defaultValues.name,
+            email: defaultValues.email,
+        },
+    });
+
+    const onCancel = () => {
+        form.reset();
+        onSuccess?.();
+    };
+
+    const mutation = useMutation({
+        mutationFn: async (data: UserEditType) => {
+            const result = await updateUserAction({
+                ...data,
+                id: defaultValues?.id || "",
+            });
+            const inner = result?.data;
+            if (inner?.success) {
+                toast.success("User Successfully updated");
+                onSuccess?.();
+                router.refresh();
+            } else {
+                toast.error("An error occurred");
+                onSuccess?.();
+            }
+        },
+    });
+
+    return (
+        <Form
+            form={form}
+            className="flex flex-col gap-4"
+            onSubmit={async (values) => {
+                await mutation.mutateAsync(values);
+            }}
+        >
+            <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                    <FormItem>
+                        <FormLabel>Name</FormLabel>
+                        <FormControl>
+                            <Input placeholder="Enter a name" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                )}
+            />
+
+            <FormField
+                control={form.control}
+
+                name="email"
+                render={({ field }) => (
+                    <FormItem>
+                        <FormLabel>Email</FormLabel>
+                        <FormControl>
+                            <Input disabled placeholder="Fill user email" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                )}
+            />
+
+            <div className="flex gap-4 justify-end">
+                <Button type="button" variant="outline" onClick={onCancel}>
+                    Cancel
+                </Button>
+                <ButtonWithLoading type="submit" isPending={mutation.isPending}>Validate</ButtonWithLoading>
+            </div>
+        </Form>
+    );
+};
@@ -0,0 +1,43 @@
+"use client";
+
+import {User} from "@/db/schema/02_user";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle
+} from "@/components/ui/dialog";
+import {AdminUserEditForm} from "./admin-user-edit-form";
+
+type AdminUserEditPasswordProps = {
+    open: boolean;
+    user: User;
+    onOpenChange: (open: boolean) => void;
+};
+
+export const AdminUserEdit = ({user, open, onOpenChange}: AdminUserEditPasswordProps) => {
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Edit ${user.name}'s profile</DialogTitle>
+                    <DialogDescription>Update following information</DialogDescription>
+                </DialogHeader>
+                <DialogContent
+                    onOpenAutoFocus={(e) => e.preventDefault()}
+                >
+                    <AdminUserEditForm
+                        defaultValues={{
+                            name: user.name,
+                            email: user.email,
+                            id: user.id,
+                        }}
+                        onSuccess={() => onOpenChange(false)}
+                    />
+                </DialogContent>
+            </DialogContent>
+        </Dialog>
+    );
+};
@@ -0,0 +1,95 @@
+"use client";
+
+import {useRouter} from "next/navigation";
+import {useMutation} from "@tanstack/react-query";
+import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm} from "@/components/ui/form";
+import {Organization} from "@/db/schema/03_organization";
+import {Input} from "@/components/ui/input";
+import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
+import {Button} from "@/components/ui/button";
+import {UserSchema, UserType} from "@/components/wrappers/dashboard/admin/users/user.schema";
+import {toast} from "sonner";
+import {createUserAction} from "@/components/wrappers/dashboard/admin/users/user.action";
+
+type AdminUserFormProps = {
+    onSuccess?: () => void;
+    organizations: Organization[];
+};
+
+export const AdminUserForm = ({onSuccess, organizations}: AdminUserFormProps) => {
+
+
+    const router = useRouter();
+    const form = useZodForm({
+        schema: UserSchema,
+    });
+
+
+    const onCancel = () => {
+        form.reset();
+        onSuccess?.();
+    };
+
+    const mutation = useMutation({
+        mutationFn: async (data: UserType) => {
+            const result = await createUserAction(data);
+            const inner = result?.data;
+            if (inner?.success) {
+                toast.success("User Successfully created");
+                onSuccess?.();
+                router.refresh();
+            } else {
+                toast.error("An error occurred");
+                onSuccess?.();
+            }
+        },
+    });
+
+    return (
+        <Form
+            form={form}
+            className="flex flex-col gap-4"
+            onSubmit={async (values) => {
+                await mutation.mutateAsync(values);
+            }}
+        >
+            <FormField
+                control={form.control}
+                name="name"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Name</FormLabel>
+                        <FormControl>
+                            <Input placeholder="Enter a name" {...field} value={field.value ?? ""}/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+
+            <FormField
+                control={form.control}
+                name="email"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Email</FormLabel>
+                        <FormControl>
+                            <Input placeholder="Fill user email" {...field} value={field.value ?? ""}/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+
+
+            <div className="flex gap-4 justify-end">
+                <Button type="button" variant="outline" onClick={onCancel}>
+                    Cancel
+                </Button>
+                <ButtonWithLoading type="submit" isPending={mutation.isPending}>
+                    Validate
+                </ButtonWithLoading>
+            </div>
+        </Form>
+    );
+};
@@ -0,0 +1,12 @@
+"use client";
+import { DataTable } from "@/components/wrappers/common/table/data-table";
+import {usersListColumns} from "@/components/wrappers/dashboard/admin/users/table-colums";
+import {User} from "@/db/schema/02_user";
+
+type AdminUserListProps = {
+    users: User[];
+};
+
+export const AdminUserList = ({ users }: AdminUserListProps) => {
+    return <DataTable columns={usersListColumns()} data={users} enablePagination={true} enableSelect={false} />;
+};
@@ -0,0 +1,91 @@
+import {ColumnDef} from "@tanstack/react-table";
+import {User} from "@/db/schema/02_user";
+import {Badge} from "@/components/ui/badge";
+import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
+import {formatLocalizedDate, timeAgo} from "@/utils/date-formatting";
+import {Tooltip, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip";
+import {TooltipContent} from "@radix-ui/react-tooltip";
+import {Info} from "lucide-react";
+import {Table, TableBody, TableCell, TableRow} from "@/components/ui/table";
+import {UserActionsCell} from "@/components/wrappers/dashboard/admin/users/user-actions-cell";
+
+export function usersListColumns(): ColumnDef<User>[] {
+
+    return [
+        {
+            accessorKey: "name",
+            header: "Profile",
+            cell: ({row}) => {
+
+                return (
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger>
+                                <div className="flex flex-row items-center gap-x-2">
+                                    <Avatar>
+                                        <AvatarImage src={row.original.image ?? ""} alt={row.original.name}/>
+                                        <AvatarFallback>
+                                            {row.original.name
+                                                .split(" ")
+                                                .map((n) => n[0])
+                                                .join("")}
+                                        </AvatarFallback>
+                                    </Avatar>
+                                    <div className="flex flex-row items-center gap-x-2">
+                                        <div className="font-medium">{row.original.name}</div>
+                                        <Info size={16} aria-hidden="true" className="text-muted-foreground"/>
+                                    </div>
+                                </div>
+                            </TooltipTrigger>
+                            <TooltipContent className="bg-background shadow-lg border border-border z-20 rounded-md"
+                                            side="bottom">
+                                <Table>
+                                    <TableBody>
+                                        <TableRow>
+                                            <TableCell>Joined</TableCell>
+                                            <TableCell
+                                                className="text-right text-muted-foreground">{formatLocalizedDate(row.original.createdAt)}</TableCell>
+                                        </TableRow>
+                                        {/*{row.original.lastConnectedAt && (*/}
+                                        {/*    <TableRow>*/}
+                                        {/*        <TableCell>Last connected</TableCell>*/}
+                                        {/*        <TableCell className="text-right text-muted-foreground">*/}
+                                        {/*            {formatLocalizedDate(row.original.lastConnectedAt)} ({timeAgo(row.original.lastConnectedAt, locale)})*/}
+                                        {/*        </TableCell>*/}
+                                        {/*    </TableRow>*/}
+                                        {/*)}*/}
+                                        {row.original.lastChangedPasswordAt && (
+                                            <TableRow>
+                                                <TableCell>Last password change</TableCell>
+                                                <TableCell className="text-right text-muted-foreground">
+                                                    {formatLocalizedDate(row.original.lastChangedPasswordAt)} ({timeAgo(row.original.lastChangedPasswordAt)})
+                                                </TableCell>
+                                            </TableRow>
+                                        )}
+                                    </TableBody>
+                                </Table>
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+                );
+            },
+        },
+        {
+            accessorKey: "email",
+            header: "Email",
+        },
+        {
+            accessorKey: "role",
+            header: "Role",
+            cell: ({row}) => {
+                const role = row.original.role!;
+                return <Badge>{role}</Badge>;
+            },
+        },
+        {
+            id: "actions",
+            header: "Actions",
+            cell: ({row}) => <UserActionsCell user={row.original}/>,
+        },
+    ];
+}
@@ -0,0 +1,78 @@
+"use client";
+
+import {useState} from "react";
+import {Button} from "@/components/ui/button";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu";
+import {MoreHorizontal, Settings, Trash2, RotateCcwKey, UserCog} from "lucide-react";
+import {authClient} from "@/lib/auth/auth-client";
+import {cn} from "@/lib/utils";
+import {User} from "@/db/schema/02_user";
+import {AdminUserChangePassword} from "./admin-user-change-password-modal";
+import {AdminUserEdit} from "./admin-user-edit-modal";
+import {AdminUserChangeRoleModal} from "@/components/wrappers/dashboard/admin/users/admin-user-change-role-modal";
+import {AdminDeleteUserModal} from "@/components/wrappers/dashboard/admin/users/admin-user-delete-modal";
+
+interface UserActionsCellProps {
+    user: User;
+}
+
+export function UserActionsCell({user}: UserActionsCellProps) {
+
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [isModalChangePasswordOpen, setIsModalChangePasswordOpen] = useState(false);
+    const [isModalEditUserOpen, setIsModalEditUserOpen] = useState(false);
+    const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false);
+    const {data: session, isPending, error} = authClient.useSession();
+    if (isPending || error) return null;
+    const isCurrentUser = session?.user?.id === user.id;
+    const isSuperAdmin = session?.user?.role === "superadmin";
+
+    if (isCurrentUser || user.role === "superadmin") return null;
+
+    return (
+        <>
+            <AdminUserChangeRoleModal user={user} open={isModalOpen} onOpenChange={setIsModalOpen}/>
+            <AdminDeleteUserModal user={user} open={isModalDeleteOpen} onOpenChange={setIsModalDeleteOpen}/>
+            <AdminUserChangePassword user={user} open={isModalChangePasswordOpen}
+                                     onOpenChange={setIsModalChangePasswordOpen}/>
+            <AdminUserEdit user={user} open={isModalEditUserOpen} onOpenChange={setIsModalEditUserOpen}/>
+            <div className={cn("flex items-center space-x-2")}>
+                <Button variant="outline" size="icon" onClick={() => setIsModalChangePasswordOpen(true)}>
+                    <RotateCcwKey className="w-4 h-4"/>
+                </Button>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                            <MoreHorizontal className="w-4 h-4"/>
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <DropdownMenuItem onSelect={() => setIsModalOpen(true)}>
+                            <Settings className="w-4 h-4 mr-2"/>
+                            Role
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onSelect={() => setIsModalEditUserOpen(true)}>
+                            <UserCog className="w-4 h-4 mr-2"/>
+                            Edit User
+                        </DropdownMenuItem>
+                        {isSuperAdmin && (
+                            <>
+                                <DropdownMenuSeparator/>
+                                <DropdownMenuItem onSelect={() => setIsModalDeleteOpen(true)} className="text-red-600">
+                                    <Trash2 className="w-4 h-4 mr-2"/>
+                                    Delete
+                                </DropdownMenuItem>
+                            </>
+                        )}
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+        </>
+    );
+}
@@ -0,0 +1,191 @@
+"use server";
+
+import * as drizzleDb from "@/db";
+import {ServerActionResult} from "@/types/action-type";
+import {render} from "@react-email/render";
+import {UserSchema} from "@/components/wrappers/dashboard/admin/users/user.schema";
+import {extractNameFromEmail} from "@/utils/name-from-email";
+import {generateValidPassword} from "@/utils/password";
+import {auth} from "@/lib/auth/auth";
+import {z} from "zod";
+import {Organization} from "@/db/schema/03_organization";
+import {db} from "@/db";
+import {and, eq} from "drizzle-orm";
+
+import {zEmail, zString} from "@/lib/zod";
+import {withUpdatedAt} from "@/db/utils";
+import {userAction} from "@/lib/safe-actions/actions";
+import {
+    addMemberOrganizationAction
+} from "@/components/wrappers/dashboard/admin/organizations/organization/details/add-member.action";
+import {sendEmail} from "@/lib/email/email-helper";
+import EmailCreateUser from "@/components/emails/email-create-user";
+import {SignUpUser} from "@/types/auth";
+import {createUserDb} from "@/db/services/user";
+import {User} from "@/db/schema/02_user";
+
+export const createUserAction = userAction.schema(UserSchema).action(async ({parsedInput}): Promise<ServerActionResult<User>> => {
+    try {
+        const password = generateValidPassword();
+
+        const userData: SignUpUser = {
+            name: parsedInput.name || extractNameFromEmail(parsedInput.email),
+            email: parsedInput.email,
+            password: password,
+            theme: "dark",
+            role: "user",
+        };
+
+        const newUser = await createUserDb(userData);
+
+        if (newUser) {
+
+            await sendEmail({
+                to: parsedInput.email,
+                subject: "Your account is created",
+                html: await render(EmailCreateUser({
+                    password: password,
+                    email: parsedInput.email,
+                })),
+            });
+
+            const defaultOrganization = await db.query.organization.findFirst({
+                where: eq(drizzleDb.schemas.organization.slug, "default"),
+            });
+
+            if (defaultOrganization) {
+                await auth.api.addMember({
+                    body: {
+                        userId: newUser.id,
+                        organizationId: defaultOrganization.id,
+                        role: "admin",
+                    },
+                });
+            }
+
+            return {
+                success: true,
+                value: newUser,
+                actionSuccess: {
+                    message: "user_created",
+                },
+            };
+        }
+        return {
+            success: false,
+            actionError: {
+                message: "user_created",
+                cause: "Unknown error",
+            },
+        };
+    } catch (error) {
+        return {
+            success: false,
+            actionError: {
+                message: "user_created",
+                cause: error instanceof Error ? error.message : "Unknown error",
+            },
+        };
+    }
+});
+
+export const updateUserAction = userAction
+    .schema(
+        z.object({
+            id: zString(),
+            name: zString().optional(),
+            email: zEmail(),
+        })
+    )
+    .action(async ({parsedInput, ctx}): Promise<ServerActionResult<{}>> => {
+        try {
+
+
+            const [updatedUser] = await db.update(drizzleDb.schemas.user).set(withUpdatedAt({
+                name: parsedInput.name ? parsedInput.name : extractNameFromEmail(parsedInput.email),
+                email: parsedInput.email,
+                emailVerified: false
+            })).where(eq(drizzleDb.schemas.user.id, parsedInput.id)).returning();
+
+
+            if (updatedUser) {
+                return {
+                    success: true,
+                    actionSuccess: {
+                        message: "user_updated",
+                    },
+                };
+            }
+
+            return {
+                success: false,
+                actionError: {
+                    message: "user_updated",
+                    cause: "Unknown error",
+                },
+            };
+        } catch (error) {
+            return {
+                success: false,
+                actionError: {
+                    message: "user_updated",
+                    cause: error instanceof Error ? error.message : "Unknown error",
+                },
+            };
+        }
+    });
+
+export const setSuperAdminOwnerOfOrganizationsOwnedByUser = userAction
+    .schema(
+        z.object({
+            userId: z.string(),
+        })
+    )
+    .action(async ({parsedInput}): Promise<ServerActionResult<Organization[]>> => {
+        try {
+            const organizationsWhereUserIsMemberAndOwner = await db.query.member.findMany({
+                where: and(eq(drizzleDb.schemas.member.role, "owner"), eq(drizzleDb.schemas.member.userId, parsedInput.userId)),
+                with: {
+                    organization: true,
+                },
+            });
+
+            const superAdminUser = await db.query.user.findFirst();
+            if (!superAdminUser) {
+                return {
+                    success: false,
+                    actionError: {
+                        message: "set_super_admin_owner_of_organizations_owned_by_user",
+                        cause: "Unknown error",
+                    },
+                };
+            }
+
+            for (let {organization} of organizationsWhereUserIsMemberAndOwner) {
+                await addMemberOrganizationAction({
+                    userId: superAdminUser.id,
+                    organizationId: organization.id,
+                    role: "owner",
+                });
+            }
+            const organizations = organizationsWhereUserIsMemberAndOwner.map(
+                (organizationWhereUserIsMemberAndOwner) => organizationWhereUserIsMemberAndOwner.organization
+            );
+
+            return {
+                success: true,
+                value: organizations as unknown as Organization[],
+                actionSuccess: {
+                    message: "set_super_admin_owner_of_organizations_owned_by_user",
+                },
+            };
+        } catch (error) {
+            return {
+                success: false,
+                actionError: {
+                    message: "error_set_super_admin_owner_of_organizations_owned_by_user",
+                    cause: error instanceof Error ? error.message : "Unknown error",
+                },
+            };
+        }
+    });
@@ -0,0 +1,16 @@
+import { z } from "zod";
+import { zEmail, zString } from "@/lib/zod";
+
+export const UserSchema = z.object({
+    email: zEmail(),
+    name: zString(),
+});
+
+export type UserType = z.infer<typeof UserSchema>;
+
+export const UserEditSchema = z.object({
+    email: zEmail(),
+    name: zString(),
+});
+
+export type UserEditType = z.infer<typeof UserEditSchema>;
@@ -1,11 +1,13 @@
 "use client";

-import {Card, CardContent, CardHeader} from "@/components/ui/card";
+import {useState} from "react";
 import Link from "next/link";
-import {formatDateLastContact} from "@/utils/date-formatting";
+import {Card} from "@/components/ui/card";
 import {ConnectionCircle} from "@/components/wrappers/common/connection-circle";
-import {Agent, AgentWith} from "@/db/schema/08_agent";
-import {Activity, Database, ShieldCheck} from "lucide-react";
+import {formatDateLastContact} from "@/utils/date-formatting";
+import {AgentWith} from "@/db/schema/08_agent";
+import {Activity, ChevronRight, Copy, Check, Fingerprint, Server, Database, ShieldCheck} from "lucide-react";
+import {Badge} from "@/components/ui/badge";

 export type agentCardProps = {
    data: AgentWith;
@@ -13,39 +15,78 @@ export type agentCardProps = {

 export const AgentCard = (props: agentCardProps) => {
    const {data: agent} = props;
+    const [isCopied, setIsCopied] = useState(false);
+
+    const handleCopy = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        navigator.clipboard.writeText(agent.id);
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2000);
+    };

    return (
-        <Link href={`/dashboard/agents/${agent.id}`}
-              className="block transition-all duration-200 hover:scale-[1.01] hover:shadow-md rounded-xl"
+        <Link 
+            href={`/dashboard/agents/${agent.id}`}
+            className="group block transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl"
        >
-            <Card className="flex flex-row justify-between">
-                <div className="flex-1 text-left">
-                    <CardHeader className="text-2xl font-bold">{agent.name}</CardHeader>
-                    <CardContent>
-                        <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-muted-foreground">
-                            <div className="flex items-center gap-2">
-                                <Activity className="h-4 w-4"/>
-                                <span>{formatDateLastContact(agent.lastContact)}</span>
-                            </div>
-
-                            <div className="flex items-center gap-2">
-                                <Database className="h-4 w-4"/>
-                                <span>{agent.databases?.length ?? 0} DB</span>
-                            </div>
-
-                            <div className="flex items-center gap-2">
-                                <ShieldCheck className="h-4 w-4"/>
-                                {agent.version ?
-                                    <span>v{agent.version}</span>
-                                    :
-                                    <span>N/A</span>
-                                }
-                            </div>
-                        </div>
-                    </CardContent>
+            <Card className="flex flex-row items-center p-4 gap-5 transition-all border-border/50 bg-card hover:bg-accent/50 hover:border-primary/50 group-hover:shadow-md overflow-hidden">
+                <div className="relative w-12 h-12 p-2.5 bg-background rounded-xl border border-border/50 shadow-sm flex items-center justify-center group-hover:border-primary/30 transition-all duration-300 group-hover:scale-105 shrink-0">
+                    <Server className="w-6 h-6 text-foreground/80 group-hover:text-primary transition-colors" />
                </div>
-                <div className="flex items-center px-4">
-                    <ConnectionCircle date={agent.lastContact}/>
+                
+                <div className="flex-1 min-w-0 flex flex-col gap-1.5">
+                    <div className="flex items-center gap-3">
+                        <h3 className="text-lg font-black text-foreground group-hover:text-primary transition-colors truncate tracking-tight leading-none">
+                            {agent.name}
+                        </h3>
+                        {agent.version && (
+                            <Badge variant="secondary" className="h-5 px-1.5 text-[10px] font-bold tracking-wider">
+                                v{agent.version}
+                            </Badge>
+                        )}
+                    </div>
+                    
+                    <div className="flex items-center gap-4 text-muted-foreground group-hover:text-foreground transition-colors">
+                        <div className="flex items-center gap-1.5 min-w-0">
+                            <Fingerprint className="w-3.5 h-3.5 shrink-0" />
+                            <span className="font-mono text-xs font-bold truncate opacity-80">
+                                {agent.id}
+                            </span>
+                            <button
+                                onClick={handleCopy}
+                                className="ml-0.5 p-1 hover:bg-muted rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 z-10"
+                                title="Copy ID"
+                            >
+                                {isCopied ? <Check className="w-3 h-3 text-green-500" /> : <Copy className="w-3 h-3" />}
+                            </button>
+                        </div>
+
+                        <div className="hidden sm:flex items-center gap-1.5 shrink-0">
+                            <Database className="w-3.5 h-3.5" />
+                            <span className="text-xs font-bold uppercase tracking-tight opacity-80">
+                                {agent.databases?.length ?? 0} DBs
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-4 shrink-0">
+                     <div className="hidden sm:flex flex-col items-end gap-1 text-right">
+                        <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/70">Last Contact</span>
+                        <div className="flex items-center gap-1.5">
+                            <Activity className="w-3.5 h-3.5 text-muted-foreground" />
+                             <span className="text-xs font-bold uppercase tracking-tight">
+                                {formatDateLastContact(agent.lastContact)}
+                            </span>
+                        </div>
+                    </div>
+
+                    <div className="scale-110">
+                        <ConnectionCircle date={agent.lastContact}/>
+                    </div>
+                    
+                    <ChevronRight className="w-5 h-5 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all" />
                </div>
            </Card>
        </Link>
@@ -5,7 +5,7 @@ import {Server} from "lucide-react";
 import {formatDateLastContact} from "@/utils/date-formatting";
 import {AgentCardKey} from "@/components/wrappers/dashboard/agent/agent-card-key/agent-card-key";
 import {CardsWithPagination} from "@/components/wrappers/common/cards-with-pagination";
-import {DatabaseCard} from "@/components/wrappers/dashboard/projects/project-card/project-database-card";
+import {AgentDatabaseCard} from "@/components/wrappers/dashboard/agent/agent-database-card";
 import {AgentWithDatabases} from "@/db/schema/08_agent";
 import {eventUpdate} from "@/types/events";
 import {useAutoRefresh} from "@/hooks/use-auto-refresh";
@@ -72,7 +72,7 @@ export const AgentContentPage = ({edgeKey, agent}: AgentContentPageProps) => {
                </CardContent>
            </Card>
            <CardsWithPagination cardsPerPage={4} numberOfColumns={2} data={agent.databases}
-                                 cardItem={DatabaseCard}/>
+                                 cardItem={AgentDatabaseCard}/>

        </>
    )
@@ -0,0 +1,26 @@
+"use client";
+
+import {Database} from "@/db/schema/07_database";
+import {DatabaseCard} from "@/components/wrappers/dashboard/projects/project-card/project-database-card";
+
+export type agentDatabaseCardProps = {
+    data: Database;
+};
+
+export const AgentDatabaseCard = (props: agentDatabaseCardProps) => {
+    const {data: database} = props;
+
+    return <DatabaseCard data={database}/>;
+
+    //todo: à remettre quand on aura fait l'impersonation des admins
+   /* if (!database.projectId) {
+         return <DatabaseCard data={database}/>;
+    }
+
+    return (
+        <Link className="group block transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl"
+              href={`/dashboard/projects/${database.projectId}/database/${database.id}`}>
+            <DatabaseCard data={database}/>
+        </Link>
+    );*/
+};
@@ -47,7 +47,6 @@ export const AgentForm = (props: agentFormProps) => {

            const data = createAgent?.data?.data;
            if (createAgent?.serverError || !data) {
-                console.log(createAgent?.serverError);
                toast.error(createAgent?.serverError);
                return;
            }
@@ -1,6 +1,7 @@
 import {currentUser} from "@/lib/auth/current-user";
 import {getAccounts, getSession, getSessions} from "@/lib/auth/auth";
 import {LoggedInButtonClient} from "./logged-in-button";
+import {SUPPORTED_PROVIDERS} from "../../../../../../portabase.config";

 export const LoggedInButton = async () => {
    const user = await currentUser();
@@ -18,6 +19,7 @@ export const LoggedInButton = async () => {
             // @ts-ignore
            currentSession={currentSession.session}
            accounts={accounts}
+            providers={SUPPORTED_PROVIDERS.filter((p) => p.isActive)}
        />
    );
 };
@@ -1,62 +1,27 @@
-// import { ChevronUp } from "lucide-react";
-//
-// import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
-// import { currentUser } from "@/lib/auth/current-user";
-// import { SidebarMenuButton } from "@/components/ui/sidebar";
-// import { getAccounts, getSession, getSessions } from "@/lib/auth/auth";
-// import {LoggedInDropdown} from "@/components/wrappers/dashboard/common/logged-in/logged-in-dropdown";
-//
-// export const LoggedInButton = async () => {
-//     const user = await currentUser();
-//     const sessions = await getSessions();
-//     const currentSession = await getSession();
-//     const accounts = await getAccounts();
-//
-//     if (!user) return null;
-//
-//
-//     return (
-//         <>
-//             <LoggedInDropdown
-//                 // @ts-ignore
-//                 user={user}
-//                 // @ts-ignore
-//                 sessions={sessions}
-//                 // @ts-ignore
-//                 currentSession={currentSession.session}
-//                 // @ts-ignore
-//                 accounts={accounts}
-//             >
-//                 <SidebarMenuButton>
-//
-//                     <Avatar className="size-6">
-//                         <AvatarFallback>{user?.name[0].toUpperCase()}</AvatarFallback>
-//                         {user?.image ? <AvatarImage src={user?.image} alt={`${user.name ?? "-"}'s profile picture`} /> : null}
-//                     </Avatar>
-//
-//                     <span className="first-letter:capitalize">{user?.name}</span>
-//                     <ChevronUp className="ml-auto" />
-//                 </SidebarMenuButton>
-//             </LoggedInDropdown>
-//         </>
-//     );
-// };
 "use client";

-import {ChevronUp} from "lucide-react";
+import {ChevronsUpDown, ChevronUp} from "lucide-react";
 import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
 import {SidebarMenuButton} from "@/components/ui/sidebar";
 import {LoggedInDropdown} from "./logged-in-dropdown";
 import {Account, Session, User} from "better-auth";
+import {AuthProviderConfig} from "../../../../../../portabase.config";

 type LoggedInButtonClientProps = {
-    user: User;
-    sessions: Session[];
-    currentSession: Session;
-    accounts: Account[];
+    user: User,
+    sessions: Session[],
+    currentSession: Session,
+    accounts: Account[],
+    providers: AuthProviderConfig[]
 }

-export const LoggedInButtonClient = ({user, sessions, currentSession, accounts}: LoggedInButtonClientProps) => {
+export const LoggedInButtonClient = ({
+                                         user,
+                                         sessions,
+                                         currentSession,
+                                         accounts,
+                                         providers
+                                     }: LoggedInButtonClientProps) => {

    return (
        <LoggedInDropdown
@@ -68,15 +33,25 @@ export const LoggedInButtonClient = ({user, sessions, currentSession, accounts}:
            currentSession={currentSession}
            // @ts-ignore
            accounts={accounts}
+            providers={providers}
        >
-            <SidebarMenuButton type="button">
-                <Avatar className="size-6">
-                    <AvatarFallback>{user.name[0].toUpperCase()}</AvatarFallback>
-                    {user.image && <AvatarImage src={user.image}/>}
-                </Avatar>
-
-                <span className="first-letter:capitalize">{user.name}</span>
-                <ChevronUp className="ml-auto"/>
+            <SidebarMenuButton type="button" className="h-auto  justify-between py-2" >
+                <div className="flex items-center gap-2">
+                    <Avatar className="size-6">
+                        <AvatarFallback>{user.name[0].toUpperCase()}</AvatarFallback>
+                        {user.image && <AvatarImage src={user.image}/>}
+                    </Avatar>
+                    <div className="flex flex-col items-start">
+                        <span className="text-sm font-medium first-letter:capitalize max-w-[170px] truncate">{user.name}</span>
+                        <span
+                            className="text-xs text-muted-foreground max-w-[170px] truncate"
+                            title={user.email}
+                        >
+                      {user.email}
+                    </span>
+                    </div>
+                </div>
+                <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50"/>
            </SidebarMenuButton>
        </LoggedInDropdown>
    );
@@ -7,6 +7,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 import { signOut } from "@/lib/auth/auth-client";
 import {ProfileModal} from "@/components/wrappers/dashboard/common/profile/profile-modal";
 import {Account, Session, User} from "@/db/schema/02_user";
+import {AuthProviderConfig} from "../../../../../../portabase.config";

 export type LoggedInDropdownProps = PropsWithChildren<{
    user: User;
@@ -14,9 +15,11 @@ export type LoggedInDropdownProps = PropsWithChildren<{
    currentSession: Session;
    accounts: Account[];
    children: ReactNode;
+    providers: AuthProviderConfig[]
+
 }>;

-export const LoggedInDropdown = ({ user, sessions, currentSession, accounts, children }: LoggedInDropdownProps) => {
+export const LoggedInDropdown = ({ user, sessions, currentSession, accounts, children, providers }: LoggedInDropdownProps) => {
    const router = useRouter();
    const [isModalOpen, setIsModalOpen] = useState(false);

@@ -29,6 +32,7 @@ export const LoggedInDropdown = ({ user, sessions, currentSession, accounts, chi
                accounts={accounts}
                open={isModalOpen}
                onOpenChange={setIsModalOpen}
+                providers={providers}
            />

            <DropdownMenu>
@@ -7,11 +7,11 @@ export const NotificationChannelFormSchema = z.object({
        .min(5, "Name must be at least 5 characters long")
        .max(40, "Name must be at most 40 characters long"),

-    provider: z.enum(["slack", "smtp"], {
+    provider: z.enum(["slack", "smtp", "discord", "telegram", "gotify", "ntfy", "webhook"], {
        required_error: "Provider is required",
    }),

-    config: z.record(z.string()).optional(),
+    config: z.record(z.union([z.string(), z.number(), z.boolean(), z.null(), z.undefined()])).optional(),


    enabled: z.boolean().default(true),
@@ -8,7 +8,6 @@ import {Input} from "@/components/ui/input";
 import {
    NotificationChannelFormSchema, NotificationChannelFormType
 } from "@/components/wrappers/dashboard/common/notifier/notifier-form/notifier-form.schema";
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
 import {
    addNotificationChannelAction, updateNotificationChannelAction
 } from "@/components/wrappers/dashboard/common/notifier/notifier-form/notifier-form.action";
@@ -20,12 +19,31 @@ import {
 import {
    NotifierSlackForm
 } from "@/components/wrappers/dashboard/common/notifier/notifier-form/providers/notifier-slack.form";
+import {
+    NotifierDiscordForm
+} from "@/components/wrappers/dashboard/common/notifier/notifier-form/providers/notifier-discord.form";
+import {
+    NotifierTelegramForm
+} from "@/components/wrappers/dashboard/common/notifier/notifier-form/providers/notifier-telegram.form";
+import {
+    NotifierGotifyForm
+} from "@/components/wrappers/dashboard/common/notifier/notifier-form/providers/notifier-gotify.form";
+import {
+    NotifierNtfyForm
+} from "@/components/wrappers/dashboard/common/notifier/notifier-form/providers/notifier-ntfy.form";
+import {
+    NotifierWebhookForm
+} from "@/components/wrappers/dashboard/common/notifier/notifier-form/providers/notifier-webhook.form";
 import {Button} from "@/components/ui/button";
-import {NotificationChannel, NotificationChannelWith} from "@/db/schema/09_notification-channel";
+import {NotificationChannelWith} from "@/db/schema/09_notification-channel";
 import {
    NotifierTestChannelButton
 } from "@/components/wrappers/dashboard/common/notifier/notifier-form/notifier-test-channel-button";
 import {useEffect} from "react";
+import {notificationTypes} from "@/components/wrappers/dashboard/admin/notifications/helpers";
+import {cn} from "@/lib/utils";
+import {Card} from "@/components/ui/card";
+import {ArrowLeft} from "lucide-react";

 type NotifierFormProps = {
    onSuccessAction?: () => void;
@@ -34,7 +52,7 @@ type NotifierFormProps = {
    adminView?: boolean
 };

-export const NotifierForm = ({onSuccessAction, organization, defaultValues, adminView}: NotifierFormProps) => {
+export const NotifierForm = ({onSuccessAction, organization, defaultValues}: NotifierFormProps) => {

    const router = useRouter();
    const isCreate = !Boolean(defaultValues);
@@ -75,10 +93,36 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues, admi
    });

    const provider = form.watch("provider");
+    const selectedProviderDetails = notificationTypes.find(t => t.value === provider);

+    if (isCreate && !provider) {
+        return (
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-4 py-4">
+                {notificationTypes.map((type) => {
+                    const Icon = type.icon;
+                    return (
+                        <Card
+                            key={type.value}
+                            className={cn(
+                                "flex flex-col items-center justify-center gap-3 p-4 cursor-pointer hover:bg-accent/50 hover:border-primary/50 transition-all",
+                            )}
+                            onClick={() => {
+                                form.setValue("provider", type.value as any);
+                                form.setValue("config", {});
+                            }}
+                        >
+                            <div className="h-10 w-10 bg-secondary rounded-full flex items-center justify-center">
+                                <Icon className="h-6 w-6 text-foreground"/>
+                            </div>
+                            <span className="font-medium text-sm">{type.label}</span>
+                        </Card>
+                    );
+                })}
+            </div>
+        );
+    }

    return (
-
        <Form
            form={form}
            className="flex flex-col gap-4"
@@ -86,6 +130,32 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues, admi
                await mutationAddNotificationChannel.mutateAsync(values);
            }}
        >
+            <div className="flex items-center gap-3 mb-2 p-3 bg-secondary/30 rounded-lg border border-border">
+                {selectedProviderDetails && (
+                    <div className="h-10 w-10 bg-background rounded-full flex items-center justify-center border border-border shadow-sm">
+                        <selectedProviderDetails.icon className="h-5 w-5"/>
+                    </div>
+                )}
+                <div className="flex-1">
+                    <p className="text-sm font-medium">Configuring {selectedProviderDetails?.label}</p>
+                    <p className="text-xs text-muted-foreground">{isCreate ? "New Channel" : "Edit Channel"}</p>
+                </div>
+                {isCreate && (
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => {
+                            form.setValue("provider", undefined as any);
+                            form.setValue("config", undefined);
+                        }}
+                    >
+                        <ArrowLeft className="h-4 w-4 mr-2"/>
+                        Change
+                    </Button>
+                )}
+            </div>
+
            <FormField
                control={form.control}
                name="name"
@@ -93,7 +163,7 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues, admi
                    <FormItem>
                        <FormLabel>Channel Name</FormLabel>
                        <FormControl>
-                            <Input {...field} placeholder="e.g., Primary email, Team Slack" value={field.value ?? ""}/>
+                            <Input {...field} placeholder={`My ${selectedProviderDetails?.label} Channel`} value={field.value ?? ""}/>
                        </FormControl>
                        <FormMessage/>
                    </FormItem>
@@ -104,28 +174,7 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues, admi
                control={form.control}
                name="provider"
                render={({field}) => (
-                    <FormItem>
-                        <FormLabel>Provider</FormLabel>
-                        <FormControl>
-                            <Select
-                                onValueChange={(value) => {
-                                    form.setValue("config", {});
-                                    field.onChange(value);
-                                }}
-                                value={field.value || ""}>
-                                <SelectTrigger className="w-full">
-                                    <SelectValue placeholder="Select provider"/>
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectItem value="smtp">SMTP (Email)</SelectItem>
-                                    <SelectItem value="slack">Slack</SelectItem>
-                                    {/*<SelectItem value="curl">Curl</SelectItem>*/}
-                                    {/*<SelectItem value="webhook">Webhook</SelectItem>*/}
-                                </SelectContent>
-                            </Select>
-                        </FormControl>
-                        <FormMessage/>
-                    </FormItem>
+                    <input type="hidden" {...field} value={field.value || ""} />
                )}
            />

@@ -137,8 +186,28 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues, admi
                <NotifierSlackForm form={form}/>
            )}

+            {provider === "discord" && (
+                <NotifierDiscordForm form={form}/>
+            )}

-            <div className="flex justify-between">
+            {provider === "telegram" && (
+                <NotifierTelegramForm form={form}/>
+            )}
+
+            {provider === "gotify" && (
+                <NotifierGotifyForm form={form}/>
+            )}
+
+            {provider === "ntfy" && (
+                <NotifierNtfyForm form={form}/>
+            )}
+
+            {provider === "webhook" && (
+                <NotifierWebhookForm form={form}/>
+            )}
+
+
+            <div className="flex justify-between mt-4">
                <div>
                    {defaultValues && (
                        <NotifierTestChannelButton organizationId={organization?.id}
@@ -164,4 +233,4 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues, admi
            </div>
        </Form>
    );
-};
+};
@@ -20,15 +20,6 @@ export const NotifierTestChannelButton = ({notificationChannel, organizationId}:
    const mutation = useMutation({
        mutationFn: async () => {

-            // const payload: EventPayload = {
-            //     title: 'Database Down',
-            //     message: 'Primary DB instance is unreachable',
-            //     level: 'critical',
-            //     data: {host: 'db-prod-01', error: 'connection timeout'},
-            // };
-
-            console.log("organizationId ici", organizationId);
-
            const payload: EventPayload = {
                title: 'Test Channel',
                message: `We are testing channel ${notificationChannel.name}`,
@@ -0,0 +1,30 @@
+import {UseFormReturn} from "react-hook-form";
+import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
+import {Input} from "@/components/ui/input";
+import {Separator} from "@/components/ui/separator";
+
+
+type NotifierDiscordFormProps = {
+    form: UseFormReturn<any, any, any>
+}
+
+export const NotifierDiscordForm = ({form}: NotifierDiscordFormProps) => {
+    return (
+        <>
+            <Separator className="my-1"/>
+            <FormField
+                control={form.control}
+                name="config.discordWebhook"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Discord Webhook URL</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="https://discord.com/api/webhooks/..."/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+        </>
+    )
+}
@@ -0,0 +1,43 @@
+import {UseFormReturn} from "react-hook-form";
+import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
+import {Input} from "@/components/ui/input";
+import {Separator} from "@/components/ui/separator";
+
+
+type NotifierGotifyFormProps = {
+    form: UseFormReturn<any, any, any>
+}
+
+export const NotifierGotifyForm = ({form}: NotifierGotifyFormProps) => {
+    return (
+        <>
+            <Separator className="my-1"/>
+            <FormField
+                control={form.control}
+                name="config.gotifyServerUrl"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Gotify Server URL</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="https://gotify.example.com"/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+            <FormField
+                control={form.control}
+                name="config.gotifyAppToken"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Application Token</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="A1b2C3d4E5f6G7h"/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+        </>
+    )
+}
@@ -0,0 +1,58 @@
+import {UseFormReturn} from "react-hook-form";
+import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
+import {Input} from "@/components/ui/input";
+import {Separator} from "@/components/ui/separator";
+
+
+type NotifierNtfyFormProps = {
+    form: UseFormReturn<any, any, any>
+}
+
+export const NotifierNtfyForm = ({form}: NotifierNtfyFormProps) => {
+    return (
+        <>
+            <Separator className="my-1"/>
+            <FormField
+                control={form.control}
+                name="config.ntfyTopic"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Topic Name</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="my-secret-topic"/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+            <FormField
+                control={form.control}
+                name="config.ntfyServerUrl"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Server URL (Optional)</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="https://ntfy.sh (default)"/>
+                        </FormControl>
+                        <p className="text-xs text-muted-foreground">Leave empty to use the official ntfy.sh server.</p>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+            <FormField
+                control={form.control}
+                name="config.ntfyToken"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Access Token (Optional)</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="tk_..."/>
+                        </FormControl>
+                        <p className="text-xs text-muted-foreground">Only required for protected topics or self-hosted instances with auth.</p>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+        </>
+    )
+}
@@ -0,0 +1,48 @@
+import {UseFormReturn} from "react-hook-form";
+import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
+import {Input} from "@/components/ui/input";
+import {Separator} from "@/components/ui/separator";
+
+
+type NotifierTelegramFormProps = {
+    form: UseFormReturn<any, any, any>
+}
+
+export const NotifierTelegramForm = ({form}: NotifierTelegramFormProps) => {
+    return (
+        <>
+            <Separator className="my-1"/>
+            <FormField
+                control={form.control}
+                name="config.telegramBotToken"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Telegram Bot Token</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+            <FormField
+                control={form.control}
+                name="config.telegramChatId"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Telegram Chat ID</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="-100123456789 or 123456789"/>
+                        </FormControl>
+                        <p className="text-xs text-muted-foreground">
+                            You must start the conversation with the bot first (<strong>/start</strong>). <br/>
+                            For groups, add the bot to the group. <br/>
+                            You can use <a href="https://t.me/userinfobot" target="_blank" rel="noopener noreferrer" className="underline">@userinfobot</a> to find your ID.
+                        </p>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+        </>
+    )
+}
@@ -0,0 +1,65 @@
+import {UseFormReturn} from "react-hook-form";
+import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
+import {Input} from "@/components/ui/input";
+import {Separator} from "@/components/ui/separator";
+
+
+type NotifierWebhookFormProps = {
+    form: UseFormReturn<any, any, any>
+}
+
+export const NotifierWebhookForm = ({form}: NotifierWebhookFormProps) => {
+    return (
+        <>
+            <Separator className="my-1"/>
+            <FormField
+                control={form.control}
+                name="config.webhookUrl"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Webhook URL</FormLabel>
+                        <FormControl>
+                            <Input {...field} placeholder="https://example.com/api/webhook"/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+            <div className="flex gap-4">
+                <div className="flex-1">
+                    <FormField
+                        control={form.control}
+                        name="config.webhookSecretHeader"
+                        render={({field}) => (
+                            <FormItem>
+                                <FormLabel>Header Name (Optional)</FormLabel>
+                                <FormControl>
+                                    <Input {...field} placeholder="X-Webhook-Secret"/>
+                                </FormControl>
+                                <FormMessage/>
+                            </FormItem>
+                        )}
+                    />
+                </div>
+                <div className="flex-1">
+                    <FormField
+                        control={form.control}
+                        name="config.webhookSecret"
+                        render={({field}) => (
+                            <FormItem>
+                                <FormLabel>Secret Value (Optional)</FormLabel>
+                                <FormControl>
+                                    <Input {...field} placeholder="Secret value..."/>
+                                </FormControl>
+                                <FormMessage/>
+                            </FormItem>
+                        )}
+                    />
+                </div>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2">
+                If provided, the secret will be sent in the specified header (defaults to <code>X-Webhook-Secret</code>).
+            </p>
+        </>
+    )
+}
@@ -10,6 +10,7 @@ import {ProfileAccount} from "@/components/wrappers/dashboard/profile/profile-ac
 import {ProfileAppearance} from "@/components/wrappers/dashboard/profile/profile-apperance";
 import {ProfileSecurity} from "@/components/wrappers/dashboard/profile/profile-security";
 import {ProfileGeneral} from "@/components/wrappers/dashboard/profile/profile-general";
+import {AuthProviderConfig} from "../../../../../../portabase.config";

 type ProfileModalProps = {
    open: boolean;
@@ -18,9 +19,11 @@ type ProfileModalProps = {
    currentSession: Session;
    accounts: Account[];
    onOpenChange: (open: boolean) => void;
+    providers: AuthProviderConfig[]
+
 };

-export const ProfileModal = ({ user, sessions, currentSession, accounts, open, onOpenChange }: ProfileModalProps) => {
+export const ProfileModal = ({ user, sessions, currentSession, accounts, open, onOpenChange, providers }: ProfileModalProps) => {
    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="w-[95vw] h-[90vh] max-w-md lg:max-w-[1000px] lg:h-[800px] p-0 overflow-hidden flex flex-col outline-none gap-0 rounded-xl bg-background">
@@ -46,7 +49,7 @@ export const ProfileModal = ({ user, sessions, currentSession, accounts, open, o
                        </TabsContent>

                        <TabsContent value="providers" className="mt-0 h-full p-6 lg:p-10 outline-none focus-visible:ring-0">
-                            <ProfileProviders accounts={accounts} />
+                            <ProfileProviders accounts={accounts} providers={providers} />
                        </TabsContent>

                        <TabsContent value="account" className="mt-0 h-full p-6 lg:p-10 outline-none focus-visible:ring-0">
@@ -34,7 +34,6 @@ export function AppSidebar() {
            <SidebarMenu className="mb-2">
                <SidebarMenuItem className="p-2">
                    <LoggedInButton/>
-
                </SidebarMenuItem>
            </SidebarMenu>
            <SideBarFooterCredit/>
@@ -1,4 +1,4 @@
-import {Form, FormControl, FormField, FormItem, FormMessage, useZodForm} from "@/components/ui/form";
+import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm} from "@/components/ui/form";
 import {InfoIcon, Plus, Trash2} from "lucide-react";
 import {useFieldArray} from "react-hook-form";
 import {
@@ -11,7 +11,6 @@ import {NotificationChannel} from "@/db/schema/09_notification-channel";
 import {Label} from "@/components/ui/label";
 import {Button} from "@/components/ui/button";
 import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
-import {Separator} from "@/components/ui/separator";
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
 import {MultiSelect} from "@/components/wrappers/common/multiselect/multi-select";
 import {useMutation} from "@tanstack/react-query";
@@ -22,7 +21,10 @@ import {
 } from "@/components/wrappers/dashboard/database/alert-policy/alert-policy.action";
 import {useRouter} from "next/navigation";
 import {Switch} from "@/components/ui/switch";
-import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
+import {getNotificationChannelIcon} from "@/components/wrappers/dashboard/admin/notifications/helpers";
+import {Card} from "@/components/ui/card";
+import {cn} from "@/lib/utils";
+import Link from "next/link";

 type AlertPolicyFormProps = {
    onSuccess?: () => void;
@@ -36,9 +38,8 @@ export const AlertPolicyForm = ({database, notificationChannels, organizationId,
    const organizationNotificationChannels = notificationChannels.map(channel => channel.id) ?? [];


-
    const formattedAlertPoliciesList = (alertPolicies: AlertPolicy[]) => {
-        return alertPolicies.filter((alertPolicy)=> organizationNotificationChannels.includes(alertPolicy.notificationChannelId)).map((alertPolicy) => ({
+        return alertPolicies.filter((alertPolicy) => organizationNotificationChannels.includes(alertPolicy.notificationChannelId)).map((alertPolicy) => ({
            notificationChannelId: alertPolicy.notificationChannelId,
            eventKinds: alertPolicy.eventKinds,
            enabled: alertPolicy.enabled
@@ -48,11 +49,7 @@ export const AlertPolicyForm = ({database, notificationChannels, organizationId,
    const form = useZodForm({
        schema: AlertPoliciesSchema,
        defaultValues: {
-            alertPolicies: database.alertPolicies && database.alertPolicies.length > 0 ? formattedAlertPoliciesList(database.alertPolicies) : [{
-                notificationChannelId: "",
-                eventKinds: [],
-                enabled: true,
-            }],
+            alertPolicies: database.alertPolicies && database.alertPolicies.length > 0 ? formattedAlertPoliciesList(database.alertPolicies) : [],
        },
    });

@@ -63,7 +60,7 @@ export const AlertPolicyForm = ({database, notificationChannels, organizationId,


    const addAlertPolicy = () => {
-        append({id: "", eventKinds: [], enabled: true});
+        append({notificationChannelId: "", eventKinds: [], enabled: true});
    }

    const removeAlertPolicy = (index: number) => {
@@ -78,12 +75,6 @@ export const AlertPolicyForm = ({database, notificationChannels, organizationId,

    const mutation = useMutation({
        mutationFn: async ({alertPolicies}: AlertPoliciesType) => {
-
-
-
-
-            console.log(alertPolicies)
-
            const defaultFormatedAlertPolicies = formattedAlertPoliciesList(database?.alertPolicies ?? []);

            const alertPoliciesToAdd = alertPolicies?.filter(
@@ -97,15 +88,10 @@ export const AlertPolicyForm = ({database, notificationChannels, organizationId,
            const alertPoliciesToUpdate = alertPolicies?.filter((alertPolicy) => {
                const existing = defaultFormatedAlertPolicies.find((a) => a.notificationChannelId === alertPolicy.notificationChannelId);
                return existing &&
-                    (existing.eventKinds !== alertPolicy.eventKinds);
+                    (existing.eventKinds !== alertPolicy.eventKinds || existing.enabled !== alertPolicy.enabled);
            }) ?? [];


-            console.log("alertPoliciesToAdd", alertPoliciesToAdd)
-            console.log("alertPoliciesToRemove", alertPoliciesToRemove)
-            console.log("alertPoliciesToUpdate", alertPoliciesToUpdate)
-
-
            const results = await Promise.allSettled([
                alertPoliciesToAdd.length > 0
                    ? createAlertPoliciesAction({
@@ -129,8 +115,6 @@ export const AlertPolicyForm = ({database, notificationChannels, organizationId,
                    : Promise.resolve(null),
            ]);

-            console.log(results);
-
            const rejected = results.find((r): r is PromiseRejectedResult => r.status === "rejected");
            if (rejected) {
                throw new Error(rejected.reason?.message || "Network or server error");
@@ -144,7 +128,6 @@ export const AlertPolicyForm = ({database, notificationChannels, organizationId,
                );


-            console.log("failedActions", failedActions);
            if (failedActions.length > 0) {
                const firstError = failedActions[0].data.actionError;
                const message = firstError?.message || "One or more operations failed";
@@ -155,7 +138,7 @@ export const AlertPolicyForm = ({database, notificationChannels, organizationId,
        },
        onSuccess: () => {
            toast.success("Alert policies saved successfully");
-            // onSuccess?.();
+            //onSuccess?.();
            router.refresh();
        },
        onError: (error: any) => {
@@ -167,160 +150,201 @@ export const AlertPolicyForm = ({database, notificationChannels, organizationId,
    return (
        <Form
            form={form}
-            className="flex flex-col gap-4"
+            className="flex flex-col gap-6"
            onSubmit={async (values) => {
                await mutation.mutateAsync(values);
            }}
        >
            <div className="space-y-4">
                <div className="flex items-center justify-between">
-                    <Label className="text-sm font-medium">Alert Policies</Label>
+                    <div>
+                        <Label className="text-base font-medium">Configure Alerts</Label>
+                        <p className="text-xs text-muted-foreground mt-1">
+                            Choose which channels receive notifications for specific events.
+                        </p>
+                    </div>
                    <Button
                        disabled={
                            fields.length >= notificationChannels.length ||
                            notificationChannels.length === 0
                        }
                        type="button"
-                        variant="outline" size="sm" onClick={addAlertPolicy}>
-                        <Plus className="w-4 h-4 mr-2"/>
-                        Add
+                        size="sm"
+                        className="h-8"
+                        onClick={addAlertPolicy}>
+                        <Plus className="w-4 h-4 mr-1.5"/>
+                        Add Policy
                    </Button>
                </div>

                <div className="space-y-3 w-full">
                    {organizationNotificationChannels.length === 0 ? (
-                        <div className="text-muted-foreground text-sm text-center border border-dashed rounded-lg p-4">
-                            No alerts policy in organization
+                        <div
+                            className="flex flex-col items-center justify-center p-8 border border-dashed rounded-xl bg-muted/20 text-center gap-2">
+                            <InfoIcon className="h-8 w-8 text-muted-foreground/50"/>
+                            <p className="font-medium text-sm text-foreground">No notification channels</p>
+                            <p className="text-xs text-muted-foreground max-w-xs">
+                                Please <Link href={`/dashboard/settings`} className="underline underline-offset-4 hover:text-primary transition-colors">configure notification channels</Link> in your organization settings first.
+                            </p>
                        </div>
                    ) : fields.length === 0 ? (
-                        <div className="text-muted-foreground text-sm text-center">
-                            No alert policy, create one
+                        <div
+                            className="flex flex-col items-center justify-center p-8 border border-dashed rounded-xl bg-muted/20 text-center gap-2">
+                            <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
+                                <Plus className="h-4 w-4 text-primary"/>
+                            </div>
+                            <p className="font-medium text-sm text-foreground">No alert policies</p>
+                            <p className="text-xs text-muted-foreground">
+                                Click "Add Policy" to start receiving notifications.
+                            </p>
                        </div>
                    ) : (
-                        fields.map((field, index) => (
-                            <div key={field.id}>
-                                <div className="flex w-full gap-3">
-                                    <div className="flex-1">
-                                        <FormField
-                                            control={form.control}
-                                            name={`alertPolicies.${index}.notificationChannelId`}
-                                            render={({field}) => {
-                                                const selectedIds = form
-                                                    .watch("alertPolicies")
-                                                    .map((a: AlertPolicyType) => a.notificationChannelId)
-                                                    .filter(Boolean);
+                        <div className="grid gap-4">
+                            {fields.map((field, index) => (
+                                <Card key={field.id} className="p-4 transition-all hover:border-primary/50 relative group">
+                                    <div className="flex flex-col gap-4">
+                                        <div className="grid grid-cols-[1fr_auto_auto] gap-3 items-end">
+                                            <div className="flex flex-col gap-1.5">
+                                                <Label className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest pl-0.5">
+                                                    Notification Channel
+                                                </Label>
+                                                <FormField
+                                                    control={form.control}
+                                                    name={`alertPolicies.${index}.notificationChannelId`}
+                                                    render={({field}) => {
+                                                        const selectedIds = form
+                                                            .watch("alertPolicies")
+                                                            .map((a: AlertPolicyType) => a.notificationChannelId)
+                                                            .filter(Boolean);

-                                                const availableNotificationChannels = notificationChannels.filter(
-                                                    (channel) =>
-                                                        channel.id.toString() === field.value?.toString() ||
-                                                        !selectedIds.includes(channel.id.toString())
-                                                );
+                                                        const availableNotificationChannels = notificationChannels.filter(
+                                                            (channel) =>
+                                                                channel.id.toString() === field.value?.toString() ||
+                                                                !selectedIds.includes(channel.id.toString())
+                                                        );

-                                                return (
-                                                    <FormItem>
-                                                        <Select onValueChange={field.onChange}
-                                                                value={field.value?.toString() || ""}
-                                                        >
+                                                        const selectedChannel = notificationChannels.find(c => c.id === field.value);

+                                                        return (
+                                                            <FormItem className="space-y-0">
+                                                                <Select onValueChange={field.onChange}
+                                                                        value={field.value?.toString() || ""}
+                                                                >
+                                                                    <FormControl>
+                                                                        <SelectTrigger className="h-9 w-full bg-background border-input">
+                                                                            <SelectValue placeholder="Select channel">
+                                                                                 {selectedChannel ? (
+                                                                                    <div className="flex items-center gap-2">
+                                                                                        <div className={cn("flex items-center justify-center h-4 w-4 rounded")}>
+                                                                                            {getNotificationChannelIcon(selectedChannel.provider)}
+                                                                                        </div>
+                                                                                        <span className="truncate font-medium text-sm">{selectedChannel.name}</span>
+                                                                                        <span className="text-[9px] bg-secondary px-1.5 py-0.5 rounded text-muted-foreground ml-auto font-mono uppercase tracking-tighter">{selectedChannel.provider}</span>
+                                                                                    </div>
+                                                                                ) : "Select channel"}
+                                                                            </SelectValue>
+                                                                        </SelectTrigger>
+                                                                    </FormControl>
+                                                                    <SelectContent>
+                                                                        {availableNotificationChannels.map((channel) => (
+                                                                            <SelectItem key={channel.id.toString()}
+                                                                                        value={channel.id.toString()}>
+                                                                                <div className="flex items-center gap-2 w-full">
+                                                                                    <div className="text-muted-foreground scale-90">
+                                                                                        {getNotificationChannelIcon(channel.provider)}
+                                                                                    </div>
+                                                                                    <span className="font-medium">{channel.name}</span>
+                                                                                    <span
+                                                                                        className="text-xs text-muted-foreground ml-2 capitalize">({channel.provider})</span>
+                                                                                </div>
+                                                                            </SelectItem>
+                                                                        ))}
+                                                                    </SelectContent>
+                                                                </Select>
+                                                                <FormMessage className="mt-1"/>
+                                                            </FormItem>
+                                                        );
+                                                    }}
+                                                />
+                                            </div>
+
+                                            <div className="flex flex-col gap-1.5">
+                                                 <Label className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest pl-0.5">
+                                                    Status
+                                                </Label>
+                                                 <FormField
+                                                    control={form.control}
+                                                    name={`alertPolicies.${index}.enabled`}
+                                                    render={({field}) => (
+                                                        <FormItem className="space-y-0">
                                                            <FormControl>
-                                                                <SelectTrigger className="h-10 w-full ">
-                                                                    <SelectValue
-                                                                        placeholder="Select notification channel"/>
-                                                                </SelectTrigger>
+                                                                <div className="flex items-center h-9 px-3 rounded-md border border-input bg-background min-w-[90px] justify-between">
+                                                                    <Label htmlFor={`switch-${index}`} className="text-xs cursor-pointer font-medium text-foreground mr-2">
+                                                                        {field.value ? "Active" : "Off"}
+                                                                    </Label>
+                                                                    <Switch
+                                                                        checked={field.value}
+                                                                        onCheckedChange={field.onChange}
+                                                                        id={`switch-${index}`}
+                                                                        className="scale-75 origin-right"
+                                                                    />
+                                                                </div>
                                                            </FormControl>
-                                                            <SelectContent>
-                                                                {availableNotificationChannels.map((channel) => (
-                                                                    <SelectItem key={channel.id.toString()}
-                                                                                value={channel.id.toString()}>
-                                                                        {channel.name}
-                                                                    </SelectItem>
-                                                                ))}
-                                                            </SelectContent>
-                                                        </Select>
-                                                        <FormMessage className="mb-2"/>
-                                                    </FormItem>
-                                                );
-                                            }}
-                                        />
-
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            </div>
+                                            
+                                            <div className="flex flex-col gap-1.5">
+                                         
+                                                <Button
+                                                    type="button"
+                                                    variant="outline"
+                                                    size="icon"
+                                                    className="h-9 w-9 text-muted-foreground hover:text-destructive hover:border-destructive/50 hover:bg-destructive/10 transition-colors border-input bg-background"
+                                                    onClick={() => removeAlertPolicy(index)}>
+                                                    <Trash2 className="w-4 h-4"/>
+                                                </Button>
+                                            </div>
+                                        </div>

                                        <FormField
                                            control={form.control}
                                            name={`alertPolicies.${index}.eventKinds`}
                                            render={({field}) => (
-                                                <FormItem>
+                                                <FormItem className="space-y-1.5">
+                                                    <FormLabel className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Trigger Events</FormLabel>
                                                    <FormControl>
                                                        <MultiSelect
                                                            options={EVENT_KIND_OPTIONS}
                                                            onValueChange={field.onChange}
                                                            defaultValue={field.value ?? []}
-                                                            placeholder="Select event kinds"
+                                                            placeholder="Select events to trigger notifications..."
                                                            variant="inverted"
                                                            animation={0}
+                                                            className="bg-background/50"
                                                        />
                                                    </FormControl>
+                                                    <FormMessage/>
                                                </FormItem>
                                            )}
                                        />
-
-
                                    </div>
-
-                                    <div className="flex flex-col gap-3 justify-between items-center ">
-                                        <Button type="button" variant="outline"
-                                                onClick={() => removeAlertPolicy(index)}>
-                                            <Trash2 className="w-4 h-4"/>
-                                        </Button>
-                                        <div className="flex h-full justify-center items-center">
-                                            <Tooltip>
-                                                <TooltipTrigger asChild>
-                                                    <div tabIndex={0} className="inline-flex rounded-md">
-
-
-                                                        <FormField
-                                                            control={form.control}
-                                                            name={`alertPolicies.${index}.enabled`}
-                                                            render={({field}) => (
-                                                                <FormItem>
-                                                                    <FormControl>
-                                                                        <Switch
-                                                                            checked={field.value}
-                                                                            onCheckedChange={field.onChange}
-                                                                        />
-                                                                    </FormControl>
-                                                                </FormItem>
-                                                            )}
-                                                        />
-
-
-                                                    </div>
-                                                </TooltipTrigger>
-                                                <TooltipContent className="max-w-64 text-pretty">
-                                                    <div className="flex items-center gap-1.5">
-                                                        <InfoIcon className="size-4"/>
-                                                        <p>This is for activating the alert policy</p>
-                                                    </div>
-                                                </TooltipContent>
-                                            </Tooltip>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                {index + 1 < fields.length && <Separator className="mt-3"/>}
-                            </div>
-                        ))
+                                </Card>
+                            ))}
+                        </div>
                    )}
                </div>
            </div>

-            <div className="flex gap-4 justify-end">
+            <div className="flex gap-3 justify-end pt-2 border-t mt-2">
                <ButtonWithLoading variant="outline" type="button" onClick={onCancel}>
                    Cancel
                </ButtonWithLoading>
-                <ButtonWithLoading isPending={false}>
-                    Save
+                <ButtonWithLoading isPending={mutation.isPending}>
+                    Save Changes
                </ButtonWithLoading>
            </div>
        </Form>
    );
-};
+};
@@ -42,6 +42,7 @@ export const uploadBackupAction = userAction

            const arrayBuffer = await file.arrayBuffer();

+            const fileSize = file.size;
            const uuid = uuidv4();
            const fileName = `imported_${uuid}${fileExtension}`;
            const buffer = Buffer.from(arrayBuffer);
@@ -85,6 +86,7 @@ export const uploadBackupAction = userAction
                    status: 'success',
                    databaseId: database.id,
                    file: fileName,
+                    fileSize: fileSize,
                })
                .returning();

@@ -38,7 +38,6 @@ export function CreateOrganizationModal({

    const mutation = useMutation({
        mutationFn: async (values: OrganizationSchema) => {
-            console.log(values);

            const result = await createOrganizationAction(values);

@@ -73,7 +72,6 @@ export function CreateOrganizationModal({
                        form={form}
                        className="flex flex-col gap-4"
                        onSubmit={async (values) => {
-                            console.log(values);
                            await mutation.mutateAsync(values);
                        }}
                    >
@@ -28,6 +28,7 @@ import {
 import {toast} from "sonner";
 import {User as BetterAuthUser} from "better-auth";
 import {User} from "@/db/schema/02_user";
+import {authClient} from "@/lib/auth/auth-client";

 export type organizationFormProps = {
    defaultValues?: OrganizationWithMembers;
@@ -36,6 +37,8 @@ export type organizationFormProps = {
 };

 export const OrganizationForm = (props: organizationFormProps) => {
+    const {data: activeOrganization, refetch: refetchActiveOrga} = authClient.useActiveOrganization();
+    const {data: organizations, refetch} = authClient.useListOrganizations();

    const router = useRouter();
    const isCreate = !Boolean(props.defaultValues);
@@ -75,6 +78,8 @@ export const OrganizationForm = (props: organizationFormProps) => {
        onSuccess: async (result) => {
            if (result?.data?.success) {
                toast.success(result.data.actionSuccess?.message || "Organization updated successfully.");
+                refetch()
+                refetchActiveOrga()
                router.push("/dashboard/settings");
            } else {
                // @ts-ignore
@@ -1,12 +1,12 @@
 "use client";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { UploadIcon } from "lucide-react";
-import { toast } from "sonner";
-import { uploadImageAction } from "@/features/upload/public/upload.action";
-import { useMutation } from "@tanstack/react-query";
-import { updateImageUserAction } from "@/components/wrappers/dashboard/profile2/avatar/avatar.action";
-import { useRouter } from "next/navigation";
-import { User } from "@/db/schema/02_user";
+import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
+import {UploadIcon} from "lucide-react";
+import {toast} from "sonner";
+import {uploadImageAction} from "@/features/upload/public/upload.action";
+import {useMutation} from "@tanstack/react-query";
+import {updateImageUserAction} from "@/components/wrappers/dashboard/profile/actions/avatar.action";
+import {useRouter} from "next/navigation";
+import {User} from "@/db/schema/02_user";
 import React, {ChangeEvent} from "react";

 export type AvatarWithUploadProps = {
@@ -25,7 +25,6 @@ export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
            const data = uploadImage?.data?.data;

            if (uploadImage?.serverError || !data) {
-                console.log(uploadImage?.serverError);
                toast.error(uploadImage?.serverError);
                return;
            }
@@ -34,7 +33,6 @@ export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
            const dataUser = updateUser?.data?.data;

            if (updateUser?.serverError || !dataUser) {
-                console.log(updateUser?.serverError);
                toast.error(updateUser?.serverError);
                return;
            }
@@ -55,12 +53,11 @@ export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
    };


-
    return (
        <div className="relative ">

            <Avatar className="w-24 h-24 lg:w-32 lg:h-32 border-4 border-muted/20">
-                <AvatarImage src={user.image || undefined}/>
+                <AvatarImage className="object-cover" src={user.image || undefined}/>
                <AvatarFallback className="text-3xl">{user.name.charAt(0)}</AvatarFallback>
            </Avatar>

@@ -75,7 +72,7 @@ export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
                }}
                className="cursor-pointer absolute inset-0 flex justify-center items-center opacity-0 transition-opacity hover:opacity-100 hover:bg-gray-500 hover:bg-opacity-50 rounded-full w-24 h-24 lg:w-32 lg:h-32"
            >
-                <UploadIcon className="w-12 h-12 lg:w-16 lg:h-16 text-primary" />
+                <UploadIcon className="w-12 h-12 lg:w-16 lg:h-16 text-primary"/>
            </div>
        </div>
    );
@@ -58,7 +58,6 @@ export function ProfileAccount({user}: ProfileAccountProps) {
            router.refresh();
        },
        onError: (error: BetterAuthError) => {
-            console.log(error)
            if (error.code === "USER_ALREADY_EXISTS_USE_ANOTHER_EMAIL") {
                toast.error("User already exists, use another email address!");
                emailForm.reset({email: user.email});
@@ -12,13 +12,16 @@ import {useRouter} from "next/navigation";
 import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip";
 import {Alert, AlertDescription} from "@/components/ui/alert";
 import {SetPasswordProfileProviderModal} from "./modal/set-password-modal";
-import {SUPPORTED_PROVIDERS} from "../../../../../portabase.config";
+import {AuthProviderConfig} from "../../../../../portabase.config";
+import {Icon} from "@iconify/react";

 interface ProfileProviderProps {
    accounts: Account[];
+    providers: AuthProviderConfig[]
+
 }

-export function ProfileProviders({accounts}: ProfileProviderProps) {
+export function ProfileProviders({accounts, providers}: ProfileProviderProps) {
    const router = useRouter();
    const totalConnected = accounts.length;
    const [loadingProvider, setLoadingProvider] = useState<string | null>(null);
@@ -70,7 +73,7 @@ export function ProfileProviders({accounts}: ProfileProviderProps) {
            </div>

            <div className="grid gap-4">
-                {SUPPORTED_PROVIDERS.map((provider) => {
+                {providers.map((provider) => {
                    const linkedAccount = accounts.find((acc) => acc.providerId === provider.id);
                    const isConnected = !!linkedAccount;
                    // const canUnlink = totalConnected > 1 || (totalConnected === 1 && !provider.isManual);
@@ -83,7 +86,7 @@ export function ProfileProviders({accounts}: ProfileProviderProps) {
                             className="flex items-center justify-between p-4 border rounded-lg hover:bg-muted/30 transition-colors">
                            <div className="flex items-center gap-4">
                                <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center">
-                                    <provider.icon className="w-5 h-5"/>
+                                    <Icon icon={provider.icon} className="w-5 h-5"/>
                                </div>
                                <div className="space-y-0.5">
                                    <div className="font-medium flex items-center gap-2">
@@ -1,80 +0,0 @@
-"use client";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { UploadIcon } from "lucide-react";
-import { toast } from "sonner";
-import { uploadImageAction } from "@/features/upload/public/upload.action";
-import { useMutation } from "@tanstack/react-query";
-import { updateImageUserAction } from "@/components/wrappers/dashboard/profile2/avatar/avatar.action";
-import { useRouter } from "next/navigation";
-import { User } from "@/db/schema/02_user";
-import {ChangeEvent} from "react";
-
-export type AvatarWithUploadProps = {
-    user: User;
-};
-
-export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
-    const user = props.user;
-    const router = useRouter();
-
-    const submitImage = useMutation({
-        mutationFn: async (file: File) => {
-            const formData = new FormData();
-            formData.set("file", file);
-            const uploadImage = await uploadImageAction(formData);
-            const data = uploadImage?.data?.data;
-
-            if (uploadImage?.serverError || !data) {
-                console.log(uploadImage?.serverError);
-                toast.error(uploadImage?.serverError);
-                return;
-            }
-
-            const updateUser = await updateImageUserAction(data.url);
-            const dataUser = updateUser?.data?.data;
-
-            if (updateUser?.serverError || !dataUser) {
-                console.log(updateUser?.serverError);
-                toast.error(updateUser?.serverError);
-                return;
-            }
-
-            toast.success("Successfully uploaded user image!");
-            router.refresh();
-        },
-    });
-
-    const handleImageUpload = async (event: ChangeEvent<HTMLInputElement>) => {
-        const file = event.target.files?.[0];
-        if (!file) return;
-        if (!file.type.includes("image")) {
-            toast.error("File not an image");
-            return;
-        }
-        submitImage.mutate(file);
-    };
-
-
-
-    return (
-        <div className="relative ">
-            <Avatar className="size-14 mr-3 ">
-                <AvatarFallback>{user.name[0]}</AvatarFallback>
-                {user.image ? <AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`} /> : null}
-            </Avatar>
-            <div
-                onClick={() => {
-                    const fileInput = document.createElement("input");
-                    fileInput.type = "file";
-                    fileInput.accept = "image/*";
-                    // @ts-ignore
-                    fileInput.onchange = handleImageUpload;
-                    fileInput.click();
-                }}
-                className="cursor-pointer absolute inset-0 flex justify-center items-center opacity-0 transition-opacity hover:opacity-100 hover:bg-gray-500 hover:bg-opacity-50 rounded-full size-14"
-            >
-                <UploadIcon className="w-8 h-8 text-primary" />
-            </div>
-        </div>
-    );
-};
@@ -1,15 +0,0 @@
-"use server";
-import { db } from "@/db";
-import {userAction} from "@/lib/safe-actions/actions";
-import { eq } from "drizzle-orm";
-import { z } from "zod";
-import * as drizzleDb from "@/db";
-
-
-export const updateImageUserAction = userAction.schema(z.string()).action(async ({ parsedInput, ctx }) => {
-    const [updatedUser] = await db.update(drizzleDb.schemas.user).set({ image: parsedInput }).where(eq(drizzleDb.schemas.user.id, ctx.user.id)).returning();
-
-    return {
-        data: updatedUser,
-    };
-});
@@ -58,4 +58,4 @@ export const ButtonDeleteAccount = (props: ButtonDeleteAccountProps) => {


    );
-};
+};
@@ -33,4 +33,4 @@ export const deleteUserAction = userAction.schema(z.string()).action(async ({ pa
    return {
        data: deletedUser,
    };
-});
+});
@@ -1,22 +0,0 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { currentUser } from "@/lib/auth/current-user";
-import { notFound } from "next/navigation";
-
-export type UserAvatarProps = {};
-
-export const UserAvatar = async () => {
-    const user = await currentUser();
-
-    if (!user) {
-        return notFound();
-    }
-
-    return (
-        <div>
-            <Avatar className="size-6">
-                <AvatarFallback>{user.name[0]}</AvatarFallback>
-                {user.image ? <AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`} /> : null}
-            </Avatar>
-        </div>
-    );
-};
@@ -1,122 +0,0 @@
-"use client";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } 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 { useRouter } from "next/navigation";
-import { useMutation } from "@tanstack/react-query";
-import { TooltipProvider } from "@/components/ui/tooltip";
-import { UserSchema, UserType } from "@/components/wrappers/dashboard/profile2/user-form/user-form.schema";
-import { toast } from "sonner";
-import { updateUserAction } from "@/components/wrappers/dashboard/profile2/user-form/user-form.action";
-import {DataTable} from "@/components/wrappers/common/table/data-table";
-import {sessionsColumns} from "@/components/wrappers/dashboard/admin/users/sessions/table-columns";
-import {accountsColumns} from "@/components/wrappers/dashboard/admin/users/accounts/table-columns";
-import {Account, Session} from "better-auth";
-
-export type UserFormProps = {
-    defaultValues?: UserType;
-    userId?: string;
-    sessions: Session[];
-    accounts?: Account[];
-};
-
-export const UserForm = (props: UserFormProps) => {
-    const isCreate = !Boolean(props.defaultValues);
-
-    const form = useZodForm({
-        schema: UserSchema,
-        defaultValues: props.defaultValues,
-    });
-
-    const router = useRouter();
-
-    const mutation = useMutation({
-        mutationFn: async (values: UserType) => {
-            const updateUser = await updateUserAction({
-                id: props.userId ?? "-",
-                data: values,
-            });
-
-            const data = updateUser?.data?.data;
-            if (updateUser?.serverError || !data) {
-                toast.error(updateUser?.serverError);
-                return;
-            }
-
-            toast.success(`Profile updated successfully.`);
-            router.refresh();
-            router.push(`/dashboard/profile`);
-        },
-    });
-
-    return (
-        <div className="flex flex-col gap-y-4 h-full py-4">
-        <TooltipProvider>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Account</CardTitle>
-                    <CardDescription>Your informations</CardDescription>
-                </CardHeader>
-                <CardContent>
-                    <Form
-                        form={form}
-                        className="flex flex-col gap-4"
-                        onSubmit={async (values) => {
-                            await mutation.mutateAsync(values);
-                        }}
-                    >
-                        <FormField
-                            control={form.control}
-                            name="name"
-                            render={({ field }) => (
-                                <FormItem>
-                                    <FormLabel>Name</FormLabel>
-                                    <FormControl>
-                                        <Input placeholder={"Your Name"} {...field} />
-                                    </FormControl>
-                                    <FormMessage />
-                                </FormItem>
-                            )}
-                        />
-                        <FormField
-                            control={form.control}
-                            name="email"
-                            render={({ field }) => (
-                                <FormItem>
-                                    <FormLabel>Email</FormLabel>
-                                    <FormControl>
-                                        <Input placeholder={"exemple@portabase.com"} disabled {...field} value={field.value ?? ""} />
-                                    </FormControl>
-                                    <FormMessage />
-                                </FormItem>
-                            )}
-                        />
-                        <Button>{isCreate ? `` : `Save`}</Button>
-                    </Form>
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Active sessions</CardTitle>
-                    <CardDescription>Manage your active sessions</CardDescription>
-                </CardHeader>
-                <CardContent>
-                    <DataTable columns={sessionsColumns} data={props.sessions} enableSelect={false}/>
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Auth providers</CardTitle>
-                    <CardDescription>Manage your active auth providers</CardDescription>
-                </CardHeader>
-                <CardContent>
-                    <DataTable columns={accountsColumns} data={props.accounts ?? []} enableSelect={false}/>
-                </CardContent>
-            </Card>
-        </TooltipProvider>
-        </div>
-    );
-};
@@ -21,8 +21,6 @@ export const deleteProjectAction = userAction.schema(z.string()).action(async ({


        const databasesToRemove = databasesUpdated.map((db) => db.id);
-        console.log(databasesUpdated);
-        console.log(databasesToRemove);

        await db.delete(drizzleDb.schemas.retentionPolicy)
            .where(inArray(drizzleDb.schemas.retentionPolicy.databaseId, databasesToRemove)).execute();
@@ -125,7 +125,6 @@ export const DatabaseBackupList = (props: DatabaseBackupListProps) => {
                                    <DropdownMenuContent align="start">
                                        <DropdownMenuItem
                                            onClick={async () => {
-                                                console.log("Deleting rows:", rows)
                                                await mutationDeleteBackups.mutateAsync(rows)
                                            }}
                                            className="text-red-600 focus:text-red-700"
@@ -1,8 +1,10 @@
 "use client";

-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
 import Link from "next/link";
 import {ProjectWith} from "@/db/schema/06_project";
+import {ChevronRight, Folder} from "lucide-react";
+import {Badge} from "@/components/ui/badge";

 export type projectCardProps = {
    data: ProjectWith;
@@ -10,19 +12,39 @@ export type projectCardProps = {
 };

 export const ProjectCard = (props: projectCardProps) => {
-    const { data: project, organizationSlug } = props;
+    const { data: project } = props;
+    const dbCount = project.databases.length;

    return (
        <Link
            href={`/dashboard/projects/${project.id}`}
-            className="block transition-all duration-200 hover:scale-[1.01] hover:shadow-md rounded-xl"
+            className="group block transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl"
        >
-            <Card className="flex flex-row justify-between">
-                <div className="flex-1 text-left">
-                    <CardHeader className="text-2xl font-bold">
+            <Card className="relative h-full flex flex-col p-4 transition-all border-border/50 bg-card hover:bg-accent/50 hover:border-primary/50 group-hover:shadow-lg overflow-hidden gap-0">
+                <div className="flex items-start justify-between mb-2">
+                    <div className="flex items-center justify-center w-12 h-12 rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-all duration-300 shadow-inner">
+                        <Folder className="w-8 h-8" />
+                    </div>
+                    <Badge className="text-[10px] font-medium px-2 py-1 rounded-lg bg-secondary/50 text-foreground">{dbCount} {dbCount === 1 ? "Database" : "Databases"}
+                    </Badge>
+                    
+                </div>
+
+                <div className="flex flex-col gap-2 flex-1">
+                    <h3 className="text-lg font-black text-foreground group-hover:text-primary transition-colors line-clamp-1 tracking-tight">
                        {project.name}
-                    </CardHeader>
-                    <CardContent>{project.databases.length} databases</CardContent>
+                    </h3>
+                    <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">
+                        Manage your databases and backup policies for this project.
+                    </p>
+                </div>
+                
+                <div className="mt-4 flex items-center justify-between pt-3 border-t border-border/50">
+                    <span className="text-[10px] font-bold uppercase tracking-widest text-primary opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-[-10px] group-hover:translate-x-0">View Project</span>
+                    <div className="flex items-center gap-1 text-muted-foreground group-hover:text-primary transition-colors">
+                        <span className="text-[10px] font-bold uppercase tracking-widest group-hover:hidden">Details</span>
+                        <ChevronRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
+                    </div>
                </div>
            </Card>
        </Link>
@@ -2,11 +2,12 @@

 import Link from "next/link";
 import Image from "next/image";
-import {Card, CardContent, CardHeader} from "@/components/ui/card";
+import {useState} from "react";
+import {Card} from "@/components/ui/card";
 import {ConnectionCircle} from "@/components/wrappers/common/connection-circle";
 import {formatDateLastContact} from "@/utils/date-formatting";
 import {Database} from "@/db/schema/07_database";
-import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
+import {ChevronRight, Activity, Fingerprint, Copy, Check} from "lucide-react";

 export type projectDatabaseCardProps = {
    data: Database;
@@ -15,10 +16,10 @@ export type projectDatabaseCardProps = {
 };

 export const ProjectDatabaseCard = (props: projectDatabaseCardProps) => {
-    const {organizationSlug, data: database, extendedProps: extendedProps} = props;
+    const {data: database, extendedProps: extendedProps} = props;

    return (
-        <Link className="block transition-all duration-200 hover:scale-[1.01] hover:shadow-md rounded-xl"
+        <Link className="group block transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl"
              href={`/dashboard/projects/${extendedProps.id}/database/${database.id}`}>
            <DatabaseCard data={database}/>
        </Link>
@@ -31,22 +32,73 @@ export type databaseCardProps = {

 export const DatabaseCard = (props: databaseCardProps) => {
    const {data: database} = props;
+    const [isCopied, setIsCopied] = useState(false);
+
+    const handleCopy = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        navigator.clipboard.writeText(database.agentDatabaseId);
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2000);
+    };

    return (
-        <Card className="flex flex-row justify-between space-x-2 ">
-            <div className="flex items-center justify-start w-full space-x-5 ">
-                <Image src={`/images/${database.dbms}.png`} alt="Database type Icon" width={60} height={60}
-                       className="object-cover ml-4"/>
-                <div className="justify-between">
-                    <div className="font-medium">Name: {database.name}</div>
-                    <div className="text-sm text-muted-foreground">Generated Id: {database.agentDatabaseId}</div>
-                    <div className="text-xs text-muted-foreground">
-                        Last contact: {formatDateLastContact(database.lastContact)}
+        <Card className="relative h-full flex flex-col p-4 transition-all border-border/50 bg-card hover:bg-accent/50 hover:border-primary/50 group-hover:shadow-lg overflow-hidden gap-0">
+            <div className="flex items-start justify-between mb-2">
+                <div className="relative w-12 h-12 p-2 bg-background rounded-xl border border-border/50 shadow-sm flex items-center justify-center group-hover:border-primary/30 transition-all duration-300 group-hover:scale-105">
+                    <Image 
+                        src={`/images/${database.dbms}.png`} 
+                        alt={`${database.dbms} icon`}
+                        width={32} 
+                        height={32}
+                        className="object-contain w-full h-full"
+                    />
+                </div>
+                <div className="flex flex-col items-end gap-3">
+                    <div className="scale-100 origin-right">
+                        <ConnectionCircle date={database.lastContact}/>
                    </div>
                </div>
            </div>
-            <div className="flex items-center px-5 justify-center">
-                <ConnectionCircle date={database.lastContact}/>
+            
+            <div className="flex flex-col gap-2 flex-1">
+                <h3 className="text-lg font-black text-foreground group-hover:text-primary transition-colors truncate tracking-tight">
+                    {database.name}
+                </h3>
+                
+                <div className="flex flex-col gap-2">
+                    <div className="flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors">
+                        <div className="p-1 bg-muted/50 rounded-lg">
+                            <Fingerprint className="w-3.5 h-3.5" />
+                        </div>
+                        <span className="font-mono text-[10px] font-bold truncate">
+                            {database.agentDatabaseId}
+                        </span>
+                        <button
+                            onClick={handleCopy}
+                            className="ml-1 p-0.5 hover:bg-muted rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 z-10"
+                            title="Copy ID"
+                        >
+                            {isCopied ? <Check className="w-2.5 h-2.5 text-green-500" /> : <Copy className="w-2.5 h-2.5" />}
+                        </button>
+                    </div>
+                    <div className="flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors">
+                        <div className="p-1 bg-muted/50 rounded-lg">
+                            <Activity className="w-3.5 h-3.5" />
+                        </div>
+                        <span className="text-[10px] font-bold uppercase tracking-tight">
+                            {formatDateLastContact(database.lastContact)}
+                        </span>
+                    </div>
+                </div>
+            </div>
+            
+            <div className="mt-4 flex items-center justify-between pt-3 border-t border-border/50">
+                <span className="text-[10px] font-black uppercase tracking-widest text-primary opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-[-10px] group-hover:translate-x-0">Open</span>
+                <div className="flex items-center gap-1 text-muted-foreground group-hover:text-primary transition-colors">
+                    <span className="text-[10px] font-bold uppercase tracking-widest group-hover:hidden">Details</span>
+                    <ChevronRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
+                </div>
            </div>
        </Card>
    );
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Théo LAGACHE	baab364b56	chore(release): 1.1.10-rc.2	2026-01-07 15:00:21 +01:00
Théo LAGACHE	585ee041ec	ui fixes	2026-01-07 15:00:11 +01:00
Théo LAGACHE	da3d4350cc	chore(release): 1.1.10-rc.1	2026-01-07 13:33:42 +01:00
Théo LAGACHE	df9390847f	add: new notifiers and ui fixes	2026-01-07 13:33:23 +01:00
Théo LAGACHE	2a1acbfde8	chore(release): 1.1.9	2026-01-07 09:50:42 +01:00
Théo LAGACHEandGitHub	16ef8507b0	Merge pull request #6 from Portabase/readme Readme	2026-01-07 09:48:56 +01:00
Théo LAGACHE	df5d4e336c	update: release	2026-01-07 09:46:30 +01:00
Théo LAGACHE	ad2015329b	chore(release): 1.1.9-rc6	2026-01-06 16:35:47 +01:00
Théo LAGACHE	4cc4bed785	chore(release): 1.1.9-rc5	2026-01-06 16:35:44 +01:00
Théo LAGACHE	6c506e6907	chore(release): 1.1.9-rc5	2026-01-06 16:25:12 +01:00
Théo LAGACHE	977f9344c7	chore(release): 1.1.9-rc4	2026-01-06 16:23:09 +01:00
Théo LAGACHE	2adb2f3b68	chore(release): 1.1.9-rc3	2026-01-06 16:21:06 +01:00
Théo LAGACHE	40a6e9e69f	fix	2026-01-06 16:12:04 +01:00
Théo LAGACHE	e1d1a3fb9a	fix(ci): grant necessary permissions for docker publish workflow	2026-01-06 15:37:19 +01:00
Théo LAGACHE	75120c0a56	fix	2026-01-06 15:33:06 +01:00
Théo LAGACHE	33f1ef3bb3	ci: restore release candidate workflow and use reusable actions	2026-01-06 15:10:28 +01:00
Théo LAGACHE	b6e742333c	update: README.md	2026-01-06 13:26:52 +01:00
Théo LAGACHE	9f8c66fc20	update readme.md	2026-01-06 12:11:45 +01:00
charlesgauthereau	3b93257890	[Release] - 1.1.8	2026-01-05 19:41:53 +01:00
charlesgauthereau	1104e2a074	[FIX] (profile) - error in local upload (#4 )	2026-01-05 19:39:59 +01:00
Théo LAGACHE	3e950652e8	update readme.md	2026-01-05 15:04:28 +01:00
charlesgauthereau	98e40466a0	[FIX] (agent) - order by createdAt	2026-01-04 21:24:06 +01:00
charlesgauthereau	324d80a735	[FIX] (backup) - change in extension file	2026-01-04 19:40:08 +01:00
charlesgauthereau	6770be63b6	[FIX] - adding fileSize in upload-backup.action.ts	2026-01-03 01:06:13 +01:00
charlesgauthereau	89aa33ebd8	Updating version.	2026-01-02 15:40:20 +01:00
charlesgauthereau	619c32f09d	[FEATURE] - Adding fileSize in backup model in order to display it.	2026-01-02 15:32:36 +01:00
Charles GTEandGitHub	c471423775	Update README.md	2026-01-02 15:06:24 +01:00
charlesgauthereau	c589b9b8b8	Updating version. Ready for 1.1.7-rc.1	2026-01-02 14:24:37 +01:00
charlesgauthereau	bae9ba0973	Increase proxyClientMaxBodySize to 10g in order to accept large databases. (#2 )	2026-01-02 13:55:53 +01:00
charlesgauthereau	7bfc5c1d9b	Increase proxyClientMaxBodySize to 10g in order to accept large databases.	2026-01-02 13:51:57 +01:00
charlesgauthereau	8bd3b0d731	Updating README.md	2026-01-01 19:10:20 +01:00
charlesgauthereau	06cd4de141	Moving to Github folder CONTRIBUTING.md	2026-01-01 19:08:40 +01:00
charlesgauthereau	33eb2df023	Adding CITATION.cff	2026-01-01 19:07:23 +01:00
charlesgauthereau	540ecd4b60	Updating README.md	2026-01-01 18:54:06 +01:00
charlesgauthereau	237418f009	Updating README.md	2026-01-01 18:49:18 +01:00
charlesgauthereau	4447180e9e	Refactoring charts in statistics in organization.	2025-12-30 16:26:28 +01:00
charlesgauthereau	f111946592	Refactoring charts in statistics in organization.	2025-12-30 16:22:34 +01:00
charlesgauthereau	475e404fae	Bug fixes and refactoring user dropdown.	2025-12-30 14:02:49 +01:00
charlesgauthereau	07ce5215d4	Changing Github url in stars component.	2025-12-30 13:46:00 +01:00
charlesgauthereau	9f4895fd63	Refactoring user Page in admin panel.	2025-12-30 13:42:23 +01:00
charlesgauthereau	c18a9da0d3	Refactoring user Page in admin panel.	2025-12-30 13:38:01 +01:00
charlesgauthereau	8e3eb32631	Adding support light and dark in email layout, by changing the Portabase logo.	2025-12-30 11:07:45 +01:00
charlesgauthereau	f0598b3f59	Adding support for github provider.	2025-12-30 10:42:51 +01:00
charlesgauthereau	011120fdf9	Patching bug on portabase.config.ts about social providers.	2025-12-30 10:27:47 +01:00
charlesgauthereau	ff175e1edd	Updating security.yml	2025-12-29 15:59:58 +01:00
Soluce TechnologiesandGitHub	3f56008c39	Update README.md, Updating the Gif	2025-12-29 15:51:12 +01:00
charlesgauthereau	5df95bf7c1	Updating the README.md	2025-12-29 15:42:25 +01:00
charlesgauthereau	23d52d0447	Updating the README.md	2025-12-26 18:58:08 +01:00