Chai ki chuski

As a Tech Lead, verify the end-to-end integration between the Auth middleware/route guards and the Login frontend implementation. Ensure the LoginForm (e1e1e665) correctly POSTs credentials to POST /api/auth/login, JWT token is stored in global auth state (212263be), role-based redirects work correctly, protected route guards (ProtectedRoute component from tmp_auth_middleware) block unauthenticated access to all pages, and logout clears token and redirects to /Login. Confirm error states (invalid credentials, network failure, expired token) are properly surfaced in the UI.

As a frontend developer, implement the DashboardNavbar section for the Dashboard page. Build the `DashboardNavbar` component with: (1) Logo/brand group with `Coffee` icon linking to `/Dashboard` showing 'Chai ki Chuski' brand name and 'Tea & Coffee Manager' tagline; (2) Center nav links for Dashboard, Reports, Billing with active state detection via `window.location.pathname` and `dn-nav-link--active` CSS class; (3) Office selector dropdown (`officeRef`) with 4 offices (HQ, Ahmedabad, Surat, Rajkot branches) each with unique color codes, toggled via `officeOpen` state; (4) Language toggle between EN/GU via `language` state; (5) Profile dropdown (`profileRef`) with User, Settings, LogOut icons via `profileOpen` state; (6) Mobile hamburger menu (`mobileOpen` state) with `Menu`/`X` icons; (7) `useEffect` click-outside handler closing all dropdowns; (8) `closeAll` callback via `useCallback`. Import `DashboardNavbar.css` with `dn-` prefixed classes. Note: This is a new navbar specific to Dashboard, distinct from any Login page navbar.

As a Backend Developer, implement authentication API endpoints: (1) POST /api/auth/login — validate username+password against Firestore users collection, return JWT access token and user role, (2) POST /api/auth/logout — blacklist JWT token, (3) GET /api/auth/me — return current authenticated user profile and role, (4) POST /api/auth/refresh — refresh JWT token. JWT payload must include user_id, role (Admin/Staff/User), and office_id. Passwords stored as bcrypt hashes. Depends on FastAPI setup and Firebase setup.

As a Backend Developer, implement Offices REST API endpoints: (1) GET /api/offices — list all offices with id, name, number, teaRate, coffeeRate, totalConsumption, revenue (Admin/Staff/User), (2) POST /api/offices — create new office with name, number, teaRate, coffeeRate (Admin only), (3) GET /api/offices/{id} — get single office details, (4) PUT /api/offices/{id} — update office details including tea/coffee rates (Admin only), (5) DELETE /api/offices/{id} — soft delete office (Admin only), (6) PUT /api/offices/{id}/rates — update only tea/coffee rates for an office (Admin only). All data stored in Firestore offices collection. Depends on FastAPI setup and Firebase setup.

As a Backend Developer, implement Staff Management REST API endpoints: (1) GET /api/staff — list staff with filters (role, office, status, search) and pagination (page, pageSize), returns totalRecords for pagination, (2) POST /api/staff — create new staff member with name, email, role, office_id, password (Admin only), (3) GET /api/staff/{id} — get staff member details, (4) PUT /api/staff/{id} — update staff details including role assignment (Admin only), (5) DELETE /api/staff/{id} — soft delete staff (Admin only), (6) PUT /api/staff/{id}/status — toggle active/inactive status (Admin only), (7) POST /api/staff/bulk — bulk role/status change (Admin only). Staff stored in Firestore users collection. Depends on FastAPI setup and Firebase setup.

As a Frontend Developer, set up the i18next internationalization system for English and Gujarati support. Include: (1) i18next and react-i18next installation and configuration, (2) Translation JSON files for en.json and gu.json covering all UI labels across all pages (Login, Dashboard, Offices, Staff, Reports, Daily Entry, Billing), (3) Noto Sans Gujarati font loading via Google Fonts or local font file for correct Gujarati Unicode rendering, (4) Language preference persistence via localStorage, (5) Locale-aware date formatting (en-IN vs gu-IN) and currency formatting (₹ en-IN), (6) Migrate LoginForm LABELS constant to i18next, (7) Language switcher component integration with Navbar language toggle. Depends on Frontend Global State setup for locale context.

As a Tech Lead, verify the end-to-end integration between the Daily Entry frontend sections (tmp_daily_entry_frontend) and the Daily Entry backend API (tmp_daily_entry_api). Ensure DailyEntryOfficeSelector loads real offices from GET /api/offices, DailyEntryTeaInput and DailyEntryCoffeeInput use real office-specific rates, DailyEntryCalculatedAmounts reflects server-calculated amounts, DailyEntryActions Save button POSTs to POST /api/entries, DailyEntryBillingPreview loads today's entries from GET /api/entries/today. Confirm real-time Firestore updates in billing preview after each entry submission. Verify Staff-only create restrictions and form validation. Depends on: Daily Entry frontend (tmp_daily_entry_frontend), Daily Entry API (tmp_daily_entry_api), Frontend Global State (384d64e4), Auth Middleware (8c5e092e).

As a Backend Developer, implement a PDF invoice generation service: (1) Install and configure a PDF library (e.g., reportlab or weasyprint) in the FastAPI backend, (2) GET /api/billing/{id}/pdf — generates a formatted PDF invoice with office name, billing period, tea qty/rate/amount, coffee qty/rate/amount, subtotal, discount (5%), GST (18%), grand total, invoice number, and date, (3) PDF response returned as application/pdf with Content-Disposition: attachment, (4) Invoice template includes 'Chai ki Chuski' branding and office details, (5) POST /api/billing/generate — generate invoice record from a date range and office_id, writing to Firestore billing_invoices collection. This supports the user's core requirement of generating invoices. Depends on FastAPI setup (c276b180), Firebase setup (790931ee), and Daily Entry API (tmp_daily_entry_api).

As a frontend developer, implement the `DashboardSidebar` component with: (1) Mobile toggle button (`ds-mobile-toggle`) using `Menu` icon that sets `isOpen` to true; (2) Overlay div (`ds-overlay`/`ds-overlay-visible`) that closes sidebar on click; (3) Slide-in `<nav>` with `ds-sidebar`/`ds-sidebar-open` classes; (4) Brand section with `Coffee` icon linking to `/Dashboard`; (5) Two nav groups — `mainNavItems` (Dashboard, Daily Entry, Reports, Billing with `LayoutDashboard`, `Coffee`, `FileText`, `Receipt` icons) and `managementNavItems` (Staff Management, Office Settings with `Users`, `Settings` icons); (6) `renderNavLink` function applying `ds-active` class based on `activePath === item.href` with exclusions for Daily Entry/Staff Management/Office Settings; (7) Badge support on nav items; (8) `useEffect` for Escape key listener only when `isOpen` is true via `closeSidebar` callback. Import `DashboardSidebar.css` with `ds-` prefixed classes.

As a frontend developer, implement the `DashboardWelcomeBanner` component with: (1) Live clock using `setInterval` every 1000ms updating `dateTime` state (initialized with `new Date()`), cleaned up on unmount; (2) `formatTime` helper converting 24h to 12h AM/PM format with zero-padded minutes; (3) `formatDate` helper using `toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })`; (4) `framer-motion` `motion.div` with `initial={{ opacity: 0, y: 12 }}`, `animate={{ opacity: 1, y: 0 }}`, `transition={{ duration: 0.5, ease: 'easeOut' }}` wrapping inner content; (5) Left block with `<h1>` greeting 'Welcome back, Admin' with `dwb-greeting-name` span; (6) Status line with `dwb-status-dot` indicator and 'Ready to track today's consumption'; (7) Right block showing live time (`dwb-time`) and date (`dwb-date`). Import `DashboardWelcomeBanner.css` with `dwb-` prefixed classes.

As a frontend developer, implement the `DashboardMetricsCards` component with: (1) Four metric card objects (tea-consumption 187 cups, coffee-consumption 94 cups, today-revenue ₹3,742, monthly-revenue ₹1,12,650) each with trend, trendValue, trendLabel, color, and icon fields; (2) `cardVariants` framer-motion stagger animation with `delay: i * 0.08`, `y: 24 → 0`, custom easing `[0.25, 0.46, 0.45, 0.94]`; (3) `valueVariants` scale pulse animation `[1, 1.06, 1]` on value display; (4) Custom SVG `TeaCupIcon` and `CoffeeCupIcon` components; (5) `getTrendArrow`, `getTrendClass` (`dmc-trend-up`/`dmc-trend-down`/`dmc-trend-neutral`), and `getTrendIcon` helpers using `TrendingUp`/`TrendingDown`/`Minus` from lucide-react; (6) `IndianRupee` icon from lucide-react for revenue cards; (7) `AnimatePresence` wrapping animated value spans. Import `DashboardMetricsCards.css` with `dmc-` prefixed classes.

As a frontend developer, implement the `DashboardConsumptionChart` component with: (1) Full Chart.js v3 registration of `CategoryScale`, `LinearScale`, `PointElement`, `LineElement`, `BarElement`, `Title`, `Tooltip`, `Legend`, `Filler`; (2) Three time-range data generators: `generateTodayData` (15 hourly labels 6AM–8PM with realistic tea/coffee arrays), `generateWeekData` (Mon–Sun), `generateMonthData` (Week 1–4); (3) `getDataForRange` switch driving `useState` range selector with 'today'/'week'/'month' filter buttons; (4) `buildLineOptions` factory returning Chart.js options with `interaction.mode: 'index'`, custom tooltip (`backgroundColor: '#333333'`, cornerRadius 8, custom `label` callback appending ' cups'), styled x/y axis grids; (5) `Line` and `Bar` from `react-chartjs-2` toggled by chart type state; (6) `useMemo` for chart data config; (7) `framer-motion` `AnimatePresence` for chart type transitions; (8) `TrendingUp`, `Coffee`, `AlertCircle` icons in header. Import `DashboardConsumptionChart.css` with appropriate prefixed classes.

As a frontend developer, implement the `DashboardOfficeBreakdown` component with: (1) `allOffices` array of 10 offices with tea, coffee, revenue fields; (2) `officeColors` array of 10 hex colors; (3) Four filter buttons ('All Offices', 'Top Tea', 'Top Coffee', 'Top Revenue') driving `activeFilter` state; (4) `useMemo`-derived `sortedOffices` — filters to top 5 when filter is not 'all', otherwise full sort by `sortField`/`sortDir`; (5) Column sort via `handleSort` toggling `sortDir` between 'asc'/'desc' with `ArrowUpDown` icon; (6) `SortArrow` sub-component rendering `▲` with `dob-sort-arrow--desc` class rotation; (7) Mobile truncation showing 3 rows by default with `showAllMobile` toggle via `ChevronDown` button; (8) `dob-row-count` span in title showing filtered count; (9) `Building2` icon in section title. Import `DashboardOfficeBreakdown.css` with `dob-` prefixed classes.

As a frontend developer, implement the `DashboardQuickActions` component with: (1) Three action cards (Add Daily Entry → `/Daily Entry`, Generate Report → `/Reports`, View Billing → `/Billing`) with variant classes `dqa-action--primary/secondary/accent` and colors `#4A90E2`, `#E94E77`, `#F5A623`; (2) `handleClick` callback showing `toast` state message and triggering GSAP `fromTo` animation on `.dqa-toast` (opacity 0→1, y 20→0, 0.3s, power2.out), then navigating via `window.location.href` after 400ms; (3) 3D tilt effect via `handleMouseMove` computing `rotateX`/`rotateY` from mouse offset relative to card center (±6°) and `gsap.to` with `transformPerspective: 800`, `scale: 1.02`; (4) `handleMouseLeave` resetting with `elastic.out(1, 0.4)` easing back to `rotateX/Y: 0, scale: 1`; (5) `cardRefs` useRef array for GSAP targets; (6) `framer-motion` `motion.div` wrapping each card; (7) `Coffee`, `FileBarChart`, `Receipt`, `ArrowRight`, `Check` icons. Import `DashboardQuickActions.css` with `dqa-` prefixed classes.

As a frontend developer, implement the `DashboardRevenueOverview` component with: (1) Static `revenueData` object containing `monthlyRevenue: 284750`, `previousMonthRevenue: 256320`, `growthPercent: 11.09`, `forecastAmount: 312400`, `sparklineData` array of 7 weekly values, `sparklineLabels`; (2) `canvasRef` + `canvasReady` state for DPI-aware canvas rendering; (3) `drawSparkline` callback using `useCallback` that: reads container `getBoundingClientRect`, sets canvas width/height with `devicePixelRatio` scaling, computes normalized data points, draws gradient fill (`rgba(233,78,119,0.18)→0.0`), draws bezier curve line in `#E94E77` with `lineWidth: 2`, draws final point dot (4px radius, `#E94E77` fill, white 2px stroke); (4) `useEffect` calling `drawSparkline` on resize via ResizeObserver or window resize; (5) `IndianRupee`, `TrendingUp`/`TrendingDown`, `Calendar` icons in stats display. Import `DashboardRevenueOverview.css` with `dro-` prefixed classes.

As a frontend developer, implement the `DashboardTopOffices` component with: (1) `officeData` array of 5 offices (Head Office HO, Ahmedabad AB, Surat SB, Rajkot RB, Vadodara VB) each with rank, name, location, teaPercent, coffeePercent, revenue, trend, trendValue, initials; (2) `getRankClass` returning `dto-rank-badge--gold/silver/bronze/default` for ranks 1/2/3/4+; (3) `formatRevenue` using `toLocaleString('en-IN')` with ₹ prefix; (4) `rowVariants` framer-motion with `hidden: { opacity: 0, x: -20 }` and `visible` with `delay: i * 0.08`, `duration: 0.4`, custom ease; (5) `headerRef` + `useInView` from framer-motion (`once: true, margin: '-40px'`) triggering GSAP `context` animations on `.dto-heading-icon` (scale 0.6→1, rotation -15→0, back.out(1.7)), `.dto-title` (opacity/y fade-in), `.dto-subtitle` (opacity/y fade-in) with staggered delays; (6) GSAP `ctx.revert()` cleanup; (7) `Trophy`, `TrendingUp`, `TrendingDown` icons. Import `DashboardTopOffices.css` with `dto-` prefixed classes.

