Ready for release 1.1.4

# Conflicts:
#	app/(auth)/login/page.tsx

.dockerignore

@@ -1,4 +1,25 @@
+# Ignore Docker-related configs
+.dockerignore
 docker-compose.yml
-README.md
+docker-compose*.yml
+
+# Development/Editor config
 .idea
-.next
+.vscode
+
+# Node-related
+node_modules
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+pnpm-debug.log
+
+# Next.js build output
+.next
+out
+
+
+
+# Docs and markdowns
+README.md
+*.md

.env.example

@@ -5,9 +5,9 @@ NODE_ENV=production
 DATABASE_URL=postgresql://devuser:changeme@db:5432/devdb?schema=public
 
 # Projet
-NEXT_PUBLIC_PROJECT_NAME="Portabase"
-NEXT_PUBLIC_PROJECT_DESCRIPTION="Portabase is a powerful database manager"
-NEXT_PUBLIC_PROJECT_URL=http://app.portabase.io
+PROJECT_NAME="Portabase"
+PROJECT_DESCRIPTION="Portabase is a powerful database manager"
+PROJECT_URL=http://app.portabase.io
 PROJECT_SECRET=
 
 # SMTP (email)
@@ -20,6 +20,7 @@ SMTP_FROM=
 # Google
 AUTH_GOOGLE_ID=
 AUTH_GOOGLE_SECRET=
+AUTH_GOOGLE_METHOD=
 
 # S3
 S3_ENDPOINT=http://app.s3.portabase.io
@@ -30,4 +31,7 @@ S3_PORT=9000
 S3_USE_SSL=true
 
 # Storage Type (s3, local)
-STORAGE_TYPE=local
+STORAGE_TYPE=local
+
+# Retention
+RETENTION_CRON="* * * * *"

.github/workflows/release.yml

@@ -48,22 +48,3 @@ jobs:
           push: true
           tags: ${{ steps.set-tags.outputs.tags }}
           target: prod
-
-# Do not delete
-#      - name: Build and push Docker image
-#        id: push
-#        uses: docker/build-push-action@v6
-#        with:
-#          context: .
-#          file: ./docker/dockerfile/Dockerfile
-#          push: true
-#          tags: ${{ steps.meta.outputs.tags }}
-#          labels: ${{ steps.meta.outputs.labels }}
-#          target: prod
-
-#      - name: Generate artifact attestation
-#        uses: actions/attest-build-provenance@v2
-#        with:
-#          subject-name: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME}}
-#          subject-digest: ${{ steps.push.outputs.digest }}
-#          push-to-registry: true

.github/workflows/security.yml

@@ -0,0 +1,28 @@
+name: Security Checks
+on:
+  pull_request:
+  push:
+    branches: [ main ]
+
+jobs:
+  sca-deps: # Dependency & container scan
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: aquasecurity/trivy-action@0.20.0
+        with:
+          scan-type: 'fs'
+          format: 'table'
+          severity: 'CRITICAL,HIGH'
+          ignore-unfixed: true
+
+
+  secrets-gitleaks: # Secrets exposure
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0   # Fetch full history for gitleaks
+      - uses: gitleaks/gitleaks-action@v2
+        with:
+          config-path: .gitleaks.toml  # Optional, if you have a custom config

.gitignore

@@ -1,5 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
+.idea
 # dependencies
 /node_modules
 /.pnp

.gitleaks.toml

@@ -0,0 +1,10 @@
+title = "Custom gitleaks config"
+
+[allowlist]
+# Global allowlist patterns (won’t be flagged)
+regexes = [
+    "s3SecretAccessKey: env.S3_SECRET_KEY ?? null",
+]
+paths = [
+    "src/utils/init.ts"
+]

.pre-commit-config.yaml

@@ -0,0 +1,5 @@
+repos:
+  - repo: https://github.com/gitleaks/gitleaks
+    rev: v8.24.2
+    hooks:
+      - id: gitleaks

Makefile

@@ -1,2 +1,4 @@
-migrate:
-	docker compose run --rm app
+CLUSTER_SCRIPT=docker/entrypoints/app-dev-entrypoint.sh
+
+up:
+	@bash $(CLUSTER_SCRIPT)

README.md

@@ -1,66 +1,130 @@
 <br />
 <div align="center">
   <a href="https://portabase.io">
-    <img src="images/logo.png" alt="Logo" width="80" height="80">
+    <img src="/public/images/logo.png" alt="Logo" width="80" height="80">
   </a>
 
-  <h3 align="center">Portabase</h3>
-
-  <p align="center">
-    Easily backup and restore your database instances with Portabase
-    <br />
-    <a href="https://portabase.io"><strong>Explore the Docs »</strong></a>
-    <br />
-    <br />
-    <a href="https://portabase.io">View Demo</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>
+<h3 align="center">Portabase</h3>
+  <p>
+    Free, open-source, and self-hosted solution for automated backup and restoration of your database instances.
   </p>
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-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)
+
+[![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)
+
+  <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>
+    </strong>
+  </p>
+
+![portabase-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/e3929e58-fefd-44cc-ab26-6f8e1a860c43)
+
 </div>
 
 ## 📚 Table of Contents
 
-- [About The Project](#about-the-project)
-    - [Built With](#built-with)
-- [Getting Started](#getting-started)
-    - [Prerequisites](#prerequisites)
-    - [Installation](#installation)
-- [Usage](#usage)
-- [Roadmap](#roadmap)
-- [Contributing](#contributing)
-- [License](#license)
-- [Contact](#contact)
-- [Acknowledgments](#acknowledgments)
+- [About The Project](#-about-the-project)
+- [Getting Started](#-getting-started)
+- [Usage](#-usage)
+- [Roadmap](#-roadmap)
+- [Contributing](#-contributing)
+- [License](#-license)
+- [Contact](#-contact)
+- [Acknowledgments](#-acknowledgments)
 
 ---
 
-## About The Project
+## ✨ 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.
+**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] (v15 with App Router)
+- [![NextJS][NextJS]][NextJS-url] (v16 with App Router)
 - [![Drizzle][Drizzle]][Drizzle-url]
 - [![ShadcnUI][ShadcnUI]][ShadcnUI-url]
-- BetterAuth
-- React Email
+- [![BetterAuth][BetterAuth]][BetterAuth-url]
+- [![Docker][Docker]][Docker-url]
+
 
 ---
 
 ## 🚀 Getting Started
 
-### Prerequisites
+### Installation
 
 Ensure Docker is installed on your machine before getting started.
 
-### Installation
+### Option 1:  Docker Compose Setup
 
-To run Portabase locally:
+Create a `docker-compose.yml` file with the following configuration:
+
+```yaml
+name: portabase
+
+services:
+
+  portabase:
+    image: solucetechnologies/portabase:latest
+    env_file:
+      - .env
+    ports:
+      - '8887:80'
+    environment:
+      - TIME_ZONE="Europe/Paris"
+    volumes:
+      - portabase-private:/app/private
+    depends_on:
+      db:
+        condition: service_healthy
+    container_name: portabase-app
+
+  db:
+    image: postgres:17-alpine
+    ports:
+      - "5433:5432"
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    environment:
+      - POSTGRES_DB=<your_database>
+      - POSTGRES_USER=<database_user>
+      - POSTGRES_PASSWORD=<database_password>
+    healthcheck:
+      test: [ "CMD-SHELL", "pg_isready -U <database_user> -d <your_database>" ]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+volumes:
+  postgres-data:
+  portabase-private:
+```
+
+Then run:
+
+```bash
+docker compose up -d
+```
+
+If you use reverse proxy like
+Traefik : [Check this link](https://portabase.io/docs/portabase/advanced-topics/reverse-proxy)
+
+### Option 2:  Locally (Development)
 
 1. Clone the repository:
     ```bash
@@ -76,13 +140,23 @@ To run Portabase locally:
 
 ## 🛠️ Usage
 
-Portabase provides a dashboard to manage database instances and backups. It supports:
+Portabase provides a web dashboard to manage your database instances and backups.  
+It currently supports:
 
-- PostgreSQL (current)
-- MongoDB (coming soon)
-- MySQL (coming soon)
+- **PostgreSQL**
+- **MySQL**
 
-You can access the dashboard at `http://localhost:3000` after starting the project.
+### 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.
 
 ---
 
@@ -100,7 +174,8 @@ You can access the dashboard at `http://localhost:3000` after starting the proje
 - [ ] Extend multi-database support:
     - [x] PostgreSQL
     - [ ] MongoDB
-    - [ ] MySQL
+    - [x] MySQL
+    - [x] MariaDB
 
 Check out [open issues](https://github.com/Soluce-Technologies/portabase/issues) for more.
 
@@ -141,27 +216,28 @@ Give the project a ⭐ if you like it!
 # Environment
 NODE_ENV=production
 
-# Database
+  # Database
 DATABASE_URL=postgresql://devuser:changeme@db:5432/devdb?schema=public
 
-# Project Info
-NEXT_PUBLIC_PROJECT_NAME="Portabase"
-NEXT_PUBLIC_PROJECT_DESCRIPTION="Portabase is a powerful database manager"
-NEXT_PUBLIC_PROJECT_URL=http://app.portabase.io
+  # Project Info
+PROJECT_NAME="Portabase"
+PROJECT_DESCRIPTION="Portabase is a powerful database manager"
+PROJECT_URL=http://app.portabase.io
 PROJECT_SECRET=
 
-# SMTP (Email)
+  # SMTP (Email)
 SMTP_HOST=
 SMTP_PORT=587
 SMTP_USER=
 SMTP_PASSWORD=
 SMTP_FROM=
 
-# Google OAuth
+  # Google OAuth
 AUTH_GOOGLE_ID=
 AUTH_GOOGLE_SECRET=
+AUTH_GOOGLE_METHOD=
 
-# S3/MinIO Configuration
+  # S3/MinIO Configuration
 S3_ENDPOINT=http://app.s3.portabase.io
 S3_ACCESS_KEY=
 S3_SECRET_KEY=
@@ -169,10 +245,16 @@ S3_BUCKET_NAME=portabase
 S3_PORT=9000
 S3_USE_SSL=true
 
-# Storage Backend: 'local' or 's3'
+  # 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:
@@ -185,14 +267,6 @@ major.minor.patch-rc.release-tag
 # Example: 1.0.0-rc.1-dev
 ```
 
-### Zenstack Support
-
-To regenerate schema:
-
-```bash
-zenstack generate
-```
-
 ---
 
 ## 📄 License
@@ -213,11 +287,22 @@ Distributed under the Apache License. See `LICENSE.txt` for more details.
 
 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
 
 [NextJS]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white
+
+[BetterAuth]: https://img.shields.io/badge/Better%20Auth-FFF?logo=betterauth&logoColor=000&style=for-the-badge
+
 [Drizzle]: https://img.shields.io/badge/Drizzle-111?style=for-the-badge&logo=Drizzle&logoColor=c5f74f
+
 [ShadcnUI]: https://img.shields.io/badge/shadcn/ui-000000?style=for-the-badge&logo=shadcn/ui&logoColor=white
+
 [NextJS-url]: https://nextjs.org/
+
+[BetterAuth-url]: https://www.better-auth.com/
+
 [Drizzle-url]: https://orm.drizzle.team/
+
 [ShadcnUI-url]: https://ui.shadcn.com/
+[Docker-url]: https://www.docker.com/
+

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

@@ -0,0 +1,15 @@
+import {PageParams} from "@/types/next";
+import {Metadata} from "next";
+import {ForgotPasswordForm} from "@/components/wrappers/auth/forgot-password/forgot-password-form";
+
+export const metadata: Metadata = {
+    title: "Forgot Password",
+};
+
+export default async function RoutePage(props: PageParams<{}>) {
+    return (
+        <div className="mx-auto grid w-full gap-6">
+            <ForgotPasswordForm/>
+        </div>
+    )
+}

app/(auth)/layout.tsx

@@ -1,42 +1,20 @@
-"use client"
-import React, {useEffect, useState} from "react";
-import {LayoutAdmin} from "@/components/layout";
-import Image from "next/image";
-import {env} from "@/env.mjs";
-import {useTheme} from "next-themes";
+import React from "react";
+import {redirect} from "next/navigation";
+import {currentUser} from "@/lib/auth/current-user";
+import {AuthLogoSection} from "@/components/wrappers/auth/auth-logo-section";
 
+export default async function Layout({children}: { children: React.ReactNode }) {
 
-export default function Layout({children}: { children: React.ReactNode }) {
+    const user = await currentUser();
 
-    const { resolvedTheme } = useTheme();
-
-    const [mounted, setMounted] = useState(false);
-
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-
-    if (!mounted) return null;
-
-    const imageTheme = resolvedTheme === "dark" ? "/images/logo-white.png" : "/images/logo-black.png";
+    if (user && !user.banned && user.role !== "pending") {
+        redirect("/dashboard/home");
+    }
 
     return (
         <div className="flex min-h-full flex-1 flex-col justify-center py-12 sm:px-6 lg:px-8 ">
             <div className="mx-auto w-full max-w-md">
-                <div className="sm:mx-auto sm:w-full sm:max-w-md flex items-center justify-center space-x-2">
-                    <Image
-                        className="p-12 text-black dark:text-white"
-                        src={imageTheme}
-                        loading="eager"
-                        alt="Logo"
-                        width={1024}
-                        height={1024}
-                    />
-                    <span
-                        className="text-sm text-muted-foreground -ml-12 -mb-12">
-                        v{env.NEXT_PUBLIC_PROJECT_VERSION}
-                    </span>
-                </div>
+                <AuthLogoSection/>
                 <div>{children}</div>
             </div>
             <footer className="py-4 text-center text-xs justify-items-end text-muted-foreground">

app/(auth)/login/page.tsx

@@ -1,32 +1,17 @@
-"use client"
+import {env} from "@/env.mjs";
+import {LoginForm} from "@/components/wrappers/auth/login/login-form/login-form";
+import {Metadata} from "next";
 
-import {useEffect, useRef, useState} from "react";
-import {useSearchParams} from "next/navigation";
+export const metadata: Metadata = {
+    title: "Login",
+};
 
-import {LoginForm} from "@/components/wrappers/auth/login/loginForm/LoginForm";
-import {toast} from "sonner";
-
-export default function SignInPage(props: {
-    searchParams: Promise<{ callbackUrl: string | undefined }>
-}) {
-
-    const [urlParams, setUrlParams] = useState<URLSearchParams>();
-
-    useEffect(() => {
-        const urlParams = new URLSearchParams(window.location.search);
-        setUrlParams(urlParams);
-        const error = urlParams.get("error");
-        console.log(urlParams.get("redirect"));
-        if (error?.includes("pending")) {
-            toast.error("Your account is not active.");
-            urlParams.delete("error");
-            window.history.replaceState({}, document.title, window.location.pathname + "?" + urlParams.toString());
-        }
-    }, []);
+export default async function SignInPage() {
+    const authGoogleEnabled = env.AUTH_GOOGLE_METHOD;
 
     return (
         <div className="mx-auto grid w-full gap-6">
-            <LoginForm/>
+            <LoginForm authGoogleEnabled={authGoogleEnabled}/>
         </div>
     )
-}
+}

app/(auth)/register/page.tsx

@@ -1,5 +1,10 @@
 import {PageParams} from "@/types/next";
 import {RegisterForm} from "@/components/wrappers/auth/register/register-form/register-form";
+import {Metadata} from "next";
+
+export const metadata: Metadata = {
+    title: "Register",
+};
 
 export default async function RoutePage(props: PageParams<{}>) {
     return (

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

@@ -0,0 +1,15 @@
+import {PageParams} from "@/types/next";
+import {Metadata} from "next";
+import {ResetPasswordSection} from "@/components/wrappers/auth/reset-password/reset-password-section";
+
+export const metadata: Metadata = {
+    title: "Reset Password",
+};
+
+export default async function RoutePage(props: PageParams<{}>) {
+    return (
+        <div className="mx-auto grid w-full gap-6">
+            <ResetPasswordSection/>
+        </div>
+    )
+}

app/(customer)/dashboard/(admin)/admin/organizations/[organizationId]/page.tsx

@@ -0,0 +1,47 @@
+import {notFound} from "next/navigation";
+import {eq} from "drizzle-orm";
+import {db} from "@/db";
+import * as drizzleDb from "@/db";
+import {PageParams} from "@/types/next";
+import {Page} from "@/features/layout/page";
+import {OrganizationManagement} from "@/components/wrappers/dashboard/admin/organizations/organization/organization-management";
+import {buildOrganizationWithMembers} from "@/utils/common";
+import {isUUID} from "@/utils/text";
+import {user} from "@/db/schema/02_user";
+import {invitation} from "@/db/schema/05_invitation";
+import {member} from "@/db/schema/04_member";
+import {organization} from "@/db/schema/03_organization";
+import {user as drizzleUser} from "@/db/schema/02_user";
+
+
+export default async function RoutePage(props: PageParams<{ organizationId: string }>) {
+    const {organizationId} = await props.params;
+
+    if (!organizationId) {
+        return notFound();
+    }
+
+    if (!isUUID(organizationId)) {
+        return notFound();
+    }
+
+    const users = await db.select().from(drizzleUser);
+
+    const organizationData = await db
+        .select({organization, member, user, invitation})
+        .from(organization)
+        .leftJoin(member, eq(drizzleDb.schemas.organization.id, member.organizationId))
+        .leftJoin(invitation, eq(drizzleDb.schemas.invitation.id, invitation.organizationId))
+        .leftJoin(user, eq(drizzleDb.schemas.member.userId, user.id))
+        .where(eq(organization.id, organizationId));
+
+    const formattedData = buildOrganizationWithMembers(organizationData);
+
+    if (!formattedData) return notFound();
+
+    return (
+        <Page>
+            <OrganizationManagement organization={formattedData} users={users}/>
+        </Page>
+    );
+}

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

@@ -0,0 +1,35 @@
+import {PageParams} from "@/types/next";
+import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
+import {db} from "@/db";
+import {
+    AdminOrganizationAddModal
+} from "@/components/wrappers/dashboard/admin/organizations/organization/admin-organization-add-modal";
+import {AdminOrganizationList} from "@/components/wrappers/dashboard/admin/organizations/organization/admin-orgnization-list";
+import {isNull} from "drizzle-orm";
+
+export default async function RoutePage(props: PageParams<{}>) {
+
+    const organizations = await db.query.organization.findMany({
+        where: (fields) => isNull(fields.deletedAt),
+        with: {
+            members: true,
+        },
+    });
+
+
+    return (
+        <Page>
+            <PageHeader className="flex flex-col">
+                <div className="flex justify-between">
+                    <PageTitle className="mb-3">Active organizations</PageTitle>
+                    <PageActions>
+                        <AdminOrganizationAddModal/>
+                    </PageActions>
+                </div>
+            </PageHeader>
+            <PageContent className="flex flex-col gap-5">
+                <AdminOrganizationList organizations={organizations}/>
+            </PageContent>
+        </Page>
+    );
+}

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

@@ -1,28 +0,0 @@
-import { PageParams } from "@/types/next";
-import { Page, PageContent, PageHeader, PageTitle } from "@/features/layout/page";
-import { AdminTabs } from "@/components/wrappers/dashboard/admin/admin-tabs";
-import { db } from "@/db";
-import {isNull} from "drizzle-orm";
-
-
-export default async function RoutePage(props: PageParams<{}>) {
-
-    const users = await db.query.user.findMany({
-        where: (fields) => isNull(fields.deletedAt)
-    });
-
-    const settings = await db.query.setting.findFirst({
-        where: (fields, { eq }) => eq(fields.name, "system"),
-    });
-
-    return (
-        <Page>
-            <PageHeader>
-                <PageTitle>Administration Panel</PageTitle>
-            </PageHeader>
-            <PageContent>
-                <AdminTabs settings={settings!} users={users} />
-            </PageContent>
-        </Page>
-    );
-}

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

@@ -0,0 +1,30 @@
+import {PageParams} from "@/types/next";
+import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
+import {db} from "@/db";
+import {SettingsEmailSection} from "@/components/wrappers/dashboard/admin/settings/email/settings-email-section";
+import {notFound} from "next/navigation";
+
+export default async function RoutePage(props: PageParams<{}>) {
+
+    const settings = await db.query.setting.findFirst({
+        where: (fields, {eq}) => eq(fields.name, "system"),
+    });
+
+    if (!settings) {
+        notFound()
+    }
+
+
+    return (
+        <Page>
+            <PageHeader className="flex flex-col">
+                <div className="flex justify-between">
+                    <PageTitle className="mb-3">System email</PageTitle>
+                </div>
+            </PageHeader>
+            <PageContent className="flex flex-col gap-5">
+                <SettingsEmailSection settings={settings}/>
+            </PageContent>
+        </Page>
+    );
+}

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

@@ -0,0 +1,29 @@
+import {PageParams} from "@/types/next";
+import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
+import {SettingsStorageSection} from "@/components/wrappers/dashboard/admin/settings/storage/settings-storage-section";
+import {db} from "@/db";
+import {notFound} from "next/navigation";
+
+export default async function RoutePage(props: PageParams<{}>) {
+
+    const settings = await db.query.setting.findFirst({
+        where: (fields, {eq}) => eq(fields.name, "system"),
+    });
+
+    if (!settings) {
+        notFound()
+    }
+
+    return (
+        <Page>
+            <PageHeader className="flex flex-col">
+                <div className="flex justify-between">
+                    <PageTitle className="mb-3">System storage</PageTitle>
+                </div>
+            </PageHeader>
+            <PageContent className="flex flex-col gap-5">
+                <SettingsStorageSection settings={settings}/>
+            </PageContent>
+        </Page>
+    );
+}

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

@@ -0,0 +1,32 @@
+import {PageParams} from "@/types/next";
+import {Page, 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";
+
+export default async function RoutePage(props: PageParams<{}>) {
+
+    const users = await db.query.user.findMany({
+        where: (fields) => isNull(fields.deletedAt),
+        with: {
+            accounts: true
+        }
+    });
+
+    return (
+        <Page>
+            <PageHeader className="flex flex-col">
+                <div className="flex justify-between">
+                    <PageTitle className="mb-3">Active users</PageTitle>
+                </div>
+            </PageHeader>
+            <PageContent className="flex flex-col gap-5">
+                <DataTable
+                    enableSelect={false}
+                    columns={usersColumnsAdmin}
+                    data={users}/>
+            </PageContent>
+        </Page>
+    );
+}

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

@@ -1,6 +1,6 @@
 import { PageParams } from "@/types/next";
 import { Page, PageContent, PageHeader, PageTitle } from "@/features/layout/page";
-import { AgentForm } from "@/components/wrappers/dashboard/agent/AgentForm/AgentForm";
+import { AgentForm } from "@/components/wrappers/dashboard/agent/agent-form/agent-form";
 import { notFound } from "next/navigation";
 import { db } from "@/db";
 

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

@@ -1,18 +1,22 @@
 import Link from "next/link";
 import {GearIcon} from "@radix-ui/react-icons";
 import {PageParams} from "@/types/next";
-import {Page, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
+import {Page, PageActions, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
 import {formatDateLastContact} from "@/utils/date-formatting";
 import {buttonVariants} from "@/components/ui/button";
-import {Card, CardContent, CardHeader} from "@/components/ui/card";
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {CardsWithPagination} from "@/components/wrappers/common/cards-with-pagination";
-import {DatabaseCard} from "@/components/wrappers/dashboard/projects/ProjectCard/ProjectDatabaseCard";
-import {AgentCardKey} from "@/components/wrappers/dashboard/agent/AgentCardKey/AgentCardKey";
-import { db } from "@/db";
+import {DatabaseCard} from "@/components/wrappers/dashboard/projects/project-card/project-database-card";
+import {AgentCardKey} from "@/components/wrappers/dashboard/agent/agent-card-key/agent-card-key";
+import {db} from "@/db";
 import * as drizzleDb from "@/db";
-import {and, eq} from "drizzle-orm";
+import {eq} from "drizzle-orm";
 import {notFound} from "next/navigation";
-
+import {ButtonDeleteAgent} from "@/components/wrappers/dashboard/agent/button-delete-agent/button-delete-agent";
+import {capitalizeFirstLetter} from "@/utils/text";
+import {Server} from "lucide-react";
+import {generateEdgeKey} from "@/utils/edge_key";
+import {getServerUrl} from "@/utils/get-server-url";
 
 export default async function RoutePage(props: PageParams<{ agentId: string }>) {
 
@@ -25,93 +29,67 @@ export default async function RoutePage(props: PageParams<{ agentId: string }>)
         }
     })
 
-
     if (!agent) {
         notFound()
     }
-    //
-    // const databaseId = 'db-123';
-    //
 
-    console.log("agent",agent)
-
-
-
-
-
-    // const totalBackupsResult = await db
-    //     .select({ count: drizzleDb.schemas.backup.id })
-    //     .from(drizzleDb.schemas.backup)
-    //     .where(eq(drizzleDb.schemas.backup.databaseId, databaseId))
-    //     .execute();
-    //
-    // const totalBackups = totalBackupsResult.length;
-    //
-    // const successfulBackupsResult = await db
-    //     .select({ count: drizzleDb.schemas.backup.id })
-    //     .from(drizzleDb.schemas.backup)
-    //     .where(
-    //         and(
-    //             eq(drizzleDb.schemas.backup.databaseId, databaseId),
-    //             eq(drizzleDb.schemas.backup.status, "success")
-    //         )
-    //     )
-    //     .execute();
-    //
-    //
-    // const successfulBackups = successfulBackupsResult.length;
-    //
-    // const successRate =
-    //     totalBackups > 0 ? (successfulBackups / totalBackups) * 100 : null;
+    const edgeKey = await generateEdgeKey(getServerUrl(), agent.id);
 
     return (
         <Page>
             <div className="justify-between gap-2 sm:flex">
                 <PageTitle className="flex items-center">
-                    {agent.name}
+                    {capitalizeFirstLetter(agent.name)}
                     <Link className={buttonVariants({variant: "outline"})}
                           href={`/dashboard/agents/${agent.id}/edit`}>
                         <GearIcon className="w-7 h-7"/>
                     </Link>
                 </PageTitle>
-
+                <PageActions className="justify-between">
+                    <ButtonDeleteAgent agentId={agentId} text={"Delete Agent"}/>
+                </PageActions>
             </div>
-            <PageDescription className="mt-5 sm:mt-0">{agent.description}</PageDescription>
-            <PageContent className="flex flex-col w-full h-full">
-                <div className="flex flex-col sm:flex-row sm:justify-between gap-8 mb-6">
+
+            {agent.description && (
+                <PageDescription className="mt-5 sm:mt-0">{agent.description}</PageDescription>
+            )}
+            <PageContent className="flex flex-col w-full h-full justify-between gap-6">
+                <div className="flex flex-col sm:flex-row sm:justify-between gap-6 ">
                     <Card className="w-full sm:w-auto flex-1">
-                        <CardHeader className="font-bold text-xl">
-                            Databases
-                        </CardHeader>
-                        <CardContent>{agent.databases.length}</CardContent>
-                    </Card>
-                    <Card className="w-full sm:w-auto flex-1">
-                        <CardHeader className="font-bold text-xl">
-                            Success rate
+                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                            <CardTitle className="text-sm font-medium">Databases</CardTitle>
+                            <Server className="h-4 w-4 text-muted-foreground"/>
                         </CardHeader>
                         <CardContent>
-                            {/*{successRate ?? "Unavailable for now."}*/}
+                            <div className="text-2xl font-bold">{agent.databases.length}</div>
+                            <p className="text-xs text-muted-foreground">Databases linked to this agent</p>
                         </CardContent>
                     </Card>
+
                     <Card className="w-full sm:w-auto flex-1">
-                        <CardHeader className="font-bold text-xl">
-                            Last contact
+                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                            <CardTitle className="text-sm font-medium">Last contact</CardTitle>
+                            <Server className="h-4 w-4 text-muted-foreground"/>
                         </CardHeader>
                         <CardContent>
-                            {formatDateLastContact(agent.lastContact)}
+                            <div className="text-2xl font-bold">{formatDateLastContact(agent.lastContact)}</div>
+                            <p className="text-xs text-muted-foreground">Last contact with agent</p>
                         </CardContent>
                     </Card>
 
                 </div>
-                <Card className="w-full sm:w-auto flex-1 mb-4">
+                <Card className="w-full sm:w-auto flex-1 ">
                     <CardHeader className="font-bold text-xl">
                         Edge Key
                     </CardHeader>
                     <CardContent>
-                        <AgentCardKey agent={agent}/>
+                        <AgentCardKey
+                            edgeKey={edgeKey}
+                        />
                     </CardContent>
                 </Card>
-                <CardsWithPagination cardsPerPage={2} data={agent.databases} cardItem={DatabaseCard}/>
+                <CardsWithPagination cardsPerPage={4} numberOfColumns={2} data={agent.databases}
+                                     cardItem={DatabaseCard}/>
             </PageContent>
         </Page>
     )

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

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

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

@@ -1,15 +1,26 @@
-import { PageParams } from "@/types/next";
-import { AgentCard } from "@/components/wrappers/dashboard/agent/AgentCard/AgentCard";
-import { CardsWithPagination } from "@/components/wrappers/common/cards-with-pagination";
-import { Button } from "@/components/ui/button";
+import {PageParams} from "@/types/next";
+import {AgentCard} from "@/components/wrappers/dashboard/agent/agent-card/agent-card";
+import {CardsWithPagination} from "@/components/wrappers/common/cards-with-pagination";
+import {Button} from "@/components/ui/button";
 import Link from "next/link";
-import { Page, PageActions, PageContent, PageHeader, PageTitle } from "@/features/layout/page";
-import { notFound } from "next/navigation";
-import { db } from "@/db";
-export const dynamic = "force-dynamic";
+import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
+import {notFound} from "next/navigation";
+import {db} from "@/db";
+import * as drizzleDb from "@/db";
+import {eq, not} from "drizzle-orm";
+import {EmptyStatePlaceholder} from "@/components/wrappers/common/empty-state-placeholder";
+import {Metadata} from "next";
+
+export const metadata: Metadata = {
+    title: "Agents",
+};
 
 export default async function RoutePage(props: PageParams<{}>) {
-    const agents = await db.query.agent.findMany();
+
+    const agents = await db.query.agent.findMany({
+        where: not(eq(drizzleDb.schemas.agent.isArchived, true))
+    });
+
 
     if (!agents) {
         notFound();
@@ -29,14 +40,12 @@ export default async function RoutePage(props: PageParams<{}>) {
             </PageHeader>
             <PageContent>
                 {agents.length > 0 ? (
-                    <CardsWithPagination data={agents} cardItem={AgentCard} cardsPerPage={4} numberOfColumns={1} />
+                    <CardsWithPagination data={agents} cardItem={AgentCard} cardsPerPage={4} numberOfColumns={1}/>
                 ) : (
-                    <Link
-                        href={"/dashboard/agents/new"}
-                        className="  flex item-center justify-center border-2 border-dashed transition-colors border-primary p-8 lg:p-12 w-full rounded-md"
-                    >
-                        Create new Agent
-                    </Link>
+                    <EmptyStatePlaceholder
+                        url={"/dashboard/agents/new"}
+                        text={"Create new Agent"}
+                    />
                 )}
             </PageContent>
         </Page>

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

@@ -0,0 +1,46 @@
+import {PageParams} from "@/types/next";
+import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
+import {Metadata} from "next";
+import {
+    NotificationChannelsSection
+} from "@/components/wrappers/dashboard/admin/notifications/channels/notification-channels-section";
+import {db} from "@/db";
+import {notificationChannel, NotificationChannel, NotificationChannelWith} from "@/db/schema/09_notification-channel";
+import {NotifierAddEditModal} from "@/components/wrappers/dashboard/common/notifier/notifier-add-edit-modal";
+import {desc, isNull} from "drizzle-orm";
+
+export const metadata: Metadata = {
+    title: "Notification Channels",
+};
+
+export default async function RoutePage(props: PageParams<{}>) {
+
+    const notificationChannels = await db.query.notificationChannel.findMany({
+        with: {
+            organizations: true
+        },
+        orderBy: desc(notificationChannel.createdAt)
+    }) as NotificationChannelWith[]
+
+    const organizations = await db.query.organization.findMany({
+        where: (fields) => isNull(fields.deletedAt),
+        with: {
+            members: true,
+        },
+    });
+
+
+    return (
+        <Page>
+            <PageHeader>
+                <PageTitle>Notification channels</PageTitle>
+                <PageActions>
+                    <NotifierAddEditModal adminView={false}/>
+                </PageActions>
+            </PageHeader>
+            <PageContent>
+                <NotificationChannelsSection organizations={organizations} notificationChannels={notificationChannels}/>
+            </PageContent>
+        </Page>
+    );
+}

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

@@ -0,0 +1,30 @@
+import {PageParams} from "@/types/next";
+import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
+import {Metadata} from "next";
+import {NotificationLogsList} from "@/components/wrappers/dashboard/admin/notifications/logs/notification-logs-list";
+import {notFound} from "next/navigation";
+import {getNotificationHistory} from "@/db/services/notification-log";
+
+export const metadata: Metadata = {
+    title: "Activity logs",
+};
+
+export default async function RoutePage(props: PageParams<{}>) {
+
+    const notificationLogs = await getNotificationHistory()
+
+    if (!notificationLogs) {
+        notFound();
+    }
+
+    return (
+        <Page>
+            <PageHeader>
+                <PageTitle>Activity logs</PageTitle>
+            </PageHeader>
+            <PageContent>
+                <NotificationLogsList notificationLogs={notificationLogs} />
+            </PageContent>
+        </Page>
+    );
+}

app/(customer)/dashboard/(organization)/_databases/[databaseId]/restore/page.tsx

@@ -1,7 +1,7 @@
 import {PageParams} from "@/types/next";
 import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
 import {notFound} from "next/navigation";
-import {RestoreForm} from "@/components/wrappers/dashboard/database/RestoreForm";
+// import {RestoreForm} from "@/components/wrappers/dashboard/database/restore-form";
 import {currentUser} from "@/lib/auth/current-user";
 
 import {db} from "@/db";
@@ -34,7 +34,7 @@ export default async function RoutePage(
                 <PageTitle>Restore {dbToRestore.name}</PageTitle>
             </PageHeader>
             <PageContent>
-                <RestoreForm databaseToRestore={dbToRestore} databases={dbsOfSameType} backups={successfulBackups}/>
+                {/*<RestoreForm databaseToRestore={dbToRestore} databases={dbsOfSameType} backups={successfulBackups}/>*/}
             </PageContent>
         </Page>
     );

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

@@ -1,21 +0,0 @@
-import { PageParams } from "@/types/next";
-import {Page, PageHeader, PageTitle} from "@/features/layout/page";
-
-export default async function RoutePage(props: PageParams<{}>) {
-
-    return (
-        <Page>
-            <PageHeader>
-                <PageTitle>Dashboard</PageTitle>
-            </PageHeader>
-            <div className="flex flex-1 flex-col gap-4">
-                <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                    <div className="aspect-video rounded-xl bg-muted/50" />
-                    <div className="aspect-video rounded-xl bg-muted/50" />
-                    <div className="aspect-video rounded-xl bg-muted/50" />
-                </div>
-            </div>
-        </Page>
-
-    );
-}

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

@@ -1,7 +1,7 @@
 import { PageParams } from "@/types/next";
 import { Page, PageContent, PageHeader, PageTitle } from "@/features/layout/page";
 import { notFound } from "next/navigation";
-import { DatabaseForm } from "@/components/wrappers/dashboard/database/DatabaseForm/DatabaseForm";
+import { DatabaseForm } from "@/components/wrappers/dashboard/database/database-form/database-form";
 
 import { db } from "@/db";
 import * as drizzleDb from "@/db";
@@ -27,6 +27,7 @@ export default async function RoutePage(props: PageParams<{ databaseId: string }
             <PageContent>
                 <DatabaseForm
                     databaseId={databaseId}
+                    // @ts-ignore
                     defaultValues={{ ...dbItem, dbms: dbItem.dbms ?? "inactive", description: dbItem.description ?? undefined }}
                 />
             </PageContent>

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

@@ -1,25 +1,51 @@
 import {PageParams} from "@/types/next";
-import {notFound} from "next/navigation";
+import {notFound, redirect} from "next/navigation";
 import {Page, PageActions, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
 import {BackupButton} from "@/components/wrappers/dashboard/backup/backup-button/backup-button";
-import {DatabaseTabs} from "@/components/wrappers/dashboard/projects/Database/DatabaseTabs";
-import {DatabaseKpi} from "@/components/wrappers/dashboard/projects/Database/DatabaseKpi";
-import {EditButton} from "@/components/wrappers/dashboard/database/EditButton/EditButton";
-import {CronButton} from "@/components/wrappers/dashboard/database/CronButton/CronButton";
+import {DatabaseTabs} from "@/components/wrappers/dashboard/projects/database/database-tabs";
+import {DatabaseKpi} from "@/components/wrappers/dashboard/projects/database/database-kpi";
+import {EditButton} from "@/components/wrappers/dashboard/database/edit-button/edit-button";
+import {CronButton} from "@/components/wrappers/dashboard/database/cron-button/cron-button";
 
 import {db} from "@/db";
-import {eq, and} from "drizzle-orm";
+import {eq, and, inArray} from "drizzle-orm";
 import * as drizzleDb from "@/db";
+import {getOrganizationProjectDatabases} from "@/lib/services";
+import {getActiveMember, getOrganization} from "@/lib/auth/auth";
+import {RetentionPolicySheet} from "@/components/wrappers/dashboard/database/retention-policy/retention-policy-sheet";
+import {capitalizeFirstLetter} from "@/utils/text";
+import {AlertPolicyModal} from "@/components/wrappers/dashboard/database/alert-policy/alert-policy-modal";
+import {getOrganizationChannels} from "@/db/services/notification-channel";
 
-export default async function RoutePage(props: PageParams<{ databaseId: string }>) {
-    const {databaseId} = await props.params;
+export default async function RoutePage(props: PageParams<{
+    projectId: string;
+    databaseId: string
+}>) {
+    const {projectId, databaseId} = await props.params;
+
+    const organization = await getOrganization({});
+    const activeMember = await getActiveMember()
+
+    if (!organization || !activeMember) {
+        notFound();
+    }
+
+    const databasesProject = await getOrganizationProjectDatabases({
+        organizationSlug: organization.slug,
+        projectId: projectId
+    })
 
     const dbItem = await db.query.database.findFirst({
-        where: eq(drizzleDb.schemas.database.id, databaseId),
+        where: and(inArray(drizzleDb.schemas.backup.id, databasesProject.ids ?? []), eq(drizzleDb.schemas.database.id, databaseId), eq(drizzleDb.schemas.database.projectId, projectId)),
+        with: {
+            project: true,
+            retentionPolicy: true,
+            alertPolicies: true
+        }
     });
 
     if (!dbItem) {
-        notFound();
+        redirect("/dashboard/projects");
     }
 
     const backups = await db.query.backup.findMany({
@@ -38,37 +64,69 @@ export default async function RoutePage(props: PageParams<{ databaseId: string }
     const isAlreadyBackup = backups.some((b) => b.status === "waiting");
     const isAlreadyRestore = restorations.some((r) => r.status === "waiting");
 
-    const [totalBackups, successfulBackups] = await Promise.all([
-        db
-            .select({count: drizzleDb.schemas.backup.id})
-            .from(drizzleDb.schemas.backup)
-            .where(eq(drizzleDb.schemas.backup.databaseId, dbItem.id))
-            .then((rows) => rows.length),
-        db
-            .select({count: drizzleDb.schemas.backup.id})
-            .from(drizzleDb.schemas.backup)
-            .where(and(eq(drizzleDb.schemas.backup.databaseId, dbItem.id), eq(drizzleDb.schemas.backup.status, "success")))
-            .then((rows) => rows.length),
-    ]);
+    const totalBackups = await db.select({count: drizzleDb.schemas.backup.id})
+        .from(drizzleDb.schemas.backup)
+        .where(eq(drizzleDb.schemas.backup.databaseId, dbItem.id))
+        .then(rows => rows.length);
+
+    const availableBackups = backups.filter(b => !b.deletedAt).length;
+
+    const successfulBackups = await db.select({count: drizzleDb.schemas.backup.id})
+        .from(drizzleDb.schemas.backup)
+        .where(and(
+            eq(drizzleDb.schemas.backup.databaseId, dbItem.id),
+            eq(drizzleDb.schemas.backup.status, "success")
+        ))
+        .then(rows => rows.length);
+
+
+    const [settings] = await db.select().from(drizzleDb.schemas.setting).where(eq(drizzleDb.schemas.setting.name, "system")).limit(1);
+    if (!settings) {
+        notFound();
+    }
+
+    const organizationChannels = await getOrganizationChannels(organization.id);
+    const activeOrganizationChannels = organizationChannels.filter(channel => channel.enabled);
 
     const successRate = totalBackups > 0 ? (successfulBackups / totalBackups) * 100 : null;
 
+    const isMember = activeMember?.role === "member";
+
+
     return (
         <Page>
             <div className="justify-between gap-2 sm:flex">
-                <PageTitle className="flex items-center">
-                    {dbItem.name}
-                    <EditButton/>
-                    <CronButton database={dbItem}/>
+                <PageTitle className="flex flex-col md:flex-row items-center justify-between w-full">
+                    <div className=" w-full md:w-fit">
+                        {capitalizeFirstLetter(dbItem.name)}
+                    </div>
+                    {!isMember && (
+                        <div className="flex items-center gap-2 md:justify-between w-full">
+                            <div className="flex items-center gap-2">
+                                {/* Do not delete*/}
+                                {/*<EditButton/>*/}
+                                <RetentionPolicySheet database={dbItem}/>
+                                <CronButton database={dbItem}/>
+                                <AlertPolicyModal database={dbItem} notificationChannels={activeOrganizationChannels} organizationId={organization.id} />
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <BackupButton disable={isAlreadyBackup} databaseId={databaseId}/>
+                            </div>
+                        </div>
+                    )}
                 </PageTitle>
-                <PageActions className="justify-between">
-                    <BackupButton disable={isAlreadyBackup} databaseId={databaseId}/>
-                </PageActions>
             </div>
-            <PageDescription className="mt-5 sm:mt-0">{dbItem.description}</PageDescription>
+
+            {dbItem.description && (
+                <PageDescription className="mt-5 sm:mt-0">{dbItem.description}</PageDescription>
+            )}
             <PageContent className="flex flex-col w-full h-full">
-                <DatabaseKpi successRate={successRate} database={dbItem} totalBackups={totalBackups} />
-                <DatabaseTabs database={dbItem} isAlreadyRestore={isAlreadyRestore} backups={backups} restorations={restorations} />
+                <DatabaseKpi successRate={successRate} database={dbItem} availableBackups={availableBackups}
+                             totalBackups={totalBackups}/>
+                <DatabaseTabs activeMember={activeMember} settings={settings} database={dbItem}
+                              isAlreadyRestore={isAlreadyRestore}
+                              backups={backups}
+                              restorations={restorations}/>
             </PageContent>
         </Page>
     );

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

@@ -1,12 +1,12 @@
 import {notFound} from "next/navigation";
 import {PageParams} from "@/types/next";
 import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
-import {ProjectForm} from "@/components/wrappers/dashboard/projects/ProjectsForm/ProjectForm";
+import {ProjectForm} from "@/components/wrappers/dashboard/projects/project-form/project-form";
 import * as drizzleDb from "@/db";
 
 import {db} from "@/db";
 import {eq} from "drizzle-orm";
-import {DatabaseWith} from "@/db/schema/06_database";
+import {DatabaseWith} from "@/db/schema/07_database";
 
 export default async function RoutePage(props: PageParams<{ projectId: string }>) {
     const {projectId} = await props.params;
@@ -42,10 +42,9 @@ export default async function RoutePage(props: PageParams<{ projectId: string }>
             },
             orderBy: (db, {desc}) => [desc(db.createdAt)],
         })
-    );
-        // .filter((db): db is DatabaseWith => db.project !== null);
+    )
+        // .filter((db) => db.project !== null) as DatabaseWith[];
 
-    console.log("ici34",availableDatabases);
 
 
     return (
@@ -57,7 +56,7 @@ export default async function RoutePage(props: PageParams<{ projectId: string }>
                 <ProjectForm
                     organization={org}
                     databases={availableDatabases as DatabaseWith[]}
-                    defaultValues={{name: proj.name, slug: proj.slug, databases: proj.databases.map((db) => db.id)}}
+                    defaultValues={{...proj, databases: proj.databases.map((db) => db.id)}}
                     projectId={proj.id}
                 />
             </PageContent>

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

@@ -1,27 +1,30 @@
-import { PageParams } from "@/types/next";
-import { Page, PageActions, PageContent, PageDescription, PageTitle } from "@/features/layout/page";
-import { buttonVariants } from "@/components/ui/button";
-import { GearIcon } from "@radix-ui/react-icons";
+import {PageParams} from "@/types/next";
+import {Page, PageActions, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
+import {buttonVariants} from "@/components/ui/button";
+import {GearIcon} from "@radix-ui/react-icons";
 import Link from "next/link";
-import { ButtonDeleteProject } from "@/components/wrappers/dashboard/projects/ButtonDeleteProject/ButtonDeleteProject";
-import { CardsWithPagination } from "@/components/wrappers/common/cards-with-pagination";
-import { ProjectDatabaseCard } from "@/components/wrappers/dashboard/projects/ProjectCard/ProjectDatabaseCard";
-import { notFound } from "next/navigation";
+import {
+    ButtonDeleteProject
+} from "@/components/wrappers/dashboard/projects/button-delete-project/button-delete-project";
+import {CardsWithPagination} from "@/components/wrappers/common/cards-with-pagination";
+import {ProjectDatabaseCard} from "@/components/wrappers/dashboard/projects/project-card/project-database-card";
+import {notFound, redirect} from "next/navigation";
 
-import { db } from "@/db";
-import { eq } from "drizzle-orm";
-import {getOrganization} from "@/lib/auth/auth";
+import {db} from "@/db";
+import {eq} from "drizzle-orm";
+import {getActiveMember, getOrganization} from "@/lib/auth/auth";
 import * as drizzleDb from "@/db";
+import {capitalizeFirstLetter} from "@/utils/text";
 
 export default async function RoutePage(props: PageParams<{
-    // slug: string;
     projectId: string
 }>) {
     const {
-        // slug: organizationSlug,
-        projectId } = await props.params;
+        projectId
+    } = await props.params;
 
     const organization = await getOrganization({});
+    const activeMember = await getActiveMember()
 
     if (!organization) {
         notFound();
@@ -33,31 +36,41 @@ export default async function RoutePage(props: PageParams<{
     if (!org) notFound();
 
     const proj = await db.query.project.findFirst({
-        where: (proj, { and, eq, not }) => and(eq(proj.id, projectId), eq(proj.organizationId, org.id), not(eq(proj.isArchived, true))),
+        where: (proj, {
+            and,
+            eq,
+            not
+        }) => and(eq(proj.id, projectId), eq(proj.organizationId, org.id), not(eq(proj.isArchived, true))),
         with: {
             databases: true,
         },
     });
 
-    if (!proj) notFound();
+    if (!proj) {
+        redirect("/dashboard/projects");
+    }
 
+    const isMember = activeMember?.role === "member";
 
     return (
         <Page>
             <div className="justify-between gap-2 sm:flex">
                 <PageTitle className="flex items-center">
-                    {proj.name}
-                    <Link className={buttonVariants({ variant: "outline" })} href={`/dashboard/projects/${proj.id}/edit`}>
-                        <GearIcon className="w-7 h-7" />
-                    </Link>
+                    {capitalizeFirstLetter(proj.name)}
+                    {!isMember && (
+                        <Link className={buttonVariants({variant: "outline"})}
+                              href={`/dashboard/projects/${proj.id}/edit`}>
+                            <GearIcon className="w-7 h-7"/>
+                        </Link>
+                    )}
                 </PageTitle>
-                <PageActions className="justify-between">
-                    <ButtonDeleteProject projectId={projectId} text={"Delete Project"} />
-                </PageActions>
+                {!isMember && (
+                    <PageActions className="justify-between">
+                        <ButtonDeleteProject projectId={projectId} text={"Delete Project"}/>
+                    </PageActions>
+                )}
             </div>
-
             <PageDescription>The list of associated databases</PageDescription>
-
             <PageContent className="flex flex-col w-full h-full">
                 {proj.databases.length > 0 ? (
                     <CardsWithPagination

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

@@ -1,18 +1,19 @@
 import {PageParams} from "@/types/next";
 import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
-import {ProjectForm} from "@/components/wrappers/dashboard/projects/ProjectsForm/ProjectForm";
+import {ProjectForm} from "@/components/wrappers/dashboard/projects/project-form/project-form";
 import {notFound} from "next/navigation";
 import {db} from "@/db";
 import {eq} from "drizzle-orm";
 import {getOrganization} from "@/lib/auth/auth";
 import * as drizzleDb from "@/db";
-import {DatabaseWith} from "@/db/schema/06_database";
+import {DatabaseWith} from "@/db/schema/07_database";
 
-export default async function RoutePage(props: PageParams<{  }>) {
+
+export default async function RoutePage(props: PageParams<{}>) {
 
     const organization = await getOrganization({});
 
-    if (!organization ) {
+    if (!organization) {
         notFound();
     }
 
@@ -27,7 +28,7 @@ export default async function RoutePage(props: PageParams<{  }>) {
             },
             orderBy: (db, {desc}) => [desc(db.createdAt)],
         })
-    ).filter((db) => db.project !== null) as DatabaseWith[];
+    ).filter((db) => db.project == null) as DatabaseWith[];
 
     const org = await db.query.organization.findFirst({
         where: eq(drizzleDb.schemas.organization.slug, organization.slug),
@@ -35,6 +36,7 @@ export default async function RoutePage(props: PageParams<{  }>) {
 
     if (!org) notFound();
 
+
     return (
         <Page>
             <PageHeader>

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

@@ -4,14 +4,21 @@ import {PageParams} from "@/types/next";
 import {CardsWithPagination} from "@/components/wrappers/common/cards-with-pagination";
 import {Button} from "@/components/ui/button";
 import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
-import {ProjectCard} from "@/components/wrappers/dashboard/projects/ProjectCard/ProjectCard";
+import {ProjectCard} from "@/components/wrappers/dashboard/projects/project-card/project-card";
 import {db} from "@/db";
 import {notFound} from "next/navigation";
-import {getOrganization} from "@/lib/auth/auth";
+import {getActiveMember, getOrganization} from "@/lib/auth/auth";
+import {EmptyStatePlaceholder} from "@/components/wrappers/common/empty-state-placeholder";
+import {Metadata} from "next";
 
-export default async function RoutePage(props: PageParams<{ }>) {
+export const metadata: Metadata = {
+    title: "Projects",
+};
+
+export default async function RoutePage(props: PageParams<{}>) {
 
     const organization = await getOrganization({});
+    const activeMember = await getActiveMember()
 
     if (!organization) {
         notFound();
@@ -27,12 +34,14 @@ export default async function RoutePage(props: PageParams<{ }>) {
             databases: true,
         },
     });
+    const isMember = activeMember?.role === "member";
+
 
     return (
         <Page>
             <PageHeader>
                 <PageTitle>Projects</PageTitle>
-                {projects.length > 0 && (
+                {(projects.length > 0 && !isMember) && (
                     <PageActions>
                         <Link href={`/dashboard/projects/new`}>
                             <Button>+ Create Project</Button>
@@ -43,15 +52,17 @@ export default async function RoutePage(props: PageParams<{ }>) {
 
             <PageContent>
                 {projects.length > 0 ? (
-                    <CardsWithPagination organizationSlug={organization.slug} data={projects} cardItem={ProjectCard}
-                                         cardsPerPage={4} numberOfColumns={1}/>
+                    <CardsWithPagination
+                        organizationSlug={organization.slug}
+                        data={projects}
+                        cardItem={ProjectCard}
+                        cardsPerPage={4}
+                        numberOfColumns={1}
+                    />
+                ) : isMember ? (
+                    <EmptyStatePlaceholder text="No project available"/>
                 ) : (
-                    <Link
-                        href={`/dashboard/projects/new`}
-                        className="  flex item-center justify-center border-2 border-dashed transition-colors border-primary p-8 lg:p-12 w-full rounded-md"
-                    >
-                        Create new Project
-                    </Link>
+                    <EmptyStatePlaceholder url="/dashboard/projects/new" text="Create new Project"/>
                 )}
             </PageContent>
         </Page>

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

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

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

@@ -1,48 +1,54 @@
 import {PageParams} from "@/types/next";
-import {Page, PageActions, PageContent, PageDescription, PageHeader, PageTitle} from "@/features/layout/page";
+import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
 import {currentUser} from "@/lib/auth/current-user";
-import {getOrganization} from "@/lib/auth/auth";
+import {getActiveMember, getOrganization} from "@/lib/auth/auth";
 import {notFound} from "next/navigation";
 import {
     DeleteOrganizationButton
-} from "@/components/wrappers/dashboard/organization/DeleteOrganization/DeleteOrganizationButton";
-import {EditButtonSettings} from "@/components/wrappers/dashboard/settings/EditButtonSettings/EditButtonSettings";
-import {
-    SettingsOrganizationMembersTable
-} from "@/components/wrappers/dashboard/settings/settings-organization-members-table";
+} from "@/components/wrappers/dashboard/organization/delete-organization/delete-organization-button";
+import {EditButtonSettings} from "@/components/wrappers/dashboard/settings/edit-button-settings/edit-button-settings";
+import {Metadata} from "next";
+import {OrganizationTabs} from "@/components/wrappers/dashboard/organization/tabs/organization-tabs";
+import {getOrganizationChannels} from "@/db/services/notification-channel";
 
+export const metadata: Metadata = {
+    title: "Settings",
+};
 
 export default async function RoutePage(props: PageParams<{ slug: string }>) {
     const organization = await getOrganization({});
     const user = await currentUser();
+    const activeMember = await getActiveMember()
 
     if (!organization) {
         notFound();
     }
 
+    const notificationChannels = await getOrganizationChannels(organization.id)
 
-    console.log(organization);
+    const isMember = activeMember?.role === "member";
+    const isOwner = activeMember?.role === "owner";
 
     return (
         <Page>
             <PageHeader>
                 <PageTitle className="flex items-center">
                     Organization settings
-                    {organization.slug != "default" ?
+                    {!isMember && organization.slug !== "default" && (
                         <EditButtonSettings/>
-                        : null}
+                    )}
                 </PageTitle>
                 <PageActions>
-                    {organization.slug != "default" ?
+                    {isOwner && organization.slug !== "default" && (
                         <DeleteOrganizationButton organizationSlug={organization.slug}/>
-                        : null}
+                    )}
                 </PageActions>
             </PageHeader>
-            {/*<PageDescription>*/}
-            {/*    Manage your organization settings.*/}
-            {/*</PageDescription>*/}
             <PageContent>
-                <SettingsOrganizationMembersTable organization={organization} />
+                <OrganizationTabs
+                    organization={organization}
+                    notificationChannels={notificationChannels}
+                />
             </PageContent>
         </Page>
     )

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

@@ -1,15 +1,21 @@
-import { PageParams } from "@/types/next";
-import { Page, PageContent, PageHeader, PageTitle } from "@/features/layout/page";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { EvolutionLineChart } from "@/components/wrappers/dashboard/statistics/charts/evolution-line-chart";
-import { PercentageLineChart } from "@/components/wrappers/dashboard/statistics/charts/percentage-line-chart";
-import { notFound } from "next/navigation";
-import { db } from "@/db";
-import { asc, count, eq, inArray } from "drizzle-orm";
+import {PageParams} from "@/types/next";
+import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
+import {EvolutionLineChart} from "@/components/wrappers/dashboard/statistics/charts/evolution-line-chart";
+import {PercentageLineChart} from "@/components/wrappers/dashboard/statistics/charts/percentage-line-chart";
+import {notFound} from "next/navigation";
+import {db} from "@/db";
+import {and, asc, count, eq, inArray} from "drizzle-orm";
 import * as drizzleDb from "@/db";
 import {getOrganization} from "@/lib/auth/auth";
+import {Building2, DatabaseBackup, Folder, RefreshCcw} from "lucide-react";
+import {Metadata} from "next";
 
-export default async function RoutePage(props: PageParams<{ }>) {
+export const metadata: Metadata = {
+    title: "Statistics",
+};
+
+export default async function RoutePage(props: PageParams<{}>) {
     const organization = await getOrganization({});
 
     if (!organization) {
@@ -26,7 +32,13 @@ export default async function RoutePage(props: PageParams<{ }>) {
         where: eq(drizzleDb.schemas.project.organizationId, org.id),
     });
 
-    const projectsCount = projects.length;
+    const projectIds = projects.map(project => project.id);
+
+    const databasesOfAllProjects = await db.query.database.findMany({
+        where: inArray(drizzleDb.schemas.database.projectId, projectIds),
+    })
+    const databaseIds = databasesOfAllProjects.map((database) => database.id);
+
 
     const backupsEvolution = await db.query.backup.findMany({
         columns: {
@@ -34,6 +46,7 @@ export default async function RoutePage(props: PageParams<{ }>) {
             createdAt: true,
         },
         orderBy: [asc(drizzleDb.schemas.backup.id)],
+        where: inArray(drizzleDb.schemas.backup.databaseId, databaseIds),
     });
 
 
@@ -44,54 +57,97 @@ export default async function RoutePage(props: PageParams<{ }>) {
             _count: count(),
         })
         .from(drizzleDb.schemas.backup)
-        .where(inArray(drizzleDb.schemas.backup.status, ["success", "failed"]))
+        .where(and(inArray(drizzleDb.schemas.backup.status, ["success", "failed"]), inArray(drizzleDb.schemas.backup.databaseId, databaseIds)))
         .groupBy(drizzleDb.schemas.backup.createdAt, drizzleDb.schemas.backup.status)
         .orderBy(drizzleDb.schemas.backup.createdAt);
 
-    console.log(backupsRate);
 
+    const restorationsCountResult = await db
+        .select({
+            count: count(),
+        })
+        .from(drizzleDb.schemas.restoration)
+        .where(inArray(drizzleDb.schemas.restoration.databaseId, databaseIds));
+
+
+    const restorationsCount = restorationsCountResult[0]?.count ?? 0;
+    const projectsCount = projects.length;
+    const backupsEvolutionCount = backupsEvolution.length;
+
+    const sortedBackupsEvolution = backupsEvolution.sort(
+        (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>
             <PageHeader>
-                <PageTitle>Statistics</PageTitle>
+                <PageTitle>Statistics Overview</PageTitle>
             </PageHeader>
+
             <PageContent className="flex flex-col gap-y-4">
-                <div className="flex flex-col md:flex-row gap-4">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                     <Card className="w-full">
-                        <CardHeader>
-                            <CardTitle>Projects</CardTitle>
+                        <CardHeader className="flex flex-row items-center justify-between pb-2">
+                            <CardTitle className="text-sm font-medium">Projects</CardTitle>
+                            <Building2 className="h-4 w-4 text-muted-foreground"/>
                         </CardHeader>
-                        <CardContent>{projectsCount}</CardContent>
+                        <CardContent>
+                            <div className="text-2xl font-bold">{projectsCount}</div>
+                            <p className="text-xs text-muted-foreground">Active projects in this organization</p>
+                        </CardContent>
                     </Card>
+
                     <Card className="w-full">
-                        <CardHeader>
-                            <CardTitle>KPI 2</CardTitle>
+                        <CardHeader className="flex flex-row items-center justify-between pb-2">
+                            <CardTitle className="text-sm font-medium">Backups</CardTitle>
+                            <DatabaseBackup className="h-4 w-4 text-muted-foreground"/>
                         </CardHeader>
-                        <CardContent></CardContent>
+                        <CardContent>
+                            <div className="text-2xl font-bold">{backupsEvolutionCount}</div>
+                            <p className="text-xs text-muted-foreground">Total backups executed across all databases</p>
+                        </CardContent>
                     </Card>
+
                     <Card className="w-full">
-                        <CardHeader>
-                            <CardTitle>KPI 3</CardTitle>
+                        <CardHeader className="flex flex-row items-center justify-between pb-2">
+                            <CardTitle className="text-sm font-medium">Restorations</CardTitle>
+                            <RefreshCcw className="h-4 w-4 text-muted-foreground"/>
                         </CardHeader>
-                        <CardContent></CardContent>
+                        <CardContent>
+                            <div className="text-2xl font-bold">{restorationsCount}</div>
+                            <p className="text-xs text-muted-foreground">Total restoration operations performed</p>
+                        </CardContent>
                     </Card>
                 </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>
-                            <EvolutionLineChart data={backupsEvolution} />
+                            {sortedBackupsEvolution.length > 0 ? (
+                                <EvolutionLineChart data={sortedBackupsEvolution}/>
+                            ) : (
+                                <Placeholder text="No backup data available"/>
+                            )}
                         </CardContent>
                     </Card>
+
                     <Card className="w-full">
                         <CardHeader>
                             <CardTitle>Success rate of backups</CardTitle>
                         </CardHeader>
                         <CardContent>
-                            <PercentageLineChart data={backupsRate} />
+                            {backupsRate.length > 0 ? (
+                                <PercentageLineChart data={backupsRate}/>
+                            ) : (
+                                <Placeholder text="No backup rate data available"/>
+                            )}
                         </CardContent>
                     </Card>
                 </div>

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

@@ -0,0 +1,139 @@
+import {PageParams} from "@/types/next";
+import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
+import {Building2, Database, DatabaseBackup, Folder, RefreshCcw, Server, Workflow} from "lucide-react";
+import {currentUser} from "@/lib/auth/current-user";
+import {notFound} from "next/navigation";
+import {db} from "@/db";
+import {asc, inArray} from "drizzle-orm";
+import * as drizzleDb from "@/db";
+import {listOrganizations} from "@/lib/auth/auth";
+import {Metadata} from "next";
+
+export const metadata: Metadata = {
+    title: "Home",
+};
+
+export default async function RoutePage(props: PageParams<{}>) {
+
+    const user = await currentUser();
+    const organizations = await listOrganizations()
+
+    if (!user || !organizations) notFound();
+
+    const organizationIds = organizations.map(project => project.id);
+
+    const agents = await db.query.agent.findMany({});
+
+    const projects = await db.query.project.findMany({
+        where: inArray(drizzleDb.schemas.project.organizationId, organizationIds),
+    });
+
+    const projectIds = projects.map(project => project.id);
+
+
+    const databasesOfAllProjects = await db.query.database.findMany({
+        where: inArray(drizzleDb.schemas.database.projectId, projectIds),
+    })
+    const databaseIds = databasesOfAllProjects.map((database) => database.id);
+
+
+    const backupsEvolution = await db.query.backup.findMany({
+        columns: {
+            id: true,
+            createdAt: true,
+            deletedAt: true,
+        },
+        orderBy: [asc(drizzleDb.schemas.backup.id)],
+        where: inArray(drizzleDb.schemas.backup.databaseId, databaseIds),
+    });
+
+    const availableBackups = backupsEvolution.filter(backup => backup.deletedAt == null);
+
+
+    return (
+        <Page>
+            <PageHeader>
+                <PageTitle>Dashboard</PageTitle>
+            </PageHeader>
+            <PageContent className="flex flex-col gap-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <Card className="w-full">
+                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                            <CardTitle className="text-sm font-medium">Organizations</CardTitle>
+                            <Building2 className="h-4 w-4 text-muted-foreground"/>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="text-2xl font-bold">{organizations.length}</div>
+                            <p className="text-xs text-muted-foreground">Number of organizations</p>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="w-full">
+                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                            <CardTitle className="text-sm font-medium">Projects</CardTitle>
+                            <Folder className="h-4 w-4 text-muted-foreground"/>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="text-2xl font-bold">{projects.length}</div>
+                            <p className="text-xs text-muted-foreground">Number of projects</p>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="w-full">
+                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                            <CardTitle className="text-sm font-medium">Databases</CardTitle>
+                            <Database className="h-4 w-4 text-muted-foreground"/>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="text-2xl font-bold">{databasesOfAllProjects.length}</div>
+                            <p className="text-xs text-muted-foreground">Databases across all projects</p>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="w-full">
+                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                            <CardTitle className="text-sm font-medium">Agents</CardTitle>
+                            <Workflow className="h-4 w-4 text-muted-foreground"/>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="text-2xl font-bold">{agents.length}</div>
+                            <p className="text-xs text-muted-foreground">Registered agents</p>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="w-full">
+                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                            <CardTitle className="text-sm font-medium">Total Backups</CardTitle>
+                            <DatabaseBackup className="h-4 w-4 text-muted-foreground"/>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="text-2xl font-bold">{backupsEvolution.length}</div>
+                            <p className="text-xs text-muted-foreground">All backups recorded</p>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="w-full">
+                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                            <CardTitle className="text-sm font-medium">Available Backups</CardTitle>
+                            <RefreshCcw className="h-4 w-4 text-muted-foreground"/>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="text-2xl font-bold">{availableBackups.length}</div>
+                            <p className="text-xs text-muted-foreground">Currently active backups</p>
+                        </CardContent>
+                    </Card>
+                </div>
+                {/*Do not delete*/}
+                {/*<div className="flex flex-1 flex-col gap-4">*/}
+                {/*    <div className="grid auto-rows-min gap-4 md:grid-cols-3">*/}
+                {/*        <div className="aspect-video rounded-xl bg-muted/50"/>*/}
+                {/*        <div className="aspect-video rounded-xl bg-muted/50"/>*/}
+                {/*        <div className="aspect-video rounded-xl bg-muted/50"/>*/}
+                {/*    </div>*/}
+                {/*</div>*/}
+            </PageContent>
+        </Page>
+
+    );
+}

app/(customer)/dashboard/loading.tsx

@@ -1,4 +1,4 @@
-import { LoadingSpinner } from "@/components/wrappers/common/loading/LoadingSpinner";
+import { LoadingSpinner } from "@/components/wrappers/common/loading/loading-spinner";
 
 export default function Loading() {
     return (

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

@@ -1,28 +1,30 @@
 import {PageParams} from "@/types/next";
-import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
+import {Page, PageContent, PageTitle} from "@/features/layout/page";
 import {notFound} from "next/navigation";
-import {UserForm} from "@/components/wrappers/dashboard/profile/UserForm/UserForm";
+import {UserForm} from "@/components/wrappers/dashboard/profile/user-form/user-form";
 import {Badge} from "@/components/ui/badge";
-import {ButtonDeleteAccount} from "@/components/wrappers/dashboard/profile/ButtonDeleteAccount/ButtonDeleteAccount";
-import {AvatarWithUpload} from "@/components/wrappers/dashboard/profile/Avatar/AvatarWithUpload";
+import {AvatarWithUpload} from "@/components/wrappers/dashboard/profile/avatar/avatar-with-upload";
 import {currentUser} from "@/lib/auth/current-user";
 import {getAccounts, getSessions} from "@/lib/auth/auth";
-//import { getAccounts, getSessions } from "@/lib/auth/auth";
+import {Metadata} from "next";
+
+export const metadata: Metadata = {
+    title: "Profile",
+};
 
 export default async function RoutePage(props: PageParams<{}>) {
     const user = await currentUser();
-    console.log("my user",user);
     if (!user) {
         return notFound();
     }
 
-
     if (user.role !== "user" && user.role !== "admin" && user.role !== "superadmin") {
         return notFound();
     }
 
-    // const sessions = await getSessions();
-    // const accounts = await getAccounts();
+    const sessions = await getSessions();
+    const accounts = await getAccounts();
+
 
     return (
         <Page>
@@ -42,22 +44,18 @@ export default async function RoutePage(props: PageParams<{}>) {
                     {user.name}
                     <Badge className="ml-3 hidden lg:block">{user.role}</Badge>
                 </PageTitle>
-                <PageActions className="mt-2 hidden sm:block">
-                    <ButtonDeleteAccount text="Delete my account"/>
-                </PageActions>
             </div>
             <PageContent>
                 <UserForm
                     userId={user.id}
+                    sessions={sessions}
+                    accounts={accounts}
                     defaultValues={{
                         name: user.name,
                         email: user.email,
                         role: user.role ?? undefined,
                     }}
                 />
-                <div className="mt-4 sm:hidden">
-                    <ButtonDeleteAccount text="Delete my account"/>
-                </div>
             </PageContent>
         </Page>
     );

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

@@ -1,2 +1,56 @@
+import fs from "node:fs";
+import forge from "node-forge";
+import {EventPayload} from "@/features/notifications/types";
+import {dispatchNotification} from "@/features/notifications/dispatch";
+import {Database, DatabaseWith} from "@/db/schema/07_database";
+
+
+export async function decryptedDump(file: File, aesKeyHex: string, ivHex: string, fileExtension: string): Promise<File> {
+    const privateKeyPem = fs.readFileSync("private/keys/server_private.pem", "utf8");
+    const privateKey = forge.pki.privateKeyFromPem(privateKeyPem);
+
+    // Decrypt AES key with RSA-OAEP
+    const encryptedAesKey = forge.util.hexToBytes(aesKeyHex);
+    const aesKey = privateKey.decrypt(encryptedAesKey, "RSA-OAEP", {
+        md: forge.md.sha256.create(),
+        mgf1: {md: forge.md.sha256.create()},
+    });
+
+    // Read encrypted file content
+    const encryptedBuffer = Buffer.from(await file.arrayBuffer());
+    const iv = forge.util.hexToBytes(ivHex);
+
+    // AES decryption
+    const decipher = forge.cipher.createDecipher("AES-CBC", aesKey);
+    decipher.start({iv});
+    decipher.update(forge.util.createBuffer(encryptedBuffer.toString("binary")));
+    const success = decipher.finish();
+
+    if (!success) {
+        throw new Error("Decryption failed");
+    }
+
+    const decryptedBytes = decipher.output.getBytes();
+    const decryptedBuffer = Buffer.from(decryptedBytes, "binary");
+
+    // Return a File so you can use file.arrayBuffer() later
+    return new File(
+        [decryptedBuffer],
+        file.name.replace(/\.enc$/, fileExtension),
+        {type: "application/octet-stream"}
+    );
+}
+
+
+export function getFileExtension(dbType: string) {
+    switch (dbType) {
+        case "postgresql":
+            return ".dump";
+        case "mysql":
+            return ".sql";
+        default:
+            return ".dump";
+    }
+}
 
 

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

@@ -1,12 +1,16 @@
 import {NextResponse} from "next/server";
 import {isUuidv4} from "@/utils/verify-uuid";
-import {uploadLocalPrivate} from "@/features/upload/private/upload.action";
+import {uploadLocalPrivate, uploadS3Private} from "@/features/upload/private/upload.action";
 import {v4 as uuidv4} from "uuid";
 import {eventEmitter} from "../../../events/route";
-import {db} from "@/db";
-import {Backup} from "@/db/schema/06_database";
-import {and, eq} from "drizzle-orm";
 import * as drizzleDb from "@/db";
+import {db} from "@/db";
+import {Backup} from "@/db/schema/07_database";
+import {and, eq} from "drizzle-orm";
+import {env} from "@/env.mjs";
+import {withUpdatedAt} from "@/db/utils";
+import {decryptedDump, getFileExtension} from "./helpers";
+import {sendNotificationsBackupRestore} from "@/features/notifications/helpers";
 
 export async function POST(
     request: Request,
@@ -25,6 +29,8 @@ export async function POST(
 
         const agentId = (await params).agentId;
         const formData = await request.formData();
+        const aesKeyHex = formData.get("aes_key") as string;
+        const ivHex = formData.get("iv") as string;
         const generatedId = formData.get("generatedId") as string | null;
         const method = formData.get("method") as string | null;
 
@@ -48,6 +54,10 @@ export async function POST(
 
         const database = await db.query.database.findFirst({
             where: eq(drizzleDb.schemas.database.agentDatabaseId, generatedId),
+            with: {
+                project: true,
+                alertPolicies: true
+            }
         });
 
         if (!database) {
@@ -97,18 +107,36 @@ export async function POST(
         if (status === "success") {
             const file = formData.get("file") as File | null;
 
+            if (!aesKeyHex || !ivHex) {
+                return NextResponse.json({error: "Missing fields"}, {status: 400});
+            }
+
+
             if (!file) {
                 return NextResponse.json(
                     {error: "File is required for successful backup"},
                     {status: 400}
                 );
             }
-
+            const fileExtension = getFileExtension(database.dbms)
+            const decryptedFile = await decryptedDump(file, aesKeyHex, ivHex, fileExtension);
             const uuid = uuidv4();
-            const fileName = `${uuid}.dump`;
-            const buffer = Buffer.from(await file.arrayBuffer());
+            const fileName = `${uuid}${fileExtension}`;
+            const buffer = Buffer.from(await decryptedFile.arrayBuffer());
 
-            const {success, message, filePath} = await uploadLocalPrivate(fileName, buffer);
+            const [settings] = await db.select().from(drizzleDb.schemas.setting).where(eq(drizzleDb.schemas.setting.name, "system")).limit(1);
+            if (!settings) {
+                throw new Error("System settings not found.");
+            }
+
+            let success: boolean, message: string, filePath: string;
+
+            const result =
+                settings.storage === "local"
+                    ? await uploadLocalPrivate(fileName, buffer)
+                    : await uploadS3Private(`${database.project?.slug}/${fileName}`, buffer, env.S3_BUCKET_NAME!);
+
+            ({success, message, filePath} = result);
 
             if (!success) {
                 return NextResponse.json(
@@ -119,14 +147,16 @@ export async function POST(
 
             await db
                 .update(drizzleDb.schemas.backup)
-                .set({
+                .set(withUpdatedAt({
                     file: fileName,
                     status: 'success',
-                })
+                }))
                 .where(eq(drizzleDb.schemas.backup.id, backup.id));
 
             eventEmitter.emit('modification', {update: true});
 
+            await sendNotificationsBackupRestore(database, "success_backup");
+
             return NextResponse.json(
                 {
                     message: "Backup successfully uploaded",
@@ -137,11 +167,14 @@ export async function POST(
 
             await db
                 .update(drizzleDb.schemas.backup)
-                .set({status: 'failed'})
+                .set(withUpdatedAt({status: 'failed'}))
                 .where(eq(drizzleDb.schemas.backup.id, backup.id));
 
             eventEmitter.emit('modification', {update: true});
 
+            await sendNotificationsBackupRestore(database, "error_backup");
+
+
             return NextResponse.json(
                 {
                     message: "Backup successfully updated with status failed",
@@ -156,4 +189,5 @@ export async function POST(
             {status: 500}
         );
     }
-}
+}
+

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

@@ -4,7 +4,7 @@ import {eventEmitter} from "../../../events/route";
 import * as drizzleDb from "@/db";
 import {db} from "@/db";
 import {and, eq} from "drizzle-orm";
-
+import {sendNotificationsBackupRestore} from "@/features/notifications/helpers";
 
 export type BodyResultRestore = {
     generatedId: string
@@ -13,7 +13,6 @@ export type BodyResultRestore = {
 type RestorationStatus = 'waiting' | 'ongoing' | 'failed' | 'success';
 
 
-
 export async function POST(
     request: Request,
     {params}: { params: Promise<{ agentId: string }> }
@@ -26,8 +25,6 @@ export async function POST(
         const body: BodyResultRestore = await request.json();
 
         console.log(body)
-        console.log(agentId)
-
 
         if (!isUuidv4(body.generatedId)) {
             return NextResponse.json(
@@ -44,8 +41,10 @@ export async function POST(
         }
 
         const database = await db.query.database.findFirst({
-            where: eq(drizzleDb.schemas.database.agentDatabaseId, body.generatedId)
-
+            where: eq(drizzleDb.schemas.database.agentDatabaseId, body.generatedId),
+            with: {
+                alertPolicies: true
+            }
         })
 
         if (!database) {
@@ -60,11 +59,15 @@ export async function POST(
             return NextResponse.json({error: "Unable to fin the corresponding restoration"}, {status: 404})
         }
 
+
         await db
             .update(drizzleDb.schemas.restoration)
-            .set({ status: body.status as RestorationStatus })
+            .set({status: body.status as RestorationStatus})
             .where(eq(drizzleDb.schemas.restoration.id, restoration.id));
 
+
+        await sendNotificationsBackupRestore(database, body.status == "error" ? "error_restore" : "success_restore");
+
         const response = {
             message: true,
             details: "Restoration successfully updated"
@@ -72,10 +75,7 @@ export async function POST(
 
         eventEmitter.emit('modification', {update: true});
 
-
         return Response.json(response, {status: 200})
-
-
     } catch (error) {
         console.error('Error in POST handler:', error);
         return NextResponse.json(

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

@@ -1,13 +1,17 @@
 import {NextResponse} from "next/server";
 import {Body} from "./route";
 import {isUuidv4} from "@/utils/verify-uuid";
-import {getFileUrlPresignedLocal} from "@/features/upload/private/upload.action";
-import {Agent} from "@/db/schema/07_agent";
-import {Database} from "@/db/schema/06_database";
+import {getFileUrlPresignedLocal, getFileUrlPreSignedS3Action} from "@/features/upload/private/upload.action";
+import {Agent} from "@/db/schema/08_agent";
+import {Database} from "@/db/schema/07_database";
 import * as drizzleDb from "@/db";
 import {db as dbClient} from "@/db";
 import {and, eq} from "drizzle-orm";
 import {dbmsEnumSchema, EDbmsSchema} from "@/db/schema/types";
+import {ServerActionResult} from "@/types/action-type";
+import {SafeActionResult} from "next-safe-action";
+import {ZodString} from "zod";
+import {withUpdatedAt} from "@/db/utils";
 
 export async function handleDatabases(body: Body, agent: Agent, lastContact: Date) {
     const databasesResponse = [];
@@ -35,17 +39,15 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
 
         let backupAction: boolean = false
         let restoreAction: boolean = false
-        let UrlBackup: string = ""
+        let urlBackup: string = ""
 
         if (!existingDatabase) {
             if (!isUuidv4(db.generatedId)) {
                 return NextResponse.json(
-                    { error: "generatedId is not a valid uuid" },
-                    { status: 500 }
+                    {error: "generatedId is not a valid uuid"},
+                    {status: 500}
                 );
             }
-            console.log(db)
-            console.log(dbmsEnumSchema.parse(db.dbms))
             const [databaseCreated] = await dbClient
                 .insert(drizzleDb.schemas.database)
                 .values({
@@ -58,62 +60,109 @@ export async function handleDatabases(body: Body, agent: Agent, lastContact: Dat
                 .returning();
 
             if (databaseCreated) {
-                databasesResponse.push(formatDatabase(databaseCreated, backupAction,restoreAction, UrlBackup));
+                databasesResponse.push(formatDatabase(databaseCreated, backupAction, restoreAction, urlBackup));
             }
         } else {
 
-
-
             const [databaseUpdated] = await dbClient
                 .update(drizzleDb.schemas.database)
-                .set({ lastContact: lastContact })
+                .set({
+                    agentId: agent.id,
+                    lastContact: lastContact
+                })
                 .where(eq(drizzleDb.schemas.database.id, existingDatabase.id))
                 .returning();
 
 
-
             const backup = await dbClient.query.backup.findFirst({
-                where: and(eq(drizzleDb.schemas.backup.databaseId, databaseUpdated.id), eq(drizzleDb.schemas.backup.status,"waiting"))
+                where: and(eq(drizzleDb.schemas.backup.databaseId, databaseUpdated.id), eq(drizzleDb.schemas.backup.status, "waiting"))
             })
 
 
             const restoration = await dbClient.query.restoration.findFirst({
-                where: and(eq(drizzleDb.schemas.restoration.databaseId, databaseUpdated.id), eq(drizzleDb.schemas.restoration.status,"waiting"))
+                where: and(eq(drizzleDb.schemas.restoration.databaseId, databaseUpdated.id), eq(drizzleDb.schemas.restoration.status, "waiting"))
             })
 
 
-            if(backup){
+            if (backup) {
                 backupAction = true
 
                 await dbClient
                     .update(drizzleDb.schemas.backup)
-                    .set({ status: "ongoing" })
+                    .set(withUpdatedAt({status: "ongoing"}))
                     .where(eq(drizzleDb.schemas.backup.id, backup.id));
             }
 
-            if(restoration){
+            if (restoration) {
                 restoreAction = true
 
 
                 const backupToRestore = await dbClient.query.backup.findFirst({
                     where: eq(drizzleDb.schemas.backup.id, restoration.backupId),
+                    with: {
+                        database: {
+                            with: {
+                                project: true
+                            }
+                        }
+                    }
                 })
 
+                const [settings] = await dbClient.select().from(drizzleDb.schemas.setting).where(eq(drizzleDb.schemas.setting.name, "system")).limit(1);
+                if (!settings) {
+                    return NextResponse.json(
+                        {error: "Unable to find settings"},
+                        {status: 500}
+                    );
+                }
+
 
                 const fileName = backupToRestore?.file
-                UrlBackup = await getFileUrlPresignedLocal(fileName ?? "")
 
+                let data: SafeActionResult<string, ZodString, readonly [], {
+                    _errors?: string[] | undefined;
+                }, readonly [], ServerActionResult<string>, object> | undefined
+
+                try {
+
+                    if (settings.storage == "local") {
+                        data = await getFileUrlPresignedLocal({fileName: fileName!})
+                    } else if (settings.storage == "s3") {
+
+                        data = await getFileUrlPreSignedS3Action(`backups/${backupToRestore?.database.project?.slug}/${fileName}`);
+                    }
+
+                    if (data?.data?.success) {
+                        urlBackup = data.data.value ?? "";
+                    } else {
+                        await dbClient
+                            .update(drizzleDb.schemas.restoration)
+                            .set({status: "failed"})
+                            .where(eq(drizzleDb.schemas.restoration.id, restoration.id));
+
+                        // @ts-ignore
+                        const errorMessage = data?.data?.actionError?.message || "Failed to get presigned URL";
+                        console.error("Restoration failed: ", errorMessage);
+
+                        continue;
+                    }
+                } catch (err) {
+                    console.error("Restoration crashed unexpectedly:", err);
+                    await dbClient
+                        .update(drizzleDb.schemas.restoration)
+                        .set({status: "failed"})
+                        .where(eq(drizzleDb.schemas.restoration.id, restoration.id));
+
+                    continue;
+                }
                 await dbClient
                     .update(drizzleDb.schemas.restoration)
-                    .set({ status: "ongoing" })
+                    .set({status: "ongoing"})
                     .where(eq(drizzleDb.schemas.restoration.id, restoration.id));
-
             }
-
-
-            databasesResponse.push(formatDatabase(databaseUpdated, backupAction, restoreAction, UrlBackup));
+            databasesResponse.push(formatDatabase(databaseUpdated, backupAction, restoreAction, urlBackup));
         }
     }
-
     return databasesResponse;
-}
+}
+

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

@@ -18,9 +18,9 @@ export type Body = {
     databases: databaseAgent[]
 }
 
-
+// Function to test the get file url presigned local
 export async function GET(request: Request) {
-    const url = await getFileUrlPresignedLocal("d4a7fa35-2506-4d01-a612-a8ef2e2cc1c5.dump")
+    const url = await getFileUrlPresignedLocal({fileName:"d4a7fa35-2506-4d01-a612-a8ef2e2cc1c5.dump"})
     return Response.json({
         message: url
     })
@@ -34,29 +34,33 @@ export async function POST(
         const agentId = (await params).agentId
         const body: Body = await request.json();
         const lastContact = new Date();
+        let message: string
+
 
         if (!isUuidv4(agentId)) {
+            message = "agentId is not a valid uuid"
+            console.log(message)
             return NextResponse.json(
                 {error: "agentId is not a valid uuid"},
                 {status: 500}
             );
         }
 
-
-
         const agent = await db.query.agent.findFirst({
             where: eq(drizzleDb.schemas.agent.id, agentId),
         })
 
         if (!agent) {
-            return NextResponse.json({error: "Agent not found"}, {status: 404})
+            message = "Agent not found"
+            console.log(message)
+            return NextResponse.json({error: message}, {status: 404})
         }
         const databasesResponse = await handleDatabases(body, agent, lastContact)
 
 
         await db
             .update(drizzleDb.schemas.agent)
-            .set({ lastContact: lastContact })
+            .set({lastContact: lastContact})
             .where(eq(drizzleDb.schemas.agent.id, agentId));
 
         eventEmitter.emit('modification', {update: true});
@@ -69,6 +73,7 @@ export async function POST(
             databases: databasesResponse
         }
         console.log(response)
+
         return Response.json(response)
     } catch (error) {
         console.error('Error in POST handler:', error);

app/api/config/route.ts

@@ -0,0 +1,9 @@
+import {NextResponse} from "next/server";
+
+export async function GET() {
+    return NextResponse.json({
+        PROJECT_URL: process.env.PROJECT_URL,
+        PROJECT_NAME: process.env.PROJECT_NAME,
+        PROJECT_DESCRIPTION: process.env.PROJECT_DESCRIPTION,
+    });
+}

app/api/events/route.ts

@@ -1,9 +1,19 @@
-import { EventEmitter } from 'events';
+import {EventEmitter} from 'events';
+import {auth} from "@/lib/auth/auth";
+import {headers} from "next/headers";
+import {NextResponse} from "next/server";
 
 export const eventEmitter = new EventEmitter();
 
 export async function GET(request: Request) {
-    console.log('GET request received');
+
+    const session = await auth.api.getSession({
+        headers: await headers(),
+    });
+
+    if (!session) {
+        return NextResponse.json({error: "Unauthorized"}, {status: 403});
+    }
 
     return new Response(
         new ReadableStream({
@@ -37,13 +47,13 @@ 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 });
-}
+// export async function POST(request: Request) {
+//     console.log('POST request received');
+//     const data = await request.json();
+//     console.log('Data received:', data);
+//
+//     // Emit the event to all connected clients
+//     eventEmitter.emit('modification', data);
+//
+//     return new Response('Event sent', {status: 200});
+// }

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

@@ -12,16 +12,16 @@ export async function GET(
     const expires = searchParams.get('expires');
     const fileName = (await params).fileName
 
-    const privateLocalDir = "private/uploads/files/";
-    const filePath = path.join(privateLocalDir, fileName);
+    const uploadsDir = "private/uploads/files/";
+    const uploadPath = path.join(uploadsDir, fileName);
 
     const crypto = require('crypto');
 
-    if (!fs.existsSync(filePath)) {
-        return NextResponse.json(
-            {error: 'File not found'},
-            {status: 404}
-        );
+    let filePath = null;
+    if (fs.existsSync(uploadPath)) {
+        filePath = uploadPath;
+    } else {
+        return NextResponse.json({error: "File not found"}, {status: 404})
     }
 
     const expectedToken = crypto.createHash('sha256').update(`${fileName}${expires}`).digest('hex');
@@ -31,8 +31,8 @@ export async function GET(
             {status: 403}
         );
     }
-    //@ts-ignore
-    const expiresAt = parseInt(expires, 10);
+
+    const expiresAt = parseInt(expires!, 10);
     if (Date.now() > expiresAt) {
         return NextResponse.json(
             {error: 'Signed token expired'},

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

@@ -1,30 +1,103 @@
+import {NextResponse} from "next/server";
+import {auth} from "@/lib/auth/auth";
+import {headers} from "next/headers";
+import {checkFileExistsInBucket, getObjectFromClient} from "@/utils/s3-file-management";
+import {env} from "@/env.mjs";
+import * as stream from "node:stream";
 import path from "path";
+import {db} from "@/db";
+import * as drizzleDb from "@/db";
+import {eq} from "drizzle-orm";
 import fs from "fs/promises";
-import { NextResponse } from "next/server";
 
-export async function GET({ params }: { params: Promise<{ fileName: string }> }) {
+function nodeStreamToWebStream(nodeStream: stream.Readable) {
+    return new ReadableStream({
+        start(controller) {
+            nodeStream.on("data", chunk => controller.enqueue(chunk));
+            nodeStream.on("end", () => controller.close());
+            nodeStream.on("error", err => controller.error(err));
+        },
+        cancel() {
+            nodeStream.destroy();
+        },
+    });
+}
+
+const privateS3ImageDir = "images/";
+
+
+export async function GET(
+    req: Request,
+    {params}: { params: Promise<{ fileName: string }> }
+) {
+    const fileName = (await params).fileName;
+    if (!fileName) return NextResponse.json({error: "Missing file parameter"}, {status: 400});
+
+    const session = await auth.api.getSession({headers: await headers()});
+    if (!session) return NextResponse.json({error: "Unauthorized"}, {status: 403});
+
+    const [settings] = await db
+        .select()
+        .from(drizzleDb.schemas.setting)
+        .where(eq(drizzleDb.schemas.setting.name, "system"))
+        .limit(1);
+
+    if (!settings) throw new Error("System settings not found.");
+
+    const storageType = settings.storage; // "local" or "s3"
+    const ext = fileName.split(".").pop()?.toLowerCase();
+    const contentType =
+        ext === "png"
+            ? "image/png"
+            : ext === "jpg" || ext === "jpeg"
+                ? "image/jpeg"
+                : ext === "gif"
+                    ? "image/gif"
+                    : ext === "webp"
+                        ? "image/webp"
+                        : "application/octet-stream";
+
     try {
-        const fileName = (await params).fileName;
-        const filePath = path.join(process.cwd(), "private/uploads/images", fileName);
+        if (storageType === "local") {
+            const filePath = path.join(process.cwd(), "private/uploads/images", fileName);
 
-        // Check if the file exists
-        try {
-            await fs.access(filePath); // Ensures the file exists
-        } catch {
-            return NextResponse.json({ error: "File not found" }, { status: 404 });
+            try {
+                await fs.access(filePath);
+                const file = await fs.readFile(filePath);
+
+                return new NextResponse(file, {
+                    headers: {
+                        "Content-Type": contentType,
+                        "Cache-Control": "no-store",
+                        "Content-Disposition": `inline; filename="${fileName}"`,
+                    },
+                });
+            } catch {
+                // if not found locally, fallback to S3
+            }
         }
 
-        // Read the file
-        const fileContent = await fs.readFile(filePath); // Returns a Buffer
+        const exists = await checkFileExistsInBucket({
+            bucketName: env.S3_BUCKET_NAME!,
+            fileName: `${privateS3ImageDir}${fileName}`,
+        });
+        if (!exists) return NextResponse.json({error: "File not found"}, {status: 404});
 
-        return new NextResponse(fileContent, {
+        const nodeStream = await getObjectFromClient({
+            bucketName: env.S3_BUCKET_NAME!,
+            fileName: `${privateS3ImageDir}${fileName}`,
+        });
+        const webStream = nodeStreamToWebStream(nodeStream);
+
+        return new NextResponse(webStream, {
             headers: {
-                "Content-Disposition": `attachment; filename="${fileName}"`,
-                "Content-Type": "application/octet-stream", // Adjust MIME type as needed
+                "Content-Type": contentType,
+                "Cache-Control": "no-store",
+                "Content-Disposition": `inline; filename="${fileName}"`,
             },
         });
-    } catch (error) {
-        console.error("Error reading file:", error);
-        return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
+    } catch (err) {
+        console.error("Error streaming image:", err);
+        return NextResponse.json({error: "Error fetching file"}, {status: 500});
     }
-}
+}

app/api/init/route.ts

@@ -1,23 +0,0 @@
-import { NextResponse } from "next/server";
-
-export type BodyInit = {
-    initialize: boolean;
-};
-
-export async function POST(request: Request) {
-    try {
-        const body: BodyInit = await request.json();
-
-        console.log(body);
-
-        return NextResponse.json(
-            {
-                message: "Initialization successfully done!",
-            },
-            { status: 200 }
-        );
-    } catch (error) {
-        console.error("Error in POST initialization:", error);
-        return NextResponse.json({ error: "Internal server error" }, { status: 500 });
-    }
-}

app/layout.tsx

@@ -1,16 +1,19 @@
 import React from "react";
 import type {Metadata} from "next";
-import {Inter} from "next/font/google";
-
 import "./globals.css";
 import {Providers} from "./providers";
 import {cn} from "@/lib/utils";
+import {ConsoleSilencer} from "@/components/wrappers/common/console-silencer";
+import {inter} from "@/fonts/fonts";
 
-const inter = Inter({subsets: ["latin"]});
+const title = process.env.PROJECT_NAME ?? "App Title";
 
 export const metadata: Metadata = {
-    title: process.env.NEXT_PUBLIC_PROJECT_NAME ?? "App Title",
-    description: process.env.NEXT_PUBLIC_PROJECT_DESCRIPTION ?? undefined,
+    title: {
+        default: title,
+        template: `%s - ${title}`
+    },
+    description: process.env.PROJECT_DESCRIPTION ?? undefined,
 };
 
 export default function RootLayout({
@@ -24,6 +27,7 @@ export default function RootLayout({
             <meta name="apple-mobile-web-app-title" content="Portabase"/>
         </head>
         <body className={cn(inter.className, "h-full")}>
+        <ConsoleSilencer/>
         <Providers>{children}</Providers>
         </body>
         </html>

app/not-found.tsx

@@ -1,10 +1,15 @@
-import { redirect } from "next/navigation";
+import BackButton from "@/components/wrappers/common/button/back-button";
 
 export default async function NotFound() {
-    // redirect("/dashboard/profile");
     return(
-        <>
-            Error
-        </>
+        <div className="flex items-center min-h-screen px-4 py-12 sm:px-6 md:px-8 lg:px-12 xl:px-16">
+            <div className="w-full space-y-6 text-center">
+                <div className="space-y-3">
+                    <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">Not found</h1>
+                    <p className="leading-7 [&:not(:first-child)]:mt-6">The content you are trying to view is not available.</p>
+                </div>
+                <BackButton>Go home</BackButton>
+            </div>
+        </div>
     )
 }

components.json

@@ -10,11 +10,15 @@
     "cssVariables": true,
     "prefix": ""
   },
+  "iconLibrary": "radix",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
     "ui": "@/components/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"
+  },
+  "registries": {
+    "@reui": "https://reui.io/r/{name}.json"
   }
-}
+}

docker-compose.prod.yml

@@ -3,23 +3,22 @@ name: portabase-prod
 services:
 
   app:
-    build:
-      context: .
-      dockerfile: docker/dockerfile/Dockerfile
-      target: prod
-
+#    build:
+#      context: .
+#      dockerfile: docker/dockerfile/Dockerfile
+#      target: prod
+    image: solucetechnologies/portabase:1.1.4-rc.2
     ports:
       - '8887:80'
+    environment:
+      TZ: "Europe/Paris"
     env_file:
       - .env
-
     depends_on:
       db:
         condition: service_healthy
-
     container_name: portabase-app-prod
 
-
   db:
     image: postgres:16-alpine
     ports:
@@ -36,20 +35,5 @@ services:
       timeout: 5s
       retries: 5
 
-
-  s3:
-    image: docker.io/bitnami/minio:latest
-    ports:
-      - '9000:9000'
-      - '9001:9001'
-    volumes:
-      - minio_data:/data
-    environment:
-      - MINIO_ROOT_USER=${S3_ACCESS_KEY}
-      - MINIO_ROOT_PASSWORD=${S3_SECRET_KEY}
-      - MINIO_DEFAULT_BUCKETS=${S3_BUCKET_NAME}
-
-
 volumes:
   postgres-data:
-  minio_data:

docker-compose.yml

@@ -1,77 +1,21 @@
 name: portabase-dev
 
 services:
-    app:
-        build:
-            context: .
-            dockerfile: docker/dockerfile/Dockerfile
-            target: dev
-        ports:
-            - "8887:80"
-        environment:
-            - TIME_ZONE="Europe/Paris"
-            - NODE_ENV=development
-        depends_on:
-            db:
-                condition: service_healthy
-        volumes:
-            - .:/app
-            - /app/node_modules
-        container_name: portabase-app
-
-        develop:
-            watch:
-                - action: sync
-                  path: .
-                  target: /app
-                - action: rebuild
-                  path: package.json
-
-    db:
-        image: postgres:16-alpine
-        ports:
-            - "5433:5432"
-        volumes:
-            - postgres-data:/var/lib/postgresql/data
-        environment:
-            - POSTGRES_DB=devdb
-            - POSTGRES_USER=devuser
-            - POSTGRES_PASSWORD=changeme
-        healthcheck:
-            test: ["CMD-SHELL", "pg_isready -U devuser -d devdb"]
-            interval: 10s
-            timeout: 5s
-            retries: 5
-
-    db-pgadmin:
-        image: dpage/pgadmin4
-        environment:
-            PGADMIN_DEFAULT_EMAIL: "devuser@devuser.devuser"
-            PGADMIN_DEFAULT_PASSWORD: "changeme"
-            PGADMIN_CONFIG_SERVER_MODE: "False"
-            POSTGRES_USER: "devuser"
-            POSTGRES_PASSWORD: "changeme"
-        volumes:
-            - pgadmin-data:/var/lib/pgadmin
-        ports:
-            - "8080:80"
-        restart: unless-stopped
-        depends_on:
-            - db
-
-    s3:
-        image: docker.io/bitnami/minio:latest
-        ports:
-            - "9000:9000"
-            - "9001:9001"
-        volumes:
-            - minio_data:/data
-        environment:
-            - MINIO_ROOT_USER=${S3_ACCESS_KEY}
-            - MINIO_ROOT_PASSWORD=${S3_SECRET_KEY}
-            - MINIO_DEFAULT_BUCKETS=${S3_BUCKET_NAME}
+  db:
+    image: postgres:16-alpine
+    ports:
+      - "5433:5432"
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    environment:
+      - POSTGRES_DB=devdb
+      - POSTGRES_USER=devuser
+      - POSTGRES_PASSWORD=changeme
+    healthcheck:
+      test: [ "CMD-SHELL", "pg_isready -U devuser -d devdb" ]
+      interval: 10s
+      timeout: 5s
+      retries: 5
 
 volumes:
-    postgres-data:
-    minio_data:
-    pgadmin-data:
+  postgres-data:

docker/dockerfile/Dockerfile

@@ -1,8 +1,9 @@
-FROM node:23-alpine AS base
+FROM node:22-alpine AS base
 
 ENV YARN_VERSION=4.9.1
 
 RUN apk add --update --no-cache \
+    tzdata \
     build-base \
     libc6-compat \
     openssl \
@@ -94,9 +95,6 @@ COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 COPY --chown=nextjs:nodejs src/db ./src/db
 
-
-
-
 USER root
 
 COPY ./docker/entrypoints/app-prod-entrypoint.sh /app/app-prod-entrypoint.sh
@@ -112,3 +110,4 @@ USER nextjs
 
 ENTRYPOINT ["sh","/app/app-prod-entrypoint.sh"]
 
+

docker/entrypoints/app-dev-entrypoint.sh

@@ -1,11 +1,12 @@
 #!/bin/bash
 
-npm install -g npm@11.0.0
-npm -v
+set -euo pipefail
 
+echo "▶ Running Drizzle codegen..."
 npx drizzle-kit generate
+
+echo "▶ Applying migrations..."
 npx drizzle-kit migrate
 
-npm run dev
-
-exec "$@"
+echo "▶ Starting Next.js dev server..."
+exec npm run dev

docker/entrypoints/app-prod-entrypoint.sh

@@ -1,15 +1,14 @@
 #!/bin/bash
 
-echo "     ____             __        __                        "
-echo "    / __ \____  _____/ /_____ _/ /_  ____ _________       "
-echo "   / /_/ / __ \/ ___/ __/ __  / __ \/ __  / ___/ _ \      "
-echo "  / ____/ /_/ / /  / /_/ /_/ / /_/ / /_/ (__  )  __/      "
-echo " /_/    \____/_/   \__/\__,_/_.___/\__,_/____/\___/       "
-echo "                                                          "
-echo " Community Edition v1.0.0                                 "
-echo "                                                          "
+if [ -n "$TZ" ]; then
+    echo "[INFO] Application timezone set to $TZ (environment only)"
+    export TZ="$TZ"
+else
+    echo "[WARN] No TZ provided, using default container timezone"
+fi
 
 
 node server.js
 
-exec "$@"
+exec "$@"
+

emails/Button.tsx

@@ -1,6 +0,0 @@
-import { Button as ReactEmailButton } from "@react-email/components";
-import { ComponentPropsWithoutRef } from "react";
-
-export const Button = (props: ComponentPropsWithoutRef<typeof ReactEmailButton>) => {
-    return <ReactEmailButton className="block w-52 rounded bg-blue-600 py-3.5 text-center text-sm font-normal text-white no-underline " {...props} />;
-};

emails/HelloEmail.tsx

@@ -1,13 +0,0 @@
-import { Button } from "@react-email/button";
-import { Html } from "@react-email/html";
-import * as React from "react";
-
-export default function HelloEmail() {
-    return (
-        <Html>
-            <Button href="https://example.com" style={{ background: "#000", color: "#fff" }}>
-                Hello,
-            </Button>
-        </Html>
-    );
-}

emails/TestEmailSettings.tsx

@@ -1,16 +0,0 @@
-import { Text } from "@react-email/components";
-import * as React from "react";
-import EmailLayout from "./EmailLayout";
-import { Button } from "@react-email/button";
-
-export const TestEmailSettings = () => {
-    return (
-        <EmailLayout preview="Email Setup">
-            <Text className="text-base font-light leading-8 text-green-800 ">Hi, your email settings are setup !</Text>
-            <Text className="text-base font-light leading-8 text-green-800 ">Best regard,</Text>{" "}
-            <Text className="text-base font-light leading-8 text-green-800 ">Portabase</Text>
-        </EmailLayout>
-    );
-};
-
-export default TestEmailSettings;

emails/Text.tsx

@@ -1,6 +0,0 @@
-import { Text as ReactEmailText } from "@react-email/components";
-import { ComponentPropsWithoutRef } from "react";
-
-export const Text = (props: ComponentPropsWithoutRef<typeof ReactEmailText>) => {
-    return <ReactEmailText className="text-base font-light leading-8 text-green-800 " {...props} />;
-};

eslint.config.mjs

@@ -0,0 +1,14 @@
+import {defineConfig, globalIgnores} from 'eslint/config'
+import nextVitals from 'eslint-config-next/core-web-vitals'
+
+const eslintConfig = defineConfig([
+    ...nextVitals,
+    globalIgnores([
+        '.next/**',
+        'out/**',
+        'build/**',
+        'next-env.d.ts',
+    ]),
+])
+
+export default eslintConfig

instrumentation.ts

@@ -1,6 +1,6 @@
 export async function register() {
     if (process.env.NEXT_RUNTIME === "nodejs") {
         const init = await import("@/utils/init");
-        init.init();
+        await init.init();
     }
 }

next-auth.d.ts

@@ -1,20 +0,0 @@
-// next-auth.d.ts
-import NextAuth from "next-auth";
-
-declare module "next-auth" {
-    interface Session {
-        user: {
-            id: string;
-            email: string;
-            name: string;
-            authMethod: string; // Add authMethod to the session user type
-        };
-    }
-
-    interface User {
-        id: string;
-        email: string;
-        name: string;
-        authMethod: string; // Add authMethod to the user type
-    }
-}

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -41,15 +41,6 @@ const nextConfig: NextConfig = {
     typescript: {
         ignoreBuildErrors: true,
     },
-    eslint: {
-        ignoreDuringBuilds: true,
-    },
-    compiler: {
-        removeConsole: process.env.NODE_ENV === "production",
-    },
-    experimental: {
-        nodeMiddleware: true,
-    },
     async headers() {
         return [
             {

package.json

@@ -1,114 +1,121 @@
 {
-    "name": "portabase",
-    "version": "1.1.0",
-    "private": true,
-    "scripts": {
-        "dev": "next dev --turbopack -p 80",
-        "build": "next build --experimental-build-mode compile",
-        "start": "next start",
-        "lint": "next lint",
-        "email": "email dev",
-        "db:generate": "drizzle-kit generate",
-        "db:migrate": "drizzle-kit migrate",
-        "db:drop": "drizzle-kit drop",
-        "auth:generate": "npx @better-auth/cli generate --config ./src/lib/auth/auth.ts"
-    },
-    "dependencies": {
-        "@hookform/resolvers": "^5.0.1",
-        "@radix-ui/react-accordion": "^1.2.10",
-        "@radix-ui/react-alert-dialog": "^1.1.13",
-        "@radix-ui/react-aspect-ratio": "^1.1.6",
-        "@radix-ui/react-avatar": "^1.1.9",
-        "@radix-ui/react-checkbox": "^1.3.1",
-        "@radix-ui/react-collapsible": "^1.1.10",
-        "@radix-ui/react-context-menu": "^2.2.14",
-        "@radix-ui/react-dialog": "^1.1.13",
-        "@radix-ui/react-dropdown-menu": "^2.1.14",
-        "@radix-ui/react-hover-card": "^1.1.13",
-        "@radix-ui/react-icons": "^1.3.2",
-        "@radix-ui/react-label": "^2.1.6",
-        "@radix-ui/react-menubar": "^1.1.14",
-        "@radix-ui/react-navigation-menu": "^1.2.12",
-        "@radix-ui/react-popover": "^1.1.13",
-        "@radix-ui/react-progress": "^1.1.6",
-        "@radix-ui/react-radio-group": "^1.3.6",
-        "@radix-ui/react-scroll-area": "^1.2.8",
-        "@radix-ui/react-select": "^2.2.4",
-        "@radix-ui/react-separator": "^1.1.6",
-        "@radix-ui/react-slider": "^1.3.4",
-        "@radix-ui/react-slot": "^1.2.2",
-        "@radix-ui/react-switch": "^1.2.4",
-        "@radix-ui/react-tabs": "^1.1.11",
-        "@radix-ui/react-toast": "^1.2.13",
-        "@radix-ui/react-toggle": "^1.1.8",
-        "@radix-ui/react-toggle-group": "^1.1.9",
-        "@radix-ui/react-tooltip": "^1.2.6",
-        "@react-email/components": "^0.0.41",
-        "@t3-oss/env-nextjs": "^0.13.4",
-        "@tanstack/react-query": "^5.76.1",
-        "@tanstack/react-table": "^8.21.3",
-        "@types/nodemailer": "^6.4.17",
-        "@types/ws": "^8.18.1",
-        "@zenstackhq/runtime": "2.14.2",
-        "argon2": "^0.43.0",
-        "bcrypt": "^6.0.0",
-        "better-auth": "^1.2.8",
-        "class-variance-authority": "^0.7.1",
-        "clsx": "^2.1.1",
-        "cmdk": "^1.1.1",
-        "date-fns": "^4.1.0",
-        "dockerode": "^4.0.6",
-        "dotenv": "^16.5.0",
-        "drizzle-orm": "^0.43.1",
-        "drizzle-zod": "^0.7.1",
-        "embla-carousel-react": "^8.6.0",
-        "input-otp": "^1.4.2",
-        "lucide-react": "^0.510.0",
-        "minio": "^8.0.5",
-        "next": "^15.4.2-canary.5",
-        "next-safe-action": "^7.10.8",
-        "next-themes": "^0.4.6",
-        "nodemailer": "^7.0.3",
-        "npm-check-updates": "^18.0.1",
-        "pg": "^8.16.0",
-        "react": "19.1.0",
-        "react-day-picker": "9.7.0",
-        "react-dom": "19.1.0",
-        "react-dropzone": "^14.3.8",
-        "react-email": "^4.0.13",
-        "react-hook-form": "^7.56.3",
-        "react-resizable-panels": "^3.0.2",
-        "react-twc": "^1.4.2",
-        "recharts": "^2.15.3",
-        "socket.io": "^4.8.1",
-        "socket.io-client": "^4.8.1",
-        "sonner": "^2.0.3",
-        "tailwind-merge": "^3.3.0",
-        "uuid": "^11.1.0",
-        "vaul": "^1.1.2",
-        "ws": "^8.18.2",
-        "zod": "^3.24.4"
-    },
-    "devDependencies": {
-        "@iconify/react": "^6.0.0",
-        "@tailwindcss/postcss": "^4.1.7",
-        "@types/eslint-plugin-tailwindcss": "^3.17.0",
-        "@types/node": "^22.15.18",
-        "@types/pg": "^8.15.2",
-        "@types/react": "^19.1.4",
-        "@types/react-dom": "^19.1.5",
-        "@zenstackhq/openapi": "^2.14.2",
-        "@zenstackhq/tanstack-query": "^2.14.2",
-        "drizzle-kit": "^0.31.1",
-        "eslint": "^9.26.0",
-        "eslint-config-next": "15.3.2",
-        "eslint-plugin-tailwindcss": "^3.18.0",
-        "postcss": "^8.5.3",
-        "tailwindcss": "^4.1.7",
-        "tsx": "^4.19.4",
-        "tw-animate-css": "^1.2.9",
-        "typescript": "^5.8.3",
-        "zenstack": "2.14.2"
-    },
-    "packageManager": "yarn@4.9.1"
+  "name": "portabase",
+  "version": "1.1.4",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack -p 8887",
+    "build": "next build --experimental-build-mode compile",
+    "start": "next start",
+    "lint": "next lint",
+    "email": "email dev --dir ./src/components/emails",
+    "db:generate": "drizzle-kit generate",
+    "db:migrate": "drizzle-kit migrate",
+    "db:drop": "drizzle-kit drop",
+    "auth:generate": "npx @better-auth/cli generate --config ./src/lib/auth/auth.ts"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.0.1",
+    "@radix-ui/react-accordion": "^1.2.10",
+    "@radix-ui/react-alert-dialog": "^1.1.13",
+    "@radix-ui/react-aspect-ratio": "^1.1.6",
+    "@radix-ui/react-avatar": "^1.1.9",
+    "@radix-ui/react-checkbox": "^1.3.1",
+    "@radix-ui/react-collapsible": "^1.1.10",
+    "@radix-ui/react-context-menu": "^2.2.14",
+    "@radix-ui/react-dialog": "^1.1.13",
+    "@radix-ui/react-dropdown-menu": "^2.1.14",
+    "@radix-ui/react-hover-card": "^1.1.13",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.6",
+    "@radix-ui/react-menubar": "^1.1.14",
+    "@radix-ui/react-navigation-menu": "^1.2.12",
+    "@radix-ui/react-popover": "^1.1.13",
+    "@radix-ui/react-progress": "^1.1.6",
+    "@radix-ui/react-radio-group": "^1.3.6",
+    "@radix-ui/react-scroll-area": "^1.2.8",
+    "@radix-ui/react-select": "^2.2.4",
+    "@radix-ui/react-separator": "^1.1.6",
+    "@radix-ui/react-slider": "^1.3.4",
+    "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-switch": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.11",
+    "@radix-ui/react-toast": "^1.2.13",
+    "@radix-ui/react-toggle": "^1.1.8",
+    "@radix-ui/react-toggle-group": "^1.1.9",
+    "@radix-ui/react-tooltip": "^1.2.6",
+    "@react-email/components": "^0.0.41",
+    "@t3-oss/env-nextjs": "^0.13.4",
+    "@tanstack/react-query": "^5.76.1",
+    "@tanstack/react-table": "^8.21.3",
+    "@types/nodemailer": "^6.4.17",
+    "@types/ws": "^8.18.1",
+    "@zenstackhq/runtime": "2.14.2",
+    "argon2": "^0.43.0",
+    "bcrypt": "^6.0.0",
+    "better-auth": "1.4.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "dockerode": "^4.0.6",
+    "dotenv": "^16.5.0",
+    "drizzle-orm": "^0.43.1",
+    "drizzle-zod": "^0.7.1",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.553.0",
+    "minio": "^8.0.5",
+    "motion": "^12.23.24",
+    "next": "16.0.7",
+    "next-safe-action": "^7.10.8",
+    "next-themes": "^0.4.6",
+    "node-cron": "^4.2.1",
+    "node-forge": "^1.3.1",
+    "nodemailer": "^7.0.3",
+    "npm-check-updates": "^18.0.1",
+    "pg": "^8.16.0",
+    "react": "^19.2.0",
+    "react-day-picker": "9.7.0",
+    "react-dom": "^19.2.0",
+    "react-dropzone": "^14.3.8",
+    "react-email": "^4.0.13",
+    "react-hook-form": "^7.56.3",
+    "react-resizable-panels": "^3.0.2",
+    "react-twc": "^1.4.2",
+    "react-use-measure": "^2.1.7",
+    "recharts": "^2.15.3",
+    "socket.io": "^4.8.1",
+    "socket.io-client": "^4.8.1",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.3.0",
+    "uuid": "^11.1.0",
+    "vaul": "^1.1.2",
+    "ws": "^8.18.2",
+    "zod": "^3.24.4"
+  },
+  "devDependencies": {
+    "@iconify/react": "^6.0.0",
+    "@react-email/preview-server": "4.3.2",
+    "@tailwindcss/postcss": "^4.1.7",
+    "@types/eslint-plugin-tailwindcss": "^3.17.0",
+    "@types/node": "^22.15.18",
+    "@types/node-forge": "^1",
+    "@types/pg": "^8.15.2",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
+    "@zenstackhq/openapi": "^2.14.2",
+    "@zenstackhq/tanstack-query": "^2.14.2",
+    "baseline-browser-mapping": "^2.8.32",
+    "drizzle-kit": "^0.31.1",
+    "eslint": "^9.39.0",
+    "eslint-config-next": "^16.0.1",
+    "eslint-plugin-tailwindcss": "^3.18.0",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.1.7",
+    "tsx": "^4.19.4",
+    "tw-animate-css": "^1.2.9",
+    "typescript": "^5.8.3",
+    "zenstack": "2.14.2"
+  },
+  "packageManager": "yarn@4.9.1"
 }

portabase.config.ts

@@ -13,6 +13,7 @@ export const PORTABASE_DEFAULT_SETTINGS = {
                 "https://code.iconify.com",
                 "https://cdn.iconify.design",
                 "https://api.iconify.design",
+
             ],
             STYLE_SRC: [
                 "'self'",
@@ -31,6 +32,7 @@ export const PORTABASE_DEFAULT_SETTINGS = {
                 "https://cdn.iconify.design",
                 "https://code.iconify.com",
                 "https://api.iconify.design",
+                "http://localhost:9000",
             ],
             FONT_SRC: [
                 "'self'",
@@ -41,6 +43,8 @@ export const PORTABASE_DEFAULT_SETTINGS = {
                 "'self'",
                 "https://api.iconify.design",
                 "https://code.iconify.design",
+                "https://api.github.com",
+
             ],
             OBJECT_SRC: ["'none'"],
             BASE_URI: ["'self'"],

proxy.ts

@@ -1,11 +1,10 @@
-import { NextRequest, NextResponse } from "next/server";
-import { loggingMiddleware } from "@/middleware/loggingMiddleware";
-import { errorHandler } from "@/middleware/errorHandler";
-import { auth } from "@/lib/auth/auth";
-import { headers } from "next/headers";
-import { signOut } from "@/lib/auth/auth-client";
+import {NextRequest, NextResponse} from "next/server";
+import {loggingMiddleware} from "@/middleware/loggingMiddleware";
+import {errorHandler} from "@/middleware/errorHandler";
+import {auth} from "@/lib/auth/auth";
+import {headers} from "next/headers";
 
-export async function middleware(request: NextRequest) {
+export async function proxy(request: NextRequest) {
     const url = request.nextUrl.clone();
     const redirectUrl = encodeURIComponent(request.nextUrl.pathname)
 
@@ -13,36 +12,33 @@ export async function middleware(request: NextRequest) {
         const session = await auth.api.getSession({
             headers: await headers(),
         });
-
         if (!session) {
             return NextResponse.redirect(new URL(`/login?redirect=${redirectUrl}`, request.url));
         }
-
         if (session.user.banned) {
-            signOut();
+            await auth.api.signOut({headers: await headers()});
             return NextResponse.redirect(new URL("/login?error=banned", request.url));
         }
-
         if (session.user.role === "pending") {
-            signOut();
+            await auth.api.signOut({headers: await headers()});
             return NextResponse.redirect(new URL(`/login?error=pending?redirect=${redirectUrl}`, request.url));
         }
-
+        if (url.pathname === "/dashboard") {
+            return NextResponse.redirect(new URL(`/dashboard/home`, request.url));
+        }
         return NextResponse.next();
     }
 
-    // Exclude `/api/auth` and its subpaths
     if (url.pathname.startsWith("/api/auth")) {
         return NextResponse.next();
     }
 
     if (url.pathname.startsWith("/api")) {
         const routeExists = checkRouteExists(url.pathname);
-        // If the route does not exist, return a 404 JSON response
         if (!routeExists) {
-            return new NextResponse(JSON.stringify({ message: "This API route does not exist.", status: 404 }), {
+            return new NextResponse(JSON.stringify({message: "This API route does not exist.", status: 404}), {
                 status: 404,
-                headers: { "Content-Type": "application/json" },
+                headers: {"Content-Type": "application/json"},
             });
         }
     }
@@ -52,31 +48,25 @@ export async function middleware(request: NextRequest) {
         errorHandler(err);
     }
 }
-// Function to check if the route exists (supports dynamic routes)
+
 function checkRouteExists(pathname: string) {
-    // Define static and dynamic routes with patterns
     const routePatterns = [
-        //do not delete
-        // /^\/api\/auth\/\d+$/,        // Dynamic route with a number as a parameter (e.g., /api/dynamic/123)
-        // /^\/api\/auth\/\w+$/,        // Dynamic route with a number as a parameter (e.g., /api/dynamic/123)
-        // /^\/api\/agent\/healthcheck\/\w+$/,           // Dynamic route with an alphanumeric parameter (e.g., /api/user/username)
-        /^\/api\/agent\/[^/]+\/status\/?$/, // Dynamic route for /api/agent/[id]/status
+        /^\/api\/agent\/[^/]+\/status\/?$/,
         /^\/api\/agent\/[^/]+\/backup\/?$/,
         /^\/api\/agent\/[^/]+\/restore\/?$/,
         /^\/api\/files\/[^/]+\/?$/,
         /^\/api\/images\/[^/]+\/?$/,
         /^\/api\/events\/?$/,
         /^\/api\/init\/?$/,
+        /^\/api\/config\/?$/,
     ];
     return routePatterns.some((pattern) => pattern.test(pathname));
 }
 
 export const config = {
-    runtime: "nodejs",
     matcher: [
-        // '/api/agent/:path*',
         "/api/:path*",
         "/dashboard/:path*",
         "/dashboard",
-    ],
+    ]
 };

src/components/emails/email-layout.tsx

@@ -13,7 +13,7 @@ export const EmailLayout = ({ children, preview }: PropsWithChildren<{ preview?:
                 {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}/logo-title-black.png`} width="200" height="auto" alt="Logo" />
+                        <Img src={`${baseUrl}/images/logo-black.png`} width="200" height="auto" alt="Logo" />
                         <Section>{children}</Section>
                     </Container>
                 </Body>

src/components/emails/email-notification.tsx

@@ -0,0 +1,97 @@
+// import * as React from "react";
+// import EmailLayout from "./email-layout";
+// import {Text, Section, Button} from "@react-email/components";
+// import type {EventPayload} from "@/features/notifications/types";
+//
+// export interface EmailNotificationProps {
+//     payload: EventPayload
+// }
+//
+// export const EmailNotification = ({payload}: EmailNotificationProps) => {
+//     return (
+//         <EmailLayout preview={payload.title}>
+//             <Text className="text-base  text-green-800 font-bold ">${payload.title}</Text>
+//             <Text className="text-base  text-green-800 font-bold "><strong>Level:</strong> ${payload.level}</Text>
+//
+//
+//             <Text className="text-base font-light  text-green-800 ">
+//                 ${payload.message.replace(/\n/g, '<br>')}
+//             </Text>{" "}
+//
+//
+//             <Section className="mt-[32px] mb-[32px] text-center">
+//
+//             </Section>
+//
+//             {payload.data && (
+//                 <Section className="mt-[16px] text-sm text-gray-700">
+//                     <pre>{JSON.stringify(payload.data, null, 2)}</pre>
+//                 </Section>
+//             )}
+//
+//             <Text className="text-base font-light text-green-800 ">Regards,<br/>Portabase</Text>
+//         </EmailLayout>
+//     );
+// };
+//
+// export default EmailNotification;
+
+
+//       const html = `
+//       <h2>${payload.title}</h2>
+//       <p><strong>Level:</strong> ${payload.level}</p>
+//       <p>${payload.message.replace(/\n/g, '<br>')}</p>
+//       ${payload.data ? `<pre>${JSON.stringify(payload.data, null, 2)}</pre>` : ''}
+//     `;
+//
+
+import * as React from "react";
+import EmailLayout from "./email-layout";
+import {Text, Section, Button} from "@react-email/components";
+import type {EventPayload} from "@/features/notifications/types";
+
+export interface EmailNotificationProps {
+    payload: EventPayload;
+}
+
+export const EmailNotification = ({payload}: EmailNotificationProps) => {
+    return (
+        <EmailLayout preview={payload.message}>
+            <Section>
+                <Text className="text-xl font-bold ">
+                    {payload.title}
+                </Text>
+                <Text className=" font-semibold ">
+                    Level: {payload.level}
+                </Text>
+            </Section>
+
+            {payload.message && (
+                <Section className="mb-2">
+                    <Text
+                        className="text-base  font-light"
+                        dangerouslySetInnerHTML={{__html: payload.message.replace(/\n/g, "<br>")}}
+                    />
+                </Section>
+            )}
+
+            {payload.data && (
+                <Section className="mb-6 p-4 bg-gray-100 rounded text-sm text-gray-700">
+                    <Text>
+                        <pre>{JSON.stringify(payload.data, null, 2)}</pre>
+                    </Text>
+                </Section>
+            )}
+
+            <Section className="mt-8">
+                <Text className="text-base font-light ">
+                    Regards,
+                    <br/>
+                    Portabase
+                </Text>
+            </Section>
+        </EmailLayout>
+    );
+};
+
+export default EmailNotification;

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

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

src/components/emails/email-settings-test.tsx

@@ -0,0 +1,15 @@
+import { Text } from "@react-email/components";
+import * as React from "react";
+import EmailLayout from "./email-layout";
+
+export const EmailSettingsTest = () => {
+    return (
+        <EmailLayout preview="Email Setup">
+            <Text className="text-base font-light leading-8 ">Hi, your email settings are setup !</Text>
+            <Text className="text-base font-light leading-8  ">Best regard,</Text>{" "}
+            <Text className="text-base font-light leading-8  ">Portabase</Text>
+        </EmailLayout>
+    )
+};
+
+export default EmailSettingsTest;

src/components/emails/email-text.tsx

@@ -0,0 +1,6 @@
+import {Text as ReactEmailText} from "@react-email/components";
+import {ComponentPropsWithoutRef} from "react";
+
+export const EmailText = (props: ComponentPropsWithoutRef<typeof ReactEmailText>) => {
+    return <ReactEmailText className="text-base font-light leading-8 text-green-800 " {...props} />;
+};

src/components/ui/button.tsx

@@ -35,6 +35,8 @@ const buttonVariants = cva(
   }
 )
 
+export type ButtonVariantsProps = VariantProps<typeof buttonVariants>;
+
 function Button({
   className,
   variant,

src/components/ui/dialog.tsx

@@ -7,117 +7,118 @@ import { XIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
 
 function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+                  ...props
+                }: React.ComponentProps<typeof DialogPrimitive.Root>) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />
 }
 
 function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+                         ...props
+                       }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 }
 
 function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+                        ...props
+                      }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
   return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 }
 
 function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+                       ...props
+                     }: React.ComponentProps<typeof DialogPrimitive.Close>) {
   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 }
 
 function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+                         className,
+                         ...props
+                       }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
   return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
+      <DialogPrimitive.Overlay
+          data-slot="dialog-overlay"
+          className={cn(
+              "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+              className
+          )}
+          {...props}
+      />
   )
 }
 
 function DialogContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+                         className,
+                         children,
+                         ...props
+                       }: React.ComponentProps<typeof DialogPrimitive.Content>) {
   return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
-          <XIcon />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-      </DialogPrimitive.Content>
-    </DialogPortal>
+      <DialogPortal data-slot="dialog-portal">
+        <DialogOverlay />
+        <DialogPrimitive.Content
+            data-slot="dialog-content"
+            className={cn(
+                "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+                "max-h-[90vh] overflow-y-auto",
+                className
+            )}
+            {...props}
+        >
+          {children}
+          <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+      </DialogPortal>
   )
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
+      <div
+          data-slot="dialog-header"
+          className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+          {...props}
+      />
   )
 }
 
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
+      <div
+          data-slot="dialog-footer"
+          className={cn(
+              "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+              className
+          )}
+          {...props}
+      />
   )
 }
 
 function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+                       className,
+                       ...props
+                     }: React.ComponentProps<typeof DialogPrimitive.Title>) {
   return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
+      <DialogPrimitive.Title
+          data-slot="dialog-title"
+          className={cn("text-lg leading-none font-semibold", className)}
+          {...props}
+      />
   )
 }
 
 function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+                             className,
+                             ...props
+                           }: React.ComponentProps<typeof DialogPrimitive.Description>) {
   return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
+      <DialogPrimitive.Description
+          data-slot="dialog-description"
+          className={cn("text-muted-foreground text-sm", className)}
+          {...props}
+      />
   )
 }
 

