feat: Implement initial Caddy panel UI with new pages, components, and styling, along with updated dependencies.

src/components/Dashboard/StatusCard.tsx

@@ -0,0 +1,41 @@
+import clsx from "clsx";
+import styles from "./StatusCard.module.css";
+import { LucideIcon } from "lucide-react";
+
+interface StatusCardProps {
+    label: string;
+    value: string | number;
+    icon: LucideIcon;
+    status?: "success" | "warning" | "error" | "neutral";
+    trend?: string;
+    href?: string;
+}
+
+import Link from "next/link";
+
+export function StatusCard({ label, value, icon: Icon, status = "neutral", trend, href }: StatusCardProps) {
+    const content = (
+        <div className={clsx(styles.card, href && styles.clickable)}>
+            <div className={styles.header}>
+                <span className={styles.label}>{label}</span>
+                <div className={clsx(styles.iconWrapper, styles[status])}>
+                    <Icon size={20} />
+                </div>
+            </div>
+            <div className={styles.content}>
+                <div className={styles.value}>{value}</div>
+                {trend && <div className={styles.trend}>{trend}</div>}
+            </div>
+        </div>
+    );
+
+    if (href) {
+        return (
+            <Link href={href} style={{ textDecoration: 'none' }}>
+                {content}
+            </Link>
+        );
+    }
+
+    return content;
+}