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/breadcrumb.tsx

@@ -1,107 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
-import type * as React from "react";
-
-import { cn } from "./utils";
-
-function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
-	return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
-}
-
-function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
-	return (
-		<ol
-			data-slot="breadcrumb-list"
-			className={cn(
-				"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
-	return (
-		<li
-			data-slot="breadcrumb-item"
-			className={cn("inline-flex items-center gap-1.5", className)}
-			{...props}
-		/>
-	);
-}
-
-function BreadcrumbLink({
-	asChild,
-	className,
-	...props
-}: React.ComponentProps<"a"> & {
-	asChild?: boolean;
-}) {
-	const Comp = asChild ? Slot : "a";
-
-	return (
-		<Comp
-			data-slot="breadcrumb-link"
-			className={cn("hover:text-foreground transition-colors", className)}
-			{...props}
-		/>
-	);
-}
-
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
-	return (
-		<span
-			data-slot="breadcrumb-page"
-			aria-current="page"
-			className={cn("text-foreground font-normal", className)}
-			{...props}
-		/>
-	);
-}
-
-function BreadcrumbSeparator({
-	children,
-	className,
-	...props
-}: React.ComponentProps<"li">) {
-	return (
-		<li
-			data-slot="breadcrumb-separator"
-			role="presentation"
-			aria-hidden="true"
-			className={cn("[&>svg]:size-3.5", className)}
-			{...props}
-		>
-			{children ?? <ChevronRight />}
-		</li>
-	);
-}
-
-function BreadcrumbEllipsis({
-	className,
-	...props
-}: React.ComponentProps<"span">) {
-	return (
-		<span
-			data-slot="breadcrumb-ellipsis"
-			role="presentation"
-			aria-hidden="true"
-			className={cn("flex size-9 items-center justify-center", className)}
-			{...props}
-		>
-			<MoreHorizontal className="size-4" />
-			<span className="sr-only">More</span>
-		</span>
-	);
-}
-
-export {
-	Breadcrumb,
-	BreadcrumbList,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbPage,
-	BreadcrumbSeparator,
-	BreadcrumbEllipsis,
-};