src/components/ui/github-button.tsx

@@ -0,0 +1,296 @@
+'use client';
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Star } from 'lucide-react';
+import { motion, useInView, type SpringOptions, type UseInViewOptions } from 'motion/react';
+import { cn } from '@/lib/utils';
+
+const githubButtonVariants = cva(
+  'cursor-pointer relative overflow-hidden will-change-transform backface-visibility-hidden transform-gpu transition-transform duration-200 ease-out hover:scale-105 group whitespace-nowrap focus-visible:outline-hidden inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-zinc-950 hover:bg-zinc-900 text-white border-gray-700 dark:bg-zinc-50 dark:border-gray-300 dark:text-zinc-950 dark:hover:bg-zinc-50',
+        outline: 'bg-background text-accent-foreground border border-input hover:bg-accent',
+      },
+      size: {
+        default: 'h-8.5 rounded-md px-3 gap-2 text-[0.8125rem] leading-none [&_svg]:size-4 gap-2',
+        sm: 'h-7 rounded-md px-2.5 gap-1.5 text-xs leading-none [&_svg]:size-3.5 gap-1.5',
+        lg: 'h-10 rounded-md px-4 gap-2.5 text-sm leading-none [&_svg]:size-5 gap-2.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+interface GithubButtonProps extends React.ComponentProps<'button'>, VariantProps<typeof githubButtonVariants> {
+  /** Whether to round stars */
+  roundStars?: boolean;
+  /** Whether to show Github icon */
+  fixedWidth?: boolean;
+  /** Initial number of stars */
+  initialStars?: number;
+  /** Class for stars */
+  starsClass?: string;
+  /** Target number of stars to animate to */
+  targetStars?: number;
+  /** Animation duration in seconds */
+  animationDuration?: number;
+  /** Animation delay in seconds */
+  animationDelay?: number;
+  /** Whether to start animation automatically */
+  autoAnimate?: boolean;
+  /** Callback when animation completes */
+  onAnimationComplete?: () => void;
+  /** Whether to show Github icon */
+  showGithubIcon?: boolean;
+  /** Whether to show star icon */
+  showStarIcon?: boolean;
+  /** Whether to show separator */
+  separator?: boolean;
+  /** Whether stars should be filled */
+  filled?: boolean;
+  /** Repository URL for actual Github integration */
+  repoUrl?: string;
+  /** Button text label */
+  label?: string;
+  /** Use in-view detection to trigger animation */
+  useInViewTrigger?: boolean;
+  /** In-view options */
+  inViewOptions?: UseInViewOptions;
+  /** Spring transition options */
+  transition?: SpringOptions;
+}
+
+function GithubButton({
+  initialStars = 0,
+  targetStars = 0,
+  starsClass = '',
+  fixedWidth = true,
+  animationDuration = 2,
+  animationDelay = 0,
+  autoAnimate = true,
+  className,
+  variant = 'default',
+  size = 'default',
+  showGithubIcon = true,
+  showStarIcon = true,
+  roundStars = false,
+  separator = false,
+  filled = false,
+  repoUrl,
+  onClick,
+  label = '',
+  useInViewTrigger = false,
+  inViewOptions = { once: true },
+  transition,
+  ...props
+}: GithubButtonProps) {
+  const [currentStars, setCurrentStars] = useState(initialStars);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [starProgress, setStarProgress] = useState(filled ? 100 : 0);
+  const [hasAnimated, setHasAnimated] = useState(false);
+
+  // Format number with units
+  const formatNumber = (num: number) => {
+    const units = ['k', 'M', 'B', 'T'];
+
+    if (roundStars && num >= 1000) {
+      let unitIndex = -1;
+      let value = num;
+
+      while (value >= 1000 && unitIndex < units.length - 1) {
+        value /= 1000;
+        unitIndex++;
+      }
+
+      // Format to 1 decimal place if needed, otherwise show whole number
+      const formatted = value % 1 === 0 ? value.toString() : value.toFixed(1);
+      return `${formatted}${units[unitIndex]}`;
+    }
+
+    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  };
+
+  // Start animation
+  const startAnimation = useCallback(() => {
+    if (isAnimating || hasAnimated) return;
+
+    setIsAnimating(true);
+    const startTime = Date.now();
+    const startValue = 0; // Always start from 0 for number animation
+    const endValue = targetStars;
+    const duration = animationDuration * 1000;
+
+    const animate = () => {
+      const elapsed = Date.now() - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+
+      // Easing function for smooth animation
+      const easeOutQuart = 1 - Math.pow(1 - progress, 4);
+
+      // Update star count from 0 to target with more frequent updates
+      const newStars = Math.round(startValue + (endValue - startValue) * easeOutQuart);
+      setCurrentStars(newStars);
+
+      // Update star fill progress (0 to 100)
+      setStarProgress(progress * 100);
+
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      } else {
+        setCurrentStars(endValue);
+        setStarProgress(100);
+        setIsAnimating(false);
+        setHasAnimated(true);
+      }
+    };
+
+    setTimeout(() => {
+      requestAnimationFrame(animate);
+    }, animationDelay * 1000);
+  }, [isAnimating, hasAnimated, targetStars, animationDuration, animationDelay]);
+
+  // Use in-view detection if enabled
+  const ref = React.useRef(null);
+  const isInView = useInView(ref, inViewOptions);
+
+  // Reset animation state when targetStars changes
+  useEffect(() => {
+    setHasAnimated(false);
+    setCurrentStars(initialStars);
+  }, [targetStars, initialStars]);
+
+  // Auto-start animation or use in-view trigger
+  useEffect(() => {
+    if (useInViewTrigger) {
+      if (isInView && !hasAnimated) {
+        startAnimation();
+      }
+    } else if (autoAnimate && !hasAnimated) {
+      startAnimation();
+    }
+  }, [autoAnimate, useInViewTrigger, isInView, hasAnimated, startAnimation]);
+
+  const navigateToRepo = () => {
+    if (!repoUrl) {
+      return;
+    }
+
+    // Next.js compatible navigation approach
+    try {
+      // Create a temporary anchor element for reliable navigation
+      const link = document.createElement('a');
+      link.href = repoUrl;
+      link.target = '_blank';
+      link.rel = 'noopener noreferrer';
+
+      // Temporarily add to DOM and click
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } catch {
+      // Fallback to window.open
+      try {
+        window.open(repoUrl, '_blank', 'noopener,noreferrer');
+      } catch {
+        // Final fallback
+        window.location.href = repoUrl;
+      }
+    }
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (onClick) {
+      onClick(event);
+      return;
+    }
+
+    if (repoUrl) {
+      navigateToRepo();
+    } else if (!hasAnimated) {
+      startAnimation();
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+    // Handle Enter and Space key presses for accessibility
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+
+      if (repoUrl) {
+        navigateToRepo();
+      } else if (!hasAnimated) {
+        startAnimation();
+      }
+    }
+  };
+
+  return (
+    <button
+      ref={ref}
+      className={cn(githubButtonVariants({ variant, size, className }), separator && 'ps-0')}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      role="button"
+      tabIndex={0}
+      aria-label={repoUrl ? `Star ${label} on GitHub` : label}
+      {...props}
+    >
+      {showGithubIcon && (
+        <div
+          className={cn(
+            'h-full relative flex items-center justify-center',
+            separator && 'w-9 bg-muted/60 border-e border-input',
+          )}
+        >
+          <svg role="img" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+          </svg>
+        </div>
+      )}
+
+      {label && <span>{label}</span>}
+
+      {/* Animated Star Icon */}
+      {showStarIcon && (
+        <div className="relative inline-flex shrink-0">
+          <Star className="fill-muted-foreground text-muted-foreground" aria-hidden="true" />
+          <Star
+            className="absolute top-0 start-0 text-yellow-400 fill-yellow-400"
+            size={18}
+            aria-hidden="true"
+            style={{
+              clipPath: `inset(${100 - starProgress}% 0 0 0)`,
+            }}
+          />
+        </div>
+      )}
+
+      {/* Animated Number Counter with Ticker Effect */}
+      <div className={cn('flex flex-col font-semibold relative overflow-hidden', starsClass)}>
+        <motion.div
+          animate={{ opacity: 1 }}
+          transition={{
+            type: 'spring',
+            stiffness: 300,
+            damping: 30,
+            ...transition,
+          }}
+          className="tabular-nums"
+        >
+          <span>{currentStars > 0 && formatNumber(currentStars)}</span>
+        </motion.div>
+        {fixedWidth && <span className="opacity-0 h-0 overflow-hidden tabular-nums">{formatNumber(targetStars)}</span>}
+      </div>
+    </button>
+  );
+}
+
+export { GithubButton, githubButtonVariants };
+export type { GithubButtonProps };

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

