feat: add option for publishMode in an application port settings

apps/dokploy/components/dashboard/application/advanced/ports/handle-ports.tsx

@@ -35,6 +35,9 @@ import { z } from "zod";
 
 const AddPortSchema = z.object({
 	publishedPort: z.number().int().min(1).max(65535),
+	publishMode: z.enum(["ingress", "host"], {
+	  required_error: "Publish mode is required",
+  }),
 	targetPort: z.number().int().min(1).max(65535),
 	protocol: z.enum(["tcp", "udp"], {
 		required_error: "Protocol is required",
@@ -80,6 +83,7 @@ export const HandlePorts = ({
 	useEffect(() => {
 		form.reset({
 			publishedPort: data?.publishedPort ?? 0,
+			publishMode: data?.publishMode ?? "ingress",
 			targetPort: data?.targetPort ?? 0,
 			protocol: data?.protocol ?? "tcp",
 		});
@@ -220,6 +224,32 @@ export const HandlePorts = ({
 									);
 								}}
 							/>
+							<FormField
+								control={form.control}
+								name="publishMode"
+								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 publish mode for the port" />
+													</SelectTrigger>
+												</FormControl>
+												<SelectContent>
+													<SelectItem value={"ingress"}>Ingress</SelectItem>
+													<SelectItem value={"host"}>Host</SelectItem>
+												</SelectContent>
+											</Select>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
 						</div>
 					</form>
 

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

@@ -68,6 +68,12 @@ export const ShowPorts = ({ applicationId }: Props) => {
 												</span>
 											</div>
 											<div className="flex flex-col gap-1">
+                        <span className="font-medium">Published Port Mode</span>
+                        <span className="text-sm text-muted-foreground">
+                          {port.publishMode.toUpperCase()}
+                        </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}
@@ -79,6 +85,7 @@ export const ShowPorts = ({ applicationId }: Props) => {
 													{port.protocol.toUpperCase()}
 												</span>
 											</div>
+
 										</div>
 										<div className="flex flex-row gap-4">
 											<HandlePorts