Merge pull request #6 from tom-draper/dashboard-refactor

Fix user trend counting and optimize filtered data handling

Author: tom-draper

dashboard/app/error.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export default function Error({
+    error,
+    reset,
+}: {
+    error: Error & { digest?: string };
+    reset: () => void;
+}) {
+    useEffect(() => {
+        console.error(error);
+    }, [error]);
+
+    return (
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: '100vh',
+            background: 'var(--background)',
+            color: 'var(--text)',
+            fontFamily: 'Inter, Helvetica, Arial, sans-serif',
+            gap: '1rem',
+            padding: '2rem',
+            textAlign: 'center',
+        }}>
+            <h1 style={{ fontSize: '1.5rem', fontWeight: 600, color: 'var(--bold-text)' }}>
+                Something went wrong
+            </h1>
+            <p style={{ color: 'var(--text-muted)', fontSize: '0.95rem', maxWidth: '400px' }}>
+                {error.message || 'An unexpected error occurred.'}
+            </p>
+            {error.digest && (
+                <p style={{ color: 'var(--text-muted2)', fontSize: '0.8rem', fontFamily: 'monospace' }}>
+                    Error ID: {error.digest}
+                </p>
+            )}
+            <button
+                onClick={reset}
+                style={{
+                    marginTop: '0.5rem',
+                    padding: '0.5rem 1.25rem',
+                    background: 'var(--highlight)',
+                    color: 'var(--inverted-text)',
+                    border: 'none',
+                    borderRadius: 'var(--border-radius)',
+                    fontSize: '0.9rem',
+                    fontWeight: 600,
+                    cursor: 'pointer',
+                }}
+            >
+                Try again
+            </button>
+        </div>
+    );
+}

dashboard/app/globals.css

@@ -7,46 +7,30 @@
 }
 
 :root {
-  /* --background: #ffffff;
-  --foreground: #171717; */
-  --background: #0a0a0a;
   --foreground: #ededed;
   --nginx-green: #009400;
   --other-green: rgb(46, 204, 113);
-  --highlight: rgb(46, 204, 113);
-  --highlight: rgb(26, 240, 115);
   --highlight: #1af073;
-  --background: rgb(0, 0, 0);
   --background: #08090a;
-  --card-background: rgb(13, 13, 13);
-  --card-background: rgb(14, 14, 14);
   --card-background: #101213;
   --inverted-text: black;
   --bold-text: white;
-  --text: white;
   --text: #F7F8F8;
   --text-tinted: #ededed;
   --text-muted: gray;
   --text-muted2: #5d5d5d;
   --text-muted3: #666;
   --text-muted4: #8a8f98;
-  --border-color: rgb(22, 22, 22);
-  --border-color: rgb(34, 34, 34);
   --border-color: rgb(35, 37, 42);
   --border-radius: 0.3rem;
   --hover-background: rgb(34, 34, 34);
-  --warn: #ff644b;
-  --warn: #ffaa4b;
   --warn: rgb(255, 170, 75);
   --error: #ff5050;
-  --info: #00bfff;
   --info: rgb(0, 191, 255);
 }
 
 @media (prefers-color-scheme: light) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
     --background: #ffffff;
     --foreground: #171717;
   }
@@ -59,9 +43,6 @@ body {
 }
 
 .level {
-  background: var(--highlight);
-  background: oklch(0.928 0.006 264.531);
-  background: oklch(0.967 0.003 264.542);
   background: rgb(255, 80, 80);
 }
 
@@ -207,7 +188,6 @@ body {
 
 
 .level-none {
-  background: oklch(0.967 0.003 264.542);
   background: rgb(49, 49, 49);
 }
 

dashboard/app/icon-old.svg

@@ -0,0 +1,45 @@
+import Link from 'next/link';
+
+export default function NotFound() {
+    return (
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: '100vh',
+            background: 'var(--background)',
+            color: 'var(--text)',
+            fontFamily: 'Inter, Helvetica, Arial, sans-serif',
+            gap: '1rem',
+            padding: '2rem',
+            textAlign: 'center',
+        }}>
+            <h1 style={{ fontSize: '4rem', fontWeight: 700, color: 'var(--highlight)', lineHeight: 1 }}>
+                404
+            </h1>
+            <h2 style={{ fontSize: '1.25rem', fontWeight: 600, color: 'var(--bold-text)' }}>
+                Page not found
+            </h2>
+            <p style={{ color: 'var(--text-muted)', fontSize: '0.95rem', maxWidth: '400px' }}>
+                The page you are looking for does not exist or has been moved.
+            </p>
+            <Link
+                href="/dashboard"
+                style={{
+                    marginTop: '0.5rem',
+                    padding: '0.5rem 1.25rem',
+                    background: 'var(--highlight)',
+                    color: 'var(--inverted-text)',
+                    borderRadius: 'var(--border-radius)',
+                    fontSize: '0.9rem',
+                    fontWeight: 600,
+                    textDecoration: 'none',
+                    display: 'inline-block',
+                }}
+            >
+                Back to dashboard
+            </Link>
+        </div>
+    );
+}