feat: initial commit

.env.example

@@ -0,0 +1,3 @@
+DATABASE_URL="postgres://dokploy:amukds4wi9001583845717ad2@localhost:5432/dokploy"
+PORT=3000
+NODE_ENV=development

.gitignore

@@ -0,0 +1,54 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+/redis-data
+traefik.yml
+
+# testing
+/coverage
+/dist
+/production-server
+# database
+/prisma/db.sqlite
+/prisma/db.sqlite-journal
+/logs
+
+# next.js
+/.next/
+/out/
+next-env.d.ts
+/dokploy
+/config
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+# otros
+/.data
+/.main
+
+*.lockb

CONTRIBUTING.md

@@ -0,0 +1,137 @@
+
+
+# Contributing
+
+Hey, thanks for your interest in contributing to Dokploy! We appreciate your help and taking your time to contribute.
+
+
+Before you start, please first discuss the feature/bug you want to add with the owners and comunity via github issues.
+
+We have a few guidelines to follow when contributing to this project:
+
+- [Commit Convention](#commit-convention)
+- [Setup](#setup)
+- [Development](#development)
+- [Build](#build)
+- [Pull Request](#pull-request)
+
+## Commit Convention
+
+Before you craete a Pull Request, please make sure your commit message follows the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification.
+
+### Commit Message Format
+```
+<type>[optional scope]: <description>
+
+[optional body]
+
+[optional footer(s)]
+```
+
+#### Type
+Must be one of the following:
+
+* **feat**: A new feature
+* **fix**: A bug fix
+* **docs**: Documentation only changes
+* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
+* **refactor**: A code change that neither fixes a bug nor adds a feature
+* **perf**: A code change that improves performance
+* **test**: Adding missing tests or correcting existing tests
+* **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
+* **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
+* **chore**: Other changes that don't modify `src` or `test` files
+* **revert**: Reverts a previous commit
+
+Example:
+```
+feat: add new feature
+```
+
+
+## Setup
+
+```bash
+git clone https://github.com/dokploy/dokploy.git
+cd dokploy
+npm install
+cp .env.example .env
+```
+
+## Development
+
+Is required to have **Docker** installed on your machine.
+
+```bash
+npm run dev
+```
+
+Go to http://localhost:3000 to see the development server
+
+## Build
+
+```bash
+npm run build
+```
+
+## Docker
+
+To build the docker image
+```bash
+npm run docker:build
+```
+
+To push the docker image
+```bash
+npm run docker:push
+```
+
+## Password Reset
+
+In the case you lost your password, you can reset it using the following command
+
+```bash
+pnpm run build-server
+```
+
+If you want to test the webhooks on development mode using localtunnel, make sure to install `localtunnel`
+
+```bash
+bunx lt --port 3000
+```
+
+If you run into permission issues of docker run the following command
+
+```bash
+sudo chown -R USERNAME dokploy or sudo chown -R $(whoami) ~/.docker
+```
+
+## Application deploy
+
+In case you want to deploy the application on your machine and you selected nixpacks or buildpacks, you need to install first.
+
+```bash
+# Install Nixpacks
+curl -sSL https://nixpacks.com/install.sh -o install.sh \
+    && chmod +x install.sh \
+    && ./install.sh
+```
+
+```bash
+# Install Buildpacks
+curl -sSL "https://github.com/buildpacks/pack/releases/download/v0.32.1/pack-v0.32.1-linux.tgz" | tar -C /usr/local/bin/ --no-same-owner -xzv pack
+```
+
+
+## Pull Request
+
+- The `main` branch is the source of truth and should always reflect the latest stable release.
+- Create a new branch for each feature or bug fix.
+- Make sure to add tests for your changes.
+- Make sure to update the documentation for any changes Go to the [docs.dokploy.com](https://docs.dokploy.com) website to see the changes.
+- When creating a pull request, please provide a clear and concise description of the changes made.
+- If you include a video or screenshot, would be awesome so we can see the changes in action.
+- If your pull request fixes an open issue, please reference the issue in the pull request description.
+- Once your pull request is merged, you will be automatically added as a contributor to the project.
+
+Thank you for your contribution!

Dockerfile

@@ -0,0 +1,65 @@
+# Etapa 1: Prepare image for building
+FROM node:18-slim AS base
+
+# Install dependencies
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable && apt-get update && apt-get install -y python3 make g++ git && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Copy package.json and pnpm-lock.yaml
+COPY package.json pnpm-lock.yaml ./
+
+# Install dependencies only for building
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+
+# Copy the rest of the source code
+COPY . .
+
+#  Build the application
+RUN pnpm run build
+
+# Stage 2: Prepare image for production
+FROM node:18-slim AS production
+
+# Install dependencies only for production
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable && apt-get update && apt-get install -y curl && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+#  Copy the rest of the source code
+COPY --from=base /app/.next ./.next
+COPY --from=base /app/dist ./dist
+COPY --from=base /app/next.config.mjs ./next.config.mjs
+COPY --from=base /app/public ./public
+COPY --from=base /app/package.json ./package.json
+COPY --from=base /app/drizzle ./drizzle
+COPY --from=base /app/.env.production ./.env
+COPY --from=base /app/components.json ./components.json
+
+#  Install dependencies only for production
+COPY package.json pnpm-lock.yaml ./
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
+
+# Install docker
+RUN curl -fsSL https://get.docker.com -o get-docker.sh && sh get-docker.sh && rm get-docker.sh
+
+
+# Install Nixpacks and tsx
+# | VERBOSE=1 VERSION=1.21.0 bash
+RUN curl -sSL https://nixpacks.com/install.sh -o install.sh \
+    && chmod +x install.sh \
+    && ./install.sh \
+    && pnpm install -g tsx
+
+
+# Install buildpacks
+RUN curl -sSL "https://github.com/buildpacks/pack/releases/download/v0.32.1/pack-v0.32.1-linux.tgz" | tar -C /usr/local/bin/ --no-same-owner -xzv pack
+
+# Expose port
+EXPOSE 3000
+
+CMD ["pnpm", "start"]

LICENSE.MD

@@ -0,0 +1,35 @@
+Copyright 2024-2024 Mauricio Siu.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+Appendix:
+In case of a conflict, the terms of this appendix supersede the general apache license.
+
+-   Unless provided with a written agreement or permission, the paid features of Dokploy (as a service) cannot be modified.
+-   Unless provided with a written agreement or permission, no persons are permitted to redistribute another paid version of Dokploy.
+-   Unless provided with a written agreement or permission, no persons are permitted to create the same paid version of Dokploy.
+-   Furthermore, any modifications of free features of Dokploy should be distributed as free & opensource software.
+
+Appendix B:
+
+- **Prohibition of Resale Without Permission:** Notwithstanding any provisions in the main body of the Apache License, Version 2.0, no party is permitted to sell, resell, or otherwise distribute for commercial gain, the software or any of its components, including both original and modified versions, through any form of commercial distribution channels, including but not limited to online marketplaces, software as a service (SaaS) platforms, or physical media distribution, without prior written consent from the copyright holder.
+
+- **Commercial Distribution:** Any form of distribution of Dokploy, whether for direct profit or indirect financial benefit, through commercial channels is strictly prohibited without a separate commercial agreement negotiated with the copyright holder. This includes but is not limited to, offerings on software marketplaces or through third-party distributors.
+
+- **Modification of Paid Features:** The paid features of Dokploy (as a service) may not be modified, integrated into other software, or redistributed in any form without explicit written permission from the copyright holder.
+
+- **Open Source Distribution of Free Features:** Any modifications to the free features of Dokploy must be distributed freely and must not be included in any paid or commercial package without complying with the open-source license terms stipulated in this agreement.
+
+If you have any questions, please feel free to reach out to us.
+
+

README.md

@@ -5,7 +5,7 @@
 </div>
 
 <div align="center" style="width:100%;">
-<img src="https://raw.githubusercontent.com/Dokploy/dokploy/main/logo.png" alt="Reflex Logo"  style="width:100%;">
+<img src="https://raw.githubusercontent.com/Dokploy/dokploy/main/logo.png" alt="Reflex Logo"  style="width:60%;">
 </div>
 <hr>
 
@@ -42,3 +42,4 @@ Tested Systems:
 ## 📄 Documentation
 
 For detailed documentation, visit [docs.dokploy.com/docs](https://docs.dokploy.com).
+

TERMS_AND_CONDITIONS.md

@@ -0,0 +1,25 @@
+# Terms & Conditions
+
+
+Dokploy core is a free and open-source program alternative to Vercel, Netlify, and other cloud services.
+
+Developers of Dokploy do their best to prevent bugs and issues through rigorous testing processes and clean code principles. Dokploy is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and limitations under the [License](https://github.com/Dokploy/Dokploy/blob/main/LICENSE).
+
+By using Dokploy you agree to Terms and Conditions, and the license of Dokploy.
+
+### Description of Service:
+
+Dokploy core is an open-source program designed to streamline application deployment processes for personal and commercial use. Users are free to install, modify, and run Dokploy on their own machines or within their organizations to enhance their development and deployment workflows. While Dokploy encourages a wide range of uses to foster innovation and efficiency, it is crucial to note that selling Dokploy itself as a service or repackaging it as part of a commercial offering without explicit permission is strictly prohibited. This ensures that the open-source nature of Dokploy remains intact and benefits the community as a whole.
+
+### Our Responsibility
+
+Dokploy developers will do their best to ensure that Dokploy remains functional and major bugs are resolved quickly. If you have a feature request, you are more than welcome to open a request for it, but the ultimate decision whether or not the feature will be added is taken by Dokploy's core developers.
+
+### Usage Data
+
+Dokploy doesn't collect any usage data. It is a free and open-source program, and it is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+
+### Future changes
+
+Terms of Service / Terms & Conditions may change at any point without a prior notice.

biome.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+    "linter":{
+       "rules": {
+           "correctness":{
+            "useExhaustiveDependencies": "off"
+           },
+           "suspicious":{
+            "noArrayIndexKey": "off"
+           },
+           "a11y":{
+            "noSvgWithoutTitle":"off"
+           }
+       }
+    }
+
+}

components.json

@@ -0,0 +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"
+  }
+}

components/auth/login-2fa.tsx

@@ -0,0 +1,124 @@
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} 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 { useRouter } from "next/router";
+
+const Login2FASchema = z.object({
+	pin: z.string().min(6, {
+		message: "Pin is required",
+	}),
+});
+
+type Login2FA = z.infer<typeof Login2FASchema>;
+
+interface Props {
+	authId: string;
+}
+
+export const Login2FA = ({ authId }: Props) => {
+	const { push } = useRouter();
+
+	const { mutateAsync, isLoading, isError, error } =
+		api.auth.verifyLogin2FA.useMutation();
+
+	const form = useForm<Login2FA>({
+		defaultValues: {
+			pin: "",
+		},
+		resolver: zodResolver(Login2FASchema),
+	});
+
+	useEffect(() => {
+		form.reset({
+			pin: "",
+		});
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+
+	const onSubmit = async (data: Login2FA) => {
+		await mutateAsync({
+			pin: data.pin,
+			id: authId,
+		})
+			.then(() => {
+				toast.success("Signin succesfully", {
+					duration: 2000,
+				});
+
+				push("/dashboard");
+			})
+			.catch(() => {
+				toast.error("Signin failed", {
+					duration: 2000,
+				});
+			});
+	};
+	return (
+		<Form {...form}>
+			<form
+				onSubmit={form.handleSubmit(onSubmit)}
+				className="grid w-full gap-4"
+			>
+				{isError && (
+					<div className="flex flex-row gap-4 rounded-lg items-center bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error?.message}
+						</span>
+					</div>
+				)}
+				<CardTitle className="text-xl font-bold">2FA Setup</CardTitle>
+
+				<FormField
+					control={form.control}
+					name="pin"
+					render={({ field }) => (
+						<FormItem className="flex flex-col justify-center max-sm:items-center">
+							<FormLabel>Pin</FormLabel>
+							<FormControl>
+								<InputOTP maxLength={6} {...field}>
+									<InputOTPGroup>
+										<InputOTPSlot index={0} />
+										<InputOTPSlot index={1} />
+										<InputOTPSlot index={2} />
+										<InputOTPSlot index={3} />
+										<InputOTPSlot index={4} />
+										<InputOTPSlot index={5} />
+									</InputOTPGroup>
+								</InputOTP>
+							</FormControl>
+							<FormDescription>
+								Please enter the 6 digits code provided by your authenticator
+								app.
+							</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<Button isLoading={isLoading} type="submit">
+					Submit 2FA
+				</Button>
+			</form>
+		</Form>
+	);
+};

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

@@ -0,0 +1,120 @@
+import React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { z } from "zod";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	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";
+interface Props {
+	applicationId: string;
+}
+
+const AddRedirectchema = z.object({
+	command: z.string(),
+});
+
+type AddCommand = z.infer<typeof AddRedirectchema>;
+
+export const AddCommand = ({ applicationId }: Props) => {
+	const { data } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	const utils = api.useUtils();
+
+	const { mutateAsync, isLoading } = api.application.update.useMutation();
+
+	const form = useForm<AddCommand>({
+		defaultValues: {
+			command: "",
+		},
+		resolver: zodResolver(AddRedirectchema),
+	});
+
+	useEffect(() => {
+		if (data?.command) {
+			form.reset({
+				command: data?.command || "",
+			});
+		}
+	}, [form, form.reset, form.formState.isSubmitSuccessful, data?.command]);
+
+	const onSubmit = async (data: AddCommand) => {
+		await mutateAsync({
+			applicationId,
+			command: data?.command,
+		})
+			.then(async () => {
+				toast.success("Command Updated");
+				await utils.application.one.invalidate({
+					applicationId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to update the command");
+			});
+	};
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between">
+				<div>
+					<CardTitle className="text-xl">Run Command</CardTitle>
+					<CardDescription>
+						Run a custom command in the container
+					</CardDescription>
+				</div>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="command"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Command</FormLabel>
+										<FormControl>
+											<Input placeholder="Custom command" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<div className="flex justify-end">
+							<Button isLoading={isLoading} type="submit" className="w-fit">
+								Save
+							</Button>
+						</div>
+					</form>
+				</Form>
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -0,0 +1,220 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+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 { PlusIcon } from "lucide-react";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { z } from "zod";
+
+const AddPortchema = z.object({
+	publishedPort: z.number().int().min(1).max(65535),
+	targetPort: z.number().int().min(1).max(65535),
+	protocol: z.enum(["tcp", "udp"], {
+		required_error: "Protocol is required",
+	}),
+});
+
+type AddPort = z.infer<typeof AddPortchema>;
+
+interface Props {
+	applicationId: string;
+	children?: React.ReactNode;
+}
+
+export const AddPort = ({
+	applicationId,
+	children = <PlusIcon className="h-4 w-4" />,
+}: Props) => {
+	const utils = api.useUtils();
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.port.create.useMutation();
+
+	const form = useForm<AddPort>({
+		defaultValues: {
+			publishedPort: 0,
+			targetPort: 0,
+		},
+		resolver: zodResolver(AddPortchema),
+	});
+
+	useEffect(() => {
+		form.reset({
+			publishedPort: 0,
+			targetPort: 0,
+		});
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+
+	const onSubmit = async (data: AddPort) => {
+		await mutateAsync({
+			applicationId,
+			...data,
+		})
+			.then(async () => {
+				toast.success("Port Created");
+				await utils.application.one.invalidate({
+					applicationId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to create the port");
+			});
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button>{children}</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Ports</DialogTitle>
+					<DialogDescription>
+						Ports are used to expose your application to the internet.
+					</DialogDescription>
+				</DialogHeader>
+				{isError && (
+					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error?.message}
+						</span>
+					</div>
+				)}
+
+				<Form {...form}>
+					<form
+						id="hook-form-add-port"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="publishedPort"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Published Port</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="1-65535"
+												{...field}
+												value={field.value?.toString() || ""}
+												onChange={(e) => {
+													const value = e.target.value;
+													if (value === "") {
+														field.onChange(0);
+													} else {
+														const number = Number.parseInt(value, 10);
+														if (!Number.isNaN(number)) {
+															field.onChange(number);
+														}
+													}
+												}}
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="targetPort"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Target Port</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="1-65535"
+												{...field}
+												value={field.value?.toString() || ""}
+												onChange={(e) => {
+													const value = e.target.value;
+													if (value === "") {
+														field.onChange(0);
+													} else {
+														const number = Number.parseInt(value, 10);
+														if (!Number.isNaN(number)) {
+															field.onChange(number);
+														}
+													}
+												}}
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="protocol"
+								render={({ field }) => {
+									return (
+										<FormItem className="md:col-span-2">
+											<FormLabel>Protocol</FormLabel>
+											<Select
+												onValueChange={field.onChange}
+												value={field.value}
+											>
+												<FormControl>
+													<SelectTrigger>
+														<SelectValue placeholder="Select a protocol" />
+													</SelectTrigger>
+												</FormControl>
+												<SelectContent defaultValue={"none"}>
+													<SelectItem value={"none"}>None</SelectItem>
+													<SelectItem value={"tcp"}>TCP</SelectItem>
+													<SelectItem value={"udp"}>UDP</SelectItem>
+												</SelectContent>
+											</Select>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={isLoading}
+							form="hook-form-add-port"
+							type="submit"
+						>
+							Create
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,63 @@
+import {
+	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";
+import { TrashIcon } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	portId: string;
+}
+
+export const DeletePort = ({ portId }: Props) => {
+	const utils = api.useUtils();
+	const { mutateAsync, isLoading } = api.port.delete.useMutation();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<TrashIcon className="size-4  text-muted-foreground " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the port
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								portId,
+							})
+								.then((data) => {
+									utils.application.one.invalidate({
+										applicationId: data?.applicationId,
+									});
+
+									toast.success("Port delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the port");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,88 @@
+import React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { Rss } from "lucide-react";
+import { AddPort } from "./add-port";
+import { DeletePort } from "./delete-port";
+import { UpdatePort } from "./update-port";
+interface Props {
+	applicationId: string;
+}
+
+export const ShowPorts = ({ applicationId }: Props) => {
+	const { data } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
+				<div>
+					<CardTitle className="text-xl">Ports</CardTitle>
+					<CardDescription>
+						the ports allows you to expose your application to the internet
+					</CardDescription>
+				</div>
+
+				{data && data?.ports.length > 0 && (
+					<AddPort applicationId={applicationId}>Add Port</AddPort>
+				)}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data?.ports.length === 0 ? (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+						<Rss className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							No ports configured
+						</span>
+						<AddPort applicationId={applicationId}>Add Port</AddPort>
+					</div>
+				) : (
+					<div className="flex flex-col pt-2">
+						<div className="flex flex-col gap-6">
+							{data?.ports.map((port) => (
+								<div key={port.portId}>
+									<div className="flex w-full flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-10 border rounded-lg p-4">
+										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 flex-col gap-4 sm:gap-8">
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Published Port</span>
+												<span className="text-sm text-muted-foreground">
+													{port.publishedPort}
+												</span>
+											</div>
+											<div className="flex flex-col gap-1">
+												<span className="font-medium"> Target Port</span>
+												<span className="text-sm text-muted-foreground">
+													{port.targetPort}
+												</span>
+											</div>
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Protocol</span>
+												<span className="text-sm text-muted-foreground">
+													{port.protocol.toUpperCase()}
+												</span>
+											</div>
+										</div>
+										<div className="flex flex-row gap-4">
+											<UpdatePort portId={port.portId} />
+											<DeletePort portId={port.portId} />
+										</div>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -0,0 +1,228 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, 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,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+
+const UpdatePortSchema = z.object({
+	publishedPort: z.number().int().min(1).max(65535),
+	targetPort: z.number().int().min(1).max(65535),
+	protocol: z.enum(["tcp", "udp"], {
+		required_error: "Protocol is required",
+		invalid_type_error: "Protocol must be a valid protocol",
+	}),
+});
+
+type UpdatePort = z.infer<typeof UpdatePortSchema>;
+
+interface Props {
+	portId: string;
+}
+
+export const UpdatePort = ({ portId }: Props) => {
+	const utils = api.useUtils();
+	const { data } = api.port.one.useQuery(
+		{
+			portId,
+		},
+		{
+			enabled: !!portId,
+		},
+	);
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.port.update.useMutation();
+
+	const form = useForm<UpdatePort>({
+		defaultValues: {},
+		resolver: zodResolver(UpdatePortSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				publishedPort: data.publishedPort,
+				targetPort: data.targetPort,
+				protocol: data.protocol,
+			});
+		}
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (data: UpdatePort) => {
+		await mutateAsync({
+			portId,
+			publishedPort: data.publishedPort,
+			targetPort: data.targetPort,
+			protocol: data.protocol,
+		})
+			.then(async (response) => {
+				toast.success("Port Updated");
+				await utils.application.one.invalidate({
+					applicationId: response?.applicationId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to update the port");
+			});
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<Pencil className="size-4  text-muted-foreground" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Update</DialogTitle>
+					<DialogDescription>Update the port</DialogDescription>
+				</DialogHeader>
+				{isError && (
+					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error?.message}
+						</span>
+					</div>
+				)}
+
+				<Form {...form}>
+					<form
+						id="hook-form-update-redirect"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="publishedPort"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Published Port</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="1-65535"
+												{...field}
+												value={field.value?.toString() || ""}
+												onChange={(e) => {
+													const value = e.target.value;
+													if (value === "") {
+														field.onChange(0);
+													} else {
+														const number = Number.parseInt(value, 10);
+														if (!Number.isNaN(number)) {
+															field.onChange(number);
+														}
+													}
+												}}
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="targetPort"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Target Port</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="1-65535"
+												{...field}
+												value={field.value?.toString() || ""}
+												onChange={(e) => {
+													const value = e.target.value;
+													if (value === "") {
+														field.onChange(0);
+													} else {
+														const number = Number.parseInt(value, 10);
+														if (!Number.isNaN(number)) {
+															field.onChange(number);
+														}
+													}
+												}}
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="protocol"
+								render={({ field }) => {
+									return (
+										<FormItem className="md:col-span-2">
+											<FormLabel>Protocol</FormLabel>
+											<Select
+												onValueChange={field.onChange}
+												value={field.value}
+											>
+												<FormControl>
+													<SelectTrigger>
+														<SelectValue placeholder="Select a protocol" />
+													</SelectTrigger>
+												</FormControl>
+												<SelectContent defaultValue={"none"}>
+													<SelectItem value={"none"} disabled>
+														None
+													</SelectItem>
+													<SelectItem value={"tcp"}>TCP</SelectItem>
+													<SelectItem value={"udp"}>UDP</SelectItem>
+												</SelectContent>
+											</Select>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={isLoading}
+							form="hook-form-update-redirect"
+							type="submit"
+						>
+							Update
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,183 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	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 { AlertTriangle } 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"),
+	permanent: z.boolean().default(false),
+	replacement: z.string().min(1, "Replacement required"),
+});
+
+type AddRedirect = z.infer<typeof AddRedirectchema>;
+
+interface Props {
+	applicationId: string;
+	children?: React.ReactNode;
+}
+
+export const AddRedirect = ({
+	applicationId,
+	children = <PlusIcon className="h-4 w-4" />,
+}: Props) => {
+	const utils = api.useUtils();
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.redirects.create.useMutation();
+
+	const form = useForm<AddRedirect>({
+		defaultValues: {
+			permanent: false,
+			regex: "",
+			replacement: "",
+		},
+		resolver: zodResolver(AddRedirectchema),
+	});
+
+	useEffect(() => {
+		form.reset({
+			permanent: false,
+			regex: "",
+			replacement: "",
+		});
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+
+	const onSubmit = async (data: AddRedirect) => {
+		await mutateAsync({
+			applicationId,
+			...data,
+		})
+			.then(async () => {
+				toast.success("Redirect Created");
+				await utils.application.one.invalidate({
+					applicationId,
+				});
+				await utils.application.readTraefikConfig.invalidate({
+					applicationId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to create the redirect");
+			});
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button>{children}</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Redirects</DialogTitle>
+					<DialogDescription>
+						Redirects are used to redirect requests to another url.
+					</DialogDescription>
+				</DialogHeader>
+				{isError && (
+					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error?.message}
+						</span>
+					</div>
+				)}
+
+				<Form {...form}>
+					<form
+						id="hook-form-add-redirect"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="regex"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Regex</FormLabel>
+										<FormControl>
+											<Input placeholder="^http://localhost/(.*)" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="replacement"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Replacement</FormLabel>
+										<FormControl>
+											<Input placeholder="http://mydomain/$${1}" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="permanent"
+								render={({ field }) => (
+									<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+										<div className="space-y-0.5">
+											<FormLabel>Permanent</FormLabel>
+											<FormDescription>
+												Set the permanent option to true to apply a permanent
+												redirection.
+											</FormDescription>
+										</div>
+										<FormControl>
+											<Switch
+												checked={field.value}
+												onCheckedChange={field.onChange}
+											/>
+										</FormControl>
+									</FormItem>
+								)}
+							/>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={isLoading}
+							form="hook-form-add-redirect"
+							type="submit"
+						>
+							Create
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,66 @@
+import {
+	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";
+import { TrashIcon } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	redirectId: string;
+}
+
+export const DeleteRedirect = ({ redirectId }: Props) => {
+	const utils = api.useUtils();
+	const { mutateAsync, isLoading } = api.redirects.delete.useMutation();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<TrashIcon className="size-4  text-muted-foreground " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the
+						redirect
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								redirectId,
+							})
+								.then((data) => {
+									utils.application.one.invalidate({
+										applicationId: data?.applicationId,
+									});
+									utils.application.readTraefikConfig.invalidate({
+										applicationId: data?.applicationId,
+									});
+									toast.success("Redirect delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the redirect");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,91 @@
+import React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { Split } from "lucide-react";
+import { AddRedirect } from "./add-redirect";
+import { DeleteRedirect } from "./delete-redirect";
+import { UpdateRedirect } from "./update-redirect";
+interface Props {
+	applicationId: string;
+}
+
+export const ShowRedirects = ({ applicationId }: Props) => {
+	const { data } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
+				<div>
+					<CardTitle className="text-xl">Redirects</CardTitle>
+					<CardDescription>
+						If you want to redirect requests to this application use the
+						following config to setup the redirects
+					</CardDescription>
+				</div>
+
+				{data && data?.redirects.length > 0 && (
+					<AddRedirect applicationId={applicationId}>Add Redirect</AddRedirect>
+				)}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data?.redirects.length === 0 ? (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+						<Split className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							No redirects configured
+						</span>
+						<AddRedirect applicationId={applicationId}>
+							Add Redirect
+						</AddRedirect>
+					</div>
+				) : (
+					<div className="flex flex-col pt-2">
+						<div className="flex flex-col gap-6">
+							{data?.redirects.map((redirect) => (
+								<div key={redirect.redirectId}>
+									<div className="flex w-full flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-10 border rounded-lg p-4">
+										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 flex-col gap-4 sm:gap-8">
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Regex</span>
+												<span className="text-sm text-muted-foreground">
+													{redirect.regex}
+												</span>
+											</div>
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Replacement</span>
+												<span className="text-sm text-muted-foreground">
+													{redirect.replacement}
+												</span>
+											</div>
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Permanent</span>
+												<span className="text-sm text-muted-foreground">
+													{redirect.permanent ? "Yes" : "No"}
+												</span>
+											</div>
+										</div>
+										<div className="flex flex-row gap-4">
+											<UpdateRedirect redirectId={redirect.redirectId} />
+											<DeleteRedirect redirectId={redirect.redirectId} />
+										</div>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -0,0 +1,186 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	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 { AlertTriangle, 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),
+	replacement: z.string().min(1, "Replacement required"),
+});
+
+type UpdateRedirect = z.infer<typeof UpdateRedirectSchema>;
+
+interface Props {
+	redirectId: string;
+}
+
+export const UpdateRedirect = ({ redirectId }: Props) => {
+	const utils = api.useUtils();
+	const { data } = api.redirects.one.useQuery(
+		{
+			redirectId,
+		},
+		{
+			enabled: !!redirectId,
+		},
+	);
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.redirects.update.useMutation();
+
+	const form = useForm<UpdateRedirect>({
+		defaultValues: {
+			permanent: false,
+			regex: "",
+			replacement: "",
+		},
+		resolver: zodResolver(UpdateRedirectSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				permanent: data.permanent || false,
+				regex: data.regex || "",
+				replacement: data.replacement || "",
+			});
+		}
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (data: UpdateRedirect) => {
+		await mutateAsync({
+			redirectId,
+			permanent: data.permanent,
+			regex: data.regex,
+			replacement: data.replacement,
+		})
+			.then(async (response) => {
+				toast.success("Redirect Updated");
+				await utils.application.one.invalidate({
+					applicationId: response?.applicationId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to update the redirect");
+			});
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<Pencil className="size-4  text-muted-foreground" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Update</DialogTitle>
+					<DialogDescription>Update the redirect</DialogDescription>
+				</DialogHeader>
+				{isError && (
+					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error?.message}
+						</span>
+					</div>
+				)}
+
+				<Form {...form}>
+					<form
+						id="hook-form-update-redirect"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="regex"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Regex</FormLabel>
+										<FormControl>
+											<Input placeholder="^http://localhost/(.*)" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="replacement"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Replacement</FormLabel>
+										<FormControl>
+											<Input placeholder="http://mydomain/$${1}" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="permanent"
+								render={({ field }) => (
+									<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+										<div className="space-y-0.5">
+											<FormLabel>Permanent</FormLabel>
+											<FormDescription>
+												Set the permanent option to true to apply a permanent
+												redirection.
+											</FormDescription>
+										</div>
+										<FormControl>
+											<Switch
+												checked={field.value}
+												onCheckedChange={field.onChange}
+											/>
+										</FormControl>
+									</FormItem>
+								)}
+							/>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={isLoading}
+							form="hook-form-update-redirect"
+							type="submit"
+						>
+							Update
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,153 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+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 { PlusIcon } from "lucide-react";
+import { z } from "zod";
+
+const AddSecuritychema = z.object({
+	username: z.string().min(1, "Username is required"),
+	password: z.string().min(1, "Password is required"),
+});
+
+type AddSecurity = z.infer<typeof AddSecuritychema>;
+
+interface Props {
+	applicationId: string;
+	children?: React.ReactNode;
+}
+
+export const AddSecurity = ({
+	applicationId,
+	children = <PlusIcon className="h-4 w-4" />,
+}: Props) => {
+	const utils = api.useUtils();
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.security.create.useMutation();
+
+	const form = useForm<AddSecurity>({
+		defaultValues: {
+			username: "",
+			password: "",
+		},
+		resolver: zodResolver(AddSecuritychema),
+	});
+
+	useEffect(() => {
+		form.reset();
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+
+	const onSubmit = async (data: AddSecurity) => {
+		await mutateAsync({
+			applicationId,
+			...data,
+		})
+			.then(async () => {
+				toast.success("Security Created");
+				await utils.application.one.invalidate({
+					applicationId,
+				});
+				await utils.application.readTraefikConfig.invalidate({
+					applicationId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to create the security");
+			});
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button>{children}</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Security</DialogTitle>
+					<DialogDescription>
+						Add security to your application
+					</DialogDescription>
+				</DialogHeader>
+				{isError && (
+					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error?.message}
+						</span>
+					</div>
+				)}
+
+				<Form {...form}>
+					<form
+						id="hook-form-add-security"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="username"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Username</FormLabel>
+										<FormControl>
+											<Input placeholder="test1" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Password</FormLabel>
+										<FormControl>
+											<Input placeholder="test" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={isLoading}
+							form="hook-form-add-security"
+							type="submit"
+						>
+							Create
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,66 @@
+import {
+	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";
+import { TrashIcon } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	securityId: string;
+}
+
+export const DeleteSecurity = ({ securityId }: Props) => {
+	const utils = api.useUtils();
+	const { mutateAsync, isLoading } = api.security.delete.useMutation();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<TrashIcon className="size-4  text-muted-foreground " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the
+						security
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								securityId,
+							})
+								.then((data) => {
+									utils.application.one.invalidate({
+										applicationId: data?.applicationId,
+									});
+									utils.application.readTraefikConfig.invalidate({
+										applicationId: data?.applicationId,
+									});
+									toast.success("Security delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the security");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,82 @@
+import React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { LockKeyhole } from "lucide-react";
+import { AddSecurity } from "./add-security";
+import { DeleteSecurity } from "./delete-security";
+import { UpdateSecurity } from "./update-security";
+interface Props {
+	applicationId: string;
+}
+
+export const ShowSecurity = ({ applicationId }: Props) => {
+	const { data } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
+				<div>
+					<CardTitle className="text-xl">Security</CardTitle>
+					<CardDescription>Add basic auth to your application</CardDescription>
+				</div>
+
+				{data && data?.security.length > 0 && (
+					<AddSecurity applicationId={applicationId}>Add Security</AddSecurity>
+				)}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data?.security.length === 0 ? (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+						<LockKeyhole className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							No security configured
+						</span>
+						<AddSecurity applicationId={applicationId}>
+							Add Security
+						</AddSecurity>
+					</div>
+				) : (
+					<div className="flex flex-col pt-2">
+						<div className="flex flex-col gap-6 ">
+							{data?.security.map((security) => (
+								<div key={security.securityId}>
+									<div className="flex w-full flex-col sm:flex-row justify-between sm:items-center gap-4 sm:gap-10 border rounded-lg p-4">
+										<div className="grid grid-cols-1 sm:grid-cols-2 flex-col gap-4 sm:gap-8">
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Username</span>
+												<span className="text-sm text-muted-foreground">
+													{security.username}
+												</span>
+											</div>
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Password</span>
+												<span className="text-sm text-muted-foreground">
+													{security.password}
+												</span>
+											</div>
+										</div>
+										<div className="flex flex-row gap-2">
+											<UpdateSecurity securityId={security.securityId} />
+											<DeleteSecurity securityId={security.securityId} />
+										</div>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -0,0 +1,159 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, Pencil } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const UpdateSecuritySchema = z.object({
+	username: z.string().min(1, "Username is required"),
+	password: z.string().min(1, "Password is required"),
+});
+
+type UpdateSecurity = z.infer<typeof UpdateSecuritySchema>;
+
+interface Props {
+	securityId: string;
+}
+
+export const UpdateSecurity = ({ securityId }: Props) => {
+	const utils = api.useUtils();
+	const { data } = api.security.one.useQuery(
+		{
+			securityId,
+		},
+		{
+			enabled: !!securityId,
+		},
+	);
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.security.update.useMutation();
+
+	const form = useForm<UpdateSecurity>({
+		defaultValues: {
+			username: "",
+			password: "",
+		},
+		resolver: zodResolver(UpdateSecuritySchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				username: data.username || "",
+				password: data.password || "",
+			});
+		}
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (data: UpdateSecurity) => {
+		await mutateAsync({
+			securityId,
+			username: data.username,
+			password: data.password,
+		})
+			.then(async (response) => {
+				toast.success("Security Updated");
+				await utils.application.one.invalidate({
+					applicationId: response?.applicationId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to update the security");
+			});
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<Pencil className="size-4  text-muted-foreground" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Update</DialogTitle>
+					<DialogDescription>Update the security</DialogDescription>
+				</DialogHeader>
+				{isError && (
+					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error?.message}
+						</span>
+					</div>
+				)}
+
+				<Form {...form}>
+					<form
+						id="hook-form-update-security"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4 "
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="username"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Username</FormLabel>
+										<FormControl>
+											<Input placeholder="test1" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Password</FormLabel>
+										<FormControl>
+											<Input placeholder="test" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={isLoading}
+							form="hook-form-update-security"
+							type="submit"
+						>
+							Update
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,226 @@
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	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";
+
+const addResourcesApplication = z.object({
+	memoryReservation: z.number().nullable().optional(),
+	cpuLimit: z.number().nullable().optional(),
+	memoryLimit: z.number().nullable().optional(),
+	cpuReservation: z.number().nullable().optional(),
+});
+interface Props {
+	applicationId: string;
+}
+
+type AddResourcesApplication = z.infer<typeof addResourcesApplication>;
+
+export const ShowApplicationResources = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+	const { mutateAsync, isLoading } = api.application.update.useMutation();
+	const form = useForm<AddResourcesApplication>({
+		defaultValues: {},
+		resolver: zodResolver(addResourcesApplication),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				cpuLimit: data?.cpuLimit || undefined,
+				cpuReservation: data?.cpuReservation || undefined,
+				memoryLimit: data?.memoryLimit || undefined,
+				memoryReservation: data?.memoryReservation || undefined,
+			});
+		}
+	}, [data, form, form.reset]);
+
+	const onSubmit = async (formData: AddResourcesApplication) => {
+		await mutateAsync({
+			applicationId,
+			cpuLimit: formData.cpuLimit || null,
+			cpuReservation: formData.cpuReservation || null,
+			memoryLimit: formData.memoryLimit || null,
+			memoryReservation: formData.memoryReservation || null,
+		})
+			.then(async () => {
+				toast.success("Resources Updated");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to Update the resources");
+			});
+	};
+	return (
+		<Card className="bg-background">
+			<CardHeader>
+				<CardTitle className="text-xl">Resources</CardTitle>
+				<CardDescription>
+					If you want to decrease or increase the resources to a specific
+					application or database
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<Form {...form}>
+					<form
+						id="hook-form"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-8 "
+					>
+						<div className="grid w-full md:grid-cols-2 gap-4">
+							<FormField
+								control={form.control}
+								name="memoryReservation"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Memory Reservation</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="256 MB"
+												{...field}
+												value={field.value?.toString() || ""}
+												onChange={(e) => {
+													const value = e.target.value;
+													if (value === "") {
+														field.onChange(null);
+													} else {
+														const number = Number.parseInt(value, 10);
+														if (!Number.isNaN(number)) {
+															field.onChange(number);
+														}
+													}
+												}}
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="memoryLimit"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Memory Limit</FormLabel>
+											<FormControl>
+												<Input
+													placeholder={"1024 MB"}
+													{...field}
+													value={field.value?.toString() || ""}
+													onChange={(e) => {
+														const value = e.target.value;
+														if (value === "") {
+															field.onChange(null);
+														} else {
+															const number = Number.parseInt(value, 10);
+															if (!Number.isNaN(number)) {
+																field.onChange(number);
+															}
+														}
+													}}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+
+							<FormField
+								control={form.control}
+								name="cpuLimit"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Cpu Limit</FormLabel>
+											<FormControl>
+												<Input
+													placeholder={"2"}
+													{...field}
+													type="number"
+													value={field.value?.toString() || ""}
+													onChange={(e) => {
+														const value = e.target.value;
+														if (
+															value === "" ||
+															/^[0-9]*\.?[0-9]*$/.test(value)
+														) {
+															const float = Number.parseFloat(value);
+															field.onChange(float);
+														}
+													}}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="cpuReservation"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Cpu Reservation</FormLabel>
+											<FormControl>
+												<Input
+													placeholder={"1"}
+													{...field}
+													type="number"
+													value={field.value?.toString() || ""}
+													onChange={(e) => {
+														const value = e.target.value;
+														if (
+															value === "" ||
+															/^[0-9]*\.?[0-9]*$/.test(value)
+														) {
+															const float = Number.parseFloat(value);
+															field.onChange(float);
+														}
+													}}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+						</div>
+						<div className="flex w-full justify-end">
+							<Button isLoading={isLoading} type="submit">
+								Save
+							</Button>
+						</div>
+					</form>
+				</Form>
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -0,0 +1,59 @@
+import React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { File } from "lucide-react";
+import { UpdateTraefikConfig } from "./update-traefik-config";
+interface Props {
+	applicationId: string;
+}
+
+export const ShowTraefikConfig = ({ applicationId }: Props) => {
+	const { data } = api.application.readTraefikConfig.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between">
+				<div>
+					<CardTitle className="text-xl">Traefik</CardTitle>
+					<CardDescription>
+						Modify the traefik config, in rare cases you may need to add
+						specific config, becarefull because modifying incorrectly can break
+						traefik and your application
+					</CardDescription>
+				</div>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data === null ? (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+						<File className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							No traefik config detected
+						</span>
+					</div>
+				) : (
+					<div className="flex flex-col pt-2 relative">
+						<div className="flex flex-col  gap-6 bg-input p-4 rounded-md max-h-[35rem] min-h-[10rem] overflow-y-auto">
+							<div>
+								<pre className="font-sans">{data || "Empty"}</pre>
+							</div>
+							<div className="flex justify-end absolute z-50 right-6">
+								<UpdateTraefikConfig applicationId={applicationId} />
+							</div>
+						</div>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -0,0 +1,180 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+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 jsyaml from "js-yaml";
+
+const UpdateTraefikConfigSchema = z.object({
+	traefikConfig: z.string(),
+});
+
+type UpdateTraefikConfig = z.infer<typeof UpdateTraefikConfigSchema>;
+
+interface Props {
+	applicationId: string;
+}
+
+export const validateAndFormatYAML = (yamlText: string) => {
+	try {
+		const obj = jsyaml.load(yamlText);
+		const formattedYaml = jsyaml.dump(obj, { indent: 4 });
+		return { valid: true, formattedYaml, error: null };
+	} catch (error) {
+		if (error instanceof jsyaml.YAMLException) {
+			return {
+				valid: false,
+				formattedYaml: yamlText,
+				error: error.message,
+			};
+		}
+		return {
+			valid: false,
+			formattedYaml: yamlText,
+			error: "An unexpected error occurred while processing the YAML.",
+		};
+	}
+};
+
+export const UpdateTraefikConfig = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.readTraefikConfig.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.application.updateTraefikConfig.useMutation();
+
+	const form = useForm<UpdateTraefikConfig>({
+		defaultValues: {
+			traefikConfig: "",
+		},
+		resolver: zodResolver(UpdateTraefikConfigSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				traefikConfig: data || "",
+			});
+		}
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (data: UpdateTraefikConfig) => {
+		const { valid, error } = validateAndFormatYAML(data.traefikConfig);
+		if (!valid) {
+			form.setError("traefikConfig", {
+				type: "manual",
+				message: error || "Invalid YAML",
+			});
+			return;
+		}
+		form.clearErrors("traefikConfig");
+		await mutateAsync({
+			applicationId,
+			traefikConfig: data.traefikConfig,
+		})
+			.then(async () => {
+				toast.success("Traefik config Updated");
+				refetch();
+			})
+			.catch(() => {
+				toast.error("Error to update the traefik config");
+			});
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button isLoading={isLoading}>Modify</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-4xl">
+				<DialogHeader>
+					<DialogTitle>Update traefik config</DialogTitle>
+					<DialogDescription>Update the traefik config</DialogDescription>
+				</DialogHeader>
+				{isError && (
+					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error?.message}
+						</span>
+					</div>
+				)}
+
+				<Form {...form}>
+					<form
+						id="hook-form-update-traefik-config"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full py-4"
+					>
+						<div className="flex flex-col">
+							<FormField
+								control={form.control}
+								name="traefikConfig"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Traefik config</FormLabel>
+										<FormControl>
+											<Textarea
+												className="h-[35rem]"
+												placeholder={`http:
+routers:
+    router-name:
+        rule: Host('domain.com')
+        service: container-name
+        entryPoints:
+            - web
+        tls: false
+        middlewares: []
+                                                    `}
+												{...field}
+											/>
+										</FormControl>
+
+										<pre>
+											<FormMessage />
+										</pre>
+									</FormItem>
+								)}
+							/>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={isLoading}
+							form="hook-form-update-traefik-config"
+							type="submit"
+						>
+							Update
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,330 @@
+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 {
+	Dialog,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+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";
+interface Props {
+	serviceId: string;
+	serviceType:
+		| "application"
+		| "postgres"
+		| "redis"
+		| "mongo"
+		| "redis"
+		| "mysql"
+		| "mariadb";
+	refetch: () => void;
+	children?: React.ReactNode;
+}
+
+const mountSchema = z.object({
+	mountPath: z.string().min(1, "Mount path required"),
+});
+
+const mySchema = z.discriminatedUnion("type", [
+	z
+		.object({
+			type: z.literal("bind"),
+			hostPath: z.string().min(1, "Host path required"),
+		})
+		.merge(mountSchema),
+	z
+		.object({
+			type: z.literal("volume"),
+			volumeName: z.string().min(1, "Volume name required"),
+		})
+		.merge(mountSchema),
+	z
+		.object({
+			type: z.literal("file"),
+			content: z.string().optional(),
+		})
+		.merge(mountSchema),
+]);
+
+type AddMount = z.infer<typeof mySchema>;
+
+export const AddVolumes = ({
+	serviceId,
+	serviceType,
+	refetch,
+	children = <PlusIcon className="h-4 w-4" />,
+}: Props) => {
+	const { mutateAsync } = api.mounts.create.useMutation();
+	const form = useForm<AddMount>({
+		defaultValues: {
+			type: "bind",
+			hostPath: "",
+			mountPath: "",
+		},
+		resolver: zodResolver(mySchema),
+	});
+	const type = form.watch("type");
+
+	useEffect(() => {
+		form.reset();
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+
+	const onSubmit = async (data: AddMount) => {
+		if (data.type === "bind") {
+			await mutateAsync({
+				serviceId,
+				hostPath: data.hostPath,
+				mountPath: data.mountPath,
+				type: data.type,
+				serviceType,
+			})
+				.then(() => {
+					toast.success("Mount Created");
+				})
+				.catch(() => {
+					toast.error("Error to create the Bind mount");
+				});
+		} else if (data.type === "volume") {
+			await mutateAsync({
+				serviceId,
+				volumeName: data.volumeName,
+				mountPath: data.mountPath,
+				type: data.type,
+				serviceType,
+			})
+				.then(() => {
+					toast.success("Mount Created");
+				})
+				.catch(() => {
+					toast.error("Error to create the Volume mount");
+				});
+		} else if (data.type === "file") {
+			await mutateAsync({
+				serviceId,
+				content: data.content,
+				mountPath: data.mountPath,
+				type: data.type,
+				serviceType,
+			})
+				.then(() => {
+					toast.success("Mount Created");
+				})
+				.catch(() => {
+					toast.error("Error to create the File mount");
+				});
+		}
+
+		refetch();
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger className="" asChild>
+				<Button>{children}</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>Volumes / Mounts</DialogTitle>
+				</DialogHeader>
+				{/* {isError && (
+        <div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+          <AlertTriangle className="text-red-600 dark:text-red-400" />
+          <span className="text-sm text-red-600 dark:text-red-400">
+            {error?.message}
+          </span>
+        </div>
+      )} */}
+
+				<Form {...form}>
+					<form
+						id="hook-form-volume"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-8 "
+					>
+						<FormField
+							control={form.control}
+							defaultValue={form.control._defaultValues.type}
+							name="type"
+							render={({ field }) => (
+								<FormItem className="space-y-3">
+									<FormLabel className="text-muted-foreground">
+										Select the Mount Type
+									</FormLabel>
+									<FormControl>
+										<RadioGroup
+											onValueChange={field.onChange}
+											defaultValue={field.value}
+											className="grid w-full grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"
+										>
+											<FormItem className="flex items-center space-x-3 space-y-0">
+												<FormControl className="w-full">
+													<div>
+														<RadioGroupItem
+															value="bind"
+															id="bind"
+															className="peer sr-only"
+														/>
+														<Label
+															htmlFor="bind"
+															className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+														>
+															Bind Mount
+														</Label>
+													</div>
+												</FormControl>
+											</FormItem>
+											<FormItem className="flex items-center space-x-3 space-y-0">
+												<FormControl className="w-full">
+													<div>
+														<RadioGroupItem
+															value="volume"
+															id="volume"
+															className="peer sr-only"
+														/>
+														<Label
+															htmlFor="volume"
+															className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+														>
+															Volume Mount
+														</Label>
+													</div>
+												</FormControl>
+											</FormItem>
+											<FormItem className="flex items-center space-x-3 space-y-0">
+												<FormControl className="w-full">
+													<div>
+														<RadioGroupItem
+															value="file"
+															id="file"
+															className="peer sr-only"
+														/>
+														<Label
+															htmlFor="file"
+															className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+														>
+															File Mount
+														</Label>
+													</div>
+												</FormControl>
+											</FormItem>
+										</RadioGroup>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<div className="flex flex-col gap-4">
+							<FormLabel className="text-lg font-semibold leading-none tracking-tight">
+								Fill the next fields.
+							</FormLabel>
+							<div className="flex flex-col gap-2">
+								{type === "bind" && (
+									<FormField
+										control={form.control}
+										name="hostPath"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Host Path</FormLabel>
+												<FormControl>
+													<Input placeholder="Host Path" {...field} />
+												</FormControl>
+
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+								{type === "volume" && (
+									<FormField
+										control={form.control}
+										name="volumeName"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Volume Name</FormLabel>
+												<FormControl>
+													<Input
+														placeholder="Volume Name"
+														{...field}
+														value={field.value || ""}
+													/>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+
+								{type === "file" && (
+									<FormField
+										control={form.control}
+										name="content"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Content</FormLabel>
+												<FormControl>
+													<FormControl>
+														<Textarea
+															placeholder="Any content"
+															className="h-64"
+															{...field}
+														/>
+													</FormControl>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+
+								<FormField
+									control={form.control}
+									name="mountPath"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Mount Path</FormLabel>
+											<FormControl>
+												<Input placeholder="Mount Path" {...field} />
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							</div>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={form.formState.isSubmitting}
+							form="hook-form-volume"
+							type="submit"
+						>
+							Create
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,61 @@
+import React from "react";
+import {
+	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";
+import { TrashIcon } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	mountId: string;
+	refetch: () => void;
+}
+export const DeleteVolume = ({ mountId, refetch }: Props) => {
+	const { mutateAsync, isLoading } = api.mounts.remove.useMutation();
+
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<TrashIcon className="size-4  text-muted-foreground " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the mount
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								mountId,
+							})
+								.then(() => {
+									refetch();
+									toast.success("Mount deleted succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the mount");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,129 @@
+import React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { AlertTriangle, Package } from "lucide-react";
+import { AddVolumes } from "./add-volumes";
+import { DeleteVolume } from "./delete-volume";
+interface Props {
+	applicationId: string;
+}
+
+export const ShowVolumes = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
+				<div>
+					<CardTitle className="text-xl">Volumes</CardTitle>
+					<CardDescription>
+						If you want to persist data in this application use the following
+						config to setup the volumes
+					</CardDescription>
+				</div>
+
+				{data && data?.mounts.length > 0 && (
+					<AddVolumes
+						serviceId={applicationId}
+						refetch={refetch}
+						serviceType="application"
+					>
+						Add Volume
+					</AddVolumes>
+				)}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data?.mounts.length === 0 ? (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+						<Package className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							No volumes/mounts configured
+						</span>
+						<AddVolumes
+							serviceId={applicationId}
+							refetch={refetch}
+							serviceType="application"
+						>
+							Add Volume
+						</AddVolumes>
+					</div>
+				) : (
+					<div className="flex flex-col pt-2">
+						<div className="flex flex-col sm:flex-row items-center gap-4 rounded-lg bg-yellow-50 p-2 dark:bg-yellow-950">
+							<AlertTriangle className="text-yellow-600 size-5 sm:size-8 dark:text-yellow-400" />
+							<span className="text-sm text-yellow-600 dark:text-yellow-400">
+								Please remember to click Redeploy after adding, editing, or
+								deleting a mount to apply the changes.
+							</span>
+						</div>
+						<div className="flex flex-col gap-6 pt-6">
+							{data?.mounts.map((mount) => (
+								<div key={mount.mountId}>
+									<div
+										key={mount.mountId}
+										className="flex w-full flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-10 border rounded-lg p-4"
+									>
+										{/* <Package className="size-8 self-center text-muted-foreground" /> */}
+										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 flex-col gap-4 sm:gap-8">
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Mount Type</span>
+												<span className="text-sm text-muted-foreground">
+													{mount.type.toUpperCase()}
+												</span>
+											</div>
+											{mount.type === "volume" && (
+												<div className="flex flex-col gap-1">
+													<span className="font-medium">Volume Name</span>
+													<span className="text-sm text-muted-foreground">
+														{mount.volumeName}
+													</span>
+												</div>
+											)}
+
+											{mount.type === "file" && (
+												<div className="flex flex-col gap-1">
+													<span className="font-medium">Content</span>
+													<span className="text-sm text-muted-foreground">
+														{mount.content}
+													</span>
+												</div>
+											)}
+											{mount.type === "bind" && (
+												<div className="flex flex-col gap-1">
+													<span className="font-medium">Host Path</span>
+													<span className="text-sm text-muted-foreground">
+														{mount.hostPath}
+													</span>
+												</div>
+											)}
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Mount Path</span>
+												<span className="text-sm text-muted-foreground">
+													{mount.mountPath}
+												</span>
+											</div>
+										</div>
+										<div>
+											<DeleteVolume mountId={mount.mountId} refetch={refetch} />
+										</div>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

components/dashboard/application/build/show.tsx

@@ -0,0 +1,213 @@
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+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";
+
+enum BuildType {
+  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"),
+  }),
+]);
+
+type AddTemplate = z.infer<typeof mySchema>;
+interface Props {
+  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 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 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>
+
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
+            )}
+            <div className="flex w-full justify-end">
+              <Button isLoading={isLoading} type="submit">
+                Save
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </CardContent>
+    </Card>
+  );
+};

components/dashboard/application/delete-application.tsx

@@ -0,0 +1,63 @@
+import {
+	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";
+import { TrashIcon } from "lucide-react";
+import { useRouter } from "next/router";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+
+export const DeleteApplication = ({ applicationId }: Props) => {
+	const { mutateAsync, isLoading } = api.application.delete.useMutation();
+	const { push } = useRouter();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="destructive" isLoading={isLoading}>
+					<TrashIcon className="size-4 " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the
+						application
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								applicationId,
+							})
+								.then((data) => {
+									push(`/dashboard/project/${data?.projectId}`);
+
+									toast.success("Application delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete Application");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

components/dashboard/application/deployments/cancel-queues.tsx

@@ -0,0 +1,61 @@
+import {
+	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";
+import { Paintbrush } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+
+export const CancelQueues = ({ applicationId }: Props) => {
+	const { mutateAsync, isLoading } = api.application.cleanQueues.useMutation();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="destructive" className="w-fit" isLoading={isLoading}>
+					Cancel Queues
+					<Paintbrush className="size-4" />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>
+						Are you sure to cancel the incoming deployments?
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will cancel all the incoming deployments
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								applicationId,
+							})
+								.then(() => {
+									toast.success("Queues are being cleaned");
+								})
+								.catch((err) => {
+									toast.error(err.message);
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,60 @@
+import React from "react";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { api } from "@/utils/api";
+import { RefreshCcw } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+export const RefreshToken = ({ applicationId }: Props) => {
+	const { mutateAsync } = api.application.refreshToken.useMutation();
+	const utils = api.useUtils();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger>
+				<RefreshCcw className="h-4 w-4 cursor-pointer text-muted-foreground" />
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the
+						domain
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								applicationId,
+							})
+								.then(() => {
+									utils.application.one.invalidate({
+										applicationId,
+									});
+									toast.success("Refresh updated");
+								})
+								.catch(() => {
+									toast.error("Error to update the refresh token");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,69 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { useEffect, useRef, useState } from "react";
+
+interface Props {
+	logPath: string | null;
+	open: boolean;
+	onClose: () => void;
+}
+export const ShowDeployment = ({ logPath, open, onClose }: Props) => {
+	const [data, setData] = useState("");
+	const endOfLogsRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (!open || !logPath) return;
+
+		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+
+		const wsUrl = `${protocol}//${window.location.host}/listen-deployment?logPath=${logPath}`;
+		const ws = new WebSocket(wsUrl);
+
+		ws.onmessage = (e) => {
+			setData((currentData) => currentData + e.data);
+		};
+
+		return () => ws.close();
+	}, [logPath, open]);
+
+	const scrollToBottom = () => {
+		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
+	};
+
+	useEffect(() => {
+		scrollToBottom();
+	}, [data]);
+
+	return (
+		<Dialog
+			open={open}
+			onOpenChange={(e) => {
+				onClose();
+				if (!e) setData("");
+			}}
+		>
+			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+				<DialogHeader>
+					<DialogTitle>Deployment</DialogTitle>
+					<DialogDescription>
+						See all the details of this deployment
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
+					<code>
+						<pre className="whitespace-pre-wrap break-words">
+							{data || "Loading..."}
+						</pre>
+						<div ref={endOfLogsRef} />
+					</code>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,115 @@
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+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";
+
+interface Props {
+	applicationId: string;
+}
+export const ShowDeployments = ({ applicationId }: Props) => {
+	const [activeLog, setActiveLog] = useState<string | null>(null);
+	const { data } = api.application.one.useQuery({ applicationId });
+	const { data: deployments } = api.deployment.all.useQuery(
+		{ applicationId },
+		{
+			enabled: !!applicationId,
+			refetchInterval: 5000,
+		},
+	);
+	const [url, setUrl] = React.useState("");
+	useEffect(() => {
+		setUrl(document.location.origin);
+	}, []);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
+				<div className="flex flex-col gap-2">
+					<CardTitle className="text-xl">Deployments</CardTitle>
+					<CardDescription>
+						See all the 10 last deployments for this application
+					</CardDescription>
+				</div>
+				<CancelQueues applicationId={applicationId} />
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<div className="flex flex-col gap-2 text-sm">
+					<span>
+						If you want to re-deploy this application use this URL in the config
+						of your git provider or docker
+					</span>
+					<div className="flex flex-row items-center gap-2 flex-wrap">
+						<span>Webhook URL: </span>
+						<div className="flex flex-row items-center gap-2">
+							<span className="text-muted-foreground">
+								{`${url}/api/deploy/${data?.refreshToken}`}
+							</span>
+							<RefreshToken applicationId={applicationId} />
+						</div>
+					</div>
+				</div>
+				{data?.deployments?.length === 0 ? (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+						<RocketIcon className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							No deployments found
+						</span>
+					</div>
+				) : (
+					<div className="flex flex-col gap-4">
+						{deployments?.map((deployment) => (
+							<div
+								key={deployment.deploymentId}
+								className="flex items-center justify-between rounded-lg border p-4"
+							>
+								<div className="flex flex-col">
+									<span className="flex items-center gap-4 font-medium capitalize text-foreground">
+										{deployment.status}
+
+										<StatusTooltip
+											status={deployment?.status}
+											className="size-2.5"
+										/>
+									</span>
+									<span className="text-sm text-muted-foreground">
+										{deployment.title}
+									</span>
+								</div>
+								<div className="flex flex-col items-end gap-2">
+									<div className="text-sm capitalize text-muted-foreground">
+										<DateTooltip date={deployment.createdAt} />
+									</div>
+
+									<Button
+										onClick={() => {
+											setActiveLog(deployment.logPath);
+										}}
+									>
+										View
+									</Button>
+								</div>
+							</div>
+						))}
+					</div>
+				)}
+				<ShowDeployment
+					open={activeLog !== null}
+					onClose={() => setActiveLog(null)}
+					logPath={activeLog}
+				/>
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -0,0 +1,242 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, PlusIcon } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+// const hostnameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\.-]*\.[a-zA-Z]{2,}$/;
+// .regex(hostnameRegex
+const addDomain = z.object({
+	host: z.string().min(1, "Hostname is required"),
+	path: z.string().min(1),
+	port: z.number(),
+	https: z.boolean(),
+	certificateType: z.enum(["letsencrypt", "none"]),
+});
+
+type AddDomain = z.infer<typeof addDomain>;
+
+interface Props {
+	applicationId: string;
+	children?: React.ReactNode;
+}
+
+export const AddDomain = ({
+	applicationId,
+	children = <PlusIcon className="h-4 w-4" />,
+}: Props) => {
+	const utils = api.useUtils();
+
+	const { mutateAsync, isError, error } = api.domain.create.useMutation();
+
+	const form = useForm<AddDomain>({
+		defaultValues: {
+			host: "",
+			https: false,
+			path: "/",
+			port: 3000,
+			certificateType: "none",
+		},
+		resolver: zodResolver(addDomain),
+	});
+
+	useEffect(() => {
+		form.reset();
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+
+	const onSubmit = async (data: AddDomain) => {
+		await mutateAsync({
+			applicationId,
+			host: data.host,
+			https: data.https,
+			path: data.path,
+			port: data.port,
+			certificateType: data.certificateType,
+		})
+			.then(async () => {
+				toast.success("Domain Created");
+				await utils.domain.byApplicationId.invalidate({
+					applicationId,
+				});
+				await utils.application.readTraefikConfig.invalidate({ applicationId });
+			})
+			.catch(() => {
+				toast.error("Error to create the domain");
+			});
+	};
+	return (
+		<Dialog>
+			<DialogTrigger className="" asChild>
+				<Button>{children}</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>Domain</DialogTitle>
+					<DialogDescription>
+						In this section you can add custom domains
+					</DialogDescription>
+				</DialogHeader>
+				{isError && (
+					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error?.message}
+						</span>
+					</div>
+				)}
+
+				<Form {...form}>
+					<form
+						id="hook-form"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-8 "
+					>
+						<div className="flex flex-col gap-4">
+							<div className="flex flex-col gap-2">
+								<FormField
+									control={form.control}
+									name="host"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Host</FormLabel>
+											<FormControl>
+												<Input placeholder="api.dokploy.com" {...field} />
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="path"
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Path</FormLabel>
+												<FormControl>
+													<Input placeholder={"/"} {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										);
+									}}
+								/>
+
+								<FormField
+									control={form.control}
+									name="port"
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Container Port</FormLabel>
+												<FormControl>
+													<Input
+														placeholder={"3000"}
+														{...field}
+														onChange={(e) => {
+															field.onChange(Number.parseInt(e.target.value));
+														}}
+													/>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										);
+									}}
+								/>
+								<FormField
+									control={form.control}
+									name="certificateType"
+									render={({ field }) => (
+										<FormItem className="col-span-2">
+											<FormLabel>Certificate</FormLabel>
+											<Select
+												onValueChange={field.onChange}
+												defaultValue={field.value || ""}
+											>
+												<FormControl>
+													<SelectTrigger>
+														<SelectValue placeholder="Select a certificate" />
+													</SelectTrigger>
+												</FormControl>
+
+												<SelectContent>
+													<SelectItem value="none">None</SelectItem>
+													<SelectItem value={"letsencrypt"}>
+														Letsencrypt (Default)
+													</SelectItem>
+												</SelectContent>
+											</Select>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="https"
+									render={({ field }) => (
+										<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>HTTPS</FormLabel>
+												<FormDescription>
+													Automatically will have SSL Certificate.
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+							</div>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={form.formState.isSubmitting}
+							form="hook-form"
+							type="submit"
+						>
+							Create
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,66 @@
+import React from "react";
+import {
+	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";
+import { TrashIcon } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	domainId: string;
+}
+export const DeleteDomain = ({ domainId }: Props) => {
+	const { mutateAsync, isLoading } = api.domain.delete.useMutation();
+	const utils = api.useUtils();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="destructive" isLoading={isLoading}>
+					<TrashIcon className="size-4 " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the
+						domain
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								domainId,
+							})
+								.then((data) => {
+									utils.domain.byApplicationId.invalidate({
+										applicationId: data?.applicationId,
+									});
+									utils.application.readTraefikConfig.invalidate({
+										applicationId: data?.applicationId,
+									});
+									toast.success("Domain delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete Domain");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,89 @@
+import React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { ExternalLink, GlobeIcon } 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 Link from "next/link";
+import { AddDomain } from "./add-domain";
+import { UpdateDomain } from "./update-domain";
+
+interface Props {
+	applicationId: string;
+}
+
+export const ShowDomains = ({ applicationId }: Props) => {
+	const { data } = api.domain.byApplicationId.useQuery(
+		{
+			applicationId,
+		},
+		{
+			enabled: !!applicationId,
+		},
+	);
+	return (
+		<div className="flex w-full flex-col gap-5 ">
+			<Card className="bg-background">
+				<CardHeader className="flex flex-row items-center justify-between">
+					<div className="flex flex-col gap-1">
+						<CardTitle className="text-xl">Domains</CardTitle>
+						<CardDescription>
+							Domains are used to access to the application
+						</CardDescription>
+					</div>
+
+					{data && data?.length > 0 && (
+						<AddDomain applicationId={applicationId} />
+					)}
+				</CardHeader>
+				<CardContent className="flex w-full flex-row gap-4">
+					{data?.length === 0 ? (
+						<div className="flex w-full flex-col items-center justify-center gap-3">
+							<GlobeIcon className="size-8 text-muted-foreground" />
+							<span className="text-base text-muted-foreground">
+								To access to the application is required to set at least 1
+								domain
+							</span>
+							<AddDomain applicationId={applicationId}>Add Domain</AddDomain>
+						</div>
+					) : (
+						<div className="flex w-full flex-col gap-4">
+							{data?.map((item) => {
+								return (
+									<div
+										key={item.domainId}
+										className="flex w-full items-center gap-4 max-sm:flex-wrap border p-4 rounded-lg"
+									>
+										<Link target="_blank" href={`http://${item.host}`}>
+											<ExternalLink className="size-5" />
+										</Link>
+
+										<Input disabled value={item.host} />
+										<Button variant="outline" disabled>
+											{item.path}
+										</Button>
+										<Button variant="outline" disabled>
+											{item.port}
+										</Button>
+										<Button variant="outline" disabled>
+											{item.https ? "HTTPS" : "HTTP"}
+										</Button>
+										<UpdateDomain domainId={item.domainId} />
+										<DeleteDomain domainId={item.domainId} />
+									</div>
+								);
+							})}
+						</div>
+					)}
+				</CardContent>
+			</Card>
+		</div>
+	);
+};

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

@@ -0,0 +1,260 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, PenBoxIcon } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const hostnameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\.-]*\.[a-zA-Z]{2,}$/;
+
+const updateDomain = z.object({
+	host: z.string().regex(hostnameRegex, { message: "Invalid hostname" }),
+	path: z.string().min(1),
+	port: z
+		.number()
+		.min(1, { message: "Port must be at least 1" })
+		.max(65535, { message: "Port must be 65535 or below" }),
+	https: z.boolean(),
+	certificateType: z.enum(["letsencrypt", "none"]),
+});
+
+type UpdateDomain = z.infer<typeof updateDomain>;
+
+interface Props {
+	domainId: string;
+}
+
+export const UpdateDomain = ({ domainId }: Props) => {
+	const utils = api.useUtils();
+	const { data, refetch } = api.domain.one.useQuery(
+		{
+			domainId,
+		},
+		{
+			enabled: !!domainId,
+		},
+	);
+	const { mutateAsync, isError, error } = api.domain.update.useMutation();
+
+	const form = useForm<UpdateDomain>({
+		defaultValues: {
+			host: "",
+			https: true,
+			path: "/",
+			port: 3000,
+			certificateType: "none",
+		},
+		resolver: zodResolver(updateDomain),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				host: data.host || "",
+				port: data.port || 3000,
+				path: data.path || "/",
+				https: data.https,
+				certificateType: data.certificateType,
+			});
+		}
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (data: UpdateDomain) => {
+		await mutateAsync({
+			domainId,
+			host: data.host,
+			https: data.https,
+			path: data.path,
+			port: data.port,
+			certificateType: data.certificateType,
+		})
+			.then(async (data) => {
+				toast.success("Domain Updated");
+				await refetch();
+				await utils.domain.byApplicationId.invalidate({
+					applicationId: data?.applicationId,
+				});
+				await utils.application.readTraefikConfig.invalidate({
+					applicationId: data?.applicationId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to update the domain");
+			});
+	};
+	return (
+		<Dialog>
+			<DialogTrigger className="" asChild>
+				<Button>
+					<PenBoxIcon className="size-4" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>Domain</DialogTitle>
+					<DialogDescription>
+						In this section you can add custom domains
+					</DialogDescription>
+				</DialogHeader>
+				{isError && (
+					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error?.message}
+						</span>
+					</div>
+				)}
+
+				<Form {...form}>
+					<form
+						id="hook-form"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-8 "
+					>
+						<div className="flex flex-col gap-4">
+							<div className="flex flex-col gap-2">
+								<FormField
+									control={form.control}
+									name="host"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Host</FormLabel>
+											<FormControl>
+												<Input placeholder="api.dokploy.com" {...field} />
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="path"
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Path</FormLabel>
+												<FormControl>
+													<Input placeholder={"/"} {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										);
+									}}
+								/>
+
+								<FormField
+									control={form.control}
+									name="port"
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Container Port</FormLabel>
+												<FormControl>
+													<Input
+														placeholder={"3000"}
+														{...field}
+														onChange={(e) => {
+															field.onChange(Number.parseInt(e.target.value));
+														}}
+													/>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										);
+									}}
+								/>
+								<FormField
+									control={form.control}
+									name="certificateType"
+									render={({ field }) => (
+										<FormItem className="col-span-2">
+											<FormLabel>Certificate</FormLabel>
+											<Select
+												onValueChange={field.onChange}
+												value={field.value}
+											>
+												<FormControl>
+													<SelectTrigger>
+														<SelectValue placeholder="Select a certificate" />
+													</SelectTrigger>
+												</FormControl>
+												<SelectContent>
+													<SelectItem value={"none"}>None</SelectItem>
+													<SelectItem value={"letsencrypt"}>
+														Letsencrypt
+													</SelectItem>
+												</SelectContent>
+											</Select>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="https"
+									render={({ field }) => (
+										<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>HTTPS</FormLabel>
+												<FormDescription>
+													Automatically will have SSL Certificate.
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+							</div>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={form.formState.isSubmitting}
+							form="hook-form"
+							type="submit"
+						>
+							Update
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

components/dashboard/application/enviroment/show.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect } from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	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,
+	FormField,
+	FormItem,
+	FormMessage,
+} from "@/components/ui/form";
+import { api } from "@/utils/api";
+import { toast } from "sonner";
+import { Textarea } from "@/components/ui/textarea";
+
+const addEnviromentSchema = z.object({
+	enviroment: z.string(),
+});
+
+type EnviromentSchema = z.infer<typeof addEnviromentSchema>;
+
+interface Props {
+	applicationId: string;
+}
+
+export const ShowEnviroment = ({ applicationId }: Props) => {
+	const { mutateAsync, isLoading } =
+		api.application.saveEnviroment.useMutation();
+
+	const { data, refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{
+			enabled: !!applicationId,
+		},
+	);
+	const form = useForm<EnviromentSchema>({
+		defaultValues: {
+			enviroment: "",
+		},
+		resolver: zodResolver(addEnviromentSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				enviroment: data.env || "",
+			});
+		}
+	}, [form.reset, data, form]);
+
+	const onSubmit = async (data: EnviromentSchema) => {
+		mutateAsync({
+			env: data.enviroment,
+			applicationId,
+		})
+			.then(async () => {
+				toast.success("Enviroments Added");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to add enviroment");
+			});
+	};
+
+	return (
+		<div className="flex w-full flex-col gap-5 ">
+			<Card className="bg-background">
+				<CardHeader>
+					<CardTitle className="text-xl">Enviroment Settings</CardTitle>
+					<CardDescription>
+						You can add enviroment variables to your resource.
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Form {...form}>
+						<form
+							id="hook-form"
+							onSubmit={form.handleSubmit(onSubmit)}
+							className="grid w-full gap-4 "
+						>
+							<FormField
+								control={form.control}
+								name="enviroment"
+								render={({ field }) => (
+									<FormItem className="w-full">
+										<FormControl>
+											<Textarea
+												placeholder="NODE_ENV=production"
+												className="h-96"
+												{...field}
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<div className="flex flex-row justify-end">
+								<Button isLoading={isLoading} className="w-fit" type="submit">
+									Save
+								</Button>
+							</div>
+						</form>
+					</Form>
+				</CardContent>
+			</Card>
+		</div>
+	);
+};

components/dashboard/application/general/deploy-application.tsx

@@ -0,0 +1,80 @@
+import {
+	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";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+
+export const DeployApplication = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	const { mutateAsync: markRunning } =
+		api.application.markRunning.useMutation();
+	const { mutateAsync: deploy } = api.application.deploy.useMutation();
+
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button isLoading={data?.applicationStatus === "running"}>
+					Deploy
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will deploy the application
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await markRunning({
+								applicationId,
+							})
+								.then(async () => {
+									toast.success("Application Deploying....");
+
+									await refetch();
+									await deploy({
+										applicationId,
+									})
+										.then(() => {
+											toast.success("Application Deployed Succesfully");
+										})
+										.catch(() => {
+											toast.error("Error to deploy Application");
+										});
+
+									await refetch();
+								})
+								.catch((e) => {
+									toast.error(e.message || "Error to deploy Application");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,138 @@
+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,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { useEffect } from "react";
+import { api } from "@/utils/api";
+import { toast } from "sonner";
+
+const DockerProviderSchema = z.object({
+	dockerImage: z.string().min(1, {
+		message: "Docker image is required",
+	}),
+	username: z.string().optional(),
+	password: z.string().optional(),
+});
+
+type DockerProvider = z.infer<typeof DockerProviderSchema>;
+
+interface Props {
+	applicationId: string;
+}
+
+export const SaveDockerProvider = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery({ applicationId });
+
+	const { mutateAsync } = api.application.saveDockerProvider.useMutation();
+
+	const form = useForm<DockerProvider>({
+		defaultValues: {
+			dockerImage: "",
+			password: "",
+			username: "",
+		},
+		resolver: zodResolver(DockerProviderSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				dockerImage: data.dockerImage || "",
+				password: data.password || "",
+				username: data.username || "",
+			});
+		}
+	}, [form.reset, data, form]);
+
+	const onSubmit = async (values: DockerProvider) => {
+		await mutateAsync({
+			dockerImage: values.dockerImage,
+			password: values.password || null,
+			applicationId,
+			username: values.username || null,
+		})
+			.then(async () => {
+				toast.success("Docker Provider Saved");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to save the Docker provider");
+			});
+	};
+
+	return (
+		<Form {...form}>
+			<form
+				onSubmit={form.handleSubmit(onSubmit)}
+				className="flex flex-col gap-4"
+			>
+				<div className="grid md:grid-cols-2 gap-4 ">
+					<div className="md:col-span-2 space-y-4">
+						<FormField
+							control={form.control}
+							name="dockerImage"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Docker Image</FormLabel>
+									<FormControl>
+										<Input placeholder="node:16" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</div>
+					<div className="space-y-4">
+						<FormField
+							control={form.control}
+							name="username"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Username</FormLabel>
+									<FormControl>
+										<Input placeholder="username" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</div>
+					<div className="space-y-4">
+						<FormField
+							control={form.control}
+							name="password"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Password</FormLabel>
+									<FormControl>
+										<Input placeholder="Password" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</div>
+				</div>
+
+				<div className="flex flex-row justify-end">
+					<Button
+						type="submit"
+						className="w-fit"
+						isLoading={form.formState.isSubmitting}
+					>
+						Save{" "}
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+};

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

@@ -0,0 +1,254 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import copy from "copy-to-clipboard";
+import { CopyIcon, LockIcon } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const GitProviderSchema = z.object({
+	repositoryURL: z.string().min(1, {
+		message: "Repository URL is required",
+	}),
+	branch: z.string().min(1, "Branch required"),
+	buildPath: z.string().min(1, "Build Path required"),
+});
+
+type GitProvider = z.infer<typeof GitProviderSchema>;
+
+interface Props {
+	applicationId: string;
+}
+
+export const SaveGitProvider = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery({ applicationId });
+
+	const { mutateAsync, isLoading } =
+		api.application.saveGitProdiver.useMutation();
+	const { mutateAsync: generateSSHKey, isLoading: isGeneratingSSHKey } =
+		api.application.generateSSHKey.useMutation();
+
+	const { mutateAsync: removeSSHKey, isLoading: isRemovingSSHKey } =
+		api.application.removeSSHKey.useMutation();
+	const form = useForm<GitProvider>({
+		defaultValues: {
+			branch: "",
+			buildPath: "/",
+			repositoryURL: "",
+		},
+		resolver: zodResolver(GitProviderSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				branch: data.customGitBranch || "",
+				buildPath: data.customGitBuildPath || "/",
+				repositoryURL: data.customGitUrl || "",
+			});
+		}
+	}, [form.reset, data, form]);
+
+	const onSubmit = async (values: GitProvider) => {
+		await mutateAsync({
+			customGitBranch: values.branch,
+			customGitBuildPath: values.buildPath,
+			customGitUrl: values.repositoryURL,
+			applicationId,
+		})
+			.then(async () => {
+				toast.success("Git Provider Saved");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to save the Git provider");
+			});
+	};
+
+	return (
+		<Form {...form}>
+			<form
+				onSubmit={form.handleSubmit(onSubmit)}
+				className="flex flex-col gap-4"
+			>
+				<div className="grid md:grid-cols-2 gap-4 ">
+					<div className="md:col-span-2 space-y-4">
+						<FormField
+							control={form.control}
+							name="repositoryURL"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="flex flex-row justify-between">
+										Repository URL
+										<div className="flex gap-2">
+											<Dialog>
+												<DialogTrigger className="flex flex-row gap-2">
+													<LockIcon className="size-4 text-muted-foreground" />?
+												</DialogTrigger>
+												<DialogContent className="sm:max-w-[425px]">
+													<DialogHeader>
+														<DialogTitle>Private Repository</DialogTitle>
+														<DialogDescription>
+															If your repository is private is necessary to
+															generate SSH Keys to add to your git provider.
+														</DialogDescription>
+													</DialogHeader>
+													<div className="grid gap-4 py-4">
+														<div className="relative">
+															<Textarea
+																placeholder="Please click on Generate SSH Key"
+																className="no-scrollbar h-64 text-muted-foreground"
+																disabled={!data?.customGitSSHKey}
+																contentEditable={false}
+																value={
+																	data?.customGitSSHKey ||
+																	"Please click on Generate SSH Key"
+																}
+															/>
+															<button
+																type="button"
+																className="absolute right-2 top-2"
+																onClick={() => {
+																	copy(
+																		data?.customGitSSHKey ||
+																			"Generate a SSH Key",
+																	);
+																	toast.success("SSH Copied to clipboard");
+																}}
+															>
+																<CopyIcon className="size-4" />
+															</button>
+														</div>
+													</div>
+													<DialogFooter className="flex sm:justify-between gap-3.5 flex-col sm:flex-col w-full">
+														<div className="flex flex-row gap-2 w-full justify-between flex-wrap">
+															{data?.customGitSSHKey && (
+																<Button
+																	variant="destructive"
+																	isLoading={
+																		isGeneratingSSHKey || isRemovingSSHKey
+																	}
+																	className="max-sm:w-full"
+																	onClick={async () => {
+																		await removeSSHKey({
+																			applicationId,
+																		})
+																			.then(async () => {
+																				toast.success("SSH Key Removed");
+																				await refetch();
+																			})
+																			.catch(() => {
+																				toast.error(
+																					"Error to remove the SSH Key",
+																				);
+																			});
+																	}}
+																	type="button"
+																>
+																	Remove SSH Key
+																</Button>
+															)}
+
+															<Button
+																isLoading={
+																	isGeneratingSSHKey || isRemovingSSHKey
+																}
+																className="max-sm:w-full"
+																onClick={async () => {
+																	await generateSSHKey({
+																		applicationId,
+																	})
+																		.then(async () => {
+																			toast.success("SSH Key Generated");
+																			await refetch();
+																		})
+																		.catch(() => {
+																			toast.error(
+																				"Error to generate the SSH Key",
+																			);
+																		});
+																}}
+																type="button"
+															>
+																Generate SSH Key
+															</Button>
+														</div>
+														<span className="text-sm text-muted-foreground">
+															Is recommended to remove the SSH Key if you want
+															to deploy a public repository.
+														</span>
+													</DialogFooter>
+												</DialogContent>
+											</Dialog>
+										</div>
+									</FormLabel>
+									<FormControl>
+										<Input placeholder="git@bitbucket.org" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</div>
+					<div className="space-y-4">
+						<FormField
+							control={form.control}
+							name="branch"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Branch</FormLabel>
+									<FormControl>
+										<Input placeholder="Branch" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</div>
+					<div className="space-y-4">
+						<FormField
+							control={form.control}
+							name="buildPath"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Build Path</FormLabel>
+									<FormControl>
+										<Input placeholder="/" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</div>
+				</div>
+
+				<div className="flex flex-row justify-end">
+					<Button type="submit" className="w-fit" isLoading={isLoading}>
+						Save{" "}
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+};

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

@@ -0,0 +1,307 @@
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+} from "@/components/ui/command";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+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 GithubProviderSchema = z.object({
+	buildPath: z.string().min(1, "Path is required").default("/"),
+	repository: z
+		.object({
+			repo: z.string().min(1, "Repo is required"),
+			owner: z.string().min(1, "Owner is required"),
+		})
+		.required(),
+	branch: z.string().min(1, "Branch is required"),
+});
+
+type GithubProvider = z.infer<typeof GithubProviderSchema>;
+
+interface Props {
+	applicationId: string;
+}
+
+export const SaveGithubProvider = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery({ applicationId });
+
+	const { mutateAsync, isLoading: isSavingGithubProvider } =
+		api.application.saveGithubProvider.useMutation();
+
+	const form = useForm<GithubProvider>({
+		defaultValues: {
+			buildPath: "/",
+			repository: {
+				owner: "",
+				repo: "",
+			},
+			branch: "",
+		},
+		resolver: zodResolver(GithubProviderSchema),
+	});
+
+	const repository = form.watch("repository");
+
+	const { data: repositories, isLoading: isLoadingRepositories } =
+		api.admin.getRepositories.useQuery();
+
+	const {
+		data: branches,
+		fetchStatus,
+		status,
+	} = api.admin.getBranches.useQuery(
+		{
+			owner: repository?.owner,
+			repo: repository?.repo,
+		},
+		{ enabled: !!repository?.owner && !!repository?.repo },
+	);
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				branch: data.branch || "",
+				repository: {
+					repo: data.repository || "",
+					owner: data.owner || "",
+				},
+				buildPath: data.buildPath || "/",
+			});
+		}
+	}, [form.reset, data, form]);
+
+	const onSubmit = async (data: GithubProvider) => {
+		await mutateAsync({
+			branch: data.branch,
+			repository: data.repository.repo,
+			applicationId,
+			owner: data.repository.owner,
+			buildPath: data.buildPath,
+		})
+			.then(async () => {
+				toast.success("Service Provided Saved");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to save the github provider");
+			});
+	};
+
+	return (
+		<div>
+			<Form {...form}>
+				<form
+					onSubmit={form.handleSubmit(onSubmit)}
+					className="grid w-full gap-4 py-3"
+				>
+					<div className="grid md:grid-cols-2 gap-4">
+						<FormField
+							control={form.control}
+							name="repository"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2 flex flex-col">
+									<FormLabel>Repository</FormLabel>
+									<Popover>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													role="combobox"
+													className={cn(
+														"w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													{isLoadingRepositories
+														? "Loading...."
+														: field.value.owner
+															? repositories?.find(
+																	(repo) => repo.name === field.value.repo,
+																)?.name
+															: "Select repository"}
+
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search repository..."
+													className="h-9"
+												/>
+												{isLoadingRepositories && (
+													<span className="py-6 text-center text-sm">
+														Loading Repositories....
+													</span>
+												)}
+												<CommandEmpty>No repositories found.</CommandEmpty>
+												<ScrollArea className="h-96">
+													<CommandGroup>
+														{repositories?.map((repo) => (
+															<CommandItem
+																value={repo.url}
+																key={repo.url}
+																onSelect={() => {
+																	form.setValue("repository", {
+																		owner: repo.owner.login as string,
+																		repo: repo.name,
+																	});
+																	form.setValue("branch", "");
+																}}
+															>
+																{repo.name}
+																<CheckIcon
+																	className={cn(
+																		"ml-auto h-4 w-4",
+																		repo.name === field.value.repo
+																			? "opacity-100"
+																			: "opacity-0",
+																	)}
+																/>
+															</CommandItem>
+														))}
+													</CommandGroup>
+												</ScrollArea>
+											</Command>
+										</PopoverContent>
+									</Popover>
+									{form.formState.errors.repository && (
+										<p className={cn("text-sm font-medium text-destructive")}>
+											Repository is required
+										</p>
+									)}
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="branch"
+							render={({ field }) => (
+								<FormItem className="block w-full">
+									<FormLabel>Branch</FormLabel>
+									<Popover>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													role="combobox"
+													className={cn(
+														" w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													{status === "loading" && fetchStatus === "fetching"
+														? "Loading...."
+														: field.value
+															? branches?.find(
+																	(branch) => branch.name === field.value,
+																)?.name
+															: "Select branch"}
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search branch..."
+													className="h-9"
+												/>
+												{status === "loading" && fetchStatus === "fetching" && (
+													<span className="py-6 text-center text-sm text-muted-foreground">
+														Loading Branches....
+													</span>
+												)}
+												{!repository?.owner && (
+													<span className="py-6 text-center text-sm text-muted-foreground">
+														Select a repository
+													</span>
+												)}
+												<ScrollArea className="h-96">
+													<CommandEmpty>No branch found.</CommandEmpty>
+
+													<CommandGroup>
+														{branches?.map((branch) => (
+															<CommandItem
+																value={branch.name}
+																key={branch.commit.sha}
+																onSelect={() => {
+																	form.setValue("branch", branch.name);
+																}}
+															>
+																{branch.name}
+																<CheckIcon
+																	className={cn(
+																		"ml-auto h-4 w-4",
+																		branch.name === field.value
+																			? "opacity-100"
+																			: "opacity-0",
+																	)}
+																/>
+															</CommandItem>
+														))}
+													</CommandGroup>
+												</ScrollArea>
+											</Command>
+										</PopoverContent>
+
+										<FormMessage />
+									</Popover>
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="buildPath"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Build Path</FormLabel>
+									<FormControl>
+										<Input placeholder="/" {...field} />
+									</FormControl>
+
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</div>
+					<div className="flex w-full justify-end">
+						<Button
+							isLoading={isSavingGithubProvider}
+							type="submit"
+							className="w-fit"
+						>
+							Save
+						</Button>
+					</div>
+				</form>
+			</Form>
+		</div>
+	);
+};

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

@@ -0,0 +1,96 @@
+import { SaveDockerProvider } from "@/components/dashboard/application/general/generic/save-docker-provider";
+import { SaveGitProvider } from "@/components/dashboard/application/general/generic/save-git-provider";
+import { SaveGithubProvider } from "@/components/dashboard/application/general/generic/save-github-provider";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { api } from "@/utils/api";
+import { GitBranch, LockIcon } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+
+type TabState = "github" | "docker" | "git";
+
+interface Props {
+	applicationId: string;
+}
+
+export const ShowProviderForm = ({ applicationId }: Props) => {
+	const { data: haveGithubConfigured } =
+		api.admin.haveGithubConfigured.useQuery();
+
+	const { data: application } = api.application.one.useQuery({ applicationId });
+	const [tab, setSab] = useState<TabState>(application?.sourceType || "github");
+	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">Provider</span>
+						<p className="flex items-center text-sm font-normal text-muted-foreground">
+							Select the source of your code
+						</p>
+					</div>
+					<div className="hidden space-y-1 text-sm font-normal md:block">
+						<GitBranch className="size-6 text-muted-foreground" />
+					</div>
+				</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<Tabs
+					value={tab}
+					className="w-full"
+					onValueChange={(e) => {
+						setSab(e as TabState);
+					}}
+				>
+					<TabsList className="grid w-fit grid-cols-4 bg-transparent">
+						<TabsTrigger
+							value="github"
+							className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
+						>
+							Github
+						</TabsTrigger>
+						<TabsTrigger
+							value="docker"
+							className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
+						>
+							Docker
+						</TabsTrigger>
+						<TabsTrigger
+							value="git"
+							className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
+						>
+							Git
+						</TabsTrigger>
+					</TabsList>
+					<TabsContent value="github" className="w-full p-2">
+						{haveGithubConfigured ? (
+							<SaveGithubProvider applicationId={applicationId} />
+						) : (
+							<div className="flex flex-col items-center gap-3">
+								<LockIcon className="size-8 text-muted-foreground" />
+								<span className="text-base text-muted-foreground">
+									To deploy using GitHub, you need to configure your account
+									first. Please, go to{" "}
+									<Link
+										href="/dashboard/settings/server"
+										className="text-foreground"
+									>
+										Settings
+									</Link>{" "}
+									to do so.
+								</span>
+							</div>
+						)}
+					</TabsContent>
+					<TabsContent value="docker" className="w-full p-2">
+						<SaveDockerProvider applicationId={applicationId} />
+					</TabsContent>
+					<TabsContent value="git" className="w-full p-2">
+						<SaveGitProvider applicationId={applicationId} />
+					</TabsContent>
+				</Tabs>
+			</CardContent>
+		</Card>
+	);
+};

components/dashboard/application/general/reset-application.tsx

@@ -0,0 +1,70 @@
+import {
+	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";
+import { RefreshCcw } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+	appName: string;
+}
+
+export const ResetApplication = ({ applicationId, appName }: Props) => {
+	const { refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+	const { mutateAsync: reload, isLoading } =
+		api.application.reload.useMutation();
+
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="secondary" isLoading={isLoading}>
+					Reload
+					<RefreshCcw className="size-4" />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will reload the application
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await reload({
+								applicationId,
+								appName,
+							})
+								.then(() => {
+									toast.success("Service Reloaded");
+								})
+								.catch(() => {
+									toast.error("Error to reload the service");
+								});
+							await refetch();
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

components/dashboard/application/general/show.tsx

@@ -0,0 +1,79 @@
+import { ShowBuildChooseForm } from "@/components/dashboard/application/build/show";
+import { ShowProviderForm } from "@/components/dashboard/application/general/generic/show";
+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 React from "react";
+import { toast } from "sonner";
+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 { Terminal } from "lucide-react";
+import { DeployApplication } from "./deploy-application";
+import { ResetApplication } from "./reset-application";
+interface Props {
+	applicationId: string;
+}
+
+export const ShowGeneralApplication = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+	const { mutateAsync: update } = api.application.update.useMutation();
+
+	return (
+		<>
+			<Card className="bg-background">
+				<CardHeader>
+					<CardTitle className="text-xl">Deploy Settings</CardTitle>
+				</CardHeader>
+				<CardContent className="flex flex-row gap-4 flex-wrap">
+					<DeployApplication applicationId={applicationId} />
+					<ResetApplication
+						applicationId={applicationId}
+						appName={data?.appName || ""}
+					/>
+
+					<Toggle
+						aria-label="Toggle italic"
+						pressed={data?.autoDeploy || false}
+						onPressedChange={async (enabled) => {
+							await update({
+								applicationId,
+								autoDeploy: enabled,
+							})
+								.then(async () => {
+									toast.success("Auto Deploy Updated");
+									await refetch();
+								})
+								.catch(() => {
+									toast.error("Error to update Auto Deploy");
+								});
+						}}
+					>
+						Autodeploy
+					</Toggle>
+					<RedbuildApplication applicationId={applicationId} />
+					{data?.applicationStatus === "idle" ? (
+						<StartApplication applicationId={applicationId} />
+					) : (
+						<StopApplication applicationId={applicationId} />
+					)}
+					<DockerTerminalModal appName={data?.appName || ""}>
+						<Button variant="outline">
+							<Terminal />
+							Open Terminal
+						</Button>
+					</DockerTerminalModal>
+				</CardContent>
+			</Card>
+			<ShowProviderForm applicationId={applicationId} />
+			<ShowBuildChooseForm applicationId={applicationId} />
+		</>
+	);
+};

components/dashboard/application/logs/show.tsx

@@ -0,0 +1,88 @@
+import dynamic from "next/dynamic";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { useEffect, useState } from "react";
+import { Label } from "@/components/ui/label";
+export const DockerLogs = dynamic(
+	() =>
+		import("@/components/dashboard/docker/logs/docker-logs-id").then(
+			(e) => e.DockerLogsId,
+		),
+	{
+		ssr: false,
+	},
+);
+
+interface Props {
+	appName: string;
+}
+
+export const ShowDockerLogs = ({ appName }: Props) => {
+	const { data } = api.docker.getContainersByAppNameMatch.useQuery(
+		{
+			appName,
+		},
+		{
+			enabled: !!appName,
+		},
+	);
+	const [containerId, setContainerId] = useState<string | undefined>();
+
+	useEffect(() => {
+		if (data && data?.length > 0) {
+			setContainerId(data[0]?.containerId);
+		}
+	}, [data]);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader>
+				<CardTitle className="text-xl">Logs</CardTitle>
+				<CardDescription>
+					Watch the logs of the application in real time
+				</CardDescription>
+			</CardHeader>
+
+			<CardContent className="flex flex-col gap-4">
+				<Label>Select a container to view logs</Label>
+				<Select onValueChange={setContainerId} value={containerId}>
+					<SelectTrigger>
+						<SelectValue placeholder="Select a container" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectGroup>
+							{data?.map((container) => (
+								<SelectItem
+									key={container.containerId}
+									value={container.containerId}
+								>
+									{container.name} ({container.containerId}) {container.state}
+								</SelectItem>
+							))}
+							<SelectLabel>Containers ({data?.length})</SelectLabel>
+						</SelectGroup>
+					</SelectContent>
+				</Select>
+				<DockerLogs
+					id="terminal"
+					containerId={containerId || "select-a-container"}
+				/>
+			</CardContent>
+		</Card>
+	);
+};

components/dashboard/application/rebuild-application.tsx

@@ -0,0 +1,85 @@
+import {
+	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";
+import { Hammer } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+
+export const RedbuildApplication = ({ applicationId }: Props) => {
+	const { data } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+	const { mutateAsync: markRunning } =
+		api.application.markRunning.useMutation();
+	const { mutateAsync } = api.application.redeploy.useMutation();
+	const utils = api.useUtils();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button
+					variant="secondary"
+					isLoading={data?.applicationStatus === "running"}
+				>
+					Rebuild
+					<Hammer className="size-4" />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>
+						Are you sure to rebuild the application?
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						Is required to deploy at least 1 time in order to reuse the same
+						code
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await markRunning({
+								applicationId,
+							})
+								.then(async () => {
+									await mutateAsync({
+										applicationId,
+									})
+										.then(async () => {
+											await utils.application.one.invalidate({
+												applicationId,
+											});
+											toast.success("Application rebuild succesfully");
+										})
+										.catch(() => {
+											toast.error("Error to rebuild the application");
+										});
+								})
+								.catch(() => {
+									toast.error("Error to rebuild the application");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

components/dashboard/application/start-application.tsx

@@ -0,0 +1,65 @@
+import {
+	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";
+import { CheckCircle2 } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+
+export const StartApplication = ({ applicationId }: Props) => {
+	const { mutateAsync, isLoading } = api.application.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 application?
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will start the application
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								applicationId,
+							})
+								.then(async () => {
+									await utils.application.one.invalidate({
+										applicationId,
+									});
+									toast.success("Application started succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to start the Application");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

components/dashboard/application/stop-application.tsx

@@ -0,0 +1,65 @@
+import {
+	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";
+import { Ban } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+
+export const StopApplication = ({ applicationId }: Props) => {
+	const { mutateAsync, isLoading } = api.application.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 application?
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will stop the application
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								applicationId,
+							})
+								.then(async () => {
+									await utils.application.one.invalidate({
+										applicationId,
+									});
+									toast.success("Application stopped succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to stop the Application");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

components/dashboard/application/update-application.tsx

@@ -0,0 +1,165 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+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";
+
+const updateApplicationSchema = z.object({
+	name: z.string().min(1, {
+		message: "Name is required",
+	}),
+	description: z.string().optional(),
+});
+
+type UpdateApplication = z.infer<typeof updateApplicationSchema>;
+
+interface Props {
+	applicationId: string;
+}
+
+export const UpdateApplication = ({ applicationId }: Props) => {
+	const utils = api.useUtils();
+	const { mutateAsync, error, isError, isLoading } =
+		api.application.update.useMutation();
+	const { data } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{
+			enabled: !!applicationId,
+		},
+	);
+	const form = useForm<UpdateApplication>({
+		defaultValues: {
+			description: data?.description ?? "",
+			name: data?.name ?? "",
+		},
+		resolver: zodResolver(updateApplicationSchema),
+	});
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				description: data.description ?? "",
+				name: data.name,
+			});
+		}
+	}, [data, form, form.reset]);
+
+	const onSubmit = async (formData: UpdateApplication) => {
+		await mutateAsync({
+			name: formData.name,
+			applicationId: applicationId,
+			description: formData.description || "",
+		})
+			.then(() => {
+				toast.success("Application updated succesfully");
+				utils.application.one.invalidate({
+					applicationId: applicationId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to update the application");
+			})
+			.finally(() => {});
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="ghost">
+					<SquarePen className="size-4" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Modify Application</DialogTitle>
+					<DialogDescription>Update the application data</DialogDescription>
+				</DialogHeader>
+				{isError && (
+					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error.message}
+						</span>
+					</div>
+				)}
+
+				<div className="grid gap-4">
+					<div className="grid items-center gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								id="hook-form-update-application"
+								className="grid w-full gap-4 "
+							>
+								<FormField
+									control={form.control}
+									name="name"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Name</FormLabel>
+											<FormControl>
+												<Input placeholder="Tesla" {...field} />
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="description"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Description</FormLabel>
+											<FormControl>
+												<Textarea
+													placeholder="Description about your project..."
+													className="resize-none"
+													{...field}
+												/>
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<DialogFooter>
+									<Button
+										isLoading={isLoading}
+										form="hook-form-update-application"
+										type="submit"
+									>
+										Update
+									</Button>
+								</DialogFooter>
+							</form>
+						</Form>
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,313 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	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 { Switch } from "@/components/ui/switch";
+
+const AddPostgresBackup1Schema = z.object({
+	destinationId: z.string().min(1, "Destination required"),
+	schedule: z.string().min(1, "Schedule (Cron) required"),
+	// .regex(
+	//   new RegExp(
+	//     /^(\*|([0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9])|\*\/([0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9])) (\*|([0-9]|1[0-9]|2[0-3])|\*\/([0-9]|1[0-9]|2[0-3])) (\*|([1-9]|1[0-9]|2[0-9]|3[0-1])|\*\/([1-9]|1[0-9]|2[0-9]|3[0-1])) (\*|([1-9]|1[0-2])|\*\/([1-9]|1[0-2])) (\*|([0-6])|\*\/([0-6]))$/,
+	//   ),
+	//   "Invalid Cron",
+	// ),
+	prefix: z.string().min(1, "Prefix required"),
+	enabled: z.boolean(),
+	database: z.string().min(1, "Database required"),
+});
+
+type AddPostgresBackup = z.infer<typeof AddPostgresBackup1Schema>;
+
+interface Props {
+	databaseId: string;
+	databaseType: "postgres" | "mariadb" | "mysql" | "mongo";
+	refetch: () => void;
+}
+
+export const AddBackup = ({ databaseId, databaseType, refetch }: Props) => {
+	const { data, isLoading } = api.destination.all.useQuery();
+
+	const { mutateAsync: createBackup, isLoading: isCreatingPostgresBackup } =
+		api.backup.create.useMutation();
+
+	const form = useForm<AddPostgresBackup>({
+		defaultValues: {
+			database: "",
+			destinationId: "",
+			enabled: true,
+			prefix: "/",
+			schedule: "",
+		},
+		resolver: zodResolver(AddPostgresBackup1Schema),
+	});
+
+	useEffect(() => {
+		form.reset({
+			database: "",
+			destinationId: "",
+			enabled: true,
+			prefix: "/",
+			schedule: "",
+		});
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+
+	const onSubmit = async (data: AddPostgresBackup) => {
+		const getDatabaseId =
+			databaseType === "postgres"
+				? {
+						postgresId: databaseId,
+					}
+				: databaseType === "mariadb"
+					? {
+							mariadbId: databaseId,
+						}
+					: databaseType === "mysql"
+						? {
+								mysqlId: databaseId,
+							}
+						: databaseType === "mongo"
+							? {
+									mongoId: databaseId,
+								}
+							: undefined;
+
+		await createBackup({
+			destinationId: data.destinationId,
+			prefix: data.prefix,
+			schedule: data.schedule,
+			enabled: data.enabled,
+			database: data.database,
+			databaseType,
+			...getDatabaseId,
+		})
+			.then(async () => {
+				toast.success("Backup Created");
+				refetch();
+			})
+			.catch(() => {
+				toast.error("Error to create a backup");
+			});
+	};
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button>
+					<PlusIcon className="h-4 w-4" />
+					Create Backup
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-lg max-h-screen overflow-y-auto">
+				<DialogHeader>
+					<DialogTitle>Create a backup</DialogTitle>
+					<DialogDescription>Add a new backup</DialogDescription>
+				</DialogHeader>
+
+				<Form {...form}>
+					<form
+						id="hook-form-add-backup"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="grid grid-cols-1 gap-4">
+							<FormField
+								control={form.control}
+								name="destinationId"
+								render={({ field }) => (
+									<FormItem className="">
+										<FormLabel>Destination</FormLabel>
+										<Popover>
+											<PopoverTrigger asChild>
+												<FormControl>
+													<Button
+														variant="outline"
+														role="combobox"
+														className={cn(
+															"w-full justify-between !bg-input",
+															!field.value && "text-muted-foreground",
+														)}
+													>
+														{isLoading
+															? "Loading...."
+															: field.value
+																? data?.find(
+																		(destination) =>
+																			destination.destinationId === field.value,
+																	)?.name
+																: "Select Destination"}
+
+														<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+													</Button>
+												</FormControl>
+											</PopoverTrigger>
+											<PopoverContent className="p-0" align="start">
+												<Command>
+													<CommandInput
+														placeholder="Search Destination..."
+														className="h-9"
+													/>
+													{isLoading && (
+														<span className="py-6 text-center text-sm">
+															Loading Destinations....
+														</span>
+													)}
+													<CommandEmpty>No destinations found.</CommandEmpty>
+													<ScrollArea className="h-64">
+														<CommandGroup>
+															{data?.map((destination) => (
+																<CommandItem
+																	value={destination.destinationId}
+																	key={destination.destinationId}
+																	onSelect={() => {
+																		form.setValue(
+																			"destinationId",
+																			destination.destinationId,
+																		);
+																	}}
+																>
+																	{destination.name}
+																	<CheckIcon
+																		className={cn(
+																			"ml-auto h-4 w-4",
+																			destination.destinationId === field.value
+																				? "opacity-100"
+																				: "opacity-0",
+																		)}
+																	/>
+																</CommandItem>
+															))}
+														</CommandGroup>
+													</ScrollArea>
+												</Command>
+											</PopoverContent>
+										</Popover>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="database"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Database</FormLabel>
+											<FormControl>
+												<Input placeholder={"dokploy"} {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="schedule"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Schedule (Cron)</FormLabel>
+											<FormControl>
+												<Input placeholder={"0 0 * * *"} {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="prefix"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Prefix Destination</FormLabel>
+											<FormControl>
+												<Input placeholder={"dokploy/"} {...field} />
+											</FormControl>
+											<FormDescription>
+												Use if you want to storage in a specific path of your
+												destination/bucket
+											</FormDescription>
+
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="enabled"
+								render={({ field }) => (
+									<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 ">
+										<div className="space-y-0.5">
+											<FormLabel>Enabled</FormLabel>
+											<FormDescription>
+												Enable or disable the backup
+											</FormDescription>
+										</div>
+										<FormControl>
+											<Switch
+												checked={field.value}
+												onCheckedChange={field.onChange}
+											/>
+										</FormControl>
+									</FormItem>
+								)}
+							/>
+						</div>
+						<DialogFooter>
+							<Button
+								isLoading={isCreatingPostgresBackup}
+								form="hook-form-add-backup"
+								type="submit"
+							>
+								Create
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,62 @@
+import {
+	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";
+import { TrashIcon } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	backupId: string;
+	refetch: () => void;
+}
+
+export const DeleteBackup = ({ backupId, refetch }: Props) => {
+	const { mutateAsync, isLoading } = api.backup.remove.useMutation();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<TrashIcon className="size-4  text-muted-foreground " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the
+						backup
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								backupId,
+							})
+								.then(() => {
+									refetch();
+
+									toast.success("Backup delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the backup");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,295 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	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 } 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 { cn } from "@/lib/utils";
+
+const UpdateBackupSchema = z.object({
+	destinationId: z.string().min(1, "Destination required"),
+	schedule: z.string().min(1, "Schedule (Cron) required"),
+	prefix: z.string().min(1, "Prefix required"),
+	enabled: z.boolean(),
+	database: z.string().min(1, "Database required"),
+});
+
+type UpdateBackup = z.infer<typeof UpdateBackupSchema>;
+
+interface Props {
+	backupId: string;
+	refetch: () => void;
+}
+
+export const UpdateBackup = ({ backupId, refetch }: Props) => {
+	const { data, isLoading } = api.destination.all.useQuery();
+	const { data: backup } = api.backup.one.useQuery(
+		{
+			backupId,
+		},
+		{
+			enabled: !!backupId,
+		},
+	);
+
+	const { mutateAsync, isLoading: isLoadingUpdate } =
+		api.backup.update.useMutation();
+
+	const form = useForm<UpdateBackup>({
+		defaultValues: {
+			database: "",
+			destinationId: "",
+			enabled: true,
+			prefix: "/",
+			schedule: "",
+		},
+		resolver: zodResolver(UpdateBackupSchema),
+	});
+
+	useEffect(() => {
+		if (backup) {
+			form.reset({
+				database: backup.database,
+				destinationId: backup.destinationId,
+				enabled: backup.enabled || false,
+				prefix: backup.prefix,
+				schedule: backup.schedule,
+			});
+		}
+	}, [form, form.reset, backup]);
+
+	const onSubmit = async (data: UpdateBackup) => {
+		await mutateAsync({
+			backupId,
+			destinationId: data.destinationId,
+			prefix: data.prefix,
+			schedule: data.schedule,
+			enabled: data.enabled,
+			database: data.database,
+		})
+			.then(async () => {
+				toast.success("Backup Updated");
+				refetch();
+			})
+			.catch(() => {
+				toast.error("Error to update the backup");
+			});
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="ghost">
+					<Pencil className="size-4  text-muted-foreground" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Update Backup</DialogTitle>
+					<DialogDescription>Update the backup</DialogDescription>
+				</DialogHeader>
+
+				<Form {...form}>
+					<form
+						id="hook-form-update-backup"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="grid grid-cols-1 gap-4">
+							<FormField
+								control={form.control}
+								name="destinationId"
+								render={({ field }) => (
+									<FormItem className="">
+										<FormLabel>Destination</FormLabel>
+										<Popover>
+											<PopoverTrigger asChild>
+												<FormControl>
+													<Button
+														variant="outline"
+														role="combobox"
+														className={cn(
+															"w-full justify-between !bg-input",
+															!field.value && "text-muted-foreground",
+														)}
+													>
+														{isLoading
+															? "Loading...."
+															: field.value
+																? data?.find(
+																		(destination) =>
+																			destination.destinationId === field.value,
+																	)?.name
+																: "Select Destination"}
+
+														<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+													</Button>
+												</FormControl>
+											</PopoverTrigger>
+											<PopoverContent className="p-0" align="start">
+												<Command>
+													<CommandInput
+														placeholder="Search Destination..."
+														className="h-9"
+													/>
+													{isLoading && (
+														<span className="py-6 text-center text-sm">
+															Loading Destinations....
+														</span>
+													)}
+													<CommandEmpty>No destinations found.</CommandEmpty>
+													<ScrollArea className="h-64">
+														<CommandGroup>
+															{data?.map((destination) => (
+																<CommandItem
+																	value={destination.destinationId}
+																	key={destination.destinationId}
+																	onSelect={() => {
+																		form.setValue(
+																			"destinationId",
+																			destination.destinationId,
+																		);
+																	}}
+																>
+																	{destination.name}
+																	<CheckIcon
+																		className={cn(
+																			"ml-auto h-4 w-4",
+																			destination.destinationId === field.value
+																				? "opacity-100"
+																				: "opacity-0",
+																		)}
+																	/>
+																</CommandItem>
+															))}
+														</CommandGroup>
+													</ScrollArea>
+												</Command>
+											</PopoverContent>
+										</Popover>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="database"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Database</FormLabel>
+											<FormControl>
+												<Input placeholder={"dokploy"} {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="schedule"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Schedule (Cron)</FormLabel>
+											<FormControl>
+												<Input placeholder={"0 0 * * *"} {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="prefix"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Prefix Destination</FormLabel>
+											<FormControl>
+												<Input placeholder={"dokploy/"} {...field} />
+											</FormControl>
+											<FormDescription>
+												Use if you want to storage in a specific path of your
+												destination/bucket
+											</FormDescription>
+
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="enabled"
+								render={({ field }) => (
+									<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 ">
+										<div className="space-y-0.5">
+											<FormLabel>Enabled</FormLabel>
+											<FormDescription>
+												Enable or disable the backup
+											</FormDescription>
+										</div>
+										<FormControl>
+											<Switch
+												checked={field.value}
+												onCheckedChange={field.onChange}
+											/>
+										</FormControl>
+									</FormItem>
+								)}
+							/>
+						</div>
+						<DialogFooter>
+							<Button
+								isLoading={isLoadingUpdate}
+								form="hook-form-update-backup"
+								type="submit"
+							>
+								Update
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

components/dashboard/docker/config/show-container-config.tsx

@@ -0,0 +1,52 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { api } from "@/utils/api";
+
+interface Props {
+	containerId: string;
+}
+
+export const ShowContainerConfig = ({ containerId }: Props) => {
+	const { data } = api.docker.getConfig.useQuery(
+		{
+			containerId,
+		},
+		{
+			enabled: !!containerId,
+		},
+	);
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer"
+					onSelect={(e) => e.preventDefault()}
+				>
+					View Config
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+				<DialogHeader>
+					<DialogTitle>Container Config</DialogTitle>
+					<DialogDescription>
+						See in detail the config of this container
+					</DialogDescription>
+				</DialogHeader>
+				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem] bg-card">
+					<code>
+						<pre className="whitespace-pre-wrap break-words">
+							{JSON.stringify(data, null, 2)}
+						</pre>
+					</code>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,89 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import React, { useEffect } from "react";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "xterm-addon-fit";
+import "@xterm/xterm/css/xterm.css";
+
+interface Props {
+	id: string;
+	containerId: string;
+}
+
+export const DockerLogsId: React.FC<Props> = ({ id, containerId }) => {
+	const [term, setTerm] = React.useState<Terminal>();
+	const [lines, setLines] = React.useState<number>(40);
+
+	const createTerminal = (): Terminal => {
+		const container = document.getElementById(id);
+		if (container) {
+			container.innerHTML = "";
+		}
+		const termi = new Terminal({
+			cursorBlink: true,
+			cols: 80,
+			rows: 30,
+			lineHeight: 1.4,
+
+			convertEol: true,
+			theme: {
+				cursor: "transparent",
+				background: "#19191A",
+			},
+		});
+
+		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+
+		const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?containerId=${containerId}&tail=${lines}`;
+		const ws = new WebSocket(wsUrl);
+
+		const fitAddon = new FitAddon();
+		termi.loadAddon(fitAddon);
+		// @ts-ignore
+		termi.open(container);
+		fitAddon.fit();
+		termi.focus();
+		setTerm(termi);
+
+		ws.onmessage = (e) => {
+			termi.write(e.data);
+		};
+
+		ws.onclose = (e) => {
+			console.log(e.reason);
+
+			termi.write(`Connection closed!\nReason: ${e.reason}\n`);
+		};
+		return termi;
+	};
+
+	useEffect(() => {
+		createTerminal();
+	}, [lines, containerId]);
+
+	useEffect(() => {
+		term?.clear();
+	}, [lines, term]);
+
+	return (
+		<div className="flex flex-col gap-4">
+			<div className="flex flex-col gap-2">
+				<Label>
+					<span>Number of lines to show</span>
+				</Label>
+				<Input
+					type="text"
+					placeholder="Number of lines to show (Defaults to 35)"
+					value={lines}
+					onChange={(e) => {
+						setLines(Number(e.target.value) || 1);
+					}}
+				/>
+			</div>
+
+			<div className="w-full h-full bg-input rounded-lg p-2 ">
+				<div id={id} className="rounded-xl" />
+			</div>
+		</div>
+	);
+};

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

@@ -0,0 +1,49 @@
+import dynamic from "next/dynamic";
+import React from "react";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+export const DockerLogsId = dynamic(
+	() =>
+		import("@/components/dashboard/docker/logs/docker-logs-id").then(
+			(e) => e.DockerLogsId,
+		),
+	{
+		ssr: false,
+	},
+);
+
+interface Props {
+	containerId: string;
+	children?: React.ReactNode;
+}
+
+export const ShowDockerModalLogs = ({ containerId, children }: Props) => {
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer space-x-3"
+					onSelect={(e) => e.preventDefault()}
+				>
+					{children}
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-7xl">
+				<DialogHeader>
+					<DialogTitle>View Logs</DialogTitle>
+					<DialogDescription>View the logs for {containerId}</DialogDescription>
+				</DialogHeader>
+				<div className="flex flex-col gap-4 pt-2.5">
+					<DockerLogsId id="terminal" containerId={containerId || ""} />
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

components/dashboard/docker/show/colums.tsx

@@ -0,0 +1,129 @@
+import * as React from "react";
+import type { ColumnDef } from "@tanstack/react-table";
+import { ArrowUpDown, MoreHorizontal } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuLabel,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+import { Badge } from "@/components/ui/badge";
+import { ShowContainerConfig } from "../config/show-container-config";
+import { ShowDockerModalLogs } from "../logs/show-docker-modal-logs";
+import { DockerTerminalModal } from "../terminal/docker-terminal-modal";
+import type { Container } from "./show-containers";
+
+export const columns: ColumnDef<Container>[] = [
+	{
+		accessorKey: "name",
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Name
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("name")}</div>;
+		},
+	},
+	{
+		accessorKey: "state",
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					State
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			const value = row.getValue("state") as string;
+			return (
+				<div className="capitalize">
+					<Badge
+						variant={
+							value === "running"
+								? "default"
+								: value === "failed"
+									? "destructive"
+									: "secondary"
+						}
+					>
+						{value}
+					</Badge>
+				</div>
+			);
+		},
+	},
+	{
+		accessorKey: "status",
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Status
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div className="capitalize">{row.getValue("status")}</div>;
+		},
+	},
+	{
+		accessorKey: "image",
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Image
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => <div className="lowercase">{row.getValue("image")}</div>,
+	},
+	{
+		id: "actions",
+		enableHiding: false,
+		cell: ({ row }) => {
+			const container = row.original;
+
+			return (
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="ghost" className="h-8 w-8 p-0">
+							<span className="sr-only">Open menu</span>
+							<MoreHorizontal className="h-4 w-4" />
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end">
+						<DropdownMenuLabel>Actions</DropdownMenuLabel>
+						<ShowDockerModalLogs containerId={container.containerId}>
+							View Logs
+						</ShowDockerModalLogs>
+						<ShowContainerConfig containerId={container.containerId} />
+						<DockerTerminalModal containerId={container.containerId}>
+							Terminal
+						</DockerTerminalModal>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			);
+		},
+	},
+];

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

@@ -0,0 +1,190 @@
+import * as React from "react";
+import {
+	type ColumnFiltersState,
+	type SortingState,
+	type VisibilityState,
+	flexRender,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	useReactTable,
+} from "@tanstack/react-table";
+import { ChevronDown } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { api, type RouterOutputs } from "@/utils/api";
+import { columns } from "./colums";
+export type Container = NonNullable<
+	RouterOutputs["docker"]["getContainers"]
+>[0];
+
+export const ShowContainers = () => {
+	const { data, isLoading } = api.docker.getContainers.useQuery();
+	const [sorting, setSorting] = React.useState<SortingState>([]);
+	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+		[],
+	);
+	const [columnVisibility, setColumnVisibility] =
+		React.useState<VisibilityState>({});
+	const [rowSelection, setRowSelection] = React.useState({});
+
+	const table = useReactTable({
+		data: data ?? [],
+		columns,
+		onSortingChange: setSorting,
+		onColumnFiltersChange: setColumnFilters,
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		onColumnVisibilityChange: setColumnVisibility,
+		onRowSelectionChange: setRowSelection,
+		state: {
+			sorting,
+			columnFilters,
+			columnVisibility,
+			rowSelection,
+		},
+	});
+
+	return (
+		<div className="mt-6 grid gap-4 pb-20 w-full">
+			<div className="flex flex-col gap-4  w-full overflow-auto">
+				<div className="flex items-center gap-2 max-sm:flex-wrap">
+					<Input
+						placeholder="Filter by name..."
+						value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
+						onChange={(event) =>
+							table.getColumn("name")?.setFilterValue(event.target.value)
+						}
+						className="md:max-w-sm"
+					/>
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="outline" className="sm:ml-auto max-sm:w-full">
+								Columns <ChevronDown className="ml-2 h-4 w-4" />
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end">
+							{table
+								.getAllColumns()
+								.filter((column) => column.getCanHide())
+								.map((column) => {
+									return (
+										<DropdownMenuCheckboxItem
+											key={column.id}
+											className="capitalize"
+											checked={column.getIsVisible()}
+											onCheckedChange={(value) =>
+												column.toggleVisibility(!!value)
+											}
+										>
+											{column.id}
+										</DropdownMenuCheckboxItem>
+									);
+								})}
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</div>
+				<div className="rounded-md border">
+					<Table>
+						<TableHeader>
+							{table.getHeaderGroups().map((headerGroup) => (
+								<TableRow key={headerGroup.id}>
+									{headerGroup.headers.map((header) => {
+										return (
+											<TableHead key={header.id}>
+												{header.isPlaceholder
+													? null
+													: flexRender(
+															header.column.columnDef.header,
+															header.getContext(),
+														)}
+											</TableHead>
+										);
+									})}
+								</TableRow>
+							))}
+						</TableHeader>
+						<TableBody>
+							{table.getRowModel().rows?.length ? (
+								table.getRowModel().rows.map((row) => (
+									<TableRow
+										key={row.id}
+										data-state={row.getIsSelected() && "selected"}
+									>
+										{row.getVisibleCells().map((cell) => (
+											<TableCell key={cell.id}>
+												{flexRender(
+													cell.column.columnDef.cell,
+													cell.getContext(),
+												)}
+											</TableCell>
+										))}
+									</TableRow>
+								))
+							) : (
+								<TableRow>
+									<TableCell
+										colSpan={columns.length}
+										className="h-24 text-center"
+									>
+										{isLoading ? (
+											<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+												<span className="text-muted-foreground text-lg font-medium">
+													Loading...
+												</span>
+											</div>
+										) : (
+											<>No results.</>
+										)}
+									</TableCell>
+								</TableRow>
+							)}
+						</TableBody>
+					</Table>
+				</div>
+				<div className="flex items-center justify-end space-x-2 py-4">
+					<div className="flex-1 text-sm text-muted-foreground">
+						{table.getFilteredSelectedRowModel().rows.length} of{" "}
+						{table.getFilteredRowModel().rows.length} row(s) selected.
+					</div>
+					<div className="space-x-2 flex flex-wrap">
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={() => table.previousPage()}
+							disabled={!table.getCanPreviousPage()}
+						>
+							Previous
+						</Button>
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={() => table.nextPage()}
+							disabled={!table.getCanNextPage()}
+						>
+							Next
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};

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

@@ -0,0 +1,48 @@
+import React from "react";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import dynamic from "next/dynamic";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+
+const Terminal = dynamic(
+	() => import("./docker-terminal").then((e) => e.DockerTerminal),
+	{
+		ssr: false,
+	},
+);
+
+interface Props {
+	containerId: string;
+	children?: React.ReactNode;
+}
+
+export const DockerTerminalModal = ({ children, containerId }: Props) => {
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer space-x-3"
+					onSelect={(e) => e.preventDefault()}
+				>
+					{children}
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-7xl">
+				<DialogHeader>
+					<DialogTitle>Docker Terminal</DialogTitle>
+					<DialogDescription>
+						Easy way to access to docker container
+					</DialogDescription>
+				</DialogHeader>
+
+				<Terminal id="terminal" containerId={containerId} />
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,68 @@
+import React, { useEffect, useRef } from "react";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "xterm-addon-fit";
+import "@xterm/xterm/css/xterm.css";
+import { AttachAddon } from "@xterm/addon-attach";
+import { Button } from "@/components/ui/button";
+
+interface Props {
+	id: string;
+	containerId: string;
+}
+
+export const DockerTerminal: React.FC<Props> = ({ id, containerId }) => {
+	const termRef = useRef(null);
+	const [activeWay, setActiveWay] = React.useState<string | null>("bash");
+	useEffect(() => {
+		const container = document.getElementById(id);
+		if (container) {
+			container.innerHTML = "";
+		}
+		const term = new Terminal({
+			cursorBlink: true,
+			cols: 80,
+			rows: 30,
+			lineHeight: 1.4,
+			convertEol: true,
+			theme: {
+				cursor: "transparent",
+				background: "#19191A",
+			},
+		});
+		const addonFit = new FitAddon();
+
+		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+
+		const wsUrl = `${protocol}//${window.location.host}/docker-container-terminal?containerId=${containerId}&activeWay=${activeWay}`;
+
+		const ws = new WebSocket(wsUrl);
+
+		const addonAttach = new AttachAddon(ws);
+		// @ts-ignore
+		term.open(termRef.current);
+		term.loadAddon(addonFit);
+		term.loadAddon(addonAttach);
+		addonFit.fit();
+		return () => {
+			ws.readyState === WebSocket.OPEN && ws.close();
+		};
+	}, [containerId, activeWay, id]);
+
+	return (
+		<div className="flex flex-col gap-4">
+			<div className="flex flex-col gap-2">
+				<span>
+					Select way to connect to <b>{containerId}</b>
+				</span>
+				<div className="flex flex-row gap-4 w-fit">
+					<Button onClick={() => setActiveWay("sh")}>SH</Button>
+					<Button onClick={() => setActiveWay("bash")}>Bash</Button>
+					<Button onClick={() => setActiveWay("sh")}>/bin/sh</Button>
+				</div>
+			</div>
+			<div className="w-full h-full bg-input rounded-lg p-2 ">
+				<div id={id} ref={termRef} className="rounded-xl" />
+			</div>
+		</div>
+	);
+};

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

@@ -0,0 +1,155 @@
+import { Button } from "@/components/ui/button";
+
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle } from "lucide-react";
+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";
+
+const UpdateServerMiddlewareConfigSchema = z.object({
+	traefikConfig: z.string(),
+});
+
+type UpdateServerMiddlewareConfig = z.infer<
+	typeof UpdateServerMiddlewareConfigSchema
+>;
+
+interface Props {
+	path: string;
+}
+
+export const ShowTraefikFile = ({ path }: Props) => {
+	const { data, refetch } = api.settings.readTraefikFile.useQuery(
+		{
+			path,
+		},
+		{
+			enabled: !!path,
+		},
+	);
+	const [canEdit, setCanEdit] = useState(true);
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.settings.updateTraefikFile.useMutation();
+
+	const form = useForm<UpdateServerMiddlewareConfig>({
+		defaultValues: {
+			traefikConfig: "",
+		},
+		disabled: canEdit,
+		resolver: zodResolver(UpdateServerMiddlewareConfigSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				traefikConfig: data || "",
+			});
+		}
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (data: UpdateServerMiddlewareConfig) => {
+		const { valid, error } = validateAndFormatYAML(data.traefikConfig);
+		if (!valid) {
+			form.setError("traefikConfig", {
+				type: "manual",
+				message: error || "Invalid YAML",
+			});
+			return;
+		}
+		form.clearErrors("traefikConfig");
+		await mutateAsync({
+			traefikConfig: data.traefikConfig,
+			path,
+		})
+			.then(async () => {
+				toast.success("Traefik config Updated");
+				refetch();
+			})
+			.catch(() => {
+				toast.error("Error to update the traefik config");
+			});
+	};
+
+	return (
+		<div>
+			{isError && (
+				<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+					<AlertTriangle className="text-red-600 dark:text-red-400" />
+					<span className="text-sm text-red-600 dark:text-red-400">
+						{error?.message}
+					</span>
+				</div>
+			)}
+
+			<Form {...form}>
+				<form
+					onSubmit={form.handleSubmit(onSubmit)}
+					className="grid w-full py-4 relative"
+				>
+					<div className="flex flex-col">
+						<FormField
+							control={form.control}
+							name="traefikConfig"
+							render={({ field }) => (
+								<FormItem className="relative">
+									<FormLabel>Traefik config</FormLabel>
+									<FormDescription>{path}</FormDescription>
+									<FormControl>
+										<Textarea
+											className="h-[35rem]"
+											placeholder={`http:
+routers:
+    router-name:
+        rule: Host('domain.com')
+        service: container-name
+        entryPoints:
+            - web
+        tls: false
+        middlewares: []
+                                                    `}
+											{...field}
+										/>
+									</FormControl>
+
+									<pre>
+										<FormMessage />
+									</pre>
+									<div className="flex justify-end absolute z-50 right-6 top-10">
+										<Button
+											variant="secondary"
+											type="button"
+											onClick={async () => {
+												setCanEdit(!canEdit);
+											}}
+										>
+											{canEdit ? "Unlock" : "Lock"}
+										</Button>
+									</div>
+								</FormItem>
+							)}
+						/>
+					</div>
+					<div className="flex justify-end">
+						<Button isLoading={isLoading} disabled={canEdit} type="submit">
+							Update
+						</Button>
+					</div>
+				</form>
+			</Form>
+		</div>
+	);
+};

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

@@ -0,0 +1,52 @@
+import React from "react";
+
+import { api } from "@/utils/api";
+import { Workflow, Folder, FileIcon } from "lucide-react";
+import { Tree } from "@/components/ui/file-tree";
+
+import { cn } from "@/lib/utils";
+import { ShowTraefikFile } from "./show-traefik-file";
+
+export const ShowTraefikSystem = () => {
+	const [file, setFile] = React.useState<null | string>(null);
+
+	const { data: directories } = api.settings.readDirectories.useQuery();
+
+	return (
+		<div className={cn("mt-6 grid gap-4 pb-20")}>
+			<div className="flex flex-col md:flex-row gap-4 md:gap-10 w-full">
+				{directories?.length === 0 && (
+					<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+						<span className="text-muted-foreground text-lg font-medium">
+							No directories or files detected in {"'/etc/dokploy/traefik'"}
+						</span>
+						<Folder className="size-8 text-muted-foreground" />
+					</div>
+				)}
+				{directories && directories?.length > 0 && (
+					<>
+						<Tree
+							data={directories}
+							className="md:max-w-[19rem] w-full md:h-[660px] border rounded-lg"
+							onSelectChange={(item) => setFile(item?.id || null)}
+							folderIcon={Folder}
+							itemIcon={Workflow}
+						/>
+						<div className="w-full">
+							{file ? (
+								<ShowTraefikFile path={file} />
+							) : (
+								<div className="h-full w-full flex-col gap-2 flex items-center justify-center">
+									<span className="text-muted-foreground text-lg font-medium">
+										No file selected
+									</span>
+									<FileIcon className="size-8 text-muted-foreground" />
+								</div>
+							)}
+						</div>
+					</>
+				)}
+			</div>
+		</div>
+	);
+};

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

@@ -0,0 +1,129 @@
+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 {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { useForm } from "react-hook-form";
+import { ShowVolumes } from "../volumes/show-volumes";
+
+const addDockerImage = z.object({
+	dockerImage: z.string().min(1, "Docker image is required"),
+	command: z.string(),
+});
+
+interface Props {
+	mariadbId: string;
+}
+
+type AddDockerImage = z.infer<typeof addDockerImage>;
+export const ShowAdvancedMariadb = ({ mariadbId }: Props) => {
+	const { data, refetch } = api.mariadb.one.useQuery(
+		{
+			mariadbId,
+		},
+		{ enabled: !!mariadbId },
+	);
+	const { mutateAsync } = api.mariadb.update.useMutation();
+
+	const form = useForm<AddDockerImage>({
+		defaultValues: {
+			dockerImage: "",
+			command: "",
+		},
+		resolver: zodResolver(addDockerImage),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				dockerImage: data.dockerImage,
+				command: data.command || "",
+			});
+		}
+	}, [data, form, form.formState.isSubmitSuccessful, form.reset]);
+
+	const onSubmit = async (formData: AddDockerImage) => {
+		await mutateAsync({
+			mariadbId,
+			dockerImage: formData?.dockerImage,
+			command: formData?.command,
+		})
+			.then(async () => {
+				toast.success("Docker Image Updated");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to Update the resources");
+			});
+	};
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">Advanced Settings</CardTitle>
+					</CardHeader>
+					<CardContent className="flex flex-col gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								className="grid w-full gap-4 "
+							>
+								<div className="grid w-full gap-4">
+									<FormField
+										control={form.control}
+										name="dockerImage"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Docker Image</FormLabel>
+												<FormControl>
+													<Input placeholder="mariadb:16" {...field} />
+												</FormControl>
+
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+
+									<FormField
+										control={form.control}
+										name="command"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Command</FormLabel>
+												<FormControl>
+													<Input placeholder="Custom command" {...field} />
+												</FormControl>
+
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+								<div className="flex w-full justify-end">
+									<Button isLoading={form.formState.isSubmitting} type="submit">
+										Save
+									</Button>
+								</div>
+							</form>
+						</Form>
+					</CardContent>
+				</Card>
+				<ShowVolumes mariadbId={mariadbId} />
+				<ShowMariadbResources mariadbId={mariadbId} />
+			</div>
+		</>
+	);
+};

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

@@ -0,0 +1,233 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  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";
+
+const addResourcesMariadb = z.object({
+  memoryReservation: z.number().nullable().optional(),
+  cpuLimit: z.number().nullable().optional(),
+  memoryLimit: z.number().nullable().optional(),
+  cpuReservation: z.number().nullable().optional(),
+});
+interface Props {
+  mariadbId: string;
+}
+
+type AddResourcesMariadb = z.infer<typeof addResourcesMariadb>;
+export const ShowMariadbResources = ({ mariadbId }: Props) => {
+  const { data, refetch } = api.mariadb.one.useQuery(
+    {
+      mariadbId,
+    },
+    { enabled: !!mariadbId },
+  );
+  const { mutateAsync, isLoading } = api.mariadb.update.useMutation();
+  const form = useForm<AddResourcesMariadb>({
+    defaultValues: {},
+    resolver: zodResolver(addResourcesMariadb),
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset({
+        cpuLimit: data?.cpuLimit || undefined,
+        cpuReservation: data?.cpuReservation || undefined,
+        memoryLimit: data?.memoryLimit || undefined,
+        memoryReservation: data?.memoryReservation || undefined,
+      });
+    }
+  }, [data, form, form.formState.isSubmitSuccessful, form.reset]);
+
+  const onSubmit = async (formData: AddResourcesMariadb) => {
+    await mutateAsync({
+      mariadbId,
+      cpuLimit: formData.cpuLimit || null,
+      cpuReservation: formData.cpuReservation || null,
+      memoryLimit: formData.memoryLimit || null,
+      memoryReservation: formData.memoryReservation || null,
+    })
+      .then(async () => {
+        toast.success("Resources Updated");
+        await refetch();
+      })
+      .catch(() => {
+        toast.error("Error to Update the resources");
+      });
+  };
+  return (
+    <Card className="bg-background">
+      <CardHeader>
+        <CardTitle className="text-xl">Resources</CardTitle>
+        <CardDescription>
+          If you want to decrease or increase the resources to a specific
+          application or database
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <Form {...form}>
+          <form
+            id="hook-form"
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="grid w-full gap-8 "
+          >
+            <div className="grid w-full md:grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="memoryReservation"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Memory Reservation</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="256 MB"
+                        {...field}
+                        value={field.value?.toString() || ""}
+                        onChange={(e) => {
+                          const value = e.target.value;
+                          if (value === "") {
+                            // Si el campo está vacío, establece el valor como null.
+                            field.onChange(null);
+                          } else {
+                            const number = Number.parseInt(value, 10);
+                            if (!Number.isNaN(number)) {
+                              // Solo actualiza el valor si se convierte a un número válido.
+                              field.onChange(number);
+                            }
+                          }
+                        }}
+                      />
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="memoryLimit"
+                render={({ field }) => {
+                  return (
+                    <FormItem>
+                      <FormLabel>Memory Limit</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder={"1024 MB"}
+                          {...field}
+                          value={field.value?.toString() || ""}
+                          onChange={(e) => {
+                            const value = e.target.value;
+                            if (value === "") {
+                              // Si el campo está vacío, establece el valor como null.
+                              field.onChange(null);
+                            } else {
+                              const number = Number.parseInt(value, 10);
+                              if (!Number.isNaN(number)) {
+                                // Solo actualiza el valor si se convierte a un número válido.
+                                field.onChange(number);
+                              }
+                            }
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
+
+              <FormField
+                control={form.control}
+                name="cpuLimit"
+                render={({ field }) => {
+                  return (
+                    <FormItem>
+                      <FormLabel>Cpu Limit</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder={"2"}
+                          {...field}
+                          value={field.value?.toString() || ""}
+                          onChange={(e) => {
+                            const value = e.target.value;
+                            if (value === "") {
+                              // Si el campo está vacío, establece el valor como null.
+                              field.onChange(null);
+                            } else {
+                              const number = Number.parseInt(value, 10);
+                              if (!Number.isNaN(number)) {
+                                // Solo actualiza el valor si se convierte a un número válido.
+                                field.onChange(number);
+                              }
+                            }
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
+              <FormField
+                control={form.control}
+                name="cpuReservation"
+                render={({ field }) => {
+                  return (
+                    <FormItem>
+                      <FormLabel>Cpu Reservation</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder={"1"}
+                          {...field}
+                          value={field.value?.toString() || ""}
+                          onChange={(e) => {
+                            const value = e.target.value;
+                            if (value === "") {
+                              // Si el campo está vacío, establece el valor como null.
+                              field.onChange(null);
+                            } else {
+                              const number = Number.parseInt(value, 10);
+                              if (!Number.isNaN(number)) {
+                                // Solo actualiza el valor si se convierte a un número válido.
+                                field.onChange(number);
+                              }
+                            }
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
+            </div>
+            <div className="flex w-full justify-end">
+              <Button isLoading={isLoading} type="submit">
+                Save
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </CardContent>
+    </Card>
+  );
+};

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

@@ -0,0 +1,178 @@
+import React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	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";
+interface Props {
+	mariadbId: string;
+}
+
+export const ShowBackupMariadb = ({ mariadbId }: Props) => {
+	const { data } = api.destination.all.useQuery();
+	const { data: mariadb, refetch: refetchMariadb } = api.mariadb.one.useQuery(
+		{
+			mariadbId,
+		},
+		{
+			enabled: !!mariadbId,
+		},
+	);
+
+	const { mutateAsync: manualBackup, isLoading: isManualBackup } =
+		api.backup.manualBackupMariadb.useMutation();
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between gap-4 flex-wrap">
+				<div className="flex flex-col gap-0.5">
+					<CardTitle className="text-xl">Backups</CardTitle>
+					<CardDescription>
+						Add backup to your database to save the data to a different
+						providers.
+					</CardDescription>
+				</div>
+
+				{mariadb && mariadb?.backups?.length > 0 && (
+					<AddBackup
+						databaseId={mariadbId}
+						databaseType="mariadb"
+						refetch={refetchMariadb}
+					/>
+				)}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data?.length === 0 ? (
+					<div className="flex flex-col items-center gap-3">
+						<DatabaseBackup className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							To create a backup is required to set at least 1 provider. Please,
+							go to{" "}
+							<Link
+								href="/dashboard/settings/server"
+								className="text-foreground"
+							>
+								Settings
+							</Link>{" "}
+							to do so.
+						</span>
+					</div>
+				) : (
+					<div>
+						{mariadb?.backups.length === 0 ? (
+							<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+								<DatabaseBackup className="size-8 text-muted-foreground" />
+								<span className="text-base text-muted-foreground">
+									No backups configured
+								</span>
+								<AddBackup
+									databaseId={mariadbId}
+									databaseType="mariadb"
+									refetch={refetchMariadb}
+								/>
+							</div>
+						) : (
+							<div className="flex flex-col pt-2">
+								<div className="flex flex-col gap-6">
+									{mariadb?.backups.map((backup) => (
+										<div key={backup.backupId}>
+											<div className="flex w-full flex-col md:flex-row md:items-center justify-between gap-4 md:gap-10 border rounded-lg p-4">
+												<div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-5 flex-col gap-8">
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">Destination</span>
+														<span className="text-sm text-muted-foreground">
+															{backup.destination.name}
+														</span>
+													</div>
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">Database</span>
+														<span className="text-sm text-muted-foreground">
+															{backup.database}
+														</span>
+													</div>
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">Scheduled</span>
+														<span className="text-sm text-muted-foreground">
+															{backup.schedule}
+														</span>
+													</div>
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">Prefix Storage</span>
+														<span className="text-sm text-muted-foreground">
+															{backup.prefix}
+														</span>
+													</div>
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">Enabled</span>
+														<span className="text-sm text-muted-foreground">
+															{backup.enabled ? "Yes" : "No"}
+														</span>
+													</div>
+												</div>
+												<div className="flex flex-row gap-4">
+													<TooltipProvider delayDuration={0}>
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<Button
+																	type="button"
+																	variant="ghost"
+																	isLoading={isManualBackup}
+																	onClick={async () => {
+																		await manualBackup({
+																			backupId: backup.backupId as string,
+																		})
+																			.then(async () => {
+																				toast.success(
+																					"Manual Backup Successful",
+																				);
+																			})
+																			.catch(() => {
+																				toast.error(
+																					"Error to Create the manual backup",
+																				);
+																			});
+																	}}
+																>
+																	<Play className="size-5  text-muted-foreground" />
+																</Button>
+															</TooltipTrigger>
+															<TooltipContent>Run Manual Backup</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+													<UpdateBackup
+														backupId={backup.backupId}
+														refetch={refetchMariadb}
+													/>
+													<DeleteBackup
+														backupId={backup.backupId}
+														refetch={refetchMariadb}
+													/>
+												</div>
+											</div>
+										</div>
+									))}
+								</div>
+							</div>
+						)}
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

components/dashboard/mariadb/delete-mariadb.tsx

@@ -0,0 +1,62 @@
+import {
+  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";
+import { TrashIcon } from "lucide-react";
+import { useRouter } from "next/router";
+import { toast } from "sonner";
+
+interface Props {
+  mariadbId: string;
+}
+
+export const DeleteMariadb = ({ mariadbId }: Props) => {
+  const { mutateAsync, isLoading } = api.mariadb.remove.useMutation();
+  const { push } = useRouter();
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive" isLoading={isLoading}>
+          <TrashIcon className="size-4 " />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete the
+            database
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={async () => {
+              await mutateAsync({
+                mariadbId,
+              })
+                .then((data) => {
+                  push(`/dashboard/project/${data?.projectId}`);
+                  toast.success("Database delete succesfully");
+                })
+                .catch(() => {
+                  toast.error("Error to delete the database");
+                });
+            }}
+          >
+            Confirm
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

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

@@ -0,0 +1,119 @@
+import React, { useEffect } from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	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,
+	FormField,
+	FormItem,
+	FormMessage,
+} from "@/components/ui/form";
+import { api } from "@/utils/api";
+import { toast } from "sonner";
+import { Textarea } from "@/components/ui/textarea";
+
+const addEnviromentSchema = z.object({
+	enviroment: z.string(),
+});
+
+type EnviromentSchema = z.infer<typeof addEnviromentSchema>;
+
+interface Props {
+	mariadbId: string;
+}
+
+export const ShowMariadbEnviroment = ({ mariadbId }: Props) => {
+	const { mutateAsync, isLoading } = api.mariadb.saveEnviroment.useMutation();
+
+	const { data, refetch } = api.mariadb.one.useQuery(
+		{
+			mariadbId,
+		},
+		{
+			enabled: !!mariadbId,
+		},
+	);
+	const form = useForm<EnviromentSchema>({
+		defaultValues: {
+			enviroment: "",
+		},
+		resolver: zodResolver(addEnviromentSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				enviroment: data.env || "",
+			});
+		}
+	}, [form.reset, data, form]);
+
+	const onSubmit = async (data: EnviromentSchema) => {
+		mutateAsync({
+			env: data.enviroment,
+			mariadbId,
+		})
+			.then(async () => {
+				toast.success("Enviroments Added");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to add enviroment");
+			});
+	};
+
+	return (
+		<div className="flex w-full flex-col gap-5 ">
+			<Card className="bg-background">
+				<CardHeader>
+					<CardTitle className="text-xl">Enviroment Settings</CardTitle>
+					<CardDescription>
+						You can add enviroment variables to your database.
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Form {...form}>
+						<form
+							id="hook-form"
+							onSubmit={form.handleSubmit(onSubmit)}
+							className="grid w-full gap-4 "
+						>
+							<FormField
+								control={form.control}
+								name="enviroment"
+								render={({ field }) => (
+									<FormItem className="w-full">
+										<FormControl>
+											<Textarea
+												placeholder="MARIADB_PASSWORD=1234567678"
+												className="h-96"
+												{...field}
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<div className="flex flex-row justify-end">
+								<Button isLoading={isLoading} className="w-fit" type="submit">
+									Save
+								</Button>
+							</div>
+						</form>
+					</Form>
+				</CardContent>
+			</Card>
+		</div>
+	);
+};

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

@@ -0,0 +1,77 @@
+import {
+	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";
+import { toast } from "sonner";
+
+interface Props {
+	mariadbId: string;
+}
+
+export const DeployMariadb = ({ mariadbId }: Props) => {
+	const { data, refetch } = api.mariadb.one.useQuery(
+		{
+			mariadbId,
+		},
+		{ enabled: !!mariadbId },
+	);
+	const { mutateAsync: deploy } = api.mariadb.deploy.useMutation();
+	const { mutateAsync: changeStatus } = api.mariadb.changeStatus.useMutation();
+
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button isLoading={data?.applicationStatus === "running"}>
+					Deploy
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will deploy the mariadb database
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await changeStatus({
+								mariadbId,
+								applicationStatus: "running",
+							})
+								.then(async () => {
+									toast.success("Database Deploying....");
+									await refetch();
+									await deploy({
+										mariadbId,
+									})
+										.then(() => {
+											toast.success("Database Deployed Succesfully");
+										})
+										.catch(() => {
+											toast.error("Error to deploy Database");
+										});
+									await refetch();
+								})
+								.catch((e) => {
+									toast.error(e.message || "Error to deploy Database");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,69 @@
+import {
+	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";
+import { RefreshCcw } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	mariadbId: string;
+	appName: string;
+}
+
+export const ResetMariadb = ({ mariadbId, appName }: Props) => {
+	const { refetch } = api.mariadb.one.useQuery(
+		{
+			mariadbId,
+		},
+		{ enabled: !!mariadbId },
+	);
+	const { mutateAsync: reload, isLoading } = api.mariadb.reload.useMutation();
+
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="secondary" isLoading={isLoading}>
+					Reload
+					<RefreshCcw className="size-4" />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will reload the service
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await reload({
+								mariadbId,
+								appName,
+							})
+								.then(() => {
+									toast.success("Service Reloaded");
+								})
+								.catch(() => {
+									toast.error("Error to reload the service");
+								});
+							await refetch();
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,156 @@
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const DockerProviderSchema = z.object({
+	externalPort: z.preprocess((a) => {
+		if (a !== null) {
+			const parsed = Number.parseInt(z.string().parse(a), 10);
+			return Number.isNaN(parsed) ? null : parsed;
+		}
+		return null;
+	}, z
+		.number()
+		.gte(0, "Range must be 0 - 65535")
+		.lte(65535, "Range must be 0 - 65535")
+		.nullable()),
+});
+
+type DockerProvider = z.infer<typeof DockerProviderSchema>;
+
+interface Props {
+	mariadbId: string;
+}
+export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => {
+	const { data, refetch } = api.mariadb.one.useQuery({ mariadbId });
+	const { mutateAsync, isLoading } = api.mariadb.saveExternalPort.useMutation();
+	const [connectionUrl, setConnectionUrl] = useState("");
+	const form = useForm<DockerProvider>({
+		defaultValues: {},
+		resolver: zodResolver(DockerProviderSchema),
+	});
+
+	useEffect(() => {
+		if (data?.externalPort) {
+			form.reset({
+				externalPort: data.externalPort,
+			});
+		}
+	}, [form.reset, data, form]);
+
+	const onSubmit = async (values: DockerProvider) => {
+		await mutateAsync({
+			externalPort: values.externalPort,
+			mariadbId,
+		})
+			.then(async () => {
+				toast.success("External Port updated");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to save the external port");
+			});
+	};
+
+	useEffect(() => {
+		const buildConnectionUrl = () => {
+			const hostname = window.location.hostname;
+			const port = form.watch("externalPort") || data?.externalPort;
+
+			return `mariadb://${data?.databaseUser}:${data?.databasePassword}@${hostname}:${port}/${data?.databaseName}`;
+		};
+
+		setConnectionUrl(buildConnectionUrl());
+	}, [
+		data?.appName,
+		data?.externalPort,
+		data?.databasePassword,
+		form,
+		data?.databaseName,
+		data?.databaseUser,
+	]);
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">External Credentials</CardTitle>
+						<CardDescription>
+							In order to make the database reachable trought internet is
+							required to set a port, make sure the port is not used by another
+							application or database
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="flex w-full flex-col gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								className="flex flex-col gap-4"
+							>
+								<div className="grid md:grid-cols-2 gap-4 ">
+									<div className="md:col-span-2 space-y-4">
+										<FormField
+											control={form.control}
+											name="externalPort"
+											render={({ field }) => {
+												return (
+													<FormItem>
+														<FormLabel>External Port (Internet)</FormLabel>
+														<FormControl>
+															<Input
+																placeholder="3306"
+																{...field}
+																value={field.value || ""}
+															/>
+														</FormControl>
+														<FormMessage />
+													</FormItem>
+												);
+											}}
+										/>
+									</div>
+								</div>
+								{!!data?.externalPort && (
+									<div className="grid w-full gap-8">
+										<div className="flex flex-col gap-3">
+											{/* jdbc:mariadb://5.161.59.207:3306/pixel-calculate?user=mariadb&password=HdVXfq6hM7W7F1 */}
+											<Label>External Host</Label>
+											<Input disabled value={connectionUrl} />
+										</div>
+									</div>
+								)}
+
+								<div className="flex justify-end">
+									<Button type="submit" isLoading={isLoading}>
+										Save
+									</Button>
+								</div>
+							</form>
+						</Form>
+					</CardContent>
+				</Card>
+			</div>
+		</>
+	);
+};

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

@@ -0,0 +1,50 @@
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+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 { DeployMariadb } from "./deploy-mariadb";
+import { ResetMariadb } from "./reset-mariadb";
+
+interface Props {
+	mariadbId: string;
+}
+
+export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
+	const { data } = api.mariadb.one.useQuery(
+		{
+			mariadbId,
+		},
+		{ enabled: !!mariadbId },
+	);
+
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">Deploy Settings</CardTitle>
+					</CardHeader>
+					<CardContent className="flex flex-row gap-4 flex-wrap">
+						<DeployMariadb mariadbId={mariadbId} />
+						<ResetMariadb mariadbId={mariadbId} appName={data?.appName || ""} />
+						{data?.applicationStatus === "idle" ? (
+							<StartMariadb mariadbId={mariadbId} />
+						) : (
+							<StopMariadb mariadbId={mariadbId} />
+						)}
+						<DockerTerminalModal appName={data?.appName || ""}>
+							<Button variant="outline">
+								<Terminal />
+								Open Terminal
+							</Button>
+						</DockerTerminalModal>
+					</CardContent>
+				</Card>
+			</div>
+		</>
+	);
+};

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

@@ -0,0 +1,72 @@
+import React from "react";
+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";
+
+interface Props {
+	mariadbId: string;
+}
+export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
+	const { data } = api.mariadb.one.useQuery({ mariadbId });
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">Internal Credentials</CardTitle>
+					</CardHeader>
+					<CardContent className="flex w-full flex-row gap-4">
+						<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
+							<div className="flex flex-col gap-2">
+								<Label>User</Label>
+								<Input disabled value={data?.databaseUser} />
+							</div>
+							<div className="flex flex-col gap-2">
+								<Label>Database Name</Label>
+								<Input disabled value={data?.databaseName} />
+							</div>
+							<div className="flex flex-col gap-2">
+								<Label>Password</Label>
+								<div className="flex flex-row gap-4">
+									<Input
+										disabled
+										value={data?.databasePassword}
+										type="password"
+									/>
+								</div>
+							</div>
+							<div className="flex flex-col gap-2">
+								<Label>Root Password</Label>
+								<div className="flex flex-row gap-4">
+									<Input
+										disabled
+										value={data?.databaseRootPassword}
+										type="password"
+									/>
+								</div>
+							</div>
+							<div className="flex flex-col gap-2">
+								<Label>Internal Port (Container)</Label>
+								<Input disabled value="3306" />
+							</div>
+
+							<div className="flex flex-col gap-2">
+								<Label>Internal Host</Label>
+								<Input disabled value={data?.appName} />
+							</div>
+
+							<div className="flex flex-col gap-2 md:col-span-2">
+								<Label>Internal Connection URL </Label>
+								<Input
+									disabled
+									value={`mariadb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:3306/${data?.databaseName}`}
+								/>
+							</div>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		</>
+	);
+};

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

@@ -0,0 +1,65 @@
+import {
+  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";
+import { Ban } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+  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>
+  );
+};

components/dashboard/mariadb/start-mariadb.tsx

@@ -0,0 +1,65 @@
+import {
+  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";
+import { CheckCircle2 } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+  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>
+  );
+};

components/dashboard/mariadb/update-mariadb.tsx

@@ -0,0 +1,165 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+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";
+
+const updateMariadbSchema = z.object({
+	name: z.string().min(1, {
+		message: "Name is required",
+	}),
+	description: z.string().optional(),
+});
+
+type UpdateMariadb = z.infer<typeof updateMariadbSchema>;
+
+interface Props {
+	mariadbId: string;
+}
+
+export const UpdateMariadb = ({ mariadbId }: Props) => {
+	const utils = api.useUtils();
+	const { mutateAsync, error, isError, isLoading } =
+		api.mariadb.update.useMutation();
+	const { data } = api.mariadb.one.useQuery(
+		{
+			mariadbId,
+		},
+		{
+			enabled: !!mariadbId,
+		},
+	);
+	const form = useForm<UpdateMariadb>({
+		defaultValues: {
+			description: data?.description ?? "",
+			name: data?.name ?? "",
+		},
+		resolver: zodResolver(updateMariadbSchema),
+	});
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				description: data.description ?? "",
+				name: data.name,
+			});
+		}
+	}, [data, form, form.reset]);
+
+	const onSubmit = async (formData: UpdateMariadb) => {
+		await mutateAsync({
+			name: formData.name,
+			mariadbId: mariadbId,
+			description: formData.description || "",
+		})
+			.then(() => {
+				toast.success("MariaDB updated succesfully");
+				utils.mariadb.one.invalidate({
+					mariadbId: mariadbId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to update the Mariadb");
+			})
+			.finally(() => {});
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="ghost">
+					<SquarePen className="size-4" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Modify MariaDB</DialogTitle>
+					<DialogDescription>Update the MariaDB data</DialogDescription>
+				</DialogHeader>
+				{isError && (
+					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error.message}
+						</span>
+					</div>
+				)}
+
+				<div className="grid gap-4">
+					<div className="grid items-center gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								id="hook-form-update-mariadb"
+								className="grid w-full gap-4 "
+							>
+								<FormField
+									control={form.control}
+									name="name"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Name</FormLabel>
+											<FormControl>
+												<Input placeholder="Tesla" {...field} />
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="description"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Description</FormLabel>
+											<FormControl>
+												<Textarea
+													placeholder="Description about your project..."
+													className="resize-none"
+													{...field}
+												/>
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<DialogFooter>
+									<Button
+										isLoading={isLoading}
+										form="hook-form-update-mariadb"
+										type="submit"
+									>
+										Update
+									</Button>
+								</DialogFooter>
+							</form>
+						</Form>
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,128 @@
+import React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { AlertTriangle, Package } from "lucide-react";
+import { DeleteVolume } from "../../application/advanced/volumes/delete-volume";
+import { AddVolumes } from "../../application/advanced/volumes/add-volumes";
+interface Props {
+	mariadbId: string;
+}
+
+export const ShowVolumes = ({ mariadbId }: Props) => {
+	const { data, refetch } = api.mariadb.one.useQuery(
+		{
+			mariadbId,
+		},
+		{ enabled: !!mariadbId },
+	);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
+				<div>
+					<CardTitle className="text-xl">Volumes</CardTitle>
+					<CardDescription>
+						If you want to persist data in this mariadb use the following config
+						to setup the volumes
+					</CardDescription>
+				</div>
+
+				{data && data?.mounts.length > 0 && (
+					<AddVolumes
+						serviceId={mariadbId}
+						refetch={refetch}
+						serviceType="mariadb"
+					>
+						Add Volume
+					</AddVolumes>
+				)}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data?.mounts.length === 0 ? (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+						<Package className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							No volumes/mounts configured
+						</span>
+						<AddVolumes
+							serviceId={mariadbId}
+							refetch={refetch}
+							serviceType="mariadb"
+						>
+							Add Volume
+						</AddVolumes>
+					</div>
+				) : (
+					<div className="flex flex-col pt-2">
+						<div className="flex flex-col sm:flex-row items-center gap-4 rounded-lg bg-yellow-50 p-2 dark:bg-yellow-950">
+							<AlertTriangle className="text-yellow-600 size-5 sm:size-8 dark:text-yellow-400" />
+							<span className="text-sm text-yellow-600 dark:text-yellow-400">
+								Please remember to click Redeploy after adding, editing, or
+								deleting a mount to apply the changes.
+							</span>
+						</div>
+						<div className="flex flex-col gap-6 pt-6">
+							{data?.mounts.map((mount) => (
+								<div key={mount.mountId}>
+									<div
+										key={mount.mountId}
+										className="flex w-full flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-10 border rounded-lg p-4"
+									>
+										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 flex-col gap-4 sm:gap-8">
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Mount Type</span>
+												<span className="text-sm text-muted-foreground">
+													{mount.type.toUpperCase()}
+												</span>
+											</div>
+											{mount.type === "volume" && (
+												<div className="flex flex-col gap-1">
+													<span className="font-medium">Volume Name</span>
+													<span className="text-sm text-muted-foreground">
+														{mount.volumeName}
+													</span>
+												</div>
+											)}
+
+											{mount.type === "file" && (
+												<div className="flex flex-col gap-1">
+													<span className="font-medium">Content</span>
+													<span className="text-sm text-muted-foreground">
+														{mount.content}
+													</span>
+												</div>
+											)}
+											{mount.type === "bind" && (
+												<div className="flex flex-col gap-1">
+													<span className="font-medium">Host Path</span>
+													<span className="text-sm text-muted-foreground">
+														{mount.hostPath}
+													</span>
+												</div>
+											)}
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Mount Path</span>
+												<span className="text-sm text-muted-foreground">
+													{mount.mountPath}
+												</span>
+											</div>
+										</div>
+										<div>
+											<DeleteVolume mountId={mount.mountId} refetch={refetch} />
+										</div>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -0,0 +1,128 @@
+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 {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { useForm } from "react-hook-form";
+import { ShowMongoResources } from "./show-mongo-resources";
+import { ShowVolumes } from "../volumes/show-volumes";
+
+const addDockerImage = z.object({
+	dockerImage: z.string().min(1, "Docker image is required"),
+	command: z.string(),
+});
+
+interface Props {
+	mongoId: string;
+}
+
+type AddDockerImage = z.infer<typeof addDockerImage>;
+export const ShowAdvancedMongo = ({ mongoId }: Props) => {
+	const { data, refetch } = api.mongo.one.useQuery(
+		{
+			mongoId,
+		},
+		{ enabled: !!mongoId },
+	);
+	const { mutateAsync } = api.mongo.update.useMutation();
+
+	const form = useForm<AddDockerImage>({
+		defaultValues: {
+			dockerImage: "",
+			command: "",
+		},
+		resolver: zodResolver(addDockerImage),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				dockerImage: data.dockerImage,
+				command: data.command || "",
+			});
+		}
+	}, [data, form, form.formState.isSubmitSuccessful, form.reset]);
+
+	const onSubmit = async (formData: AddDockerImage) => {
+		await mutateAsync({
+			mongoId,
+			dockerImage: formData?.dockerImage,
+			command: formData?.command,
+		})
+			.then(async () => {
+				toast.success("Resources Updated");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to Update the resources");
+			});
+	};
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">Advanced Settings</CardTitle>
+					</CardHeader>
+					<CardContent className="flex flex-col gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								className="grid w-full gap-4 "
+							>
+								<div className="grid w-full gap-4">
+									<FormField
+										control={form.control}
+										name="dockerImage"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Docker Image</FormLabel>
+												<FormControl>
+													<Input placeholder="mongo:16" {...field} />
+												</FormControl>
+
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+									<FormField
+										control={form.control}
+										name="command"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Command</FormLabel>
+												<FormControl>
+													<Input placeholder="Custom command" {...field} />
+												</FormControl>
+
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+								<div className="flex w-full justify-end">
+									<Button isLoading={form.formState.isSubmitting} type="submit">
+										Save
+									</Button>
+								</div>
+							</form>
+						</Form>
+					</CardContent>
+				</Card>
+				<ShowVolumes mongoId={mongoId} />
+				<ShowMongoResources mongoId={mongoId} />
+			</div>
+		</>
+	);
+};

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

@@ -0,0 +1,233 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  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";
+
+const addResourcesMongo = z.object({
+  memoryReservation: z.number().nullable().optional(),
+  cpuLimit: z.number().nullable().optional(),
+  memoryLimit: z.number().nullable().optional(),
+  cpuReservation: z.number().nullable().optional(),
+});
+interface Props {
+  mongoId: string;
+}
+
+type AddResourcesMongo = z.infer<typeof addResourcesMongo>;
+export const ShowMongoResources = ({ mongoId }: Props) => {
+  const { data, refetch } = api.mongo.one.useQuery(
+    {
+      mongoId,
+    },
+    { enabled: !!mongoId },
+  );
+  const { mutateAsync, isLoading } = api.mongo.update.useMutation();
+  const form = useForm<AddResourcesMongo>({
+    defaultValues: {},
+    resolver: zodResolver(addResourcesMongo),
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset({
+        cpuLimit: data?.cpuLimit || undefined,
+        cpuReservation: data?.cpuReservation || undefined,
+        memoryLimit: data?.memoryLimit || undefined,
+        memoryReservation: data?.memoryReservation || undefined,
+      });
+    }
+  }, [data, form, form.reset]);
+
+  const onSubmit = async (formData: AddResourcesMongo) => {
+    await mutateAsync({
+      mongoId,
+      cpuLimit: formData.cpuLimit || null,
+      cpuReservation: formData.cpuReservation || null,
+      memoryLimit: formData.memoryLimit || null,
+      memoryReservation: formData.memoryReservation || null,
+    })
+      .then(async () => {
+        toast.success("Resources Updated");
+        await refetch();
+      })
+      .catch(() => {
+        toast.error("Error to Update the resources");
+      });
+  };
+  return (
+    <Card className="bg-background">
+      <CardHeader>
+        <CardTitle className="text-xl">Resources</CardTitle>
+        <CardDescription>
+          If you want to decrease or increase the resources to a specific
+          application or database
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <Form {...form}>
+          <form
+            id="hook-form"
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="grid w-full gap-8 "
+          >
+            <div className="grid w-full md:grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="memoryReservation"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Memory Reservation</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="256 MB"
+                        {...field}
+                        value={field.value?.toString() || ""}
+                        onChange={(e) => {
+                          const value = e.target.value;
+                          if (value === "") {
+                            // Si el campo está vacío, establece el valor como null.
+                            field.onChange(null);
+                          } else {
+                            const number = Number.parseInt(value, 10);
+                            if (!Number.isNaN(number)) {
+                              // Solo actualiza el valor si se convierte a un número válido.
+                              field.onChange(number);
+                            }
+                          }
+                        }}
+                      />
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="memoryLimit"
+                render={({ field }) => {
+                  return (
+                    <FormItem>
+                      <FormLabel>Memory Limit</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder={"1024 MB"}
+                          {...field}
+                          value={field.value?.toString() || ""}
+                          onChange={(e) => {
+                            const value = e.target.value;
+                            if (value === "") {
+                              // Si el campo está vacío, establece el valor como null.
+                              field.onChange(null);
+                            } else {
+                              const number = Number.parseInt(value, 10);
+                              if (!Number.isNaN(number)) {
+                                // Solo actualiza el valor si se convierte a un número válido.
+                                field.onChange(number);
+                              }
+                            }
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
+
+              <FormField
+                control={form.control}
+                name="cpuLimit"
+                render={({ field }) => {
+                  return (
+                    <FormItem>
+                      <FormLabel>Cpu Limit</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder={"2"}
+                          {...field}
+                          value={field.value?.toString() || ""}
+                          onChange={(e) => {
+                            const value = e.target.value;
+                            if (value === "") {
+                              // Si el campo está vacío, establece el valor como null.
+                              field.onChange(null);
+                            } else {
+                              const number = Number.parseInt(value, 10);
+                              if (!Number.isNaN(number)) {
+                                // Solo actualiza el valor si se convierte a un número válido.
+                                field.onChange(number);
+                              }
+                            }
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
+              <FormField
+                control={form.control}
+                name="cpuReservation"
+                render={({ field }) => {
+                  return (
+                    <FormItem>
+                      <FormLabel>Cpu Reservation</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder={"1"}
+                          {...field}
+                          value={field.value?.toString() || ""}
+                          onChange={(e) => {
+                            const value = e.target.value;
+                            if (value === "") {
+                              // Si el campo está vacío, establece el valor como null.
+                              field.onChange(null);
+                            } else {
+                              const number = Number.parseInt(value, 10);
+                              if (!Number.isNaN(number)) {
+                                // Solo actualiza el valor si se convierte a un número válido.
+                                field.onChange(number);
+                              }
+                            }
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
+            </div>
+            <div className="flex w-full justify-end">
+              <Button isLoading={isLoading} type="submit">
+                Save
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </CardContent>
+    </Card>
+  );
+};

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

@@ -0,0 +1,178 @@
+import React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	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";
+interface Props {
+	mongoId: string;
+}
+
+export const ShowBackupMongo = ({ mongoId }: Props) => {
+	const { data } = api.destination.all.useQuery();
+	const { data: mongo, refetch: refetchMongo } = api.mongo.one.useQuery(
+		{
+			mongoId,
+		},
+		{
+			enabled: !!mongoId,
+		},
+	);
+
+	const { mutateAsync: manualBackup, isLoading: isManualBackup } =
+		api.backup.manualBackupMongo.useMutation();
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between gap-4  flex-wrap">
+				<div className="flex flex-col gap-0.5">
+					<CardTitle className="text-xl">Backups</CardTitle>
+					<CardDescription>
+						Add backup to your database to save the data to a different
+						providers.
+					</CardDescription>
+				</div>
+
+				{mongo && mongo?.backups?.length > 0 && (
+					<AddBackup
+						databaseId={mongoId}
+						databaseType="mongo"
+						refetch={refetchMongo}
+					/>
+				)}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data?.length === 0 ? (
+					<div className="flex flex-col items-center gap-3">
+						<DatabaseBackup className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							To create a backup is required to set at least 1 provider. Please,
+							go to{" "}
+							<Link
+								href="/dashboard/settings/server"
+								className="text-foreground"
+							>
+								Settings
+							</Link>{" "}
+							to do so.
+						</span>
+					</div>
+				) : (
+					<div>
+						{mongo?.backups.length === 0 ? (
+							<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+								<DatabaseBackup className="size-8 text-muted-foreground" />
+								<span className="text-base text-muted-foreground">
+									No backups configured
+								</span>
+								<AddBackup
+									databaseId={mongoId}
+									databaseType="mongo"
+									refetch={refetchMongo}
+								/>
+							</div>
+						) : (
+							<div className="flex flex-col pt-2">
+								<div className="flex flex-col gap-6">
+									{mongo?.backups.map((backup) => (
+										<div key={backup.backupId}>
+											<div className="flex w-full flex-col md:flex-row md:items-center justify-between gap-4 md:gap-10 border rounded-lg p-4">
+												<div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-5 flex-col gap-8">
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">Destination</span>
+														<span className="text-sm text-muted-foreground">
+															{backup.destination.name}
+														</span>
+													</div>
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">Database</span>
+														<span className="text-sm text-muted-foreground">
+															{backup.database}
+														</span>
+													</div>
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">Scheduled</span>
+														<span className="text-sm text-muted-foreground">
+															{backup.schedule}
+														</span>
+													</div>
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">Prefix Storage</span>
+														<span className="text-sm text-muted-foreground">
+															{backup.prefix}
+														</span>
+													</div>
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">Enabled</span>
+														<span className="text-sm text-muted-foreground">
+															{backup.enabled ? "Yes" : "No"}
+														</span>
+													</div>
+												</div>
+												<div className="flex flex-row gap-4">
+													<TooltipProvider delayDuration={0}>
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<Button
+																	type="button"
+																	variant="ghost"
+																	isLoading={isManualBackup}
+																	onClick={async () => {
+																		await manualBackup({
+																			backupId: backup.backupId as string,
+																		})
+																			.then(async () => {
+																				toast.success(
+																					"Manual Backup Successful",
+																				);
+																			})
+																			.catch(() => {
+																				toast.error(
+																					"Error to Create the manual backup",
+																				);
+																			});
+																	}}
+																>
+																	<Play className="size-5  text-muted-foreground" />
+																</Button>
+															</TooltipTrigger>
+															<TooltipContent>Run Manual Backup</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+													<UpdateBackup
+														backupId={backup.backupId}
+														refetch={refetchMongo}
+													/>
+													<DeleteBackup
+														backupId={backup.backupId}
+														refetch={refetchMongo}
+													/>
+												</div>
+											</div>
+										</div>
+									))}
+								</div>
+							</div>
+						)}
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

components/dashboard/mongo/delete-mongo.tsx

@@ -0,0 +1,62 @@
+import {
+  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";
+import { TrashIcon } from "lucide-react";
+import { useRouter } from "next/router";
+import { toast } from "sonner";
+
+interface Props {
+  mongoId: string;
+}
+
+export const DeleteMongo = ({ mongoId }: Props) => {
+  const { mutateAsync, isLoading } = api.mongo.remove.useMutation();
+  const { push } = useRouter();
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive" isLoading={isLoading}>
+          <TrashIcon className="size-4 " />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete the
+            database
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={async () => {
+              await mutateAsync({
+                mongoId,
+              })
+                .then((data) => {
+                  push(`/dashboard/project/${data?.projectId}`);
+                  toast.success("Database delete succesfully");
+                })
+                .catch(() => {
+                  toast.error("Error to delete the database");
+                });
+            }}
+          >
+            Confirm
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

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

@@ -0,0 +1,119 @@
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormMessage,
+} from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+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";
+
+const addEnviromentSchema = z.object({
+	enviroment: z.string(),
+});
+
+type EnviromentSchema = z.infer<typeof addEnviromentSchema>;
+
+interface Props {
+	mongoId: string;
+}
+
+export const ShowMongoEnviroment = ({ mongoId }: Props) => {
+	const { mutateAsync, isLoading } = api.mongo.saveEnviroment.useMutation();
+
+	const { data, refetch } = api.mongo.one.useQuery(
+		{
+			mongoId,
+		},
+		{
+			enabled: !!mongoId,
+		},
+	);
+	const form = useForm<EnviromentSchema>({
+		defaultValues: {
+			enviroment: "",
+		},
+		resolver: zodResolver(addEnviromentSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				enviroment: data.env || "",
+			});
+		}
+	}, [form.reset, data, form]);
+
+	const onSubmit = async (data: EnviromentSchema) => {
+		mutateAsync({
+			env: data.enviroment,
+			mongoId,
+		})
+			.then(async () => {
+				toast.success("Enviroments Added");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to add enviroment");
+			});
+	};
+
+	return (
+		<div className="flex w-full flex-col gap-5 ">
+			<Card className="bg-background">
+				<CardHeader>
+					<CardTitle className="text-xl">Enviroment Settings</CardTitle>
+					<CardDescription>
+						You can add enviroment variables to your database.
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Form {...form}>
+						<form
+							id="hook-form"
+							onSubmit={form.handleSubmit(onSubmit)}
+							className="grid w-full gap-4 "
+						>
+							<FormField
+								control={form.control}
+								name="enviroment"
+								render={({ field }) => (
+									<FormItem className="w-full">
+										<FormControl>
+											<Textarea
+												placeholder="MONGO_PASSWORD=1234567678"
+												className="h-96"
+												{...field}
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<div className="flex flex-row justify-end">
+								<Button isLoading={isLoading} className="w-fit" type="submit">
+									Save
+								</Button>
+							</div>
+						</form>
+					</Form>
+				</CardContent>
+			</Card>
+		</div>
+	);
+};

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

@@ -0,0 +1,77 @@
+import {
+	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";
+import { toast } from "sonner";
+
+interface Props {
+	mongoId: string;
+}
+
+export const DeployMongo = ({ mongoId }: Props) => {
+	const { data, refetch } = api.mongo.one.useQuery(
+		{
+			mongoId,
+		},
+		{ enabled: !!mongoId },
+	);
+	const { mutateAsync: deploy } = api.mongo.deploy.useMutation();
+	const { mutateAsync: changeStatus } = api.mongo.changeStatus.useMutation();
+
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button isLoading={data?.applicationStatus === "running"}>
+					Deploy
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will deploy the mongo database
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await changeStatus({
+								mongoId,
+								applicationStatus: "running",
+							})
+								.then(async () => {
+									toast.success("Database Deploying....");
+									await refetch();
+									await deploy({
+										mongoId,
+									})
+										.then(() => {
+											toast.success("Database Deployed Succesfully");
+										})
+										.catch(() => {
+											toast.error("Error to deploy Database");
+										});
+									await refetch();
+								})
+								.catch((e) => {
+									toast.error(e.message || "Error to deploy Database");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,69 @@
+import {
+	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";
+import { RefreshCcw } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	mongoId: string;
+	appName: string;
+}
+
+export const ResetMongo = ({ mongoId, appName }: Props) => {
+	const { refetch } = api.mongo.one.useQuery(
+		{
+			mongoId,
+		},
+		{ enabled: !!mongoId },
+	);
+	const { mutateAsync: reload, isLoading } = api.mongo.reload.useMutation();
+
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="secondary" isLoading={isLoading}>
+					Reload
+					<RefreshCcw className="size-4" />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will reload the service
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await reload({
+								mongoId,
+								appName,
+							})
+								.then(() => {
+									toast.success("Service Reloaded");
+								})
+								.catch(() => {
+									toast.error("Error to reload the service");
+								});
+							await refetch();
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,156 @@
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const DockerProviderSchema = z.object({
+	externalPort: z.preprocess((a) => {
+		if (a !== null) {
+			const parsed = Number.parseInt(z.string().parse(a), 10);
+			return Number.isNaN(parsed) ? null : parsed;
+		}
+		return null;
+	}, z
+		.number()
+		.gte(0, "Range must be 0 - 65535")
+		.lte(65535, "Range must be 0 - 65535")
+		.nullable()),
+});
+
+type DockerProvider = z.infer<typeof DockerProviderSchema>;
+
+interface Props {
+	mongoId: string;
+}
+export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
+	const { data, refetch } = api.mongo.one.useQuery({ mongoId });
+	const { mutateAsync, isLoading } = api.mongo.saveExternalPort.useMutation();
+	const [connectionUrl, setConnectionUrl] = useState("");
+
+	const form = useForm<DockerProvider>({
+		defaultValues: {},
+		resolver: zodResolver(DockerProviderSchema),
+	});
+
+	useEffect(() => {
+		if (data?.externalPort) {
+			form.reset({
+				externalPort: data.externalPort,
+			});
+		}
+	}, [form.reset, data, form]);
+
+	const onSubmit = async (values: DockerProvider) => {
+		await mutateAsync({
+			externalPort: values.externalPort,
+			mongoId,
+		})
+			.then(async () => {
+				toast.success("External Port updated");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to save the external port");
+			});
+	};
+
+	useEffect(() => {
+		const buildConnectionUrl = () => {
+			const hostname = window.location.hostname;
+			const port = form.watch("externalPort") || data?.externalPort;
+
+			return `mongodb://${data?.databaseUser}:${data?.databasePassword}@${hostname}:${port}`;
+		};
+
+		setConnectionUrl(buildConnectionUrl());
+	}, [
+		data?.appName,
+		data?.externalPort,
+		data?.databasePassword,
+		form,
+		data?.databaseUser,
+	]);
+
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">External Credentials</CardTitle>
+						<CardDescription>
+							In order to make the database reachable trought internet is
+							required to set a port, make sure the port is not used by another
+							application or database
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="flex w-full flex-col gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								className="flex flex-col gap-4"
+							>
+								<div className="grid grid-cols-2 gap-4 ">
+									<div className="col-span-2 space-y-4">
+										<FormField
+											control={form.control}
+											name="externalPort"
+											render={({ field }) => {
+												return (
+													<FormItem>
+														<FormLabel>External Port (Internet)</FormLabel>
+														<FormControl>
+															<Input
+																placeholder="27017"
+																{...field}
+																value={field.value || ""}
+															/>
+														</FormControl>
+														<FormMessage />
+													</FormItem>
+												);
+											}}
+										/>
+									</div>
+								</div>
+								{!!data?.externalPort && (
+									<div className="grid w-full gap-8">
+										<div className="flex flex-col gap-3">
+											<Label>External Host</Label>
+											<Input disabled value={connectionUrl} />
+										</div>
+									</div>
+								)}
+
+								<div className="flex justify-end">
+									<Button type="submit" isLoading={isLoading}>
+										Save
+									</Button>
+								</div>
+							</form>
+						</Form>
+					</CardContent>
+				</Card>
+			</div>
+		</>
+	);
+};

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

@@ -0,0 +1,48 @@
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+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 { DeployMongo } from "./deploy-mongo";
+import { ResetMongo } from "./reset-mongo";
+interface Props {
+	mongoId: string;
+}
+
+export const ShowGeneralMongo = ({ mongoId }: Props) => {
+	const { data } = api.mongo.one.useQuery(
+		{
+			mongoId,
+		},
+		{ enabled: !!mongoId },
+	);
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">Deploy Settings</CardTitle>
+					</CardHeader>
+					<CardContent className="flex flex-row gap-4 flex-wrap">
+						<DeployMongo mongoId={mongoId} />
+						<ResetMongo mongoId={mongoId} appName={data?.appName || ""} />
+						{data?.applicationStatus === "idle" ? (
+							<StartMongo mongoId={mongoId} />
+						) : (
+							<StopMongo mongoId={mongoId} />
+						)}
+						<DockerTerminalModal appName={data?.appName || ""}>
+							<Button variant="outline">
+								<Terminal />
+								Open Terminal
+							</Button>
+						</DockerTerminalModal>
+					</CardContent>
+				</Card>
+			</div>
+		</>
+	);
+};

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

@@ -0,0 +1,60 @@
+import React from "react";
+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";
+
+interface Props {
+	mongoId: string;
+}
+export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
+	const { data } = api.mongo.one.useQuery({ mongoId });
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">Internal Credentials</CardTitle>
+					</CardHeader>
+					<CardContent className="flex w-full flex-row gap-4">
+						<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
+							<div className="flex flex-col gap-2">
+								<Label>User</Label>
+								<Input disabled value={data?.databaseUser} />
+							</div>
+
+							<div className="flex flex-col gap-2">
+								<Label>Password</Label>
+								<div className="flex flex-row gap-4">
+									<Input
+										disabled
+										value={data?.databasePassword}
+										type="password"
+									/>
+								</div>
+							</div>
+
+							<div className="flex flex-col gap-2">
+								<Label>Internal Port (Container)</Label>
+								<Input disabled value="27017" />
+							</div>
+
+							<div className="flex flex-col gap-2">
+								<Label>Internal Host</Label>
+								<Input disabled value={data?.appName} />
+							</div>
+
+							<div className="flex flex-col gap-2 md:col-span-2">
+								<Label>Internal Connection URL </Label>
+								<Input
+									disabled
+									value={`mongodb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:27017`}
+								/>
+							</div>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		</>
+	);
+};

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

@@ -0,0 +1,65 @@
+import {
+  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";
+import { Ban } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+  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>
+  );
+};

components/dashboard/mongo/start-mongo.tsx

@@ -0,0 +1,65 @@
+import {
+  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";
+import { CheckCircle2 } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+  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>
+  );
+};

components/dashboard/mongo/update-mongo.tsx

@@ -0,0 +1,165 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+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";
+
+const updateMongoSchema = z.object({
+	name: z.string().min(1, {
+		message: "Name is required",
+	}),
+	description: z.string().optional(),
+});
+
+type UpdateMongo = z.infer<typeof updateMongoSchema>;
+
+interface Props {
+	mongoId: string;
+}
+
+export const UpdateMongo = ({ mongoId }: Props) => {
+	const utils = api.useUtils();
+	const { mutateAsync, error, isError, isLoading } =
+		api.mongo.update.useMutation();
+	const { data } = api.mongo.one.useQuery(
+		{
+			mongoId,
+		},
+		{
+			enabled: !!mongoId,
+		},
+	);
+	const form = useForm<UpdateMongo>({
+		defaultValues: {
+			description: data?.description ?? "",
+			name: data?.name ?? "",
+		},
+		resolver: zodResolver(updateMongoSchema),
+	});
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				description: data.description ?? "",
+				name: data.name,
+			});
+		}
+	}, [data, form, form.reset]);
+
+	const onSubmit = async (formData: UpdateMongo) => {
+		await mutateAsync({
+			name: formData.name,
+			mongoId: mongoId,
+			description: formData.description || "",
+		})
+			.then(() => {
+				toast.success("Mongo updated succesfully");
+				utils.mongo.one.invalidate({
+					mongoId: mongoId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to update mongo database");
+			})
+			.finally(() => {});
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="ghost">
+					<SquarePen className="size-4" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Modify MongoDB</DialogTitle>
+					<DialogDescription>Update the MongoDB data</DialogDescription>
+				</DialogHeader>
+				{isError && (
+					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error.message}
+						</span>
+					</div>
+				)}
+
+				<div className="grid gap-4">
+					<div className="grid items-center gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								id="hook-form-update-mongo"
+								className="grid w-full gap-4 "
+							>
+								<FormField
+									control={form.control}
+									name="name"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Name</FormLabel>
+											<FormControl>
+												<Input placeholder="Tesla" {...field} />
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="description"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Description</FormLabel>
+											<FormControl>
+												<Textarea
+													placeholder="Description about your project..."
+													className="resize-none"
+													{...field}
+												/>
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<DialogFooter>
+									<Button
+										isLoading={isLoading}
+										form="hook-form-update-mongo"
+										type="submit"
+									>
+										Update
+									</Button>
+								</DialogFooter>
+							</form>
+						</Form>
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,124 @@
+import React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { AlertTriangle, Package } from "lucide-react";
+import { DeleteVolume } from "../../application/advanced/volumes/delete-volume";
+import { AddVolumes } from "../../application/advanced/volumes/add-volumes";
+interface Props {
+	mongoId: string;
+}
+
+export const ShowVolumes = ({ mongoId }: Props) => {
+	const { data, refetch } = api.mongo.one.useQuery(
+		{
+			mongoId,
+		},
+		{ enabled: !!mongoId },
+	);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
+				<div>
+					<CardTitle className="text-xl">Volumes</CardTitle>
+					<CardDescription>
+						If you want to persist data in this mongo use the following config
+						to setup the volumes
+					</CardDescription>
+				</div>
+
+				{data && data?.mounts.length > 0 && (
+					<AddVolumes serviceId={mongoId} refetch={refetch} serviceType="mongo">
+						Add Volume
+					</AddVolumes>
+				)}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data?.mounts.length === 0 ? (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+						<Package className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							No volumes/mounts configured
+						</span>
+						<AddVolumes
+							serviceId={mongoId}
+							refetch={refetch}
+							serviceType="mongo"
+						>
+							Add Volume
+						</AddVolumes>
+					</div>
+				) : (
+					<div className="flex flex-col pt-2">
+						<div className="flex flex-col sm:flex-row items-center gap-4 rounded-lg bg-yellow-50 p-2 dark:bg-yellow-950">
+							<AlertTriangle className="text-yellow-600 size-5 sm:size-8 dark:text-yellow-400" />
+							<span className="text-sm text-yellow-600 dark:text-yellow-400">
+								Please remember to click Redeploy after adding, editing, or
+								deleting a mount to apply the changes.
+							</span>
+						</div>
+						<div className="flex flex-col gap-6 pt-6">
+							{data?.mounts.map((mount) => (
+								<div key={mount.mountId}>
+									<div
+										key={mount.mountId}
+										className="flex w-full flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-10 border rounded-lg p-4"
+									>
+										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 flex-col gap-4 sm:gap-8">
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Mount Type</span>
+												<span className="text-sm text-muted-foreground">
+													{mount.type.toUpperCase()}
+												</span>
+											</div>
+											{mount.type === "volume" && (
+												<div className="flex flex-col gap-1">
+													<span className="font-medium">Volume Name</span>
+													<span className="text-sm text-muted-foreground">
+														{mount.volumeName}
+													</span>
+												</div>
+											)}
+
+											{mount.type === "file" && (
+												<div className="flex flex-col gap-1">
+													<span className="font-medium">Content</span>
+													<span className="text-sm text-muted-foreground">
+														{mount.content}
+													</span>
+												</div>
+											)}
+											{mount.type === "bind" && (
+												<div className="flex flex-col gap-1">
+													<span className="font-medium">Host Path</span>
+													<span className="text-sm text-muted-foreground">
+														{mount.hostPath}
+													</span>
+												</div>
+											)}
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Mount Path</span>
+												<span className="text-sm text-muted-foreground">
+													{mount.mountPath}
+												</span>
+											</div>
+										</div>
+										<div>
+											<DeleteVolume mountId={mount.mountId} refetch={refetch} />
+										</div>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -0,0 +1,101 @@
+import {
+	AreaChart,
+	Area,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+	ResponsiveContainer,
+	Legend,
+} from "recharts";
+import type { DockerStatsJSON } from "./show";
+import { format } from "date-fns";
+
+interface Props {
+	acummulativeData: DockerStatsJSON["block"];
+}
+
+export const DockerBlockChart = ({ acummulativeData }: Props) => {
+	const transformedData = acummulativeData.map((item, index) => {
+		return {
+			time: item.time,
+			name: `Point ${index + 1}`,
+			readMb: item.value.readMb,
+			writeMb: item.value.writeMb,
+		};
+	});
+
+	return (
+		<div className="mt-6 w-full h-[10rem]">
+			<ResponsiveContainer>
+				<AreaChart
+					data={transformedData}
+					margin={{
+						top: 10,
+						right: 30,
+						left: 0,
+						bottom: 0,
+					}}
+				>
+					<defs>
+						<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+							<stop offset="5%" stopColor="#27272A" stopOpacity={0.8} />
+							<stop offset="95%" stopColor="#8884d8" stopOpacity={0} />
+						</linearGradient>
+						<linearGradient id="colorWrite" x1="0" y1="0" x2="0" y2="1">
+							<stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8} />
+							<stop offset="95%" stopColor="#82ca9d" stopOpacity={0} />
+						</linearGradient>
+					</defs>
+					<YAxis stroke="#A1A1AA" />
+					<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
+					{/* @ts-ignore */}
+					<Tooltip content={<CustomTooltip />} />
+					<Legend />
+					<Area
+						type="monotone"
+						dataKey="readMb"
+						stroke="#27272A"
+						fillOpacity={1}
+						fill="url(#colorUv)"
+						name="Read Mb"
+					/>
+					<Area
+						type="monotone"
+						dataKey="writeMb"
+						stroke="#82ca9d"
+						fillOpacity={1}
+						fill="url(#colorWrite)"
+						name="Write Mb"
+					/>
+				</AreaChart>
+			</ResponsiveContainer>
+		</div>
+	);
+};
+interface CustomTooltipProps {
+	active: boolean;
+	payload?: {
+		color?: string;
+		dataKey?: string;
+		value?: number;
+		payload: {
+			time: string;
+			readMb: number;
+			writeMb: number;
+		};
+	}[];
+}
+
+const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
+	if (active && payload && payload.length && payload[0]) {
+		return (
+			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
+				<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
+				<p>{`Read ${payload[0].payload.readMb.toFixed(2)} MB`}</p>
+				<p>{`Write: ${payload[0].payload.writeMb.toFixed(3)} MB`}</p>
+			</div>
+		);
+	}
+
+	return null;
+};

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

@@ -0,0 +1,85 @@
+import {
+	AreaChart,
+	Area,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+	ResponsiveContainer,
+	Legend,
+} from "recharts";
+import type { DockerStatsJSON } from "./show";
+import { format } from "date-fns";
+
+interface Props {
+	acummulativeData: DockerStatsJSON["cpu"];
+}
+
+export const DockerCpuChart = ({ acummulativeData }: Props) => {
+	const transformedData = acummulativeData.map((item, index) => {
+		return {
+			name: `Point ${index + 1}`,
+			time: item.time,
+			usage: item.value.toFixed(2),
+		};
+	});
+	return (
+		<div className="mt-6 w-full h-[10rem]">
+			<ResponsiveContainer>
+				<AreaChart
+					data={transformedData}
+					margin={{
+						top: 10,
+						right: 30,
+						left: 0,
+						bottom: 0,
+					}}
+				>
+					<defs>
+						<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+							<stop offset="5%" stopColor="#27272A" stopOpacity={0.8} />
+							<stop offset="95%" stopColor="white" stopOpacity={0} />
+						</linearGradient>
+					</defs>
+					<YAxis stroke="#A1A1AA" domain={[0, 100]} />
+					<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
+					{/* @ts-ignore */}
+					<Tooltip content={<CustomTooltip />} />
+					<Legend />
+					<Area
+						type="monotone"
+						dataKey="usage"
+						stroke="#27272A"
+						fillOpacity={1}
+						fill="url(#colorUv)"
+					/>
+				</AreaChart>
+			</ResponsiveContainer>
+		</div>
+	);
+};
+
+interface CustomTooltipProps {
+	active: boolean;
+	payload?: {
+		color?: string;
+		dataKey?: string;
+		value?: number;
+		payload: {
+			time: string;
+			usage: number;
+		};
+	}[];
+}
+
+const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
+	if (active && payload && payload.length && payload[0]) {
+		return (
+			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
+				<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
+				<p>{`CPU Usage: ${payload[0].payload.usage}%`}</p>
+			</div>
+		);
+	}
+
+	return null;
+};

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

@@ -0,0 +1,105 @@
+import {
+	AreaChart,
+	Area,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+	ResponsiveContainer,
+	Legend,
+} from "recharts";
+import type { DockerStatsJSON } from "./show";
+import { format } from "date-fns";
+
+interface Props {
+	acummulativeData: DockerStatsJSON["disk"];
+	diskTotal: number;
+}
+
+export const DockerDiskChart = ({ acummulativeData, diskTotal }: Props) => {
+	const transformedData = acummulativeData.map((item, index) => {
+		return {
+			time: item.time,
+			name: `Point ${index + 1}`,
+			usedGb: +item.value.diskUsage,
+			totalGb: +item.value.diskTotal,
+			freeGb: item.value.diskFree,
+		};
+	});
+
+	return (
+		<div className="mt-6 w-full h-[10rem]">
+			<ResponsiveContainer>
+				<AreaChart
+					data={transformedData}
+					margin={{
+						top: 10,
+						right: 30,
+						left: 0,
+						bottom: 0,
+					}}
+				>
+					<defs>
+						<linearGradient id="colorUsed" x1="0" y1="0" x2="0" y2="1">
+							<stop offset="5%" stopColor="#6C28D9" stopOpacity={0.8} />
+							<stop offset="95%" stopColor="#6C28D9" stopOpacity={0} />
+						</linearGradient>
+						<linearGradient id="colorFree" x1="0" y1="0" x2="0" y2="1">
+							<stop offset="5%" stopColor="#6C28D9" stopOpacity={0.2} />
+							<stop offset="95%" stopColor="#6C28D9" stopOpacity={0} />
+						</linearGradient>
+					</defs>
+					<YAxis stroke="#A1A1AA" domain={[0, diskTotal]} />
+					<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
+					{/* @ts-ignore */}
+					<Tooltip content={<CustomTooltip />} />
+					<Legend />
+					<Area
+						type="monotone"
+						dataKey="usedGb"
+						stroke="#6C28D9"
+						fillOpacity={1}
+						fill="url(#colorUsed)"
+						name="Used GB"
+					/>
+					<Area
+						type="monotone"
+						dataKey="freeGb"
+						stroke="#8884d8"
+						fillOpacity={1}
+						fill="url(#colorFree)"
+						name="Free GB"
+					/>
+				</AreaChart>
+			</ResponsiveContainer>
+		</div>
+	);
+};
+interface CustomTooltipProps {
+	active: boolean;
+	payload?: {
+		color?: string;
+		dataKey?: string;
+		value?: number;
+		payload: {
+			time: string;
+			usedGb: number;
+			freeGb: number;
+			totalGb: number;
+		};
+	}[];
+}
+
+const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
+	if (active && payload && payload.length && payload[0]) {
+		return (
+			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
+				<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
+				<p>{`Disk usage: ${payload[0].payload.usedGb} GB`}</p>
+				<p>{`Disk free: ${payload[0].payload.freeGb} GB`}</p>
+				<p>{`Total disk: ${payload[0].payload.totalGb} GB`}</p>
+			</div>
+		);
+	}
+
+	return null;
+};

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

@@ -0,0 +1,88 @@
+import {
+	AreaChart,
+	Area,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+	ResponsiveContainer,
+	Legend,
+} from "recharts";
+import type { DockerStatsJSON } from "./show";
+import { format } from "date-fns";
+
+interface Props {
+	acummulativeData: DockerStatsJSON["memory"];
+	memoryLimitGB: number;
+}
+
+export const DockerMemoryChart = ({
+	acummulativeData,
+	memoryLimitGB,
+}: Props) => {
+	const transformedData = acummulativeData.map((item, index) => {
+		return {
+			time: item.time,
+			name: `Point ${index + 1}`,
+			usage: (item.value.used / 1024).toFixed(2),
+		};
+	});
+	return (
+		<div className="mt-6 w-full h-[10rem]">
+			<ResponsiveContainer>
+				<AreaChart
+					data={transformedData}
+					margin={{
+						top: 10,
+						right: 30,
+						left: 0,
+						bottom: 0,
+					}}
+				>
+					<defs>
+						<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+							<stop offset="5%" stopColor="#27272A" stopOpacity={0.8} />
+							<stop offset="95%" stopColor="white" stopOpacity={0} />
+						</linearGradient>
+					</defs>
+					<YAxis stroke="#A1A1AA" domain={[0, +memoryLimitGB.toFixed(2)]} />
+					<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
+					{/* @ts-ignore */}
+					<Tooltip content={<CustomTooltip />} />
+					<Legend />
+					<Area
+						type="monotone"
+						dataKey="usage"
+						stroke="#27272A"
+						fillOpacity={1}
+						fill="url(#colorUv)"
+					/>
+				</AreaChart>
+			</ResponsiveContainer>
+		</div>
+	);
+};
+interface CustomTooltipProps {
+	active: boolean;
+	payload?: {
+		color?: string;
+		dataKey?: string;
+		value?: number;
+		payload: {
+			time: string;
+			usage: number;
+		};
+	}[];
+}
+
+const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
+	if (active && payload && payload.length && payload[0]) {
+		return (
+			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
+				<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
+				<p>{`Memory usage: ${payload[0].payload.usage} GB`}</p>
+			</div>
+		);
+	}
+
+	return null;
+};

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

@@ -0,0 +1,97 @@
+import {
+	AreaChart,
+	Area,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+	ResponsiveContainer,
+	Legend,
+} from "recharts";
+import type { DockerStatsJSON } from "./show";
+import { format } from "date-fns";
+1;
+interface Props {
+	acummulativeData: DockerStatsJSON["network"];
+}
+
+export const DockerNetworkChart = ({ acummulativeData }: Props) => {
+	const transformedData = acummulativeData.map((item, index) => {
+		return {
+			time: item.time,
+			name: `Point ${index + 1}`,
+			inMB: item.value.inputMb.toFixed(2),
+			outMB: item.value.outputMb.toFixed(2),
+		};
+	});
+	return (
+		<div className="mt-6 w-full h-[10rem]">
+			<ResponsiveContainer>
+				<AreaChart
+					data={transformedData}
+					margin={{
+						top: 10,
+						right: 30,
+						left: 0,
+						bottom: 0,
+					}}
+				>
+					<defs>
+						<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+							<stop offset="5%" stopColor="#27272A" stopOpacity={0.8} />
+							<stop offset="95%" stopColor="white" stopOpacity={0} />
+						</linearGradient>
+					</defs>
+					<YAxis stroke="#A1A1AA" />
+					<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
+					{/* @ts-ignore */}
+					<Tooltip content={<CustomTooltip />} />
+					<Legend />
+					<Area
+						type="monotone"
+						dataKey="inMB"
+						stroke="#8884d8"
+						fillOpacity={1}
+						fill="url(#colorUv)"
+						name="In MB"
+					/>
+					<Area
+						type="monotone"
+						dataKey="outMB"
+						stroke="#82ca9d"
+						fillOpacity={1}
+						fill="url(#colorUv)"
+						name="Out MB"
+					/>
+				</AreaChart>
+			</ResponsiveContainer>
+		</div>
+	);
+};
+
+interface CustomTooltipProps {
+	active: boolean;
+	payload?: {
+		color?: string;
+		dataKey?: string;
+		value?: number;
+		payload: {
+			time: string;
+			inMB: number;
+			outMB: number;
+		};
+	}[];
+}
+
+const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
+	if (active && payload && payload.length && payload[0]) {
+		return (
+			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
+				<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
+				<p>{`In MB Usage: ${payload[0].payload.inMB} MB`}</p>
+				<p>{`Out MB Usage: ${payload[0].payload.outMB} MB`}</p>
+			</div>
+		);
+	}
+
+	return null;
+};

components/dashboard/monitoring/docker/show.tsx

@@ -0,0 +1,248 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	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";
+
+interface Props {
+	appName: string;
+}
+export interface DockerStats {
+	cpu: {
+		value: number;
+		time: string;
+	};
+	memory: {
+		value: {
+			used: number;
+			free: number;
+			usedPercentage: number;
+			total: number;
+		};
+		time: string;
+	};
+	block: {
+		value: {
+			readMb: number;
+			writeMb: number;
+		};
+		time: string;
+	};
+	network: {
+		value: {
+			inputMb: number;
+			outputMb: number;
+		};
+		time: string;
+	};
+	disk: {
+		value: {
+			diskTotal: number;
+			diskUsage: number;
+			diskUsedPercentage: number;
+			diskFree: number;
+		};
+
+		time: string;
+	};
+}
+
+export type DockerStatsJSON = {
+	cpu: DockerStats["cpu"][];
+	memory: DockerStats["memory"][];
+	block: DockerStats["block"][];
+	network: DockerStats["network"][];
+	disk: DockerStats["disk"][];
+};
+
+export const DockerMonitoring = ({ appName }: Props) => {
+	const { data } = api.application.readAppMonitoring.useQuery(
+		{ appName },
+		{
+			refetchOnWindowFocus: false,
+		},
+	);
+	const [acummulativeData, setAcummulativeData] = useState<DockerStatsJSON>({
+		cpu: [],
+		memory: [],
+		block: [],
+		network: [],
+		disk: [],
+	});
+	const [currentData, setCurrentData] = useState<DockerStats>({
+		cpu: {
+			value: 0,
+			time: "",
+		},
+		memory: {
+			value: {
+				used: 0,
+				free: 0,
+				usedPercentage: 0,
+				total: 0,
+			},
+			time: "",
+		},
+		block: {
+			value: {
+				readMb: 0,
+				writeMb: 0,
+			},
+			time: "",
+		},
+		network: {
+			value: {
+				inputMb: 0,
+				outputMb: 0,
+			},
+			time: "",
+		},
+		disk: {
+			value: { diskTotal: 0, diskUsage: 0, diskUsedPercentage: 0, diskFree: 0 },
+			time: "",
+		},
+	});
+
+	useEffect(() => {
+		if (!data) return;
+
+		setCurrentData({
+			cpu: data.cpu[data.cpu.length - 1] ?? currentData.cpu,
+			memory: data.memory[data.memory.length - 1] ?? currentData.memory,
+			block: data.block[data.block.length - 1] ?? currentData.block,
+			network: data.network[data.network.length - 1] ?? currentData.network,
+			disk: data.disk[data.disk.length - 1] ?? currentData.disk,
+		});
+		setAcummulativeData(data);
+	}, [data]);
+
+	useEffect(() => {
+		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+		const wsUrl = `${protocol}//${window.location.host}/listen-docker-stats-monitoring?appName=${appName}`;
+		const ws = new WebSocket(wsUrl);
+
+		ws.onmessage = (e) => {
+			const value = JSON.parse(e.data);
+			if (!value) return;
+
+			const data = {
+				cpu: value.data.cpu ?? currentData.cpu,
+				memory: value.data.memory ?? currentData.memory,
+				block: value.data.block ?? currentData.block,
+				disk: value.data.disk ?? currentData.disk,
+				network: value.data.network ?? currentData.network,
+			};
+
+			setCurrentData(data);
+
+			setAcummulativeData((prevData) => ({
+				cpu: [...prevData.cpu, data.cpu],
+				memory: [...prevData.memory, data.memory],
+				block: [...prevData.block, data.block],
+				network: [...prevData.network, data.network],
+				disk: [...prevData.disk, data.disk],
+			}));
+		};
+
+		ws.onclose = (e) => {
+			console.log(e.reason);
+		};
+
+		return () => ws.close();
+	}, [appName]);
+
+	return (
+		<div>
+			<Card className="bg-background">
+				<CardHeader>
+					<CardTitle className="text-xl">Monitoring</CardTitle>
+					<CardDescription>
+						Watch the usage of your server in the current app
+					</CardDescription>
+				</CardHeader>
+				<CardContent className="flex flex-col gap-4">
+					<div className="flex w-full gap-8 ">
+						<div className=" flex-row gap-8 grid md:grid-cols-2 w-full">
+							<div className="flex flex-col gap-2  w-full ">
+								<span className="text-base font-medium">CPU</span>
+								<span className="text-sm text-muted-foreground">
+									Used: {currentData.cpu.value.toFixed(2)}%
+								</span>
+								<Progress value={currentData.cpu.value} className="w-[100%]" />
+								<DockerCpuChart acummulativeData={acummulativeData.cpu} />
+							</div>
+							<div className="flex flex-col gap-2  w-full ">
+								<span className="text-base font-medium">Memory</span>
+								<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`}
+								</span>
+								<Progress
+									value={currentData.memory.value.usedPercentage}
+									className="w-[100%]"
+								/>
+								<DockerMemoryChart
+									acummulativeData={acummulativeData.memory}
+									memoryLimitGB={currentData.memory.value.total / 1024}
+								/>
+							</div>
+							{appName === "dokploy" && (
+								<div className="flex flex-col gap-2  w-full ">
+									<span className="text-base font-medium">Space</span>
+									<span className="text-sm text-muted-foreground">
+										{`Used:  ${currentData.disk.value.diskUsage} GB / Limit: ${currentData.disk.value.diskTotal} GB`}
+									</span>
+									<Progress
+										value={currentData.disk.value.diskUsedPercentage}
+										className="w-[100%]"
+									/>
+									<DockerDiskChart
+										acummulativeData={acummulativeData.disk}
+										diskTotal={currentData.disk.value.diskTotal}
+									/>
+								</div>
+							)}
+							<div className="flex flex-col gap-2  w-full ">
+								<span className="text-base font-medium">Block I/O</span>
+								<span className="text-sm text-muted-foreground">
+									{`Used:  ${currentData.block.value.readMb.toFixed(
+										2,
+									)} MB / Limit: ${currentData.block.value.writeMb.toFixed(
+										3,
+									)} MB`}
+								</span>
+								<DockerBlockChart acummulativeData={acummulativeData.block} />
+							</div>
+							<div className="flex flex-col gap-2  w-full ">
+								<span className="text-base font-medium">Network</span>
+								<span className="text-sm text-muted-foreground">
+									{`In MB: ${currentData.network.value.inputMb.toFixed(
+										2,
+									)} MB / Out MB: ${currentData.network.value.outputMb.toFixed(
+										2,
+									)} MB`}
+								</span>
+								<DockerNetworkChart
+									acummulativeData={acummulativeData.network}
+								/>
+							</div>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+};

components/dashboard/monitoring/web-server/show.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { DockerMonitoring } from "../docker/show";
+
+export const ShowMonitoring = () => {
+	return (
+		<div className="my-6 w-full ">
+			<DockerMonitoring appName="dokploy" />
+		</div>
+	);
+};

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

@@ -0,0 +1,128 @@
+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 { 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 { ShowMysqlResources } from "./show-mysql-resources";
+import { ShowVolumes } from "../volumes/show-volumes";
+
+const addDockerImage = z.object({
+	dockerImage: z.string().min(1, "Docker image is required"),
+	command: z.string(),
+});
+
+interface Props {
+	mysqlId: string;
+}
+
+type AddDockerImage = z.infer<typeof addDockerImage>;
+export const ShowAdvancedMysql = ({ mysqlId }: Props) => {
+	const { data, refetch } = api.mysql.one.useQuery(
+		{
+			mysqlId,
+		},
+		{ enabled: !!mysqlId },
+	);
+	const { mutateAsync } = api.mysql.update.useMutation();
+
+	const form = useForm<AddDockerImage>({
+		defaultValues: {
+			dockerImage: "",
+			command: "",
+		},
+		resolver: zodResolver(addDockerImage),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				dockerImage: data.dockerImage,
+				command: data.command || "",
+			});
+		}
+	}, [data, form, form.reset]);
+
+	const onSubmit = async (formData: AddDockerImage) => {
+		await mutateAsync({
+			mysqlId,
+			dockerImage: formData?.dockerImage,
+			command: formData?.command,
+		})
+			.then(async () => {
+				toast.success("Resources Updated");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to Update the resources");
+			});
+	};
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">Advanced Settings</CardTitle>
+					</CardHeader>
+					<CardContent className="flex flex-col gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								className="grid w-full gap-4 "
+							>
+								<div className="grid w-full gap-4">
+									<FormField
+										control={form.control}
+										name="dockerImage"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Docker Image</FormLabel>
+												<FormControl>
+													<Input placeholder="mysql:16" {...field} />
+												</FormControl>
+
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+									<FormField
+										control={form.control}
+										name="command"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Command</FormLabel>
+												<FormControl>
+													<Input placeholder="Custom command" {...field} />
+												</FormControl>
+
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+								<div className="flex w-full justify-end">
+									<Button isLoading={form.formState.isSubmitting} type="submit">
+										Save
+									</Button>
+								</div>
+							</form>
+						</Form>
+					</CardContent>
+				</Card>
+				<ShowVolumes mysqlId={mysqlId} />
+				<ShowMysqlResources mysqlId={mysqlId} />
+			</div>
+		</>
+	);
+};