From 9448f2ceacaf8420acc94e9219564c5fdb637d90 Mon Sep 17 00:00:00 2001
From: rampop <rampop@pop-os.lan>
Date: Wed, 25 Mar 2026 12:37:35 -0500
Subject: [PATCH 1/2] feat: Implement onboarding tour and fix redundant UI code

---
 frontend/src/components/AppLayout.tsx   | 29 ++++++++++++++++++++++++-
 frontend/src/components/AppNav.tsx      |  2 ++
 frontend/src/pages/EmployeeEntry.tsx    | 17 +++------------
 frontend/src/pages/PayrollScheduler.tsx |  1 +
 4 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/AppLayout.tsx b/frontend/src/components/AppLayout.tsx
index b2e3306f..4384181f 100644
--- a/frontend/src/components/AppLayout.tsx
+++ b/frontend/src/components/AppLayout.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Outlet, NavLink, useLocation } from 'react-router-dom';
 import ConnectAccount from '../components/ConnectAccount';
 import AppNav from './AppNav';
 import { LanguageSelector } from './LanguageSelector';
 import { ThemeToggle } from './ThemeToggle';
 import { useTranslation } from 'react-i18next';
+import { OnboardingTour } from './OnboardingTour';
 
 // ── Page Wrapper ───────────────────────
 const PageWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
