page.tsx

Go to the documentation of this file.

"use client";
 
import { useState, useEffect, Suspense } from "react";
import { useSearchParams } from "next/navigation";
import { Icon } from '@/contexts/IconContext';
 
type TabId = "advisor" | "sales" | "inventory" | "customers" | "financial" | "staff" | "operational";
 
function ReportsPageContent() {
  const searchParams = useSearchParams();
  const source = searchParams.get('source');
  
  const [activeTab, setActiveTab] = useState<TabId>(() => {
    return source === 'advisor' ? 'advisor' : 'sales';
  });
 
  // Update active tab when source parameter changes
  useEffect(() => {
    if (source === 'advisor') {
      setActiveTab('advisor');
    }
  }, [source]);
 
  const tabs = [
    { id: "advisor" as TabId, label: "Advisor Reports", icon: "lightbulb" },
    { id: "sales" as TabId, label: "Sales Reports", icon: "trending_up" },
    { id: "inventory" as TabId, label: "Inventory", icon: "inventory_2" },
    { id: "customers" as TabId, label: "Customers", icon: "people" },
    { id: "financial" as TabId, label: "Financial", icon: "account_balance" },
    { id: "staff" as TabId, label: "Staff Performance", icon: "badge" },
    { id: "operational" as TabId, label: "Operational", icon: "settings" },
  ];
 
  return (
    <div className="p-6 min-h-screen bg-bg">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-text mb-2 flex items-center gap-2">
          <Icon name="assessment" size={32} className="text-brand" />
          Business Reports
        </h1>
        <p className="text-muted">Comprehensive reporting across all business functions</p>
      </div>
 
      {/* Tabs */}
      <div className="bg-surface rounded-lg shadow-sm mb-6">
        <div className="border-b border-border">
          <nav className="flex space-x-2 p-2 overflow-x-auto">
            {tabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`flex items-center gap-2 px-4 py-3 rounded-lg whitespace-nowrap transition ${
                  activeTab === tab.id
                    ? "bg-brand text-surface font-semibold"
                    : "text-muted hover:bg-surface-2"
                }`}
              >
                <Icon name={tab.icon} className="text-xl" />
                <span>{tab.label}</span>
              </button>
            ))}
          </nav>
        </div>
 
        {/* Tab Content */}
        <div className="p-6">
          {activeTab === "advisor" && <AdvisorReports />}
          {activeTab === "sales" && <SalesReports />}
          {activeTab === "inventory" && <InventoryReports />}
          {activeTab === "customers" && <CustomerReports />}
          {activeTab === "financial" && <FinancialReports />}
          {activeTab === "staff" && <StaffReports />}
          {activeTab === "operational" && <OperationalReports />}
        </div>
      </div>
    </div>
  );
}
 
function AdvisorReports() {
  const reports = [
    { name: "Possible Duplicate Customers", desc: "Identify potential duplicate customer records", path: "/pages/reports/advisor/duplicate-customers" },
    { name: "Products Priced Low", desc: "Products with pricing below cost or threshold", path: "/pages/reports/advisor/products-priced-low" },
    { name: "Duplicate PLU Codes", desc: "Products with identical PLU numbers", path: "/pages/reports/advisor/duplicate-plu" },
    { name: "Duplicate Product Descriptions", desc: "Products with identical descriptions", path: "/pages/reports/advisor/duplicate-descriptions" },
    { name: "Spelling Issues", desc: "Potential spelling errors in product names", path: "/pages/reports/advisor/spelling-issues" },
    { name: "Missing Product Information", desc: "Products with incomplete details", path: "/pages/reports/advisor/missing-info" },
    { name: "Inactive Products", desc: "Products with no recent sales activity", path: "/pages/reports/advisor/inactive-products" },
    { name: "Stock Level Issues", desc: "Products with incorrect or negative stock", path: "/pages/reports/advisor/stock-issues" },
    { name: "Customer Data Quality", desc: "Customers with missing or invalid information", path: "/pages/reports/advisor/customer-data-quality" },
    { name: "Price Inconsistencies", desc: "Products with unusual price variations", path: "/pages/products/price-changes" },
    { name: "Supplier Data Issues", desc: "Suppliers with missing or outdated information", path: "/pages/reports/advisor/supplier-issues" },
    { name: "Security Recommendations", desc: "System security and access suggestions", path: "/pages/reports/advisor/security-recommendations" },
  ];
 
  return (
    <div>
      <div className="mb-6">
        <div className="flex items-center gap-3 mb-3">
          <Icon name="lightbulb" size={24} className="text-warning" />
          <h2 className="text-2xl font-bold text-text">Advisor Reports</h2>
        </div>
        <p className="text-muted">
          Automated insights and recommendations from your business data. These reports are generated 
          by the Advisor system which continuously analyzes your data for potential issues, 
          inconsistencies, and opportunities for improvement.
        </p>
      </div>
      
      <div className="bg-info/10 border border-info/30 rounded-lg p-4 mb-6">
        <div className="flex items-start gap-3">
          <Icon name="info" size={20} className="text-info flex-shrink-0 mt-0.5" />
          <div>
            <p className="text-sm text-text mb-2">
              <strong>From Advisor Page:</strong> Click on any report below to view detailed information. 
              To customize which categories are analyzed, visit the{' '}
              <a href="/advisor" className="text-brand hover:underline">
                Advisor page
              </a>.
            </p>
            <p className="text-sm text-muted">
              The Advisor continuously monitors your business data across products, customers, 
              inventory, and operations to help you maintain data quality and identify issues early.
            </p>
          </div>
        </div>
      </div>
 
      <ReportGrid reports={reports} />
    </div>
  );
}
 
