From 12e982b3e577c17ef89a474c57637097de940ec9 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Wed, 5 Nov 2025 10:27:16 +0700
Subject: [PATCH] feat: Add WordPress button, settings navigation, and
 placeholder pages

---
 admin-spa/src/App.tsx                      | 37 ++++++++++++++++------
 admin-spa/src/nav/tree.ts                  | 22 ++++++++-----
 admin-spa/src/routes/Settings/General.tsx  | 19 +++++++++++
 admin-spa/src/routes/Settings/Payments.tsx | 19 +++++++++++
 admin-spa/src/routes/Settings/Shipping.tsx | 19 +++++++++++
 admin-spa/src/routes/Settings/index.tsx    | 25 +++++++++++++--
 6 files changed, 122 insertions(+), 19 deletions(-)
 create mode 100644 admin-spa/src/routes/Settings/General.tsx
 create mode 100644 admin-spa/src/routes/Settings/Payments.tsx
 create mode 100644 admin-spa/src/routes/Settings/Shipping.tsx

diff --git a/admin-spa/src/App.tsx b/admin-spa/src/App.tsx
index 5423d18..b2f2f1d 100644
--- a/admin-spa/src/App.tsx
+++ b/admin-spa/src/App.tsx
@@ -187,6 +187,9 @@ function useIsDesktop(minWidth = 1024) { // lg breakpoint
 }
 
 import SettingsIndex from '@/routes/Settings';
