page.tsx

Go to the documentation of this file.

"use client";
import { useState } from "react";
import Link from "next/link";
import { Icon } from '@/contexts/IconContext';
 
export default function StartHerePage() {
  const [activeGuide, setActiveGuide] = useState<string>("overview");
 
  const guides = [
    { id: "overview", title: "Getting Started", icon: "rocket_launch" },
    { id: "interface", title: "Understanding the Interface", icon: "computer" },
    { id: "sales", title: "Making Sales", icon: "payments" },
    { id: "customers", title: "Managing Customers", icon: "groups" },
    { id: "products", title: "Product Management", icon: "inventory_2" },
    { id: "stock", title: "Stock Takes", icon: "fact_check" },
    { id: "search", title: "Search & Filters", icon: "search" },
    { id: "reports", title: "Reports & Analytics", icon: "assessment" },
    { id: "tips", title: "Tips & Best Practices", icon: "tips_and_updates" },
  ];
 
  return (
    <div className="min-h-screen bg-bg">
      {/* Header */}
      <div className="py-12 px-6" style={{ background: 'linear-gradient(to right, #2563eb, #7c3aed)' }}>
        <div className="max-w-7xl mx-auto">
          <h1 className="text-4xl font-bold mb-3 flex items-center gap-3" style={{ color: 'white' }}>
            <Icon name="rocket_launch" size={40} />
            Welcome to Everyday POS
          </h1>
          <p className="text-xl" style={{ color: 'rgba(255, 255, 255, 0.9)' }}>Your complete guide to using the dashboard</p>
        </div>
      </div>
 
      <div className="max-w-7xl mx-auto py-8 px-6">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
          {/* Sidebar Navigation */}
          <div className="lg:col-span-1">
            <div className="bg-surface rounded-lg shadow-sm p-4 sticky top-6">
              <h3 className="font-semibold text-text mb-3">Quick Guide</h3>
              <nav className="space-y-1">
                {guides.map((guide) => (
                  <button
                    key={guide.id}
                    onClick={() => setActiveGuide(guide.id)}
                    className={`w-full text-left px-3 py-2 rounded-md text-sm transition-colors flex items-center gap-2 ${
                      activeGuide === guide.id
                        ? "bg-brand/10 text-brand font-medium"
                        : "text-text hover:bg-surface-2"
                    }`}
                  >
                    <Icon name={guide.icon} size={18} />
                    {guide.title}
                  </button>
                ))}
              </nav>
 
              <div className="mt-6 pt-6 border-t border-border">
                <Link 
                  href="/pages/technical/documentation"
                  className="text-sm text-brand hover:text-brand/80 flex items-center gap-1"
                >
                  <Icon name="menu_book" size={18} />
                  Technical Documentation →
                </Link>
              </div>
            </div>
          </div>
 
          {/* Main Content */}
          <div className="lg:col-span-3">
            <div className="bg-surface rounded-lg shadow-sm p-8">
              {activeGuide === "overview" && (
                <div className="space-y-6">
                  <h2 className="text-3xl font-bold text-text">Getting Started</h2>
                  
                  <div className="bg-info/10 border border-info/30 rounded-lg p-6">
                    <h3 className="text-lg font-semibold text-text mb-2 flex items-center gap-2">
                      <Icon name="waving_hand" size={24} />
                      Welcome to Everyday POS!
                    </h3>
                    <p className="text-text mb-3">
                      This guide will help you learn the essential features of Everyday POS. Even if you're an 
                      experienced user, spending 5 minutes here might teach you something new!
                    </p>
                    <p className="text-sm text-muted">
                      Select a topic from the sidebar to get started, or explore the quick access cards below.
                    </p>
                  </div>
 
                  <div className="bg-warn/10 border border-warn/30 rounded-lg p-4">
                    <h3 className="text-sm font-semibold text-text mb-2 flex items-center gap-2">
                      <Icon name="lightbulb" size={20} />
                      What Makes This System Different?
                    </h3>
                    <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                      <li><strong>Real-time updates</strong> - Changes are reflected immediately across all devices</li>
                      <li><strong>Smart search</strong> - Find products, customers, and data quickly with intelligent search</li>
                      <li><strong>Flexible reporting</strong> - Generate reports on-demand with customizable date ranges</li>
                      <li><strong>Multi-location support</strong> - Manage multiple stores from one dashboard</li>
                      <li><strong>Dual dashboard</strong> - Switch between Store and Retailer views for different operational needs</li>
                      <li><strong>Audit trails</strong> - Complete staff activity logging and system transaction monitoring</li>
                      <li><strong>Technical controls</strong> - Advanced security, compliance, and diagnostics tools</li>
                    </ul>
                  </div>
 
                  <div className="bg-success/10 border border-success/30 rounded-lg p-4 mt-4">
                    <h3 className="text-sm font-semibold text-text mb-2 flex items-center gap-2">
                      <Icon name="new_releases" size={20} />
                      Recently Added Features
                    </h3>
                    <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                      <li><strong>Audit Logs</strong> - Track staff login/logout activity and system transactions</li>
                      <li><strong>Store Management</strong> - Full CRUD operations for location management with topology view</li>
                      <li><strong>POS Lane Configuration</strong> - Manage lane profiles and hardware settings</li>
                      <li><strong>Device Management</strong> - Configure barcode scanners, printers, EFTPOS, cameras, scales</li>
                      <li><strong>Retail Operations</strong> - Sale processing, pricing, stock control, loyalty, gift cards, EOD</li>
                      <li><strong>Technical Settings</strong> - Security, firewall, GDPR, PCI, network topology, database</li>
                      <li><strong>Media Management</strong> - Photo storage, cloud integration, receipt format customization</li>
                    </ul>
                  </div>
 
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
                    <div className="border border-border rounded-lg p-6 hover:shadow-md transition-shadow">
                      <div className="flex items-center gap-2 mb-3">
                        <Icon name="computer" size={32} className="text-info" />
                      </div>
                      <h3 className="text-lg font-semibold text-text mb-2">Understanding the Interface</h3>
                      <p className="text-muted text-sm mb-4">
                        Learn how to navigate the dashboard, use search features, and customize your view
                      </p>
                      <button
                        onClick={() => setActiveGuide("interface")}
                        className="text-brand hover:text-brand/80 text-sm font-medium"
                      >
                        Learn more →
                      </button>
                    </div>
 
                    <div className="border border-border rounded-lg p-6 hover:shadow-md transition-shadow">
                      <div className="flex items-center gap-2 mb-3">
                        <Icon name="payments" size={32} className="text-success" />
                      </div>
                      <h3 className="text-lg font-semibold text-text mb-2">Making Sales</h3>
                      <p className="text-muted text-sm mb-4">
                        Learn how to process sales, accept payments, and handle returns
                      </p>
                      <button
                        onClick={() => setActiveGuide("sales")}
                        className="text-brand hover:text-brand/80 text-sm font-medium"
                      >
                        Learn more →
                      </button>
                    </div>
 
                    <div className="border border-border rounded-lg p-6 hover:shadow-md transition-shadow">
                      <div className="flex items-center gap-2 mb-3">
                        <Icon name="groups" size={32} className="text-brand2" />
                      </div>
                      <h3 className="text-lg font-semibold text-text mb-2">Managing Customers</h3>
                      <p className="text-muted text-sm mb-4">
                        Add new customers, track loyalty, and manage accounts
                      </p>
                      <button
                        onClick={() => setActiveGuide("customers")}
                        className="text-brand hover:text-brand/80 text-sm font-medium"
                      >
                        Learn more →
                      </button>
                    </div>
 
                    <div className="border border-border rounded-lg p-6 hover:shadow-md transition-shadow">
                      <div className="flex items-center gap-2 mb-3">
                        <Icon name="inventory_2" size={32} className="text-warn" />
                      </div>
                      <h3 className="text-lg font-semibold text-text mb-2">Product Management</h3>
                      <p className="text-muted text-sm mb-4">
                        Update product information, pricing, and inventory
                      </p>
                      <button
                        onClick={() => setActiveGuide("products")}
                        className="text-brand hover:text-brand/80 text-sm font-medium"
                      >
                        Learn more →
                      </button>
                    </div>
 
                    <div className="border border-border rounded-lg p-6 hover:shadow-md transition-shadow">
                      <div className="flex items-center gap-2 mb-3">
                        <Icon name="fact_check" size={32} className="text-brand" />
                      </div>
                      <h3 className="text-lg font-semibold text-text mb-2">Stock Takes</h3>
                      <p className="text-muted text-sm mb-4">
                        Create and manage stocktakes to keep inventory accurate
                      </p>
                      <button
                        onClick={() => setActiveGuide("stock")}
                        className="text-brand hover:text-brand/80 text-sm font-medium"
                      >
                        Learn more →
                      </button>
                    </div>
 
                    <div className="border border-border rounded-lg p-6 hover:shadow-md transition-shadow">
                      <div className="flex items-center gap-2 mb-3">
                        <Icon name="search" size={32} className="text-info" />
                      </div>
                      <h3 className="text-lg font-semibold text-text mb-2">Search & Filters</h3>
                      <p className="text-muted text-sm mb-4">
                        Master the search functionality to find anything quickly
                      </p>
                      <button
                        onClick={() => setActiveGuide("search")}
                        className="text-brand hover:text-brand/80 text-sm font-medium"
                      >
                        Learn more →
                      </button>
                    </div>
                  </div>
 
                  <div className="mt-8 p-6 bg-success/10 border border-success/30 rounded-lg">
                    <h3 className="text-lg font-semibold text-text mb-2 flex items-center gap-2">
                      <Icon name="navigation" size={24} />
                      Quick Navigation Tips
                    </h3>
                    <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                      <li>Use the left sidebar to navigate between different sections</li>
                      <li>Click on section headers in tables to sort by that column</li>
                      <li>Look for the Refresh button to reload data</li>
                      <li>Most pages have search and filter options at the top</li>
                      <li>Check the <Link href="/pages/technical/documentation" className="underline font-medium text-brand hover:text-brand/80">Technical Documentation</Link> for developer guides</li>
                    </ul>
                  </div>
                </div>
              )}
 
              {activeGuide === "interface" && (
                <div className="space-y-6">
                  <h2 className="text-3xl font-bold text-text flex items-center gap-2">
                    <Icon name="computer" size={40} />
                    Understanding the Interface
                  </h2>
                  
                  <div className="space-y-4">
                    <div className="border-l-4 border-info bg-info/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Navigation Layout</h3>
                      <p className="text-text text-sm mb-3">
                        The dashboard uses a consistent layout across all pages:
                      </p>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li><strong>Left Sidebar</strong> - Main navigation menu organized by category</li>
                        <li><strong>Top Bar</strong> - Page title and primary action buttons</li>
                        <li><strong>Content Area</strong> - Main workspace with data and forms</li>
                        <li><strong>Bottom Area</strong> - Pagination and additional controls</li>
                      </ul>
                    </div>
 
                    <div className="border-l-4 border-success bg-success/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Working with Tables</h3>
                      <p className="text-text text-sm mb-2">
                        Most data is displayed in sortable tables:
                      </p>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li><strong>Click column headers</strong> to sort ascending</li>
                        <li><strong>Click again</strong> to sort descending</li>
                        <li><strong>Use search boxes</strong> to filter visible rows</li>
                        <li><strong>Pagination controls</strong> navigate through large datasets</li>
                        <li>Sorting is instant and happens in your browser</li>
                      </ul>
                    </div>
 
                    <div className="border-l-4 border-brand2 bg-brand2/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Action Buttons</h3>
                      <div className="space-y-2 text-sm">
                        <div className="flex items-center gap-3">
                          <span className="px-3 py-1 bg-info text-white rounded text-xs font-medium">View</span>
                          <span className="text-text">Opens details in a modal or new page</span>
                        </div>
                        <div className="flex items-center gap-3">
                          <span className="px-3 py-1 bg-success text-white rounded text-xs font-medium">Edit</span>
                          <span className="text-text">Modify existing records</span>
                        </div>
                        <div className="flex items-center gap-3">
                          <span className="px-3 py-1 bg-danger text-white rounded text-xs font-medium">Delete</span>
                          <span className="text-text">Remove records (asks for confirmation)</span>
                        </div>
                        <div className="flex items-center gap-3">
                          <span className="px-3 py-1 bg-surface-2 text-text border border-border rounded text-xs font-medium flex items-center gap-1">
                            <Icon name="refresh" size={14} />
                            Refresh
                          </span>
                          <span className="text-text">Reload data from server</span>
                        </div>
                      </div>
                    </div>
 
                    <div className="border-l-4 border-warn bg-warn/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Status Badges</h3>
                      <p className="text-text text-sm mb-3">
                        Color-coded badges indicate item status at a glance:
                      </p>
                      <div className="space-y-2 text-sm">
                        <div className="flex items-center gap-3">
                          <span className="px-2 py-1 bg-success/20 text-success rounded text-xs font-medium">Complete</span>
                          <span className="text-text">Finalized transactions</span>
                        </div>
                        <div className="flex items-center gap-3">
                          <span className="px-2 py-1 bg-warn/20 text-warn rounded text-xs font-medium">Pending</span>
                          <span className="text-text">In progress or awaiting action</span>
                        </div>
                        <div className="flex items-center gap-3">
                          <span className="px-2 py-1 bg-danger/20 text-danger rounded text-xs font-medium">LOW STOCK</span>
                          <span className="text-text">Inventory below minimum level</span>
                        </div>
                      </div>
                    </div>
 
                    <div className="border-l-4 border-brand bg-brand/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Modals & Popups</h3>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li>Click outside the modal or press <strong>×</strong> to close</li>
                        <li>Form changes are only saved when you click Save/Submit</li>
                        <li>Use Cancel to discard changes</li>
                        <li>Delete actions require confirmation</li>
                      </ul>
                    </div>
                  </div>
 
                  <div className="mt-6 p-4 bg-info/10 border border-info/30 rounded-lg">
                    <h3 className="font-semibold text-text mb-2 flex items-center gap-2">
                      <Icon name="tips_and_updates" size={20} />
                      Pro Tips
                    </h3>
                    <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                      <li>Most forms auto-save as you type</li>
                      <li>Use keyboard shortcuts: Enter to submit, Esc to close modals</li>
                      <li>Hover over buttons to see tooltips</li>
                      <li>Look for the (i) icon for additional help</li>
                    </ul>
                  </div>
                </div>
              )}
 
              {activeGuide === "sales" && (
                <div className="space-y-6">
                  <h2 className="text-3xl font-bold text-text flex items-center gap-2">
                    <Icon name="payments" size={40} />
                    Making Sales
                  </h2>
                  
                  <div className="space-y-4">
                    <div className="border-l-4 border-success bg-success/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Step 1: Navigate to Sales Page</h3>
                      <p className="text-text text-sm mb-2">
                        Click on <strong>Selling → Sell</strong> in the left sidebar
                      </p>
                      <Link 
                        href="/pages/sales"
                        className="inline-block mt-2 px-4 py-2 bg-success text-white rounded hover:bg-success/90 text-sm"
                      >
                        Go to Sales Page
                      </Link>
                    </div>
 
                    <div className="border-l-4 border-info bg-info/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Step 2: Add Products</h3>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li>Search for products by name, barcode, or SKU</li>
                        <li>Click on a product to add it to the cart</li>
                        <li>Adjust quantities as needed</li>
                        <li>Remove items by clicking the trash icon</li>
                      </ul>
                    </div>
 
                    <div className="border-l-4 border-brand2 bg-brand2/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Step 3: Select Customer (Optional)</h3>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li>Search for an existing customer</li>
                        <li>Link loyalty accounts for rewards</li>
                        <li>Leave blank for walk-in customers</li>
                      </ul>
                    </div>
 
                    <div className="border-l-4 border-warn bg-warn/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Step 4: Process Payment</h3>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li>Choose payment method: Cash, Card, or Other</li>
                        <li>Enter the payment amount</li>
                        <li>Click <strong>Complete Sale</strong> to finalize</li>
                        <li>Print or email receipt</li>
                      </ul>
                    </div>
                  </div>
 
                  <div className="mt-6 p-4 bg-warn/10 border border-warn/30 rounded-lg">
                    <h3 className="font-semibold text-text mb-2 flex items-center gap-2">
                      <Icon name="lightbulb" size={20} />
                      Tips & Tricks
                    </h3>
                    <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                      <li>Use barcode scanner for faster checkout</li>
                      <li>View recent sales in <strong>Selling → Invoices</strong></li>
                      <li>Check daily totals in <strong>Selling → End of Day</strong></li>
                    </ul>
                  </div>
                </div>
              )}
 
              {activeGuide === "customers" && (
                <div className="space-y-6">
                  <h2 className="text-3xl font-bold text-text flex items-center gap-2">
                    <Icon name="groups" size={40} />
                    Managing Customers
                  </h2>
                  
                  <div className="space-y-4">
                    <div className="border-l-4 border-success bg-success/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Adding New Customers</h3>
                      <p className="text-text text-sm mb-2">
                        Navigate to <strong>Customers → Customers</strong> and click <strong>+ Add Customer</strong>
                      </p>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2 mt-2">
                        <li>Enter customer name and contact information</li>
                        <li>Add email for digital receipts</li>
                        <li>Set up loyalty program if applicable</li>
                      </ul>
                      <Link 
                        href="/pages/customers"
                        className="inline-block mt-2 px-4 py-2 bg-success text-white rounded hover:bg-success/90 text-sm"
                      >
                        Manage Customers
                      </Link>
                    </div>
 
                    <div className="border-l-4 border-info bg-info/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Viewing Customer Details</h3>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li>Click on any customer to view their profile</li>
                        <li>See purchase history and account balance</li>
                        <li>Edit contact information as needed</li>
                        <li>View loyalty points and rewards</li>
                      </ul>
                    </div>
 
                    <div className="border-l-4 border-brand2 bg-brand2/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Loyalty Programs</h3>
                      <p className="text-text text-sm mb-2">
                        Go to <strong>Customers → Loyalty</strong> to manage rewards programs
                      </p>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li>Track customer loyalty points</li>
                        <li>Redeem rewards during checkout</li>
                        <li>View loyalty program performance</li>
                      </ul>
                      <Link 
                        href="/pages/customers/loyalty"
                        className="inline-block mt-2 px-4 py-2 bg-brand2 text-white rounded hover:bg-brand2/90 text-sm"
                      >
                        View Loyalty Programs
                      </Link>
                    </div>
 
                    <div className="border-l-4 border-warn bg-warn/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Customer Accounts</h3>
                      <p className="text-text text-sm mb-2">
                        Manage credit accounts at <strong>Customers → Customer Accounts</strong>
                      </p>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li>Set credit limits for customers</li>
                        <li>Track outstanding balances</li>
                        <li>Process account payments</li>
                        <li>Generate account statements</li>
                      </ul>
                    </div>
                  </div>
                </div>
              )}
 
              {activeGuide === "products" && (
                <div className="space-y-6">
                  <h2 className="text-3xl font-bold text-text flex items-center gap-2">
                    <Icon name="inventory_2" size={40} />
                    Product Management
                  </h2>
                  
                  <div className="space-y-4">
                    <div className="border-l-4 border-success bg-success/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Viewing Products</h3>
                      <p className="text-text text-sm mb-2">
                        Access your product catalog at <strong>Products → Products</strong>
                      </p>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li>Search by name, barcode, or product ID</li>
                        <li>Filter by stock levels or price range</li>
                        <li>Sort by various criteria</li>
                        <li>View product details and stock levels</li>
                      </ul>
                      <Link 
                        href="/pages/products"
                        className="inline-block mt-2 px-4 py-2 bg-success text-white rounded hover:bg-success/90 text-sm"
                      >
                        View Products
                      </Link>
                    </div>
 
                    <div className="border-l-4 border-info bg-info/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Adjusting Stock Levels</h3>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li>Click <strong>Edit Stock</strong> on any product</li>
                        <li>Enter adjustment amount (positive to add, negative to reduce)</li>
                        <li>Select reason: Received, Damage, Return, etc.</li>
                        <li>Click <strong>Update Stock</strong> to save</li>
                      </ul>
                    </div>
 
                    <div className="border-l-4 border-brand2 bg-brand2/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Managing Purchase Orders</h3>
                      <p className="text-text text-sm mb-2">
                        Go to <strong>Products → Purchase Orders</strong>
                      </p>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li>Create new purchase orders for suppliers</li>
                        <li>Track order status and delivery</li>
                        <li>Receive stock and update inventory</li>
                      </ul>
                      <Link 
                        href="/purchase-orders"
                        className="inline-block mt-2 px-4 py-2 bg-brand2 text-white rounded hover:bg-brand2/90 text-sm"
                      >
                        Manage Purchase Orders
                      </Link>
                    </div>
 
                    <div className="border-l-4 border-warn bg-warn/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Price Changes</h3>
                      <p className="text-text text-sm mb-2">
                        Manage pricing at <strong>Products → Price Changes</strong>
                      </p>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li>Schedule future price changes</li>
                        <li>Apply bulk price updates</li>
                        <li>View pending changes</li>
                        <li>Generate price tags and labels</li>
                      </ul>
                    </div>
                  </div>
                </div>
              )}
 
              {activeGuide === "stock" && (
                <div className="space-y-6">
                  <h2 className="text-3xl font-bold text-text flex items-center gap-2">
                    <Icon name="fact_check" size={40} />
                    Stock Takes
                  </h2>
                  
                  <div className="space-y-4">
                    <div className="border-l-4 border-success bg-success/10 p-4">
                      <h3 className="font-semibold text-text mb-2">What is a Stock Take?</h3>
                      <p className="text-text text-sm">
                        A stock take (or stocktake) is a physical count of your inventory to verify that your 
                        system records match reality. This helps identify discrepancies, theft, or damage.
                      </p>
                    </div>
 
                    <div className="border-l-4 border-info bg-info/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Creating a New Stock Take</h3>
                      <p className="text-text text-sm mb-2">
                        Navigate to <strong>Products → Stocktake</strong>
                      </p>
                      <ol className="list-decimal list-inside text-text text-sm space-y-2 ml-2">
                        <li>Click <strong>Create New Stocktake</strong></li>
                        <li>Enter a description (e.g., "Monthly Stock Take - Jan 2025")</li>
                        <li>Select the store/location</li>
                        <li>Add any comments or notes</li>
                        <li>Click <strong>Create</strong></li>
                      </ol>
                      <Link 
                        href="/pages/products/stocktake"
                        className="inline-block mt-2 px-4 py-2 bg-info text-white rounded hover:bg-info/90 text-sm"
                      >
                        Start Stock Take
                      </Link>
                    </div>
 
                    <div className="border-l-4 border-brand2 bg-brand2/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Counting Stock</h3>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li>Scan product barcodes or search by name</li>
                        <li>Enter the physical count quantity</li>
                        <li>System will calculate variance</li>
                        <li>Continue until all products are counted</li>
                      </ul>
                    </div>
 
                    <div className="border-l-4 border-warn bg-warn/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Finalizing Stock Take</h3>
                      <ol className="list-decimal list-inside text-text text-sm space-y-2 ml-2">
                        <li>Review all counted items</li>
                        <li>Check variances (differences between system and physical count)</li>
                        <li>Investigate large discrepancies</li>
                        <li>Click <strong>Finalize</strong> to update system inventory</li>
                        <li>Generate variance report for records</li>
                      </ol>
                    </div>
 
                    <div className="border-l-4 border-danger bg-danger/10 p-4">
                      <h3 className="font-semibold text-text mb-2 flex items-center gap-2">
                        <Icon name="warning" size={20} />
                        Important Notes
                      </h3>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li>Stop sales during stock take for accuracy</li>
                        <li>Count carefully - errors affect inventory records</li>
                        <li>Save progress regularly</li>
                        <li>Finalizing updates all stock levels permanently</li>
                      </ul>
                    </div>
                  </div>
 
                  <div className="mt-6 p-4 bg-success/10 border border-success/30 rounded-lg">
                    <h3 className="font-semibold text-text mb-2 flex items-center gap-2">
                      <Icon name="lightbulb" size={20} />
                      Best Practices
                    </h3>
                    <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                      <li>Schedule stock takes during quiet hours</li>
                      <li>Use teams to count different sections</li>
                      <li>Do monthly or quarterly stock takes</li>
                      <li>Keep previous stock take reports for comparison</li>
                    </ul>
                  </div>
                </div>
              )}
 
              {activeGuide === "reports" && (
                <div className="space-y-6">
                  <h2 className="text-3xl font-bold text-text flex items-center gap-2">
                    <Icon name="assessment" size={40} />
                    Reports & Analytics
                  </h2>
                  
                  <div className="space-y-4">
                    <div className="border-l-4 border-success bg-success/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Sales Reports</h3>
                      <p className="text-text text-sm mb-2">
                        View detailed sales analytics at <strong>Reports → Sales Reports</strong>
                      </p>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li>Daily, weekly, and monthly sales trends</li>
                        <li>Hourly sales patterns</li>
                        <li>Payment method breakdown</li>
                        <li>Top-selling products</li>
                      </ul>
                      <Link 
                        href="/pages/reports/sales-reports"
                        className="inline-block mt-2 px-4 py-2 bg-success text-white rounded hover:bg-success/90 text-sm"
                      >
                        View Sales Reports
                      </Link>
                    </div>
 
                    <div className="border-l-4 border-info bg-info/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Analytics Dashboard</h3>
                      <p className="text-text text-sm mb-2">
                        Interactive dashboards at <strong>Reports → Analytics Dashboard</strong>
                      </p>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li>Visual charts and graphs</li>
                        <li>KPI tracking (revenue, profit, items sold)</li>
                        <li>Customizable date ranges</li>
                        <li>Export data to Excel</li>
                      </ul>
                      <Link 
                        href="/pages/reports/analytics"
                        className="inline-block mt-2 px-4 py-2 bg-info text-white rounded hover:bg-info/90 text-sm"
                      >
                        View Analytics
                      </Link>
                    </div>
 
                    <div className="border-l-4 border-brand2 bg-brand2/10 p-4">
                      <h3 className="font-semibold text-text mb-2">End of Day Reports</h3>
                      <p className="text-text text-sm mb-2">
                        Daily reconciliation at <strong>Selling → End of Day</strong>
                      </p>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li>Total sales by payment type</li>
                        <li>Cash reconciliation</li>
                        <li>Refunds and voids summary</li>
                        <li>Print daily report</li>
                      </ul>
                      <Link 
                        href="/pages/sales/end-of-day"
                        className="inline-block mt-2 px-4 py-2 bg-brand2 text-white rounded hover:bg-brand2/90 text-sm"
                      >
                        Go to End of Day
                      </Link>
                    </div>
 
                    <div className="border-l-4 border-warn bg-warn/10 p-4">
                      <h3 className="font-semibold text-text mb-2">Inventory Reports</h3>
                      <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                        <li>Low stock alerts</li>
                        <li>Stock movement history</li>
                        <li>Product performance</li>
                        <li>Supplier analysis</li>
                      </ul>
                    </div>
                  </div>
 
                  <div className="mt-6 p-4 bg-info/10 border border-info/30 rounded-lg">
                    <h3 className="font-semibold text-text mb-2 flex items-center gap-2">
                      <Icon name="lightbulb" size={20} />
                      Using Reports Effectively
                    </h3>
                    <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                      <li>Review sales reports daily to track performance</li>
                      <li>Use date filters to compare periods</li>
                      <li>Export reports for accounting records</li>
                      <li>Set up alerts for low stock items</li>
                    </ul>
                  </div>
                </div>
              )}
 
              {activeGuide === 'search' && (
                <div>
                  <h2 className="text-2xl font-bold text-text mb-6 flex items-center gap-2">
                    <Icon name="search" size={36} />
                    Search & Filters
                  </h2>
 
                  <div className="mb-6 p-4 bg-gradient-to-r from-info/10 to-brand/10 border border-info/30 rounded-lg">
                    <h3 className="font-semibold text-text mb-2 flex items-center gap-2">
                      <Icon name="search" size={20} />
                      Powerful Search at Your Fingertips
                    </h3>
                    <p className="text-text text-sm">
                      The search system is designed to find what you need instantly. Most pages feature live search - 
                      results update as you type without needing to press Enter or click buttons.
                    </p>
                  </div>
 
                  <div className="space-y-6">
                    <div className="border-l-4 border-info bg-info/10 p-4">
                      <h3 className="font-semibold text-text mb-3">Basic Search</h3>
                      <p className="text-text text-sm mb-3">
                        Search boxes appear at the top of most pages. Simply start typing:
                      </p>
                      <div className="bg-surface p-3 rounded border border-border mb-3">
                        <ul className="text-text text-sm space-y-2">
                          <li className="flex items-start">
                            <span className="text-info mr-2">•</span>
                            <span><strong>Products:</strong> Search by name, PLU, SKU, or barcode</span>
                          </li>
                          <li className="flex items-start">
                            <span className="text-success mr-2">•</span>
                            <span><strong>Customers:</strong> Search by name, phone, or account number</span>
                          </li>
                          <li className="flex items-start">
                            <span className="text-warn mr-2">•</span>
                            <span><strong>Sales:</strong> Search by invoice number, customer, or amount</span>
                          </li>
                        </ul>
                      </div>
                      <div className="bg-surface-2 p-3 rounded border border-border">
                        <p className="text-muted text-xs mb-2">Example:</p>
                        <code className="text-sm text-text">Type: "canon" → Instantly shows all Canon products</code>
                      </div>
                    </div>
 
                    <div className="border-l-4 border-success bg-success/10 p-4">
                      <h3 className="font-semibold text-text mb-3">Advanced Product Search</h3>
                      <p className="text-text text-sm mb-3">
                        Use special prefixes to search by specific fields:
                      </p>
                      <div className="bg-surface p-3 rounded border border-border space-y-3">
                        <div>
                          <code className="text-sm font-semibold text-info">pid=123</code>
                          <p className="text-muted text-xs mt-1">Jump directly to product with ID 123</p>
                        </div>
                        <div>
                          <code className="text-sm font-semibold text-success">plu=4567</code>
                          <p className="text-muted text-xs mt-1">Find product with PLU code 4567</p>
                        </div>
                        <div>
                          <code className="text-sm font-semibold text-warn">sku=ABC-123</code>
                          <p className="text-muted text-xs mt-1">Search by SKU/model number</p>
                        </div>
                        <div>
                          <code className="text-sm font-semibold text-brand2">barcode=9876543210</code>
                          <p className="text-muted text-xs mt-1">Find product by barcode scan</p>
                        </div>
                      </div>
                      <div className="mt-3 p-3 bg-warn/10 border border-warn/30 rounded">
                        <p className="text-text text-xs">
                          <strong className="flex items-center gap-1">
                            <Icon name="lightbulb" size={14} />
                            Pro Tip:
                          </strong> These searches work in the main search bar too! 
                          Type "pid=123" from anywhere to quickly jump to that product.
                        </p>
                      </div>
                    </div>
 
                    <div className="border-l-4 border-brand2 bg-brand2/10 p-4">
                      <h3 className="font-semibold text-text mb-3">Filters & Date Ranges</h3>
                      <p className="text-text text-sm mb-3">
                        Many pages include filter dropdowns to narrow results:
                      </p>
                      <ul className="list-disc list-inside text-text text-sm space-y-2 ml-2">
                        <li><strong>Date filters:</strong> Today, This Week, This Month, Custom Range</li>
                        <li><strong>Status filters:</strong> Complete, Pending, Cancelled, All</li>
                        <li><strong>Category filters:</strong> Filter by product category or department</li>
                        <li><strong>Payment filters:</strong> Cash, Card, Account, All Methods</li>
                      </ul>
                      <div className="mt-3 bg-surface p-3 rounded border border-border">
                        <p className="text-text text-sm mb-2"><strong>Combining Filters:</strong></p>
                        <p className="text-muted text-xs">
                          Use search + filters together for precise results. Example: Search "Invoice #1234" 
                          then filter by "This Week" to find recent invoices matching that number.
                        </p>
                      </div>
                    </div>
 
                    <div className="border-l-4 border-warn bg-warn/10 p-4">
                      <h3 className="font-semibold text-text mb-3">Table Sorting</h3>
                      <p className="text-text text-sm mb-3">
                        Click any column header to sort by that field:
                      </p>
                      <div className="bg-surface p-3 rounded border border-border space-y-2">
                        <div className="flex items-center text-sm">
                          <span className="text-info mr-2">▲</span>
                          <span className="text-text">Click once: Sort ascending (A→Z, 0→9)</span>
                        </div>
                        <div className="flex items-center text-sm">
                          <span className="text-danger mr-2">▼</span>
                          <span className="text-text">Click twice: Sort descending (Z→A, 9→0)</span>
                        </div>
                        <div className="flex items-center text-sm">
                          <span className="text-muted mr-2">⬍</span>
                          <span className="text-text">Click third time: Remove sort</span>
                        </div>
                      </div>
                      <div className="mt-3 p-3 bg-info/10 border border-info/30 rounded">
                        <p className="text-text text-xs">
                          <strong>Note:</strong> Sorting is instant and happens in your browser - 
                          no page reload needed!
                        </p>
                      </div>
                    </div>
 
                    <div className="border-l-4 border-brand bg-brand/10 p-4">
                      <h3 className="font-semibold text-text mb-3">Quick Search Tips</h3>
                      <div className="space-y-3">
                        <div className="bg-surface p-3 rounded border border-border">
                          <p className="font-semibold text-text text-sm mb-2 flex items-center gap-1">
                            <Icon name="rocket_launch" size={16} />
                            Speed Techniques:
                          </p>
                          <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                            <li>Search is case-insensitive - type lowercase for speed</li>
                            <li>Partial matches work - "hp" finds "HP LaserJet"</li>
                            <li>Numbers-only searches check IDs, PLUs, and barcodes</li>
                            <li>Use keyboard: Press Tab to move through results</li>
                          </ul>
                        </div>
                        <div className="bg-surface p-3 rounded border border-border">
                          <p className="font-semibold text-text text-sm mb-2 flex items-center gap-1">
                            <Icon name="speed" size={16} />
                            Performance Notes:
                          </p>
                          <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                            <li>First search may take a moment while data loads</li>
                            <li>Subsequent searches are instant (cached locally)</li>
                            <li>Large result sets limited to 100 items - use filters to narrow</li>
                            <li>Refresh page if data seems outdated</li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
 
                  <div className="mt-6 p-4 bg-info/10 border border-info/30 rounded-lg">
                    <h3 className="font-semibold text-text mb-2 flex items-center gap-2">
                      <Icon name="lightbulb" size={20} />
                      Search Best Practices
                    </h3>
                    <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                      <li>Be specific when possible - exact matches appear first</li>
                      <li>Use advanced search prefixes for instant lookups</li>
                      <li>Combine search with filters for precision</li>
                      <li>Click column headers to sort results your way</li>
                      <li>Clear search to see all items again</li>
                    </ul>
                  </div>
                </div>
              )}
 
              {activeGuide === 'tips' && (
                <div>
                  <h2 className="text-2xl font-bold text-text mb-6 flex items-center gap-2">
                    <Icon name="tips_and_updates" size={36} />
                    Tips & Best Practices
                  </h2>
 
                  <div className="mb-6 p-4 bg-gradient-to-r from-warn/10 to-success/10 border border-warn/30 rounded-lg">
                    <h3 className="font-semibold text-text mb-2 flex items-center gap-2">
                      <Icon name="lightbulb" size={20} />
                      Work Smarter, Not Harder
                    </h3>
                    <p className="text-text text-sm">
                      Even experienced users can learn new tricks. These tips help you work faster and avoid common pitfalls.
                    </p>
                  </div>
 
                  <div className="space-y-6">
                    <div className="border-l-4 border-success bg-success/10 p-4">
                      <h3 className="font-semibold text-text mb-3 flex items-center gap-2">
                        <Icon name="speed" size={20} />
                        Performance Optimization
                      </h3>
                      <div className="space-y-3">
                        <div>
                          <p className="font-semibold text-text text-sm mb-2">Database Performance</p>
                          <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                            <li>First page load may be slower - subsequent loads are cached</li>
                            <li>Use date filters to limit large reports (faster queries)</li>
                            <li>Sorting large tables happens in browser (instant)</li>
                            <li>Refresh only when you need updated data</li>
                          </ul>
                        </div>
                        <div className="bg-surface p-3 rounded border border-border">
                          <p className="text-text text-sm">
                            <strong>Why sorting is instant:</strong> We load data once, then sort in your browser. 
                            This means you can sort by different columns without waiting for the server.
                          </p>
                        </div>
                      </div>
                    </div>
 
                    <div className="border-l-4 border-info bg-info/10 p-4">
                      <h3 className="font-semibold text-text mb-3 flex items-center gap-2">
                        <Icon name="keyboard" size={20} />
                        Keyboard Shortcuts
                      </h3>
                      <div className="bg-surface p-3 rounded border border-border space-y-2">
                        <div className="flex justify-between items-center text-sm">
                          <code className="bg-surface-2 px-2 py-1 rounded text-text">Ctrl + K</code>
                          <span className="text-text">Focus search bar</span>
                        </div>
                        <div className="flex justify-between items-center text-sm">
                          <code className="bg-surface-2 px-2 py-1 rounded text-text">Enter</code>
                          <span className="text-text">Submit form / Select item</span>
                        </div>
                        <div className="flex justify-between items-center text-sm">
                          <code className="bg-surface-2 px-2 py-1 rounded text-text">Esc</code>
                          <span className="text-text">Close modal / Clear search</span>
                        </div>
                        <div className="flex justify-between items-center text-sm">
                          <code className="bg-surface-2 px-2 py-1 rounded text-text">Tab</code>
                          <span className="text-text">Navigate through form fields</span>
                        </div>
                        <div className="flex justify-between items-center text-sm">
                          <code className="bg-surface-2 px-2 py-1 rounded text-text">Arrow Keys</code>
                          <span className="text-text">Navigate table rows</span>
                        </div>
                      </div>
                    </div>
 
                    <div className="border-l-4 border-brand2 bg-brand2/10 p-4">
                      <h3 className="font-semibold text-text mb-3 flex items-center gap-2">
                        <Icon name="track_changes" size={20} />
                        Common Workflow Tips
                      </h3>
                      <div className="space-y-3">
                        <div className="bg-surface p-3 rounded border border-border">
                          <p className="font-semibold text-text text-sm mb-2">Starting Your Day:</p>
                          <ol className="list-decimal list-inside text-text text-sm space-y-1 ml-2">
                            <li>Check dashboard for overnight activity</li>
                            <li>Review low stock alerts</li>
                            <li>Check pending orders or layaways</li>
                            <li>Verify cash drawer balance</li>
                          </ol>
                        </div>
                        <div className="bg-surface p-3 rounded border border-border">
                          <p className="font-semibold text-text text-sm mb-2">During Peak Hours:</p>
                          <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                            <li>Keep search bar handy for quick product lookups</li>
                            <li>Use barcode scanner to speed up sales</li>
                            <li>Add notes to sales for special requests</li>
                            <li>Create customer accounts for regulars</li>
                          </ul>
                        </div>
                        <div className="bg-surface p-3 rounded border border-border">
                          <p className="font-semibold text-text text-sm mb-2">End of Day:</p>
                          <ol className="list-decimal list-inside text-text text-sm space-y-1 ml-2">
                            <li>Run End of Day report</li>
                            <li>Reconcile cash and card payments</li>
                            <li>Review any voided or refunded sales</li>
                            <li>Export reports for accounting</li>
                          </ol>
                        </div>
                      </div>
                    </div>
 
                    <div className="border-l-4 border-danger bg-danger/10 p-4">
                      <h3 className="font-semibold text-text mb-3 flex items-center gap-2">
                        <Icon name="warning" size={20} />
                        Common Pitfalls to Avoid
                      </h3>
                      <div className="space-y-3">
                        <div className="flex items-start">
                          <span className="text-danger font-bold mr-2">✗</span>
                          <div>
                            <p className="font-semibold text-text text-sm">Don't refresh during save operations</p>
                            <p className="text-muted text-xs">Wait for "Saving..." to complete to avoid data loss</p>
                          </div>
                        </div>
                        <div className="flex items-start">
                          <span className="text-danger font-bold mr-2">✗</span>
                          <div>
                            <p className="font-semibold text-text text-sm">Don't delete without checking references</p>
                            <p className="text-muted text-xs">Deleting products with sales history can cause issues</p>
                          </div>
                        </div>
                        <div className="flex items-start">
                          <span className="text-danger font-bold mr-2">✗</span>
                          <div>
                            <p className="font-semibold text-text text-sm">Don't ignore low stock warnings</p>
                            <p className="text-muted text-xs">Set up reorder points to avoid stockouts</p>
                          </div>
                        </div>
                        <div className="flex items-start">
                          <span className="text-danger font-bold mr-2">✗</span>
                          <div>
                            <p className="font-semibold text-text text-sm">Don't forget to save before closing</p>
                            <p className="text-muted text-xs">Forms don't auto-save - click Save button</p>
                          </div>
                        </div>
                      </div>
                    </div>
 
                    <div className="border-l-4 border-brand bg-brand/10 p-4">
                      <h3 className="font-semibold text-text mb-3 flex items-center gap-2">
                        <Icon name="build" size={20} />
                        Troubleshooting Quick Fixes
                      </h3>
                      <div className="space-y-3">
                        <div className="bg-surface p-3 rounded border border-border">
                          <p className="font-semibold text-text text-sm mb-2">If search isn't working:</p>
                          <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                            <li>Clear your browser cache (Ctrl+Shift+Delete)</li>
                            <li>Refresh the page (F5)</li>
                            <li>Check your internet connection</li>
                          </ul>
                        </div>
                        <div className="bg-surface p-3 rounded border border-border">
                          <p className="font-semibold text-text text-sm mb-2">If data looks outdated:</p>
                          <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                            <li>Click the Refresh button on the page</li>
                            <li>Check if another user made recent changes</li>
                            <li>Verify your system clock is correct</li>
                          </ul>
                        </div>
                        <div className="bg-surface p-3 rounded border border-border">
                          <p className="font-semibold text-text text-sm mb-2">If forms won't save:</p>
                          <ul className="list-disc list-inside text-text text-sm space-y-1 ml-2">
                            <li>Check all required fields are filled (marked with *)</li>
                            <li>Look for red error messages below fields</li>
                            <li>Verify numbers don't have invalid characters</li>
                            <li>Try logging out and back in</li>
                          </ul>
                        </div>
                      </div>
                    </div>
 
                    <div className="border-l-4 border-warn bg-warn/10 p-4">
                      <h3 className="font-semibold text-text mb-3 flex items-center gap-2">
                        <Icon name="star" size={20} />
                        Power User Secrets
                      </h3>
                      <div className="space-y-2">
                        <div className="flex items-start">
                          <span className="text-warn font-bold mr-2">★</span>
                          <p className="text-text text-sm">Right-click table rows for quick actions menu (where available)</p>
                        </div>
                        <div className="flex items-start">
                          <span className="text-warn font-bold mr-2">★</span>
                          <p className="text-text text-sm">Use browser bookmarks for frequently accessed pages</p>
                        </div>
                        <div className="flex items-start">
                          <span className="text-warn font-bold mr-2">★</span>
                          <p className="text-text text-sm">Keep multiple tabs open for different tasks</p>
                        </div>
                        <div className="flex items-start">
                          <span className="text-warn font-bold mr-2">★</span>
                          <p className="text-text text-sm">Export reports regularly for backup records</p>
                        </div>
                        <div className="flex items-start">
                          <span className="text-warn font-bold mr-2">★</span>
                          <p className="text-text text-sm">Use browser's Find (Ctrl+F) to search within reports</p>
                        </div>
                      </div>
                    </div>
                  </div>
 
                  <div className="mt-6 p-4 bg-info/10 border border-info/30 rounded-lg">
                    <h3 className="font-semibold text-text mb-2 flex items-center gap-2">
                      <Icon name="school" size={20} />
                      Keep Learning
                    </h3>
                    <p className="text-text text-sm mb-3">
                      This system is constantly being improved. Check back here occasionally to learn about new features and tips.
                    </p>
                    <p className="text-text text-sm">
                      Need technical details? Visit <Link href="/pages/technical/documentation" className="underline font-semibold text-brand hover:text-brand/80">Technical Documentation</Link> for API references and developer guides.
                    </p>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}