function SalesReports() {
  const reports = [
    { name: "Daily Sales Summary", desc: "Sales totals by day with trends", path: "/pages/reports/sales-reports" },
    { name: "Sales by Store", desc: "Compare performance across locations", path: "/pages/reports/sales-reports/sales-by-store" },
    { name: "Sales by Product", desc: "Top selling products and categories", path: "/pages/reports/sales-reports" },
    { name: "Sales by Staff Member", desc: "Individual staff performance", path: "/pages/reports/sales-reports/sales-by-teller" },
    { name: "Sales with Discounts", desc: "Analyze discount usage and impact", path: "/pages/reports/sales-reports/sales-with-discounts" },
    { name: "Hourly Sales Analysis", desc: "Peak trading hours identification", path: "/pages/reports/sales-reports" },
    { name: "Sales by Payment Type", desc: "Payment method breakdown", path: "/pages/reports/sales-reports/payment-list" },
    { name: "Basket Size Analysis", desc: "Average transaction values", path: "/pages/reports/sales-reports/basket-sizes" },
    { name: "Sales KPI Dashboard", desc: "Key performance indicators", path: "/pages/reports/sales-reports/sales-kpi" },
    { name: "Lost Sales Report", desc: "Track refused or cancelled sales", path: "/pages/reports/sales-reports/lost-sales" },
  ];
 
  return <ReportGrid reports={reports} />;
}
 
function InventoryReports() {
  const reports = [
    { name: "Stock Levels Overview", desc: "Current stock across all locations", path: "/pages/products" },
    { name: "Low Stock Alert", desc: "Items below reorder point", path: "/pages/products" },
    { name: "Stock Movement", desc: "Product velocity and turnover", path: "/pages/products" },
    { name: "Dead Stock Analysis", desc: "Slow-moving and obsolete items", path: "/pages/products" },
    { name: "Shrinkage Report", desc: "Stock loss and discrepancies", path: "/pages/products/stocktake" },
    { name: "Reorder Recommendations", desc: "Suggested purchase orders", path: "/purchase-orders" },
    { name: "Stock Valuation", desc: "Total inventory value by location", path: "/pages/products" },
    { name: "Supplier Performance", desc: "Delivery times and quality metrics", path: "/pages/suppliers" },
    { name: "Price Changes History", desc: "Track pricing adjustments", path: "/pages/products/price-changes" },
  ];
 
  return <ReportGrid reports={reports} />;
}
 
function CustomerReports() {
  const reports = [
    { name: "Customer Database", desc: "Complete customer listing", path: "/pages/customers" },
    { name: "Top Customers", desc: "Highest value customers by spend", path: "/pages/reports/sales-reports/sales-by-customer" },
    { name: "Customer Lifetime Value", desc: "Long-term customer worth analysis", path: "/pages/customers" },
    { name: "New vs Returning", desc: "Customer acquisition and retention", path: "/pages/customers" },
    { name: "Loyalty Program Analysis", desc: "Points, rewards, and redemption", path: "/pages/customers/loyalty" },
    { name: "Customer Segmentation", desc: "Group customers by behavior", path: "/pages/customers" },
    { name: "Aged Debtors", desc: "Outstanding customer accounts", path: "/pages/customers/customer-accounts/aged-debtors" },
    { name: "Customer Purchase History", desc: "Individual buying patterns", path: "/pages/customers" },
    { name: "Lapsed Customers", desc: "Inactive customer identification", path: "/pages/customers" },
  ];
 
  return <ReportGrid reports={reports} />;
}
 