@@ -0,0 +1,164 @@
+"use client";
+
+import {Ref, useState} from "react";
+import {Check, X} from "lucide-react";
+import {motion, AnimatePresence} from "framer-motion";
+import {
+    FormControl,
+    FormDescription,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form";
+import {PasswordInput} from "@/components/ui/password-input";
+
+interface PasswordStrengthInputProps {
+    field: {
+        name: string;
+        value: string;
+        onChange: (value: string) => void;
+        onBlur: () => void;
+        ref: Ref<HTMLInputElement>;
+    };
+    label?: string;
+    description?: string;
+}
+
+const passwordTextsFields = {
+    label: "Password",
+    placeholder: "Enter password",
+    strength: {
+        enter: "Enter a password",
+        weak: "Weak password",
+        medium: "Medium password",
+        strong: "Strong password"
+    },
+    requirementsIntro: "Must contain:",
+    requirements: {
+        minLength: "At least 8 characters",
+        number: "At least 1 number",
+        lowercase: "At least 1 lowercase letter",
+        uppercase: "At least 1 uppercase letter",
+        specialChar: "At least 1 special character"
+    }
+}
+
+
+export function PasswordStrengthInput({
+                                          field,
+                                          label,
+                                          description,
+                                      }: PasswordStrengthInputProps) {
+    const text = passwordTextsFields
+    const [isVisible, setIsVisible] = useState(false);
+    const password = field.value ?? "";
+
+    const requirements = [
+        {regex: /.{8,}/, text: text.requirements.minLength},
+        {regex: /[0-9]/, text: text.requirements.number},
+        {regex: /[a-z]/, text: text.requirements.lowercase},
+        {regex: /[A-Z]/, text: text.requirements.uppercase},
+        {regex: /[^a-zA-Z0-9]/, text: text.requirements.specialChar},
+    ];
+
+    const strength = requirements.map((req) => ({
+        met: req.regex.test(password),
+        text: req.text,
+    }));
+
+    const strengthScore = strength.filter((req) => req.met).length;
+
+    const getStrengthColor = (score: number) => {
+        if (score === 0) return "bg-border";
+        if (score <= 2) return "bg-red-500";
+        if (score === 3) return "bg-orange-500";
+        if (score === 4) return "bg-amber-500";
+        return "bg-emerald-500";
+    };
+
+    const getStrengthText = (score: number) => {
+        if (score === 0) return text.strength.enter;
+        if (score <= 2) return text.strength.weak;
+        if (score === 3 || score === 4) return text.strength.medium;
+        return text.strength.strong;
+    };
+
+    return (
+        <FormItem>
+            <FormLabel>{label ?? text.label}</FormLabel>
+            <div className="relative">
+                <FormControl>
+                    <PasswordInput
+                        placeholder={text.placeholder}
+                        value={field.value ?? ""}
+                        onChange={(e) => field.onChange(e.target.value)}
+                        onFocus={() => setIsVisible(true)}
+                        onBlur={(e) => {
+                            field.onBlur();
+                            setIsVisible(false);
+                        }}
+                        ref={field.ref}
+                        name={field.name}
+                    />
+                </FormControl>
+            </div>
+
+            <AnimatePresence>
+                {isVisible && (
+                    <motion.div
+                        initial={{opacity: 0, height: 0, y: -5}}
+                        animate={{opacity: 1, height: "auto", y: 0}}
+                        exit={{opacity: 0, height: 0, y: -5}}
+                        transition={{duration: 0.35, ease: "easeInOut"}}
+                        className="overflow-hidden"
+                    >
+                        <FormDescription>
+                            {description ??
+                                `${getStrengthText(strengthScore)}. ${text.requirementsIntro}`}
+                        </FormDescription>
+                        <FormMessage/>
+
+                        <div
+                            className="mb-2 h-1 w-full overflow-hidden rounded-full bg-border mt-2"
+                            role="progressbar"
+                            aria-valuenow={strengthScore}
+                            aria-valuemin={0}
+                            aria-valuemax={requirements.length}
+                        >
+                            <motion.div
+                                key={strengthScore}
+                                className={`h-full ${getStrengthColor(
+                                    strengthScore
+                                )}`}
+                                initial={{width: 0}}
+                                animate={{
+                                    width: `${(strengthScore / requirements.length) * 100}%`,
+                                }}
+                                transition={{duration: 0.5}}
+                            />
+                        </div>
+
+                        <ul className="space-y-1.5" aria-label="Password requirements">
+                            {strength.map((req, i) => (
+                                <li key={i} className="flex items-center gap-2">
+                                    {req.met ? (
+                                        <Check className="h-4 w-4 text-emerald-500"/>
+                                    ) : (
+                                        <X className="h-4 w-4 text-muted-foreground"/>
+                                    )}
+                                    <span
+                                        className={`text-xs ${
+                                            req.met ? "text-emerald-600" : "text-muted-foreground"
+                                        }`}
+                                    >
+                    {req.text}
+                  </span>
+                                </li>
+                            ))}
+                        </ul>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </FormItem>
+    );
+}

src/components/ui/search-input.tsx

@@ -0,0 +1,191 @@
+"use client"
+
+import type React from "react"
+import { useState, useRef, useEffect, forwardRef } from "react"
+import { Search, X } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export interface IEntry {
+    value: string
+    label: string
+}
+
+interface SearchInputProps {
+    value?: IEntry
+    onChange?: (value: IEntry) => void
+    onSelect?: (value: IEntry) => void
+    name?: string
+    placeholder?: string
+    entries?: IEntry[]
+    disabled?: boolean
+    className?: string
+}
+
+export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+    (
+        {
+            value: controlledValue,
+            onChange,
+            onSelect,
+            name,
+            placeholder = "Search entries...",
+            entries = [],
+            disabled = false,
+            className,
+            ...props
+        },
+        ref,
+    ) => {
+        const [internalValue, setInternalValue] = useState<IEntry | null>(null)
+        const [isOpen, setIsOpen] = useState(false)
+        const [filteredEntries, setFilteredEntries] = useState<IEntry[]>([])
+        const [selectedIndex, setSelectedIndex] = useState(-1)
+        const internalRef = useRef<HTMLInputElement>(null)
+        const listRef = useRef<HTMLUListElement>(null)
+
+        const query = controlledValue?.label ?? internalValue?.label ?? ""
+        const inputRef = (ref as React.RefObject<HTMLInputElement>) || internalRef
+
+        // Filter entries based on query
+        useEffect(() => {
+            if (query.trim()) {
+                const filtered = entries.filter((entry) =>
+                    entry.label.toLowerCase().includes(query.toLowerCase()),
+                )
+                setFilteredEntries(filtered)
+                setSelectedIndex(-1)
+            } else {
+                setFilteredEntries([])
+            }
+        }, [query, entries])
+
+        const handleValueChange = (newValue: IEntry | null) => {
+            if (controlledValue === undefined) {
+                setInternalValue(newValue)
+            }
+            if (newValue) {
+                onChange?.(newValue)
+            }
+        }
+
+        // Handle keyboard navigation
+        const handleKeyDown = (e: React.KeyboardEvent) => {
+            if (!isOpen || filteredEntries.length === 0) return
+
+            switch (e.key) {
+                case "ArrowDown":
+                    e.preventDefault()
+                    setSelectedIndex((prev) =>
+                        prev < filteredEntries.length - 1 ? prev + 1 : 0,
+                    )
+                    break
+                case "ArrowUp":
+                    e.preventDefault()
+                    setSelectedIndex((prev) =>
+                        prev > 0 ? prev - 1 : filteredEntries.length - 1,
+                    )
+                    break
+                case "Enter":
+                    e.preventDefault()
+                    if (selectedIndex >= 0) {
+                        handleSelect(filteredEntries[selectedIndex])
+                    }
+                    break
+                case "Escape":
+                    setIsOpen(false)
+                    setSelectedIndex(-1)
+                    inputRef.current?.blur()
+                    break
+            }
+        }
+
+        const handleSelect = (entry: IEntry) => {
+            handleValueChange(entry)
+            onSelect?.(entry)
+            setIsOpen(false)
+            setSelectedIndex(-1)
+            inputRef.current?.blur()
+        }
+
+        const clearSearch = () => {
+            handleValueChange(null)
+            setIsOpen(false)
+            setSelectedIndex(-1)
+            inputRef.current?.focus()
+        }
+
+        return (
+            <div className={cn("relative w-full", className)}>
+                <div className="relative">
+                    <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                    <Input
+                        {...props}
+                        ref={inputRef}
+                        type="text"
+                        name={name}
+                        placeholder={placeholder}
+                        value={query}
+                        disabled={disabled}
+                        onChange={(e) => {
+                            const newLabel = e.target.value
+                            handleValueChange({ value: newLabel, label: newLabel })
+                        }}
+                        onFocus={() => !disabled && setIsOpen(true)}
+                        onBlur={() => {
+                            // Delay closing to allow clicking on entries
+                            setTimeout(() => setIsOpen(false), 150)
+                        }}
+                        onKeyDown={handleKeyDown}
+                        className="pl-10 pr-10"
+                    />
+                    {query && !disabled && (
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={clearSearch}
+                            className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2 p-0 hover:bg-muted"
+                        >
+                            <X className="h-4 w-4" />
+                        </Button>
+                    )}
+                </div>
+
+                {/* Results dropdown */}
+                {isOpen && !disabled && filteredEntries.length > 0 && (
+                    <div className="absolute top-full z-50 w-full mt-1 bg-popover border rounded-md shadow-md">
+                        <ul ref={listRef} className="max-h-60 overflow-auto py-1" role="listbox">
+                            {filteredEntries.map((entry, index) => (
+                                <li
+                                    key={entry.value}
+                                    role="option"
+                                    aria-selected={index === selectedIndex}
+                                    className={cn(
+                                        "px-3 py-2 text-sm cursor-pointer transition-colors",
+                                        "hover:bg-accent hover:text-accent-foreground",
+                                        index === selectedIndex && "bg-accent text-accent-foreground",
+                                    )}
+                                    onClick={() => handleSelect(entry)}
+                                >
+                                    {entry.label}
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                )}
+
+                {/* No results message */}
+                {isOpen && !disabled && query && filteredEntries.length === 0 && (
+                    <div className="absolute top-full z-50 w-full mt-1 bg-popover border rounded-md shadow-md">
+                        <div className="px-3 py-2 text-sm text-muted-foreground">
+                            No results found for "{query}"
+                        </div>
+                    </div>
+                )}
+            </div>
+        )
+    },
+)
+
+SearchInput.displayName = "SearchInput"

src/components/ui/sheet.tsx

@@ -11,119 +11,121 @@ function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
 }
 
 function SheetTrigger({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+                        ...props
+                      }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
   return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
 }
 
 function SheetClose({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+                      ...props
+                    }: React.ComponentProps<typeof SheetPrimitive.Close>) {
   return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
 }
 
 function SheetPortal({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+                       ...props
+                     }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
   return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
 }
 
 function SheetOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+                        className,
+                        ...props
+                      }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
   return (
-    <SheetPrimitive.Overlay
-      data-slot="sheet-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
+      <SheetPrimitive.Overlay
+          data-slot="sheet-overlay"
+          className={cn(
+              "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+              className
+          )}
+          {...props}
+      />
   )
 }
 
 function SheetContent({
-  className,
-  children,
-  side = "right",
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+                        className,
+                        children,
+                        side = "right",
+                        ...props
+                      }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left"
 }) {
   return (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content
-        data-slot="sheet-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-          side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-          side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-          side === "top" &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
-          side === "bottom" &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-          <XIcon className="size-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
-    </SheetPortal>
+      <SheetPortal>
+        <SheetOverlay />
+        <SheetPrimitive.Content
+            data-slot="sheet-content"
+            className={cn(
+                "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+                side === "right" &&
+                "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l",
+                // "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+                side === "left" &&
+                "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r",
+                // "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+                side === "top" &&
+                "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+                side === "bottom" &&
+                "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+                className
+            )}
+            {...props}
+        >
+          {children}
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        </SheetPrimitive.Content>
+      </SheetPortal>
   )
 }
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="sheet-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
-      {...props}
-    />
+      <div
+          data-slot="sheet-header"
+          className={cn("flex flex-col gap-1.5 p-4", className)}
+          {...props}
+      />
   )
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="sheet-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
+      <div
+          data-slot="sheet-footer"
+          className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+          {...props}
+      />
   )
 }
 
 function SheetTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+                      className,