+import SettingsGeneral from '@/routes/Settings/General';
+import SettingsPayments from '@/routes/Settings/Payments';
+import SettingsShipping from '@/routes/Settings/Shipping';
 
 function SettingsRedirect() {
   return <SettingsIndex />;
@@ -279,13 +282,22 @@ function Header({ onFullscreen, fullscreen, showToggle = true }: { onFullscreen:
       <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>
+          <>
+            <a
+              href={window.WNW_CONFIG?.wpAdminUrl || '/wp-admin'}
+              className="inline-flex items-center gap-2 border rounded-md px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground"
+              title="Go to WordPress Admin"
+            >
+              <span>{__('WordPress')}</span>
+            </a>
+            <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
@@ -346,8 +358,15 @@ function AppRoutes() {
       {/* Customers */}
       <Route path="/customers" element={<CustomersIndex />} />
 
-      {/* Settings (SPA placeholder) */}
-      <Route path="/settings/*" element={<SettingsRedirect />} />
+      {/* Settings */}
+      <Route path="/settings" element={<SettingsIndex />} />
+      <Route path="/settings/general" element={<SettingsGeneral />} />
+      <Route path="/settings/payments" element={<SettingsPayments />} />
+      <Route path="/settings/shipping" element={<SettingsShipping />} />
+      <Route path="/settings/products" element={<SettingsIndex />} />
+      <Route path="/settings/tax" element={<SettingsIndex />} />
+      <Route path="/settings/accounts" element={<SettingsIndex />} />
+      <Route path="/settings/emails" element={<SettingsIndex />} />
 
       {/* Dynamic Addon Routes */}
       {addonRoutes.map((route: any) => (
diff --git a/admin-spa/src/nav/tree.ts b/admin-spa/src/nav/tree.ts
index 028b52d..92cd68c 100644
--- a/admin-spa/src/nav/tree.ts
+++ b/admin-spa/src/nav/tree.ts
@@ -103,15 +103,21 @@ function getStaticFallbackTree(): MainNode[] {
       path: '/settings',
       icon: 'settings',
       children: [
-        { label: 'General',  mode: 'bridge', href: `${admin}?page=wc-settings&tab=general` },
-        { label: 'Products', mode: 'bridge', href: `${admin}?page=wc-settings&tab=products` },
-        { label: 'Tax',      mode: 'bridge', href: `${admin}?page=wc-settings&tab=tax` },
-        { label: 'Shipping', mode: 'bridge', href: `${admin}?page=wc-settings&tab=shipping` },
-        { label: 'Payments', mode: 'bridge', href: `${admin}?page=wc-settings&tab=checkout` },
-        { label: 'Accounts & Privacy', mode: 'bridge', href: `${admin}?page=wc-settings&tab=account` },
-        { label: 'Emails',   mode: 'bridge', href: `${admin}?page=wc-settings&tab=email` },
-        { label: 'Integration', mode: 'bridge', href: `${admin}?page=wc-settings&tab=integration` },
+        // WooNooW Settings
+        { label: 'WooNooW', mode: 'spa', path: '/settings' },
+        
+        // WooCommerce Settings (Most Used First)
+        { label: 'General',  mode: 'spa', path: '/settings/general' },
+        { label: 'Payments', mode: 'spa', path: '/settings/payments' },
+        { label: 'Shipping', mode: 'spa', path: '/settings/shipping' },
+        { label: 'Products', mode: 'spa', path: '/settings/products' },
+        { label: 'Tax',      mode: 'spa', path: '/settings/tax' },
+        { label: 'Accounts & Privacy', mode: 'spa', path: '/settings/accounts' },
+        { label: 'Emails',   mode: 'spa', path: '/settings/emails' },
+        
+        // Less Common (Bridge to WP Admin for now)
         { label: 'Advanced', mode: 'bridge', href: `${admin}?page=wc-settings&tab=advanced` },
+        { label: 'Integration', mode: 'bridge', href: `${admin}?page=wc-settings&tab=integration` },
         { label: 'Status',   mode: 'bridge', href: `${admin}?page=wc-status` },
         { label: 'Extensions', mode: 'bridge', href: `${admin}?page=wc-addons` },
       ],
diff --git a/admin-spa/src/routes/Settings/General.tsx b/admin-spa/src/routes/Settings/General.tsx
new file mode 100644
index 0000000..49fa64b
--- /dev/null
+++ b/admin-spa/src/routes/Settings/General.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { __ } from '@/lib/i18n';
+
+export default function SettingsGeneral() {
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold mb-6">{__('General Settings')}</h1>
+      <p className="text-muted-foreground mb-4">
+        {__('Configure general store settings including store address, currency, and more.')}
+      </p>
+      
+      <div className="bg-muted/50 border rounded-lg p-6">
+        <p className="text-sm text-muted-foreground">
+          {__('Settings interface coming soon. This will replicate WooCommerce general settings.')}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/admin-spa/src/routes/Settings/Payments.tsx b/admin-spa/src/routes/Settings/Payments.tsx
new file mode 100644
index 0000000..744b6c8
--- /dev/null
+++ b/admin-spa/src/routes/Settings/Payments.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { __ } from '@/lib/i18n';
+
+export default function SettingsPayments() {
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold mb-6">{__('Payment Settings')}</h1>
+      <p className="text-muted-foreground mb-4">
+        {__('Configure payment gateways and options.')}
+      </p>
+      
+      <div className="bg-muted/50 border rounded-lg p-6">
+        <p className="text-sm text-muted-foreground">
+          {__('Payment settings interface coming soon. This will include payment gateway configuration.')}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/admin-spa/src/routes/Settings/Shipping.tsx b/admin-spa/src/routes/Settings/Shipping.tsx
new file mode 100644
index 0000000..d8ef701
--- /dev/null
+++ b/admin-spa/src/routes/Settings/Shipping.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { __ } from '@/lib/i18n';
+
+export default function SettingsShipping() {
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold mb-6">{__('Shipping Settings')}</h1>
+      <p className="text-muted-foreground mb-4">
+        {__('Configure shipping zones, methods, and rates.')}
+      </p>
+      
+      <div className="bg-muted/50 border rounded-lg p-6">
+        <p className="text-sm text-muted-foreground">
+          {__('Shipping settings interface coming soon. This will include zones, methods, and rates configuration.')}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/admin-spa/src/routes/Settings/index.tsx b/admin-spa/src/routes/Settings/index.tsx
index fd6a894..1fb8627 100644
--- a/admin-spa/src/routes/Settings/index.tsx
+++ b/admin-spa/src/routes/Settings/index.tsx
@@ -4,8 +4,29 @@ import { __ } from '@/lib/i18n';
 export default function SettingsIndex() {
   return (
     <div>
-      <h1 className="text-xl font-semibold mb-3">{__('Settings')}</h1>
-      <p className="opacity-70">{__('Coming soon — SPA settings.')}</p>
+      <h1 className="text-2xl font-semibold mb-6">{__('WooNooW Settings')}</h1>
+      <p className="text-muted-foreground mb-6">
+        {__('Configure WooNooW plugin settings and preferences.')}
+      </p>
+      
+      <div className="space-y-6">
+        <div className="bg-card border rounded-lg p-6">
+          <h2 className="text-lg font-semibold mb-3">{__('Plugin Configuration')}</h2>
+          <p className="text-sm text-muted-foreground mb-4">
+            {__('Settings interface coming soon.')}
+          </p>
+        </div>
+        
+        <div className="bg-card border rounded-lg p-6">
+          <h2 className="text-lg font-semibold mb-3">{__('Quick Links')}</h2>
+          <div className="space-y-2">
+            <p className="text-sm">
+              <span className="font-medium">{__('WooCommerce Settings:')}</span>{' '}
+              {__('Use the navigation menu to access General, Payments, Shipping, and other WooCommerce settings.')}
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
\ No newline at end of file