refactor: unify backend and frontend servers (#3)

* refactor: unify backend and frontend servers

* refactor: correct paths for openapi & drizzle

* refactor: move api-client to client

* fix: drizzle paths

* chore: fix linting issues

* fix: form reset issue

app/client/modules/backups/components/backup-progress-card.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useState } from "react";
+import { ByteSize, formatBytes } from "~/client/components/bytes-size";
+import { Card } from "~/client/components/ui/card";
+import { Progress } from "~/client/components/ui/progress";
+import { type BackupProgressEvent, useServerEvents } from "~/client/hooks/use-server-events";
+import { formatDuration } from "~/utils/utils";
+
+type Props = {
+	scheduleId: number;
+};
+
+export const BackupProgressCard = ({ scheduleId }: Props) => {
+	const { addEventListener } = useServerEvents();
+	const [progress, setProgress] = useState<BackupProgressEvent | null>(null);
+
+	useEffect(() => {
+		const unsubscribe = addEventListener("backup:progress", (data) => {
+			const progressData = data as BackupProgressEvent;
+			if (progressData.scheduleId === scheduleId) {
+				setProgress(progressData);
+			}
+		});
+
+		const unsubscribeComplete = addEventListener("backup:completed", (data) => {
+			const completedData = data as { scheduleId: number };
+			if (completedData.scheduleId === scheduleId) {
+				setProgress(null);
+			}
+		});
+
+		return () => {
+			unsubscribe();
+			unsubscribeComplete();
+		};
+	}, [addEventListener, scheduleId]);
+
+	if (!progress) {
+		return (
+			<Card className="p-4">
+				<div className="flex items-center gap-2">
+					<div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+					<span className="font-medium">Backup in progress</span>
+				</div>
+			</Card>
+		);
+	}
+
+	const percentDone = Math.round(progress.percent_done * 100);
+	const currentFile = progress.current_files[0] || "";
+	const fileName = currentFile.split("/").pop() || currentFile;
+	const speed = formatBytes(progress.bytes_done / progress.seconds_elapsed);
+
+	return (
+		<Card className="p-4">
+			<div className="flex items-center justify-between">
+				<div className="flex items-center gap-2">
+					<div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+					<span className="font-medium">Backup in progress</span>
+				</div>
+				<span className="text-sm font-medium text-primary">{percentDone}%</span>
+			</div>
+
+			<Progress value={percentDone} className="h-2" />
+
+			<div className="grid grid-cols-2 gap-4 text-sm">
+				<div>
+					<p className="text-xs uppercase text-muted-foreground">Files</p>
+					<p className="font-medium">
+						{progress.files_done.toLocaleString()} / {progress.total_files.toLocaleString()}
+					</p>
+				</div>
+				<div>
+					<p className="text-xs uppercase text-muted-foreground">Data</p>
+					<p className="font-medium">
+						<ByteSize bytes={progress.bytes_done} /> / <ByteSize bytes={progress.total_bytes} />
+					</p>
+				</div>
+				<div>
+					<p className="text-xs uppercase text-muted-foreground">Elapsed</p>
+					<p className="font-medium">{formatDuration(progress.seconds_elapsed)}</p>
+				</div>
+				<div>
+					<p className="text-xs uppercase text-muted-foreground">Speed</p>
+					<p className="font-medium">
+						{progress.seconds_elapsed > 0 ? `${speed.text} ${speed.unit}/s` : "Calculating..."}
+					</p>
+				</div>
+			</div>
+
+			{fileName && (
+				<div className="pt-2 border-t border-border">
+					<p className="text-xs uppercase text-muted-foreground mb-1">Current file</p>
+					<p className="text-xs font-mono text-muted-foreground truncate" title={currentFile}>
+						{fileName}
+					</p>
+				</div>
+			)}
+		</Card>
+	);
+};

app/client/modules/backups/components/backup-status-dot.tsx

@@ -0,0 +1,71 @@
+import { cn } from "~/client/lib/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/client/components/ui/tooltip";
+
+type BackupStatus = "active" | "paused" | "error" | "in_progress";
+
+export const BackupStatusDot = ({
+	enabled,
+	hasError,
+	isInProgress,
+}: {
+	enabled: boolean;
+	hasError?: boolean;
+	isInProgress?: boolean;
+}) => {
+	let status: BackupStatus = "paused";
+	if (isInProgress) {
+		status = "in_progress";
+	} else if (hasError) {
+		status = "error";
+	} else if (enabled) {
+		status = "active";
+	}
+
+	const statusMapping = {
+		active: {
+			color: "bg-green-500",
+			colorLight: "bg-emerald-400",
+			animated: true,
+			label: "Active",
+		},
+		paused: {
+			color: "bg-gray-500",
+			colorLight: "bg-gray-400",
+			animated: false,
+			label: "Paused",
+		},
+		error: {
+			color: "bg-red-500",
+			colorLight: "bg-red-400",
+			animated: true,
+			label: "Error",
+		},
+		in_progress: {
+			color: "bg-blue-500",
+			colorLight: "bg-blue-400",
+			animated: true,
+			label: "Backup in progress",
+		},
+	}[status];
+
+	return (
+		<Tooltip>
+			<TooltipTrigger>
+				<span className="relative flex size-3 mx-auto">
+					{statusMapping.animated && (
+						<span
+							className={cn(
+								"absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
+								`${statusMapping.colorLight}`,
+							)}
+						/>
+					)}
+					<span className={cn("relative inline-flex size-3 rounded-full", `${statusMapping.color}`)} />
+				</span>
+			</TooltipTrigger>
+			<TooltipContent>
+				<p>{statusMapping.label}</p>
+			</TooltipContent>
+		</Tooltip>
+	);
+};

app/client/modules/backups/components/create-schedule-form.tsx

