Add Oudelaa dashboard API integration

oudelaa_dashboard/app/styles/components.css

@@ -0,0 +1,75 @@
+  .frame-panel {
+    @apply rounded-2xl border border-border/90 bg-card/90 backdrop-blur-xl;
+    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  }
+
+  .theme-light .frame-panel {
+    box-shadow: 0 20px 45px rgba(31, 22, 12, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  }
+
+  .gold-edge {
+    box-shadow: inset 0 0 0 1px rgba(180, 180, 180, 0.28);
+  }
+
+  .ornament-grid {
+    background-image:
+      radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0),
+      linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 24%);
+    background-size: 20px 20px, 100% 100%;
+  }
+
+  .theme-light .ornament-grid {
+    background-image:
+      radial-gradient(circle at 1px 1px, rgba(120, 120, 120, 0.08) 1px, transparent 0),
+      linear-gradient(180deg, rgba(170, 170, 170, 0.08), transparent 30%);
+  }
+
+  .page-enter {
+    animation: fadeUp 0.45s ease-out both;
+  }
+
+  .shimmer-empty {
+    background: linear-gradient(100deg, rgba(210, 210, 210, 0.08), rgba(210, 210, 210, 0.16), rgba(210, 210, 210, 0.08));
+    background-size: 220% 100%;
+    animation: shimmer 2s linear infinite;
+  }
+
+  .login-shell {
+    position: relative;
+    isolation: isolate;
+  }
+
+  .login-shell::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(circle at 20% 20%, rgba(210, 210, 210, 0.35), transparent 40%),
+      radial-gradient(circle at 80% 80%, rgba(160, 160, 160, 0.25), transparent 50%);
+    opacity: 0.8;
+    z-index: -2;
+  }
+
+  .login-shell::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(circle at 1px 1px, rgba(210, 210, 210, 0.14) 1px, transparent 0);
+    background-size: 22px 22px;
+    opacity: 0.6;
+    z-index: -1;
+  }
+
+  .login-card {
+    @apply rounded-3xl border border-border/80 bg-card/85 backdrop-blur-2xl;
+    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(200, 200, 200, 0.2);
+  }
+
+  .theme-light .login-card {
+    box-shadow: 0 24px 50px rgba(28, 18, 8, 0.12), inset 0 0 0 1px rgba(200, 200, 200, 0.3);
+  }
+
+  .gold-divider {
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(190, 190, 190, 0.6), transparent);
+  }

oudelaa_dashboard/app/styles/theme.css

@@ -0,0 +1,91 @@
+  :root {
+    --background: 28 20 13;
+    --foreground: 246 238 223;
+    --card: 37 27 19;
+    --card-foreground: 238 229 211;
+    --popover: 34 24 17;
+    --popover-foreground: 245 238 224;
+    --primary: 225 180 96;
+    --primary-foreground: 40 29 21;
+    --secondary: 57 41 29;
+    --secondary-foreground: 235 226 209;
+    --muted: 56 44 36;
+    --muted-foreground: 192 176 155;
+    --accent: 83 62 34;
+    --accent-foreground: 243 230 206;
+    --border: 80 63 48;
+    --input: 69 56 43;
+    --ring: 223 178 93;
+    --chart-1: 231 182 90;
+    --chart-2: 219 112 67;
+    --chart-3: 182 152 62;
+    --chart-4: 181 75 48;
+    --chart-5: 208 182 149;
+  }
+
+  .theme-light {
+    --background: 249 246 240;
+    --foreground: 59 43 33;
+    --card: 252 250 248;
+    --card-foreground: 64 48 38;
+    --popover: 250 248 245;
+    --popover-foreground: 64 48 38;
+    --primary: 200 129 30;
+    --primary-foreground: 248 245 241;
+    --secondary: 237 231 222;
+    --secondary-foreground: 67 55 45;
+    --muted: 231 225 218;
+    --muted-foreground: 109 95 85;
+    --accent: 231 221 208;
+    --accent-foreground: 76 58 46;
+    --border: 209 199 189;
+    --input: 213 204 195;
+    --ring: 195 128 34;
+    --chart-1: 200 129 30;
+    --chart-2: 190 88 45;
+    --chart-3: 148 123 66;
+    --chart-4: 163 74 51;
+    --chart-5: 189 152 107;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    background-image:
+      radial-gradient(circle at 85% 15%, rgba(218, 155, 47, 0.08), transparent 30%),
+      radial-gradient(circle at 10% 90%, rgba(190, 84, 39, 0.08), transparent 35%),
+      linear-gradient(120deg, rgb(25, 17, 11), rgb(20, 14, 11));
+    background-attachment: fixed;
+  }
+
+  .theme-light body {
+    background-image:
+      radial-gradient(circle at 85% 15%, rgba(235, 188, 122, 0.25), transparent 35%),
+      radial-gradient(circle at 10% 90%, rgba(217, 166, 140, 0.18), transparent 40%),
+      linear-gradient(120deg, rgb(249, 246, 240), rgb(244, 240, 235));
+  }
+
+  .login-theme {
+    --background: 244 237 228;
+    --foreground: 88 61 36;
+    --card: 250 246 239;
+    --card-foreground: 62 45 31;
+    --primary: 88 61 36;
+    --primary-foreground: 255 248 239;
+    --secondary: 238 230 220;
+    --secondary-foreground: 68 50 34;
+    --muted: 232 223 212;
+    --muted-foreground: 88 67 48;
+    --border: 210 197 183;
+    --input: 236 228 218;
+    --ring: 125 905 606;
+  }
+
+  .login-theme body {
+    background-image:
+      radial-gradient(circle at 15% 20%, rgba(228, 216, 202, 0.6), transparent 45%),
+      radial-gradient(circle at 85% 80%, rgba(214, 200, 184, 0.55), transparent 45%),
+      linear-gradient(120deg, rgb(246, 240, 231), rgb(238, 230, 219));
+  }