As a frontend developer, implement the `DashboardFooter` component with: (1) `toastVisible` and `toastMessage` state for feedback confirmation toast; (2) `showToast` callback using `useCallback` setting message, toggling `df-toast--visible` class, auto-hiding after 2500ms; (3) `handleFeedback` callback invoking `showToast` with 'Thank you for your feedback! We will get back to you soon.'; (4) Footer nav with three links (Dashboard `/Dashboard`, Reports `/Reports`, Billing `/Billing`) with `df-nav-link` class; (5) `df-divider` separator; (6) Bottom row with copyright showing dynamic `currentYear` via `new Date().getFullYear()` and `df-brand` span for 'Chai ki Chuski'; (7) Support link as `<a href="mailto:support@chaikichuski.in">` with `LifeBuoy` icon; (8) Feedback `<button>` with `MessageSquareHeart` icon; (9) Toast `<div>` with `role="status"` and `aria-live="polite"`. Import `DashboardFooter.css` with `df-` prefixed classes.

As a frontend developer, implement the Navbar section for the Offices page. This component may already exist from the Dashboard page (DashboardNavbar task 2b504e97). The Navbar uses useState for scrolled, mobileOpen, profileOpen, lang, and activePage state. It uses useEffect to add a passive scroll listener (setScrolled when window.scrollY > 8) and to detect the active page from window.location.pathname. NAV_PAGES array defines 6 routes: Dashboard, Offices, Staff, Reports, Daily Entry, Billing — each with a lucide-react icon. The desktop link list renders nb-link items with nb-active class on the current page. A profileRef useRef handles outside-click closing of the profile dropdown via handleBackdropClick useCallback. handleMobileNav useCallback updates activePage and closes the mobile menu. Applies nb-scrolled CSS class to nb-root on scroll. Imports Navbar.css for styling.

As a frontend developer, implement the Navbar section for the Staff page. This is a shared component that may already exist from previous pages (Offices, Dashboard). The Navbar uses `useState` for `scrolled`, `mobileOpen`, `profileOpen`, `lang`, and `activePage` states. It includes scroll-based class toggling via `useEffect` + `window.scrollY`, pathname-based active page detection, and a `profileRef` for outside-click dropdown dismissal. NAV_PAGES array defines 6 routes (Dashboard, Offices, Staff, Reports, Daily Entry, Billing) each with a lucide-react icon. Renders: `nb-logo` with Coffee icon, desktop `nb-links` list with per-page Icon components and `nb-active` class, and `nb-actions` with language toggle and profile dropdown. The Staff nav item should be active by default on this page. CSS classes follow the `nb-` prefix convention.

As a frontend developer, implement the Navbar section for the Reports page. This component may already exist from Dashboard/Billing/Staff pages — reuse or extend it. It uses useState for activePage ('Dashboard'), langOpen, selectedLang ('en'), profileOpen, and mobileOpen. Uses useRef (langRef, profileRef) with a handleClickOutside useCallback to close dropdowns. A useEffect locks body scroll when mobileOpen is true. Renders nb-root nav with: nb-logo-wrap (☕ icon + 'Chai ki Chuski' / 'Tea Vendor Solution'), nb-breadcrumb with ChevronDown separators linking Dashboard/Reports/Billing with nb-active class on activePage, language switcher dropdown (Globe icon, English/ગુજરાતી with flag emojis) via langRef, profile dropdown (User/Settings/LogOut icons) via profileRef, Bell notification icon, and a mobile hamburger Menu/X toggle. CSS: Navbar.css (10578 chars).

As a Backend Developer, implement Daily Entry REST API endpoints: (1) POST /api/entries — create daily entry with office_id, date, teaQty, coffeeQty; server auto-calculates teaAmount (qty × office teaRate) and coffeeAmount (qty × office coffeeRate), totalAmount (Staff only), (2) GET /api/entries — list entries with filters: office_id, date, date_range, page/pageSize, (3) GET /api/entries/{id} — get single entry, (4) PUT /api/entries/{id} — update entry (Staff/Admin), (5) DELETE /api/entries/{id} — delete entry (Admin only), (6) GET /api/entries/today — today's entries for all offices (for Dashboard and billing preview). Write each entry to Firestore daily_entries collection with real-time sync. Depends on FastAPI setup, Firebase setup, and Offices API.

As a Tech Lead, verify the end-to-end integration between the Login frontend sections and the Auth backend API (tmp_auth_api). Ensure LoginForm posts credentials to POST /api/auth/login, JWT token is stored in global auth state (tmp_frontend_global_state), role-based redirects work (Admin/Staff/User all go to Dashboard), ProtectedRoute guards block unauthenticated access to all pages, and logout clears token and redirects to /Login. Confirm error states (invalid credentials, network failure, expired token) are properly surfaced in the LoginForm UI. Depends on: LoginForm frontend task (11b1f16b), Auth API (tmp_auth_api), Auth Middleware (8c5e092e), Frontend Global State (tmp_frontend_global_state).

As a Tech Lead, verify the end-to-end integration between the Offices frontend sections and the Offices CRUD backend API (tmp_offices_api). Ensure OfficesListTable loads offices from GET /api/offices, OfficesRateConfig updates tea/coffee rates via PUT /api/offices/{id}/rates, OfficesHeader 'Add New Office' button calls POST /api/offices, OfficesActions Firebase sync triggers correctly, and Admin-only restrictions are enforced via route guards. Confirm real-time Firestore updates reflect in the list after add/edit operations. Depends on: Offices frontend tasks (3c15a202, 6aa4610c, 1d040725, 6e993821, 7d10058d), Offices API (tmp_offices_api), Auth Middleware (8c5e092e), Frontend Global State (tmp_frontend_global_state).

As a Tech Lead, verify the end-to-end integration between the Staff frontend sections and the Staff Management backend API (tmp_staff_api). Ensure StaffTable loads staff from GET /api/staff with role/office/status filters and real totalRecords for pagination, StaffAddModal creates staff via POST /api/staff, StaffFiltersBar updates query params triggering API refetch, StaffPagination drives real pagination from API response, StaffBulkActions bulk operations call POST /api/staff/bulk endpoint. Confirm Admin-only restrictions enforced. Depends on: Staff frontend tasks (c186277d, 796de09c, 0d50b1a4, 6851ac09, ed8fdfc7), Staff API (tmp_staff_api), Auth Middleware (8c5e092e), Frontend Global State (tmp_frontend_global_state).

