page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect, useCallback } from 'react';
import { apiClient } from '@/lib/client/apiClient';
import { useStore } from '@/contexts/StoreContext';
 
interface Location {
  f100: number;
  f101: string;
  f180?: number;
  f182?: string;
}
 
interface Department {
  f100: number;
  f101: string;
  f1100?: number;
}
 
interface SalesCubeItem {
  f100: number; // Location ID
  f101: number; // Department ID
  f102: string; // Date info (format: "something|something|day")
  f201: number; // Sales amount
  f202?: number; // Cost/GP amount
}
 
interface DailyTotals {
  [key: number]: {
    c1: number;  // Recharge Toner
    c2: number;  // Recharge Ink
    c3: number;  // Compatible CW Toner
    c4: number;  // Compatible Other Toner
    c5: number;  // Compatible CW Inks
    c6: number;  // Compatible Other Inks
    c7: number;  // New Toner
    c8: number;  // New Ink
    c9: number;  // Other
    c10: number; // R&M
    c11: number; // Hardware & Software
    c12: number; // H&S Gross Profit
    c13: number; // Excluded Sales
    c12_errors: number;
  };
}
 
export default function FranchiseReportPage() {
  const { session } = useStore();
  const [selectedMonth, setSelectedMonth] = useState<number>(new Date().getMonth() + 1);
  const [selectedYear, setSelectedYear] = useState<number>(new Date().getFullYear());
  const [locations, setLocations] = useState<Location[]>([]);
  const [departments, setDepartments] = useState<Department[]>([]);
  const [currentTab, setCurrentTab] = useState<number>(0);
  const [currentLocId, setCurrentLocId] = useState<number>(0);
  const [currentLocName, setCurrentLocName] = useState<string>('All Stores');
  const [dailyTotals, setDailyTotals] = useState<DailyTotals>({});
  const [columnTotals, setColumnTotals] = useState<number[]>(Array(14).fill(0));
  const [loading, setLoading] = useState(false);
  const [salesCube, setSalesCube] = useState<any>(null);
 
  const monthNames = [
    'January', 'February', 'March', 'April', 'May', 'June',
    'July', 'August', 'September', 'October', 'November', 'December'
  ];
 
  // Initialize location for POS users to current store
  useEffect(() => {
    if (session?.store) {
      const isPosUser = session.store.type !== 'management';
      if (isPosUser) {
        setCurrentLocId(Number(session.store.id) || 0);
        setCurrentLocName(session.store.name || 'Current Store');
      }
    }
  }, [session?.store]);
 
  const loadLocations = useCallback(async () => {
    try {
      console.log('[Franchise Report] Loading locations...');
      const response = await apiClient.get('/api/v1/locations');
      console.log('[Franchise Report] Locations response:', response);
      if (response && Array.isArray(response)) {
        setLocations(response);
        console.log('[Franchise Report] Loaded locations:', response.length);
      }
    } catch (error) {
      console.error('[Franchise Report] Error loading locations:', error);
    }
  }, []);
 
  const loadDepartments = useCallback(async () => {
    try {
      console.log('[Franchise Report] Loading departments...');
      const response = await apiClient.get('/api/v1/departments');
      console.log('[Franchise Report] Departments response:', response);
      if (response && Array.isArray(response)) {
        setDepartments(response);
        console.log('[Franchise Report] Loaded departments:', response.length);
      }
    } catch (error) {
      console.error('[Franchise Report] Error loading departments:', error);
    }
  }, []);
 
  const runReport = useCallback(async () => {
    console.log('[Franchise Report] Running report...', { selectedMonth, selectedYear });
    setLoading(true);
    
    // Build date range in the format expected by BUCK API
    const fromDate = `1-${selectedMonth}-${selectedYear}`;
    let nextMonth = selectedMonth + 1;
    let nextYear = selectedYear;
    if (nextMonth === 13) {
      nextMonth = 1;
      nextYear++;
    }
    const toDate = `1-${nextMonth}-${nextYear}`;
 
    try {
      console.log('[Franchise Report] Fetching sales cube...', { fromDate, toDate });
      
      // The sales-cube API route will handle the BUCK formatting
      // Pass mode=5 and date range
      const response = await apiClient.get(
        `/v1/reports/sales-cube?mode=5&fromDate=${fromDate}&toDate=${toDate}`
      );
      console.log('[Franchise Report] Sales cube response:', response);
      
      if (response?.APPD && response.APPD.length > 0) {
        setSalesCube(response);
        processSalesCube(response.APPD);
        console.log('[Franchise Report] Processed sales cube data');
      } else {
        console.warn('[Franchise Report] No sales data found for this period');
        // Initialize empty data so the table shows zeros
        setSalesCube(response);
        processSalesCube([]);
      }
    } catch (error) {
      console.error('[Franchise Report] Error loading sales data:', error);
    } finally {
      setLoading(false);
    }
  }, [selectedMonth, selectedYear]);
 
  // Load locations and departments on mount
  useEffect(() => {
    loadLocations();
    loadDepartments();
  }, [loadLocations, loadDepartments]);
 
  // Auto-run report when locations and departments are loaded
  useEffect(() => {
    if (locations.length > 0 && departments.length > 0) {
      console.log('[Franchise Report] Auto-running report with', locations.length, 'locations and', departments.length, 'departments');
      runReport();
    }
  }, [locations.length, departments.length, selectedMonth, selectedYear, runReport]);
 
  const processSalesCube = (cubeData: SalesCubeItem[]) => {
    console.log('[processSalesCube] Processing cube data', {
      itemCount: cubeData.length,
      currentLocId,
      currentLocName,
      sessionStoreId: session?.store?.id,
      isPosUser: session?.store?.type !== 'management'
    });
 
    // Initialize daily totals
    const dailyData: DailyTotals = {};
    for (let day = 1; day <= 31; day++) {
      dailyData[day] = {
        c1: 0, c2: 0, c3: 0, c4: 0, c5: 0, c6: 0, c7: 0, c8: 0, 
        c9: 0, c10: 0, c11: 0, c12: 0, c13: 0, c12_errors: 0
      };
    }
 
    // Determine which locations to include
    let matchLocs: number[] = [];
    if (currentLocId < 0) {
      const loc = locations.find(l => l.f100 === currentLocId);
      if (loc?.f182) {
        matchLocs = loc.f182.split('|').map(Number);
      }
    }
 
    // Process each cube item
    cubeData.forEach((item: SalesCubeItem) => {
      const depId = item.f101;
      const dayOfMonth = parseInt(item.f102.split('|')[2]);
      const amount = item.f201;
      const cost = item.f202 || 0;
 
      console.log('[processSalesCube] Processing item', {
        locationId: item.f100,
        departmentId: depId,
        date: item.f102,
        day: dayOfMonth,
        amount,
        currentLocId
      });
 
      // Check if this location should be included
      // For POS users on "Current Store" tab (currentTab === 0), currentLocId will be their store ID
      // For management on "All Stores" tab, currentLocId will be 0
      const includeLocation = 
        currentLocId === 0 || 
        currentLocId === item.f100 || 
        (matchLocs.length > 0 && matchLocs.includes(item.f100));
 
      if (!includeLocation) return;
      if (dayOfMonth < 1 || dayOfMonth > 31) return;
 
      // Map department to column based on department ID
      // Fieldpine uses LocAll arrays which map to display columns differently
      let columnKey: keyof Omit<DailyTotals[number], 'c12_errors'> | null = null;
      
      switch (depId) {
        case 1: columnKey = 'c3'; break;  // Dept 1 → LocAll3 → Compatible CW Toner
        case 2: columnKey = 'c5'; break;  // Dept 2 → LocAll5 → Compatible CW Inks
        case 3: columnKey = 'c1'; break;  // Dept 3 → LocAll1 → Recharge Toner
        case 4: columnKey = 'c2'; break;  // Dept 4 → LocAll2 → Recharge Ink
        case 5: columnKey = 'c9'; break;  // Dept 5 → LocAll9 → Other/Paper
        case 6:
        case 7:
        case 9:
        case 11:
        case 12:
        case 15:
        case 16:
          columnKey = 'c11'; break; // → LocAll11 → Hardware & Software
        case 8: columnKey = 'c7'; break;  // Dept 8 → LocAll7 → New Toner
        case 10: columnKey = 'c8'; break; // Dept 10 → LocAll8 → New Ink
        case 13: columnKey = 'c9'; break; // Dept 13 → LocAll9 → Other
        case 14: columnKey = 'c10'; break; // Dept 14 → LocAll10 → R&M
        default:
          columnKey = 'c13'; break; // → LocAll13 → Excluded
      }
      
      console.log('[processSalesCube] Mapped dept', depId, 'to column', columnKey, 'amount', amount);
 
      if (columnKey) {
        dailyData[dayOfMonth][columnKey] += amount;
 
        // Handle Hardware/Software gross profit
        if (columnKey === 'c11') {
          dailyData[dayOfMonth].c12 += cost;
          if (cost <= 0 || cost > amount) {
            dailyData[dayOfMonth].c12_errors++;
          }
        }
      }
    });
 
    // Calculate hardware gross profit (c11 - c12)
    Object.keys(dailyData).forEach(day => {
      const d = parseInt(day);
      dailyData[d].c12 = dailyData[d].c11 - dailyData[d].c12;
    });
 
    // Calculate column totals
    const totals = Array(14).fill(0);
    Object.values(dailyData).forEach(day => {
      totals[1] += day.c1;
      totals[2] += day.c2;
      totals[3] += day.c3;
      totals[4] += day.c4;
      totals[5] += day.c5;
      totals[6] += day.c6;
      totals[7] += day.c7;
      totals[8] += day.c8;
      totals[9] += day.c9;
      totals[10] += day.c10;
      totals[11] += day.c11;
      totals[12] += day.c12;
      totals[13] += day.c13;
    });
 
    // Total sales
    totals[0] = totals[1] + totals[2] + totals[3] + totals[4] + totals[5] + 
                totals[6] + totals[7] + totals[8] + totals[9] + totals[10] + totals[11];
 
    setDailyTotals(dailyData);
    setColumnTotals(totals);
  };
 
  const switchLocation = (tabIndex: number) => {
    setCurrentTab(tabIndex);
    
    // For POS users, "All Stores" should be the current store
    const isPosUser = session?.store?.type !== 'management';
    
    if (tabIndex === 0) {
      if (isPosUser) {
        // Set to current store for POS users
        setCurrentLocId(Number(session?.store?.id) || 0);
        setCurrentLocName(session?.store?.name || 'Current Store');
      } else {
        // Set to all stores for management users
        setCurrentLocId(0);
        setCurrentLocName('All Stores');
      }
    } else if (tabIndex - 1 < locations.length) {
      const loc = locations[tabIndex - 1];
      setCurrentLocId(loc.f100);
      setCurrentLocName(loc.f101);
    }
    
    // Re-process with new location filter
    if (salesCube?.APPD) {
      processSalesCube(salesCube.APPD);
    }
  };
 
  const getDaysInMonth = (month: number, year: number) => {
    return new Date(year, month, 0).getDate();
  };
 
  const getDayName = (day: number, month: number, year: number) => {
    const date = new Date(year, month - 1, day);
    const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    return days[date.getDay()];
  };
 
  const isWeekend = (day: number, month: number, year: number) => {
    const date = new Date(year, month - 1, day);
    const dayOfWeek = date.getDay();
    return dayOfWeek === 0 || dayOfWeek === 6;
  };
 
  const formatCurrency = (value: number) => {
    return value.toFixed(2);
  };
 
  // Calculate totals for bottom section
  const totalInk = columnTotals[2] + columnTotals[5] + columnTotals[6] + columnTotals[8];
  const totalToner = columnTotals[1] + columnTotals[3] + columnTotals[4] + columnTotals[7];
  const totalHardSoft = columnTotals[11];
  const totalOther = columnTotals[9] + columnTotals[10];
  const totalHSGP = columnTotals[12];
  const grandTotal = columnTotals[0];
 
  const franchiseFee = grandTotal * 0.06;
  const franchiseFeeGST = franchiseFee * 0.10;
  const franchiseFeeTotal = franchiseFee + franchiseFeeGST;
 
  const adLevy = grandTotal * 0.03;
  const adLevyGST = adLevy * 0.10;
  const adLevyTotal = adLevy + adLevyGST;
 
  const daysInMonth = getDaysInMonth(selectedMonth, selectedYear);
 
  return (
    <div className="p-6">
      <style jsx>{`
        @media print {
          @page {
            size: A4 landscape;
            margin: 10mm;
          }
          
          body {
            print-color-adjust: exact;
            -webkit-print-color-adjust: exact;
          }
          
          * {
            overflow: visible !important;
            max-height: none !important;
            height: auto !important;
          }
          
          .print-hide {
            display: none !important;
          }
          
          .print-full-width {
            width: 100% !important;
            max-width: 100% !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            overflow: visible !important;
            max-height: none !important;
            height: auto !important;
          }
          
          .print-show {
            display: block !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            margin-top: 10pt !important;
            page-break-inside: avoid;
          }
          
          table {
            font-size: 7pt !important;
            width: 100% !important;
          }
          
          th, td {
            padding: 1px 3px !important;
          }
          
          tbody tr {
            page-break-inside: avoid;
          }
        }
      `}</style>
 
      {/* Header */}
      <div className="mb-6">
        <div className="mb-4">
          <h1 className="text-2xl font-bold text-text">Franchise Report</h1>
          <p className="text-sm text-muted">Report Version 1 Sep 2023</p>
        </div>
        <p className="text-sm text-danger font-semibold mb-4">
          Please validate this report is correct before using results.
        </p>
      </div>
 
      {/* Controls */}
      <div className="bg-surface p-4 rounded-lg shadow border border-border mb-6 print-hide">
        <div className="flex items-center gap-4">
          <select
            value={selectedMonth}
            onChange={(e) => setSelectedMonth(Number(e.target.value))}
            className="border border-border rounded px-3 py-2 bg-surface text-text focus:ring-2 focus:ring-brand"
          >
            {monthNames.map((name, idx) => (
              <option key={idx} value={idx + 1}>{name}</option>
            ))}
          </select>
          
          <input
            type="number"
            value={selectedYear}
            onChange={(e) => setSelectedYear(Number(e.target.value))}
            className="border border-border rounded px-3 py-2 w-24 bg-surface text-text focus:ring-2 focus:ring-brand"
          />
          
          <button
            onClick={runReport}
            disabled={loading}
            className="bg-brand text-white px-4 py-2 rounded hover:opacity-90 disabled:opacity-50"
          >
            {loading ? 'Loading...' : 'Run'}
          </button>
 
          <button
            onClick={() => window.print()}
            className="bg-brand text-white px-4 py-2 rounded hover:opacity-90"
          >
            Save as PDF
          </button>
        </div>
      </div>
 
      {/* Location Tabs */}
      <div className="mb-6 print-hide">
        <div className="flex gap-2 flex-wrap border-b border-border">
          <button
            onClick={() => switchLocation(0)}
            className={`px-4 py-2 ${
              currentTab === 0
                ? 'border-b-2 border-brand font-semibold text-brand'
                : 'text-muted hover:text-text'
            }`}
          >
            {session?.store?.type === 'management' ? 'All Stores' : 'Current Store'}
          </button>
          {locations.map((loc, idx) => (
            <button
              key={loc.f100}
              onClick={() => switchLocation(idx + 1)}
              className={`px-4 py-2 ${
                currentTab === idx + 1
                  ? 'border-b-2 border-brand font-semibold text-brand'
                  : 'text-muted hover:text-text'
              } ${loc.f180 === 1 ? 'text-sm' : ''}`}
            >
              {loc.f101}
            </button>
          ))}
        </div>
      </div>
 
      {/* Main Table */}
      <div className="bg-surface rounded-lg shadow overflow-auto border border-border mb-6 max-h-[600px] print-full-width">
        <table className="w-full text-sm border-collapse">
          <thead>
            <tr className="bg-surface-2 border-b-2 border-border">
              <th rowSpan={2} className="border border-border px-2 py-2 text-center align-bottom">
                DAY
              </th>
              <th colSpan={2} className="border border-border px-2 py-1 text-center">
                Recharge
              </th>
              <th colSpan={4} className="border border-border px-2 py-1 text-center">
                Compatible
              </th>
              <th colSpan={2} className="border border-border px-2 py-1 text-center">
                New
              </th>
              <th colSpan={2} className="border border-border px-2 py-1 text-center">
                &nbsp;
              </th>
              <th rowSpan={2} className="border border-border px-2 py-2 text-center align-bottom">
                Hardware &amp;<br />Software
              </th>
              <th rowSpan={2} className="border border-border px-2 py-2 text-center align-bottom">
                H&amp;S<br />Gross Profit
              </th>
              <th rowSpan={2} className="border border-border px-2 py-2 text-center align-bottom">
                Excluded<br />Sales
              </th>
              <th rowSpan={2} className="border border-border px-2 py-2 text-center align-bottom">
                Total Sales
              </th>
            </tr>
            <tr className="bg-surface-2 border-b-2 border-border">
              <th className="border border-border px-2 py-1 text-center">Toner</th>
              <th className="border border-border px-2 py-1 text-center">Ink</th>
              <th className="border border-border px-2 py-1 text-center">CW Toner</th>
              <th className="border border-border px-2 py-1 text-center">Other Toner</th>
              <th className="border border-border px-2 py-1 text-center">CW Inks</th>
              <th className="border border-border px-2 py-1 text-center">Other Inks</th>
              <th className="border border-border px-2 py-1 text-center">Toner</th>
              <th className="border border-border px-2 py-1 text-center">Ink</th>
              <th className="border border-border px-2 py-1 text-center">Other</th>
              <th className="border border-border px-2 py-1 text-center">R&amp;M</th>
            </tr>
          </thead>
          <tbody>
            {Array.from({ length: daysInMonth }, (_, i) => i + 1).map(day => {
              const dayData = dailyTotals[day] || {
                c1: 0, c2: 0, c3: 0, c4: 0, c5: 0, c6: 0, c7: 0, c8: 0,
                c9: 0, c10: 0, c11: 0, c12: 0, c13: 0, c12_errors: 0
              };
              const weekend = isWeekend(day, selectedMonth, selectedYear);
              const dayName = getDayName(day, selectedMonth, selectedYear);
              const totalForDay = dayData.c1 + dayData.c2 + dayData.c3 + dayData.c4 + 
                                  dayData.c5 + dayData.c6 + dayData.c7 + dayData.c8 +
                                  dayData.c9 + dayData.c10 + dayData.c11;
 
              return (
                <tr key={day} className={weekend ? 'bg-surface-2/50' : 'bg-surface'}>
                  <td className="border border-border px-2 py-1 text-right text-text">
                    {dayName} {day}
                  </td>
                  <td className="border border-border px-2 py-1 text-right text-text">{formatCurrency(dayData.c1)}</td>
                  <td className="border border-border px-2 py-1 text-right text-text">{formatCurrency(dayData.c2)}</td>
                  <td className="border border-border px-2 py-1 text-right text-text">{formatCurrency(dayData.c3)}</td>
                  <td className="border border-border px-2 py-1 text-right text-text">{formatCurrency(dayData.c4)}</td>
                  <td className="border border-border px-2 py-1 text-right text-text">{formatCurrency(dayData.c5)}</td>
                  <td className="border border-border px-2 py-1 text-right text-text">{formatCurrency(dayData.c6)}</td>
                  <td className="border border-border px-2 py-1 text-right text-text">{formatCurrency(dayData.c7)}</td>
                  <td className="border border-border px-2 py-1 text-right text-text">{formatCurrency(dayData.c8)}</td>
                  <td className="border border-border px-2 py-1 text-right text-text">{formatCurrency(dayData.c9)}</td>
                  <td className="border border-border px-2 py-1 text-right text-text">{formatCurrency(dayData.c10)}</td>
                  <td className="border border-border px-2 py-1 text-right text-text">{formatCurrency(dayData.c11)}</td>
                  <td 
                    className={`border border-border px-2 py-1 text-right text-text ${
                      dayData.c12_errors > 0 ? 'bg-danger/20' : ''
                    }`}
                  >
                    {formatCurrency(dayData.c12)}
                  </td>
                  <td className="border border-border px-2 py-1 text-right text-text">{formatCurrency(dayData.c13)}</td>
                  <td className="border border-border px-2 py-1 text-right font-semibold text-text">
                    {formatCurrency(totalForDay)}
                  </td>
                </tr>
              );
            })}
            
            {/* Totals Row */}
            <tr className="bg-surface-2 font-bold border-t-2 border-border">
              <td className="border border-border px-2 py-2 text-right text-text">Total</td>
              <td className="border border-border px-2 py-2 text-right text-text">{formatCurrency(columnTotals[1])}</td>
              <td className="border border-border px-2 py-2 text-right text-text">{formatCurrency(columnTotals[2])}</td>
              <td className="border border-border px-2 py-2 text-right text-text">{formatCurrency(columnTotals[3])}</td>
              <td className="border border-border px-2 py-2 text-right text-text">{formatCurrency(columnTotals[4])}</td>
              <td className="border border-border px-2 py-2 text-right text-text">{formatCurrency(columnTotals[5])}</td>
              <td className="border border-border px-2 py-2 text-right text-text">{formatCurrency(columnTotals[6])}</td>
              <td className="border border-border px-2 py-2 text-right text-text">{formatCurrency(columnTotals[7])}</td>
              <td className="border border-border px-2 py-2 text-right text-text">{formatCurrency(columnTotals[8])}</td>
              <td className="border border-border px-2 py-2 text-right text-text">{formatCurrency(columnTotals[9])}</td>
              <td className="border border-border px-2 py-2 text-right text-text">{formatCurrency(columnTotals[10])}</td>
              <td className="border border-border px-2 py-2 text-right text-text">{formatCurrency(columnTotals[11])}</td>
              <td className="border border-border px-2 py-2 text-right text-text">{formatCurrency(columnTotals[12])}</td>
              <td className="border border-border px-2 py-2 text-right text-text">{formatCurrency(columnTotals[13])}</td>
              <td className="border border-border px-2 py-2 text-right text-text">{formatCurrency(grandTotal)}</td>
            </tr>
          </tbody>
        </table>
      </div>
 
      {/* Summary Calculations */}
      <div className="bg-surface p-6 rounded-lg shadow border border-border print-show">
        <table className="w-full max-w-2xl">
          <tbody>
            <tr>
              <td className="py-2">Total Ink Sales</td>
              <td></td>
              <td className="text-right font-semibold">{formatCurrency(totalInk)}</td>
            </tr>
            <tr>
              <td className="py-2">Total Toner Sales</td>
              <td></td>
              <td className="text-right font-semibold">{formatCurrency(totalToner)}</td>
            </tr>
            <tr>
              <td className="py-2">Total Hard/Software Sales</td>
              <td></td>
              <td className="text-right font-semibold italic">{formatCurrency(totalHardSoft)}</td>
            </tr>
            <tr>
              <td className="py-2">Total Other and R&amp;M Sales</td>
              <td></td>
              <td className="text-right font-semibold">{formatCurrency(totalOther)}</td>
            </tr>
            <tr>
              <td className="py-2">Total H&amp;S Gross Profit</td>
              <td></td>
              <td className="text-right font-semibold">{formatCurrency(totalHSGP)}</td>
            </tr>
            <tr>
              <td className="py-2"></td>
              <td className="bg-surface-2 px-3 text-text">Total Excluding GST</td>
              <td className="bg-surface-2 text-right font-bold px-3 text-text">{formatCurrency(grandTotal)}</td>
            </tr>
 
            <tr>
              <td colSpan={3} className="py-4"><hr /></td>
            </tr>
 
            <tr>
              <td className="py-2">Franchise Fee</td>
              <td className="bg-surface-2 px-3 text-text">{formatCurrency(grandTotal)} x 6%</td>
              <td className="text-right font-semibold">{formatCurrency(franchiseFee)}</td>
            </tr>
            <tr>
              <td></td>
              <td className="px-3">Plus GST 10%</td>
              <td className="text-right font-semibold">{formatCurrency(franchiseFeeGST)}</td>
            </tr>
            <tr>
              <td></td>
              <td className="px-3">Total Payable</td>
              <td className="text-right font-bold text-lg">$ {formatCurrency(franchiseFeeTotal)}</td>
            </tr>
 
            <tr>
              <td colSpan={3} className="py-4"><hr /></td>
            </tr>
 
            <tr>
              <td className="py-2">Advertising Levy</td>
              <td className="bg-surface-2 px-3 text-text">{formatCurrency(grandTotal)} x 3%</td>
              <td className="text-right font-semibold">{formatCurrency(adLevy)}</td>
            </tr>
            <tr>
              <td></td>
              <td className="px-3">Plus GST 10%</td>
              <td className="text-right font-semibold">{formatCurrency(adLevyGST)}</td>
            </tr>
            <tr>
              <td></td>
              <td className="px-3">Total Payable</td>
              <td className="text-right font-bold text-lg">$ {formatCurrency(adLevyTotal)}</td>
            </tr>
          </tbody>
        </table>
      </div>
 
      {/* Print styles */}
      <style jsx global>{`
        @media print {
          body {
            print-color-adjust: exact;
            -webkit-print-color-adjust: exact;
          }
          .noprint {
            display: none !important;
          }
        }
      `}</style>
    </div>
  );
}