Powerhouse Restobar

As a frontend developer, implement the DashboardHeader section for the Dashboard page. This section renders a page header with a period selector dropdown (PERIODS array: Today, This Week, This Month, Last 30 Days, This Quarter) managed via useState (activePeriod, showDropdown). Displays a QUICK_STATS row of five stat chips (total, pending, approved, settled, rejected) each with accentColor, iconBg, inline SVG icon, and a Philippine Peso (₱) formatted value. ROLE_LABELS maps role keys to display strings (Shop Person, 1st Approver, Payment Processor) with roleKey hardcoded to 'shop' for the mock. Period dropdown uses AnimatePresence for open/close animation and handlePeriodSelect to update activePeriod and close dropdown. Imports DashboardHeader.css. Independent of other content sections — can be built in parallel.

As a frontend developer, implement the StatusOverview section for the Dashboard page. This section renders a row of four stat cards (total, pending, approved, settled) using a stats array with variant classes (primary, warning, success, info). Each card displays a label, numeric value, trend indicator (trendDir: up/down/neutral), trend count, trendLabel, and footerText. Uses a trendIcon helper function that returns directional SVG arrows or a horizontal line for neutral. Applies motion.div (framer-motion) for card entrance animations. No local state — purely presentational. Imports StatusOverview.css. Independent of other content sections — can be built in parallel with DashboardHeader and ExpensesList.

As a frontend developer, implement the ExpensesList section for the Dashboard page. This section renders a filterable, animated expenses table using ALL_EXPENSES (12 mock records with fields: id, date, description, category, amount in ₱, status, submitter) and SHOP_PERSON_EXPENSES (filtered subset). Uses useState and useMemo for active role (shop/approver/processor), active status filter, and search query. STATUS_CONFIG maps 6 status keys (submitted, approved, rejected, settled, partial, petty-cash) to label, CSS class (el-badge--*), and icon character. ROLE_CONFIG maps roles to display labels and description strings. Renders an el-role-badge with role-specific cls. Table rows use AnimatePresence and motion.div for enter/exit animations. Includes filter tabs by status count and a search input. Imports ExpensesList.css (11339 chars) for table, badge, and filter styling. This is the most complex section — independent of other content sections.

As a frontend developer, implement the ActionPanel section for the Dashboard page. This section renders a role-aware action toolbar using useState for activeRole (shop/approver/processor) and toast state. ROLES array (shop, approver, processor) drives a role switcher UI. Role-specific action buttons are rendered conditionally: shop role shows Add Expense (handleAddExpense → toast) and Export (handleExport → toast CSV message); approver role shows Bulk Approve (handleBulkApprove → toast with MOCK_SELECTED=3 count) and Bulk Reject (handleBulkReject → toast); processor role shows a Mark as Settled button with CreditCardIcon and TickCircleIcon. Toast notifications use AnimatePresence with a 2400ms auto-dismiss timeout via setTimeout. Icon components defined inline: PlusIcon, ExportIcon, CheckIcon, XIcon, CreditCardIcon, TickCircleIcon, ToastCheckIcon (all inline SVGs). Imports ActionPanel.css. Independent of other content sections — can be built in parallel.

As a frontend developer, implement the ExpensesHeader section for the Expenses page. This section renders a role-switching tab bar using ROLES array (shop, approver, processor) with AnimatePresence-driven fadeSlide transitions (opacity 0→1, y 8→0, duration 0.22s). Each role maps to ROLE_CONFIG which provides role-specific subtitle text, badge label with badgeClass (exh-role-badge--shop/approver/processor), primary CTA button with inline SVG icons (plus icon for shop, checkmark for approver, credit card rect for processor), and optional secondaryCta Export button. STATS array renders 4 colored dot indicators (submitted/approved/settled/rejected) with hardcoded values. Includes an AddColumnModal component triggered from the header, supporting COLUMN_TYPES (text/number/date) via a dropdown. Uses useState for activeRole and modal visibility, useRef and useEffect for modal focus management. CSS spans 11750 chars covering exh-role-tab--active-shop/approver/processor variants and exh-btn--primary/secondary/coral button styles.

As a frontend developer, implement the ExpensesFilters section for the Expenses page. This section renders a filter bar with useState managing two state objects: filters (pending input) and applied (committed filters). Includes a search input with lucide-react Search and X icons, a status dropdown bound to STATUS_OPTIONS (8 values: all/submitted/approved/rejected/partial/settled/not_settled/petty_cash), date range inputs (dateFrom/dateTo), and amount range inputs (amountMin/amountMax). A SlidersHorizontal/Filter icon toggle reveals the advanced filter panel via AnimatePresence. buildChips() derives active filter chips from the applied state, each chip styled via STATUS_CHIP_CLASS map and removable via removeChip() using useCallback. Apply and Clear buttons call handleApply and handleClear. CSS spans 7333 chars covering ef-chip--submitted/approved/rejected/partial/settled variants.

As a frontend developer, implement the ExpensesTable section for the Expenses page. This section renders a data table from a EXPENSES array of 7 hardcoded records, each with fields: id, date, description, category, amount (Philippine peso), status, submitter, submitterInitials, avatarClass (et-avatar--teal/coral/gold/slate/accent), approver, notes, and receiptRef. Uses useState for selected rows (checkbox multi-select), expanded row (inline notes panel via AnimatePresence), and sort column/direction. Status badges render with per-status color classes (approved/submitted/partial/petty/rejected). Row expansion reveals notes text and receiptRef. Column headers support click-to-sort. CSS spans 10112 chars covering et-avatar color variants and status badge styles.

As a frontend developer, implement the ExpensesPagination section for the Expenses page. This section renders a summary stats bar and a pagination control. SUMMARY_STATS array defines 5 stat cards (total/submitted/approved/settled/rejected) each with an inline SVG icon, iconClass (ep-stat__icon--total/submitted/approved/settled/rejected), valueClass (ep-stat__value--teal/orange/gold/green/coral), Philippine peso value string, and expense count. Pagination uses useState for currentPage and perPage, with TOTAL_ITEMS=124 and PER_PAGE_OPTIONS=[10,20,50,100]. getPageNumbers() generates a smart ellipsis page array for totalPages > 7, collapsing distant pages into '...' sentinels. Page number buttons animate via framer-motion motion.button. A perPage select dropdown recalculates totalPages. CSS spans 5056 chars.

As a frontend developer, implement the Navbar section for the Reports page. This component may already exist from the Dashboard page — reuse or verify the existing Navbar component. The Navbar uses useState for mobile menu open/close toggling, renders navLinks array (Dashboard, Expenses, Reports hrefs), displays a brand logo with Zap icon from lucide-react, user role badge ('1st Approver') with 'PR' initials avatar, a logout button that redirects to '/', and a hamburger/X toggle (Menu/X icons) for mobile. The mobile drawer (nv-mobile) conditionally applies 'nv-open' class. Imports Navbar.css for styling.

As a Backend Developer, implement user and role management API endpoints using FastAPI. Endpoints: GET /admin/users (list all mapped users), POST /admin/users (map a mobile number to a role), PUT /admin/users/{id} (update role mapping), DELETE /admin/users/{id} (remove mapping). Roles: shop_person, approver, payment_processor, admin. Validate that only admin-role JWT tokens can access these endpoints via role-based middleware. Note: Admin Dashboard user management UI depends on this API.

As a Backend Developer, implement the core expenses API using FastAPI. Endpoints: GET /expenses (list with filters: status, date range, role-scoped), POST /expenses (create expense — shop_person only), PUT /expenses/{id} (update expense details), DELETE /expenses/{id} (soft delete — shop_person own expenses only), POST /expenses/{id}/approve (approver: set status to Approved/Rejected/Partial Settlement, add comment), POST /expenses/{id}/settle (payment_processor: set status to Settled/Not Settled, record full or partial payment amount). Role-based scoping: shop_person sees only their own, approver sees submitted, payment_processor sees approved. Expense model fields: id, date, description, amount, status, submitted_by, approver_comment, payment_amount, created_at, updated_at.

As a Backend Developer, implement FastAPI JWT authentication middleware and role-based authorization dependency. Create a reusable `get_current_user` dependency that extracts and validates the JWT from the Authorization header, decodes user_id and role, and attaches the user context to the request. Create role-guard dependencies: `require_role(*roles)` that raises 403 if the authenticated user's role is not in the allowed set. Apply to all protected routes. Include CORS configuration for the React frontend origin. Note: All backend API endpoints depend on this being in place.

As a frontend developer, implement the ReportsHeader section for the Reports page. The component uses useState for 'syncing' boolean and 'lastSynced' timestamp string, and framer-motion for entry animation (motion.section with opacity 0→1, y -8→0, duration 0.38, cubic ease). Includes a breadcrumb nav (Dashboard › Expense Reports), a title block with FileBarChart2 icon and h1 'Expense Reports', a subtitle showing REPORTING_PERIOD constant ('June 2026'), a CalendarRange period badge with animated dot, a HelpCircle help button, and a RefreshCw sync button that triggers a 1400ms setTimeout to update lastSynced to current time. The sync button applies 'rh-syncing' CSS class and disabled state during sync. Also shows a Clock icon with last synced timestamp. Imports ReportsHeader.css.

As a frontend developer, implement the ReportsSummaryCards section for the Reports page. Renders a 4-card grid using a static 'metrics' array with entries for Total Expenses (₱48,250), Approved Amount (₱31,800), Settled Amount (₱24,500), and Pending Amount (₱16,450). Each card uses framer-motion with 'cardVariants' (hidden: opacity 0 y 18 → visible: opacity 1 y 0) staggered by index * 0.09 delay. Each card has a background overlay div (rsc-card__bg), an icon from lucide-react (ReceiptText, CheckCircle2, Wallet, Clock), a trend badge with up/down arrow and percentage, currency + value display, a subtitle line, and an animated progress bar (rsc-bar) with width driven by the 'progress' field (100%, 66%, 51%, 34%). Card modifier classes (rsc-card--total, --approved, --settled, --pending) drive color theming. Imports ReportsSummaryCards.css.

As a frontend developer, implement the ReportsFilterBar section for the Reports page. Uses useState for 'filters' (dateFrom, dateTo, status, userRole), 'applied', 'collapsed' boolean, and 'isSticky' boolean. Uses useRef and IntersectionObserver with a dynamically created sentinel div to detect sticky scroll state (rootMargin '-65px 0px 0px 0px'). Renders Filter icon header with a ChevronDown collapse toggle and SlidersHorizontal icon. Contains date range inputs (dateFrom, dateTo with Calendar icons), a STATUS_OPTIONS custom dropdown (6 options: all/submitted/approved/rejected/partial/settled) with colored dots (rfb-status-dot-- modifier classes), a USER_OPTIONS dropdown (all/shop/approver/processor), and Apply/Reset buttons (RotateCcw, CheckCircle icons). Uses AnimatePresence and motion.div for active filter pills built by buildPills() helper. Reset clears filters to DEFAULT_FILTERS. Imports ReportsFilterBar.css.