As a Tech Lead, verify the end-to-end integration between the InvoiceDetailsSection frontend (26b5f255) and the Invoice PDF Generation backend service (tmp_invoice_pdf_generation). Ensure the Download PDF button in InvoiceDetailsSection calls GET /api/billing/{id}/pdf, the browser triggers a file download with correct filename (e.g., INV-2026-001.pdf), PDF content matches the displayed invoice values (tea qty/rate, coffee qty/rate, GST, discount, grand total), and the Generate Invoice flow in DownloadExportSection (542c8cc7) calls POST /api/billing/generate with correct date range and office params. Confirm error handling when PDF generation fails. Depends on: InvoiceDetailsSection (26b5f255), DownloadExportSection (542c8cc7), Invoice PDF Generation (tmp_invoice_pdf_generation).

As a frontend developer, implement the OfficesHeader section for the Offices page. The component uses useRef for titleRef, descRef, accentBarRef, statsRef, and btnRef. On mount, a GSAP timeline (power3.out easing) sequences five entrance animations: accentBarRef width 0→48px with opacity fade, titleRef opacity/y/blur reveal, descRef opacity/y slide, statsRef opacity/y slide, and btnRef opacity/scale pop with back.out(1.7). The layout includes an ofh-accent-bar div, an ofh-top-row with an eyebrow label ('Office Management'), an h1 title ('Offices'), and a Framer Motion motion.button (.ofh-add-btn) with whileHover scale 1.04, whileTap scale 0.97, spring stiffness 400/damping 17, Plus lucide icon, and aria-label 'Add new office'. Below is an ofh-description paragraph and an ofh-stats-row with stat pills including colored dot indicators. Cleans up GSAP timeline on unmount with tl.kill(). Imports OfficesHeader.css.

As a frontend developer, implement the OfficesListTable section for the Offices page. The component manages useState for search (string), sortKey (default 'name'), and sortDir ('asc'/'desc'). OFFICES_DATA is a static array of 8 office objects with fields: id, name, number, teaRate, coffeeRate, totalConsumption, revenue. SORT_KEYS maps column keys. useMemo computes filtered/sorted list — filtering by name/number substring match and sorting with string lowercasing. handleSort toggles sortDir if same key or resets to 'asc' for a new key. sortIndicator renders ▲/▼ span. Framer Motion containerVariants uses staggerChildren 0.05 / delayChildren 0.1; rowVariants animates opacity/y with 0.35s easeOut. Table columns: Office Name, Number, Tea Rate, Coffee Rate, Total Consumption, Revenue, Actions. Action column includes Pencil and Trash2 lucide icons. formatCurrency formats values as ₹ with en-IN locale. AnimatePresence wraps row list. A Search lucide icon and SlidersHorizontal filter icon are rendered in the toolbar. Imports OfficesListTable.css.

As a frontend developer, implement the OfficesRateConfig section for the Offices page. State includes: offices (array from initialOffices with 6 office objects each having id, name, location, teaRate, coffeeRate), savedRates (lazy-initialized map of id→{tea, coffee}), editedFields (tracks which fields have unsaved changes), saving (boolean), toast (null or message object), lastUpdated (Date), and successfulSave (boolean). useRef for headerRef, cardsRef, and toastTimer. On mount, gsap.context runs a GSAP timeline that animates headerRef (opacity/y) and cardsRef entrance. Framer Motion cardVariants uses custom index delay (i * 0.06) with easeOut. toastVariants handles hidden/visible/exit states for toast notifications. Each office card renders tea/coffee rate inputs with inline edit tracking via editedFields. Save button triggers setSaving, simulates async save, updates savedRates, sets lastUpdated, shows toast via setToast with auto-dismiss via toastTimer ref. Undo2 and CopyPlus lucide icons enable undo-changes and copy-rates actions. AnimatePresence wraps the toast. formatTimestamp helper formats Date to DD/MM/YYYY at HH:MM. Building2, Coffee, Clock, RotateCcw, Save, CheckCircle2 lucide icons used. Imports OfficesRateConfig.css.

As a frontend developer, implement the OfficesActions section for the Offices page. The component manages useState for syncState ('synced'/'syncing'/'error'), syncLabel (string showing last sync time), and isSyncing (boolean). Framer Motion containerVariants uses staggerChildren 0.08 / delayChildren 0.1; cardVariants animates opacity/y with 0.45s easeOut. The actions array defines 4 action cards: 'Export Office List' (FileSpreadsheet icon, href '/Reports'), 'Sync with Firebase' (Cloud icon, isAction true — triggers handleSync), 'View Usage Analytics' (BarChart3 icon, href '/Reports'), 'Reset Daily Counters' (RotateCcw icon, isAction true — triggers handleReset). handleSync useCallback sets isSyncing, updates syncState to 'syncing', then after 1800ms timeout resolves with 90% success probability — on success updates syncLabel with current time, on failure sets syncState 'error'. handleReset useCallback calls window.confirm before calling alert to confirm reset. handleCardClick useCallback routes to href or dispatches action handler. CheckCircle and AlertCircle icons render sync status. Each card has accentClass and iconClass variants (oa-primary-accent, oa-secondary-accent). Imports OfficesActions.css.

As a frontend developer, implement the Footer section for the Offices page. This component may already exist from the Dashboard page (DashboardFooter task 78a95eb2). The Footer is a static functional component that computes currentYear via new Date().getFullYear(). It renders a ftr-accent-line div at the top, then a ftr-inner container with a ftr-top row containing four columns: Brand column (ftr-brand-name 'Chai ki Chuski', ftr-brand-tagline paragraph, ftr-lang-badge with Globe lucide icon showing 'English & ગુજરાતી'), Quick Links column (maps pages array of 6 routes: Dashboard, Offices, Staff, Reports, Daily Entry, Billing), Support column (two ftr-support-item divs with Mail and Phone lucide icons linking to support@chaikichuski.in and +91 98765 43210), and Resources column (static links to Getting Started, Report Guide, Billing FAQ, Office Setup). A ftr-bottom bar renders the copyright string with currentYear. Imports Footer.css.

As a frontend developer, implement the StaffPageHero section for the Staff page. Uses `useRef` for `titleRef`, `descRef`, `ctaRef`, `breadcrumbRef`, and `glowRef`, plus `useState` for `glowPos` ({x, y}). On mount, a GSAP timeline (`gsap.timeline`) sequences four entrance animations: breadcrumb (opacity+y), title row (opacity+y), description (opacity+y), and CTA button (opacity+scale) with overlapping offsets using `-=` stagger. Implements cursor-reactive radial glow via `onMouseMove`/`onMouseLeave` handlers that update `glowPos` state, positioning a `.sph-glow-dot` div absolutely via inline `left`/`top` style. JSX includes: `.sph-breadcrumb` nav with Dashboard link, ChevronRight separator, and 'Staff' current crumb; `.sph-title-row` with a `motion.div` title icon (Users, whileHover shake animation) and `<h1>` 'Staff Management'; `.sph-desc` paragraph; and a CTA ref block. All animated refs initialize with `style={{ opacity: 0 }}`.

