feat: Implement theme toggling and enhance dashboard component theming

This commit introduces a theme toggle functionality in the application header
and improves the visual consistency of dashboard components across different
color schemes.

- Added light/dark mode toggle to  using Mantine's .
- Ensured all  components in  have visible borders in both light and dark modes by adding the  prop.
- Made  colors in  theme-aware, dynamically adjusting their background color based on the active color scheme.

Additionally, this commit includes a large refactoring operation, moving various
component files from  to  and updating
their references.

src/components/ui/alert-dialog.tsx

@@ -1,154 +0,0 @@
-"use client";
-
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import type * as React from "react";
-import { Button } from "./button";
-import { cn } from "./utils";
-
-function AlertDialog({
-	...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-	return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
-}
-
-function AlertDialogTrigger({
-	...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-	return (
-		<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-	);
-}
-
-function AlertDialogPortal({
-	...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-	return (
-		<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-	);
-}
-
-function AlertDialogOverlay({
-	className,
-	...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-	return (
-		<AlertDialogPrimitive.Overlay
-			data-slot="alert-dialog-overlay"
-			className={cn(
-				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-function AlertDialogContent({
-	className,
-	...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-	return (
-		<AlertDialogPortal>
-			<AlertDialogOverlay />
-			<AlertDialogPrimitive.Content
-				data-slot="alert-dialog-content"
-				className={cn(
-					"bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-					className,
-				)}
-				{...props}
-			/>
-		</AlertDialogPortal>
-	);
-}
-
-function AlertDialogHeader({
-	className,
-	...props
-}: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="alert-dialog-header"
-			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-			{...props}
-		/>
-	);
-}
-
-function AlertDialogFooter({
-	className,
-	...props
-}: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="alert-dialog-footer"
-			className={cn(
-				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-function AlertDialogTitle({
-	className,
-	...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-	return (
-		<AlertDialogPrimitive.Title
-			data-slot="alert-dialog-title"
-			className={cn("text-lg font-semibold", className)}
-			{...props}
-		/>
-	);
-}
-
-function AlertDialogDescription({
-	className,
-	...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-	return (
-		<AlertDialogPrimitive.Description
-			data-slot="alert-dialog-description"
-			className={cn("text-muted-foreground text-sm", className)}
-			{...props}
-		/>
-	);
-}
-
-function AlertDialogAction({
-	className,
-	...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-	return (
-		<AlertDialogPrimitive.Action asChild>
-			<Button className={cn(className)} {...props} />
-		</AlertDialogPrimitive.Action>
-	);
-}
-
-function AlertDialogCancel({
-	className,
-	...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-	return (
-		<AlertDialogPrimitive.Cancel asChild>
-			<Button variant="outline" className={cn(className)} {...props} />
-		</AlertDialogPrimitive.Cancel>
-	);
-}
-
-export {
-	AlertDialog,
-	AlertDialogPortal,
-	AlertDialogOverlay,
-	AlertDialogTrigger,
-	AlertDialogContent,
-	AlertDialogHeader,
-	AlertDialogFooter,
-	AlertDialogTitle,
-	AlertDialogDescription,
-	AlertDialogAction,
-	AlertDialogCancel,
-};