@@ -0,0 +1,530 @@
+import { arktypeResolver } from "@hookform/resolvers/arktype";
+import { useQuery } from "@tanstack/react-query";
+import { type } from "arktype";
+import { useCallback, useState } from "react";
+import { useForm } from "react-hook-form";
+import { listRepositoriesOptions } from "~/client/api-client/@tanstack/react-query.gen";
+import { RepositoryIcon } from "~/client/components/repository-icon";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "~/client/components/ui/form";
+import { Input } from "~/client/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
+import { Textarea } from "~/client/components/ui/textarea";
+import { VolumeFileBrowser } from "~/client/components/volume-file-browser";
+import type { BackupSchedule, Volume } from "~/client/lib/types";
+import { deepClean } from "~/utils/object";
+
+const internalFormSchema = type({
+	repositoryId: "string",
+	excludePatternsText: "string?",
+	includePatterns: "string[]?",
+	frequency: "string",
+	dailyTime: "string?",
+	weeklyDay: "string?",
+	keepLast: "number?",
+	keepHourly: "number?",
+	keepDaily: "number?",
+	keepWeekly: "number?",
+	keepMonthly: "number?",
+	keepYearly: "number?",
+});
+const cleanSchema = type.pipe((d) => internalFormSchema(deepClean(d)));
+
+export const weeklyDays = [
+	{ label: "Monday", value: "1" },
+	{ label: "Tuesday", value: "2" },
+	{ label: "Wednesday", value: "3" },
+	{ label: "Thursday", value: "4" },
+	{ label: "Friday", value: "5" },
+	{ label: "Saturday", value: "6" },
+	{ label: "Sunday", value: "0" },
+];
+
+type InternalFormValues = typeof internalFormSchema.infer;
+
+export type BackupScheduleFormValues = Omit<InternalFormValues, "excludePatternsText"> & {
+	excludePatterns?: string[];
+};
+
+type Props = {
+	volume: Volume;
+	initialValues?: BackupSchedule;
+	onSubmit: (data: BackupScheduleFormValues) => void;
+	loading?: boolean;
+	summaryContent?: React.ReactNode;
+	formId: string;
+};
+
+const backupScheduleToFormValues = (schedule?: BackupSchedule): InternalFormValues | undefined => {
+	if (!schedule) {
+		return undefined;
+	}
+
+	const parts = schedule.cronExpression.split(" ");
+	const [minutePart, hourPart, , , dayOfWeekPart] = parts;
+
+	const isHourly = hourPart === "*";
+	const isDaily = !isHourly && dayOfWeekPart === "*";
+	const frequency = isHourly ? "hourly" : isDaily ? "daily" : "weekly";
+
+	const dailyTime = isHourly ? undefined : `${hourPart.padStart(2, "0")}:${minutePart.padStart(2, "0")}`;
+
+	const weeklyDay = frequency === "weekly" ? dayOfWeekPart : undefined;
+
+	return {
+		repositoryId: schedule.repositoryId,
+		frequency,
+		dailyTime,
+		weeklyDay,
+		includePatterns: schedule.includePatterns || undefined,
+		excludePatternsText: schedule.excludePatterns?.join("\n") || undefined,
+		...schedule.retentionPolicy,
+	};
+};
+
+export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }: Props) => {
+	const form = useForm<InternalFormValues>({
+		resolver: arktypeResolver(cleanSchema as unknown as typeof internalFormSchema),
+		defaultValues: backupScheduleToFormValues(initialValues),
+	});
+
+	const handleSubmit = useCallback(
+		(data: InternalFormValues) => {
+			// Convert excludePatternsText string to excludePatterns array
+			const { excludePatternsText, ...rest } = data;
+			const excludePatterns = excludePatternsText
+				? excludePatternsText
+						.split("\n")
+						.map((p) => p.trim())
+						.filter(Boolean)
+				: undefined;
+
+			onSubmit({
+				...rest,
+				excludePatterns,
+			});
+		},
+		[onSubmit],
+	);
+
+	const { data: repositoriesData } = useQuery({
+		...listRepositoriesOptions(),
+	});
+
+	const frequency = form.watch("frequency");
+	const formValues = form.watch();
+
+	const [selectedPaths, setSelectedPaths] = useState<Set<string>>(new Set(initialValues?.includePatterns || []));
+
+	const handleSelectionChange = useCallback(
+		(paths: Set<string>) => {
+			setSelectedPaths(paths);
+			form.setValue("includePatterns", Array.from(paths));
+		},
+		[form],
+	);
+
+	return (
+		<Form {...form}>
+			<form
+				onSubmit={form.handleSubmit(handleSubmit)}
+				className="grid gap-4 xl:grid-cols-[minmax(0,2.3fr)_minmax(320px,1fr)]"
+				id={formId}
+			>
+				<div className="grid gap-4">
+					<Card>
+						<CardHeader>
+							<CardTitle>Backup automation</CardTitle>
+							<CardDescription className="mt-1">
+								Schedule automated backups of <strong>{volume.name}</strong> to a secure repository.
+							</CardDescription>
+						</CardHeader>
+						<CardContent className="grid gap-6 md:grid-cols-2">
+							<FormField
+								control={form.control}
+								name="repositoryId"
+								render={({ field }) => (
+									<FormItem className="md:col-span-2">
+										<FormLabel>Backup repository</FormLabel>
+										<FormControl>
+											<Select {...field} onValueChange={field.onChange}>
+												<SelectTrigger>
+													<SelectValue placeholder="Select a repository" />
+												</SelectTrigger>
+												<SelectContent>
+													{repositoriesData?.map((repo) => (
+														<SelectItem key={repo.id} value={repo.id}>
+															<span className="flex items-center gap-2">
+																<RepositoryIcon backend={repo.type} />
+																{repo.name}
+															</span>
+														</SelectItem>
+													))}
+												</SelectContent>
+											</Select>
+										</FormControl>
+										<FormDescription>
+											Choose where encrypted backups for <strong>{volume.name}</strong> will be stored.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="frequency"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Backup frequency</FormLabel>
+										<FormControl>
+											<Select {...field} onValueChange={field.onChange}>
+												<SelectTrigger>
+													<SelectValue placeholder="Select frequency" />
+												</SelectTrigger>
+												<SelectContent>
+													<SelectItem value="hourly">Hourly</SelectItem>
+													<SelectItem value="daily">Daily</SelectItem>
+													<SelectItem value="weekly">Weekly</SelectItem>
+												</SelectContent>
+											</Select>
+										</FormControl>
+										<FormDescription>Define how often snapshots should be taken.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							{frequency !== "hourly" && (
+								<FormField
+									control={form.control}
+									name="dailyTime"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Execution time</FormLabel>
+											<FormControl>
+												<Input type="time" {...field} />
+											</FormControl>
+											<FormDescription>Time of day when the backup will run.</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							)}
+
+							{frequency === "weekly" && (
+								<FormField
+									control={form.control}
+									name="weeklyDay"
+									render={({ field }) => (
+										<FormItem className="md:col-span-2">
+											<FormLabel>Execution day</FormLabel>
+											<FormControl>
+												<Select {...field} onValueChange={field.onChange}>
+													<SelectTrigger>
+														<SelectValue placeholder="Select a day" />
+													</SelectTrigger>
+													<SelectContent>
+														{weeklyDays.map((day) => (
+															<SelectItem key={day.value} value={day.value}>
+																{day.label}
+															</SelectItem>
+														))}
+													</SelectContent>
+												</Select>
+											</FormControl>
+											<FormDescription>Choose which day of the week to run the backup.</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							)}
+						</CardContent>
+					</Card>
+
+					<Card>
+						<CardHeader>
+							<CardTitle>Backup paths</CardTitle>
+							<CardDescription>
+								Select which folders to include in the backup. If no paths are selected, the entire volume will be
+								backed up.
+							</CardDescription>
+						</CardHeader>
+						<CardContent>
+							<VolumeFileBrowser
+								volumeName={volume.name}
+								selectedPaths={selectedPaths}
+								onSelectionChange={handleSelectionChange}
+								withCheckboxes={true}
+								foldersOnly={true}
+								className="flex-1 border rounded-md bg-card p-2 min-h-[300px] max-h-[400px] overflow-auto"
+							/>
+							{selectedPaths.size > 0 && (
+								<div className="mt-4">
+									<p className="text-xs text-muted-foreground mb-2">Selected paths:</p>
+									<div className="flex flex-wrap gap-2">
+										{Array.from(selectedPaths).map((path) => (
+											<span key={path} className="text-xs bg-accent px-2 py-1 rounded-md font-mono">
+												{path}
+											</span>
+										))}
+									</div>
+								</div>
+							)}
+						</CardContent>
+					</Card>
+
+					<Card>
+						<CardHeader>
+							<CardTitle>Exclude patterns</CardTitle>
+							<CardDescription>
+								Optionally specify patterns to exclude from backups. Enter one pattern per line (e.g., *.tmp,
+								node_modules/**, .cache/).
+							</CardDescription>
+						</CardHeader>
+						<CardContent>
+							<FormField
+								control={form.control}
+								name="excludePatternsText"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Exclusion patterns</FormLabel>
+										<FormControl>
+											<Textarea
+												{...field}
+												placeholder="*.tmp&#10;node_modules/**&#10;.cache/&#10;*.log"
+												className="font-mono text-sm min-h-[120px]"
+											/>
+										</FormControl>
+										<FormDescription>
+											Patterns support glob syntax. See&nbsp;
+											<a
+												href="https://restic.readthedocs.io/en/stable/040_backup.html#excluding-files"
+												target="_blank"
+												rel="noopener noreferrer"
+												className="underline hover:text-foreground"
+											>
+												Restic documentation
+											</a>
+											&nbsp;for more details.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</CardContent>
+					</Card>
+
+					<Card>
+						<CardHeader>
+							<CardTitle>Retention policy</CardTitle>
+							<CardDescription>Define how many snapshots to keep. Leave empty to keep all.</CardDescription>
+						</CardHeader>
+						<CardContent className="grid gap-4 md:grid-cols-2">
+							<FormField
+								control={form.control}
+								name="keepLast"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Keep last N snapshots</FormLabel>
+										<FormControl>
+											<Input
+												{...field}
+												type="number"
+												min={0}
+												placeholder="Optional"
+												onChange={(v) => field.onChange(Number(v.target.value))}
+											/>
+										</FormControl>
+										<FormDescription>Keep the N most recent snapshots.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="keepHourly"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Keep hourly</FormLabel>
+										<FormControl>
+											<Input
+												type="number"
+												min={0}
+												placeholder="Optional"
+												{...field}
+												onChange={(v) => field.onChange(Number(v.target.value))}
+											/>
+										</FormControl>
+										<FormDescription>Keep the last N hourly snapshots.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="keepDaily"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Keep daily</FormLabel>
+										<FormControl>
+											<Input
+												type="number"
+												min={0}
+												placeholder="e.g., 7"
+												{...field}
+												onChange={(v) => field.onChange(Number(v.target.value))}
+											/>
+										</FormControl>
+										<FormDescription>Keep the last N daily snapshots.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="keepWeekly"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Keep weekly</FormLabel>
+										<FormControl>
+											<Input
+												type="number"
+												min={0}
+												placeholder="e.g., 4"
+												{...field}
+												onChange={(v) => field.onChange(Number(v.target.value))}
+											/>
+										</FormControl>
+										<FormDescription>Keep the last N weekly snapshots.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="keepMonthly"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Keep monthly</FormLabel>
+										<FormControl>
+											<Input
+												type="number"
+												min={0}
+												placeholder="e.g., 6"
+												{...field}
+												onChange={(v) => field.onChange(Number(v.target.value))}
+											/>
+										</FormControl>
+										<FormDescription>Keep the last N monthly snapshots.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="keepYearly"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Keep yearly</FormLabel>
+										<FormControl>
+											<Input
+												type="number"
+												min={0}
+												placeholder="Optional"
+												{...field}
+												onChange={(v) => field.onChange(Number(v.target.value))}
+											/>
+										</FormControl>
+										<FormDescription>Keep the last N yearly snapshots.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</CardContent>
+					</Card>
+				</div>
+				<div className="h-full">
+					<Card className="h-full">
+						<CardHeader className="flex flex-row items-center justify-between gap-4">
+							<div>
+								<CardTitle>Schedule summary</CardTitle>
+								<CardDescription>Review the backup configuration.</CardDescription>
+							</div>
+						</CardHeader>
+						<CardContent className="flex flex-col gap-4 text-sm">
+							<div>
+								<p className="text-xs uppercase text-muted-foreground">Volume</p>
+								<p className="font-medium">{volume.name}</p>
+							</div>
+							<div>
+								<p className="text-xs uppercase text-muted-foreground">Schedule</p>
+								<p className="font-medium">
+									{frequency ? frequency.charAt(0).toUpperCase() + frequency.slice(1) : "-"}
+								</p>
+							</div>
+							<div>
+								<p className="text-xs uppercase text-muted-foreground">Repository</p>
+								<p className="font-medium">
+									{repositoriesData?.find((r) => r.id === formValues.repositoryId)?.name || "—"}
+								</p>
+							</div>
+							{formValues.includePatterns && formValues.includePatterns.length > 0 && (
+								<div>
+									<p className="text-xs uppercase text-muted-foreground">Include paths</p>
+									<div className="flex flex-col gap-1">
+										{formValues.includePatterns.map((path) => (
+											<span key={path} className="text-xs font-mono bg-accent px-1.5 py-0.5 rounded">
+												{path}
+											</span>
+										))}
+									</div>
+								</div>
+							)}
+							{formValues.excludePatternsText && (
+								<div>
+									<p className="text-xs uppercase text-muted-foreground">Exclude patterns</p>
+									<div className="flex flex-col gap-1">
+										{formValues.excludePatternsText
+											.split("\n")
+											.filter(Boolean)
+											.map((pattern) => (
+												<span key={pattern} className="text-xs font-mono bg-accent px-1.5 py-0.5 rounded">
+													{pattern.trim()}
+												</span>
+											))}
+									</div>
+								</div>
+							)}
+							<div>
+								<p className="text-xs uppercase text-muted-foreground">Retention</p>
+								<p className="font-medium">
+									{Object.entries(formValues)
+										.filter(([key, value]) => key.startsWith("keep") && Boolean(value))
+										.map(([key, value]) => {
+											const label = key.replace("keep", "").toLowerCase();
+											return `${value} ${label}`;
+										})
+										.join(", ") || "-"}
+								</p>
+							</div>
+						</CardContent>
+					</Card>
+				</div>
+			</form>
+		</Form>
+	);
+};

app/client/modules/backups/components/schedule-summary.tsx

@@ -0,0 +1,172 @@
+import { Pencil, Play, Square, Trash2 } from "lucide-react";
+import { useMemo, useState } from "react";
+import { OnOff } from "~/client/components/onoff";
+import { Button } from "~/client/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "~/client/components/ui/alert-dialog";
+import type { BackupSchedule } from "~/client/lib/types";
+import { BackupProgressCard } from "./backup-progress-card";
+
+type Props = {
+	schedule: BackupSchedule;
+	handleToggleEnabled: (enabled: boolean) => void;
+	handleRunBackupNow: () => void;
+	handleStopBackup: () => void;
+	handleDeleteSchedule: () => void;
+	setIsEditMode: (isEdit: boolean) => void;
+};
+
+export const ScheduleSummary = (props: Props) => {
+	const { schedule, handleToggleEnabled, handleRunBackupNow, handleStopBackup, handleDeleteSchedule, setIsEditMode } =
+		props;
+	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+	const summary = useMemo(() => {
+		const scheduleLabel = schedule ? schedule.cronExpression : "-";
+
+		const retentionParts: string[] = [];
+		if (schedule?.retentionPolicy) {
+			const rp = schedule.retentionPolicy;
+			if (rp.keepLast) retentionParts.push(`${rp.keepLast} last`);
+			if (rp.keepHourly) retentionParts.push(`${rp.keepHourly} hourly`);
+			if (rp.keepDaily) retentionParts.push(`${rp.keepDaily} daily`);
+			if (rp.keepWeekly) retentionParts.push(`${rp.keepWeekly} weekly`);
+			if (rp.keepMonthly) retentionParts.push(`${rp.keepMonthly} monthly`);
+			if (rp.keepYearly) retentionParts.push(`${rp.keepYearly} yearly`);
+		}
+
+		return {
+			vol: schedule.volume.name,
+			scheduleLabel,
+			repositoryLabel: schedule.repositoryId || "No repository selected",
+			retentionLabel: retentionParts.length > 0 ? retentionParts.join(" • ") : "No retention policy",
+		};
+	}, [schedule, schedule.volume.name]);
+
+	const handleConfirmDelete = () => {
+		setShowDeleteConfirm(false);
+		handleDeleteSchedule();
+	};
+
+	return (
+		<div className="space-y-4">
+			<Card>
+				<CardHeader className="space-y-4">
+					<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+						<div>
+							<CardTitle>Backup schedule</CardTitle>
+							<CardDescription>
+								Automated backup configuration for volume&nbsp;
+								<strong className="text-strong-accent">{schedule.volume.name}</strong>
+							</CardDescription>
+						</div>
+						<div className="flex items-center gap-2 justify-between sm:justify-start">
+							<OnOff
+								isOn={schedule.enabled}
+								toggle={handleToggleEnabled}
+								enabledLabel="Enabled"
+								disabledLabel="Paused"
+							/>
+						</div>
+					</div>
+					<div className="flex flex-col sm:flex-row gap-2">
+						{schedule.lastBackupStatus === "in_progress" ? (
+							<Button variant="destructive" size="sm" onClick={handleStopBackup} className="w-full sm:w-auto">
+								<Square className="h-4 w-4 mr-2" />
+								<span className="sm:inline">Stop backup</span>
+							</Button>
+						) : (
+							<Button variant="default" size="sm" onClick={handleRunBackupNow} className="w-full sm:w-auto">
+								<Play className="h-4 w-4 mr-2" />
+								<span className="sm:inline">Backup now</span>
+							</Button>
+						)}
+						<Button variant="outline" size="sm" onClick={() => setIsEditMode(true)} className="w-full sm:w-auto">
+							<Pencil className="h-4 w-4 mr-2" />
+							<span className="sm:inline">Edit schedule</span>
+						</Button>
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={() => setShowDeleteConfirm(true)}
+							className="text-destructive hover:text-destructive w-full sm:w-auto"
+						>
+							<Trash2 className="h-4 w-4 mr-2" />
+							<span className="sm:inline">Delete</span>
+						</Button>
+					</div>
+				</CardHeader>
+				<CardContent className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+					<div>
+						<p className="text-xs uppercase text-muted-foreground">Schedule</p>
+						<p className="font-medium">{summary.scheduleLabel}</p>
+					</div>
+					<div>
+						<p className="text-xs uppercase text-muted-foreground">Repository</p>
+						<p className="font-medium">{schedule.repository.name}</p>
+					</div>
+					<div>
+						<p className="text-xs uppercase text-muted-foreground">Last backup</p>
+						<p className="font-medium">
+							{schedule.lastBackupAt ? new Date(schedule.lastBackupAt).toLocaleString() : "Never"}
+						</p>
+					</div>
+					<div>
+						<p className="text-xs uppercase text-muted-foreground">Next backup</p>
+						<p className="font-medium">
+							{schedule.nextBackupAt ? new Date(schedule.nextBackupAt).toLocaleString() : "Never"}
+						</p>
+					</div>
+
+					<div>
+						<p className="text-xs uppercase text-muted-foreground">Status</p>
+						<p className="font-medium">
+							{schedule.lastBackupStatus === "success" && "✓ Success"}
+							{schedule.lastBackupStatus === "error" && "✗ Error"}
+							{schedule.lastBackupStatus === "in_progress" && "⟳  in progress..."}
+							{!schedule.lastBackupStatus && "—"}
+						</p>
+					</div>
+
+					{schedule.lastBackupError && (
+						<div className="md:col-span-2 lg:col-span-4">
+							<p className="text-xs uppercase text-muted-foreground">Error Details</p>
+							<p className="font-mono text-sm text-red-600 whitespace-pre-wrap break-all">{schedule.lastBackupError}</p>
+						</div>
+					)}
+				</CardContent>
+			</Card>
+
+			{schedule.lastBackupStatus === "in_progress" && <BackupProgressCard scheduleId={schedule.id} />}
+
+			<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete backup schedule?</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete this backup schedule for <strong>{schedule.volume.name}</strong>? This
+							action cannot be undone. Existing snapshots will not be deleted.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<div className="flex gap-3 justify-end">
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={handleConfirmDelete}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							Delete schedule
+						</AlertDialogAction>
+					</div>
+				</AlertDialogContent>
+			</AlertDialog>
+		</div>
+	);
+};

app/client/modules/backups/components/snapshot-file-browser.tsx

@@ -0,0 +1,288 @@
+import { useCallback, useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { FileIcon } from "lucide-react";
+import { FileTree, type FileEntry } from "~/client/components/file-tree";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
+import { Button } from "~/client/components/ui/button";
+import { Checkbox } from "~/client/components/ui/checkbox";
+import { Label } from "~/client/components/ui/label";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "~/client/components/ui/alert-dialog";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/client/components/ui/tooltip";
+import type { Snapshot, Volume } from "~/client/lib/types";
+import { toast } from "sonner";
+import { listSnapshotFilesOptions, restoreSnapshotMutation } from "~/client/api-client/@tanstack/react-query.gen";
+
+interface Props {
+	snapshot: Snapshot;
+	repositoryName: string;
+	volume?: Volume;
+}
+
+export const SnapshotFileBrowser = (props: Props) => {
+	const { snapshot, repositoryName, volume } = props;
+
+	const isReadOnly = volume?.config && "readOnly" in volume.config && volume.config.readOnly === true;
+
+	const queryClient = useQueryClient();
+	const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+	const [fetchedFolders, setFetchedFolders] = useState<Set<string>>(new Set());
+	const [loadingFolders, setLoadingFolders] = useState<Set<string>>(new Set());
+	const [allFiles, setAllFiles] = useState<Map<string, FileEntry>>(new Map());
+	const [selectedPaths, setSelectedPaths] = useState<Set<string>>(new Set());
+	const [showRestoreDialog, setShowRestoreDialog] = useState(false);
+	const [deleteExtraFiles, setDeleteExtraFiles] = useState(false);
+
+	const volumeBasePath = snapshot.paths[0]?.match(/^(.*?_data)(\/|$)/)?.[1] || "/";
+
+	const { data: filesData, isLoading: filesLoading } = useQuery({
+		...listSnapshotFilesOptions({
+			path: { name: repositoryName, snapshotId: snapshot.short_id },
+			query: { path: volumeBasePath },
+		}),
+	});
+
+	const stripBasePath = useCallback(
+		(path: string): string => {
+			if (!volumeBasePath) return path;
+			if (path === volumeBasePath) return "/";
+			if (path.startsWith(`${volumeBasePath}/`)) {
+				const stripped = path.slice(volumeBasePath.length);
+				return stripped;
+			}
+			return path;
+		},
+		[volumeBasePath],
+	);
+
+	const addBasePath = useCallback(
+		(displayPath: string): string => {
+			if (!volumeBasePath) return displayPath;
+			if (displayPath === "/") return volumeBasePath;
+			return `${volumeBasePath}${displayPath}`;
+		},
+		[volumeBasePath],
+	);
+
+	useMemo(() => {
+		if (filesData?.files) {
+			setAllFiles((prev) => {
+				const next = new Map(prev);
+				for (const file of filesData.files) {
+					const strippedPath = stripBasePath(file.path);
+					if (strippedPath !== "/") {
+						next.set(strippedPath, { ...file, path: strippedPath });
+					}
+				}
+				return next;
+			});
+			setFetchedFolders((prev) => new Set(prev).add("/"));
+		}
+	}, [filesData, stripBasePath]);
+
+	const fileArray = useMemo(() => Array.from(allFiles.values()), [allFiles]);
+
+	const handleFolderExpand = useCallback(
+		async (folderPath: string) => {
+			setExpandedFolders((prev) => {
+				const next = new Set(prev);
+				next.add(folderPath);
+				return next;
+			});
+
+			if (!fetchedFolders.has(folderPath)) {
+				setLoadingFolders((prev) => new Set(prev).add(folderPath));
+
+				try {
+					const fullPath = addBasePath(folderPath);
+
+					const result = await queryClient.ensureQueryData(
+						listSnapshotFilesOptions({
+							path: { name: repositoryName, snapshotId: snapshot.short_id },
+							query: { path: fullPath },
+						}),
+					);
+
+					if (result.files) {
+						setAllFiles((prev) => {
+							const next = new Map(prev);
+							for (const file of result.files) {
+								const strippedPath = stripBasePath(file.path);
+								// Skip the directory itself
+								if (strippedPath !== folderPath) {
+									next.set(strippedPath, { ...file, path: strippedPath });
+								}
+							}
+							return next;
+						});
+
+						setFetchedFolders((prev) => new Set(prev).add(folderPath));
+					}
+				} catch (error) {
+					console.error("Failed to fetch folder contents:", error);
+				} finally {
+					setLoadingFolders((prev) => {
+						const next = new Set(prev);
+						next.delete(folderPath);
+						return next;
+					});
+				}
+			}
+		},
+		[repositoryName, snapshot, fetchedFolders, queryClient, stripBasePath, addBasePath],
+	);
+
+	const handleFolderHover = useCallback(
+		(folderPath: string) => {
+			if (!fetchedFolders.has(folderPath) && !loadingFolders.has(folderPath)) {
+				const fullPath = addBasePath(folderPath);
+
+				queryClient.prefetchQuery({
+					...listSnapshotFilesOptions({
+						path: { name: repositoryName, snapshotId: snapshot.short_id },
+						query: { path: fullPath },
+					}),
+				});
+			}
+		},
+		[repositoryName, snapshot, fetchedFolders, loadingFolders, queryClient, addBasePath],
+	);
+
+	const { mutate: restoreSnapshot, isPending: isRestoring } = useMutation({
+		...restoreSnapshotMutation(),
+		onSuccess: (data) => {
+			toast.success("Restore completed", {
+				description: `Successfully restored ${data.filesRestored} file(s). ${data.filesSkipped} file(s) skipped.`,
+			});
+			setSelectedPaths(new Set());
+		},
+		onError: (error) => {
+			toast.error("Restore failed", { description: error.message || "Failed to restore snapshot" });
+		},
+	});
+
+	const handleRestoreClick = useCallback(() => {
+		setShowRestoreDialog(true);
+	}, []);
+
+	const handleConfirmRestore = useCallback(() => {
+		const pathsArray = Array.from(selectedPaths);
+		const includePaths = pathsArray.map((path) => addBasePath(path));
+
+		restoreSnapshot({
+			path: { name: repositoryName },
+			body: {
+				snapshotId: snapshot.short_id,
+				include: includePaths,
+				delete: deleteExtraFiles,
+			},
+		});
+
+		setShowRestoreDialog(false);
+	}, [selectedPaths, addBasePath, repositoryName, snapshot.short_id, restoreSnapshot, deleteExtraFiles]);
+
+	return (
+		<div className="space-y-4">
+			<Card className="h-[600px] flex flex-col">
+				<CardHeader>
+					<div className="flex items-start justify-between">
+						<div>
+							<CardTitle>File Browser</CardTitle>
+							<CardDescription>{`Viewing snapshot from ${new Date(snapshot?.time ?? 0).toLocaleString()}`}</CardDescription>
+						</div>
+						{selectedPaths.size > 0 && (
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<span tabIndex={isReadOnly ? 0 : undefined}>
+										<Button
+											onClick={handleRestoreClick}
+											variant="primary"
+											size="sm"
+											disabled={isRestoring || isReadOnly}
+										>
+											{isRestoring
+												? "Restoring..."
+												: `Restore ${selectedPaths.size} selected ${selectedPaths.size === 1 ? "item" : "items"}`}
+										</Button>
+									</span>
+								</TooltipTrigger>
+								{isReadOnly && (
+									<TooltipContent className="text-center">
+										<p>Volume is mounted as read-only.</p>
+										<p>Please remount with read-only disabled to restore files.</p>
+									</TooltipContent>
+								)}
+							</Tooltip>
+						)}
+					</div>
+				</CardHeader>
+				<CardContent className="flex-1 overflow-hidden flex flex-col p-0">
+					{filesLoading && fileArray.length === 0 && (
+						<div className="flex items-center justify-center flex-1">
+							<p className="text-muted-foreground">Loading files...</p>
+						</div>
+					)}
+
+					{fileArray.length === 0 && !filesLoading && (
+						<div className="flex flex-col items-center justify-center flex-1 text-center p-8">
+							<FileIcon className="w-12 h-12 text-muted-foreground/50 mb-4" />
+							<p className="text-muted-foreground">No files in this snapshot</p>
+						</div>
+					)}
+
+					{fileArray.length > 0 && (
+						<div className="overflow-auto flex-1 border border-border rounded-md bg-card m-4">
+							<FileTree
+								files={fileArray}
+								onFolderExpand={handleFolderExpand}
+								onFolderHover={handleFolderHover}
+								expandedFolders={expandedFolders}
+								loadingFolders={loadingFolders}
+								className="px-2 py-2"
+								withCheckboxes={true}
+								selectedPaths={selectedPaths}
+								onSelectionChange={setSelectedPaths}
+							/>
+						</div>
+					)}
+				</CardContent>
+			</Card>
+
+			<AlertDialog open={showRestoreDialog} onOpenChange={setShowRestoreDialog}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Confirm Restore</AlertDialogTitle>
+						<AlertDialogDescription>
+							{selectedPaths.size > 0
+								? `This will restore ${selectedPaths.size} selected ${selectedPaths.size === 1 ? "item" : "items"} from the snapshot.`
+								: "This will restore everything from the snapshot."}{" "}
+							Existing files will be overwritten by what's in the snapshot. This action cannot be undone.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<div className="flex items-center space-x-2 py-4">
+						<Checkbox
+							id="delete-extra"
+							checked={deleteExtraFiles}
+							onCheckedChange={(checked) => setDeleteExtraFiles(checked === true)}
+						/>
+						<Label htmlFor="delete-extra" className="text-sm font-normal cursor-pointer">
+							Delete files not present in the snapshot?
+						</Label>
+					</div>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction onClick={handleConfirmRestore}>Confirm</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</div>
+	);
+};

app/client/modules/backups/components/snapshot-timeline.tsx

@@ -0,0 +1,108 @@
+import { cn } from "~/client/lib/utils";
+import { Card } from "~/client/components/ui/card";
+import { ByteSize } from "~/client/components/bytes-size";
+import { useEffect } from "react";
+import type { ListSnapshotsResponse } from "~/client/api-client";
+
+interface Props {
+	snapshots: ListSnapshotsResponse;
+	snapshotId?: string;
+	loading?: boolean;
+	error?: string;
+	onSnapshotSelect: (snapshotId: string) => void;
+}
+
+export const SnapshotTimeline = (props: Props) => {
+	const { snapshots, snapshotId, loading, onSnapshotSelect, error } = props;
+
+	useEffect(() => {
+		if (!snapshotId && snapshots.length > 0) {
+			onSnapshotSelect(snapshots[snapshots.length - 1].short_id);
+		}
+	}, [snapshotId, snapshots, onSnapshotSelect]);
+
+	if (error) {
+		return (
+			<Card>
+				<div className="flex items-center justify-center h-24 p-4 text-center">
+					<p className="text-destructive">Error loading snapshots: {error}</p>
+				</div>
+			</Card>
+		);
+	}
+
+	if (loading) {
+		return (
+			<Card>
+				<div className="flex items-center justify-center h-24">
+					<p className="text-muted-foreground">Loading snapshots...</p>
+				</div>
+			</Card>
+		);
+	}
+
+	if (snapshots.length === 0) {
+		return (
+			<Card>
+				<div className="flex items-center justify-center h-24">
+					<p className="text-muted-foreground">No snapshots available</p>
+				</div>
+			</Card>
+		);
+	}
+
+	return (
+		<Card className="p-0 pt-2">
+			<div className="w-full bg-card">
+				<div className="relative flex items-center">
+					<div className="flex-1 overflow-hidden">
+						<div className="flex gap-4 overflow-x-auto pb-2 *:first:ml-2 *:last:mr-2">
+							{snapshots.map((snapshot, index) => {
+								const date = new Date(snapshot.time);
+								const isSelected = snapshotId === snapshot.short_id;
+								const isLatest = index === snapshots.length - 1;
+
+								return (
+									<button
+										type="button"
+										key={snapshot.short_id}
+										onClick={() => onSnapshotSelect(snapshot.short_id)}
+										className={cn(
+											"shrink-0 flex flex-col items-center gap-2 p-3 rounded-lg transition-all",
+											"border-2 cursor-pointer",
+											{
+												"border-primary bg-primary/10 shadow-md": isSelected,
+												"border-border hover:border-accent hover:bg-accent/5": !isSelected,
+											},
+										)}
+									>
+										<div className="text-xs font-semibold text-foreground">
+											{date.toLocaleDateString("en-US", { month: "short", day: "numeric" })}
+										</div>
+										<div className="text-xs text-muted-foreground">
+											{date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" })}
+										</div>
+										<div className="text-xs text-muted-foreground opacity-75">
+											<ByteSize bytes={snapshot.size} />
+										</div>
+										{isLatest && (
+											<div className="text-xs font-semibold text-primary px-2 py-0.5 bg-primary/20 rounded">Latest</div>
+										)}
+									</button>
+								);
+							})}
+						</div>
+					</div>
+				</div>
+
+				<div className="px-4 py-2 text-xs text-muted-foreground bg-card-header border-t border-border flex justify-between">
+					<span>{snapshots.length} snapshots</span>
+					<span>
+						{new Date(snapshots[0].time).toLocaleDateString()} -{" "}
+						{new Date(snapshots.at(-1)?.time ?? 0).toLocaleDateString()}
+					</span>
+				</div>
+			</div>
+		</Card>
+	);
+};

app/client/modules/backups/routes/backup-details.tsx

@@ -0,0 +1,191 @@
+import { useId, useState } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { redirect, useNavigate } from "react-router";
+import { toast } from "sonner";
+import { Button } from "~/client/components/ui/button";
+import {
+	getBackupScheduleOptions,
+	runBackupNowMutation,
+	deleteBackupScheduleMutation,
+	listSnapshotsOptions,
+	updateBackupScheduleMutation,
+	stopBackupMutation,
+} from "~/client/api-client/@tanstack/react-query.gen";
+import { parseError } from "~/client/lib/errors";
+import { getCronExpression } from "~/utils/utils";
+import { CreateScheduleForm, type BackupScheduleFormValues } from "../components/create-schedule-form";
+import { ScheduleSummary } from "../components/schedule-summary";
+import type { Route } from "./+types/backup-details";
+import { SnapshotFileBrowser } from "../components/snapshot-file-browser";
+import { SnapshotTimeline } from "../components/snapshot-timeline";
+import { getBackupSchedule } from "~/client/api-client";
+
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "Backup Job Details" },
+		{
+			name: "description",
+			content: "View and manage backup job configuration, schedule, and snapshots.",
+		},
+	];
+}
+
+export const clientLoader = async ({ params }: Route.LoaderArgs) => {
+	const { data } = await getBackupSchedule({ path: { scheduleId: params.id } });
+
+	if (!data) return redirect("/backups");
+
+	return data;
+};
+
+export default function ScheduleDetailsPage({ params, loaderData }: Route.ComponentProps) {
+	const navigate = useNavigate();
+	const [isEditMode, setIsEditMode] = useState(false);
+	const formId = useId();
+	const [selectedSnapshotId, setSelectedSnapshotId] = useState<string>();
+
+	const { data: schedule } = useQuery({
+		...getBackupScheduleOptions({ path: { scheduleId: params.id } }),
+		initialData: loaderData,
+		refetchInterval: 10000,
+		refetchOnWindowFocus: true,
+	});
+
+	const {
+		data: snapshots,
+		isLoading,
+		failureReason,
+	} = useQuery({
+		...listSnapshotsOptions({ path: { name: schedule.repository.name }, query: { backupId: schedule.id.toString() } }),
+	});
+
+	const updateSchedule = useMutation({
+		...updateBackupScheduleMutation(),
+		onSuccess: () => {
+			toast.success("Backup schedule saved successfully");
+			setIsEditMode(false);
+		},
+		onError: (error) => {
+			toast.error("Failed to save backup schedule", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	const runBackupNow = useMutation({
+		...runBackupNowMutation(),
+		onSuccess: () => {
+			toast.success("Backup started successfully");
+		},
+		onError: (error) => {
+			toast.error("Failed to start backup", { description: parseError(error)?.message });
+		},
+	});
+
+	const stopBackup = useMutation({
+		...stopBackupMutation(),
+		onSuccess: () => {
+			toast.success("Backup stopped successfully");
+		},
+		onError: (error) => {
+			toast.error("Failed to stop backup", { description: parseError(error)?.message });
+		},
+	});
+
+	const deleteSchedule = useMutation({
+		...deleteBackupScheduleMutation(),
+		onSuccess: () => {
+			toast.success("Backup schedule deleted successfully");
+			navigate("/backups");
+		},
+		onError: (error) => {
+			toast.error("Failed to delete backup schedule", { description: parseError(error)?.message });
+		},
+	});
+
+	const handleSubmit = (formValues: BackupScheduleFormValues) => {
+		if (!schedule) return;
+
+		const cronExpression = getCronExpression(formValues.frequency, formValues.dailyTime, formValues.weeklyDay);
+
+		const retentionPolicy: Record<string, number> = {};
+		if (formValues.keepLast) retentionPolicy.keepLast = formValues.keepLast;
+		if (formValues.keepHourly) retentionPolicy.keepHourly = formValues.keepHourly;
+		if (formValues.keepDaily) retentionPolicy.keepDaily = formValues.keepDaily;
+		if (formValues.keepWeekly) retentionPolicy.keepWeekly = formValues.keepWeekly;
+		if (formValues.keepMonthly) retentionPolicy.keepMonthly = formValues.keepMonthly;
+		if (formValues.keepYearly) retentionPolicy.keepYearly = formValues.keepYearly;
+
+		updateSchedule.mutate({
+			path: { scheduleId: schedule.id.toString() },
+			body: {
+				repositoryId: formValues.repositoryId,
+				enabled: schedule.enabled,
+				cronExpression,
+				retentionPolicy: Object.keys(retentionPolicy).length > 0 ? retentionPolicy : undefined,
+				includePatterns: formValues.includePatterns,
+				excludePatterns: formValues.excludePatterns,
+			},
+		});
+	};
+
+	const handleToggleEnabled = (enabled: boolean) => {
+		updateSchedule.mutate({
+			path: { scheduleId: schedule.id.toString() },
+			body: {
+				repositoryId: schedule.repositoryId,
+				enabled,
+				cronExpression: schedule.cronExpression,
+				retentionPolicy: schedule.retentionPolicy || undefined,
+				includePatterns: schedule.includePatterns || undefined,
+				excludePatterns: schedule.excludePatterns || undefined,
+			},
+		});
+	};
+
+	if (isEditMode) {
+		return (
+			<div>
+				<CreateScheduleForm volume={schedule.volume} initialValues={schedule} onSubmit={handleSubmit} formId={formId} />
+				<div className="flex justify-end mt-4 gap-2">
+					<Button type="submit" className="ml-auto" variant="primary" form={formId} loading={updateSchedule.isPending}>
+						Update schedule
+					</Button>
+					<Button variant="outline" onClick={() => setIsEditMode(false)}>
+						Cancel
+					</Button>
+				</div>
+			</div>
+		);
+	}
+
+	const selectedSnapshot = snapshots?.find((s) => s.short_id === selectedSnapshotId);
+
+	return (
+		<div className="flex flex-col gap-6">
+			<ScheduleSummary
+				handleToggleEnabled={handleToggleEnabled}
+				handleRunBackupNow={() => runBackupNow.mutate({ path: { scheduleId: schedule.id.toString() } })}
+				handleStopBackup={() => stopBackup.mutate({ path: { scheduleId: schedule.id.toString() } })}
+				handleDeleteSchedule={() => deleteSchedule.mutate({ path: { scheduleId: schedule.id.toString() } })}
+				setIsEditMode={setIsEditMode}
+				schedule={schedule}
+			/>
+			<SnapshotTimeline
+				loading={isLoading}
+				snapshots={snapshots ?? []}
+				snapshotId={selectedSnapshot?.short_id}
+				error={failureReason?.message}
+				onSnapshotSelect={setSelectedSnapshotId}
+			/>
+			{selectedSnapshot && (
+				<SnapshotFileBrowser
+					key={selectedSnapshot?.short_id}
+					snapshot={selectedSnapshot}
+					repositoryName={schedule.repository.name}
+					volume={schedule.volume}
+				/>
+			)}
+		</div>
+	);
+}

app/client/modules/backups/routes/backups.tsx

@@ -0,0 +1,121 @@
+import { useQuery } from "@tanstack/react-query";
+import { CalendarClock, Database, HardDrive, Plus } from "lucide-react";
+import { Link } from "react-router";
+import { BackupStatusDot } from "../components/backup-status-dot";
+import { EmptyState } from "~/client/components/empty-state";
+import { Button } from "~/client/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
+import type { Route } from "./+types/backups";
+import { listBackupSchedules } from "~/client/api-client";
+import { listBackupSchedulesOptions } from "~/client/api-client/@tanstack/react-query.gen";
+
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "Backup Jobs" },
+		{
+			name: "description",
+			content: "Automate volume backups with scheduled jobs and retention policies.",
+		},
+	];
+}
+
+export const clientLoader = async () => {
+	const jobs = await listBackupSchedules();
+	if (jobs.data) return jobs.data;
+	return [];
+};
+
+export default function Backups({ loaderData }: Route.ComponentProps) {
+	const { data: schedules, isLoading } = useQuery({
+		...listBackupSchedulesOptions(),
+		initialData: loaderData,
+		refetchInterval: 10000,
+		refetchOnWindowFocus: true,
+	});
+
+	if (isLoading) {
+		return (
+			<div className="flex items-center justify-center h-full">
+				<p className="text-muted-foreground">Loading backup schedules...</p>
+			</div>
+		);
+	}
+
+	if (!schedules || schedules.length === 0) {
+		return (
+			<EmptyState
+				icon={CalendarClock}
+				title="No backup job"
+				description="Backup jobs help you automate the process of backing up your volumes on a regular schedule to ensure your data is safe and secure."
+				button={
+					<Button>
+						<Link to="/backups/create" className="flex items-center">
+							<Plus className="h-4 w-4 mr-2" />
+							Create a backup job
+						</Link>
+					</Button>
+				}
+			/>
+		);
+	}
+
+	return (
+		<div className="container mx-auto space-y-6">
+			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 auto-rows-fr">
+				{schedules.map((schedule) => (
+					<Link key={schedule.id} to={`/backups/${schedule.id}`}>
+						<Card key={schedule.id} className="flex flex-col h-full">
+							<CardHeader className="pb-3">
+								<div className="flex items-start justify-between gap-2">
+									<div className="flex items-center gap-2 flex-1 min-w-0">
+										<HardDrive className="h-5 w-5 text-muted-foreground shrink-0" />
+										<CardTitle className="text-lg truncate">
+											Volume <span className="text-strong-accent">{schedule.volume.name}</span>
+										</CardTitle>
+									</div>
+									<BackupStatusDot
+										enabled={schedule.enabled}
+										hasError={!!schedule.lastBackupError}
+										isInProgress={schedule.lastBackupStatus === "in_progress"}
+									/>
+								</div>
+								<CardDescription className="flex items-center gap-2 mt-2">
+									<Database className="h-4 w-4" />
+									<span className="truncate">{schedule.repository.name}</span>
+								</CardDescription>
+							</CardHeader>
+							<CardContent className="flex-1 space-y-4">
+								<div className="space-y-2">
+									<div className="flex items-center justify-between text-sm">
+										<span className="text-muted-foreground">Schedule</span>
+										<code className="text-xs bg-muted px-2 py-1 rounded">{schedule.cronExpression}</code>
+									</div>
+									<div className="flex items-center justify-between text-sm">
+										<span className="text-muted-foreground">Last backup</span>
+										<span className="font-medium">
+											{schedule.lastBackupAt ? new Date(schedule.lastBackupAt).toLocaleDateString() : "Never"}
+										</span>
+									</div>
+									<div className="flex items-center justify-between text-sm">
+										<span className="text-muted-foreground">Next backup</span>
+										<span className="font-medium">
+											{schedule.nextBackupAt ? new Date(schedule.nextBackupAt).toLocaleDateString() : "N/A"}
+										</span>
+									</div>
+								</div>
+							</CardContent>
+						</Card>
+					</Link>
+				))}
+				<Link to="/backups/create">
+					<Card className="flex flex-col items-center justify-center h-full hover:bg-muted/50 transition-colors cursor-pointer">
+						<CardContent className="flex flex-col items-center justify-center gap-2">
+							<Plus className="h-8 w-8 text-muted-foreground" />
+							<span className="text-sm font-medium text-muted-foreground">Create a backup job</span>
+						</CardContent>
+					</Card>
+				</Link>
+			</div>
+		</div>
+	);
+}

app/client/modules/backups/routes/create-backup.tsx

@@ -0,0 +1,185 @@
+import { useId, useState } from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Database, HardDrive } from "lucide-react";
+import { Link, useNavigate } from "react-router";
+import { toast } from "sonner";
+import {
+	createBackupScheduleMutation,
+	listRepositoriesOptions,
+	listVolumesOptions,
+} from "~/client/api-client/@tanstack/react-query.gen";
+import { Button } from "~/client/components/ui/button";
+import { Card, CardContent } from "~/client/components/ui/card";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
+import { parseError } from "~/client/lib/errors";
+import { EmptyState } from "~/client/components/empty-state";
+import { getCronExpression } from "~/utils/utils";
+import { CreateScheduleForm, type BackupScheduleFormValues } from "../components/create-schedule-form";
+import type { Route } from "./+types/create-backup";
+import { listRepositories, listVolumes } from "~/client/api-client";
+
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "Create Backup Job" },
+		{
+			name: "description",
+			content: "Create a new automated backup job for your volumes.",
+		},
+	];
+}
+
+export const clientLoader = async () => {
+	const volumes = await listVolumes();
+	const repositories = await listRepositories();
+
+	if (volumes.data && repositories.data) return { volumes: volumes.data, repositories: repositories.data };
+	return { volumes: [], repositories: [] };
+};
+
+export default function CreateBackup({ loaderData }: Route.ComponentProps) {
+	const navigate = useNavigate();
+	const formId = useId();
+	const [selectedVolumeId, setSelectedVolumeId] = useState<number | undefined>();
+
+	const { data: volumesData, isLoading: loadingVolumes } = useQuery({
+		...listVolumesOptions(),
+		initialData: loaderData.volumes,
+	});
+
+	const { data: repositoriesData } = useQuery({
+		...listRepositoriesOptions(),
+		initialData: loaderData.repositories,
+	});
+
+	const createSchedule = useMutation({
+		...createBackupScheduleMutation(),
+		onSuccess: (data) => {
+			toast.success("Backup job created successfully");
+			navigate(`/backups/${data.id}`);
+		},
+		onError: (error) => {
+			toast.error("Failed to create backup job", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	const handleSubmit = (formValues: BackupScheduleFormValues) => {
+		if (!selectedVolumeId) return;
+
+		const cronExpression = getCronExpression(formValues.frequency, formValues.dailyTime, formValues.weeklyDay);
+
+		const retentionPolicy: Record<string, number> = {};
+		if (formValues.keepLast) retentionPolicy.keepLast = formValues.keepLast;
+		if (formValues.keepHourly) retentionPolicy.keepHourly = formValues.keepHourly;
+		if (formValues.keepDaily) retentionPolicy.keepDaily = formValues.keepDaily;
+		if (formValues.keepWeekly) retentionPolicy.keepWeekly = formValues.keepWeekly;
+		if (formValues.keepMonthly) retentionPolicy.keepMonthly = formValues.keepMonthly;
+		if (formValues.keepYearly) retentionPolicy.keepYearly = formValues.keepYearly;
+
+		createSchedule.mutate({
+			body: {
+				volumeId: selectedVolumeId,
+				repositoryId: formValues.repositoryId,
+				enabled: true,
+				cronExpression,
+				retentionPolicy: Object.keys(retentionPolicy).length > 0 ? retentionPolicy : undefined,
+				includePatterns: formValues.includePatterns,
+				excludePatterns: formValues.excludePatterns,
+			},
+		});
+	};
+
+	const selectedVolume = volumesData.find((v) => v.id === selectedVolumeId);
+
+	if (loadingVolumes) {
+		return (
+			<div className="flex items-center justify-center h-full">
+				<p className="text-muted-foreground">Loading...</p>
+			</div>
+		);
+	}
+
+	if (!volumesData.length) {
+		return (
+			<EmptyState
+				icon={HardDrive}
+				title="No volume to backup"
+				description="To create a backup job, you need to create a volume first. Volumes are the data sources that will be backed up."
+				button={
+					<Button>
+						<Link to="/volumes">Go to volumes</Link>
+					</Button>
+				}
+			/>
+		);
+	}
+
+	if (!repositoriesData?.length) {
+		return (
+			<EmptyState
+				icon={Database}
+				title="No repository"
+				description="To create a backup job, you need to set up a backup repository first. Backup repositories are the destinations where your backups will be stored."
+				button={
+					<Button>
+						<Link to="/repositories">Go to repositories</Link>
+					</Button>
+				}
+			/>
+		);
+	}
+
+	return (
+		<div className="container mx-auto space-y-6">
+			<Card>
+				<CardContent>
+					<Select value={selectedVolumeId?.toString()} onValueChange={(v) => setSelectedVolumeId(Number(v))}>
+						<SelectTrigger id="volume-select">
+							<SelectValue placeholder="Choose a volume to backup" />
+						</SelectTrigger>
+						<SelectContent>
+							{volumesData.map((volume) => (
+								<SelectItem key={volume.id} value={volume.id.toString()}>
+									<span className="flex items-center gap-2">
+										<HardDrive className="h-4 w-4" />
+										{volume.name}
+									</span>
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</CardContent>
+			</Card>
+			{selectedVolume ? (
+				<>
+					<CreateScheduleForm volume={selectedVolume} onSubmit={handleSubmit} formId={formId} />
+					<div className="flex justify-end mt-4 gap-2">
+						<Button type="submit" variant="primary" form={formId} loading={createSchedule.isPending}>
+							Create
+						</Button>
+					</div>
+				</>
+			) : (
+				<Card>
+					<CardContent className="py-16">
+						<div className="flex flex-col items-center justify-center text-center">
+							<div className="relative mb-6">
+								<div className="absolute inset-0 animate-pulse">
+									<div className="w-24 h-24 rounded-full bg-primary/10 blur-2xl" />
+								</div>
+								<div className="relative flex items-center justify-center w-24 h-24 rounded-full bg-linear-to-br from-primary/20 to-primary/5 border-2 border-primary/20">
+									<Database className="w-12 h-12 text-primary/70" strokeWidth={1.5} />
+								</div>
+							</div>
+							<h3 className="text-xl font-semibold mb-2">Select a volume</h3>
+							<p className="text-muted-foreground text-sm max-w-md">
+								Choose a volume from the dropdown above to configure its backup schedule.
+							</p>
+						</div>
+					</CardContent>
+				</Card>
+			)}
+		</div>
+	);
+}