Merge pull request #219 from kdurek/feat/refactor-format-and-lint

feat: update configs

.github/workflows/pull-request.yml

@@ -2,7 +2,7 @@ name: Pull request
 on:
   pull_request:
     branches:
-      - main 
+      - main
       - canary
 
   push:
@@ -12,24 +12,37 @@ on:
 jobs:
   build-app:
     if: github.event_name == 'pull_request'
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     strategy:
       matrix:
         node-version: [18.18.0]
     steps:
-    - uses: actions/checkout@v3
-    - uses: pnpm/action-setup@v3
+    - name: Check out the code
+      uses: actions/checkout@v4
+
+    - name: Setup pnpm
+      uses: pnpm/action-setup@v4
       with:
         version: 8
+
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'pnpm'
+
     - name: Install dependencies
       run: pnpm install
+
+    - name: Run format and lint
+      run: pnpm biome ci
+
+    - name: Run type check
+      run: pnpm typecheck
+
     - name: Run Build
       run: pnpm build
+
     - name: Run Tests
       run: pnpm run test
 
@@ -38,7 +51,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out the code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
@@ -56,4 +69,4 @@ jobs:
       - name: Build and push Docker image using custom script
         run: |
           chmod +x ./docker/push.sh
-          ./docker/push.sh ${{ github.ref_name == 'canary' && 'canary' || '' }}
+          ./docker/push.sh ${{ github.ref_name == 'canary' && 'canary' || '' }}

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm lint-staged

__test__/compose/compose.test.ts

@@ -1,7 +1,7 @@
-import { expect, test } from "vitest";
-import { load } from "js-yaml";
 import { addPrefixToAllProperties } from "@/server/utils/docker/compose";
 import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
 
 const composeFile1 = `
 version: "3.8"

__test__/compose/network/network-service.test.ts

@@ -79,10 +79,11 @@ test("Add prefix to networks in services with aliases", () => {
 		`frontend-${prefix}`,
 	);
 
-	const networkConfig =
-		actualComposeData?.services?.api?.networks[`frontend-${prefix}`];
-	expect(networkConfig).toBeDefined();
-	expect(networkConfig?.aliases).toContain("api");
+	const networkConfig = actualComposeData?.services?.api?.networks as {
+		[key: string]: { aliases?: string[] };
+	};
+	expect(networkConfig[`frontend-${prefix}`]).toBeDefined();
+	expect(networkConfig[`frontend-${prefix}`]?.aliases).toContain("api");
 
 	expect(actualComposeData.services?.api?.networks).not.toHaveProperty(
 		"frontend-ash",
@@ -169,7 +170,9 @@ test("Add prefix to networks in services (combined case)", () => {
 	);
 
 	// Caso 2: Objeto con aliases
-	const apiNetworks = actualComposeData.services?.api?.networks;
+	const apiNetworks = actualComposeData.services?.api?.networks as {
+		[key: string]: unknown;
+	};
 	expect(apiNetworks).toHaveProperty(`frontend-${prefix}`);
 	expect(apiNetworks[`frontend-${prefix}`]).toBeDefined();
 	expect(apiNetworks).not.toHaveProperty("frontend");

__test__/compose/network/network.test.ts

@@ -76,9 +76,11 @@ test("Add prefix to networks in services and root (combined case)", () => {
 	);
 
 	// Caso 2: Objeto con aliases
-	const apiNetworks = actualComposeData.services?.api?.networks;
+	const apiNetworks = actualComposeData.services?.api?.networks as {
+		[key: string]: { aliases?: string[] };
+	};
 	expect(apiNetworks).toHaveProperty(`frontend-${prefix}`);
-	expect(apiNetworks[`frontend-${prefix}`]?.aliases).toContain("api");
+	expect(apiNetworks?.[`frontend-${prefix}`]?.aliases).toContain("api");
 	expect(apiNetworks).not.toHaveProperty("frontend");
 
 	// Caso 3: Objeto con redes simples

__test__/compose/secrets/secret-root.test.ts

@@ -1,8 +1,8 @@
-import { expect, test } from "vitest";
-import { load, dump } from "js-yaml";
 import { generateRandomHash } from "@/server/utils/docker/compose";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
 import { addPrefixToSecretsRoot } from "@/server/utils/docker/compose/secrets";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { dump, load } from "js-yaml";
+import { expect, test } from "vitest";
 
 test("Generate random hash with 8 characters", () => {
 	const hash = generateRandomHash();

__test__/compose/service/service-container-name.test.ts

@@ -42,7 +42,7 @@ test("Add prefix to service names with container_name in compose file", () => {
 	const actualComposeData = { ...composeData, services: updatedComposeData };
 
 	// Verificar que el nombre del contenedor ha cambiado correctamente
-	expect(actualComposeData.services[`web-${prefix}`].container_name).toBe(
+	expect(actualComposeData.services?.[`web-${prefix}`]?.container_name).toBe(
 		`web_container-${prefix}`,
 	);
 	// Verificar que la nueva clave del servicio tiene el prefijo y la vieja clave no existe
@@ -50,10 +50,10 @@ test("Add prefix to service names with container_name in compose file", () => {
 	expect(actualComposeData.services).not.toHaveProperty("web");
 
 	// Verificar que la configuración de la imagen sigue igual
-	expect(actualComposeData.services[`web-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`web-${prefix}`]?.image).toBe(
 		"nginx:latest",
 	);
-	expect(actualComposeData.services[`api-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
 		"myapi:latest",
 	);
 });

__test__/compose/service/service-depends-on.test.ts

@@ -51,30 +51,30 @@ test("Add prefix to service names with depends_on (array) in compose file", () =
 	expect(actualComposeData.services).not.toHaveProperty("web");
 
 	// Verificar que la configuración de la imagen sigue igual
-	expect(actualComposeData.services[`web-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`web-${prefix}`]?.image).toBe(
 		"nginx:latest",
 	);
-	expect(actualComposeData.services[`api-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
 		"myapi:latest",
 	);
 
 	// Verificar que los nombres en depends_on tienen el prefijo
-	expect(actualComposeData.services[`web-${prefix}`].depends_on).toContain(
+	expect(actualComposeData.services?.[`web-${prefix}`]?.depends_on).toContain(
 		`db-${prefix}`,
 	);
-	expect(actualComposeData.services[`web-${prefix}`].depends_on).toContain(
+	expect(actualComposeData.services?.[`web-${prefix}`]?.depends_on).toContain(
 		`api-${prefix}`,
 	);
 
 	// Verificar que los servicios `db` y `api` también tienen el prefijo
 	expect(actualComposeData.services).toHaveProperty(`db-${prefix}`);
 	expect(actualComposeData.services).not.toHaveProperty("db");
-	expect(actualComposeData.services[`db-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`db-${prefix}`]?.image).toBe(
 		"postgres:latest",
 	);
 	expect(actualComposeData.services).toHaveProperty(`api-${prefix}`);
 	expect(actualComposeData.services).not.toHaveProperty("api");
-	expect(actualComposeData.services[`api-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
 		"myapi:latest",
 	);
 });
@@ -121,16 +121,16 @@ test("Add prefix to service names with depends_on (object) in compose file", ()
 	expect(actualComposeData.services).not.toHaveProperty("web");
 
 	// Verificar que la configuración de la imagen sigue igual
-	expect(actualComposeData.services[`web-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`web-${prefix}`]?.image).toBe(
 		"nginx:latest",
 	);
-	expect(actualComposeData.services[`api-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
 		"myapi:latest",
 	);
 
 	// Verificar que los nombres en depends_on tienen el prefijo
-	const webDependsOn = actualComposeData.services[`web-${prefix}`]
-		.depends_on as Record<string, any>;
+	const webDependsOn = actualComposeData.services?.[`web-${prefix}`]
+		?.depends_on as Record<string, any>;
 	expect(webDependsOn).toHaveProperty(`db-${prefix}`);
 	expect(webDependsOn).toHaveProperty(`api-${prefix}`);
 	expect(webDependsOn[`db-${prefix}`].condition).toBe("service_healthy");
@@ -139,12 +139,12 @@ test("Add prefix to service names with depends_on (object) in compose file", ()
 	// Verificar que los servicios `db` y `api` también tienen el prefijo
 	expect(actualComposeData.services).toHaveProperty(`db-${prefix}`);
 	expect(actualComposeData.services).not.toHaveProperty("db");
-	expect(actualComposeData.services[`db-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`db-${prefix}`]?.image).toBe(
 		"postgres:latest",
 	);
 	expect(actualComposeData.services).toHaveProperty(`api-${prefix}`);
 	expect(actualComposeData.services).not.toHaveProperty("api");