+                      ...props
+                    }: React.ComponentProps<typeof SheetPrimitive.Title>) {
   return (
-    <SheetPrimitive.Title
-      data-slot="sheet-title"
-      className={cn("text-foreground font-semibold", className)}
-      {...props}
-    />
+      <SheetPrimitive.Title
+          data-slot="sheet-title"
+          className={cn("text-foreground font-semibold", className)}
+          {...props}
+      />
   )
 }
 
 function SheetDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+                            className,
+                            ...props
+                          }: React.ComponentProps<typeof SheetPrimitive.Description>) {
   return (
-    <SheetPrimitive.Description
-      data-slot="sheet-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
+      <SheetPrimitive.Description
+          data-slot="sheet-description"
+          className={cn("text-muted-foreground text-sm", className)}
+          {...props}
+      />
   )
 }
 

src/components/ui/sliding-number.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import * as React from 'react';
+import {
+    useSpring,
+    useTransform,
+    motion,
+    useInView,
+    type MotionValue,
+    type SpringOptions,
+    type UseInViewOptions,
+} from 'motion/react';
+import useMeasure from 'react-use-measure';
+import {cn} from "@/lib/utils";
+
+
+type SlidingNumberRollerProps = {
+    prevValue: number;
+    value: number;
+    place: number;
+    transition: SpringOptions;
+};
+
+function SlidingNumberRoller({
+                                 prevValue,
+                                 value,
+                                 place,
+                                 transition,
+                             }: SlidingNumberRollerProps) {
+    const startNumber = Math.floor(prevValue / place) % 10;
+    const targetNumber = Math.floor(value / place) % 10;
+    const animatedValue = useSpring(startNumber, transition);
+
+    React.useEffect(() => {
+        animatedValue.set(targetNumber);
+    }, [targetNumber, animatedValue]);
+
+    const [measureRef, { height }] = useMeasure();
+
+    return (
+        <span
+            ref={measureRef}
+            data-slot="sliding-number-roller"
+            className="relative inline-block w-[1ch] overflow-x-visible overflow-y-clip leading-none tabular-nums"
+        >
+      <span className="invisible">0</span>
+            {Array.from({ length: 10 }, (_, i) => (
+                <SlidingNumberDisplay
+                    key={i}
+                    motionValue={animatedValue}
+                    number={i}
+                    height={height}
+                    transition={transition}
+                />
+            ))}
+    </span>
+    );
+}
+
+type SlidingNumberDisplayProps = {
+    motionValue: MotionValue<number>;
+    number: number;
+    height: number;
+    transition: SpringOptions;
+};
+
+function SlidingNumberDisplay({
+                                  motionValue,
+                                  number,
+                                  height,
+                                  transition,
+                              }: SlidingNumberDisplayProps) {
+    const y = useTransform(motionValue, (latest) => {
+        if (!height) return 0;
+        const currentNumber = latest % 10;
+        const offset = (10 + number - currentNumber) % 10;
+        let translateY = offset * height;
+        if (offset > 5) translateY -= 10 * height;
+        return translateY;
+    });
+
+    if (!height) {
+        return <span className="invisible absolute">{number}</span>;
+    }
+
+    return (
+        <motion.span
+            data-slot="sliding-number-display"
+            style={{ y }}
+            className="absolute inset-0 flex items-center justify-center"
+            transition={{ ...transition, type: 'spring' }}
+        >
+            {number}
+        </motion.span>
+    );
+}
+
+type SlidingNumberProps = React.ComponentProps<'span'> & {
+    number: number | string;
+    inView?: boolean;
+    inViewMargin?: UseInViewOptions['margin'];
+    inViewOnce?: boolean;
+    padStart?: boolean;
+    decimalSeparator?: string;
+    decimalPlaces?: number;
+    transition?: SpringOptions;
+};
+
+function SlidingNumber({
+                           ref,
+                           number,
+                           className,
+                           inView = false,
+                           inViewMargin = '0px',
+                           inViewOnce = true,
+                           padStart = false,
+                           decimalSeparator = '.',
+                           decimalPlaces = 0,
+                           transition = {
+                               stiffness: 200,
+                               damping: 20,
+                               mass: 0.4,
+                           },
+                           ...props
+                       }: SlidingNumberProps) {
+    const localRef = React.useRef<HTMLSpanElement>(null);
+    React.useImperativeHandle(ref, () => localRef.current!);
+
+    const inViewResult = useInView(localRef, {
+        once: inViewOnce,
+        margin: inViewMargin,
+    });
+    const isInView = !inView || inViewResult;
+
+    const prevNumberRef = React.useRef<number>(0);
+
+    const effectiveNumber = React.useMemo(
+        () => (!isInView ? 0 : Math.abs(Number(number))),
+        [number, isInView],
+    );
+
+    const formatNumber = React.useCallback(
+        (num: number) =>
+            decimalPlaces != null ? num.toFixed(decimalPlaces) : num.toString(),
+        [decimalPlaces],
+    );
+
+    const numberStr = formatNumber(effectiveNumber);
+    const [newIntStrRaw, newDecStrRaw = ''] = numberStr.split('.');
+    const newIntStr =
+        padStart && newIntStrRaw?.length === 1 ? '0' + newIntStrRaw : newIntStrRaw;
+
+    const prevFormatted = formatNumber(prevNumberRef.current);
+    const [prevIntStrRaw = '', prevDecStrRaw = ''] = prevFormatted.split('.');
+    const prevIntStr =
+        padStart && prevIntStrRaw.length === 1
+            ? '0' + prevIntStrRaw
+            : prevIntStrRaw;
+
+    const adjustedPrevInt = React.useMemo(() => {
+        return prevIntStr.length > (newIntStr?.length ?? 0)
+            ? prevIntStr.slice(-(newIntStr?.length ?? 0))
+            : prevIntStr.padStart(newIntStr?.length ?? 0, '0');
+    }, [prevIntStr, newIntStr]);
+
+    const adjustedPrevDec = React.useMemo(() => {
+        if (!newDecStrRaw) return '';
+        return prevDecStrRaw.length > newDecStrRaw.length
+            ? prevDecStrRaw.slice(0, newDecStrRaw.length)
+            : prevDecStrRaw.padEnd(newDecStrRaw.length, '0');
+    }, [prevDecStrRaw, newDecStrRaw]);
+
+    React.useEffect(() => {
+        if (isInView) prevNumberRef.current = effectiveNumber;
+    }, [effectiveNumber, isInView]);
+
+    const intDigitCount = newIntStr?.length ?? 0;
+    const intPlaces = React.useMemo(
+        () =>
+            Array.from({ length: intDigitCount }, (_, i) =>
+                Math.pow(10, intDigitCount - i - 1),
+            ),
+        [intDigitCount],
+    );
+    const decPlaces = React.useMemo(
+        () =>
+            newDecStrRaw
+                ? Array.from({ length: newDecStrRaw.length }, (_, i) =>
+                    Math.pow(10, newDecStrRaw.length - i - 1),
+                )
+                : [],
+        [newDecStrRaw],
+    );
+
+    const newDecValue = newDecStrRaw ? parseInt(newDecStrRaw, 10) : 0;
+    const prevDecValue = adjustedPrevDec ? parseInt(adjustedPrevDec, 10) : 0;
+
+    return (
+        <span
+            ref={localRef}
+            data-slot="sliding-number"
+            className={cn('flex items-center', className)}
+            {...props}
+        >
+      {isInView && Number(number) < 0 && <span className="mr-1">-</span>}
+
+            {intPlaces.map((place) => (
+                <SlidingNumberRoller
+                    key={`int-${place}`}
+                    prevValue={parseInt(adjustedPrevInt, 10)}
+                    value={parseInt(newIntStr ?? '0', 10)}
+                    place={place}
+                    transition={transition}
+                />
+            ))}
+
+            {newDecStrRaw && (
+                <>
+                    <span>{decimalSeparator}</span>
+                    {decPlaces.map((place) => (
+                        <SlidingNumberRoller
+                            key={`dec-${place}`}
+                            prevValue={prevDecValue}
+                            value={newDecValue}
+                            place={place}
+                            transition={transition}
+                        />
+                    ))}
+                </>
+            )}
+    </span>
+    );
+}
+
+export { SlidingNumber, type SlidingNumberProps };

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

