chore: file formatting

frontend/src/components/BytescaleUploader/BytescaleUploader.tsx

@@ -1,26 +1,15 @@
-import { useState, useRef } from "react";
-import { Button } from "@/components/ui/button";
-import { User, X, Loader2 } from "lucide-react";
-import axios from "axios";
+import { useState, useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import { User, X, Loader2 } from 'lucide-react';
+import axios from 'axios';
 
 interface BytescaleUploaderProps {
 	value: string;
 	onChange: (url: string) => void;
-	folderPath:
-		| "/health-packages"
-		| "/seo"
-		| "/doctors"
-		| "/departments"
-		| "/news"
-		| "/blog"
-		| "/doctor-og";
+	folderPath: '/health-packages' | '/seo' | '/doctors' | '/departments' | '/news' | '/blog' | '/doctor-og';
 }
 
-export function BytescaleUploader({
-	value,
-	onChange,
-	folderPath,
-}: BytescaleUploaderProps) {
+export function BytescaleUploader({ value, onChange, folderPath }: BytescaleUploaderProps) {
 	const baseURL = import.meta.env.VITE_API_URL;
 	const [isUploading, setIsUploading] = useState(false);
 	const fileInputRef = useRef<HTMLInputElement>(null);
@@ -30,33 +19,32 @@ export function BytescaleUploader({
 		if (!file) return;
 
 		if (file.size > 5 * 1024 * 1024) {
-			alert("File is too large (Max 5MB)");
+			alert('File is too large (Max 5MB)');
 			return;
 		}
 
 		setIsUploading(true);
 
 		const formData = new FormData();
-		formData.append("file", file);
-		formData.append("folderPath", folderPath);
+		formData.append('file', file);
+		formData.append('folderPath', folderPath);
 
 		try {
 			const response = await axios.post(`${baseURL}/upload`, formData, {
 				headers: {
-					"Content-Type": "multipart/form-data",
+					'Content-Type': 'multipart/form-data',
 				},
 			});
 
 			const { fileUrl } = response.data;
 			onChange(fileUrl);
 		} catch (e: any) {
-			console.error("Upload Error:", e);
-			const errorMessage =
-				e.response?.data?.error || e.message || "Upload failed";
+			console.error('Upload Error:', e);
+			const errorMessage = e.response?.data?.error || e.message || 'Upload failed';
 			alert(`Upload Error: ${errorMessage}`);
 		} finally {
 			setIsUploading(false);
-			if (fileInputRef.current) fileInputRef.current.value = "";
+			if (fileInputRef.current) fileInputRef.current.value = '';
 		}
 	};
 
@@ -73,7 +61,7 @@ export function BytescaleUploader({
 							/>
 							<button
 								type="button"
-								onClick={() => onChange("")}
+								onClick={() => onChange('')}
 								className="absolute -top-1 -right-1 bg-destructive text-white rounded-full p-0.5 shadow-sm hover:scale-110 transition-transform"
 							>
 								<X className="w-3 h-3" />
@@ -111,17 +99,16 @@ export function BytescaleUploader({
 							Uploading...
 						</>
 					) : value ? (
-						"Change Photo"
+						'Change Photo'
 					) : (
-						"Upload Photo"
+						'Upload Photo'
 					)}
 				</Button>
 			</div>
 
 			{value && (
 				<p className="text-xs text-amber-600 pl-[72px]">
-					⚠️ Make sure to save the changes by clicking the "Save Changes"
-					button.
+					⚠️ Make sure to save the changes by clicking the "Save Changes" button.
 				</p>
 			)}
 		</div>

frontend/src/components/HealthPackageModal/HealthPackageModal.tsx

@@ -1,38 +1,21 @@
-import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
-import SeoFields from "@/components/SeoFields/SeoFields";
-import { useEffect } from "react";
+import { BytescaleUploader } from '@/components/BytescaleUploader/BytescaleUploader';
+import SeoFields from '@/components/SeoFields/SeoFields';
+import { useEffect } from 'react';
 
-import {
-	Dialog,
-	DialogContent,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-} from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Badge } from "@/components/ui/badge";
-import { Switch } from "@/components/ui/switch";
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Switch } from '@/components/ui/switch';
 
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 
-import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
-} from "@/components/ui/accordion";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
 
-import { Plus, Trash2 } from "lucide-react";
+import { Plus, Trash2 } from 'lucide-react';
 
 interface Props {
 	open: boolean;
@@ -65,8 +48,8 @@ export default function HealthPackageModal({
 					? prev.slug
 					: pkgForm.name
 							.toLowerCase()
-							.replace(/[^a-z0-9]+/g, "-")
-							.replace(/(^-|-$)/g, ""),
+							.replace(/[^a-z0-9]+/g, '-')
+							.replace(/(^-|-$)/g, ''),
 			}));
 		}
 	}, [pkgForm.name]);
@@ -76,8 +59,8 @@ export default function HealthPackageModal({
 			...inclusionsList,
 			{
 				id: Date.now(),
-				category: "",
-				items: "",
+				category: '',
+				items: '',
 			},
 		]);
 	};