-	expect(actualComposeData.services[`api-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
 		"myapi:latest",
 	);
 });

__test__/compose/service/service-extends.test.ts

@@ -49,22 +49,22 @@ test("Add prefix to service names with extends (string) in compose file", () =>
 	expect(actualComposeData.services).not.toHaveProperty("web");
 
 	// Verificar que la configuración de la imagen sigue igual
-	expect(actualComposeData.services[`web-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`web-${prefix}`]?.image).toBe(
 		"nginx:latest",
 	);
-	expect(actualComposeData.services[`api-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
 		"myapi:latest",
 	);
 
 	// Verificar que el nombre en extends tiene el prefijo
-	expect(actualComposeData.services[`web-${prefix}`].extends).toBe(
+	expect(actualComposeData.services?.[`web-${prefix}`]?.extends).toBe(
 		`base_service-${prefix}`,
 	);
 
 	// Verificar que el servicio `base_service` también tiene el prefijo
 	expect(actualComposeData.services).toHaveProperty(`base_service-${prefix}`);
 	expect(actualComposeData.services).not.toHaveProperty("base_service");
-	expect(actualComposeData.services[`base_service-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`base_service-${prefix}`]?.image).toBe(
 		"base:latest",
 	);
 });
@@ -109,23 +109,23 @@ test("Add prefix to service names with extends (object) in compose file", () =>
 	expect(actualComposeData.services).not.toHaveProperty("web");
 
 	// Verificar que la configuración de la imagen sigue igual
-	expect(actualComposeData.services[`web-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`web-${prefix}`]?.image).toBe(
 		"nginx:latest",
 	);
-	expect(actualComposeData.services[`api-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
 		"myapi:latest",
 	);
 
 	// Verificar que el nombre en extends.service tiene el prefijo
-	const webExtends = actualComposeData.services[`web-${prefix}`].extends;
+	const webExtends = actualComposeData.services?.[`web-${prefix}`]?.extends;
 	if (typeof webExtends !== "string") {
-		expect(webExtends.service).toBe(`base_service-${prefix}`);
+		expect(webExtends?.service).toBe(`base_service-${prefix}`);
 	}
 
 	// Verificar que el servicio `base_service` también tiene el prefijo
 	expect(actualComposeData.services).toHaveProperty(`base_service-${prefix}`);
 	expect(actualComposeData.services).not.toHaveProperty("base_service");
-	expect(actualComposeData.services[`base_service-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`base_service-${prefix}`]?.image).toBe(
 		"base:latest",
 	);
 });

__test__/compose/service/service-links.test.ts

@@ -50,27 +50,27 @@ test("Add prefix to service names with links in compose file", () => {
 	expect(actualComposeData.services).not.toHaveProperty("web");
 
 	// Verificar que la configuración de la imagen sigue igual
-	expect(actualComposeData.services[`web-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`web-${prefix}`]?.image).toBe(
 		"nginx:latest",
 	);
-	expect(actualComposeData.services[`api-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
 		"myapi:latest",
 	);
 
 	// Verificar que los nombres en links tienen el prefijo
-	expect(actualComposeData.services[`web-${prefix}`].links).toContain(
+	expect(actualComposeData.services?.[`web-${prefix}`]?.links).toContain(
 		`db-${prefix}`,
 	);
 
 	// Verificar que los servicios `db` y `api` también tienen el prefijo
 	expect(actualComposeData.services).toHaveProperty(`db-${prefix}`);
 	expect(actualComposeData.services).not.toHaveProperty("db");
-	expect(actualComposeData.services[`db-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`db-${prefix}`]?.image).toBe(
 		"postgres:latest",
 	);
 	expect(actualComposeData.services).toHaveProperty(`api-${prefix}`);
 	expect(actualComposeData.services).not.toHaveProperty("api");
-	expect(actualComposeData.services[`api-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
 		"myapi:latest",
 	);
 });

__test__/compose/service/sevice-volumes-from.test.ts

@@ -54,23 +54,25 @@ test("Add prefix to service names with volumes_from in compose file", () => {
 	expect(actualComposeData.services).not.toHaveProperty("web");
 
 	// Verificar que la configuración de la imagen sigue igual
-	expect(actualComposeData.services[`web-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`web-${prefix}`]?.image).toBe(
 		"nginx:latest",
 	);
-	expect(actualComposeData.services[`api-${prefix}`].image).toBe(
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
 		"myapi:latest",
 	);
 
 	// Verificar que los nombres en volumes_from tienen el prefijo
-	expect(actualComposeData.services[`web-${prefix}`].volumes_from).toContain(
+	expect(actualComposeData.services?.[`web-${prefix}`]?.volumes_from).toContain(
 		`shared-${prefix}`,
 	);
-	expect(actualComposeData.services[`api-${prefix}`].volumes_from).toContain(
+	expect(actualComposeData.services?.[`api-${prefix}`]?.volumes_from).toContain(
 		`shared-${prefix}`,
 	);
 
 	// Verificar que el servicio shared también tiene el prefijo
 	expect(actualComposeData.services).toHaveProperty(`shared-${prefix}`);
 	expect(actualComposeData.services).not.toHaveProperty("shared");
-	expect(actualComposeData.services[`shared-${prefix}`].image).toBe("busybox");
+	expect(actualComposeData.services?.[`shared-${prefix}`]?.image).toBe(
+		"busybox",
+	);
 });

__test__/compose/volume/volume-2.test.ts

@@ -1,7 +1,7 @@
 import { generateRandomHash } from "@/server/utils/docker/compose";
 import {
-	addPrefixToVolumesRoot,
 	addPrefixToAllVolumes,
+	addPrefixToVolumesRoot,
 } from "@/server/utils/docker/compose/volume";
 import type { ComposeSpecification } from "@/server/utils/docker/types";
 import { load } from "js-yaml";

__test__/vitest.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from "vitest/config";
 import tsconfigPaths from "vite-tsconfig-paths";
+import { defineConfig } from "vitest/config";
 
 export default defineConfig({
 	plugins: [

biome.json

@@ -1,17 +1,34 @@
 {
-    "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
-    "linter":{
-       "rules": {
-           "correctness":{
-            "useExhaustiveDependencies": "off"
-           },
-           "suspicious":{
-            "noArrayIndexKey": "off"
-           },
-           "a11y":{
-            "noSvgWithoutTitle":"off"
-           }
-       }
-    }
-
-}
+	"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+	"files": {
+		"ignore": ["node_modules/**", ".next/**", "drizzle/**", ".docker"]
+	},
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"rules": {
+			"complexity": {
+				"noUselessCatch": "off",
+				"noBannedTypes": "off"
+			},
+			"correctness": {
+				"useExhaustiveDependencies": "off",
+				"noUnsafeOptionalChaining": "off"
+			},
+			"style": {
+				"noNonNullAssertion": "off"
+			},
+			"suspicious": {
+				"noArrayIndexKey": "off",
+				"noExplicitAny": "off",
+				"noRedeclare": "off"
+			},
+			"a11y": {
+				"noSvgWithoutTitle": "off",
+				"useKeyWithClickEvents": "off",
+				"useAriaPropsForRole": "off"
+			}
+		}
+	}
+}

components.json

@@ -1,17 +1,17 @@
 {
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "styles/globals.css",
-    "baseColor": "zinc",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils"
-  }
-}
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "default",
+	"rsc": false,
+	"tsx": true,
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "styles/globals.css",
+		"baseColor": "zinc",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils"
+	}
+}

components/auth/login-2fa.tsx

@@ -10,19 +10,19 @@ import {
 } from "@/components/ui/form";
 
 import { CardTitle } from "@/components/ui/card";