function FinancialReports() {
  const reports = [
    { name: "Daily Takings", desc: "Cash, card, and total receipts", path: "/pages/sales/end-of-day" },
    { name: "Monthly P&L", desc: "Profit and loss statement", path: "/pages/reports/analytics" },
    { name: "Gross Margin Analysis", desc: "Product and category profitability", path: "/pages/reports/analytics" },
    { name: "GST/Tax Summary", desc: "Tax collected and payable", path: "/pages/reports/analytics" },
    { name: "Account Sales", desc: "Credit account transactions", path: "/pages/reports/sales-reports/sales-by-account" },
    { name: "Payment Reconciliation", desc: "Match payments to deposits", path: "/pages/reports/sales-reports/payment-list" },
    { name: "Refunds & Returns", desc: "Track product returns", path: "/pages/reports/sales-reports" },
    { name: "Franchise Royalties", desc: "Franchise fee calculations", path: "/pages/reports/franchise-report" },
    { name: "Cost of Goods Sold", desc: "COGS by period", path: "/pages/reports/analytics" },
    { name: "Banking Summary", desc: "Deposits and cash flow", path: "/pages/sales/end-of-day" },
  ];
 
  return <ReportGrid reports={reports} />;
}
 
function StaffReports() {
  const reports = [
    { name: "Sales by Staff Member", desc: "Individual performance metrics", path: "/pages/reports/sales-reports/sales-by-teller" },
    { name: "Staff Hours Report", desc: "Time tracking and scheduling", path: "/pages/settings/staff" },
    { name: "Staff Productivity", desc: "Sales per hour worked", path: "/pages/reports/sales-reports/sales-by-teller" },
    { name: "Staff Activity Log", desc: "Login times and transactions", path: "/audit" },
    { name: "Commission Report", desc: "Sales commission calculations", path: "/pages/reports/sales-reports/sales-by-teller" },
    { name: "Void & Discount Analysis", desc: "Staff discount and void usage", path: "/pages/reports/sales-reports/sales-with-discounts" },
    { name: "Training Compliance", desc: "Staff training status", path: "/pages/settings/staff" },
    { name: "Performance Reviews", desc: "KPIs and targets", path: "/pages/settings/staff" },
  ];
 
  return <ReportGrid reports={reports} />;
}
 
function OperationalReports() {
  const reports = [
    { name: "System Health Monitor", desc: "Server and database status", path: "/pages/operations/monitoring" },
    { name: "Transaction Log", desc: "Complete audit trail", path: "/audit" },
    { name: "End of Day Reports", desc: "Daily closeout summaries", path: "/pages/sales/end-of-day" },
    { name: "Till Reconciliation", desc: "Cash drawer accuracy", path: "/pages/sales/end-of-day" },
    { name: "Sale Processing Errors", desc: "Failed or edited transactions", path: "/pages/reports/sales-reports/edited-sales" },
    { name: "Gift Card Activity", desc: "Gift card sales and redemptions", path: "/prepay" },
    { name: "Layby Report", desc: "Layby payments and completions", path: "/pages/reports/sales-reports/layby" },
    { name: "Open Quotations", desc: "Pending customer quotes", path: "/pages/reports/sales-reports/open-quotations" },
    { name: "Store Comparison", desc: "Multi-location performance", path: "/pages/reports/sales-reports/sales-by-store" },
    { name: "API Usage Statistics", desc: "System integration activity", path: "/api" },
  ];
 
  return <ReportGrid reports={reports} />;
}
 
function ReportGrid({ reports }: { reports: Array<{ name: string; desc: string; path: string }> }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {reports.map((report, idx) => (
        <a
          key={idx}
          href={report.path}
          className="group relative block bg-gradient-to-br from-surface to-surface-2 border border-border rounded-xl p-5 hover:shadow-xl hover:scale-[1.02] hover:border-brand/50 hover:from-brand/5 hover:to-brand/10 transition-all duration-300 overflow-hidden"
        >
          <div className="absolute inset-0 bg-gradient-to-br from-brand/0 to-brand/0 group-hover:from-brand/5 group-hover:to-brand/10 transition-all duration-300"></div>
          <div className="relative z-10">
            <h3 className="text-lg font-semibold text-text mb-1 group-hover:text-brand transition-colors duration-200">
              {report.name}
            </h3>
            <p className="text-sm text-muted">{report.desc}</p>
          </div>
        </a>
      ))}
    </div>
  );
}
 
export default function ReportsPage() {
  return (
    <Suspense fallback={<div className="flex items-center justify-center min-h-screen">Loading...</div>}>
      <ReportsPageContent />
    </Suspense>
  );
}