@@ -86,11 +69,7 @@ export default function HealthPackageModal({
 		setInclusionsList(inclusionsList.filter((item) => item.id !== id));
 	};
 
-	const handleUpdateInclusionField = (
-		id: number,
-		field: string,
-		value: string,
-	) => {
+	const handleUpdateInclusionField = (id: number, field: string, value: string) => {
 		setInclusionsList(
 			inclusionsList.map((item) =>
 				item.id === id
@@ -98,8 +77,8 @@ export default function HealthPackageModal({
 							...item,
 							[field]: value,
 						}
-					: item,
-			),
+					: item
+			)
 		);
 	};
 
@@ -108,7 +87,7 @@ export default function HealthPackageModal({
 			<DialogContent className="w-full !max-w-7xl h-[92vh] flex flex-col p-0 overflow-hidden">
 				<DialogHeader className="px-6 py-5 border-b bg-background sticky top-0 z-20">
 					<DialogTitle className="text-2xl font-bold">
-						{editingPackage ? "Edit Health Package" : "Create Health Package"}
+						{editingPackage ? 'Edit Health Package' : 'Create Health Package'}
 					</DialogTitle>
 				</DialogHeader>
 
@@ -120,21 +99,17 @@ export default function HealthPackageModal({
 								<div className="sticky top-0 bg-background z-10 pb-2">
 									<h3 className="text-lg font-bold">Profile & Pricing</h3>
 
-									<p className="text-sm text-muted-foreground">
-										Main package information
-									</p>
+									<p className="text-sm text-muted-foreground">Main package information</p>
 								</div>
 
 								<div className="space-y-5">
 									<div className="space-y-2">
 										<Label className="font-semibold">Package Image</Label>
 
-										<p className="text-xs text-muted-foreground">
-											Recommended size: 650 × 250
-										</p>
+										<p className="text-xs text-muted-foreground">Recommended size: 650 × 250</p>
 
 										<BytescaleUploader
-											value={pkgForm.image || ""}
+											value={pkgForm.image || ''}
 											folderPath="/health-packages"
 											onChange={(url) =>
 												setPkgForm({
@@ -149,9 +124,7 @@ export default function HealthPackageModal({
 										<div>
 											<p className="font-semibold">Active Visibility</p>
 
-											<p className="text-sm text-muted-foreground">
-												Show this package publicly
-											</p>
+											<p className="text-sm text-muted-foreground">Show this package publicly</p>
 										</div>
 
 										<Switch
@@ -227,11 +200,9 @@ export default function HealthPackageModal({
 
 											<Input
 												type="number"
-												value={pkgForm.price || ""}
+												value={pkgForm.price || ''}
 												onChange={(e) => {
-													const value = e.target.value
-														? Number(e.target.value)
-														: undefined;
+													const value = e.target.value ? Number(e.target.value) : undefined;
 
 													setPkgForm({
 														...pkgForm,
@@ -242,20 +213,16 @@ export default function HealthPackageModal({
 										</div>
 
 										<div className="space-y-2">
-											<Label className="font-semibold">
-												Discounted Price (₹)
-											</Label>
+											<Label className="font-semibold">Discounted Price (₹)</Label>
 
 											<Input
 												type="number"
 												disabled={!pkgForm.price}
-												value={pkgForm.discountedPrice || ""}
+												value={pkgForm.discountedPrice || ''}
 												onChange={(e) =>
 													setPkgForm({
 														...pkgForm,
-														discountedPrice: e.target.value
-															? Number(e.target.value)
-															: undefined,
+														discountedPrice: e.target.value ? Number(e.target.value) : undefined,
 													})
 												}
 											/>
@@ -300,21 +267,15 @@ export default function HealthPackageModal({
 									<div>
 										<h3 className="text-lg font-bold">Tests & Inclusions</h3>
 
-										<p className="text-sm text-muted-foreground">
-											Group tests into categories
-										</p>
+										<p className="text-sm text-muted-foreground">Group tests into categories</p>
 									</div>
 
-									<Badge variant="outline">
-										{inclusionsList.length} Groups
-									</Badge>
+									<Badge variant="outline">{inclusionsList.length} Groups</Badge>
 								</div>
 
 								<Accordion type="multiple" className="space-y-4">
 									{inclusionsList.map((inc, index) => {
-										const testCount = inc.items
-											?.split(",")
-											.filter(Boolean).length;
+										const testCount = inc.items?.split(',').filter(Boolean).length;
 
 										return (
 											<AccordionItem
@@ -325,13 +286,9 @@ export default function HealthPackageModal({
 												<AccordionTrigger className="hover:no-underline w-full">
 													<div className="flex w-full items-center justify-between">
 														<div className="flex flex-col items-start text-left">
-															<p className="font-semibold">
-																{inc.category || `Group ${index + 1}`}
-															</p>
+															<p className="font-semibold">{inc.category || `Group ${index + 1}`}</p>
 
-															<p className="text-xs text-muted-foreground">
-																{testCount || 0} tests included
-															</p>
+															<p className="text-xs text-muted-foreground">{testCount || 0} tests included</p>
 														</div>
 
 														<Button
@@ -354,13 +311,7 @@ export default function HealthPackageModal({
 															<Input
 																placeholder="Routine Blood Tests"
 																value={inc.category}
-																onChange={(e) =>
-																	handleUpdateInclusionField(
-																		inc.id,
-																		"category",
-																		e.target.value,
-																	)
-																}
+																onChange={(e) => handleUpdateInclusionField(inc.id, 'category', e.target.value)}
 															/>
 														</div>
 
@@ -373,18 +324,10 @@ export default function HealthPackageModal({
 																rows={4}
 																placeholder="CBC, LFT, RFT, TSH"
 																value={inc.items}
-																onChange={(e) =>
-																	handleUpdateInclusionField(
-																		inc.id,
-																		"items",
-																		e.target.value,
-																	)
-																}
+																onChange={(e) => handleUpdateInclusionField(inc.id, 'items', e.target.value)}
 															/>
 
-															<p className="text-xs text-muted-foreground">
-																Separate each test using commas
-															</p>
+															<p className="text-xs text-muted-foreground">Separate each test using commas</p>
 														</div>
 													</div>
 												</AccordionContent>
@@ -427,7 +370,7 @@ export default function HealthPackageModal({
 					</Button>
 
 					<Button className="px-10" onClick={onSave}>
-						{editingPackage ? "Save Changes" : "Create Package"}
+						{editingPackage ? 'Save Changes' : 'Create Package'}
 					</Button>
 				</DialogFooter>
 			</DialogContent>

frontend/src/components/PackageInquiriesTab/PackageInquiriesTab.tsx

@@ -1,33 +1,21 @@
-import { useState, useEffect, useCallback } from "react";
-import { getAllInquiriesApi, HealthInquiry } from "@/api/healthCheck";
+import { useState, useEffect, useCallback } from 'react';
+import { getAllInquiriesApi, HealthInquiry } from '@/api/healthCheck';
 
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
-import { Loader2, RefreshCw, ChevronLeft, ChevronRight } from "lucide-react";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Loader2, RefreshCw, ChevronLeft, ChevronRight } from 'lucide-react';
 
 export default function PackageInquiriesTab() {
 	const [inquiries, setInquiries] = useState<HealthInquiry[]>([]);
 	const [loading, setLoading] = useState(true);
 
-	const [filterDate, setFilterDate] = useState("");
-	const [startDate, setStartDate] = useState("");
-	const [endDate, setEndDate] = useState("");
+	const [filterDate, setFilterDate] = useState('');
+	const [startDate, setStartDate] = useState('');
+	const [endDate, setEndDate] = useState('');
 
 	const [currentPage, setCurrentPage] = useState(1);
 	const [itemsPerPage, setItemsPerPage] = useState(10);
@@ -37,18 +25,12 @@ export default function PackageInquiriesTab() {
 	const fetchInquiries = useCallback(async () => {
 		setLoading(true);
 		try {
-			const res = await getAllInquiriesApi(
-				currentPage,
-				itemsPerPage,
-				filterDate,
-				startDate,
-				endDate,
-			);
+			const res = await getAllInquiriesApi(currentPage, itemsPerPage, filterDate, startDate, endDate);
 			setInquiries(res.data || []);
 			setTotalItems(res.pagination?.total || 0);
 			setTotalPages(res.pagination?.totalPages || 1);
 		} catch (err) {
-			console.error("Failed to fetch inquiries", err);
+			console.error('Failed to fetch inquiries', err);
 		} finally {
 			setLoading(false);
 		}
@@ -58,10 +40,7 @@ export default function PackageInquiriesTab() {
 		fetchInquiries();
 	}, [fetchInquiries]);
 
-	const handleFilterChange = (
-		setter: React.Dispatch<React.SetStateAction<string>>,
-		value: string,
-	) => {
+	const handleFilterChange = (setter: React.Dispatch<React.SetStateAction<string>>, value: string) => {
 		setter(value);
 		setCurrentPage(1);
 	};
@@ -76,24 +55,18 @@ export default function PackageInquiriesTab() {
 
 				<div className="flex flex-wrap items-end gap-3">
 					<div className="flex flex-col gap-1">
-						<label className="text-xs font-medium text-muted-foreground">
-							Specific Date
-						</label>
+						<label className="text-xs font-medium text-muted-foreground">Specific Date</label>
 						<Input
 							type="date"
 							value={filterDate}
-							onChange={(e) =>
-								handleFilterChange(setFilterDate, e.target.value)
-							}
+							onChange={(e) => handleFilterChange(setFilterDate, e.target.value)}
 							className="w-[140px] text-sm"
 							disabled={!!startDate || !!endDate}
 						/>
 					</div>
 
 					<div className="flex flex-col gap-1">
-						<label className="text-xs font-medium text-muted-foreground">
-							From
-						</label>
+						<label className="text-xs font-medium text-muted-foreground">From</label>
 						<Input
 							type="date"
 							value={startDate}
@@ -104,9 +77,7 @@ export default function PackageInquiriesTab() {
 					</div>
 
 					<div className="flex flex-col gap-1">
-						<label className="text-xs font-medium text-muted-foreground">
-							To
-						</label>
+						<label className="text-xs font-medium text-muted-foreground">To</label>
 						<Input
 							type="date"
 							value={endDate}
@@ -117,16 +88,15 @@ export default function PackageInquiriesTab() {
 					</div>
 
 					<div className="flex flex-col gap-1">
-						<label className="text-xs font-medium text-muted-foreground">
-							Rows
-						</label>
+						<label className="text-xs font-medium text-muted-foreground">Rows</label>
 						<select
 							value={itemsPerPage}
 							onChange={(e) => {
 								setItemsPerPage(Number(e.target.value));
 								setCurrentPage(1);
 							}}
-							className="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-primary">
+							className="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-primary"
+						>
 							<option value={5}>5 / page</option>
 							<option value={10}>10 / page</option>
 							<option value={20}>20 / page</option>
@@ -135,9 +105,7 @@ export default function PackageInquiriesTab() {
 					</div>
 
 					<Button variant="outline" onClick={fetchInquiries} disabled={loading}>
-						<RefreshCw
-							className={`mr-2 h-4 w-4 ${loading ? "animate-spin" : ""}`}
-						/>
+						<RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
 						Refresh
 					</Button>
 				</div>
@@ -147,21 +115,11 @@ export default function PackageInquiriesTab() {
 					<Table className="w-full min-w-[1000px] table-fixed border-separate border-spacing-0">
 						<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
 							<TableRow>
-								<TableHead className="w-[150px] font-bold bg-background">
-									Requested Date
-								</TableHead>
-								<TableHead className="w-[220px] font-bold bg-background">
-									Patient Details
-								</TableHead>
-								<TableHead className="w-[250px] font-bold bg-background">
-									Requested Package
-								</TableHead>
-								<TableHead className="w-[120px] font-bold bg-background">
-									Age/Gender
-								</TableHead>
-								<TableHead className="w-[250px] font-bold bg-background">
-									Message
-								</TableHead>
+								<TableHead className="w-[150px] font-bold bg-background">Requested Date</TableHead>
+								<TableHead className="w-[220px] font-bold bg-background">Patient Details</TableHead>
+								<TableHead className="w-[250px] font-bold bg-background">Requested Package</TableHead>
+								<TableHead className="w-[120px] font-bold bg-background">Age/Gender</TableHead>
+								<TableHead className="w-[250px] font-bold bg-background">Message</TableHead>
 							</TableRow>
 						</TableHeader>
 						<TableBody>
@@ -173,9 +131,7 @@ export default function PackageInquiriesTab() {
 								</TableRow>
 							) : inquiries.length === 0 ? (
 								<TableRow>
-									<TableCell
-										colSpan={5}
-										className="text-center text-muted-foreground py-10">
+									<TableCell colSpan={5} className="text-center text-muted-foreground py-10">
 										No inquiries found for the selected criteria
 									</TableCell>
 								</TableRow>
@@ -187,23 +143,16 @@ export default function PackageInquiriesTab() {
 												{new Date(inq.preferredDate).toLocaleDateString()}
 											</div>
 											<div className="text-[11px] text-muted-foreground mt-1">
-												Submitted:{" "}
-												{new Date(inq.createdAt).toLocaleDateString()}
+												Submitted: {new Date(inq.createdAt).toLocaleDateString()}
 											</div>
 										</TableCell>
 										<TableCell>
-											<div className="font-semibold text-base">
-												{inq.fullName}
-											</div>
+											<div className="font-semibold text-base">{inq.fullName}</div>
 											<div className="text-sm">{inq.mobileNumber}</div>
-											<div className="text-xs text-muted-foreground">
-												{inq.email || "-"}
-											</div>
+											<div className="text-xs text-muted-foreground">{inq.email || '-'}</div>
 										</TableCell>
 										<TableCell>
-											<div className="font-semibold text-sm truncate">
-												{inq.healthPackage?.name || "N/A"}
-											</div>
+											<div className="font-semibold text-sm truncate">{inq.healthPackage?.name || 'N/A'}</div>
 										</TableCell>
 										<TableCell>
 											<div className="font-medium">
@@ -214,12 +163,12 @@ export default function PackageInquiriesTab() {
 											<Tooltip>
 												<TooltipTrigger asChild>
 													<div className="text-sm italic line-clamp-3 text-muted-foreground whitespace-pre-wrap cursor-pointer">
-														{inq.message || "No message provided."}
+														{inq.message || 'No message provided.'}
 													</div>
 												</TooltipTrigger>
 
 												<TooltipContent className="max-w-md whitespace-pre-wrap">
-													{inq.message || "No message provided."}
+													{inq.message || 'No message provided.'}
 												</TooltipContent>
 											</Tooltip>
 										</TooltipProvider>
@@ -233,9 +182,8 @@ export default function PackageInquiriesTab() {
 				{!loading && totalItems > 0 && (
 					<div className="flex flex-col sm:flex-row items-center justify-between px-2 py-4 border-t gap-4 mt-2">
 						<div className="text-sm text-muted-foreground">
-							Showing{" "}
-							<span className="font-semibold">{indexOfFirstItem + 1}</span> to{" "}
-							<span className="font-semibold">{indexOfLastItem}</span> of{" "}
+							Showing <span className="font-semibold">{indexOfFirstItem + 1}</span> to{' '}
+							<span className="font-semibold">{indexOfLastItem}</span> of{' '}
 							<span className="font-semibold">{totalItems}</span> inquiries
 						</div>
 						<div className="flex items-center gap-6">
@@ -247,20 +195,18 @@ export default function PackageInquiriesTab() {
 									variant="outline"
 									size="icon"
 									className="h-9 w-9"
-									onClick={() =>
-										setCurrentPage((prev) => Math.max(prev - 1, 1))
-									}
-									disabled={currentPage === 1}>
+									onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
+									disabled={currentPage === 1}
+								>
 									<ChevronLeft className="h-4 w-4" />
 								</Button>
 								<Button
 									variant="outline"
 									size="icon"
 									className="h-9 w-9"
-									onClick={() =>
-										setCurrentPage((prev) => Math.min(prev + 1, totalPages))
-									}
-									disabled={currentPage === totalPages || totalPages === 0}>
+									onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
+									disabled={currentPage === totalPages || totalPages === 0}
+								>
 									<ChevronRight className="h-4 w-4" />
 								</Button>
 							</div>

frontend/src/components/ProtectedRoutes/ProtectedRoutes.tsx

@@ -1,8 +1,8 @@
-import {Navigate} from "react-router-dom";
-import {useAuth} from "@/context/AuthContext";
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '@/context/AuthContext';
 
-export default function ProtectedRoute({children}: any) {
-	const {token} = useAuth();
+export default function ProtectedRoute({ children }: any) {
+	const { token } = useAuth();
 
 	if (!token) {
 		return <Navigate to="/" />;

frontend/src/components/SeoFields/SeoFields.tsx

@@ -1,11 +1,11 @@
-import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
+import { BytescaleUploader } from '@/components/BytescaleUploader/BytescaleUploader';
 
-import { Badge } from "@/components/ui/badge";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
 
-import { X } from "lucide-react";
+import { X } from 'lucide-react';
 
 interface SeoData {
 	seoTitle?: string;
@@ -21,15 +21,10 @@ interface SeoFieldsProps {
 	value?: SeoData;
 	onChange: (seo: SeoData) => void;
 	slug?: string;
-	folderPath?: "/seo";
+	folderPath?: '/seo';
 }
 
-export default function SeoFields({
-	value,
-	onChange,
-	slug,
-	folderPath = "/seo",
-}: SeoFieldsProps) {
+export default function SeoFields({ value, onChange, slug, folderPath = '/seo' }: SeoFieldsProps) {
 	const seo = value || {};
 
 	const updateSeo = (field: keyof SeoData, fieldValue: any) => {
@@ -41,8 +36,8 @@ export default function SeoFields({
 
 	const removeTag = (index: number) => {
 		updateSeo(
-			"tags",
-			(seo.tags || []).filter((_, i) => i !== index),
+			'tags',
+			(seo.tags || []).filter((_, i) => i !== index)
 		);
 	};
 
@@ -52,9 +47,7 @@ export default function SeoFields({
 				<div>
 					<h3 className="text-lg font-bold">SEO Settings</h3>
 
-					<p className="text-sm text-muted-foreground">
-						Optimize for Google & social sharing
-					</p>
+					<p className="text-sm text-muted-foreground">Optimize for Google & social sharing</p>
 				</div>
 
 				<Badge variant="secondary">Optional</Badge>
@@ -64,41 +57,33 @@ export default function SeoFields({
 				<div className="flex items-center justify-between">
 					<Label className="text-sm font-semibold">SEO Title</Label>
 
-					<span className="text-xs text-muted-foreground">
-						{seo.seoTitle?.length || 0}/60
-					</span>
+					<span className="text-xs text-muted-foreground">{seo.seoTitle?.length || 0}/60</span>
 				</div>
 
 				<Input
 					placeholder="Best Health Checkup Package in Kochi"
-					value={seo.seoTitle || ""}
-					onChange={(e) => updateSeo("seoTitle", e.target.value)}
+					value={seo.seoTitle || ''}
+					onChange={(e) => updateSeo('seoTitle', e.target.value)}
 				/>
 
-				<p className="text-xs text-muted-foreground">
-					Recommended: 50–60 characters
-				</p>
+				<p className="text-xs text-muted-foreground">Recommended: 50–60 characters</p>
 			</div>
 
 			<div className="space-y-2">
 				<div className="flex items-center justify-between">
 					<Label className="text-sm font-semibold">Meta Description</Label>
 
-					<span className="text-xs text-muted-foreground">
-						{seo.metaDescription?.length || 0}/160
-					</span>
+					<span className="text-xs text-muted-foreground">{seo.metaDescription?.length || 0}/160</span>
 				</div>
 
 				<Textarea
 					rows={4}
 					placeholder="Short description shown in Google search results"
-					value={seo.metaDescription || ""}
-					onChange={(e) => updateSeo("metaDescription", e.target.value)}
+					value={seo.metaDescription || ''}
+					onChange={(e) => updateSeo('metaDescription', e.target.value)}
 				/>
 
-				<p className="text-xs text-muted-foreground">
-					Recommended: 150–160 characters
-				</p>
+				<p className="text-xs text-muted-foreground">Recommended: 150–160 characters</p>
 			</div>
 
 			<div className="space-y-2">
@@ -106,8 +91,8 @@ export default function SeoFields({
 
 				<Input
 					placeholder="health checkup package kochi"
-					value={seo.focusKeyphrase || ""}
-					onChange={(e) => updateSeo("focusKeyphrase", e.target.value)}
+					value={seo.focusKeyphrase || ''}
+					onChange={(e) => updateSeo('focusKeyphrase', e.target.value)}
 				/>
 			</div>
 
@@ -122,11 +107,7 @@ export default function SeoFields({
 						>
 							<span>{tag}</span>
 
-							<button
-								type="button"
-								onClick={() => removeTag(index)}
-								className="hover:text-red-500 transition-colors"
-							>
+							<button type="button" onClick={() => removeTag(index)} className="hover:text-red-500 transition-colors">
 								<X className="h-3 w-3" />
 							</button>
 						</div>
@@ -136,16 +117,16 @@ export default function SeoFields({
 						placeholder="Type keyword and press Enter"
 						className="border-0 shadow-none focus-visible:ring-0 min-w-[220px] flex-1"
 						onKeyDown={(e) => {
-							if (e.key === "Enter" && e.currentTarget.value.trim()) {
+							if (e.key === 'Enter' && e.currentTarget.value.trim()) {
 								e.preventDefault();
 
 								const newTag = e.currentTarget.value.trim();
 
 								if (!(seo.tags || []).includes(newTag)) {
-									updateSeo("tags", [...(seo.tags || []), newTag]);
+									updateSeo('tags', [...(seo.tags || []), newTag]);
 								}
 
-								e.currentTarget.value = "";
+								e.currentTarget.value = '';
 							}
 						}}
 					/>
@@ -159,9 +140,7 @@ export default function SeoFields({
 					<div>
 						<h4 className="font-bold">Open Graph (Social Preview)</h4>
 
-						<p className="text-sm text-muted-foreground">
-							Facebook, WhatsApp & Twitter sharing
-						</p>
+						<p className="text-sm text-muted-foreground">Facebook, WhatsApp & Twitter sharing</p>
 					</div>
 
 					<Badge variant="secondary">Optional</Badge>
@@ -172,13 +151,11 @@ export default function SeoFields({
 
 					<Input
 						placeholder="Title for social sharing"
-						value={seo.ogTitle || ""}
-						onChange={(e) => updateSeo("ogTitle", e.target.value)}
+						value={seo.ogTitle || ''}
+						onChange={(e) => updateSeo('ogTitle', e.target.value)}
 					/>
 
-					<p className="text-xs text-muted-foreground">
-						If empty, SEO title will be used
-					</p>
+					<p className="text-xs text-muted-foreground">If empty, SEO title will be used</p>
 				</div>
 
 				<div className="space-y-2">
@@ -187,22 +164,20 @@ export default function SeoFields({
 					<Textarea
 						rows={4}
 						placeholder="Description for social sharing"
-						value={seo.ogDescription || ""}
-						onChange={(e) => updateSeo("ogDescription", e.target.value)}
+						value={seo.ogDescription || ''}
+						onChange={(e) => updateSeo('ogDescription', e.target.value)}
 					/>
 
-					<p className="text-xs text-muted-foreground">
-						If empty, meta description will be used
-					</p>
+					<p className="text-xs text-muted-foreground">If empty, meta description will be used</p>
 				</div>
 
 				<div className="space-y-2">
 					<Label className="text-sm font-semibold">OG Image</Label>
 
 					<BytescaleUploader
-						value={seo.ogImage || ""}
+						value={seo.ogImage || ''}
 						folderPath={folderPath}
-						onChange={(url) => updateSeo("ogImage", url)}
+						onChange={(url) => updateSeo('ogImage', url)}
 					/>
 				</div>
 			</div>

frontend/src/components/SeoPreview/SeoPreview.tsx

@@ -1,11 +1,5 @@
-import {
-	Dialog,
-	DialogContent,
-	DialogHeader,
-	DialogTitle,
-	DialogFooter,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
 
 interface SeoPreviewData {
 	seo?: {
@@ -28,14 +22,8 @@ interface SeoPreviewProps {
 	title?: string;
 }
 
-export default function SeoPreview({
-	open,
-	onOpenChange,
-	previewData,
-	url,
-	title = "SEO Preview",
-}: SeoPreviewProps) {
-	const previewUrl = url || "https://www.gg-hospital.com";
+export default function SeoPreview({ open, onOpenChange, previewData, url, title = 'SEO Preview' }: SeoPreviewProps) {
+	const previewUrl = url || 'https://www.gg-hospital.com';
 
 	const hasSeoData =
 		!!previewData?.seo &&
@@ -47,27 +35,17 @@ export default function SeoPreview({
 			previewData.seo.metaDescription
 		);
 
-	const imageUrl =
-		previewData?.seo?.ogImage ||
-		"https://placehold.co/1200x630?text=GG+Hospital";
+	const imageUrl = previewData?.seo?.ogImage || 'https://placehold.co/1200x630?text=GG+Hospital';
 
-	const ogTitle =
-		previewData?.seo?.ogTitle || previewData?.seo?.seoTitle || "GG Hospital";
+	const ogTitle = previewData?.seo?.ogTitle || previewData?.seo?.seoTitle || 'GG Hospital';
 
 	const ogDescription =
-		previewData?.seo?.ogDescription ||
-		previewData?.seo?.metaDescription ||
-		"No description available";
+		previewData?.seo?.ogDescription || previewData?.seo?.metaDescription || 'No description available';
 
-	const searchTitle =
-		previewData?.seo?.seoTitle ||
-		previewData?.seo?.ogTitle ||
-		"SEO title preview";
+	const searchTitle = previewData?.seo?.seoTitle || previewData?.seo?.ogTitle || 'SEO title preview';
 
 	const searchDescription =
-		previewData?.seo?.metaDescription ||
-		previewData?.seo?.ogDescription ||
-		"No meta description available";
+		previewData?.seo?.metaDescription || previewData?.seo?.ogDescription || 'No meta description available';
 
 	return (
 		<Dialog open={open} onOpenChange={onOpenChange}>
@@ -91,53 +69,30 @@ export default function SeoPreview({
 								className="block max-w-[560px] overflow-hidden rounded-xl border bg-white shadow-sm transition hover:shadow-md"
 							>
 								<div className="aspect-[1.91/1] overflow-hidden bg-muted">
-									<img
-										src={imageUrl}
-										alt="OG Preview"
-										className="h-full w-full object-cover"
-									/>
+									<img src={imageUrl} alt="OG Preview" className="h-full w-full object-cover" />
 								</div>
 
 								<div className="border-t bg-[#f0f2f5] px-4 py-3">
-									<h3 className="mt-1 line-clamp-2 text-[18px] font-semibold leading-snug text-[#1c1e21]">
-										{ogTitle}
-									</h3>
+									<h3 className="mt-1 line-clamp-2 text-[18px] font-semibold leading-snug text-[#1c1e21]">{ogTitle}</h3>
 
-									<p className="mt-1 line-clamp-2 text-[14px] text-[#65676b]">
-										{ogDescription}
-									</p>
-									<p className="mt-1 truncate text-[11px] tracking-wide text-[#65676b]">
-										{previewUrl}
-									</p>
+									<p className="mt-1 line-clamp-2 text-[14px] text-[#65676b]">{ogDescription}</p>
+									<p className="mt-1 truncate text-[11px] tracking-wide text-[#65676b]">{previewUrl}</p>
 								</div>
 							</a>
 						</div>
 
 						{/* Google Preview */}
 						<div>
-							<p className="mb-4 text-sm font-semibold text-muted-foreground">
-								Google Search Preview
-							</p>
+							<p className="mb-4 text-sm font-semibold text-muted-foreground">Google Search Preview</p>
 
 							<div className="rounded-xl border bg-white p-6">
-								<a
-									href={previewUrl}
-									target="_blank"
-									rel="noopener noreferrer"
-									className="block"
-								>
-									<p className="truncate text-[14px] text-[#202124] hover:underline">
-										{previewUrl}
-									</p>
+								<a href={previewUrl} target="_blank" rel="noopener noreferrer" className="block">
+									<p className="truncate text-[14px] text-[#202124] hover:underline">{previewUrl}</p>
 
-									<h3 className="mt-1 text-[22px] leading-tight text-[#1a0dab] hover:underline">
-										{searchTitle}
-									</h3>
+									<h3 className="mt-1 text-[22px] leading-tight text-[#1a0dab] hover:underline">{searchTitle}</h3>
 								</a>
 
-								<p className="mt-2 line-clamp-3 text-[14px] leading-6 text-[#4d5156]">
-									{searchDescription}
-								</p>
+								<p className="mt-2 line-clamp-3 text-[14px] leading-6 text-[#4d5156]">{searchDescription}</p>
 							</div>
 						</div>
 					</div>

frontend/src/components/layout/Header.tsx

@@ -1,16 +1,16 @@
-import {useState, useEffect} from "react";
-import {useAuth} from "@/context/AuthContext";
-import {Button} from "@/components/ui/button";
-import {Switch} from "@/components/ui/switch";
-import {log} from "console";
+import { useState, useEffect } from 'react';
+import { useAuth } from '@/context/AuthContext';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { log } from 'console';
 
 export default function Header() {
-	const {user, logout} = useAuth();
+	const { user, logout } = useAuth();
 	const [darkMode, setDarkMode] = useState<boolean>(false);
 
 	useEffect(() => {
-		if (darkMode) document.documentElement.classList.add("dark");
-		else document.documentElement.classList.remove("dark");
+		if (darkMode) document.documentElement.classList.add('dark');
+		else document.documentElement.classList.remove('dark');
 	}, [darkMode]);
 
 	return (

frontend/src/components/layout/Sidebar.tsx

@@ -1,55 +1,55 @@
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from 'react-router-dom';
 
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
 
 export default function Sidebar() {
 	const location = useLocation();
 
 	const navItems = [
 		{
-			name: "Department",
-			path: "/department",
+			name: 'Department',
+			path: '/department',
 		},
 		{
-			name: "Doctor",
-			path: "/doctor",
+			name: 'Doctor',
+			path: '/doctor',
 		},
 		{
-			name: "Health Check",
-			path: "/health-check",
+			name: 'Health Check',
+			path: '/health-check',
 		},
 		{
-			name: "Appointments",
-			path: "/appointment",
+			name: 'Appointments',
+			path: '/appointment',
 		},
 		{
-			name: "Career",
-			path: "/career",
+			name: 'Career',
+			path: '/career',
 		},
 		{
-			name: "Candidates",
-			path: "/candidate",
+			name: 'Candidates',
+			path: '/candidate',
 		},
 		{
-			name: "Inquiry",
-			path: "/inquiry",
+			name: 'Inquiry',
+			path: '/inquiry',
 		},
 		{
-			name: "Academics & Research",
-			path: "/academics",
+			name: 'Academics & Research',
+			path: '/academics',
 		},
 		{
-			name: "News & Media",
-			path: "/news",
+			name: 'News & Media',
+			path: '/news',
 		},
 		{
-			name: "Email",
-			path: "/email",
+			name: 'Email',
+			path: '/email',
 		},
 		{
-			name: "Blog",
-			path: "/blog",
+			name: 'Blog',
+			path: '/blog',
 		},
 	];
 
@@ -67,10 +67,7 @@ export default function Sidebar() {
 
 					return (
 						<Link key={item.path} to={item.path}>
-							<Button
-								variant={active ? "secondary" : "ghost"}
-								className="w-full justify-start"
-							>
+							<Button variant={active ? 'secondary' : 'ghost'} className="w-full justify-start">
 								{item.name}
 							</Button>
 						</Link>

frontend/src/components/ui/accordion.tsx

@@ -1,79 +1,61 @@
-import * as React from "react"
-import { Accordion as AccordionPrimitive } from "radix-ui"
+import * as React from 'react';
+import { Accordion as AccordionPrimitive } from 'radix-ui';
 
-import { cn } from "@/lib/utils"
-import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { cn } from '@/lib/utils';
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
 
-function Accordion({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return (
-    <AccordionPrimitive.Root
-      data-slot="accordion"
-      className={cn("flex w-full flex-col", className)}
-      {...props}
-    />
-  )
+function Accordion({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+	return <AccordionPrimitive.Root data-slot="accordion" className={cn('flex w-full flex-col', className)} {...props} />;
 }
 
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("not-last:border-b", className)}
-      {...props}
-    />
-  )
+function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+	return (
+		<AccordionPrimitive.Item data-slot="accordion-item" className={cn('not-last:border-b', className)} {...props} />
+	);
 }
 
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
-        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
+function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+	return (
+		<AccordionPrimitive.Header className="flex">
+			<AccordionPrimitive.Trigger
+				data-slot="accordion-trigger"
+				className={cn(
+					'group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
+					className
+				)}
+				{...props}
+			>
+				{children}
+				<ChevronDownIcon
+					data-slot="accordion-trigger-icon"
+					className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+				/>
+				<ChevronUpIcon
+					data-slot="accordion-trigger-icon"
+					className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+				/>
+			</AccordionPrimitive.Trigger>
+		</AccordionPrimitive.Header>
+	);
 }
 
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
-      {...props}
-    >
-      <div
-        className={cn(
-          "h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
-          className
-        )}
-      >
-        {children}
-      </div>
-    </AccordionPrimitive.Content>
-  )
+function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+	return (
+		<AccordionPrimitive.Content
+			data-slot="accordion-content"
+			className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+			{...props}
+		>
+			<div
+				className={cn(
+					'h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+					className
+				)}
+			>
+				{children}
+			</div>
+		</AccordionPrimitive.Content>
+	);
 }
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

frontend/src/components/ui/badge.tsx

@@ -1,49 +1,40 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary:
-          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive:
-          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-        outline:
-          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost:
-          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
+	'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+				secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+				destructive:
+					'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+				outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+				ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	}
+);
 
 function Badge({
-  className,
-  variant = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "span"
+	className,
+	variant = 'default',
+	asChild = false,
+	...props
+}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot.Root : 'span';
 
-  return (
-    <Comp
-      data-slot="badge"
-      data-variant={variant}
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
+	return (
+		<Comp data-slot="badge" data-variant={variant} className={cn(badgeVariants({ variant }), className)} {...props} />
+	);
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

frontend/src/components/ui/button.tsx

@@ -1,67 +1,65 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost:
-          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-        destructive:
-          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default:
-          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        icon: "size-8",
-        "icon-xs":
-          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm":
-          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-        "icon-lg": "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+	"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+				outline:
+					'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+				secondary:
+					'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+				ghost:
+					'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
+				destructive:
+					'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				icon: 'size-8',
+				'icon-xs':
+					"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+				'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+				'icon-lg': 'size-9',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	}
+);
 
 function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot.Root : "button"
+	className,
+	variant = 'default',
+	size = 'default',
+	asChild = false,
+	...props
+}: React.ComponentProps<'button'> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	const Comp = asChild ? Slot.Root : 'button';
 
-  return (
-    <Comp
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
+	return (
+		<Comp
+			data-slot="button"
+			data-variant={variant}
+			data-size={size}
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

frontend/src/components/ui/card.tsx

@@ -1,103 +1,70 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-function Card({
-  className,
-  size = "default",
-  ...props
-}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
-  return (
-    <div
-      data-slot="card"
-      data-size={size}
-      className={cn(
-        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
-        className
-      )}
-      {...props}
-    />
-  )
+function Card({ className, size = 'default', ...props }: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) {
+	return (
+		<div
+			data-slot="card"
+			data-size={size}
+			className={cn(
+				'group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
-        className
-      )}
-      {...props}
-    />
-  )
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3',
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn(
-        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-title"
+			className={cn('text-base leading-snug font-medium group-data-[size=sm]/card:text-sm', className)}
+			{...props}
+		/>
+	);
 }
 
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div data-slot="card-description" className={cn('text-sm text-muted-foreground', className)} {...props} />;
 }
 
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-action"
+			className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+			{...props}
+		/>
+	);
 }
 
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
-      {...props}
-    />
-  )
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div data-slot="card-content" className={cn('px-4 group-data-[size=sm]/card:px-3', className)} {...props} />;
 }
 
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn(
-        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
-        className
-      )}
-      {...props}
-    />
-  )
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn('flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3', className)}
+			{...props}
+		/>
+	);
 }
 
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

frontend/src/components/ui/command.tsx

@@ -1,193 +1,150 @@
-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
 
-import { cn } from "@/lib/utils"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-import {
-  InputGroup,
-  InputGroupAddon,
-} from "@/components/ui/input-group"
-import { SearchIcon, CheckIcon } from "lucide-react"
+import { cn } from '@/lib/utils';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { InputGroup, InputGroupAddon } from '@/components/ui/input-group';
+import { SearchIcon, CheckIcon } from 'lucide-react';
 
-function Command({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+	return (
+		<CommandPrimitive
+			data-slot="command"
+			className={cn(
+				'flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground',
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function CommandDialog({
-  title = "Command Palette",
-  description = "Search for a command to run...",
-  children,
-  className,
-  showCloseButton = false,
-  ...props
+	title = 'Command Palette',
+	description = 'Search for a command to run...',
+	children,
+	className,
+	showCloseButton = false,
+	...props
 }: React.ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-  className?: string
-  showCloseButton?: boolean
+	title?: string;
+	description?: string;
+	className?: string;
+	showCloseButton?: boolean;
 }) {
-  return (
-    <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent
-        className={cn(
-          "top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",
-          className
-        )}
-        showCloseButton={showCloseButton}
-      >
-        {children}
-      </DialogContent>
-    </Dialog>
-  )
+	return (
+		<Dialog {...props}>
+			<DialogHeader className="sr-only">
+				<DialogTitle>{title}</DialogTitle>
+				<DialogDescription>{description}</DialogDescription>
+			</DialogHeader>
+			<DialogContent
+				className={cn('top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0', className)}
+				showCloseButton={showCloseButton}
+			>
+				{children}
+			</DialogContent>
+		</Dialog>
+	);
 }
 
-function CommandInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
-  return (
-    <div data-slot="command-input-wrapper" className="p-1 pb-0">
-      <InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
-        <CommandPrimitive.Input
-          data-slot="command-input"
-          className={cn(
-            "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-            className
-          )}
-          {...props}
-        />
-        <InputGroupAddon>
-          <SearchIcon className="size-4 shrink-0 opacity-50" />
-        </InputGroupAddon>
-      </InputGroup>
-    </div>
-  )
+function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
+	return (
+		<div data-slot="command-input-wrapper" className="p-1 pb-0">
+			<InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+				<CommandPrimitive.Input
+					data-slot="command-input"
+					className={cn('w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', className)}
+					{...props}
+				/>
+				<InputGroupAddon>
+					<SearchIcon className="size-4 shrink-0 opacity-50" />
+				</InputGroupAddon>
+			</InputGroup>
+		</div>
+	);
 }
 
-function CommandList({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
-  return (
-    <CommandPrimitive.List
-      data-slot="command-list"
-      className={cn(
-        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
-        className
-      )}
-      {...props}
-    />
-  )
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+	return (
+		<CommandPrimitive.List
+			data-slot="command-list"
+			className={cn('no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none', className)}
+			{...props}
+		/>
+	);
 }
 
-function CommandEmpty({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="command-empty"
-      className={cn("py-6 text-center text-sm", className)}
-      {...props}
-    />
-  )
+function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+	return (
+		<CommandPrimitive.Empty
+			data-slot="command-empty"
+			className={cn('py-6 text-center text-sm', className)}
+			{...props}
+		/>
+	);
 }
 
-function CommandGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
-  return (
-    <CommandPrimitive.Group
-      data-slot="command-group"
-      className={cn(
-        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
+function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
+	return (
+		<CommandPrimitive.Group
+			data-slot="command-group"
+			className={cn(
+				'overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground',
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-function CommandSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-  return (
-    <CommandPrimitive.Separator
-      data-slot="command-separator"
-      className={cn("-mx-1 h-px bg-border", className)}
-      {...props}
-    />
-  )
+function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+	return (
+		<CommandPrimitive.Separator
+			data-slot="command-separator"
+			className={cn('-mx-1 h-px bg-border', className)}
+			{...props}
+		/>
+	);
 }
 
-function CommandItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return (
-    <CommandPrimitive.Item
-      data-slot="command-item"
-      className={cn(
-        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
-    </CommandPrimitive.Item>
-  )
+function CommandItem({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+	return (
+		<CommandPrimitive.Item
+			data-slot="command-item"
+			className={cn(
+				"group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+				className
+			)}
+			{...props}
+		>
+			{children}
+			<CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+		</CommandPrimitive.Item>
+	);
 }
 
-function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
+function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+	return (
+		<span
+			data-slot="command-shortcut"
+			className={cn(
+				'ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground',
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
+};

frontend/src/components/ui/dialog.tsx

@@ -1,166 +1,135 @@
-import * as React from "react"
-import { Dialog as DialogPrimitive } from "radix-ui"
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from 'radix-ui';
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { XIcon } from "lucide-react"
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { XIcon } from 'lucide-react';
 
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
-        className
-      )}
-      {...props}
-    />
-  )
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+	return (
+		<DialogPrimitive.Overlay
+			data-slot="dialog-overlay"
+			className={cn(
+				'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
+	className,
+	children,
+	showCloseButton = true,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
+	showCloseButton?: boolean;
 }) {
-  return (
-    <DialogPortal>
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close data-slot="dialog-close" asChild>
-            <Button
-              variant="ghost"
-              className="absolute top-2 right-2"
-              size="icon-sm"
-            >
-              <XIcon
-              />
-              <span className="sr-only">Close</span>
-            </Button>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
+	return (
+		<DialogPortal>
+			<DialogOverlay />
+			<DialogPrimitive.Content
+				data-slot="dialog-content"
+				className={cn(
+					'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+					className
+				)}
+				{...props}
+			>
+				{children}
+				{showCloseButton && (
+					<DialogPrimitive.Close data-slot="dialog-close" asChild>
+						<Button variant="ghost" className="absolute top-2 right-2" size="icon-sm">
+							<XIcon />
+							<span className="sr-only">Close</span>
+						</Button>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
-  )
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div data-slot="dialog-header" className={cn('flex flex-col gap-2', className)} {...props} />;
 }
 
 function DialogFooter({
-  className,
-  showCloseButton = false,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & {
-  showCloseButton?: boolean
+	className,
+	showCloseButton = false,
+	children,
+	...props
+}: React.ComponentProps<'div'> & {
+	showCloseButton?: boolean;
 }) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {showCloseButton && (
-        <DialogPrimitive.Close asChild>
-          <Button variant="outline">Close</Button>
-        </DialogPrimitive.Close>
-      )}
-    </div>
-  )
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn(
+				'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
+				className
+			)}
+			{...props}
+		>
+			{children}
+			{showCloseButton && (
+				<DialogPrimitive.Close asChild>
+					<Button variant="outline">Close</Button>
+				</DialogPrimitive.Close>
+			)}
+		</div>
+	);
 }
 
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn(
-        "text-base leading-none font-medium",
-        className
-      )}
-      {...props}
-    />
-  )
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+	return (
+		<DialogPrimitive.Title
+			data-slot="dialog-title"
+			className={cn('text-base leading-none font-medium', className)}
+			{...props}
+		/>
+	);
 }
 
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn(
-        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn(
+				'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};

frontend/src/components/ui/input-group.tsx

@@ -1,156 +1,135 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
 
-function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="input-group"
-      role="group"
-      className={cn(
-        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
-        className
-      )}
-      {...props}
-    />
-  )
+function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="input-group"
+			role="group"
+			className={cn(
+				'group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      align: {
-        "inline-start":
-          "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
-        "inline-end":
-          "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
-        "block-start":
-          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
-        "block-end":
-          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
-      },
-    },
-    defaultVariants: {
-      align: "inline-start",
-    },
-  }
-)
+	"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+	{
+		variants: {
+			align: {
+				'inline-start': 'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',
+				'inline-end': 'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',
+				'block-start':
+					'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',
+				'block-end': 'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',
+			},
+		},
+		defaultVariants: {
+			align: 'inline-start',
+		},
+	}
+);
 
 function InputGroupAddon({
-  className,
-  align = "inline-start",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="input-group-addon"
-      data-align={align}
-      className={cn(inputGroupAddonVariants({ align }), className)}
-      onClick={(e) => {
-        if ((e.target as HTMLElement).closest("button")) {
-          return
-        }
-        e.currentTarget.parentElement?.querySelector("input")?.focus()
-      }}
-      {...props}
-    />
-  )
+	className,
+	align = 'inline-start',
+	...props
+}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
+	return (
+		<div
+			role="group"
+			data-slot="input-group-addon"
+			data-align={align}
+			className={cn(inputGroupAddonVariants({ align }), className)}
+			onClick={(e) => {
+				if ((e.target as HTMLElement).closest('button')) {
+					return;
+				}
+				e.currentTarget.parentElement?.querySelector('input')?.focus();
+			}}
+			{...props}
+		/>
+	);
 }
 
-const inputGroupButtonVariants = cva(
-  "flex items-center gap-2 text-sm shadow-none",
-  {
-    variants: {
-      size: {
-        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-        sm: "",
-        "icon-xs":
-          "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
-      },
-    },
-    defaultVariants: {
-      size: "xs",
-    },
-  }
-)
+const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
+	variants: {
+		size: {
+			xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+			sm: '',
+			'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
+			'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+		},
+	},
+	defaultVariants: {
+		size: 'xs',
+	},
+});
 
 function InputGroupButton({
-  className,
-  type = "button",
-  variant = "ghost",
-  size = "xs",
-  ...props
-}: Omit<React.ComponentProps<typeof Button>, "size"> &
-  VariantProps<typeof inputGroupButtonVariants>) {
-  return (
-    <Button
-      type={type}
-      data-size={size}
-      variant={variant}
-      className={cn(inputGroupButtonVariants({ size }), className)}
-      {...props}
-    />
-  )
+	className,
+	type = 'button',
+	variant = 'ghost',
+	size = 'xs',
+	...props
+}: Omit<React.ComponentProps<typeof Button>, 'size'> & VariantProps<typeof inputGroupButtonVariants>) {
+	return (
+		<Button
+			type={type}
+			data-size={size}
+			variant={variant}
+			className={cn(inputGroupButtonVariants({ size }), className)}
+			{...props}
+		/>
+	);
 }
 
-function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      className={cn(
-        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
+function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
+	return (
+		<span
+			className={cn(
+				"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-function InputGroupInput({
-  className,
-  ...props
-}: React.ComponentProps<"input">) {
-  return (
-    <Input
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
-        className
-      )}
-      {...props}
-    />
-  )
+function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {
+	return (
+		<Input
+			data-slot="input-group-control"
+			className={cn(
+				'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-function InputGroupTextarea({
-  className,
-  ...props
-}: React.ComponentProps<"textarea">) {
-  return (
-    <Textarea
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
-        className
-      )}
-      {...props}
-    />
-  )
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+	return (
+		<Textarea
+			data-slot="input-group-control"
+			className={cn(
+				'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-export {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupText,
-  InputGroupInput,
-  InputGroupTextarea,
-}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea };

frontend/src/components/ui/input.tsx

@@ -1,19 +1,19 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-        className
-      )}
-      {...props}
-    />
-  )
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+	return (
+		<input
+			type={type}
+			data-slot="input"
+			className={cn(
+				'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-export { Input }
+export { Input };

frontend/src/components/ui/label.tsx

@@ -1,22 +1,19 @@
-import * as React from "react"
-import { Label as LabelPrimitive } from "radix-ui"
+import * as React from 'react';
+import { Label as LabelPrimitive } from 'radix-ui';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return (
+		<LabelPrimitive.Root
+			data-slot="label"
+			className={cn(
+				'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-export { Label }
+export { Label };

frontend/src/components/ui/popover.tsx

@@ -1,87 +1,52 @@
-import * as React from "react"
-import { Popover as PopoverPrimitive } from "radix-ui"
+import * as React from 'react';
+import { Popover as PopoverPrimitive } from 'radix-ui';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+	return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
 function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
+	className,
+	align = 'center',
+	sideOffset = 4,
+	...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  )
+	return (
+		<PopoverPrimitive.Portal>
+			<PopoverPrimitive.Content
+				data-slot="popover-content"
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					'z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+					className
+				)}
+				{...props}
+			/>
+		</PopoverPrimitive.Portal>
+	);
 }
 
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+	return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
-function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="popover-header"
-      className={cn("flex flex-col gap-0.5 text-sm", className)}
-      {...props}
-    />
-  )
+function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div data-slot="popover-header" className={cn('flex flex-col gap-0.5 text-sm', className)} {...props} />;
 }
 
-function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
-  return (
-    <div
-      data-slot="popover-title"
-      className={cn("font-medium", className)}
-      {...props}
-    />
-  )
+function PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>) {
+	return <div data-slot="popover-title" className={cn('font-medium', className)} {...props} />;
 }
 
-function PopoverDescription({
-  className,
-  ...props
-}: React.ComponentProps<"p">) {
-  return (
-    <p
-      data-slot="popover-description"
-      className={cn("text-muted-foreground", className)}
-      {...props}
-    />
-  )
+function PopoverDescription({ className, ...props }: React.ComponentProps<'p'>) {
+	return <p data-slot="popover-description" className={cn('text-muted-foreground', className)} {...props} />;
 }
 
-export {
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger,
-}
+export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

frontend/src/components/ui/scroll-area.tsx

@@ -1,53 +1,45 @@
-import * as React from "react"
-import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
+import * as React from 'react';
+import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-function ScrollArea({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-  return (
-    <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
-      className={cn("relative", className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  )
+function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+	return (
+		<ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn('relative', className)} {...props}>
+			<ScrollAreaPrimitive.Viewport
+				data-slot="scroll-area-viewport"
+				className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+			>
+				{children}
+			</ScrollAreaPrimitive.Viewport>
+			<ScrollBar />
+			<ScrollAreaPrimitive.Corner />
+		</ScrollAreaPrimitive.Root>
+	);
 }
 
 function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
+	className,
+	orientation = 'vertical',
+	...props
 }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
-  return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot="scroll-area-scrollbar"
-      data-orientation={orientation}
-      orientation={orientation}
-      className={cn(
-        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
-        className
-      )}
-      {...props}
-    >
-      <ScrollAreaPrimitive.ScrollAreaThumb
-        data-slot="scroll-area-thumb"
-        className="relative flex-1 rounded-full bg-border"
-      />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  )
+	return (
+		<ScrollAreaPrimitive.ScrollAreaScrollbar
+			data-slot="scroll-area-scrollbar"
+			data-orientation={orientation}
+			orientation={orientation}
+			className={cn(
+				'flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent',
+				className
+			)}
+			{...props}
+		>
+			<ScrollAreaPrimitive.ScrollAreaThumb
+				data-slot="scroll-area-thumb"
+				className="relative flex-1 rounded-full bg-border"
+			/>
+		</ScrollAreaPrimitive.ScrollAreaScrollbar>
+	);
 }
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };

frontend/src/components/ui/select.tsx

@@ -1,190 +1,167 @@
-import * as React from "react"
-import { Select as SelectPrimitive } from "radix-ui"
+import * as React from 'react';
+import { Select as SelectPrimitive } from 'radix-ui';
 
-import { cn } from "@/lib/utils"
-import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+import { cn } from '@/lib/utils';
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react';
 
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+	return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 
-function SelectGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return (
-    <SelectPrimitive.Group
-      data-slot="select-group"
-      className={cn("scroll-my-1 p-1", className)}
-      {...props}
-    />
-  )
+function SelectGroup({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+	return <SelectPrimitive.Group data-slot="select-group" className={cn('scroll-my-1 p-1', className)} {...props} />;
 }
 
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+	return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
 function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
+	className,
+	size = 'default',
+	children,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
+	size?: 'sm' | 'default';
 }) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
+	return (
+		<SelectPrimitive.Trigger
+			data-slot="select-trigger"
+			data-size={size}
+			className={cn(
+				"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		>
+			{children}
+			<SelectPrimitive.Icon asChild>
+				<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+			</SelectPrimitive.Icon>
+		</SelectPrimitive.Trigger>
+	);
 }
 
 function SelectContent({
-  className,
-  children,
-  position = "item-aligned",
-  align = "center",
-  ...props
+	className,
+	children,
+	position = 'item-aligned',
+	align = 'center',
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        data-align-trigger={position === "item-aligned"}
-        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
-        position={position}
-        align={align}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          data-position={position}
-          className={cn(
-            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
-            position === "popper" && ""
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
+	return (
+		<SelectPrimitive.Portal>
+			<SelectPrimitive.Content
+				data-slot="select-content"
+				data-align-trigger={position === 'item-aligned'}
+				className={cn(
+					'relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+					position === 'popper' &&
+						'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+					className
+				)}
+				position={position}
+				align={align}
+				{...props}
+			>
+				<SelectScrollUpButton />
+				<SelectPrimitive.Viewport
+					data-position={position}
+					className={cn(
+						'data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)',
+						position === 'popper' && ''
+					)}
+				>
+					{children}
+				</SelectPrimitive.Viewport>
+				<SelectScrollDownButton />
+			</SelectPrimitive.Content>
+		</SelectPrimitive.Portal>
+	);
 }
 
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
-      {...props}
-    />
-  )
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+	return (
+		<SelectPrimitive.Label
+			data-slot="select-label"
+			className={cn('px-1.5 py-1 text-xs text-muted-foreground', className)}
+			{...props}
+		/>
+	);
 }
 
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="pointer-events-none" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
+function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
+	return (
+		<SelectPrimitive.Item
+			data-slot="select-item"
+			className={cn(
+				"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				className
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+				<SelectPrimitive.ItemIndicator>
+					<CheckIcon className="pointer-events-none" />
+				</SelectPrimitive.ItemIndicator>
+			</span>
+			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+		</SelectPrimitive.Item>
+	);
 }
 
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
-      {...props}
-    />
-  )
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+	return (
+		<SelectPrimitive.Separator
+			data-slot="select-separator"
+			className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
+			{...props}
+		/>
+	);
 }
 
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon
-      />
-    </SelectPrimitive.ScrollUpButton>
-  )
+function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+	return (
+		<SelectPrimitive.ScrollUpButton
+			data-slot="select-scroll-up-button"
+			className={cn(
+				"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		>
+			<ChevronUpIcon />
+		</SelectPrimitive.ScrollUpButton>
+	);
 }
 
 function SelectScrollDownButton({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon
-      />
-    </SelectPrimitive.ScrollDownButton>
-  )
+	return (
+		<SelectPrimitive.ScrollDownButton
+			data-slot="select-scroll-down-button"
+			className={cn(
+				"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		>
+			<ChevronDownIcon />
+		</SelectPrimitive.ScrollDownButton>
+	);
 }
 
 export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+};

frontend/src/components/ui/separator.tsx

@@ -1,26 +1,26 @@
-import * as React from "react"
-import { Separator as SeparatorPrimitive } from "radix-ui"
+import * as React from 'react';
+import { Separator as SeparatorPrimitive } from 'radix-ui';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
+	className,
+	orientation = 'horizontal',
+	decorative = true,
+	...props
 }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<SeparatorPrimitive.Root
+			data-slot="separator"
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				'shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-export { Separator }
+export { Separator };

frontend/src/components/ui/switch.tsx

@@ -1,22 +1,22 @@
-import * as React from "react";
-import {Switch as SwitchPrimitive} from "radix-ui";
+import * as React from 'react';
+import { Switch as SwitchPrimitive } from 'radix-ui';
 
-import {cn} from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
 function Switch({
 	className,
-	size = "default",
+	size = 'default',
 	...props
 }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
-	size?: "sm" | "default";
+	size?: 'sm' | 'default';
 }) {
 	return (
 		<SwitchPrimitive.Root
 			data-slot="switch"
 			data-size={size}
 			className={cn(
-				"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
-				className,
+				'peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50',
+				className
 			)}
 			{...props}
 		>
@@ -28,4 +28,4 @@ function Switch({
 	);
 }
 
-export {Switch};
+export { Switch };

frontend/src/components/ui/table.tsx

@@ -1,114 +1,70 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-function Table({ className, ...props }: React.ComponentProps<"table">) {
-  return (
-    <div
-      data-slot="table-container"
-      className="relative w-full overflow-x-auto"
-    >
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-      />
-    </div>
-  )
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+	return (
+		<div data-slot="table-container" className="relative w-full overflow-x-auto">
+			<table data-slot="table" className={cn('w-full caption-bottom text-sm', className)} {...props} />
+		</div>
+	);
 }
 
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
-      {...props}
-    />
-  )
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+	return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />;
 }
 
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  )
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+	return <tbody data-slot="table-body" className={cn('[&_tr:last-child]:border-0', className)} {...props} />;
 }
 
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn(
-        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-        className
-      )}
-      {...props}
-    />
-  )
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+	return (
+		<tfoot
+			data-slot="table-footer"
+			className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+			{...props}
+		/>
+	);
 }
 
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-        className
-      )}
-      {...props}
-    />
-  )
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+	return (
+		<tr
+			data-slot="table-row"
+			className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
+			{...props}
+		/>
+	);
 }
 
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
-        className
-      )}
-      {...props}
-    />
-  )
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+	return (
+		<th
+			data-slot="table-head"
+			className={cn(
+				'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0',
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
-        className
-      )}
-      {...props}
-    />
-  )
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+	return (
+		<td
+			data-slot="table-cell"
+			className={cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}
+			{...props}
+		/>
+	);
 }
 
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn("mt-4 text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
+function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
+	return (
+		<caption data-slot="table-caption" className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
+	);
 }
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

frontend/src/components/ui/tabs.tsx

@@ -1,88 +1,74 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Tabs as TabsPrimitive } from "radix-ui"
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Tabs as TabsPrimitive } from 'radix-ui';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-function Tabs({
-  className,
-  orientation = "horizontal",
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      data-orientation={orientation}
-      className={cn(
-        "group/tabs flex gap-2 data-horizontal:flex-col",
-        className
-      )}
-      {...props}
-    />
-  )
+function Tabs({ className, orientation = 'horizontal', ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+	return (
+		<TabsPrimitive.Root
+			data-slot="tabs"
+			data-orientation={orientation}
+			className={cn('group/tabs flex gap-2 data-horizontal:flex-col', className)}
+			{...props}
+		/>
+	);
 }
 
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-muted",
-        line: "gap-1 bg-transparent",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
+	'group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none',
+	{
+		variants: {
+			variant: {
+				default: 'bg-muted',
+				line: 'gap-1 bg-transparent',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	}
+);
 
 function TabsList({
-  className,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.List> &
-  VariantProps<typeof tabsListVariants>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      data-variant={variant}
-      className={cn(tabsListVariants({ variant }), className)}
-      {...props}
-    />
-  )
+	className,
+	variant = 'default',
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
+	return (
+		<TabsPrimitive.List
+			data-slot="tabs-list"
+			data-variant={variant}
+			className={cn(tabsListVariants({ variant }), className)}
+			{...props}
+		/>
+	);
 }
 
-function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
-      className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
-        className
-      )}
-      {...props}
-    />
-  )
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+	return (
+		<TabsPrimitive.Trigger
+			data-slot="tabs-trigger"
+			className={cn(
+				"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+				'data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground',
+				'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-function TabsContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  return (
-    <TabsPrimitive.Content
-      data-slot="tabs-content"
-      className={cn("flex-1 text-sm outline-none", className)}
-      {...props}
-    />
-  )
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+	return (
+		<TabsPrimitive.Content
+			data-slot="tabs-content"
+			className={cn('flex-1 text-sm outline-none', className)}
+			{...props}
+		/>
+	);
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

frontend/src/components/ui/textarea.tsx

@@ -1,18 +1,18 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-        className
-      )}
-      {...props}
-    />
-  )
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+	return (
+		<textarea
+			data-slot="textarea"
+			className={cn(
+				'flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-export { Textarea }
+export { Textarea };

frontend/src/components/ui/tooltip.tsx

@@ -1,55 +1,42 @@
-import * as React from "react"
-import { Tooltip as TooltipPrimitive } from "radix-ui"
+import * as React from 'react';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  )
+function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
 }
 
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
 }
 
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
 function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
+	className,
+	sideOffset = 0,
+	children,
+	...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  )
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					'z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+					className
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
 }
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };