From 04e02f1d67ea3374d01064c96f7051486c5c3853 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Wed, 5 Nov 2025 00:00:59 +0700
Subject: [PATCH] feat: Fix Overview always active, add Refresh button, add
 Logout in standalone

---
 admin-spa/src/App.tsx                         | 23 +++++++++++
 .../components/nav/DashboardSubmenuBar.tsx    | 39 ++++++++++++-------
 admin-spa/src/nav/tree.ts                     |  2 +-
 3 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/admin-spa/src/App.tsx b/admin-spa/src/App.tsx
index 701afd3..1226bb1 100644
--- a/admin-spa/src/App.tsx
+++ b/admin-spa/src/App.tsx
@@ -259,11 +259,34 @@ function AddonRoute({ config }: { config: any }) {
 
 function Header({ onFullscreen, fullscreen, showToggle = true }: { onFullscreen: () => void; fullscreen: boolean; showToggle?: boolean }) {
   const siteTitle = (window as any).wnw?.siteTitle || 'WooNooW';
+  const isStandalone = window.WNW_CONFIG?.standaloneMode ?? false;
+  
+  const handleLogout = async () => {
+    try {
+      await fetch(window.WNW_CONFIG.restUrl + '/auth/logout', {
+        method: 'POST',
+        credentials: 'include',
+      });
+      window.location.reload();
+    } catch (err) {
+      console.error('Logout failed:', err);
+    }
+  };
+  
   return (
     <header className={`h-16 border-b border-border flex items-center px-4 justify-between sticky ${fullscreen ? `top-0` : `top-[32px]`} z-40 bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60`}>
       <div className="font-semibold">{siteTitle}</div>
       <div className="flex items-center gap-3">
         <div className="text-sm opacity-70 hidden sm:block">{window.WNW_API?.isDev ? 'Dev Server' : 'Production'}</div>
+        {isStandalone && (
+          <button
+            onClick={handleLogout}
+            className="inline-flex items-center gap-2 border rounded-md px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground"
+            title="Logout"
+          >
+            <span>{__('Logout')}</span>
+          </button>
+        )}
         {showToggle && (
           <button
             onClick={onFullscreen}
diff --git a/admin-spa/src/components/nav/DashboardSubmenuBar.tsx b/admin-spa/src/components/nav/DashboardSubmenuBar.tsx
index be9c76e..f6357b2 100644
--- a/admin-spa/src/components/nav/DashboardSubmenuBar.tsx
+++ b/admin-spa/src/components/nav/DashboardSubmenuBar.tsx
@@ -1,16 +1,24 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { DummyDataToggle } from '@/components/DummyDataToggle';
-import { useDashboardContext } from '@/contexts/DashboardContext';
+import { Button } from '@/components/ui/button';
+import { RefreshCw } from 'lucide-react';
+import { useDashboardPeriod } from '@/hooks/useDashboardPeriod';
+import { DummyDataToggle } from '../DummyDataToggle';
 import { __ } from '@/lib/i18n';
+import { useQueryClient } from '@tanstack/react-query';
 import type { SubItem } from '@/nav/tree';
 
 type Props = { items?: SubItem[]; fullscreen?: boolean };
 
 export default function DashboardSubmenuBar({ items = [], fullscreen = false }: Props) {
-  const { period, setPeriod } = useDashboardContext();
+  const { period, useDummy } = useDashboardPeriod();
   const { pathname } = useLocation();
+  const queryClient = useQueryClient();
+  
+  const handleRefresh = () => {
+    queryClient.invalidateQueries({ queryKey: ['analytics'] });
+  };
 
   if (items.length === 0) return null;
 
@@ -56,20 +64,21 @@ export default function DashboardSubmenuBar({ items = [], fullscreen = false }:
             })}
           </div>
 
-          {/* Period Selector & Dummy Toggle */}
+          {/* Refresh & Dummy Toggle */}
           <div className="flex items-center gap-2 flex-shrink-0">
+            {!useDummy && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleRefresh}
+                className="h-8"
+                title={__('Refresh data (cached for 5 minutes)')}
+              >
+                <RefreshCw className="w-4 h-4 mr-1" />
+                {__('Refresh')}
+              </Button>
+            )}
             <DummyDataToggle />
-            <Select value={period} onValueChange={setPeriod}>
-              <SelectTrigger className="w-[140px] h-8">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="7">{__('Last 7 days')}</SelectItem>
-                <SelectItem value="14">{__('Last 14 days')}</SelectItem>
-                <SelectItem value="30">{__('Last 30 days')}</SelectItem>
-                <SelectItem value="all">{__('All Time')}</SelectItem>
-              </SelectContent>
-            </Select>
           </div>
         </div>
       </div>
diff --git a/admin-spa/src/nav/tree.ts b/admin-spa/src/nav/tree.ts
index 972f761..5413c4d 100644
--- a/admin-spa/src/nav/tree.ts
+++ b/admin-spa/src/nav/tree.ts
@@ -49,7 +49,7 @@ function getStaticFallbackTree(): MainNode[] {
       path: '/',
       icon: 'layout-dashboard',
       children: [
-        { label: 'Overview', mode: 'spa', path: '/dashboard' },
+        { label: 'Overview', mode: 'spa', path: '/dashboard', exact: true },
         { label: 'Revenue', mode: 'spa', path: '/dashboard/revenue' },
         { label: 'Orders', mode: 'spa', path: '/dashboard/orders' },
         { label: 'Products', mode: 'spa', path: '/dashboard/products' },