As a frontend developer, implement the StaffFiltersBar section for the Staff page. Uses `useState` for `search`, `role`, `office`, and `status` filter values. Computes `activeFilterCount` from the three non-search filters. Uses `rootRef` for GSAP entrance animation (`fromTo` opacity+y, power3.out) on mount. Uses `badgeRef` for a GSAP pulse animation (`fromTo` scale 1.6→1, back.out) whenever `activeFilterCount` changes. Renders: `.sfb-search-wrapper` with Search icon and text input (aria-label, placeholder 'Search by name or email...'); `.sfb-filters` container with three `<select>` dropdowns each wrapped in `.sfb-select-wrapper` with a lucide icon (Users for role, Building2 for office, Circle for status) — ROLE_OPTIONS (All Roles/Admin/Staff), OFFICE_OPTIONS (5 offices), STATUS_OPTIONS (All/Active/Inactive); an active filter badge with `badgeRef` showing count; and a `handleClearAll` button using AnimatePresence/motion for conditional render via `X` icon. CSS prefix: `sfb-`.

As a frontend developer, implement the StaffTable section for the Staff page. Uses `useState` for `staff` array (initialized with STAFF_DATA: 8 staff members with id, name, email, role, office, status bool, joinDate). Uses `tableRef` for GSAP entrance (`fromTo` opacity+y, power3.out). Helper functions: `getInitials(name)` splits name and joins first letters (max 2, uppercase); `formatDate(dateStr)` formats to en-IN locale (day/month/year). Implements `toggleStatus(id)`, `handleEdit(id)` (placeholder for StaffAddModal integration), and `handleDelete(id)` (filters staff array). Computes `activeCount` from `staff.filter(s => s.status).length`. Renders: `.sft-header-row` with title and `<span className='sft-count'>` showing total and active counts; `.sft-table-wrap` with a table using AnimatePresence for row enter/exit animations, per-row avatar initials, email, role badge, office, join date via `formatDate`, status toggle button, and Pencil/Trash2 action icons. CSS prefix: `sft-`.

As a frontend developer, implement the StaffAddModal section for the Staff page. Uses extensive `useState` hooks: `isOpen`, `name`, `email`, `role` (default 'Staff'), `office`, `password`, `showPassword`, `agreeTerms`, `errors` (object), `submitting`, `globalError`. Uses `nameInputRef` to auto-focus first field when modal opens. Three `useEffect` hooks: (1) opens modal after 120ms delay on mount; (2) focuses `nameInputRef.current` when `isOpen` becomes true; (3) attaches Escape keydown listener to call `closeModal`. `generatePassword()` produces a 12-char random string from alphanumeric+special chars pool. Framer Motion variants: `overlayVariants` and `modalVariants` for backdrop/modal enter-exit (scale+y+opacity). Modal form fields: name text input (`nameInputRef`), email input, role select (ROLES: Staff/Admin), office select (OFFICES: 4 branches), password input with Eye/EyeOff toggle and RefreshCw generate button, agreeTerms checkbox, submit button (UserPlus icon, `submitting` loading state). Shows per-field error messages with AlertCircle icon and `globalError` banner. `handleOverlayClick` closes on backdrop click. CSS prefix: `sam-`.

As a frontend developer, implement the StaffPagination section for the Staff page. Uses `useState` for `currentPage` (default 1) and `pageSize` (default 10). Hardcoded `totalRecords = 156`, computes `totalPages = Math.ceil(totalRecords / pageSize)`. `handlePrev`/`handleNext` callbacks clamp page within bounds. `handlePageSizeChange` resets to page 1 on size change. `pageNumbers` is a `useMemo` that builds smart ellipsis pagination: shows all pages if `totalPages <= 7`, else always includes first/last with `'...'` ellipsis strings around a window of `currentPage ± 1`. PAGE_SIZE_OPTIONS: [10, 25, 50, 100]. Computes `startRecord` and `endRecord` for display. Renders: `motion.div.sp-top-row` (opacity+y entrance) with `sp-total-info` span (Showing X-Y of 156) and `sp-size-group` label+select for rows per page; `motion.div.sp-controls` (delayed entrance) with ChevronLeft prev button, page number buttons mapped from `pageNumbers` using AnimatePresence for active page highlight (ellipsis rendered as non-interactive spans), and ChevronRight next button. CSS prefix: `sp-`.

As a frontend developer, implement the Footer section for the Staff page. This is a shared static component that may already exist from previous pages (Offices). Uses `new Date().getFullYear()` for dynamic copyright year. Defines a `pages` array of 6 nav links (Dashboard, Offices, Staff, Reports, Daily Entry, Billing). Renders: `.ftr-accent-line` decorative top border; `.ftr-top` grid with four columns — (1) `.ftr-brand-col` with brand name 'Chai ki Chuski', tagline paragraph, and `.ftr-lang-badge` with Globe icon showing 'English & ગુજરાતી'; (2) Quick Links column with `ftr-links` ul mapping `pages`; (3) Support column with two `.ftr-support-item` rows each having `.ftr-support-icon` (Mail for email, Phone for phone), label, and anchor value (mailto:support@chaikichuski.in, tel:+919876543210); (4) Resources column with 4 static links. Bottom `.ftr-bottom` with `.ftr-copyright` dynamic year text. CSS prefix: `ftr-`.

As a frontend developer, implement the ReportsHeader section for the Reports page. Uses useState for activePreset ('month'), customStart, customEnd (initialized via getMonthStart/getMonthEnd helpers), and appliedRange (initialized to getPresetLabel('month')). Renders rh-root section with: an rh-title with BarChart3 icon (size 26) and 'Reports' text, rh-subtitle describing report capabilities, and an rh-range-summary div with aria-live='polite' showing a dot indicator and the active range label. Four date preset buttons ('Today', 'This Week', 'This Month', 'Custom') call handlePresetClick; when 'custom' is active, two date inputs (customStart, customEnd) appear with a 'Apply' button calling handleApplyCustom. Calendar and Search icons from lucide-react are also imported. Helper functions: formatDate, getToday, getWeekStart/End, getMonthStart/End, getPresetRange, getPresetLabel. CSS: ReportsHeader.css (4612 chars).

As a frontend developer, implement the ReportsFilterBar section for the Reports page. Uses useState for selectedOffice ('all'), selectedCategory ('all'), selectedSort ('date-desc'), startDate (''), endDate (''), and openDropdown (null). Uses useRef for office and sort dropdowns with a handleClickOutside useCallback registered via useEffect. Renders: an office dropdown (Building2 icon, 6 options including Ahmedabad HQ/Mumbai Branch/Surat/Vadodara/Rajkot) with Check marks on selected item; a category toggle group (Coffee icon, All/Tea/Coffee pills); a sort dropdown (6 sort options: date/qty/amount asc+desc); two date inputs (startDate, endDate); a 'Clear' button (RotateCcw icon) visible when hasActiveFilters is true (computed from non-default selections). activeCount badge shows number of active filters. All dropdowns use ChevronDown icon and close on outside click. CSS: ReportsFilterBar.css (7269 chars).

As a frontend developer, implement the ReportsTabs section for the Reports page. Uses useState for activeTab ('datewise'). Renders an rt-root div with rt-inner containing: a ul.rt-tab-list with role='tablist' and aria-label='Report view tabs'; three tab buttons for 'datewise' (CalendarDays icon), 'officewise' (Building2 icon), and 'monthly' (FileText icon) — each with rt-tab-btn class, rt-active when selected, role='tab', aria-selected, aria-controls, and id attributes. Supports optional badge rendering via tab.badge. Below the tab list, an rt-content div renders three rt-content-panel divs (rt-content-active on active tab), each with role='tabpanel', aria-labelledby, and a rt-placeholder div showing '{tab.label} report content loads here.' placeholder text. Returns null if tabs array is empty. CSS: ReportsTabs.css (3280 chars).

As a frontend developer, implement the Footer section for the Reports page. This component may already exist from Dashboard/Billing/Staff/Offices pages — reuse or extend it. Renders ftr-root footer with: two decorative ftr-steam divs (ftr-steam--left, ftr-steam--right) with aria-hidden. Inside ftr-inner: ftr-top row with ftr-brand block (☕ ftr-logo-icon, 'Chai ki Chuski' ftr-logo-text, tagline about tea/coffee management) and ftr-columns with three link columns — Pages (Dashboard/Reports/Billing), Support (Help Center/Contact Support/FAQs/System Status), Resources (Getting Started Guide/Rate Configuration/Export Reports/Office Management). Below ftr-top: ftr-lang-strip showing 'Available in:' label and language options (English active, ગુજરાતી inactive) as ftr-lang-item elements. CSS: Footer.css (4466 chars).

As a Backend Developer, implement Dashboard statistics API endpoints: (1) GET /api/dashboard/today — today's aggregate: totalTeaCups, totalCoffeeCups, todayRevenue across all offices, (2) GET /api/dashboard/monthly — current month revenue, previousMonthRevenue, growthPercent, forecastAmount, weeklySparklineData (7 values), (3) GET /api/dashboard/top-offices — top 5 offices by consumption with rank, name, teaPercent, coffeePercent, revenue, trend. All queries aggregate from Firestore daily_entries collection. Results cached for 60s to support 100+ offices scalability. Depends on FastAPI setup, Firebase setup, and Daily Entry API.

As a Backend Developer, implement Reports REST API endpoints: (1) GET /api/reports/datewise — paginated date-wise report with filters: startDate, endDate, office_id, sortKey, sortDir, page, pageSize; returns rows with date, teaQty, coffeeQty, teaAmt, coffeeAmt, total, (2) GET /api/reports/officewise — office aggregation report with per-office totals and daily breakdown array, (3) GET /api/reports/monthly — monthly summary with tea total, coffee total, revenue, topOffice, change percentages, (4) GET /api/reports/export — generate and return Excel (.xlsx) or PDF file for selected report types (datewise/officewise/monthly/charts) with date range filters. All queries from Firestore entries collection. Depends on FastAPI setup, Firebase setup, Daily Entry API.

As a Backend Developer, implement Billing & Invoice REST API endpoints: (1) GET /api/billing — list invoices with filters: search, status (Paid/Pending/Overdue), sortBy, page, perPage; returns invoice list with id, date, teaQty, teaRate, coffeeQty, coffeeRate, teaAmt, coffeeAmt, subtotal, discountAmount, taxAmount, grandTotal, status, office, (2) GET /api/billing/{id} — get single invoice details with full line-item breakdown, tax calculation (18% GST), discount (5%), (3) POST /api/billing/generate — generate invoice from date range and office, (4) GET /api/billing/{id}/pdf — generate and return PDF invoice file, (5) GET /api/billing/summary — return current balance, outstanding amount, next billing date. Invoices stored in Firestore billing_invoices collection. Depends on FastAPI, Firebase, Daily Entry API.

As a frontend developer, implement the StaffBulkActions section for the Staff page. Uses `useState` for `selectedCount` (initialized 0) and `barRef`. On mount, a `setTimeout(400ms)` simulates selection by setting `selectedCount` to 3 to make the bar visible for demo. A second `useEffect` watches `selectedCount > 0` to trigger GSAP entrance on `barRef` (`fromTo` opacity+y+scale, power3.out). Computes `isVisible = selectedCount > 0`. Uses `AnimatePresence` to conditionally render `motion.div.sba-bar` with `initial/animate/exit` variants (opacity, y:16, scale:0.97). Bar left side: `.sba-counter-icon` (CheckCheck icon) with spring-scale entrance motion, `.sba-counter-text` with `sba-counter-num` span, and a `.sba-deselect` button (X icon, calls `handleDeselect` → sets count to 0). Bar right: `.sba-actions` with three buttons — `sba-btn-role` (UserCog, handleAssignRole placeholder), `sba-btn-status` (ArrowLeftRight, handleChangeStatus placeholder), `sba-btn-delete` (Trash2, handleDelete placeholder). CSS prefix: `sba-`.

As a frontend developer, implement the Navbar section for the Billing page. This component (imported from '../styles/Navbar.css') may already exist from previous pages (Dashboard, Offices, Staff). It uses useState hooks for activePage, langOpen, selectedLang, profileOpen, and mobileOpen states, along with useRef for langRef and profileRef for click-outside detection via useCallback/useEffect. The nav renders a logo ('Chai ki Chuski' with ☕ icon), a desktop breadcrumb list using lucide-react ChevronDown icons for separator arrows (rotated -90deg) linking to Dashboard, Reports, and Billing pages, and right-side controls including a language switcher (Globe icon, dropdown with EN/Gujarati flags), Bell notification icon, and a profile dropdown (User, Settings, LogOut icons). Mobile menu uses Menu/X toggle with body overflow lock. The Billing page should be marked active. Reuse the existing Navbar component if already implemented.

As a frontend developer, implement the ReportsDatewiseTable section for the Reports page. Uses useState for sortKey ('date'), sortDir ('desc'), currentPage (1), rowsPerPage (10), and animateKey (0). Uses useMemo to sort 15-row reportData array (fields: date, teaQty, coffeeQty, teaAmt, coffeeAmt, total) by any column. handleSort toggles direction on same key or resets to desc/asc on new key, resets to page 1, and increments animateKey. Renders a sortable table with ChevronUp sort indicators, columns: Date (formatted with formatDate helper returning {formatted, weekday} using weekdays array), Tea Qty, Coffee Qty, Tea Amt (₹), Coffee Amt (₹), Total (₹). Includes a summary footer row showing column totals. Pagination row shows ChevronLeft/ChevronRight buttons, page X of Y label, and a rowsPerPage selector (5/10/20/50). Empty state uses Database and Coffee icons. CSS: ReportsDatewiseTable.css (7038 chars).

As a frontend developer, implement the ReportsOfficewiseTable section for the Reports page. Uses useState for sort state and expandedOffice. Renders a sortable table with SORTABLE_COLUMNS ['office', 'tea_total', 'coffee_total', 'total_amount', 'top_days'] using ChevronDown sort indicators. OFFICE_DATA contains 5+ offices (Head Office—Nariman Point, BKC Branch, Andheri East, Lower Parel, Powai Tech Park) each with id, name, avatar (2-letter abbreviation), teaTotal, coffeeTotal, totalAmount, topDays array, and a daily array of 7 date entries (date, tea, coffee, amount). Each row shows avatar badge, office name, tea/coffee totals, total amount (₹), and topDays pills (Mon/Tue/etc). Clicking a row expands an inline sub-table showing daily breakdown. useMemo for sorted data. Building2 icon used for empty state. CSS: ReportsOfficewiseTable.css (8674 chars).

As a frontend developer, implement the ReportsMonthlySummary section for the Reports page. Renders a static grid of 4 summary cards defined in the cards array, each with: id (tea/coffee/revenue/topOffice), an inline SVG icon, label, value (e.g. '12,480', '8,920', '₹ 2,84,600', 'Ahmedabad HQ'), unit string (e.g. 'cups'), change percentage (8.2, -3.5, 12.4, 5.7), cardClass (rms-card--tea/coffee/revenue/top-office), and iconClass. getChangeClass returns 'rms-change--up', 'rms-change--down', or 'rms-change--neutral' based on the change value. getChangeIcon renders a ChevronUp/ChevronDown inline SVG (12×12, strokeWidth 3) inside rms-change-icon span. Each card renders icon in a colored icon wrapper, label, large value with unit, and a change badge with directional arrow. CSS: ReportsMonthlySummary.css (3745 chars).

As a Tech Lead, verify the end-to-end integration between the Dashboard frontend sections and the Dashboard Stats backend API (tmp_dashboard_api). Ensure DashboardMetricsCards loads from GET /api/dashboard/today, DashboardRevenueOverview loads from GET /api/dashboard/monthly, DashboardTopOffices loads from GET /api/dashboard/top-offices, DashboardConsumptionChart renders real data from daily entries, DashboardOfficeBreakdown reflects API data, and real-time Firestore listeners (useRealtimeDashboard) update stats live as new daily entries are submitted. Confirm tea/coffee cup animation reflects actual consumption percentages. Depends on: Dashboard frontend tasks (989c5059, ad8e5af7, dfd75e75, fd8050db, d82fc55a, be004053, f52c4a79), Dashboard API (tmp_dashboard_api), Frontend Global State (tmp_frontend_global_state).

As a Tech Lead, verify the end-to-end integration between the Reports frontend sections and the Reports backend API (tmp_reports_api). Ensure ReportsTabs tab changes load the correct endpoint, ReportsHeader date presets pass startDate/endDate to API, ReportsFilterBar filters update query params, ReportsDatewiseTable renders API paginated data, ReportsOfficewiseTable renders office aggregations, ReportsMonthlySummary renders monthly totals, ReportsExportPanel triggers file download from GET /api/reports/export. Confirm pagination and sort params pass correctly to the API. Depends on: Reports frontend tasks (351d6b43, 36288617, 37c253b2, 3ce37f06, 4b907371, ac420808, ca456d27, dd45baab), Reports API (tmp_reports_api), Frontend Global State (tmp_frontend_global_state).

As a Tech Lead, verify the end-to-end integration between the Billing frontend sections and the Billing & Invoice backend API (tmp_billing_api). Ensure BillingHistorySection loads invoice list from GET /api/billing with pagination/search/filters, InvoiceDetailsSection matches server-calculated values (GST 18%, 5% discount), DownloadExportSection date presets call GET /api/reports/export with correct params, TaxAndTotalsSection totals align with API-returned amounts, BillingHero summary card values load from GET /api/billing/summary, and real-time Firestore updates refresh billing totals when new daily entries are saved. Depends on: Billing frontend tasks (26b5f255, 3c0c63e2, 542c8cc7, 7ba396ff, f30a89ff, f4f28166), Billing API (tmp_billing_api), Frontend Global State (tmp_frontend_global_state).

As a frontend developer, implement the BillingHero section for the Billing page. This static section renders a header row with an h1 headline 'Billing & Payments' (with an accent span on 'Payments') and a descriptive subheadline about monitoring account balance and billing. A badge with a pulsing dot indicates 'Account Active'. Below the header, three stat cards are rendered by mapping over the statCards array: 'Current Balance' (Wallet icon, bh-stat-icon--balance, value ₹12,450.00, positive sub 'Available credit: ₹24,550.00'), 'Outstanding Amount' (AlertCircle icon, bh-stat-icon--outstanding, value ₹3,820.00, negative sub 'Due since 15 May 2026'), and 'Next Billing Date' (CalendarClock icon, bh-stat-icon--nextbill, value '01 July 2026', sub 'Monthly billing cycle · 30 days'). Icons are from lucide-react at size=20 strokeWidth=1.8. No state or interactivity required.

As a frontend developer, implement the BillingTabs section for the Billing page. This interactive section uses useState for activeTab (defaulting to 'overview'). It renders a tablist (role='tablist', aria-label='Billing sections') with four tab buttons: 'Billing Overview' (BarChart3 icon, no badge), 'Payment Methods' (CreditCard icon, badge=2), 'Invoice History' (FileText icon, badge=12), and 'Billing Settings' (Settings icon, no badge). Each tab button has proper ARIA attributes (role='tab', aria-selected, aria-controls, id). Active tab uses bt-active class and increased strokeWidth (2.2 vs 1.8). Below the tablist, a content panel (role='tabpanel') renders a placeholder with an icon (React.createElement), title, and description derived from the active tab's placeholder object. The panel key={activeTab} triggers re-render on tab change.

As a frontend developer, implement the PaymentMethodsSection for the Billing page. This complex interactive section uses useState for methods (array of 4 payment methods: pm_001 HDFC Credit Card default, pm_002 SBI Debit Card, pm_003 UPI rajesh@okhdfc, pm_004 ICICI Bank Account), showModal, editingId, toast, form (type/last4/expiry/holder/bank), and formError. It renders each method card with type-specific icons (CreditCard/Landmark/Smartphone from lucide-react) and icon class variants (pm-card-icon--credit/debit/upi/bank), default badge for pm_001, and action buttons for Edit (Pencil icon), Delete (Trash2 icon), and Set Default (Star icon). An 'Add Payment Method' button (Plus icon) opens a modal for add/edit. The modal uses handleOpenAdd/handleOpenEdit/handleCloseModal handlers, form validation (holder required, 4-digit last4 for non-UPI, MM/YYYY expiry for card types), setFormError for inline error display, and handleSubmit to update/add the methods array. Toast notifications use Check/X icons with auto-dismiss. The delete handler filters the methods array and shows a toast confirmation.

As a frontend developer, implement the BillingHistorySection for the Billing page. This feature-rich section imports framer-motion (motion, AnimatePresence) and lucide-react (Search, SlidersHorizontal, Eye, Download, FileText). It uses useState for search, statusFilter ('All'), sortBy ('date-desc'), currentPage, and perPage, plus useMemo for filtered/sorted/paginated invoice data. The invoice dataset contains 12 entries (INV-2026-001 through INV-2026-012) with fields: id, date, teaQty, teaRate, coffeeQty, coffeeRate, teaAmt, coffeeAmt, total, status (Paid/Pending/Overdue), and office. The UI renders: a search input (Search icon), status filter tabs (All/Paid/Pending/Overdue), a sort dropdown (SlidersHorizontal icon) with options date-desc/date-asc/amount-desc/amount-asc, a table of invoice rows with Eye and Download action icons (FileText icon for empty state), and pagination controls with perPage selector (8/12/16 options). AnimatePresence wraps table rows for animated entry/exit transitions.