As a frontend developer, implement the ReportsCharts section for the Reports page. Registers Chart.js modules (ArcElement, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement, Filler) via ChartJS.register(). Uses useState for 'activePeriod' ('6M'/'3M'/'1M') and 'hoveredSegment' index. Renders two chart cards with framer-motion cardVariants (hidden y:24 → visible y:0, staggered by index * 0.12). Card 1: Doughnut chart (react-chartjs-2) with STATUS_SEGMENTS data (Approved 42%, Settled 28%, Partial 18%, Rejected 12%), custom colors (#2A9D8F, #E9C46A, #F4A261, #E76F51), cutout '68%', onHover sets hoveredSegment, and a custom HTML legend list with pct labels. Card 2: Line chart with area fill (backgroundColor rgba(42,157,143,0.08)) driven by TREND_DATASETS keyed by activePeriod, with period toggle buttons (6M/3M/1M), and stat pills showing total/peak/avg values. AnimatePresence wraps chart transitions. Imports ReportsCharts.css.

As a frontend developer, implement the Footer section for the Reports page. This component may already exist from the Dashboard or Expenses page — reuse or verify the existing Footer component. Renders a footer with an ftr-glow decorative div, brand block (Receipt icon + 'Powerhouse Restobar' text, tagline paragraph, and an 'All systems operational' status indicator with animated dot). Two link columns: 'Navigate' with navLinks array (Dashboard, Expenses, Reports) and 'Quick Help' with helpLinks array (Getting Started Guide with BookOpen, Submitting an Expense with Receipt, Approval Workflow with ShieldCheck, Contact Support with Mail icons). A divider separates the bottom bar showing dynamic copyright year via new Date().getFullYear() and app version badge ('v1.4.2' in ftr-version-badge span). Imports Footer.css.

As a Backend Developer, implement the custom columns API using FastAPI. Endpoints: GET /columns (list all active custom column definitions), POST /columns (create a new custom column — admin or shop_person), DELETE /columns/{id} (delete a custom column — shop_person own or admin). Column model: id, name, type (text/number/date), created_by, is_active. GET /users/{id}/column-layout (retrieve persisted column layout for a user), PUT /users/{id}/column-layout (save column layout — positions, visibility). Custom columns must be reflected in expense records for all roles (approver view, payment processing view). Layout persistence enables restore on logout/login.

As a Backend Developer, implement the audit log API using FastAPI. All state changes to expenses (status, amount, comments, custom columns) must be recorded automatically via a database trigger or SQLAlchemy event listener. Log model: id, entity_type, entity_id, field_changed, old_value, new_value, changed_by (user_id), changed_at, role. Endpoints: GET /logs (admin only, with filters: entity_type, date range, changed_by, role). Response includes human-readable old/new values. Admin can view the complete change history for any expense or column.

As a Backend Developer, implement the reports API using FastAPI. Endpoints: GET /reports/summary (aggregated totals by status: total, approved, settled, pending — scoped by role), GET /reports/expenses (paginated, filterable expense list for reports view: date range, status, user role), GET /reports/trends (time-series data for line chart: totals grouped by period — 1M, 3M, 6M), GET /reports/export (CSV or PDF export of filtered expense data). Role scoping: shop_person sees own expenses only, approver/processor see all, admin sees all with full detail.

As a Tech Lead, verify the end-to-end integration between the Login page frontend and the OTP Auth backend API. Ensure: mobile number entry calls POST /auth/request-otp, unmapped numbers display the correct error, OTP entry calls POST /auth/verify-otp, successful login stores JWT and routes user to Dashboard based on role, and logout clears token and redirects to login. Confirm role-based routing works correctly for shop_person, approver, payment_processor, and admin. Note: Depends on temp_backend_auth, temp_auth_middleware, and temp_frontend_state.

As a frontend developer, implement the ReportsExpenseTable section for the Reports page. Uses useState for sort config (field + direction), current page, and expandedRow ID. Renders a static ALL_EXPENSES array of 12 expense entries (EXP-0041 through EXP-0031) with fields: id, date, description, amount (₱), submittedBy with initials avatar, status badge, and approverNotes. Columns are sortable via ChevronUp/ChevronDown/ChevronsUpDown icons toggling asc/desc/none sort states. Each row has an expand toggle revealing an AnimatePresence-animated detail panel showing approverNotes and a FileText icon. Action buttons per row include Eye (view) and FileEdit (edit) with lucide-react icons. Status badges use modifier classes for color coding (Approved, Settled, Partial, Pending, Rejected). Pagination controls render page numbers and prev/next. An X button closes expanded rows. Imports ReportsExpenseTable.css.

As a Tech Lead, verify the end-to-end integration between the Expenses page frontend sections (ExpensesTable, ExpensesHeader, ExpensesFilters, ExpensesPagination) and the Expenses CRUD backend API. Ensure: expense list is fetched from GET /expenses with role-scoped data, shop_person can create expenses via POST /expenses, approver actions (approve/reject/partial) call POST /expenses/{id}/approve with correct payloads, payment_processor settlement actions call POST /expenses/{id}/settle, filters and pagination pass correct query params, and custom column data is included in expense rows. Verify that column layout from GET /users/{id}/column-layout is applied to the table. Note: Depends on ExpensesTable (3a8e1aa6), ExpensesHeader (4baf318e), ExpensesFilters (4f20bbd6), ExpensesPagination (4160fc39), temp_backend_expenses, temp_backend_custom_columns.

As a Tech Lead, verify the end-to-end integration between the Dashboard page frontend sections (DashboardHeader, StatusOverview, ExpensesList, ActionPanel, DashboardSidebar) and the backend APIs. Ensure: summary stats in DashboardHeader and StatusOverview are fetched from GET /reports/summary scoped by authenticated user role, ExpensesList fetches from GET /expenses with role-scoped filtering, ActionPanel actions (add expense, bulk approve, mark settled) trigger correct API calls, and DashboardSidebar navigation badge counts reflect real data. Verify period selector in DashboardHeader passes correct date params. Note: Depends on DashboardHeader (625ad348), StatusOverview (a9a0e55e), ExpensesList (863ec994), ActionPanel (48a573af), DashboardSidebar (81761c5c), temp_backend_expenses, temp_backend_reports.

As a Tech Lead, verify the end-to-end integration between the Admin user management UI (within the Dashboard for Admin role) and the User Role Management backend API. Ensure: admin can list all mapped users from GET /admin/users, map a new mobile number to a role via POST /admin/users, update existing role mappings via PUT /admin/users/{id}, and remove mappings via DELETE /admin/users/{id}. Verify that role changes take effect immediately on next login for the affected user. Also verify audit log entries are created for all admin actions and are visible in the Reports logs view. Note: Depends on temp_backend_users, temp_backend_audit_logs.

As a frontend developer, implement the ReportsExportActions section for the Reports page. Uses useState for 'toast' (active toast action object or null) and 'loading' (active action id or null). Renders three motion.button elements (framer-motion whileHover scale:1.02, whileTap scale:0.97, spring stiffness:340 damping:22) for: Export as CSV (FileSpreadsheet icon, rea-btn--csv), Export as PDF (FileText icon, rea-btn--pdf), and Print Report (Printer icon, rea-btn--print). handleAction triggers 600ms loading state then calls window.print() for print action, then shows toast for 2800ms. During loading, the button icon animates with continuous 360° rotation (framer-motion, duration 0.7, repeat Infinity). AnimatePresence renders a toast div (rea-toast with per-action toastClass) with CheckCircle icon, slide-up entry (y:20→0) and exit (y:16) animation. A hint paragraph notes exports reflect current filter selection. Imports ReportsExportActions.css.

As a Tech Lead, verify the end-to-end integration between the Reports page frontend sections (ReportsHeader, ReportsSummaryCards, ReportsCharts, ReportsFilterBar, ReportsExpenseTable, ReportsExportActions) and the Reports backend API. Ensure: summary cards fetch from GET /reports/summary, chart doughnut data and line chart trend data fetch from GET /reports/trends with period param (1M/3M/6M), expense table fetches from GET /reports/expenses with filter params, export buttons call GET /reports/export with correct format param (csv/pdf), and filter bar applies date range and status filters via query params. Verify role-scoped data: shop_person sees only own reports, admin sees all including audit logs. Note: Depends on all Reports frontend tasks and temp_backend_reports, temp_backend_audit_logs.