-import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle } from "lucide-react";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import {
 	InputOTP,
 	InputOTPGroup,
 	InputOTPSlot,
 } from "@/components/ui/input-otp";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle } from "lucide-react";
 import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 const Login2FASchema = z.object({
 	pin: z.string().min(6, {

components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx

@@ -1,3 +1,5 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -17,21 +19,19 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { api } from "@/utils/api";
-import { AlertBlock } from "@/components/shared/alert-block";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-import { HelpCircle, Settings } from "lucide-react";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { CodeEditor } from "@/components/shared/code-editor";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { HelpCircle, Settings } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 const HealthCheckSwarmSchema = z
 	.object({

components/dashboard/application/advanced/cluster/show-cluster-settings.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -6,8 +7,6 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { api } from "@/utils/api";
-import { z } from "zod";
 import {
 	Form,
 	FormControl,
@@ -16,11 +15,6 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { toast } from "sonner";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { useEffect } from "react";
-import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
 	Select,
@@ -31,10 +25,16 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import Link from "next/link";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { Server } from "lucide-react";
+import Link from "next/link";
+import React from "react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AddSwarmSettings } from "./modify-swarm-settings";
-import { AlertBlock } from "@/components/shared/alert-block";
 
 interface Props {
 	applicationId: string;

components/dashboard/application/advanced/general/add-command.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -6,8 +6,6 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { api } from "@/utils/api";
-import { z } from "zod";
 import {
 	Form,
 	FormControl,
@@ -16,12 +14,14 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { toast } from "sonner";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { useEffect } from "react";
-import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 interface Props {
 	applicationId: string;
 }

components/dashboard/application/advanced/ports/add-port.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -17,13 +18,6 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { api } from "@/utils/api";
-import { AlertBlock } from "@/components/shared/alert-block";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { PlusIcon } from "lucide-react";
 import {
 	Select,
 	SelectContent,
@@ -31,6 +25,12 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import { z } from "zod";
 
 const AddPortSchema = z.object({

components/dashboard/application/advanced/ports/show-port.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { AlertBlock } from "@/components/shared/alert-block";
 import {
 	Card,
 	CardContent,
@@ -8,10 +8,10 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { Rss } from "lucide-react";
+import React from "react";
 import { AddPort } from "./add-port";
 import { DeletePort } from "./delete-port";
 import { UpdatePort } from "./update-port";
-import { AlertBlock } from "@/components/shared/alert-block";
 interface Props {
 	applicationId: string;
 }

components/dashboard/application/advanced/ports/update-port.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -17,14 +18,6 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { api } from "@/utils/api";
-import { AlertBlock } from "@/components/shared/alert-block";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon, Pencil } from "lucide-react";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import {
 	Select,
 	SelectContent,
@@ -32,6 +25,13 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon, Pencil } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 const UpdatePortSchema = z.object({
 	publishedPort: z.number().int().min(1).max(65535),

components/dashboard/application/advanced/redirects/add-redirect.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -11,22 +12,21 @@ import {
 import {
 	Form,
 	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
-	FormDescription,
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
-import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { PlusIcon } from "lucide-react";
 import { z } from "zod";
-import { Switch } from "@/components/ui/switch";
 
 const AddRedirectchema = z.object({
 	regex: z.string().min(1, "Regex required"),

components/dashboard/application/advanced/redirects/show-redirects.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
 	Card,
 	CardContent,
@@ -8,6 +7,7 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { Split } from "lucide-react";
+import React from "react";
 import { AddRedirect } from "./add-redirect";
 import { DeleteRedirect } from "./delete-redirect";
 import { UpdateRedirect } from "./update-redirect";

components/dashboard/application/advanced/redirects/update-redirect.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -11,22 +12,21 @@ import {
 import {
 	Form,
 	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
-	FormDescription,
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
-import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PenBoxIcon, Pencil } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { Switch } from "@/components/ui/switch";
 const UpdateRedirectSchema = z.object({
 	regex: z.string().min(1, "Regex required"),
 	permanent: z.boolean().default(false),

components/dashboard/application/advanced/security/add-security.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -18,12 +19,11 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { PlusIcon } from "lucide-react";
 import { z } from "zod";
 
 const AddSecuritychema = z.object({

components/dashboard/application/advanced/security/show-security.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
 	Card,
 	CardContent,
@@ -8,6 +7,7 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { LockKeyhole } from "lucide-react";
+import React from "react";
 import { AddSecurity } from "./add-security";
 import { DeleteSecurity } from "./delete-security";
 import { UpdateSecurity } from "./update-security";

components/dashboard/application/advanced/security/update-security.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -18,7 +19,6 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PenBoxIcon, Pencil } from "lucide-react";
 import { useEffect } from "react";

components/dashboard/application/advanced/show-application-advanced-settings.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -21,7 +22,6 @@ import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { AlertBlock } from "@/components/shared/alert-block";
 
 const addResourcesApplication = z.object({
 	memoryReservation: z.number().nullable().optional(),

components/dashboard/application/advanced/traefik/show-traefik-config.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { CodeEditor } from "@/components/shared/code-editor";
 import {
 	Card,
 	CardContent,
@@ -8,8 +8,8 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { File } from "lucide-react";
+import React from "react";
 import { UpdateTraefikConfig } from "./update-traefik-config";
-import { CodeEditor } from "@/components/shared/code-editor";
 interface Props {
 	applicationId: string;
 }

components/dashboard/application/advanced/traefik/update-traefik-config.tsx

@@ -1,3 +1,5 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -17,14 +19,12 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { api } from "@/utils/api";
-import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
+import jsyaml from "js-yaml";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import jsyaml from "js-yaml";
-import { CodeEditor } from "@/components/shared/code-editor";
 
 const UpdateTraefikConfigSchema = z.object({
 	traefikConfig: z.string(),
@@ -110,12 +110,15 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 	};
 
 	return (
-		<Dialog open={open} onOpenChange={(open) => {
-			setOpen(open)
-			if (!open) {
-				form.reset();
-			}
-		}}>
+		<Dialog
+			open={open}
+			onOpenChange={(open) => {
+				setOpen(open);
+				if (!open) {
+					form.reset();
+				}
+			}}
+		>
 			<DialogTrigger asChild>
 				<Button isLoading={isLoading}>Modify</Button>
 			</DialogTrigger>

components/dashboard/application/advanced/volumes/add-volumes.tsx

@@ -1,8 +1,4 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import type React from "react";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
+import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
@@ -22,12 +18,16 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Button } from "@/components/ui/button";
-import { PlusIcon } from "lucide-react";
 import { Textarea } from "@/components/ui/textarea";
-import { api } from "@/utils/api";
-import { toast } from "sonner";
 import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon } from "lucide-react";
+import type React from "react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 interface Props {
 	serviceId: string;
 	serviceType:

components/dashboard/application/advanced/volumes/delete-volume.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -13,6 +12,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
 import { TrashIcon } from "lucide-react";
+import React from "react";
 import { toast } from "sonner";
 
 interface Props {

components/dashboard/application/advanced/volumes/show-volumes.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { AlertBlock } from "@/components/shared/alert-block";
 import {
 	Card,
 	CardContent,
@@ -8,10 +8,10 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { AlertTriangle, Package } from "lucide-react";
+import React from "react";
 import { AddVolumes } from "./add-volumes";
 import { DeleteVolume } from "./delete-volume";
 import { UpdateVolume } from "./update-volume";
-import { AlertBlock } from "@/components/shared/alert-block";
 interface Props {
 	applicationId: string;
 }

components/dashboard/application/advanced/volumes/update-volume.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -17,15 +18,14 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
-import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Pencil } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { Textarea } from "@/components/ui/textarea";
 
 const mountSchema = z.object({
 	mountPath: z.string().min(1, "Mount path required"),

components/dashboard/application/build/show.tsx

@@ -1,213 +1,213 @@
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Cog } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { Button } from "@/components/ui/button";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { toast } from "sonner";
-import { Input } from "@/components/ui/input";
+import { z } from "zod";
 
 enum BuildType {
-  dockerfile = "dockerfile",
-  heroku_buildpacks = "heroku_buildpacks",
-  paketo_buildpacks = "paketo_buildpacks",
-  nixpacks = "nixpacks",
+	dockerfile = "dockerfile",
+	heroku_buildpacks = "heroku_buildpacks",
+	paketo_buildpacks = "paketo_buildpacks",
+	nixpacks = "nixpacks",
 }
 
 const mySchema = z.discriminatedUnion("buildType", [
-  z.object({
-    buildType: z.literal("dockerfile"),
-    dockerfile: z
-      .string({
-        required_error: "Dockerfile path is required",
-        invalid_type_error: "Dockerfile path is required",
-      })
-      .min(1, "Dockerfile required"),
-  }),
-  z.object({
-    buildType: z.literal("heroku_buildpacks"),
-  }),
-  z.object({
-    buildType: z.literal("paketo_buildpacks"),
-  }),
-  z.object({
-    buildType: z.literal("nixpacks"),
-  }),
+	z.object({
+		buildType: z.literal("dockerfile"),
+		dockerfile: z
+			.string({
+				required_error: "Dockerfile path is required",
+				invalid_type_error: "Dockerfile path is required",
+			})
+			.min(1, "Dockerfile required"),
+	}),
+	z.object({
+		buildType: z.literal("heroku_buildpacks"),
+	}),
+	z.object({
+		buildType: z.literal("paketo_buildpacks"),
+	}),
+	z.object({
+		buildType: z.literal("nixpacks"),
+	}),
 ]);
 
 type AddTemplate = z.infer<typeof mySchema>;
 interface Props {
-  applicationId: string;
+	applicationId: string;
 }
 
 export const ShowBuildChooseForm = ({ applicationId }: Props) => {
-  const { mutateAsync, isLoading } =
-    api.application.saveBuildType.useMutation();
-  const { data, refetch } = api.application.one.useQuery(
-    {
-      applicationId,
-    },
-    {
-      enabled: !!applicationId,
-    },
-  );
+	const { mutateAsync, isLoading } =
+		api.application.saveBuildType.useMutation();
+	const { data, refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{
+			enabled: !!applicationId,
+		},
+	);
 
-  const form = useForm<AddTemplate>({
-    defaultValues: {
-      buildType: BuildType.nixpacks,
-    },
-    resolver: zodResolver(mySchema),
-  });
+	const form = useForm<AddTemplate>({
+		defaultValues: {
+			buildType: BuildType.nixpacks,
+		},
+		resolver: zodResolver(mySchema),
+	});
 
-  const buildType = form.watch("buildType");
-  useEffect(() => {
-    if (data) {
-      // TODO: refactor this
-      if (data.buildType === "dockerfile") {
-        form.reset({
-          buildType: data.buildType,
-          ...(data.buildType && {
-            dockerfile: data.dockerfile || "",
-          }),
-        });
-      } else {
-        form.reset({
-          buildType: data.buildType,
-        });
-      }
-    }
-  }, [form.formState.isSubmitSuccessful, form.reset, data, form]);
+	const buildType = form.watch("buildType");
+	useEffect(() => {
+		if (data) {
+			// TODO: refactor this
+			if (data.buildType === "dockerfile") {
+				form.reset({
+					buildType: data.buildType,
+					...(data.buildType && {
+						dockerfile: data.dockerfile || "",
+					}),
+				});
+			} else {
+				form.reset({
+					buildType: data.buildType,
+				});
+			}
+		}
+	}, [form.formState.isSubmitSuccessful, form.reset, data, form]);
 
-  const onSubmit = async (data: AddTemplate) => {
-    await mutateAsync({
-      applicationId,
-      buildType: data.buildType,
-      dockerfile: data.buildType === "dockerfile" ? data.dockerfile : null,
-    })
-      .then(async () => {
-        toast.success("Build type saved");
-        await refetch();
-      })
-      .catch(() => {
-        toast.error("Error to save the build type");
-      });
-  };
+	const onSubmit = async (data: AddTemplate) => {
+		await mutateAsync({
+			applicationId,
+			buildType: data.buildType,
+			dockerfile: data.buildType === "dockerfile" ? data.dockerfile : null,
+		})
+			.then(async () => {
+				toast.success("Build type saved");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to save the build type");
+			});
+	};
 
-  return (
-    <Card className="group relative w-full bg-transparent">
-      <CardHeader>
-        <CardTitle className="flex items-start justify-between">
-          <div className="flex flex-col gap-2">
-            <span className="flex flex-col space-y-0.5">Build Type</span>
-            <p className="flex items-center text-sm font-normal text-muted-foreground">
-              Select the way of building your code
-            </p>
-          </div>
-          <div className="hidden space-y-1 text-sm font-normal md:block">
-            <Cog className="size-6 text-muted-foreground" />
-          </div>
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="grid w-full gap-4 p-2"
-          >
-            <FormField
-              control={form.control}
-              name="buildType"
-              defaultValue={form.control._defaultValues.buildType}
-              render={({ field }) => {
-                return (
-                  <FormItem className="space-y-3">
-                    <FormLabel>Build Type</FormLabel>
-                    <FormControl>
-                      <RadioGroup
-                        onValueChange={field.onChange}
-                        value={field.value}
-                        className="flex flex-col space-y-1"
-                      >
-                        <FormItem className="flex items-center space-x-3 space-y-0">
-                          <FormControl>
-                            <RadioGroupItem value="dockerfile" />
-                          </FormControl>
-                          <FormLabel className="font-normal">
-                            Dockerfile
-                          </FormLabel>
-                        </FormItem>
-                        <FormItem className="flex items-center space-x-3 space-y-0">
-                          <FormControl>
-                            <RadioGroupItem value="nixpacks" />
-                          </FormControl>
-                          <FormLabel className="font-normal">
-                            Nixpacks
-                          </FormLabel>
-                        </FormItem>
-                        <FormItem className="flex items-center space-x-3 space-y-0">
-                          <FormControl>
-                            <RadioGroupItem value="heroku_buildpacks" />
-                          </FormControl>
-                          <FormLabel className="font-normal">
-                            Heroku Buildpacks
-                          </FormLabel>
-                        </FormItem>
-                        <FormItem className="flex items-center space-x-3 space-y-0">
-                          <FormControl>
-                            <RadioGroupItem value="paketo_buildpacks" />
-                          </FormControl>
-                          <FormLabel className="font-normal">
-                            Paketo Buildpacks
-                          </FormLabel>
-                        </FormItem>
-                      </RadioGroup>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                );
-              }}
-            />
-            {buildType === "dockerfile" && (
-              <FormField
-                control={form.control}
-                name="dockerfile"
-                render={({ field }) => {
-                  return (
-                    <FormItem>
-                      <FormLabel>Docker File</FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder={"Path of your docker file"}
-                          {...field}
-                          value={field.value ?? ""}
-                        />
-                      </FormControl>
+	return (
+		<Card className="group relative w-full bg-transparent">
+			<CardHeader>
+				<CardTitle className="flex items-start justify-between">
+					<div className="flex flex-col gap-2">
+						<span className="flex flex-col space-y-0.5">Build Type</span>
+						<p className="flex items-center text-sm font-normal text-muted-foreground">
+							Select the way of building your code
+						</p>
+					</div>
+					<div className="hidden space-y-1 text-sm font-normal md:block">
+						<Cog className="size-6 text-muted-foreground" />
+					</div>
+				</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4 p-2"
+					>
+						<FormField
+							control={form.control}
+							name="buildType"
+							defaultValue={form.control._defaultValues.buildType}
+							render={({ field }) => {
+								return (
+									<FormItem className="space-y-3">
+										<FormLabel>Build Type</FormLabel>
+										<FormControl>
+											<RadioGroup
+												onValueChange={field.onChange}
+												value={field.value}
+												className="flex flex-col space-y-1"
+											>
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl>
+														<RadioGroupItem value="dockerfile" />
+													</FormControl>
+													<FormLabel className="font-normal">
+														Dockerfile
+													</FormLabel>
+												</FormItem>
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl>
+														<RadioGroupItem value="nixpacks" />
+													</FormControl>
+													<FormLabel className="font-normal">
+														Nixpacks
+													</FormLabel>
+												</FormItem>
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl>
+														<RadioGroupItem value="heroku_buildpacks" />
+													</FormControl>
+													<FormLabel className="font-normal">
+														Heroku Buildpacks
+													</FormLabel>
+												</FormItem>
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl>
+														<RadioGroupItem value="paketo_buildpacks" />
+													</FormControl>
+													<FormLabel className="font-normal">
+														Paketo Buildpacks
+													</FormLabel>
+												</FormItem>
+											</RadioGroup>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								);
+							}}
+						/>
+						{buildType === "dockerfile" && (
+							<FormField
+								control={form.control}
+								name="dockerfile"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Docker File</FormLabel>
+											<FormControl>
+												<Input
+													placeholder={"Path of your docker file"}
+													{...field}
+													value={field.value ?? ""}
+												/>
+											</FormControl>
 
-                      <FormMessage />
-                    </FormItem>
-                  );
-                }}
-              />
-            )}
-            <div className="flex w-full justify-end">
-              <Button isLoading={isLoading} type="submit">
-                Save
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </CardContent>
-    </Card>
-  );
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+						)}
+						<div className="flex w-full justify-end">
+							<Button isLoading={isLoading} type="submit">
+								Save
+							</Button>
+						</div>
+					</form>
+				</Form>
+			</CardContent>
+		</Card>
+	);
 };

components/dashboard/application/deployments/refresh-token.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -12,6 +11,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { api } from "@/utils/api";
 import { RefreshCcw } from "lucide-react";
+import React from "react";
 import { toast } from "sonner";
 
 interface Props {

components/dashboard/application/deployments/show-deployments.tsx

@@ -1,3 +1,5 @@
+import { DateTooltip } from "@/components/shared/date-tooltip";
+import { StatusTooltip } from "@/components/shared/status-tooltip";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -10,10 +12,8 @@ import { api } from "@/utils/api";
 import { RocketIcon } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { CancelQueues } from "./cancel-queues";
-import { ShowDeployment } from "./show-deployment";
-import { StatusTooltip } from "@/components/shared/status-tooltip";
-import { DateTooltip } from "@/components/shared/date-tooltip";
 import { RefreshToken } from "./refresh-token";
+import { ShowDeployment } from "./show-deployment";
 
 interface Props {
 	applicationId: string;

components/dashboard/application/domains/add-domain.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -27,7 +28,6 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
-import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PlusIcon } from "lucide-react";
 import { useEffect } from "react";

components/dashboard/application/domains/delete-domain.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -13,6 +12,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
 import { TrashIcon } from "lucide-react";
+import React from "react";
 import { toast } from "sonner";
 
 interface Props {

components/dashboard/application/domains/generate-domain.tsx

@@ -7,11 +7,11 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
+import { api } from "@/utils/api";
 import { RefreshCcw } from "lucide-react";
+import Link from "next/link";
 import { GenerateTraefikMe } from "./generate-traefikme";
 import { GenerateWildCard } from "./generate-wildcard";
-import Link from "next/link";
-import { api } from "@/utils/api";
 
 interface Props {
 	applicationId: string;

components/dashboard/application/domains/generate-traefikme.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -13,6 +12,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
 import { RefreshCcw } from "lucide-react";
+import React from "react";
 import { toast } from "sonner";
 
 interface Props {

components/dashboard/application/domains/generate-wildcard.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -13,6 +12,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
 import { SquareAsterisk } from "lucide-react";
+import React from "react";
 import { toast } from "sonner";
 
 interface Props {

components/dashboard/application/domains/show-domains.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -6,15 +6,15 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { ExternalLink, GlobeIcon, RefreshCcw } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
 import { Input } from "@/components/ui/input";
-import { DeleteDomain } from "./delete-domain";
+import { api } from "@/utils/api";
+import { ExternalLink, GlobeIcon, RefreshCcw } from "lucide-react";
 import Link from "next/link";
+import React from "react";
 import { AddDomain } from "./add-domain";
-import { UpdateDomain } from "./update-domain";
+import { DeleteDomain } from "./delete-domain";
 import { GenerateDomain } from "./generate-domain";
+import { UpdateDomain } from "./update-domain";
 
 interface Props {
 	applicationId: string;

components/dashboard/application/domains/update-domain.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -27,7 +28,6 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
-import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PenBoxIcon } from "lucide-react";
 import { useEffect } from "react";

components/dashboard/application/environment/show.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -6,10 +7,6 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
 import {
 	Form,
 	FormControl,
@@ -17,11 +14,14 @@ import {
 	FormItem,
 	FormMessage,
 } from "@/components/ui/form";
-import { api } from "@/utils/api";
-import { toast } from "sonner";
 import { Toggle } from "@/components/ui/toggle";
-import { CodeEditor } from "@/components/shared/code-editor";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 const addEnvironmentSchema = z.object({
 	environment: z.string(),

components/dashboard/application/general/generic/save-docker-provider.tsx

@@ -1,8 +1,4 @@
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
 import {
 	Form,
 	FormControl,
@@ -11,9 +7,13 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { useEffect } from "react";
+import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { z } from "zod";
 
 const DockerProviderSchema = z.object({
 	dockerImage: z.string().min(1, {

components/dashboard/application/general/show.tsx

@@ -4,13 +4,13 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
+import { CheckCircle2, Terminal } from "lucide-react";
 import React from "react";
 import { toast } from "sonner";
+import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
 import { RedbuildApplication } from "../rebuild-application";
 import { StartApplication } from "../start-application";
 import { StopApplication } from "../stop-application";
-import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
-import { CheckCircle2, Terminal } from "lucide-react";
 import { DeployApplication } from "./deploy-application";
 import { ResetApplication } from "./reset-application";
 interface Props {

components/dashboard/application/logs/show.tsx

@@ -1,4 +1,3 @@
-import dynamic from "next/dynamic";
 import {
 	Card,
 	CardContent,
@@ -6,6 +5,7 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
 import {
 	Select,
 	SelectContent,
@@ -16,8 +16,8 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
+import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
-import { Label } from "@/components/ui/label";
 export const DockerLogs = dynamic(
 	() =>
 		import("@/components/dashboard/docker/logs/docker-logs-id").then(

components/dashboard/application/update-application.tsx

@@ -1,3 +1,5 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
@@ -7,7 +9,6 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
 import {
 	Form,
 	FormControl,
@@ -16,16 +17,15 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { AlertBlock } from "@/components/shared/alert-block";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
-import { toast } from "sonner";
 import { Input } from "@/components/ui/input";
-import { AlertTriangle, SquarePen } from "lucide-react";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, SquarePen } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 const updateApplicationSchema = z.object({
 	name: z.string().min(1, {

components/dashboard/compose/advanced/add-command.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -6,8 +6,6 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { api } from "@/utils/api";
-import { z } from "zod";
 import {
 	Form,
 	FormControl,
@@ -17,12 +15,14 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { toast } from "sonner";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { useEffect } from "react";
-import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 interface Props {
 	composeId: string;
 }

components/dashboard/compose/advanced/show-volumes.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { AlertBlock } from "@/components/shared/alert-block";
 import {
 	Card,
 	CardContent,
@@ -8,10 +8,10 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { Package } from "lucide-react";
-import { DeleteVolume } from "../../application/advanced/volumes/delete-volume";
+import React from "react";
 import { AddVolumes } from "../../application/advanced/volumes/add-volumes";
+import { DeleteVolume } from "../../application/advanced/volumes/delete-volume";
 import { UpdateVolume } from "../../application/advanced/volumes/update-volume";
-import { AlertBlock } from "@/components/shared/alert-block";
 interface Props {
 	composeId: string;
 }

components/dashboard/compose/deployments/refresh-token-compose.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -12,6 +11,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { api } from "@/utils/api";
 import { RefreshCcw } from "lucide-react";
+import React from "react";
 import { toast } from "sonner";
 
 interface Props {

components/dashboard/compose/deployments/show-deployments-compose.tsx

@@ -1,3 +1,5 @@
+import { DateTooltip } from "@/components/shared/date-tooltip";
+import { StatusTooltip } from "@/components/shared/status-tooltip";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -9,11 +11,9 @@ import {
 import { api } from "@/utils/api";
 import { RocketIcon } from "lucide-react";
 import React, { useEffect, useState } from "react";
-import { StatusTooltip } from "@/components/shared/status-tooltip";
-import { DateTooltip } from "@/components/shared/date-tooltip";
-import { ShowDeploymentCompose } from "./show-deployment-compose";
-import { RefreshTokenCompose } from "./refresh-token-compose";
 import { CancelQueuesCompose } from "./cancel-queues-compose";
+import { RefreshTokenCompose } from "./refresh-token-compose";
+import { ShowDeploymentCompose } from "./show-deployment-compose";
 
 interface Props {
 	composeId: string;

components/dashboard/compose/enviroment/show.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -6,10 +7,6 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
 import {
 	Form,
 	FormControl,
@@ -17,11 +14,14 @@ import {
 	FormItem,
 	FormMessage,
 } from "@/components/ui/form";
-import { api } from "@/utils/api";
-import { toast } from "sonner";
-import { CodeEditor } from "@/components/shared/code-editor";
 import { Toggle } from "@/components/ui/toggle";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 const addEnvironmentSchema = z.object({
 	environment: z.string(),

components/dashboard/compose/general/actions.tsx

@@ -1,12 +1,4 @@
 import { Button } from "@/components/ui/button";
-import { ExternalLink, Globe, Terminal } from "lucide-react";
-import { api } from "@/utils/api";
-import { toast } from "sonner";
-import { Toggle } from "@/components/ui/toggle";
-import { RedbuildCompose } from "./rebuild-compose";
-import { DeployCompose } from "./deploy-compose";
-import { StopCompose } from "./stop-compose";
-import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -16,7 +8,15 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Toggle } from "@/components/ui/toggle";
+import { api } from "@/utils/api";
+import { ExternalLink, Globe, Terminal } from "lucide-react";
 import Link from "next/link";
+import { toast } from "sonner";
+import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
+import { DeployCompose } from "./deploy-compose";
+import { RedbuildCompose } from "./rebuild-compose";
+import { StopCompose } from "./stop-compose";
 
 interface Props {
 	composeId: string;

components/dashboard/compose/general/compose-file-editor.tsx

@@ -1,5 +1,5 @@
-import { api } from "@/utils/api";
-import { useEffect } from "react";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
 import {
 	Form,
 	FormControl,
@@ -7,14 +7,14 @@ import {
 	FormItem,
 	FormMessage,
 } from "@/components/ui/form";
+import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import { z } from "zod";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
-import { toast } from "sonner";
-import { Button } from "@/components/ui/button";
 import { RandomizeCompose } from "./randomize-compose";
-import { CodeEditor } from "@/components/shared/code-editor";
 
 interface Props {
 	composeId: string;

components/dashboard/compose/general/generic/show.tsx

@@ -4,9 +4,9 @@ import { api } from "@/utils/api";
 import { GitBranch, LockIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
-import { SaveGithubProviderCompose } from "./save-github-provider-compose";
 import { ComposeFileEditor } from "../compose-file-editor";
 import { SaveGitProviderCompose } from "./save-git-provider-compose";
+import { SaveGithubProviderCompose } from "./save-github-provider-compose";
 
 type TabState = "github" | "git" | "raw";
 interface Props {

components/dashboard/compose/general/randomize-compose.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -7,12 +8,11 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { AlertBlock } from "@/components/shared/alert-block";
 import { Dices } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
-import { Input } from "@/components/ui/input";
 
 interface Props {
 	composeId: string;

components/dashboard/compose/general/show.tsx

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import {
 	Card,
 	CardContent,
@@ -5,11 +6,10 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import React from "react";
-import { ShowProviderFormCompose } from "./generic/show";
-import { ComposeActions } from "./actions";
-import { Badge } from "@/components/ui/badge";
 import { api } from "@/utils/api";
+import React from "react";
+import { ComposeActions } from "./actions";
+import { ShowProviderFormCompose } from "./generic/show";
 interface Props {
 	composeId: string;
 }

components/dashboard/compose/logs/show.tsx

@@ -1,4 +1,3 @@
-import dynamic from "next/dynamic";
 import {
 	Card,
 	CardContent,
@@ -6,6 +5,7 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
 import {
 	Select,
 	SelectContent,
@@ -16,8 +16,8 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
+import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
-import { Label } from "@/components/ui/label";
 export const DockerLogs = dynamic(
 	() =>
 		import("@/components/dashboard/docker/logs/docker-logs-id").then(

components/dashboard/compose/monitoring/show.tsx

@@ -5,8 +5,7 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { api } from "@/utils/api";
-import { useEffect, useState } from "react";
+import { Label } from "@/components/ui/label";
 import {
 	Select,
 	SelectContent,
@@ -16,7 +15,8 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { Label } from "@/components/ui/label";
+import { api } from "@/utils/api";
+import { useEffect, useState } from "react";
 import { DockerMonitoring } from "../../monitoring/docker/show";
 
 interface Props {

components/dashboard/compose/update-compose.tsx

@@ -1,3 +1,5 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
@@ -7,7 +9,6 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
 import {
 	Form,
 	FormControl,
@@ -16,16 +17,15 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { AlertBlock } from "@/components/shared/alert-block";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
-import { toast } from "sonner";
 import { Input } from "@/components/ui/input";
-import { SquarePen } from "lucide-react";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { SquarePen } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 const updateComposeSchema = z.object({
 	name: z.string().min(1, {

components/dashboard/database/backups/add-backup.tsx

@@ -1,4 +1,11 @@
 import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+} from "@/components/ui/command";
 import {
 	Dialog,
 	DialogContent,
@@ -11,36 +18,29 @@ import {
 import {
 	Form,
 	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
-	FormDescription,
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PlusIcon } from "lucide-react";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { CheckIcon, ChevronsUpDown } from "lucide-react";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-} from "@/components/ui/command";
 import {
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
 } from "@/components/ui/popover";
-import { z } from "zod";
-import { cn } from "@/lib/utils";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon } from "lucide-react";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 const AddPostgresBackup1Schema = z.object({
 	destinationId: z.string().min(1, "Destination required"),

components/dashboard/database/backups/update-backup.tsx

@@ -1,4 +1,11 @@
 import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+} from "@/components/ui/command";
 import {
 	Dialog,
 	DialogContent,
@@ -18,28 +25,21 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Pencil, CheckIcon, ChevronsUpDown, PenBoxIcon } from "lucide-react";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { z } from "zod";
-import { Switch } from "@/components/ui/switch";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-} from "@/components/ui/command";
 import {
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
 } from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Switch } from "@/components/ui/switch";
 import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, PenBoxIcon, Pencil } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 const UpdateBackupSchema = z.object({
 	destinationId: z.string().min(1, "Destination required"),

components/dashboard/docker/logs/docker-logs-id.tsx

@@ -1,7 +1,7 @@
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import React, { useEffect } from "react";
 import { Terminal } from "@xterm/xterm";
+import React, { useEffect } from "react";
 import { FitAddon } from "xterm-addon-fit";
 import "@xterm/xterm/css/xterm.css";
 

components/dashboard/docker/logs/show-docker-modal-logs.tsx

@@ -1,5 +1,3 @@
-import dynamic from "next/dynamic";
-import React from "react";
 import {
 	Dialog,
 	DialogContent,
@@ -9,6 +7,8 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import dynamic from "next/dynamic";
+import type React from "react";
 export const DockerLogsId = dynamic(
 	() =>
 		import("@/components/dashboard/docker/logs/docker-logs-id").then(

components/dashboard/docker/show/colums.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import type { ColumnDef } from "@tanstack/react-table";
 import { ArrowUpDown, MoreHorizontal } from "lucide-react";
+import * as React from "react";
 
 import { Button } from "@/components/ui/button";
 import {

components/dashboard/docker/show/show-containers.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import {
 	type ColumnFiltersState,
 	type SortingState,
@@ -11,6 +10,7 @@ import {
 	useReactTable,
 } from "@tanstack/react-table";
 import { ChevronDown } from "lucide-react";
+import * as React from "react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -28,7 +28,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
-import { api, type RouterOutputs } from "@/utils/api";
+import { type RouterOutputs, api } from "@/utils/api";
 import { columns } from "./colums";
 export type Container = NonNullable<
 	RouterOutputs["docker"]["getContainers"]

components/dashboard/docker/terminal/docker-terminal-modal.tsx

@@ -6,8 +6,8 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
-import dynamic from "next/dynamic";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import dynamic from "next/dynamic";
 
 const Terminal = dynamic(
 	() => import("./docker-terminal").then((e) => e.DockerTerminal),

components/dashboard/docker/terminal/docker-terminal.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from "react";
 import { Terminal } from "@xterm/xterm";
+import React, { useEffect, useRef } from "react";
 import { FitAddon } from "xterm-addon-fit";
 import "@xterm/xterm/css/xterm.css";
-import { AttachAddon } from "@xterm/addon-attach";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { AttachAddon } from "@xterm/addon-attach";
 
 interface Props {
 	id: string;

components/dashboard/file-system/show-traefik-file.tsx

@@ -1,5 +1,7 @@
 import { Button } from "@/components/ui/button";
 
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
 import {
 	Form,
 	FormControl,
@@ -10,14 +12,12 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { api } from "@/utils/api";
-import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import { validateAndFormatYAML } from "../application/advanced/traefik/update-traefik-config";
-import { CodeEditor } from "@/components/shared/code-editor";
 
 const UpdateServerMiddlewareConfigSchema = z.object({
 	traefikConfig: z.string(),

components/dashboard/file-system/show-traefik-system.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import { api } from "@/utils/api";
-import { Workflow, Folder, FileIcon } from "lucide-react";
 import { Tree } from "@/components/ui/file-tree";
+import { api } from "@/utils/api";
+import { FileIcon, Folder, Workflow } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 import { ShowTraefikFile } from "./show-traefik-file";

components/dashboard/mariadb/advanced/show-mariadb-advanced-settings.tsx

@@ -1,12 +1,5 @@
-import React, { useEffect } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { z } from "zod";
-import { Input } from "@/components/ui/input";
-import { ShowMariadbResources } from "./show-mariadb-resources";
-import { toast } from "sonner";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
 	Form,
 	FormControl,
@@ -15,8 +8,15 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { ShowVolumes } from "../volumes/show-volumes";
+import { ShowMariadbResources } from "./show-mariadb-resources";
 
 const addDockerImage = z.object({
 	dockerImage: z.string().min(1, "Docker image is required"),

components/dashboard/mariadb/advanced/show-mariadb-resources.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -21,7 +22,6 @@ import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { AlertBlock } from "@/components/shared/alert-block";
 
 const addResourcesMariadb = z.object({
 	memoryReservation: z.number().nullable().optional(),

components/dashboard/mariadb/backups/show-backup-mariadb.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -6,20 +6,20 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { DatabaseBackup, Play } from "lucide-react";
-import Link from "next/link";
-import { AddBackup } from "../../database/backups/add-backup";
-import { DeleteBackup } from "../../database/backups/delete-backup";
-import { UpdateBackup } from "../../database/backups/update-backup";
-import { toast } from "sonner";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { api } from "@/utils/api";
+import { DatabaseBackup, Play } from "lucide-react";
+import Link from "next/link";
+import React from "react";
+import { toast } from "sonner";
+import { AddBackup } from "../../database/backups/add-backup";
+import { DeleteBackup } from "../../database/backups/delete-backup";
+import { UpdateBackup } from "../../database/backups/update-backup";
 interface Props {
 	mariadbId: string;
 }

components/dashboard/mariadb/environment/show-mariadb-environment.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -6,10 +7,6 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
 import {
 	Form,
 	FormControl,
@@ -18,8 +15,11 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useEffect } from "react";
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { CodeEditor } from "@/components/shared/code-editor";
+import { z } from "zod";
 
 const addEnvironmentSchema = z.object({
 	environment: z.string(),

components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx

@@ -1,3 +1,4 @@
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -22,7 +23,6 @@ import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 
 const DockerProviderSchema = z.object({
 	externalPort: z.preprocess((a) => {

components/dashboard/mariadb/general/show-general-mariadb.tsx

@@ -1,13 +1,13 @@
-import React from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { StopMariadb } from "./stop-mariadb";
-import { StartMariadb } from "../start-mariadb";
-import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
 import { Terminal } from "lucide-react";
+import React from "react";
+import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
+import { StartMariadb } from "../start-mariadb";
 import { DeployMariadb } from "./deploy-mariadb";
 import { ResetMariadb } from "./reset-mariadb";
+import { StopMariadb } from "./stop-mariadb";
 
 interface Props {
 	mariadbId: string;

components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
+import React from "react";
 
 interface Props {
 	mariadbId: string;

components/dashboard/mariadb/general/stop-mariadb.tsx

@@ -1,13 +1,13 @@
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
@@ -15,51 +15,51 @@ import { Ban } from "lucide-react";
 import { toast } from "sonner";
 
 interface Props {
-  mariadbId: string;
+	mariadbId: string;
 }
 
 export const StopMariadb = ({ mariadbId }: Props) => {
-  const { mutateAsync, isLoading } = api.mariadb.stop.useMutation();
-  const utils = api.useUtils();
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button variant="destructive" isLoading={isLoading}>
-          Stop
-          <Ban className="size-4" />
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>
-            Are you absolutely sure to stop the database?
-          </AlertDialogTitle>
-          <AlertDialogDescription>
-            This will stop the database
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={async () => {
-              await mutateAsync({
-                mariadbId,
-              })
-                .then(async () => {
-                  await utils.mariadb.one.invalidate({
-                    mariadbId,
-                  });
-                  toast.success("Application stopped succesfully");
-                })
-                .catch(() => {
-                  toast.error("Error to stop the Application");
-                });
-            }}
-          >
-            Confirm
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
+	const { mutateAsync, isLoading } = api.mariadb.stop.useMutation();
+	const utils = api.useUtils();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="destructive" isLoading={isLoading}>
+					Stop
+					<Ban className="size-4" />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>
+						Are you absolutely sure to stop the database?
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will stop the database
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								mariadbId,
+							})
+								.then(async () => {
+									await utils.mariadb.one.invalidate({
+										mariadbId,
+									});
+									toast.success("Application stopped succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to stop the Application");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
 };

components/dashboard/mariadb/start-mariadb.tsx

@@ -1,13 +1,13 @@
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
@@ -15,51 +15,51 @@ import { CheckCircle2 } from "lucide-react";
 import { toast } from "sonner";
 
 interface Props {
-  mariadbId: string;
+	mariadbId: string;
 }
 
 export const StartMariadb = ({ mariadbId }: Props) => {
-  const { mutateAsync, isLoading } = api.mariadb.start.useMutation();
-  const utils = api.useUtils();
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button variant="secondary" isLoading={isLoading}>
-          Start
-          <CheckCircle2 className="size-4" />
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>
-            Are you sure to start the database?
-          </AlertDialogTitle>
-          <AlertDialogDescription>
-            This will start the database
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={async () => {
-              await mutateAsync({
-                mariadbId,
-              })
-                .then(async () => {
-                  await utils.mariadb.one.invalidate({
-                    mariadbId,
-                  });
-                  toast.success("Database started succesfully");
-                })
-                .catch(() => {
-                  toast.error("Error to start the Database");
-                });
-            }}
-          >
-            Confirm
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
+	const { mutateAsync, isLoading } = api.mariadb.start.useMutation();
+	const utils = api.useUtils();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="secondary" isLoading={isLoading}>
+					Start
+					<CheckCircle2 className="size-4" />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>
+						Are you sure to start the database?
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will start the database
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								mariadbId,
+							})
+								.then(async () => {
+									await utils.mariadb.one.invalidate({
+										mariadbId,
+									});
+									toast.success("Database started succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to start the Database");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
 };

components/dashboard/mariadb/update-mariadb.tsx

@@ -1,3 +1,5 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
@@ -7,7 +9,6 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
 import {
 	Form,
 	FormControl,
@@ -16,16 +17,15 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { AlertBlock } from "@/components/shared/alert-block";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
-import { toast } from "sonner";
 import { Input } from "@/components/ui/input";
-import { AlertTriangle, SquarePen } from "lucide-react";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, SquarePen } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 const updateMariadbSchema = z.object({
 	name: z.string().min(1, {

components/dashboard/mariadb/volumes/show-volumes.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { AlertBlock } from "@/components/shared/alert-block";
 import {
 	Card,
 	CardContent,
@@ -8,10 +8,10 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { AlertTriangle, Package } from "lucide-react";
-import { DeleteVolume } from "../../application/advanced/volumes/delete-volume";
+import React from "react";
 import { AddVolumes } from "../../application/advanced/volumes/add-volumes";
+import { DeleteVolume } from "../../application/advanced/volumes/delete-volume";
 import { UpdateVolume } from "../../application/advanced/volumes/update-volume";
-import { AlertBlock } from "@/components/shared/alert-block";
 interface Props {
 	mariadbId: string;
 }

components/dashboard/mongo/advanced/show-mongo-advanced-settings.tsx

@@ -1,11 +1,5 @@
-import React, { useEffect } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { z } from "zod";
-import { Input } from "@/components/ui/input";
-import { toast } from "sonner";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
 	Form,
 	FormControl,
@@ -14,9 +8,15 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { ShowMongoResources } from "./show-mongo-resources";
+import { toast } from "sonner";
+import { z } from "zod";
 import { ShowVolumes } from "../volumes/show-volumes";
+import { ShowMongoResources } from "./show-mongo-resources";
 
 const addDockerImage = z.object({
 	dockerImage: z.string().min(1, "Docker image is required"),

components/dashboard/mongo/advanced/show-mongo-resources.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -21,7 +22,6 @@ import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { AlertBlock } from "@/components/shared/alert-block";
 
 const addResourcesMongo = z.object({
 	memoryReservation: z.number().nullable().optional(),

components/dashboard/mongo/backups/show-backup-mongo.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -6,20 +6,20 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { DatabaseBackup, Play } from "lucide-react";
-import Link from "next/link";
-import { AddBackup } from "../../database/backups/add-backup";
-import { DeleteBackup } from "../../database/backups/delete-backup";
-import { UpdateBackup } from "../../database/backups/update-backup";
-import { toast } from "sonner";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { api } from "@/utils/api";
+import { DatabaseBackup, Play } from "lucide-react";
+import Link from "next/link";
+import React from "react";
+import { toast } from "sonner";
+import { AddBackup } from "../../database/backups/add-backup";
+import { DeleteBackup } from "../../database/backups/delete-backup";
+import { UpdateBackup } from "../../database/backups/update-backup";
 interface Props {
 	mongoId: string;
 }

components/dashboard/mongo/general/show-general-mongo.tsx

@@ -1,13 +1,13 @@
-import React from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { StopMongo } from "./stop-mongo";
-import { StartMongo } from "../start-mongo";
-import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
 import { Terminal } from "lucide-react";
+import React from "react";
+import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
+import { StartMongo } from "../start-mongo";
 import { DeployMongo } from "./deploy-mongo";
 import { ResetMongo } from "./reset-mongo";
+import { StopMongo } from "./stop-mongo";
 interface Props {
 	mongoId: string;
 }

components/dashboard/mongo/general/show-internal-mongo-credentials.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
+import React from "react";
 
 interface Props {
 	mongoId: string;

components/dashboard/mongo/general/stop-mongo.tsx

@@ -1,13 +1,13 @@
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
@@ -15,51 +15,51 @@ import { Ban } from "lucide-react";
 import { toast } from "sonner";
 
 interface Props {
-  mongoId: string;
+	mongoId: string;
 }
 
 export const StopMongo = ({ mongoId }: Props) => {
-  const { mutateAsync, isLoading } = api.mongo.stop.useMutation();
-  const utils = api.useUtils();
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button variant="destructive" isLoading={isLoading}>
-          Stop
-          <Ban className="size-4" />
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>
-            Are you absolutely sure to stop the database?
-          </AlertDialogTitle>
-          <AlertDialogDescription>
-            This will stop the database
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={async () => {
-              await mutateAsync({
-                mongoId,
-              })
-                .then(async () => {
-                  await utils.mongo.one.invalidate({
-                    mongoId,
-                  });
-                  toast.success("Application stopped succesfully");
-                })
-                .catch(() => {
-                  toast.error("Error to stop the Application");
-                });
-            }}
-          >
-            Confirm
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
+	const { mutateAsync, isLoading } = api.mongo.stop.useMutation();
+	const utils = api.useUtils();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="destructive" isLoading={isLoading}>
+					Stop
+					<Ban className="size-4" />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>
+						Are you absolutely sure to stop the database?
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will stop the database
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								mongoId,
+							})
+								.then(async () => {
+									await utils.mongo.one.invalidate({
+										mongoId,
+									});
+									toast.success("Application stopped succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to stop the Application");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
 };

components/dashboard/mongo/start-mongo.tsx

@@ -1,13 +1,13 @@
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
@@ -15,51 +15,51 @@ import { CheckCircle2 } from "lucide-react";
 import { toast } from "sonner";
 
 interface Props {
-  mongoId: string;
+	mongoId: string;
 }
 
 export const StartMongo = ({ mongoId }: Props) => {
-  const { mutateAsync, isLoading } = api.mongo.start.useMutation();
-  const utils = api.useUtils();
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button variant="secondary" isLoading={isLoading}>
-          Start
-          <CheckCircle2 className="size-4" />
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>
-            Are you sure to start the database?
-          </AlertDialogTitle>
-          <AlertDialogDescription>
-            This will start the database
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={async () => {
-              await mutateAsync({
-                mongoId,
-              })
-                .then(async () => {
-                  await utils.mongo.one.invalidate({
-                    mongoId,
-                  });
-                  toast.success("Database started succesfully");
-                })
-                .catch(() => {
-                  toast.error("Error to start the Database");
-                });
-            }}
-          >
-            Confirm
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
+	const { mutateAsync, isLoading } = api.mongo.start.useMutation();
+	const utils = api.useUtils();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="secondary" isLoading={isLoading}>
+					Start
+					<CheckCircle2 className="size-4" />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>
+						Are you sure to start the database?
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will start the database
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								mongoId,
+							})
+								.then(async () => {
+									await utils.mongo.one.invalidate({
+										mongoId,
+									});
+									toast.success("Database started succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to start the Database");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
 };

components/dashboard/mongo/update-mongo.tsx

@@ -1,3 +1,5 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
@@ -7,7 +9,6 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
 import {
 	Form,
 	FormControl,
@@ -16,16 +17,15 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { AlertBlock } from "@/components/shared/alert-block";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
-import { toast } from "sonner";
 import { Input } from "@/components/ui/input";
-import { AlertTriangle, SquarePen } from "lucide-react";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, SquarePen } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 const updateMongoSchema = z.object({
 	name: z.string().min(1, {

components/dashboard/mongo/volumes/show-volumes.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { AlertBlock } from "@/components/shared/alert-block";
 import {
 	Card,
 	CardContent,
@@ -8,10 +8,10 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { AlertTriangle, Package } from "lucide-react";
-import { DeleteVolume } from "../../application/advanced/volumes/delete-volume";
+import React from "react";
 import { AddVolumes } from "../../application/advanced/volumes/add-volumes";
+import { DeleteVolume } from "../../application/advanced/volumes/delete-volume";
 import { UpdateVolume } from "../../application/advanced/volumes/update-volume";
-import { AlertBlock } from "@/components/shared/alert-block";
 interface Props {
 	mongoId: string;
 }

components/dashboard/monitoring/docker/docker-block-chart.tsx

@@ -1,14 +1,14 @@
+import { format } from "date-fns";
 import {
-	AreaChart,
 	Area,
-	YAxis,
+	AreaChart,
 	CartesianGrid,
-	Tooltip,
-	ResponsiveContainer,
 	Legend,
+	ResponsiveContainer,
+	Tooltip,
+	YAxis,
 } from "recharts";
 import type { DockerStatsJSON } from "./show";
-import { format } from "date-fns";
 
 interface Props {
 	acummulativeData: DockerStatsJSON["block"];

components/dashboard/monitoring/docker/docker-cpu-chart.tsx

@@ -1,14 +1,14 @@
+import { format } from "date-fns";
 import {
-	AreaChart,
 	Area,
-	YAxis,
+	AreaChart,
 	CartesianGrid,
-	Tooltip,
-	ResponsiveContainer,
 	Legend,
+	ResponsiveContainer,
+	Tooltip,
+	YAxis,
 } from "recharts";
 import type { DockerStatsJSON } from "./show";
-import { format } from "date-fns";
 
 interface Props {
 	acummulativeData: DockerStatsJSON["cpu"];

components/dashboard/monitoring/docker/docker-disk-chart.tsx

@@ -1,14 +1,14 @@
+import { format } from "date-fns";
 import {
-	AreaChart,
 	Area,
-	YAxis,
+	AreaChart,
 	CartesianGrid,
-	Tooltip,
-	ResponsiveContainer,
 	Legend,
+	ResponsiveContainer,
+	Tooltip,
+	YAxis,
 } from "recharts";
 import type { DockerStatsJSON } from "./show";
-import { format } from "date-fns";
 
 interface Props {
 	acummulativeData: DockerStatsJSON["disk"];

components/dashboard/monitoring/docker/docker-memory-chart.tsx

@@ -1,14 +1,14 @@
+import { format } from "date-fns";
 import {
-	AreaChart,
 	Area,
-	YAxis,
+	AreaChart,
 	CartesianGrid,
-	Tooltip,
-	ResponsiveContainer,
 	Legend,
+	ResponsiveContainer,
+	Tooltip,
+	YAxis,
 } from "recharts";
 import type { DockerStatsJSON } from "./show";
-import { format } from "date-fns";
 
 interface Props {
 	acummulativeData: DockerStatsJSON["memory"];

components/dashboard/monitoring/docker/docker-network-chart.tsx

@@ -1,14 +1,14 @@
+import { format } from "date-fns";
 import {
-	AreaChart,
 	Area,
-	YAxis,
+	AreaChart,
 	CartesianGrid,
-	Tooltip,
-	ResponsiveContainer,
 	Legend,
+	ResponsiveContainer,
+	Tooltip,
+	YAxis,
 } from "recharts";
 import type { DockerStatsJSON } from "./show";
-import { format } from "date-fns";
 1;
 interface Props {
 	acummulativeData: DockerStatsJSON["network"];

components/dashboard/monitoring/docker/show.tsx

@@ -6,13 +6,13 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
-import React, { useEffect, useState } from "react";
-import { DockerCpuChart } from "./docker-cpu-chart";
-import { DockerMemoryChart } from "./docker-memory-chart";
-import { DockerBlockChart } from "./docker-block-chart";
-import { DockerNetworkChart } from "./docker-network-chart";
-import { DockerDiskChart } from "./docker-disk-chart";
 import { api } from "@/utils/api";
+import React, { useEffect, useState } from "react";
+import { DockerBlockChart } from "./docker-block-chart";
+import { DockerCpuChart } from "./docker-cpu-chart";
+import { DockerDiskChart } from "./docker-disk-chart";
+import { DockerMemoryChart } from "./docker-memory-chart";
+import { DockerNetworkChart } from "./docker-network-chart";
 
 const defaultData = {
 	cpu: {
@@ -210,9 +210,7 @@ export const DockerMonitoring = ({
 								<span className="text-sm text-muted-foreground">
 									{`Used:  ${(currentData.memory.value.used / 1024).toFixed(
 										2,
-									)} GB / Limit: ${(
-										currentData.memory.value.total / 1024
-									).toFixed(2)} GB`}
+									)} GB / Limit: ${(currentData.memory.value.total / 1024).toFixed(2)} GB`}
 								</span>
 								<Progress
 									value={currentData.memory.value.usedPercentage}

components/dashboard/mysql/advanced/show-mysql-advanced-settings.tsx

@@ -15,8 +15,8 @@ import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { ShowMysqlResources } from "./show-mysql-resources";
 import { ShowVolumes } from "../volumes/show-volumes";
+import { ShowMysqlResources } from "./show-mysql-resources";
 
 const addDockerImage = z.object({
 	dockerImage: z.string().min(1, "Docker image is required"),