As a frontend developer, implement the InvoiceDetailsSection for the Billing page. This section imports framer-motion (motion, AnimatePresence) and lucide-react (Printer, Download, FileText, Coffee, Waves). It uses useState for showPrintHint (auto-dismisses after 2500ms). Invoice data is computed at module level: teaAmount (1248 × ₹10), coffeeAmount (864 × ₹18), subtotal, discountAmount (5% of subtotal), afterDiscount, taxAmount (18% GST on afterDiscount), and grandTotal. The invoice card uses motion.div with initial/animate opacity+y transition. Line items are mapped with custom row animation variants (rowVariants: hidden x:-12 → visible with staggered delay i*0.08). A metadata bar shows invoice number, date, billing period, due date, status badge ('Paid'), and office. handlePrint calls window.print() and shows a hint banner; handleDownloadPDF simulates PDF download. formatCurrency uses en-IN locale with ₹ prefix.

As a frontend developer, implement the TaxAndTotalsSection for the Billing page. This static display section uses lucide-react (Calculator, Info, IndianRupee) and renders two data structures. First, four summary cards from summaryCards array: 'Tax Charged' (₹1,217.50, GST 5% badge, positive type), 'Discounts & Credits' (−₹1,717.50, Savings badge, credit type), 'Late Fees' (₹350.00, Penalty badge, warning type), and 'Balance Due' (₹24,199.75, Pay Now badge, positive type) — each with label, amount, badge, and detail text. Second, a tax breakdown table from taxBreakdown array with 6 rows: Subtotal (₹24,350.00 neutral), CGST @ 2.5% (₹608.75 positive), SGST @ 2.5% (₹608.75 positive), Late Payment Fee (₹350.00 positive), Volume Discount 5% (−₹1,217.50 credit), and Early Settlement Credit (−₹500.00 credit). Helper functions formatCurrency, getAmountClass, getBadgeClass, getTableAmountClass, and getIndicatorClass apply conditional CSS class suffixes based on type.

As a frontend developer, implement the DownloadExportSection for the Billing page. This interactive section imports framer-motion (motion, AnimatePresence) and lucide-react (FileSpreadsheet, FileText, Download, CheckCircle, AlertCircle, Info, X, Calendar, ChevronDown). State hooks manage dateStart (initialized to first of current month via ISO string), dateEnd (today's date), activePreset ('this-month'), selectedFormat ('excel'), exportingExcel, exportingPdf, and status (null or {type, message}). Six date presets (This Month, Last Month, Last 3 Months, Last 6 Months, This Year, Custom) are rendered as buttons; clicking a preset calls getDateRangeFromPreset() to compute start/end dates and updates dateStart/dateEnd. Custom preset shows manual date inputs. handleExport(format) simulates a 1800ms async export (setTimeout Promise), then sets success/error status with AnimatePresence-animated toast. dismissStatus (X icon) clears the status. Excel and PDF export buttons show loading spinners when exportingExcel/exportingPdf are true, and the isExporting flag disables both buttons during export.

As a frontend developer, implement the BillingFAQSection for the Billing page. This interactive accordion section uses useState for openId (null by default). The faqItems array contains 5 FAQ entries: 'How are charges calculated?' (id: charges), 'What payment methods do you accept?' (id: payment-methods), 'Can I export invoices?' (id: export-invoices, includes hasList=true with 3 listItems for PDF/Excel/CSV formats), 'How do I update my payment method?' (id: update-payment), and 'What is the billing cycle?' (id: billing-cycle). The toggleItem function sets openId to the clicked id or null if already open (accordion toggle pattern). A section header renders a 'FAQ' label badge (bfaq-section-label), an h2 title, and a subtitle. Each FAQ item renders the question and conditionally shows the answer text; items with hasList=true render an additional unordered list of listItems below the answer text.

As a frontend developer, implement the Footer section for the Billing page. This component (imported from '../styles/Footer.css') may already exist from previous pages (Dashboard, Offices, Staff). It renders a footer with two decorative CSS steam wisp divs (ftr-steam--left and ftr-steam--right, aria-hidden). The ftr-inner contains a top grid (ftr-top) with a brand column (☕ logo icon, 'Chai ki Chuski' text, tagline about tea/coffee management) and three link columns: 'Pages' (Dashboard, Reports, Billing hrefs), 'Support' (Help Center, Contact Support, FAQs, System Status — all linking to /Dashboard), and 'Resources' (Getting Started Guide → /Dashboard, Rate Configuration → /Billing, Export Reports → /Reports, Office Management → /Dashboard). A language strip (ftr-lang-strip) lists English (active) and ગુજરાતી languages. Reuse the existing Footer component if already implemented.

As a frontend developer, implement the ReportsCharts section for the Reports page. Uses Chart.js (chart.js v3+) registered with CategoryScale, LinearScale, PointElement, LineElement, ArcElement, Title, Tooltip, Legend, Filler. Imports Line and Pie from react-chartjs-2. Also uses gsap for entrance animations (useRef, useEffect, useCallback) and framer-motion (motion) for card wrappers. Renders two chart panels: (1) a Line chart titled 'Weekly Trend' with lineChartData (days Mon–Sun, tea dataset in #4A90E2 with fill, coffee dataset in #E94E77 with fill) and lineChartOptions (no legend, custom tooltip with white bg, smooth tension 0.35, hover mode 'index'); (2) a Pie chart titled 'Office Distribution' using pieDataOffice (5 offices with colors #4A90E2/#E94E77/#F5A623/#F8E71C/#A6C8F2, tea+coffee totals). BarChart3 and PieChartIcon from lucide-react used as section headers. useRef for chart container refs, gsap animates opacity/translateY on mount. CSS: ReportsCharts.css (4777 chars).

As a frontend developer, implement the ReportsExportPanel section for the Reports page. Uses useState for checked (['datewise', 'officewise', 'monthly']), exporting (null), and toast (null). Uses framer-motion (motion, AnimatePresence) — rexp-card has whileInView animation (opacity 0→1, y 20→0, duration 0.45, ease cubic). Renders: rexp-top-row with 'Export Reports' h2 (Download icon size 22) and a freshness indicator (dot + 'Updated 5 minutes ago'); a checkbox options grid with 4 exportOptions (datewise/officewise/monthly/charts) — each rexp-checkbox-item toggles via toggleOption useCallback, shows Check icon (size 13, strokeWidth 3) when checked, supports keyboard (Enter/Space); two export buttons calling handleExport('excel') and handleExport('pdf') with FileSpreadsheet and FileText icons; when exporting, shows Loader2 spinning icon; an AnimatePresence toast notification appears for 3 seconds after export completes showing format name with Check and Clock icons. CSS: ReportsExportPanel.css (6256 chars).