@@ -0,0 +1,31 @@
+"use client"
+import {env} from "@/env.mjs";
+import React, {useEffect, useState} from "react";
+import {useTheme} from "next-themes";
+
+
+export const AuthLogoSection = () => {
+
+    const {resolvedTheme} = useTheme();
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    if (!mounted) return null;
+
+
+    const imageTheme = resolvedTheme === "dark" ? "/images/logo-white.png" : "/images/logo-black.png";
+
+    return (
+        <div className="sm:mx-auto sm:w-full sm:max-w-md flex items-center justify-center space-x-2">
+            <img
+                className="p-12 text-black dark:text-white"
+                src={imageTheme}
+                alt="Logo"
+            />
+            <span className="text-sm text-muted-foreground -ml-12 -mb-12">v{env.NEXT_PUBLIC_PROJECT_VERSION}</span>
+        </div>
+    )
+}

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

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

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

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

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

@@ -1,10 +1,11 @@
 "use client";
-import { Button } from "@/components/ui/button";
-import { signIn } from "@/lib/auth/auth-client";
-import { JSX } from "react";
+import {Button} from "@/components/ui/button";
+import {signIn} from "@/lib/auth/auth-client";
+import {JSX} from "react";
 
 export type AuthButtonProps = {
     providers: SocialProviderType[];
+    callBackURL?: string;
 };
 
 export type SocialProviderType = {
@@ -41,7 +42,7 @@ export const SocialAuthButton = (props: AuthButtonProps): JSX.Element => {
                         e.preventDefault();
                         void signIn.social({
                             provider: provider.id,
-                            callbackURL: "/dashboard/profile",
+                            callbackURL: props.callBackURL ?? "/dashboard/profile",
                         });
                     }}
                 >

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

