Refactor: Break down single table component into multiple modular components

src/components/delete-dialog.tsx

@@ -0,0 +1,30 @@
+import {
+	Dialog,
+	DialogTitle,
+	DialogTrigger,
+	DialogContent,
+	DialogHeader,
+	DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+
+interface DeleteDialogProps {
+	onConfirm: () => void;
+}
+
+const DeleteDialog: React.FC<DeleteDialogProps> = ({ onConfirm }) => (
+	<Dialog>
+		<DialogTrigger asChild>
+			<Button variant="destructive">Delete</Button>
+		</DialogTrigger>
+		<DialogContent>
+			<DialogTitle>Delete Row</DialogTitle>
+			<DialogHeader>Are you sure you want to delete this row?</DialogHeader>
+			<DialogFooter>
+				<Button onClick={onConfirm}>Yes, delete</Button>
+			</DialogFooter>
+		</DialogContent>
+	</Dialog>
+);
+
+export default DeleteDialog;

src/components/header.tsx

@@ -0,0 +1,17 @@
+import { Button } from "@/components/ui/button";
+
+interface AppHeaderProps {
+	isEditing: boolean;
+	setIsEditing: (value: boolean) => void;
+}
+
+const Header: React.FC<AppHeaderProps> = ({ isEditing, setIsEditing }) => (
+	<div className="flex justify-between items-center mb-6">
+		<h1 className="text-3xl font-bold">Budgetable</h1>
+		<Button variant="ghost" onClick={() => setIsEditing(!isEditing)}>
+			{isEditing ? "Lock" : "Unlock"} Editing
+		</Button>
+	</div>
+);
+
+export default Header;

src/components/loading-skeleton.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+const LoadingSkeleton: React.FC = () => <Skeleton className="h-10 w-full" />;
+
+export default LoadingSkeleton;

src/components/status-badge.tsx

@@ -0,0 +1,18 @@
+import { Badge } from "@/components/ui/badge";
+
+interface StatusBadgeProps {
+	status: "Paid" | "Unpaid";
+	toggleStatus: () => void;
+}
+
+const StatusBadge: React.FC<StatusBadgeProps> = ({ status, toggleStatus }) => (
+	<Badge
+		variant={status === "Paid" ? "destructive" : "secondary"}
+		className="cursor-pointer"
+		onClick={toggleStatus}
+	>
+		{status}
+	</Badge>
+);
+
+export default StatusBadge;

src/components/table-new-row.tsx

@@ -0,0 +1,67 @@
+import { TableRow, TableCell } from "@/components/ui/table";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+interface Budgetable {
+	id: string;
+	title: string;
+	price: number;
+	link: string;
+	note?: string;
+	status: "Paid" | "Unpaid";
+}
+
+interface TNewRowProps {
+	newRow: Budgetable;
+	setNewRow: React.Dispatch<React.SetStateAction<Budgetable>>;
+	handleAddRow: () => Promise<void>;
+}
+
+const TNewRow: React.FC<TNewRowProps> = ({
+	newRow,
+	setNewRow,
+	handleAddRow,
+}) => (
+	<TableRow>
+		<TableCell>
+			<Input
+				placeholder="New title"
+				value={newRow.title}
+				onChange={(e) => setNewRow({ ...newRow, title: e.target.value })}
+			/>
+		</TableCell>
+		<TableCell>
+			<Input
+				type="number"
+				placeholder="New price"
+				value={newRow.price || ""}
+				onChange={(e) =>
+					setNewRow({
+						...newRow,
+						price: Number.parseFloat(e.target.value) || 0,
+					})
+				}
+			/>
+		</TableCell>
+		<TableCell>
+			<Input
+				placeholder="New link"
+				value={newRow.link}
+				onChange={(e) => setNewRow({ ...newRow, link: e.target.value })}
+			/>
+		</TableCell>
+		<TableCell>
+			<Input
+				placeholder="New note"
+				value={newRow.note || ""}
+				onChange={(e) => setNewRow({ ...newRow, note: e.target.value })}
+			/>
+		</TableCell>
+		<TableCell />
+		<TableCell>
+			<Button onClick={handleAddRow}>Add</Button>
+		</TableCell>
+	</TableRow>
+);
+
+export default TNewRow;

src/components/table-row.tsx

@@ -0,0 +1,134 @@
+import { Input } from "@/components/ui/input";
+import { TableRow, TableCell } from "@/components/ui/table";
+import Link from "next/link";
+import StatusBadge from "@/components/status-badge";
+import DeleteDialog from "@/components/delete-dialog";
+
+interface Budgetable {
+	id: string;
+	title: string;
+	price: number;
+	link: string;
+	note?: string;
+	status: "Paid" | "Unpaid";
+}
+
+interface TRowProps {
+	row: Budgetable;
+	isEditing: boolean;
+	setData: React.Dispatch<React.SetStateAction<Budgetable[]>>;
+	recentlyUpdatedRowId: string | null;
+	handleSave: (
+		updatedRow: Budgetable,
+		originalRow: Budgetable,
+	) => Promise<void>;
+	handleDeleteRow: (id: string) => Promise<void>;
+	toggleStatus: (row: Budgetable) => Promise<void>;
+}
+
+const TRow: React.FC<TRowProps> = ({
+	row,
+	isEditing,
+	setData,
+	recentlyUpdatedRowId,
+	handleSave,
+	handleDeleteRow,
+	toggleStatus,
+}) => (
+	<TableRow
+		className={`transition-opacity ${
+			recentlyUpdatedRowId === row.id ? "blur-sm opacity-50" : ""
+		}`}
+	>
+		<TableCell>
+			{isEditing ? (
+				<Input
+					value={row.title}
+					onChange={(e) =>
+						setData((prev) =>
+							prev.map((item) =>
+								item.id === row.id ? { ...item, title: e.target.value } : item,
+							),
+						)
+					}
+					onBlur={() => handleSave(row, { ...row })}
+				/>
+			) : (
+				<span>{row.title}</span>
+			)}
+		</TableCell>
+		<TableCell>
+			{isEditing ? (
+				<Input
+					type="number"
+					value={row.price}
+					onChange={(e) =>
+						setData((prev) =>
+							prev.map((item) =>
+								item.id === row.id
+									? { ...item, price: Number.parseFloat(e.target.value) || 0 }
+									: item,
+							),
+						)
+					}
+					onBlur={() => handleSave(row, { ...row })}
+				/>
+			) : (
+				<span>{row.price.toLocaleString()} HUF</span>
+			)}
+		</TableCell>
+		<TableCell>
+			{isEditing ? (
+				<Input
+					value={row.link}
+					onChange={(e) =>
+						setData((prev) =>
+							prev.map((item) =>
+								item.id === row.id ? { ...item, link: e.target.value } : item,
+							),
+						)
+					}
+					onBlur={() => handleSave(row, { ...row })}
+				/>
+			) : row.link ? (
+				<Link
+					href={row.link}
+					target="_blank"
+					rel="noopener noreferrer"
+					className="text-blue-500 underline"
+				>
+					Visit
+				</Link>
+			) : (
+				<span className="text-gray-400 italic">No link</span>
+			)}
+		</TableCell>
+		<TableCell>
+			{isEditing ? (
+				<Input
+					value={row.note || ""}
+					onChange={(e) =>
+						setData((prev) =>
+							prev.map((item) =>
+								item.id === row.id ? { ...item, note: e.target.value } : item,
+							),
+						)
+					}
+					onBlur={() => handleSave(row, { ...row })}
+				/>
+			) : (
+				<span>{row.note || "-"}</span>
+			)}
+		</TableCell>
+		<TableCell>
+			<StatusBadge status={row.status} toggleStatus={() => toggleStatus(row)} />
+		</TableCell>
+		{isEditing && (
+			<TableCell>
+				<DeleteDialog onConfirm={() => handleDeleteRow(row.id)} />
+			</TableCell>
+		)}
+	</TableRow>
+);
+
+export default TRow;

src/components/table-wrapper.tsx

@@ -0,0 +1,83 @@
+import {
+	Table,
+	TableBody,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import TRow from "@/components/table-row";
+import TNewRow from "@/components/table-new-row";
+
+interface Budgetable {
+	id: string;
+	title: string;
+	price: number;
+	link: string;
+	note?: string;
+	status: "Paid" | "Unpaid";
+}
+
+interface TWrapperProps {
+	data: Budgetable[];
+	isEditing: boolean;
+	setData: React.Dispatch<React.SetStateAction<Budgetable[]>>;
+	newRow: Budgetable;
+	setNewRow: React.Dispatch<React.SetStateAction<Budgetable>>;
+	recentlyUpdatedRowId: string | null;
+	handleSave: (
+		updatedRow: Budgetable,
+		originalRow: Budgetable,
+	) => Promise<void>;
+	handleAddRow: () => Promise<void>;
+	handleDeleteRow: (id: string) => Promise<void>;
+	toggleStatus: (row: Budgetable) => Promise<void>;
+}
+
+const TWrapper: React.FC<TWrapperProps> = ({
+	data,
+	isEditing,
+	setData,
+	newRow,
+	setNewRow,
+	recentlyUpdatedRowId,
+	handleSave,
+	handleAddRow,
+	handleDeleteRow,
+	toggleStatus,
+}) => (
+	<Table>
+		<TableHeader>
+			<TableRow>
+				<TableHead>Title</TableHead>
+				<TableHead>Price</TableHead>
+				<TableHead>Link</TableHead>
+				<TableHead>Note</TableHead>
+				<TableHead>Status</TableHead>
+				{isEditing && <TableHead>Actions</TableHead>}
+			</TableRow>
+		</TableHeader>
+		<TableBody>
+			{data.map((row) => (
+				<TRow
+					key={row.id}
+					row={row}
+					isEditing={isEditing}
+					setData={setData}
+					recentlyUpdatedRowId={recentlyUpdatedRowId}
+					handleSave={handleSave}
+					handleDeleteRow={handleDeleteRow}
+					toggleStatus={toggleStatus}
+				/>
+			))}
+			{isEditing && (
+				<TNewRow
+					newRow={newRow}
+					setNewRow={setNewRow}
+					handleAddRow={handleAddRow}
+				/>
+			)}
+		</TableBody>
+	</Table>
+);
+
+export default TWrapper;

src/components/table.tsx

@@ -1,340 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle } from "@/components/ui/dialog";
-import { Badge } from "@/components/ui/badge";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { toast } from "sonner";
-import Link from "next/link";
-
-interface Budgetable {
-  id: string;
-  title: string;
-  price: number;
-  link: string;
-  note?: string;
-  status: "Paid" | "Unpaid";
-}
-
-const TableComponent = () => {
-  const [data, setData] = useState<Budgetable[]>([]);
-  const [newRow, setNewRow] = useState<Budgetable>({
-    id: "",
-    title: "",
-    price: 0,
-    link: "",
-    note: "",
-    status: "Unpaid",
-  });
-  const [recentlyUpdatedRowId, setRecentlyUpdatedRowId] = useState<string | null>(null);
-  const [isEditing, setIsEditing] = useState(false);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    async function fetchData() {
-      setLoading(true);
-      try {
-        const res = await fetch("/pocketbase");
-        if (!res.ok) throw new Error("Failed to fetch data");
-        const records: Budgetable[] = await res.json();
-        setData(records);
-      } catch (err) {
-        toast.error("Error fetching data. Please try again later.");
-        console.error("Error fetching data:", err);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    fetchData();
-  }, []);
-
-  const handleSave = async (updatedRow: Budgetable, originalRow: Budgetable) => {
-
-    if (
-      updatedRow.title === originalRow.title &&
-      updatedRow.price === originalRow.price &&
-      updatedRow.link === originalRow.link &&
-      updatedRow.note === originalRow.note &&
-      updatedRow.status === originalRow.status
-    ) {
-      return;
-    }
-
-    try {
-      const res = await fetch(`/pocketbase/${updatedRow.id}`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(updatedRow),
-      });
-      if (!res.ok) throw new Error("Failed to update row");
-      setData((prev) =>
-        prev.map((row) => (row.id === updatedRow.id ? updatedRow : row))
-      );
-
-      setRecentlyUpdatedRowId(updatedRow.id);
-      setTimeout(() => setRecentlyUpdatedRowId(null), 500);
-      toast.success("Row updated successfully!");
-    } catch (err) {
-      toast.error("Error updating row. Please try again.");
-      console.error("Error updating row:", err);
-    }
-  };
-
-  const handleAddRow = async () => {
-    if (!newRow.title || newRow.price <= 0) {
-      toast("Title and price are required.");
-      return;
-    }
-
-    try {
-      const res = await fetch("/pocketbase", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(newRow),
-      });
-      if (!res.ok) throw new Error("Failed to add row");
-      const record: Budgetable = await res.json();
-      setData((prev) => [...prev, record]);
-      setNewRow({ id: "", title: "", price: 0, link: "", note: "", status: "Unpaid" });
-      toast.success("Row added successfully!");
-    } catch (err) {
-      toast.error("Error adding row. Please try again.");
-      console.error("Error adding row:", err);
-    }
-  };
-
-  const handleDeleteRow = async (id: string) => {
-    try {
-      const res = await fetch(`/pocketbase/${id}`, { method: "DELETE" });
-      if (!res.ok) throw new Error("Failed to delete row");
-      setData((prev) => prev.filter((row) => row.id !== id));
-      toast.success("Row deleted successfully!");
-    } catch (err) {
-      toast.error("Error deleting row. Please try again.");
-      console.error("Error deleting row:", err);
-    }
-  };
-
-  const toggleStatus = async (row: Budgetable) => {
-    const updatedStatus: "Paid" | "Unpaid" = row.status === "Paid" ? "Unpaid" : "Paid";
-    const updatedRow: Budgetable = { ...row, status: updatedStatus };
-    await handleSave(updatedRow, row);
-    setData((prev) =>
-      prev.map((item) => (item.id === row.id ? updatedRow : item))
-    );
-  };
-
-  const total = data.reduce((sum, item) => sum + (item.status === "Unpaid" ? item.price : 0), 0);
-
-  return (
-    <div className="container mx-auto p-6 max-w-4xl">
-      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold">Budgetable</h1>
-        <Button variant="outline" onClick={() => setIsEditing(!isEditing)}>
-          {isEditing ? "Lock" : "Unlock"} Editing
-        </Button>
-      </div>
-
-      {loading ? (
-        <Skeleton className="h-10 w-full" />
-      ) : (
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Title</TableHead>
-              <TableHead>Price</TableHead>
-              <TableHead>Link</TableHead>
-              <TableHead>Note</TableHead>
-              <TableHead>Status</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {data.map((row) => (
-              <TableRow
-                key={row.id}
-                className={`transition-opacity ${
-                  recentlyUpdatedRowId === row.id ? "blur-sm opacity-50" : ""
-                }`}
-              >
-                <TableCell>
-                  {isEditing ? (
-                    <Input
-                      value={row.title}
-                      onChange={(e) =>
-                        setData((prev) =>
-                          prev.map((item) =>
-                            item.id === row.id
-                              ? { ...item, title: e.target.value }
-                              : item
-                          )
-                        )
-                      }
-                      onBlur={() => handleSave(row, data.find((r) => r.id === row.id)!)}
-                    />
-                  ) : (
-                    <span>{row.title}</span>
-                  )}
-                </TableCell>
-                <TableCell>
-                  {isEditing ? (
-                    <Input
-                      type="number"
-                      value={row.price}
-                      onChange={(e) =>
-                        setData((prev) =>
-                          prev.map((item) =>
-                            item.id === row.id
-                              ? { ...item, price: parseFloat(e.target.value) || 0 }
-                              : item
-                          )
-                        )
-                      }
-                      onBlur={() => handleSave(row, data.find((r) => r.id === row.id)!)}
-                    />
-                  ) : (
-                    <span>{row.price.toLocaleString()} HUF</span>
-                  )}
-                </TableCell>
-                <TableCell>
-                  {isEditing ? (
-                    <Input
-                      value={row.link}
-                      onChange={(e) =>
-                        setData((prev) =>
-                          prev.map((item) =>
-                            item.id === row.id
-                              ? { ...item, link: e.target.value }
-                              : item
-                          )
-                        )
-                      }
-                      onBlur={() => handleSave(row, data.find((r) => r.id === row.id)!)}
-                    />
-                  ) : row.link ? (
-                    <Link
-                      href={row.link}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-blue-500 underline"
-                    >
-                      Visit
-                    </Link>
-                  ) : (
-                    <span className="text-gray-400 italic">No link</span>
-                  )}
-                </TableCell>
-                <TableCell>
-                  {isEditing ? (
-                    <Input
-                      value={row.note || ""}
-                      onChange={(e) =>
-                        setData((prev) =>
-                          prev.map((item) =>
-                            item.id === row.id
-                              ? { ...item, note: e.target.value }
-                              : item
-                          )
-                        )
-                      }
-                      onBlur={() => handleSave(row, data.find((r) => r.id === row.id)!)}
-                    />
-                  ) : (
-                    <span>{row.note || "-"}</span>
-                  )}
-                </TableCell>
-                <TableCell>
-                  <Badge
-                    variant={row.status === "Paid" ? "destructive" : "secondary"}
-                    className="cursor-pointer"
-                    onClick={() => toggleStatus(row)}
-                  >
-                    {row.status}
-                  </Badge>
-                </TableCell>
-                <TableCell>
-                  {isEditing && (
-                    <Dialog>
-                      <DialogTrigger asChild>
-                        <Button variant="destructive">Delete</Button>
-                      </DialogTrigger>
-                      <DialogContent>
-                        <DialogTitle>Delete Row</DialogTitle>
-                        <DialogHeader>
-                          Are you sure you want to delete this row?
-                        </DialogHeader>
-                        <DialogFooter>
-                          <Button onClick={() => handleDeleteRow(row.id)}>Yes, delete</Button>
-                        </DialogFooter>
-                      </DialogContent>
-                    </Dialog>
-                  )}
-                </TableCell>
-              </TableRow>
-            ))}
-
-            {/* New Row */}
-            {isEditing && (
-              <TableRow>
-                <TableCell>
-                  <Input
-                    placeholder="New title"
-                    value={newRow.title}
-                    onChange={(e) => setNewRow({ ...newRow, title: e.target.value })}
-                  />
-                </TableCell>
-                <TableCell>
-                  <Input
-                    type="number"
-                    placeholder="New price"
-                    value={newRow.price || ""}
-                    onChange={(e) =>
-                      setNewRow({
-                        ...newRow,
-                        price: parseFloat(e.target.value) || 0,
-                      })
-                    }
-                  />
-                </TableCell>
-                <TableCell>
-                  <Input
-                    placeholder="New link"
-                    value={newRow.link}
-                    onChange={(e) => setNewRow({ ...newRow, link: e.target.value })}
-                  />
-                </TableCell>
-                <TableCell>
-                  <Input
-                    placeholder="New note"
-                    value={newRow.note || ""}
-                    onChange={(e) => setNewRow({ ...newRow, note: e.target.value })}
-                  />
-                </TableCell>
-                <TableCell></TableCell>
-                <TableCell>
-                  <Button onClick={handleAddRow}>Add</Button>
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      )}
-
-      <div className="mt-4 text-right font-bold text-lg">
-        Total: {total.toLocaleString()}
-      </div>
-    </div>
-  );
-};
-
-export default TableComponent;

src/components/theme-provider.tsx

@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
+import type * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
 
 export function ThemeProvider({
-  children,
-  ...props
+	children,
+	...props
 }: React.ComponentProps<typeof NextThemesProvider>) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+	return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }

src/components/total-display.tsx

@@ -0,0 +1,14 @@
+interface TotalDisplayProps {
+	total: number;
+}
+
+const TotalDisplay: React.FC<TotalDisplayProps> = ({ total }) => (
+	<div className="mt-4 text-right font-bold text-lg">
+		Total: {total.toLocaleString()}
+		<p className="text-xs ml-1">
+			({Math.round(total * 1.27).toLocaleString()})
+		</p>
+	</div>
+);
+
+export default TotalDisplay;

src/components/ui/badge.tsx

@@ -1,36 +1,36 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import type * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
+	"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	{
+		variants: {
+			variant: {
+				default:
+					"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+				secondary:
+					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				destructive:
+					"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+				outline: "text-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+	return (
+		<div className={cn(badgeVariants({ variant }), className)} {...props} />
+	);
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

src/components/ui/button.tsx

@@ -1,57 +1,57 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground shadow hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+				outline:
+					"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+				secondary:
+					"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2",
+				sm: "h-8 rounded-md px-3 text-xs",
+				lg: "h-10 rounded-md px-8",
+				icon: "h-9 w-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : "button";
+		return (
+			<Comp
+				className={cn(buttonVariants({ variant, size, className }))}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

src/components/ui/card.tsx

@@ -1,76 +1,83 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
-      className
-    )}
-    {...props}
-  />
-))
-Card.displayName = "Card"
+	<div
+		ref={ref}
+		className={cn(
+			"rounded-xl border bg-card text-card-foreground shadow",
+			className,
+		)}
+		{...props}
+	/>
+));
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
+	<div
+		ref={ref}
+		className={cn("flex flex-col space-y-1.5 p-6", className)}
+		{...props}
+	/>
+));
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
+	<div
+		ref={ref}
+		className={cn("font-semibold leading-none tracking-tight", className)}
+		{...props}
+	/>
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
+	<div
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+	<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
+	<div
+		ref={ref}
+		className={cn("flex items-center p-6 pt-0", className)}
+		{...props}
+	/>
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+	Card,
+	CardHeader,
+	CardFooter,
+	CardTitle,
+	CardDescription,
+	CardContent,
+};

