From 9f312091e7c1bc0dbe25756e5400d7bbf4097eb9 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Wed, 22 Apr 2026 18:40:16 +0700
Subject: [PATCH] feat: implement dynamic time-based dashboard theme and live
 greeting interface

---
 resources/css/app.css                   |   2 +
 resources/js/components/app-sidebar.tsx |   2 +-
 resources/js/pages/dashboard.tsx        | 171 ++++++++++++++++++++++--
 3 files changed, 161 insertions(+), 14 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 450845e..4deb5b6 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -62,6 +62,8 @@ @theme {
     --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-ring: var(--sidebar-ring);
+
+    --animate-spin-slow: spin 8s linear infinite;
 }
 
 :root {
diff --git a/resources/js/components/app-sidebar.tsx b/resources/js/components/app-sidebar.tsx
index 5b432ae..e5dbaa1 100644
--- a/resources/js/components/app-sidebar.tsx
+++ b/resources/js/components/app-sidebar.tsx
@@ -24,7 +24,7 @@ import order from '@/routes/order';
 
 const mainNavItems: NavItem[] = [
     {
-        title: 'Dashboard',
+        title: 'Dasbor',
         href: dashboard().url,
         icon: LayoutGrid,
     },
diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
index 3fe0cc7..25f2205 100644
--- a/resources/js/pages/dashboard.tsx
+++ b/resources/js/pages/dashboard.tsx
@@ -1,25 +1,170 @@
-import { Head } from '@inertiajs/react';
+import { Head, usePage } from '@inertiajs/react';
+import { useEffect, useState } from 'react';
 import { PlaceholderPattern } from '@/components/ui/placeholder-pattern';
 import { dashboard } from '@/routes';
+import { Auth } from '@/types';
+import { Sun, Moon, Cloud, Trees, CloudRain, Stars, Bird } from 'lucide-react';
+
+interface PageProps {
+    auth: Auth;
+    [key: string]: any;
+}
+
+const DynamicScene = ({ hour }: { hour: number }) => {
+    if (hour >= 5 && hour < 11) {
+        return (
+            <div className="relative h-24 w-32 overflow-hidden">
+                <Sun className="absolute bottom-0 left-4 h-16 w-16 animate-pulse text-amber-400" fill="currentColor" />
+                <Cloud className="absolute top-2 right-2 h-10 w-10 animate-bounce text-white/80" fill="currentColor" />
+                <Cloud className="absolute top-8 left-0 h-8 w-8 animate-bounce text-white/60 [animation-delay:1s]" fill="currentColor" />
+            </div>
+        );
+    }
+    if (hour >= 11 && hour < 15) {
+        return (
+            <div className="relative h-24 w-32 overflow-hidden">
+                <Sun className="absolute top-0 right-4 h-14 w-14 animate-spin-slow text-yellow-400" fill="currentColor" />
+                <Trees className="absolute bottom-0 left-2 h-14 w-14 text-green-600 dark:text-green-500" />
+                <Cloud className="absolute top-4 left-4 h-8 w-8 animate-pulse text-white/80" fill="currentColor" />
+            </div>
+        );
+    }
+    if (hour >= 15 && hour < 19) {
+        return (
+            <div className="relative h-24 w-32 overflow-hidden">
+                <Sun className="absolute bottom-[-10px] left-8 h-16 w-16 text-orange-500" fill="currentColor" />
+                <Bird className="absolute top-4 left-4 h-6 w-6 animate-bounce text-orange-800 dark:text-orange-200" />
+                <Bird className="absolute top-8 right-8 h-5 w-5 animate-bounce text-orange-800 dark:text-orange-200 [animation-delay:0.5s]" />
+            </div>
+        );
+    }
+    return (
+        <div className="relative h-24 w-32 overflow-hidden">
+            <Moon className="absolute top-2 left-6 h-14 w-14 rotate-12 text-indigo-200" fill="currentColor" />
+            <Stars className="absolute top-4 right-4 h-6 w-6 animate-pulse text-yellow-200" />
+            <Stars className="absolute bottom-4 left-2 h-4 w-4 animate-pulse text-yellow-100 [animation-delay:1s]" />
+            <div className="absolute bottom-2 right-6 h-1 w-1 animate-ping rounded-full bg-white"></div>
+        </div>
+    );
+};
 
 export default function Dashboard() {
+    const { auth } = usePage<PageProps>().props;
+    const [time, setTime] = useState(new Date());
+
+    useEffect(() => {
+        const timer = setInterval(() => setTime(new Date()), 1000);
+        return () => clearInterval(timer);
+    }, []);
+
+    const getTimeTheme = () => {
+        const hour = time.getHours();
+        if (hour >= 5 && hour < 11) return {
+            greeting: 'Selamat Pagi',
+            class: 'bg-gradient-to-br from-amber-50 to-orange-100 dark:from-amber-950/40 dark:to-orange-900/40 border-amber-200 dark:border-amber-800/30 shadow-sm',
+            text: 'text-amber-950 dark:text-amber-50',
+            subtext: 'text-amber-900/70 dark:text-amber-200/70',
+            decoration: 'bg-amber-500/10 dark:bg-amber-500/20',
+            pageBackground: 'bg-amber-50/50 dark:bg-amber-950/10',
+            card: 'bg-white/80 dark:bg-amber-900/10 backdrop-blur-sm border-amber-200/50 dark:border-amber-800/20',
+            placeholder: 'stroke-amber-500/20 dark:stroke-amber-400/20'
+        };
+
+        if (hour >= 11 && hour < 15) return {
+            greeting: 'Selamat Siang',
+            class: 'bg-gradient-to-br from-sky-50 to-blue-100 dark:from-sky-950/40 dark:to-blue-900/40 border-sky-200 dark:border-sky-800/30 shadow-sm',
+            text: 'text-sky-950 dark:text-sky-50',
+            subtext: 'text-sky-900/70 dark:text-sky-200/70',
+            decoration: 'bg-sky-500/10 dark:bg-sky-500/20',
+            pageBackground: 'bg-sky-50/50 dark:bg-sky-950/10',
+            card: 'bg-white/80 dark:bg-sky-900/10 backdrop-blur-sm border-sky-200/50 dark:border-sky-800/20',
+            placeholder: 'stroke-sky-500/20 dark:stroke-sky-400/20'
+        };
+
+        if (hour >= 15 && hour < 19) return {
+            greeting: 'Selamat Sore',
+            class: 'bg-gradient-to-br from-orange-50 to-purple-100 dark:from-orange-950/40 dark:to-purple-900/40 border-orange-200 dark:border-orange-800/30 shadow-sm',
+            text: 'text-orange-950 dark:text-orange-50',
+            subtext: 'text-orange-900/70 dark:text-orange-200/70',
+            decoration: 'bg-orange-500/10 dark:bg-orange-500/20',
+            pageBackground: 'bg-orange-50/50 dark:bg-orange-950/10',
+            card: 'bg-white/80 dark:bg-orange-900/10 backdrop-blur-sm border-orange-200/50 dark:border-orange-800/20',
+            placeholder: 'stroke-orange-500/20 dark:stroke-orange-400/20'
+        };
+
+        return {
+            greeting: 'Selamat Malam',
+            class: 'bg-gradient-to-br from-slate-900 via-indigo-950 to-black text-white border-indigo-500/20 shadow-indigo-950',
+            text: 'text-indigo-50 drop-shadow-md',
+            subtext: 'text-indigo-200/70 drop-shadow-sm',
+            decoration: 'bg-indigo-500/20',
+            pageBackground: 'bg-slate-100 dark:bg-slate-950',
+            card: 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800',
+            placeholder: 'stroke-slate-300 dark:stroke-slate-700'
+        };
+    };
+
+    const theme = getTimeTheme();
+    const hour = time.getHours();
+
+    const formattedTime = time.toLocaleTimeString('id-ID', {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+    });
+
+    const formattedDate = time.toLocaleDateString('id-ID', {
+        weekday: 'long',
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+    });
+
     return (
         <>
             <Head title="Dashboard" />
-            <div className="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4">
-                <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                    <div className="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
-                        <PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />
+            <div className={`flex h-full min-h-screen flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4 transition-colors duration-1000`}>
+                {/* Welcome Section */}
+                <div className={`relative flex flex-col justify-between gap-4 overflow-hidden rounded-xl border p-6 shadow-2xl transition-all duration-1000 md:flex-row md:items-center ${theme.class}`}>
+                    {/* Decorative Elements */}
+                    <div className={`absolute -right-10 -top-10 h-40 w-40 rounded-full blur-3xl ${theme.decoration} opacity-60`} />
+                    <div className={`absolute -bottom-10 left-1/3 h-32 w-32 rounded-full blur-3xl ${theme.decoration} opacity-40`} />
+
+                    <div className="z-10">
+                        <h1 className={`text-3xl font-extrabold tracking-tight ${theme.text}`}>
+                            {theme.greeting}, {auth.user.name}!
+                        </h1>
+                        <p className={`mt-1 text-lg font-medium ${theme.subtext}`}>
+                            Senang melihat Anda kembali. Berikut adalah ringkasan bisnis Anda hari ini.
+                        </p>
                     </div>
-                    <div className="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
-                        <PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />
-                    </div>
-                    <div className="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
-                        <PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />
+
+                    <div className="z-10 flex flex-col items-start gap-4 md:flex-row md:items-center md:gap-8">
+                        <DynamicScene hour={hour} />
+                        <div className="flex flex-col items-start gap-1 md:items-end">
+                            <div className={`text-4xl font-mono font-black tracking-tighter ${theme.text}`}>
+                                {formattedTime}
+                            </div>
+                            <div className={`text-sm font-bold uppercase tracking-wider ${theme.subtext}`}>
+                                {formattedDate}
+                            </div>
+                        </div>
                     </div>
                 </div>
-                <div className="relative min-h-[100vh] flex-1 overflow-hidden rounded-xl border border-sidebar-border/70 md:min-h-min dark:border-sidebar-border">
-                    <PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />
+
+                <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                    <div className={`relative aspect-video overflow-hidden rounded-xl border transition-all duration-1000`}>
+                        <PlaceholderPattern className={`absolute inset-0 size-full transition-colors duration-1000`} />
+                    </div>
+                    <div className={`relative aspect-video overflow-hidden rounded-xl border transition-all duration-1000`}>
+                        <PlaceholderPattern className={`absolute inset-0 size-full transition-colors duration-1000`} />
+                    </div>
+                    <div className={`relative aspect-video overflow-hidden rounded-xl border transition-all duration-1000`}>
+                        <PlaceholderPattern className={`absolute inset-0 size-full transition-colors duration-1000`} />
+                    </div>
+                </div>
+                <div className={`relative min-h-[100vh] flex-1 overflow-hidden rounded-xl border transition-all duration-1000 md:min-h-min`}>
+                    <PlaceholderPattern className={`absolute inset-0 size-full transition-colors duration-1000`} />
                 </div>
             </div>
         </>
@@ -29,7 +174,7 @@ export default function Dashboard() {
 Dashboard.layout = {
     breadcrumbs: [
         {
-            title: 'Dashboard',
+            title: 'Dasbor',
             href: dashboard(),
         },
     ],