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

import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
import {
	DndContext,
	closestCenter,
	KeyboardSensor,
	PointerSensor,
	useSensor,
	useSensors,
	type DragEndEvent,
} from "@dnd-kit/core";
import { arrayMove, SortableContext, sortableKeyboardCoordinates, rectSortingStrategy } from "@dnd-kit/sortable";
import { CalendarClock, Plus } from "lucide-react";
import { useState } from "react";
import { EmptyState } from "~/client/components/empty-state";
import { Button } from "~/client/components/ui/button";
import {
	listBackupSchedulesOptions,
	reorderBackupSchedulesMutation,
} from "~/client/api-client/@tanstack/react-query.gen";
import { SortableCard } from "~/client/components/sortable-card";
import { BackupCard } from "../components/backup-card";
import { Link } from "@tanstack/react-router";

export function BackupsPage() {
	const { data: schedules } = useSuspenseQuery({
		...listBackupSchedulesOptions(),
	});

	const [localItems, setLocalItems] = useState<string[] | null>(null);
	const items = localItems ?? schedules?.map((s) => s.shortId) ?? [];

	const sensors = useSensors(
		useSensor(PointerSensor, {
			activationConstraint: { distance: 8 },
		}),
		useSensor(KeyboardSensor, {
			coordinateGetter: sortableKeyboardCoordinates,
		}),
	);

	const reorderMutation = useMutation({
		...reorderBackupSchedulesMutation(),
	});

	const handleDragEnd = (event: DragEndEvent) => {
		const { active, over } = event;

		if (over && active.id !== over.id) {
			setLocalItems((currentItems) => {
				const baseItems = currentItems ?? schedules?.map((s) => s.shortId) ?? [];
				const activeId = String(active.id);
				const overId = String(over.id);
				let oldIndex = baseItems.indexOf(activeId);
				let newIndex = baseItems.indexOf(overId);

				if (oldIndex === -1 || newIndex === -1) {
					const freshItems = schedules?.map((s) => s.shortId) ?? [];
					oldIndex = freshItems.indexOf(activeId);
					newIndex = freshItems.indexOf(overId);

					if (oldIndex === -1 || newIndex === -1) {
						return currentItems;
					}

					const newItems = arrayMove(freshItems, oldIndex, newIndex);
					reorderMutation.mutate({ body: { scheduleShortIds: newItems } });
					return newItems;
				}

				const newItems = arrayMove(baseItems, oldIndex, newIndex);
				reorderMutation.mutate({ body: { scheduleShortIds: newItems } });

				return newItems;
			});
		}
	};

	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>
				}
			/>
		);
	}

	const scheduleMap = new Map(schedules.map((s) => [s.shortId, s]));

	return (
		<div className="container @container mx-auto space-y-6">
			<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
				<SortableContext items={items} strategy={rectSortingStrategy}>
					<div className="grid gap-4 @narrow:grid-cols-1 @medium:grid-cols-2 @wide:grid-cols-3 auto-rows-fr">
						{items.map((id) => {
							const schedule = scheduleMap.get(id);
							if (!schedule) return null;
							return (
								<SortableCard uniqueId={id} key={schedule.id}>
									<BackupCard schedule={schedule} />
								</SortableCard>
							);
						})}
						<Link to="/backups/create" className="h-full">
							<div className="group flex flex-col items-center justify-center h-full min-h-50 border-2 border-dashed border-border/60 bg-muted/20 dark:bg-card hover:bg-muted/40 dark:hover:bg-card/50 transition-all cursor-pointer rounded-xl hover:shadow-[0_8px_30px_-15px_rgba(0,0,0,0.05)] dark:hover:shadow-sm hover:border-border hover:-translate-y-[1px] active:scale-[0.98] duration-300">
								<div className="flex flex-col items-center justify-center gap-3">
									<div className="p-3 rounded-full bg-background/50 dark:bg-muted/20 group-hover:bg-background dark:group-hover:bg-muted/50 transition-all group-hover:scale-110 duration-300 shadow-xs dark:shadow-none">
										<Plus className="h-6 w-6 text-muted-foreground group-hover:text-foreground transition-colors" />
									</div>
									<span className="text-sm font-medium text-muted-foreground group-hover:text-foreground transition-colors">
										Create a backup job
									</span>
								</div>
							</div>
						</Link>
					</div>
				</SortableContext>
			</DndContext>
		</div>
	);
}