@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+export const LoginSchema = z.object({
+    email: z.string().email({message: "Email is invalid"}),
+    password: z.string().nonempty({message: "Password could not be empty"}),
+
+})
+
+export type LoginType = z.infer<typeof LoginSchema>;

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

@@ -0,0 +1,177 @@
+"use client";
+
+import {Card, CardContent, CardHeader} from "@/components/ui/card";
+import {FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm} from "@/components/ui/form";
+import {Input} from "@/components/ui/input";
+import {Form} from "@/components/ui/form";
+import {Button} from "@/components/ui/button";
+import {toast} from "sonner";
+import {useMutation} from "@tanstack/react-query";
+import {TooltipProvider} from "@/components/ui/tooltip";
+import Link from "next/link";
+import {PasswordInput} from "@/components/ui/password-input";
+import {LoginSchema, LoginType} from "@/components/wrappers/auth/login/login-form/login-form.schema";
+import {SocialAuthButton, SocialProviderType} from "@/components/wrappers/auth/login/button-auth/social-auth-button";
+import {signIn} from "@/lib/auth/auth-client";
+import {useRouter} from "next/navigation";
+import {Icon} from "@iconify/react";
+import {useEffect, useState} from "react";
+import {Separator} from "@/components/ui/separator";
+
+export type loginFormProps = {
+    defaultValues?: LoginType;
+    authGoogleEnabled: boolean;
+};
+
+export const LoginForm = (props: loginFormProps) => {
+    const router = useRouter();
+
+    const form = useZodForm({
+        schema: LoginSchema,
+    });
+
+    const [urlParams] = useState(() =>
+        new URLSearchParams(typeof window !== "undefined" ? window.location.search : "")
+    );
+
+    useEffect(() => {
+        const error = urlParams.get("error");
+        if (error?.includes("pending")) {
+            toast.error("Your account is not active.");
+            urlParams.delete("error");
+            window.history.replaceState({}, document.title, window.location.pathname + "?" + urlParams.toString());
+        }
+    }, [urlParams]);
+
+    const mutation = useMutation({
+        mutationFn: async (values: LoginType) => {
+            try {
+                const callbackURL =
+                    urlParams.get("redirect")?.startsWith("/")
+                        ? urlParams.get("redirect")
+                        : "/dashboard/profile";
+
+                const {error} = await signIn.email({
+                    email: values.email,
+                    password: values.password,
+                    callbackURL: callbackURL ?? "/dashboard/profile",
+                });
+
+                if (error) {
+                    toast.error(error.message);
+                } else {
+                    toast.success("Login success");
+                }
+            } catch (err) {
+                console.error(err);
+                toast.error("Unexpected client error during login");
+            }
+        },
+        onError: (err: any) => {
+            toast.error(err.message || "Client error");
+        },
+    });
+
+    const availableProviders: SocialProviderType[] = [];
+
+    if (props.authGoogleEnabled) {
+        availableProviders.push({
+            id: "google",
+            name: "Google",
+            icon: <Icon icon="logos:google-icon" width="25" height="25"/>,
+        });
+    }
+
+    return (
+        <TooltipProvider>
+            <Card>
+                <CardHeader>
+                    <div className="grid gap-2 text-center mb-2">
+                        <h1 className="text-3xl font-bold">Login</h1>
+                        <p className="text-balance text-muted-foreground">
+                            Enter your information below to login
+                        </p>
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    <Form
+                        form={form}
+                        className="flex flex-col gap-4"
+                        onSubmit={async (values) => {
+                            await mutation.mutateAsync(values);
+                        }}
+                    >
+                        <FormField
+                            control={form.control}
+                            name="email"
+                            defaultValue=""
+                            render={({field}) => (
+                                <FormItem>
+                                    <FormLabel>Email</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            autoComplete="email"
+                                            placeholder="example@portabase.io"
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage/>
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="password"
+                            defaultValue=""
+                            render={({field}) => (
+                                <FormItem>
+                                    <div className="flex items-center justify-between">
+                                        <FormLabel>Password</FormLabel>
+                                        <div className="text-center text-sm">
+                                            <Link href="/forgot-password" className="hover:underline">
+                                                Forgot your password ?
+                                            </Link>
+                                        </div>
+
+                                    </div>
+                                    <FormControl>
+                                        <PasswordInput
+                                            autoComplete="current-password"
+                                            placeholder="Your password"
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage/>
+                                </FormItem>
+                            )}
+                        />
+                        <Button type="submit" disabled={mutation.isPending}>
+                            {mutation.isPending ? "Signing in..." : "Sign in"}
+                        </Button>
+                    </Form>
+
+                    {availableProviders.length > 0 && (
+                        <div className="relative my-4 flex items-center justify-center overflow-hidden">
+                            <Separator/>
+                            <div className="px-2 text-center bg-card text-sm">OR</div>
+                            <Separator/>
+                        </div>
+                    )}
+
+                    <SocialAuthButton
+                        callBackURL={urlParams.get("redirect") ?? "/dashboard/profile"}
+                        providers={availableProviders}
+                    />
+
+                    <div className="mt-4 text-center text-sm">
+                        Don&apos;t have an account ?{" "}
+                        <Link href="/register" className="underline">
+                            Sign up
+                        </Link>
+                    </div>
+
+                </CardContent>
+            </Card>
+        </TooltipProvider>
+    );
+};

src/components/wrappers/auth/login/loginForm/LoginForm.tsx

@@ -1,115 +0,0 @@
-"use client";
-
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Form } from "@/components/ui/form";
-import { Button } from "@/components/ui/button";
-import { toast } from "sonner";
-import { useMutation } from "@tanstack/react-query";
-import { TooltipProvider } from "@/components/ui/tooltip";
-import Link from "next/link";
-import { PasswordInput } from "@/components/wrappers/auth/PaswordInput/password-input";
-import { LoginSchema, LoginType } from "@/components/wrappers/auth/login/loginForm/login-form.schema";
-import { SocialAuthButton, SocialProviderType } from "@/components/wrappers/auth/login/buttonAuth/SocialAuthButton";
-import { signIn } from "@/lib/auth/auth-client";
-import { useRouter } from "next/navigation";
-import { Icon } from "@iconify/react";
-
-export type loginFormProps = {
-    defaultValues?: LoginType;
-};
-
-export const LoginForm = (props: loginFormProps) => {
-    const router = useRouter();
-
-    const form = useZodForm({
-        schema: LoginSchema,
-    });
-
-    const mutation = useMutation({
-        mutationFn: async (values: LoginType) => {
-            const { error } = await signIn.email(values, {
-                onSuccess: () => {
-                    toast.success("Login success");
-                    router.push("/dashboard/profile");
-                },
-            });
-            if (error) {
-                toast.error(error.message);
-            }
-        },
-    });
-
-    const availableProviders: SocialProviderType[] = [
-        {
-            id: "google",
-            name: "Google",
-            icon: <Icon icon={"logos:google-icon"} width="25" height="25" />,
-        },
-    ];
-
-    return (
-        <TooltipProvider>
-            <Card>
-                <CardHeader>
-                    <div className="grid gap-2 text-center mb-2">
-                        <h1 className="text-3xl font-bold">Login</h1>
-                        <p className="text-balance text-muted-foreground">Enter your informations below to login</p>
-                    </div>
-                </CardHeader>
-                <CardContent>
-                    <Form
-                        form={form}
-                        className="flex flex-col gap-4"
-                        onSubmit={async (values) => {
-                            await mutation.mutateAsync(values);
-                        }}
-                    >
-                        <FormField
-                            control={form.control}
-                            name="email"
-                            defaultValue=""
-                            render={({ field }) => (
-                                <FormItem>
-                                    <FormLabel>Email</FormLabel>
-                                    <FormControl>
-                                        <Input autoComplete="email webauthn" placeholder="exemple@portabase.io" {...field} />
-                                    </FormControl>
-                                    <FormMessage />
-                                </FormItem>
-                            )}
-                        />
-                        <FormField
-                            control={form.control}
-                            name="password"
-                            defaultValue=""
-                            render={({ field }) => (
-                                <FormItem>
-                                    <div className="flex items-center">
-                                        <FormLabel>Password</FormLabel>
-                                        {/*  <Link href={"/forgot-password"} className="ml-auto inline-block text-sm underline">
-                                            Forgot your password?
-                                        </Link>*/}
-                                    </div>
-                                    <FormControl>
-                                        <PasswordInput autoComplete="current-password webauthn" placeholder="Your password" {...field} />
-                                    </FormControl>
-                                    <FormMessage />
-                                </FormItem>
-                            )}
-                        />
-                        <Button>Sign in</Button>
-                        <div className="mt-4 text-center text-sm">
-                            Don&apos;t have an account?{" "}
-                            <Link href={"/register"} className="underline">
-                                Sign up
-                            </Link>
-                        </div>
-                    </Form>
-                    <SocialAuthButton providers={availableProviders} />
-                </CardContent>
-            </Card>
-        </TooltipProvider>
-    );
-};

src/components/wrappers/auth/login/loginForm/login-form.schema.ts

@@ -1,8 +0,0 @@
-import { z } from "zod";
-
-export const LoginSchema = z.object({
-    email: z.string(),
-    password: z.string(),
-});
-
-export type LoginType = z.infer<typeof LoginSchema>;

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

@@ -1,19 +1,20 @@
 "use client";
 
-import { useRouter } from "next/navigation";
-import { Info } from "lucide-react";
-import { useMutation } from "@tanstack/react-query";
-import { toast } from "sonner";
+import {useRouter} from "next/navigation";
+import {Info} from "lucide-react";
+import {useMutation} from "@tanstack/react-query";
+import {toast} from "sonner";
 
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Form } from "@/components/ui/form";
-import { Button } from "@/components/ui/button";
-import { TooltipProvider, TooltipTrigger, Tooltip, TooltipContent } from "@/components/ui/tooltip";
-import { RegisterSchema, RegisterType } from "@/components/wrappers/auth/register/register-form/register-form.schema";
-import { PasswordInput } from "@/components/wrappers/auth/PaswordInput/password-input";
+import {Card, CardContent, CardHeader} from "@/components/ui/card";
+import {FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm} from "@/components/ui/form";
+import {Input} from "@/components/ui/input";
+import {Form} from "@/components/ui/form";
+import {Button} from "@/components/ui/button";
+import {TooltipProvider, TooltipTrigger, Tooltip, TooltipContent} from "@/components/ui/tooltip";
+import {RegisterSchema, RegisterType} from "@/components/wrappers/auth/register/register-form/register-form.schema";
+import {PasswordInput} from "@/components/ui/password-input";
 import {signUp} from "@/lib/auth/auth-client";
