FreClean Admin

Internal business dashboard for FreClean staff: bookings, customers, cleaning teams, staff, services, products, inventory, orders, payments, Web3 transactions, entrepreneurs, reviews, reports, analytics, treasury overview, and audit logs — all gated by role.

Part of the FreClean ecosystem. Talks to freclean-api over HTTP; no data is hardcoded.

Status

In development. Every page fetches live from freclean-api — there is no mock/fake dataset baked into the UI. With no API running, pages correctly show "Could not load data" or empty states rather than invented numbers.

Tech stack

React 18 + TypeScript + Vite, Tailwind CSS, React Router, lucide-react. No state-management library — resource data is fetched per page via a small useResourceList hook.

Getting started

npm install
cp .env.example .env      # set VITE_API_URL to your freclean-api instance
npm run dev                # http://localhost:5173

npm run lint
npm run typecheck
npm run build

You'll need freclean-api running (see that repo's README) and at least one staff user registered with a non-customer role — self-registration only allows customer/entrepreneur, so create the first staff account directly via POST /api/users using a founder-seeded token, or promote a user with PATCH /api/users/:id.

Roles & visibility

Role	Sees
Founder	Everything
Management	Everything except Treasury is Founder/Finance only
Finance	Payments, Web3 Transactions, Reports, Analytics, Treasury
Operations	Bookings, Teams, Staff, Services, Inventory, Orders, Reports, Analytics
Product Management	Products, Inventory
Cleaning Staff	Bookings, Teams
Support	Customers, Bookings, Orders, Entrepreneurs, Reviews

Full mapping: src/lib/roles.ts — kept in sync with the permission tables in freclean-api's src/core/roles.ts.

Architecture notes

• src/pages/resourceRoutes.ts is a single config array describing every generic list page (columns, endpoint, title). Adding a new resource page is a config entry, not a new component — see src/pages/ResourcePage.tsx.
• src/components/StatusBadge.tsx gives every status value (booking, payment, product lifecycle) a consistent color across the whole dashboard.
• Auth token is kept in sessionStorage only (cleared on tab close) — see src/lib/auth.tsx.

Roadmap for this repo

• Add create/edit forms per resource (currently read-only tables)
• Connect Treasury page to a real ledger once freclean-data exists
• Add pagination and search to DataTable
• Add role-based route tests

License

Not provided.