src/components/ui/dialog.tsx

@@ -1,122 +1,122 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+	React.ElementRef<typeof DialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+	<DialogPrimitive.Overlay
+		ref={ref}
+		className={cn(
+			"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			className,
+		)}
+		{...props}
+	/>
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+	React.ElementRef<typeof DialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+	<DialogPortal>
+		<DialogOverlay />
+		<DialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+				<X className="h-4 w-4" />
+				<span className="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		</DialogPrimitive.Content>
+	</DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = "DialogHeader"
+	<div
+		className={cn(
+			"flex flex-col space-y-1.5 text-center sm:text-left",
+			className,
+		)}
+		{...props}
+	/>
+);
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
+	<div
+		className={cn(
+			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+			className,
+		)}
+		{...props}
+	/>
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+	React.ElementRef<typeof DialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+	<DialogPrimitive.Title
+		ref={ref}
+		className={cn(
+			"text-lg font-semibold leading-none tracking-tight",
+			className,
+		)}
+		{...props}
+	/>
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+	React.ElementRef<typeof DialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+	<DialogPrimitive.Description
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-}
+	Dialog,
+	DialogPortal,
+	DialogOverlay,
+	DialogTrigger,
+	DialogClose,
+	DialogContent,
+	DialogHeader,
+	DialogFooter,
+	DialogTitle,
+	DialogDescription,
+};

