feat: Implement interactive onboarding tour and fix redundant UI code

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>
   );
 };

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 ${

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;

frontend/src/pages/EmployeeEntry.tsx

@@ -267,17 +267,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>

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"

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');