refactor: update imports to use 'type' for TypeScript types and enhance tooltip functionality

src/components/delete-dialog.tsx

@@ -21,7 +21,9 @@ const DeleteDialog = ({ onConfirm }: DeleteDialogProps) => (
 			<DialogTitle>Delete Row</DialogTitle>
 			<DialogHeader>Are you sure you want to delete this row?</DialogHeader>
 			<DialogFooter>
-				<Button onClick={onConfirm}>Yes, delete</Button>
+				<Button onClick={onConfirm} variant="destructive">
+					Yes, delete
+				</Button>
 			</DialogFooter>
 		</DialogContent>
 	</Dialog>

src/components/header.tsx

@@ -13,7 +13,7 @@ const Header = ({ isEditing, setIsEditing }: AppHeaderProps) => (
 				href="/"
 				className="text-blue-500 hover:text-blue-600 transition-colors"
 				onClick={() => setIsEditing(false)}
-				>
+			>
 				Budgetable
 			</Link>
 		</h1>

src/components/table-new-row.tsx

@@ -1,7 +1,7 @@
 import { TableRow, TableCell } from "@/components/ui/table";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { Budgetable } from '@/lib/utils';
+import type { Budgetable } from "@/lib/utils";
 
 interface TNewRowProps {
 	newRow: Budgetable;

src/components/table-row.tsx

@@ -3,8 +3,14 @@ import { TableRow, TableCell } from "@/components/ui/table";
 import Link from "next/link";
 import StatusBadge from "@/components/status-badge";
 import DeleteDialog from "@/components/delete-dialog";
-import { useState } from 'react';
-import { Budgetable } from '@/lib/utils';
+import { useState } from "react";
+import type { Budgetable } from "@/lib/utils";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 interface TRowProps {
 	row: Budgetable;
@@ -31,7 +37,7 @@ const TRow = ({
 	const [originalRow, setOriginalRow] = useState<Budgetable>(row);
 
 	const handleInputFocus = () => {
-		setOriginalRow({...row});
+		setOriginalRow({ ...row });
 	};
 
 	return (
@@ -48,7 +54,9 @@ const TRow = ({
 						onChange={(e) =>
 							setData((prev) =>
 								prev.map((item) =>
-									item.id === row.id ? { ...item, title: e.target.value } : item,
+									item.id === row.id
+										? { ...item, title: e.target.value }
+										: item,
 								),
 							)
 						}
@@ -94,14 +102,18 @@ const TRow = ({
 						onBlur={() => handleSave(row, originalRow)}
 					/>
 				) : row.link ? (
-					<Link
-						href={row.link}
-						target="_blank"
-						rel="noopener noreferrer"
-						className="text-blue-500 underline"
-					>
-						Visit
-					</Link>
+					<TooltipProvider delayDuration={150}>
+						<Tooltip>
+							<TooltipTrigger className="text-blue-500 underline">
+								<Link href={row.link} target="_blank" rel="noopener noreferrer">
+									Visit
+								</Link>
+							</TooltipTrigger>
+							<TooltipContent className="text-white bg-black">
+								{row.link.replace(/^https?:\/\//, "")}
+							</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
 				) : (
 					<span className="text-gray-400 italic">No link</span>
 				)}
@@ -125,7 +137,10 @@ const TRow = ({
 				)}
 			</TableCell>
 			<TableCell>
-				<StatusBadge status={row.status} toggleStatus={() => toggleStatus(row)} />
+				<StatusBadge
+					status={row.status}
+					toggleStatus={() => toggleStatus(row)}
+				/>
 			</TableCell>
 			{isEditing && (
 				<TableCell>

src/components/table-wrapper.tsx

@@ -7,7 +7,7 @@ import {
 } from "@/components/ui/table";
 import TRow from "@/components/table-row";
 import TNewRow from "@/components/table-new-row";
-import { Budgetable } from '@/lib/utils';
+import type { Budgetable } from "@/lib/utils";
 
 interface TWrapperProps {
 	data: Budgetable[];

src/components/theme-provider.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ComponentProps } from "react";
+import type { ComponentProps } from "react";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 
 export function ThemeProvider({

src/components/total-display.tsx

@@ -1,13 +1,12 @@
+import NumberFlow from "@number-flow/react";
+
 interface TotalDisplayProps {
 	total: number;
 }
 
 const TotalDisplay = ({ total }: TotalDisplayProps) => (
-	<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 className="mx-2 text-left font-bold text-lg">
+		Total: <NumberFlow value={total} />
 	</div>
 );
 

src/components/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+	React.ElementRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<TooltipPrimitive.Portal>
+		<TooltipPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 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",
+				className,
+			)}
+			{...props}
+		/>
+	</TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };