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

@@ -1,55 +0,0 @@
-import {
-	Box,
-	Card as MantineCard,
-	type CardProps as MantineCardProps,
-	Title,
-} from "@mantine/core";
-import type React from "react";
-import { cn } from "./utils";
-
-interface CardComponentProps extends MantineCardProps {
-	// Add any specific props you had in your custom Card component
-}
-
-interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
-interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
-interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-const Card = ({ className, children, ...props }: CardComponentProps) => (
-	<MantineCard
-		className={cn(
-			"rounded-xl border bg-white dark:bg-gray-800 p-6 shadow",
-			className,
-		)}
-		{...props}
-	>
-		{children}
-	</MantineCard>
-);
-
-const CardHeader = ({ className, children, ...props }: CardHeaderProps) => (
-	<Box className={cn("flex flex-col space-y-1.5", className)} {...props}>
-		{children}
-	</Box>
-);
-
-const CardTitle = ({ className, children, ...props }: CardTitleProps) => (
-	<Title
-		order={3}
-		className={cn(
-			"font-semibold leading-none tracking-tight text-gray-900 dark:text-white",
-			className,
-		)}
-		{...props}
-	>
-		{children}
-	</Title>
-);
-
-const CardContent = ({ className, children, ...props }: CardContentProps) => (
-	<Box className={cn("p-6 pt-0", className)} {...props}>
-		{children}
-	</Box>
-);
-
-export { Card, CardHeader, CardTitle, CardContent };