@@ -15,6 +16,25 @@ const PageWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
 const AppLayout: React.FC = () => {
   const location = useLocation();
   useTranslation();
+  const [runTour, setRunTour] = useState(false);
+
+  useEffect(() => {
+    const hasCompletedTour = localStorage.getItem('payd_onboarding_completed');
+    if (!hasCompletedTour) {
+      const timer = setTimeout(() => setRunTour(true), 1500);
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
+  const handleTourComplete = () => {
+    localStorage.setItem('payd_onboarding_completed', 'true');
+    setRunTour(false);
+  };
+
+  const restartTour = () => {
+    localStorage.removeItem('payd_onboarding_completed');
+    setRunTour(true);
+  };
 
   return (
     <div
@@ -77,12 +97,19 @@ const AppLayout: React.FC = () => {
           >
             Apache License 2.0
           </a>
+          <button
+            onClick={restartTour}
+            className="ml-4 px-2 py-0.5 rounded border border-(--border-hi) hover:bg-(--accent)/10 hover:text-(--accent) transition-all text-[10px]"
+          >
+            QUICK TOUR
+          </button>
         </span>
         <div className="flex items-center gap-1.5">
           <div className="w-1.5 h-1.5 rounded-full bg-(--accent) shadow-[0_0_6px_var(--accent)]" />
           STELLAR NETWORK · MAINNET
         </div>
       </footer>
+      <OnboardingTour run={runTour} onComplete={handleTourComplete} />
     </div>
   );
 };
diff --git a/frontend/src/components/AppNav.tsx b/frontend/src/components/AppNav.tsx
index f8265039..0425ae40 100644
--- a/frontend/src/components/AppNav.tsx
+++ b/frontend/src/components/AppNav.tsx
@@ -40,6 +40,7 @@ const AppNav: React.FC = () => {
   const navLinks = (
     <>
       <NavLink
+        id="tour-payroll"
         to="/payroll"
         className={({ isActive }) =>
           `flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[13px] font-semibold transition ${
@@ -57,6 +58,7 @@ const AppNav: React.FC = () => {
       </NavLink>
 
       <NavLink
+        id="tour-employees"
         to="/employee"
         className={({ isActive }) =>
           `flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[13px] font-semibold transition ${
diff --git a/frontend/src/pages/EmployeeEntry.tsx b/frontend/src/pages/EmployeeEntry.tsx
index 384d345e..bd6cd959 100644
--- a/frontend/src/pages/EmployeeEntry.tsx
+++ b/frontend/src/pages/EmployeeEntry.tsx
@@ -131,9 +131,8 @@ export default function EmployeeEntry() {
     );
 
     setNotification({
-      message: `Employee ${submitData.fullName} added successfully! ${
-        generatedWallet ? 'A wallet was created for them.' : ''
-      }`,
+      message: `Employee ${submitData.fullName} added successfully! ${generatedWallet ? 'A wallet was created for them.' : ''
+        }`,
       secretKey: generatedWallet?.secretKey,
       walletAddress: submitData.walletAddress,
       employeeName: submitData.fullName,
@@ -267,17 +266,7 @@ export default function EmployeeEntry() {
                 <HelpLink topic="trustline" variant="icon-text" size="sm" />
               </div>
             </div>
-            <Select
-              id="currency"
-              fieldSize="md"
-              label="Preferred Currency"
-              value={formData.currency}
-              onChange={(e) => handleSelectChange('currency', e.target.value)}
-            >
-              <option value="USDC">USDC</option>
-              <option value="XLM">XLM</option>
-              <option value="EURC">EURC</option>
-            </Select>
+
             <Button type="submit" variant="primary" size="md">
               Add Employee
             </Button>
diff --git a/frontend/src/pages/PayrollScheduler.tsx b/frontend/src/pages/PayrollScheduler.tsx
index 1452a7bb..5b644b54 100644
--- a/frontend/src/pages/PayrollScheduler.tsx
+++ b/frontend/src/pages/PayrollScheduler.tsx
@@ -510,6 +510,7 @@ export default function PayrollScheduler() {
               <div className="md:col-span-2 pt-4">
                 {!simulationPassed ? (
                   <Button
+                    id="tour-init-payroll"
                     type="submit"
                     disabled={isSimulating}
                     variant="primary"

From f483b0ce6680273b91a18306e71d9d1a8ae4ddd1 Mon Sep 17 00:00:00 2001
From: rampop <rampop@pop-os.lan>
Date: Wed, 25 Mar 2026 12:49:29 -0500
Subject: [PATCH 2/2] chore: Fix formatting and lint warnings in EmployeeEntry,
 CrossAssetPayment and ThemeProvider

---
 frontend/src/pages/CrossAssetPayment.tsx | 2 +-
 frontend/src/pages/EmployeeEntry.tsx     | 5 +++--
 frontend/src/providers/ThemeProvider.tsx | 1 -
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/CrossAssetPayment.tsx b/frontend/src/pages/CrossAssetPayment.tsx
index 2063d4a4..7b7a1539 100644
--- a/frontend/src/pages/CrossAssetPayment.tsx
+++ b/frontend/src/pages/CrossAssetPayment.tsx
@@ -71,7 +71,7 @@ export default function CrossAssetPayment() {
       clearTimeout(timeout);
       setIsLoadingPaths(false);
     };
-  }, [amount, assetIn, assetOut, notifyError]);
+  }, [amount, assetIn, assetOut, notifyApiError]);
 
   useEffect(() => {
     if (!socket || !submissionTxHash) return;
diff --git a/frontend/src/pages/EmployeeEntry.tsx b/frontend/src/pages/EmployeeEntry.tsx
index bd6cd959..6c2d19fc 100644
--- a/frontend/src/pages/EmployeeEntry.tsx
+++ b/frontend/src/pages/EmployeeEntry.tsx
@@ -131,8 +131,9 @@ export default function EmployeeEntry() {
     );
 
     setNotification({
-      message: `Employee ${submitData.fullName} added successfully! ${generatedWallet ? 'A wallet was created for them.' : ''
-        }`,
+      message: `Employee ${submitData.fullName} added successfully! ${
+        generatedWallet ? 'A wallet was created for them.' : ''
+      }`,
       secretKey: generatedWallet?.secretKey,
       walletAddress: submitData.walletAddress,
       employeeName: submitData.fullName,
diff --git a/frontend/src/providers/ThemeProvider.tsx b/frontend/src/providers/ThemeProvider.tsx
index 56d86356..4a2c4838 100644
--- a/frontend/src/providers/ThemeProvider.tsx
+++ b/frontend/src/providers/ThemeProvider.tsx
@@ -9,7 +9,6 @@ interface ThemeContextType {
 
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
-// eslint-disable-next-line react-refresh/only-export-components
 export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [theme, setTheme] = useState<Theme>(() => {
     const saved = localStorage.getItem('payd-theme');