+import Link from "next/link";
 
 export type registerFormProps = {
     defaultValues?: RegisterType;
@@ -29,9 +30,9 @@ export const RegisterForm = (props: registerFormProps) => {
         mutationFn: async (values: RegisterType) => {
             await signUp.email(values, {
                 onSuccess: () => {
-                    toast.success(`Success`);
-                    router.push(`/login`);
+                    toast.success(`Account successfully created`);
                     router.refresh();
+                    router.push(`/login`);
                 },
                 onError: (error) => {
                     console.log(error);
@@ -63,13 +64,13 @@ export const RegisterForm = (props: registerFormProps) => {
                             control={form.control}
                             name="name"
                             defaultValue=""
-                            render={({ field }) => (
+                            render={({field}) => (
                                 <FormItem>
                                     <FormLabel>Name</FormLabel>
                                     <FormControl>
                                         <Input placeholder="Your name" {...field} />
                                     </FormControl>
-                                    <FormMessage />
+                                    <FormMessage/>
                                 </FormItem>
                             )}
                         />
@@ -77,13 +78,13 @@ export const RegisterForm = (props: registerFormProps) => {
                             control={form.control}
                             name="email"
                             defaultValue=""
-                            render={({ field }) => (
+                            render={({field}) => (
                                 <FormItem>
                                     <FormLabel>Email</FormLabel>
                                     <FormControl>
                                         <Input placeholder="exemple@portabase.io" {...field} />
                                     </FormControl>
-                                    <FormMessage />
+                                    <FormMessage/>
                                 </FormItem>
                             )}
                         />
@@ -91,18 +92,19 @@ export const RegisterForm = (props: registerFormProps) => {
                             control={form.control}
                             name="password"
                             defaultValue=""
-                            render={({ field }) => (
+                            render={({field}) => (
                                 <FormItem>
                                     <FormLabel className="flex">
                                         Password
                                         <TooltipProvider>
                                             <Tooltip>
                                                 <TooltipTrigger asChild>
-                                                    <Info className="ml-3" size="15" />
+                                                    <Info className="ml-3" size="15"/>
                                                 </TooltipTrigger>
                                                 <TooltipContent>
                                                     <p>
-                                                        Min. 8 characters, 1 uppercase (A-Z), 1 lowercase (a-z), 1 number (0-9), 1 special character (!, @,
+                                                        Min. 8 characters, 1 uppercase (A-Z), 1 lowercase (a-z), 1
+                                                        number (0-9), 1 special character (!, @,
                                                         etc.)
                                                     </p>
                                                 </TooltipContent>
@@ -112,7 +114,7 @@ export const RegisterForm = (props: registerFormProps) => {
                                     <FormControl>
                                         <PasswordInput placeholder="Your password" {...field} />
                                     </FormControl>
-                                    <FormMessage />
+                                    <FormMessage/>
                                 </FormItem>
                             )}
                         />
@@ -120,17 +122,26 @@ export const RegisterForm = (props: registerFormProps) => {
                             control={form.control}
                             name="confirmPassword"
                             defaultValue=""
-                            render={({ field }) => (
+                            render={({field}) => (
                                 <FormItem>
                                     <FormLabel>Password Confirmation</FormLabel>
                                     <FormControl>
                                         <PasswordInput placeholder="Conform your password" {...field} />
                                     </FormControl>
-                                    <FormMessage />
+                                    <FormMessage/>
                                 </FormItem>
                             )}
                         />
-                        <Button>Sign up</Button>
+                        <Button type="submit" disabled={mutation.isPending}>
+                            Sign up
+                        </Button>
+                        <div className="mt-4 text-center text-sm">
+                            Already have an account ?{" "}
+                            <Link href="/login" className="underline">
+                                Sign in
+                            </Link>
+                        </div>
+
                     </Form>
                 </CardContent>
             </Card>

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

@@ -0,0 +1,94 @@
+"use client";
+
+import {useRouter} from "next/navigation";
+import {useMutation} from "@tanstack/react-query";
+import {Form, FormControl, FormField, FormItem, FormLabel, useZodForm} from "@/components/ui/form";
+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 {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
+import {authClient} from "@/lib/auth/auth-client";
+import {toast} from "sonner";
+
+type ResetPasswordFormProps = {
+    token: string;
+};
+
+export const ResetPasswordForm = ({token}: ResetPasswordFormProps) => {
+
+    const router = useRouter();
+    const form = useZodForm({
+        schema: ResetPasswordSchema,
+    });
+
+    const mutationResetPassword = useMutation({
+        mutationFn: async (data: ResetPasswordType) => {
+
+            await authClient.resetPassword({
+                newPassword: data.password,
+                token,
+            }, {
+                onSuccess: (response) => {
+                    console.log(response);
+                    toast.success("Password changed successfully.");
+                    setTimeout(() => router.push("/"), 1000);
+                },
+                onError: (error) => {
+                    console.error(error);
+                    toast.error(error.error.message);
+                },
+            });
+        },
+    });
+
+    return (
+        <Card>
+            <CardHeader>
+                <div className="grid gap-2 text-center mb-2">
+                    <h1 className="text-3xl font-bold">Reset Password</h1>
+                    <p className="text-balance text-muted-foreground">Fill information bellow to change your
+                        password</p>
+                </div>
+            </CardHeader>
+            <CardContent>
+                <Form
+                    form={form}
+                    className="flex flex-col gap-4"
+                    onSubmit={async (values) => {
+                        await mutationResetPassword.mutateAsync(values);
+                    }}
+                >
+                    <FormField
+                        control={form.control}
+                        name="password"
+                        defaultValue=""
+                        render={({field}) => (
+                            <FormItem>
+                                <PasswordStrengthInput label={"Enter new password"} field={field}/>
+                            </FormItem>
+                        )}
+                    />
+                    <FormField
+                        control={form.control}
+                        name="confirmPassword"
+                        defaultValue=""
+                        render={({field}) => (
+                            <FormItem>
+                                <FormLabel>Confirmation Password</FormLabel>
+                                <FormControl>
+                                    <PasswordInput placeholder={"Confirm password"} {...field}
+                                                   value={field.value ?? ""}/>
+                                </FormControl>
+                            </FormItem>
+                        )}
+                    />
+
+                    <ButtonWithLoading type="submit" isPending={mutationResetPassword.isPending}>
+                        Validate
+                    </ButtonWithLoading>
+                </Form>
+            </CardContent>
+        </Card>
+    );
+};

src/components/wrappers/auth/reset-password/reset-password-schema.ts

@@ -0,0 +1,22 @@
+import {z} from "zod";
+
+const passwordRegex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-])/;
+
+const zPassword = () => z.string().min(8, {message: "New Password too short"}).regex(passwordRegex, {message: "New Password too weak"});
+
+export const ResetPasswordSchema = z
+    .object({
+        password: zPassword(),
+        confirmPassword: zPassword(),
+    })
+    .superRefine(({confirmPassword, password}, ctx) => {
+        if (confirmPassword !== password) {
+            ctx.addIssue({
+                code: "custom",
+                message: "Passwords don't match.",
+                path: ["confirmPassword"],
+            });
+        }
+    });
+
+export type ResetPasswordType = z.infer<typeof ResetPasswordSchema>;

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

@@ -0,0 +1,37 @@
+"use client"
+
+import {useRouter, useSearchParams} from "next/navigation";
+import {ResetPasswordForm} from "@/components/wrappers/auth/reset-password/reset-password-form";
+import {toast} from "sonner";
+import {useEffect} from "react";
+import {LoadingSpinner} from "@/components/wrappers/common/loading/loading-spinner";
+
+export const ResetPasswordSection = () => {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+
+    const token = searchParams.get("token");
+    const error = searchParams.get("error");
+
+    useEffect(() => {
+        if (error || !token) {
+            if (error == "INVALID_TOKEN") {
+                toast.error("Invalid reset token");
+            } else {
+                toast.error("An error occurred.");
+            }
+            setTimeout(() => router.push("/"), 1000);
+        }
+    }, [error, token, router]);
+
+
+    if (!token) return (
+        <div className="w-full h-full flex flex-col items-center justify-center">
+            <LoadingSpinner size={50}/>
+        </div>
+    );
+
+    return (
+        <ResetPasswordForm token={token}/>
+    )
+}

src/components/wrappers/common/bread-crumbs/bread-crumbs.tsx

@@ -0,0 +1,95 @@
+"use client"
+import {
+    Breadcrumb,
+    BreadcrumbItem, BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {usePathname} from "next/navigation";
+import Link from "next/link";
+import {useIsMobile} from "@/hooks/use-mobile";
+import {capitalizeFirstLetter, isUUID} from "@/utils/text";
+
+
+export function useBreadCrumbs() {
+    const pathname = usePathname();
+
+    const route_history = pathname
+        .split("/")
+        .filter((x: any) => x && x.length > 0);
+
+    const breadcrumb_routes = route_history.reduce(
+        (acc: { name: string; path: string }[], route) => {
+            const prev_path = acc[acc.length - 1]?.path ?? "";
+            acc.push({name: route, path: `${prev_path}/${route}`});
+            return acc;
+        },
+        [],
+    );
+    return {breadcrumb_routes};
+}
+
+
+interface BreadCrumbsProps {
+}
+
+
+export function BreadCrumbsWrapper() {
+    const isMobile = useIsMobile()
+    return (
+        <>
+            {!isMobile ? <BreadCrumbs/> : null}
+        </>
+    )
+}
+
+const FORBIDDEN_LINKS = ["organization", "dashboard", "database", "admin", "settings", "notifications"];
+
+
+export function BreadCrumbs({}: BreadCrumbsProps) {
+    const {breadcrumb_routes} = useBreadCrumbs();
+    if (breadcrumb_routes.length < 2) return null;
+    return (
+        <div className="flex w-full flex-wrap px-3 md:justify-end">
+            <Breadcrumb>
+                <BreadcrumbList>
+                    {breadcrumb_routes.map((crumb: any) => {
+                        const label = isUUID(crumb.name) ? "details" : crumb.name;
+
+                        const isLast = breadcrumb_routes.length - 1 === breadcrumb_routes.indexOf(crumb);
+                        const isForbidden = FORBIDDEN_LINKS.includes(crumb.name.toLowerCase());
+
+                        return (
+                            <div className="flex items-center gap-2" key={crumb.path}>
+                                <BreadcrumbItem key={crumb.path}>
+                                    {isLast ? (
+                                        <BreadcrumbPage>{capitalizeFirstLetter(label)}</BreadcrumbPage>
+                                    ) : (
+                                        <> {isForbidden ?
+                                            <BreadcrumbLink asChild>
+                                                <Link
+                                                    href={crumb.path}
+                                                    onClick={(e) => e.preventDefault()}
+                                                    className="cursor-not-allowed "
+                                                >
+                                                    {capitalizeFirstLetter(label)}
+                                                </Link>
+                                            </BreadcrumbLink>
+                                            :
+                                            <BreadcrumbLink asChild>
+                                                <Link href={crumb.path}>{capitalizeFirstLetter(label)}</Link>
+                                            </BreadcrumbLink>
+                                        }
+                                        </>
+                                    )}
+                                </BreadcrumbItem>
+                                {!isLast && <BreadcrumbSeparator className="hidden md:block"/>}
+                            </div>
+                        );
+                    })}
+                </BreadcrumbList>
+            </Breadcrumb>
+        </div>
+    );
+}

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

@@ -0,0 +1,18 @@
+"use client";
+import React from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+
+type BackButtonProps = React.ComponentProps<typeof Button> & {
+    children: React.ReactNode;
+};
+
+export default function BackButton({ children, ...props }: BackButtonProps) {
+    const router = useRouter();
+
+    return (
+        <Button onClick={() => router.back()} aria-label={children?.toString()} {...props}>
+            {children}
+        </Button>
+    );
+}

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

@@ -1,45 +1,161 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { useState } from "react";
-import { Loader2 } from "lucide-react";
-
-export type VariantButton = {
-    secondary: string;
-    default: string;
-    outline: string;
-    ghost: string;
-    link: string;
-    destructive: string;
-};
+// "use client";
+//
+// import { Button } from "@/components/ui/button";
+// import { useState } from "react";
+// import { Loader2 } from "lucide-react";
+//
+// export type VariantButton = {
+//     secondary: string;
+//     default: string;
+//     outline: string;
+//     ghost: string;
+//     link: string;
+//     destructive: string;
+// };
+//
+// export type ButtonWithConfirmProps = {
+//     icon?: any;
+//     text: string;
+//     variant?: keyof VariantButton;
+//     className?: string;
+//     onClick?: () => void;
+//     isPending?: boolean;
+// };
+//
+// export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
+//     const [isConfirming, setIsConfirming] = useState(false);
+//
+//     return (
+//         <Button
+//             onClick={() => {
+//                 if (isConfirming && props.onClick) {
+//                     props.onClick();
+//                 } else {
+//                     setIsConfirming(true);
+//                 }
+//             }}
+//             variant={props.variant ? props.variant : "default"}
+//             className={props.className}
+//         >
+//             {props.isPending && <Loader2 className="animate-spin mr-4" size={16} />}
+//             {isConfirming ? "Are you sure ?" : `${props.text}`}
+//             <>{props.icon ? props.icon : null}</>
+//         </Button>
+//     );
+// };
+"use client"
+import {Button, ButtonVariantsProps} from "@/components/ui/button";
+import {useState} from "react";
+import {Loader2} from "lucide-react";
+import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
+import {cn} from "@/lib/utils";
+import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
 
 export type ButtonWithConfirmProps = {
-    icon?: any;
-    text: string;
-    variant?: keyof VariantButton;
-    className?: string;
-    onClick?: () => void;
+    title: string;
+    description: string;
+    button: {
+        main: {
+            className?: string;
+            text?: string;
+            icon?: any;
+            variant?: ButtonVariantsProps["variant"];
+            size?: ButtonVariantsProps["size"];
+            disabled?: boolean;
+            tooltipText?: string;
+        };
+        confirm: {
+            className?: string;
+            text: string;
+            icon?: any;
+            variant?: ButtonVariantsProps["variant"];
+            size?: ButtonVariantsProps["size"];
+            onClick?: () => void;
+        };
+        cancel: {
+            className?: string;
+            text: string;
+            icon?: any;
+            variant?: ButtonVariantsProps["variant"];
+            size?: ButtonVariantsProps["size"];
+            onClick?: () => void;
+        };
+    };
     isPending?: boolean;
 };
 
+
 export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
     const [isConfirming, setIsConfirming] = useState(false);
 
     return (
-        <Button
-            onClick={() => {
-                if (isConfirming && props.onClick) {
-                    props.onClick();
-                } else {
-                    setIsConfirming(true);
-                }
-            }}
-            variant={props.variant ? props.variant : "default"}
-            className={props.className}
-        >
-            {props.isPending && <Loader2 className="animate-spin mr-4" size={16} />}
-            {isConfirming ? "Are you sure ?" : `${props.text}`}
-            <>{props.icon ? props.icon : null}</>
-        </Button>
+        <Popover open={isConfirming} onOpenChange={!props.button.main.disabled ? setIsConfirming : undefined}>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <PopoverTrigger asChild>
+                        <span
+                            className={cn(
+                                "inline-flex",
+                                props.button.main.disabled ? "cursor-not-allowed" : ""
+                            )}
+                            role="button">
+                          <Button
+                              disabled={!!props.button.main.disabled}
+                              variant={props.button.main.variant ?? "default"}
+                              size={props.button.main.size ?? "default"}
+                              className={props.button.main.className}
+                              onClick={() => {
+                                  if (!props.button.main.disabled) setIsConfirming(true);
+                              }}
+                          >
+                            {props.button.main.icon}
+                              {props.button.main.text && <span>{props.button.main.text}</span>}
+                          </Button>
+                        </span>
+                    </PopoverTrigger>
+                </TooltipTrigger>
+                {props.button.main.tooltipText && props.button.main.disabled && (
+                    <TooltipContent>
+                        <p>{props.button.main.tooltipText}</p>
+                    </TooltipContent>
+                )}
+            </Tooltip>
+            <PopoverContent className="w-80">
+                <div className="grid gap-4">
+                    <div className="space-y-2">
+                        <h4 className="font-medium leading-none">{props.title}</h4>
+                        <p className="text-sm text-muted-foreground">{props.description}</p>
+                    </div>
+                    <div className="grid gap-2">
+                        <Button
+                            onClick={() => {
+                                if (isConfirming && props.button.confirm.onClick) {
+                                    props.button.confirm.onClick();
+                                    setIsConfirming(false);
+                                } else {
+                                    setIsConfirming(true);
+                                }
+                            }}
+                            variant={props.button.confirm.variant ? props.button.confirm.variant : "default"}
+                            size={props.button.main.size ?? "default"}
+                            className={cn(props.button.main.className, "w-full")}
+                        >
+                            {props.isPending && <Loader2 className="animate-spin mr-4" size={16}/>}
+                            {props.button.confirm.icon ? props.button.confirm.icon : null}
+                            <span>{props.button.confirm.text}</span>
+                        </Button>
+                        <Button
+                            variant={props.button.cancel.variant ? props.button.cancel.variant : "default"}
+                            onClick={props.button.cancel.onClick ? () => props.button.cancel.onClick!() : () => setIsConfirming(false)}
+                            className={cn(props.button.main.className, "w-full")}
+                            size={props.button.main.size ?? "default"}
+                        >
+                            Cancel
+                        </Button>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
     );
 };
+