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

@@ -1,121 +0,0 @@
-import {
-	ChevronLeftIcon,
-	ChevronRightIcon,
-	MoreHorizontalIcon,
-} from "lucide-react";
-import type * as React from "react";
-import { Button } from "./button";
-import { cn } from "./utils";
-
-function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
-	return (
-		<nav
-			aria-label="pagination"
-			data-slot="pagination"
-			className={cn("mx-auto flex w-full justify-center", className)}
-			{...props}
-		/>
-	);
-}
-
-function PaginationContent({
-	className,
-	...props
-}: React.ComponentProps<"ul">) {
-	return (
-		<ul
-			data-slot="pagination-content"
-			className={cn("flex flex-row items-center gap-1", className)}
-			{...props}
-		/>
-	);
-}
-
-function PaginationItem({ ...props }: React.ComponentProps<"li">) {
-	return <li data-slot="pagination-item" {...props} />;
-}
-
-type PaginationLinkProps = {
-	isActive?: boolean;
-} & Pick<React.ComponentProps<typeof Button>, "size" | "variant"> &
-	React.ComponentProps<typeof Button>;
-
-function PaginationLink({
-	className,
-	isActive,
-	size = "icon",
-	...props
-}: PaginationLinkProps) {
-	return (
-		<Button
-			aria-current={isActive ? "page" : undefined}
-			data-slot="pagination-link"
-			data-active={isActive}
-			variant={isActive ? "outline" : "ghost"}
-			size={size}
-			className={cn(className)}
-			{...props}
-		/>
-	);
-}
-
-function PaginationPrevious({
-	className,
-	...props
-}: React.ComponentProps<typeof PaginationLink>) {
-	return (
-		<PaginationLink
-			aria-label="Go to previous page"
-			size="default"
-			className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
-			{...props}
-		>
-			<ChevronLeftIcon />
-			<span className="hidden sm:block">Previous</span>
-		</PaginationLink>
-	);
-}
-
-function PaginationNext({
-	className,
-	...props
-}: React.ComponentProps<typeof PaginationLink>) {
-	return (
-		<PaginationLink
-			aria-label="Go to next page"
-			size="default"
-			className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
-			{...props}
-		>
-			<span className="hidden sm:block">Next</span>
-			<ChevronRightIcon />
-		</PaginationLink>
-	);
-}
-
-function PaginationEllipsis({
-	className,
-	...props
-}: React.ComponentProps<"span">) {
-	return (
-		<span
-			aria-hidden
-			data-slot="pagination-ellipsis"
-			className={cn("flex size-9 items-center justify-center", className)}
-			{...props}
-		>
-			<MoreHorizontalIcon className="size-4" />
-			<span className="sr-only">More pages</span>
-		</span>
-	);
-}
-
-export {
-	Pagination,
-	PaginationContent,
-	PaginationLink,
-	PaginationItem,
-	PaginationPrevious,
-	PaginationNext,
-	PaginationEllipsis,
-};