src/components/ui/input.tsx

@@ -1,22 +1,22 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
+	({ className, type, ...props }, ref) => {
+		return (
+			<input
+				type={type}
+				className={cn(
+					"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+					className,
+				)}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };

src/components/ui/skeleton.tsx

@@ -1,15 +1,15 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Skeleton({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-primary/10", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			className={cn("animate-pulse rounded-md bg-primary/10", className)}
+			{...props}
+		/>
+	);
 }
 
-export { Skeleton }
+export { Skeleton };

src/components/ui/sonner.tsx

@@ -1,31 +1,31 @@
-"use client"
+"use client";
 
-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
 
-type ToasterProps = React.ComponentProps<typeof Sonner>
+type ToasterProps = React.ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+	const { theme = "system" } = useTheme();
 
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  )
-}
+	return (
+		<Sonner
+			theme={theme as ToasterProps["theme"]}
+			className="toaster group"
+			toastOptions={{
+				classNames: {
+					toast:
+						"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+					description: "group-[.toast]:text-muted-foreground",
+					actionButton:
+						"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+					cancelButton:
+						"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+				},
+			}}
+			{...props}
+		/>
+	);
+};
 
-export { Toaster }
+export { Toaster };

src/components/ui/table.tsx

@@ -1,120 +1,120 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
+	HTMLTableElement,
+	React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-))
-Table.displayName = "Table"
+	<div className="relative w-full overflow-auto">
+		<table
+			ref={ref}
+			className={cn("w-full caption-bottom text-sm", className)}
+			{...props}
+		/>
+	</div>
+));
+Table.displayName = "Table";
 
 const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+	<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
 
 const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-))
-TableBody.displayName = "TableBody"
+	<tbody
+		ref={ref}
+		className={cn("[&_tr:last-child]:border-0", className)}
+		{...props}
+	/>
+));
+TableBody.displayName = "TableBody";
 
 const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableFooter.displayName = "TableFooter"
+	<tfoot
+		ref={ref}
+		className={cn(
+			"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+			className,
+		)}
+		{...props}
+	/>
+));
+TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
+	HTMLTableRowElement,
+	React.HTMLAttributes<HTMLTableRowElement>
 >(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-TableRow.displayName = "TableRow"
+	<tr
+		ref={ref}
+		className={cn(
+			"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+			className,
+		)}
+		{...props}
+	/>
+));
+TableRow.displayName = "TableRow";
 
 const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
+	HTMLTableCellElement,
+	React.ThHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
-    )}
-    {...props}
-  />
-))
-TableHead.displayName = "TableHead"
+	<th
+		ref={ref}
+		className={cn(
+			"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+			className,
+		)}
+		{...props}
+	/>
+));
+TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
+	HTMLTableCellElement,
+	React.TdHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
-    )}
-    {...props}
-  />
-))
-TableCell.displayName = "TableCell"
+	<td
+		ref={ref}
+		className={cn(
+			"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+			className,
+		)}
+		{...props}
+	/>
+));
+TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
+	HTMLTableCaptionElement,
+	React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-TableCaption.displayName = "TableCaption"
+	<caption
+		ref={ref}
+		className={cn("mt-4 text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+TableCaption.displayName = "TableCaption";
 
 export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+	Table,
+	TableHeader,
+	TableBody,
+	TableFooter,
+	TableHead,
+	TableRow,
+	TableCell,
+	TableCaption,
+};

src/components/ui/toast.tsx

@@ -1,129 +1,129 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const ToastProvider = ToastPrimitives.Provider
+const ToastProvider = ToastPrimitives.Provider;
 
 const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+	React.ElementRef<typeof ToastPrimitives.Viewport>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+	<ToastPrimitives.Viewport
+		ref={ref}
+		className={cn(
+			"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+			className,
+		)}
+		{...props}
+	/>
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
+	"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+	{
+		variants: {
+			variant: {
+				default: "border bg-background text-foreground",
+				destructive:
+					"destructive group border-destructive bg-destructive text-destructive-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
 
 const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
+	React.ElementRef<typeof ToastPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+		VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
+	return (
+		<ToastPrimitives.Root
+			ref={ref}
+			className={cn(toastVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
 
 const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+	React.ElementRef<typeof ToastPrimitives.Action>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
-    )}
-    {...props}
-  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
+	<ToastPrimitives.Action
+		ref={ref}
+		className={cn(
+			"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+			className,
+		)}
+		{...props}
+	/>
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
 
 const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+	React.ElementRef<typeof ToastPrimitives.Close>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
+	<ToastPrimitives.Close
+		ref={ref}
+		className={cn(
+			"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+			className,
+		)}
+		toast-close=""
+		{...props}
+	>
+		<X className="h-4 w-4" />
+	</ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
 
 const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+	React.ElementRef<typeof ToastPrimitives.Title>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
-    {...props}
-  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
+	<ToastPrimitives.Title
+		ref={ref}
+		className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+		{...props}
+	/>
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
 const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+	React.ElementRef<typeof ToastPrimitives.Description>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
+	<ToastPrimitives.Description
+		ref={ref}
+		className={cn("text-sm opacity-90", className)}
+		{...props}
+	/>
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 
-type ToastActionElement = React.ReactElement<typeof ToastAction>
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
 export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-}
+	type ToastProps,
+	type ToastActionElement,
+	ToastProvider,
+	ToastViewport,
+	Toast,
+	ToastTitle,
+	ToastDescription,
+	ToastClose,
+	ToastAction,
+};

src/components/ui/toaster.tsx

@@ -1,35 +1,31 @@
-"use client"
+"use client";
 
-import { useToast } from "@/hooks/use-toast"
+import { useToast } from "@/hooks/use-toast";
 import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "@/components/ui/toast"
+	Toast,
+	ToastClose,
+	ToastDescription,
+	ToastProvider,
+	ToastTitle,
+	ToastViewport,
+} from "@/components/ui/toast";
 
 export function Toaster() {
-  const { toasts } = useToast()
+	const { toasts } = useToast();
 
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  )
+	return (
+		<ToastProvider>
+			{toasts.map(({ id, title, description, action, ...props }) => (
+				<Toast key={id} {...props}>
+					<div className="grid gap-1">
+						{title && <ToastTitle>{title}</ToastTitle>}
+						{description && <ToastDescription>{description}</ToastDescription>}
+					</div>
+					{action}
+					<ToastClose />
+				</Toast>
+			))}
+			<ToastViewport />
+		</ToastProvider>
+	);
 }