feat: add SFTP, FTP, and Google Drive backup destinations (#168)

apps/dokploy/components/dashboard/project/add-compose.tsx

@@ -79,7 +79,7 @@ export const AddCompose = ({ environmentId, projectName }: Props) => {
 		api.compose.create.useMutation();
 
 	// Get environment data to extract projectId
-	const { data: environment } = api.environment.one.useQuery({ environmentId });
+	// const { data: environment } = api.environment.one.useQuery({ environmentId });
 
 	const hasServers = servers && servers.length > 0;
 	// Show dropdown logic based on cloud environment
@@ -117,6 +117,8 @@ export const AddCompose = ({ environmentId, projectName }: Props) => {
 				await utils.environment.one.invalidate({
 					environmentId,
 				});
+				// Invalidate the project query to refresh the project data for the advance-breadcrumb
+				await utils.project.all.invalidate();
 			})
 			.catch(() => {
 				toast.error("Error creating the compose");

apps/dokploy/components/dashboard/project/add-template.tsx

@@ -332,6 +332,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 												viewMode === "detailed" && "border-b",
 											)}
 										>
+											{/** biome-ignore lint/performance/noImgElement: this is a valid use for img tag */}
 											<img
 												src={`${customBaseUrl || "https://templates.dokploy.com/"}/blueprints/${template?.id}/${template?.logo}`}
 												className={cn(

apps/dokploy/components/dashboard/project/advanced-environment-selector.tsx

@@ -92,6 +92,8 @@ export const AdvancedEnvironmentSelector = ({
 
 			toast.success("Environment created successfully");
 			utils.environment.byProjectId.invalidate({ projectId });
+			// Invalidate the project query to refresh the project data for the advance-breadcrumb
+			utils.project.all.invalidate();
 			setIsCreateDialogOpen(false);
 			setName("");
 			setDescription("");

apps/dokploy/components/dashboard/projects/handle-project.tsx

@@ -7,6 +7,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
+import { TagSelector } from "@/components/shared/tag-selector";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -62,6 +63,7 @@ interface Props {
 export const HandleProject = ({ projectId }: Props) => {
 	const utils = api.useUtils();
 	const [isOpen, setIsOpen] = useState(false);
+	const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
 
 	const { mutateAsync, error, isError } = projectId
 		? api.project.update.useMutation()
@@ -75,6 +77,10 @@ export const HandleProject = ({ projectId }: Props) => {
 			enabled: !!projectId,
 		},
 	);
+
+	const { data: availableTags = [] } = api.tag.all.useQuery();
+	const bulkAssignMutation = api.tag.bulkAssign.useMutation();
+
 	const router = useRouter();
 	const form = useForm<AddProject>({
 		defaultValues: {
@@ -89,6 +95,13 @@ export const HandleProject = ({ projectId }: Props) => {
 			description: data?.description ?? "",
 			name: data?.name ?? "",
 		});
+		// Load existing tags when editing a project
+		if (data?.projectTags) {
+			const tagIds = data.projectTags.map((pt) => pt.tagId);
+			setSelectedTagIds(tagIds);
+		} else {
+			setSelectedTagIds([]);
+		}
 	}, [form, form.reset, form.formState.isSubmitSuccessful, data]);
 
 	const onSubmit = async (data: AddProject) => {
@@ -98,12 +111,26 @@ export const HandleProject = ({ projectId }: Props) => {
 			projectId: projectId || "",
 		})
 			.then(async (data) => {
+				// Assign tags to the project (both create and update)
+				const projectIdToUse =
+					projectId ||
+					(data && "project" in data ? data.project.projectId : undefined);
+
+				if (projectIdToUse) {
+					try {
+						await bulkAssignMutation.mutateAsync({
+							projectId: projectIdToUse,
+							tagIds: selectedTagIds,
+						});
+					} catch (error) {
+						toast.error("Failed to assign tags to project");
+					}
+				}
+
 				await utils.project.all.invalidate();
 				toast.success(projectId ? "Project Updated" : "Project Created");
 				setIsOpen(false);
 				if (!projectId) {
-					const projectIdToUse =
-						data && "project" in data ? data.project.projectId : undefined;
 					const environmentIdToUse =
 						data && "environment" in data
 							? data.environment.environmentId
@@ -190,6 +217,20 @@ export const HandleProject = ({ projectId }: Props) => {
 								</FormItem>
 							)}
 						/>
+
+						<div className="space-y-2">
+							<FormLabel>Tags</FormLabel>
+							<TagSelector
+								tags={availableTags.map((tag) => ({
+									id: tag.tagId,
+									name: tag.name,
+									color: tag.color ?? undefined,
+								}))}
+								selectedTags={selectedTagIds}
+								onTagsChange={setSelectedTagIds}
+								placeholder="Select tags..."
+							/>
+						</div>
 					</form>
 
 					<DialogFooter>

apps/dokploy/components/dashboard/projects/show.tsx

@@ -15,6 +15,8 @@ import { toast } from "sonner";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
 import { DateTooltip } from "@/components/shared/date-tooltip";
 import { FocusShortcutInput } from "@/components/shared/focus-shortcut-input";
+import { TagBadge } from "@/components/shared/tag-badge";
+import { TagFilter } from "@/components/shared/tag-filter";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -63,6 +65,7 @@ export const ShowProjects = () => {
 	const { data: auth } = api.user.get.useQuery();
 	const { data: permissions } = api.user.getPermissions.useQuery();
 	const { mutateAsync } = api.project.remove.useMutation();
+	const { data: availableTags } = api.tag.all.useQuery();
 
 	const [searchQuery, setSearchQuery] = useState(
 		router.isReady && typeof router.query.q === "string" ? router.query.q : "",
@@ -76,10 +79,31 @@ export const ShowProjects = () => {
 		return "createdAt-desc";
 	});
 
+	const [selectedTagIds, setSelectedTagIds] = useState<string[]>(() => {
+		if (typeof window !== "undefined") {
+			const saved = localStorage.getItem("projectsTagFilter");
+			return saved ? JSON.parse(saved) : [];
+		}
+		return [];
+	});
+
 	useEffect(() => {
 		localStorage.setItem("projectsSort", sortBy);
 	}, [sortBy]);
 
+	useEffect(() => {
+		localStorage.setItem("projectsTagFilter", JSON.stringify(selectedTagIds));
+	}, [selectedTagIds]);
+
+	useEffect(() => {
+		if (!availableTags) return;
+		const validIds = new Set(availableTags.map((t) => t.tagId));
+		setSelectedTagIds((prev) => {
+			const filtered = prev.filter((id) => validIds.has(id));
+			return filtered.length === prev.length ? prev : filtered;
+		});
+	}, [availableTags]);
+
 	useEffect(() => {
 		if (!router.isReady) return;
 		const urlQuery = typeof router.query.q === "string" ? router.query.q : "";
@@ -107,7 +131,7 @@ export const ShowProjects = () => {
 	const filteredProjects = useMemo(() => {
 		if (!data) return [];
 
-		const filtered = data.filter(
+		let filtered = data.filter(
 			(project) =>
 				project.name
 					.toLowerCase()
@@ -117,6 +141,15 @@ export const ShowProjects = () => {
 					.includes(debouncedSearchQuery.toLowerCase()),
 		);
 
+		// Filter by selected tags (OR logic: show projects with ANY selected tag)
+		if (selectedTagIds.length > 0) {
+			filtered = filtered.filter((project) =>
+				project.projectTags?.some((pt) =>
+					selectedTagIds.includes(pt.tag.tagId),
+				),
+			);
+		}
+
 		// Then sort the filtered results
 		const [field, direction] = sortBy.split("-");
 		return [...filtered].sort((a, b) => {
@@ -162,10 +195,15 @@ export const ShowProjects = () => {
 			}
 			return direction === "asc" ? comparison : -comparison;
 		});
-	}, [data, debouncedSearchQuery, sortBy]);
+	}, [data, debouncedSearchQuery, sortBy, selectedTagIds]);
 
 	return (
 		<>
+			{!isCloud && (
+				<div className="absolute top-4 right-4">
+					<TimeBadge />
+				</div>
+			)}
 			<BreadcrumbSidebar
 				list={[{ name: "Projects", href: "/dashboard/projects" }]}
 			/>
@@ -208,29 +246,44 @@ export const ShowProjects = () => {
 
 											<Search className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
 										</div>
-										<div className="flex items-center gap-2 min-w-48 max-sm:w-full">
-											<ArrowUpDown className="size-4 text-muted-foreground" />
-											<Select value={sortBy} onValueChange={setSortBy}>
-												<SelectTrigger className="w-full">
-													<SelectValue placeholder="Sort by..." />
-												</SelectTrigger>
-												<SelectContent>
-													<SelectItem value="name-asc">Name (A-Z)</SelectItem>
-													<SelectItem value="name-desc">Name (Z-A)</SelectItem>
-													<SelectItem value="createdAt-desc">
-														Newest first
-													</SelectItem>
-													<SelectItem value="createdAt-asc">
-														Oldest first
-													</SelectItem>
-													<SelectItem value="services-desc">
-														Most services
-													</SelectItem>
-													<SelectItem value="services-asc">
-														Least services
-													</SelectItem>
-												</SelectContent>
-											</Select>
+										<div className="flex items-center gap-2">
+											<TagFilter
+												tags={
+													availableTags?.map((tag) => ({
+														id: tag.tagId,
+														name: tag.name,
+														color: tag.color || undefined,
+													})) || []
+												}
+												selectedTags={selectedTagIds}
+												onTagsChange={setSelectedTagIds}
+											/>
+											<div className="flex items-center gap-2 min-w-48 max-sm:w-full">
+												<ArrowUpDown className="size-4 text-muted-foreground" />
+												<Select value={sortBy} onValueChange={setSortBy}>
+													<SelectTrigger className="w-full">
+														<SelectValue placeholder="Sort by..." />
+													</SelectTrigger>
+													<SelectContent>
+														<SelectItem value="name-asc">Name (A-Z)</SelectItem>
+														<SelectItem value="name-desc">
+															Name (Z-A)
+														</SelectItem>
+														<SelectItem value="createdAt-desc">
+															Newest first
+														</SelectItem>
+														<SelectItem value="createdAt-asc">
+															Oldest first
+														</SelectItem>
+														<SelectItem value="services-desc">
+															Most services
+														</SelectItem>
+														<SelectItem value="services-asc">
+															Least services
+														</SelectItem>
+													</SelectContent>
+												</Select>
+											</div>
 										</div>
 									</div>
 									{filteredProjects?.length === 0 && (
@@ -309,6 +362,19 @@ export const ShowProjects = () => {
 																			{project.description}
 																		</span>
 
+																		{project.projectTags &&
+																			project.projectTags.length > 0 && (
+																				<div className="flex flex-wrap gap-1.5 mt-2">
+																					{project.projectTags.map((pt) => (
+																						<TagBadge
+																							key={pt.tag.tagId}
+																							name={pt.tag.name}
+																							color={pt.tag.color}
+																						/>
+																					))}
+																				</div>
+																			)}
+
 																		{hasNoEnvironments && (
 																			<div className="flex flex-row gap-2 items-center rounded-lg bg-yellow-50 p-2 mt-2 dark:bg-yellow-950">
 																				<AlertTriangle className="size-4 text-yellow-600 dark:text-yellow-400 shrink-0" />
@@ -429,7 +495,7 @@ export const ShowProjects = () => {
 																</CardTitle>
 															</CardHeader>
 															<CardFooter className="pt-4">
-																<div className="space-y-1 text-sm flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
+																<div className="space-y-1 text-xs flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
 																	<DateTooltip date={project.createdAt}>
 																		Created
 																	</DateTooltip>