Skip to main content
PandaCodeGen
Internal ToolCustom Business Dashboard9.0/10 Dev Rating

Enterprise Ops.
Spreadsheets to real-time.

This is our own custom CRM and ops platform for the Panda Patches business, which once ran entirely on Google Sheets, a disconnected CRM, and WhatsApp status updates. We replaced all of it, order pipeline, sales dashboards, attendance tracking, profit analytics, and role-based access, with a single custom platform built for exactly how the business operates.

95%
Process Automation
was near-zero manual processes
Live
Reporting
was daily manual CSV exports
10Γ—
Efficiency Gain
team of 7, one platform
9.0/10
Developer Rating
Code 9.4 Β· Arch 9.3 Β· UX 9.0/10
By the Numbers

The platform today, in production.

This is not a prototype. It is the live operating system the business runs on every day, and it keeps growing. The customer-facing portal has since moved to the marketing website; this is the internal staff CRM plus its shared serverless backend.

23
Staff routes
8+
Reporting modules
20
Edge Functions
13
Order statuses
3 Β· 11
Roles Β· permissions
10
DB migrations
The Problem

7 people. 5 tools. Zero real-time visibility.

βœ•Spreadsheet Hell

Order tracking lived in Google Sheets. 7 team members editing simultaneously caused version conflicts, overwritten data, and no audit trail. When an order status changed, someone had to message the team on WhatsApp, and hope they saw it.

βœ•No Single Source of Truth

Customer data lived in a CRM that had no connection to orders. Attendance was tracked via WhatsApp messages. Monthly performance reports took 20 hours to compile manually from multiple spreadsheets. Every number was a guess.

Tool Being Replaced
Cost
Problem
Google Sheets (order tracking)
Free but 8 hrs/wk
No real-time sync. 7 team members editing simultaneously caused version conflicts
Separate CRM
$50/mo
No connection to orders or production. Duplicate data entry for every customer
WhatsApp order updates
Free but chaotic
Status updates buried in chat threads. No searchability, no accountability
Manual attendance tracking
$30/mo
Clock in/out via WhatsApp messages, no overtime tracking, no payroll export
Spreadsheet reporting
20 hrs/mo
Monthly performance reports compiled manually from multiple sheets
Solution, Order Pipeline

13-status order lifecycle. Fully automated.

Every order moves through a defined lifecycle, from the linear happy path below to branch states like remake, cancellation, and refund. Each status transition is logged with the responsible agent and timestamp. No order can be "lost" in a chat thread, and status changes trigger automated email to the right people.

1
NEW_ORDER

Order received from the marketing-site checkout or created by an agent

2
IN_PRODUCTION

Assigned to production team, materials allocated

3
QUALITY_ASSURANCE

Production complete, QA check before dispatch

4
SHIPPED

Tracking number generated, customer notified

5
DELIVERED

Confirmed delivered, payment reconciled

Plus branch statuses (13 total)

REMAKECANCELLEDREFUNDEDFEEDBACK

Every transition is immutable

The order_history table logs every field change: old value, new value, the agent who made the change, and an exact timestamp. Full audit trail. Any order dispute can be traced back to who changed what and when.

Solution, Access Control

Three roles. Zero data leakage.

RBAC enforced at two layers: application logic and Supabase Row-Level Security policies at the database level. Even if someone bypasses the UI, they cannot read data they don't own. Permissions stored as a granular JSONB column per user.

ADMIN
  • Full order pipeline, all stages, all agents
  • Profit calculations and margin analytics
  • All attendance records + payroll export
  • User management + role assignments
  • Monthly cost tracking and reporting
SALES
  • Own pipeline only, no cross-agent visibility
  • Create and update quotes + orders
  • Customer communication thread
  • Own performance metrics and targets
  • Clock in/out (own records only)
PRODUCTION
  • Pending production orders (IN_PRODUCTION)
  • Mark orders as READY_TO_SHIP
  • Production notes and file access
  • No financial data, no sales data
  • Own attendance records
Solution, Attendance

Clock in/out. Auto-everything.

Replaced WhatsApp messages for attendance with a timestamped system. All times calculated in Pakistan Standard Time (PKT, UTC+5). Business day resets at 5AM. Auto-clockout triggers after 10 hours to prevent inflated records.

PKT (UTC+5)Timezone

Pakistan Standard Time, no conversion errors

5AM PKTDay Cutoff

Each business day calculated from 5AM to 5AM

10 hrsAuto-Clockout

Automatic clockout prevents accidentally open sessions

AutoOvertime Calc

Hours over target auto-flagged in attendance_summary

AutoUndertime Calc

Shortfall tracked per employee per month

CSVPayroll Export

Monthly attendance summary ready for payroll processing

Profit tracked the same way

Every order has a profit column that is a PostgreSQL GENERATED ALWAYS STORED column: order_amount - production_cost - shipping_cost - marketing_cost. Updated automatically whenever any cost field changes. No spreadsheet formulas that drift.

Platform Features

One platform. Everything.

Real-time analytics, payments, RBAC, and automation across 23 staff routes and 20 Supabase Edge Functions, with Row-Level Security on every table. All connected to the same Supabase backend now shared with the customer portal on the marketing site.

Email Automation

Order confirmation, follow-up, and overdue payment reminders fire automatically, no manual sending.

Per-Agent Sales Reports

Each sales rep logs in and sees only their pipeline, targets, and conversion rate. Managers see the full picture.

Pending Amounts Dashboard

Every unpaid invoice, outstanding balance, and overdue account visible at a glance. No more chasing people for what's owed.

Order History & Repeat Customer Flags

See who's bought before, how often, and what they spent without digging through files.

Avg Order Value by Category

Instantly see which product lines are driving revenue and which are just taking up space.

Profit & Loss by Category

One click to see which categories are making money and which are bleeding it, no Excel required.

Single Dashboard

What used to live across 7 spreadsheets, 3 SaaS tools, and a WhatsApp group is now one screen. One login. One source of truth.

APM + Error Tracking

Sentry integration for real-time error monitoring and application performance metrics. Any production issue is caught before the team notices.

Offline-First

Service Worker caches critical UI and data. Team in Pakistan can access order data during intermittent connectivity. Changes sync on reconnect.

Reporting & Analytics

8+ financial reports. One date-range filter.

The reporting layer is the platform's core strength: a dedicated Reports page with date-range filtering across every analytical module, each one CSV-exportable and charted with Recharts. From gross-to-net revenue to a full income statement to Meta CAPI attribution quality, the answer is one click, not a 30-minute spreadsheet.

Sales Report

Gross vs. net revenue, AOV, daily trend, per-agent performance & commission, repeat-customer metrics.

Profit & Loss

Revenue vs. cost vs. net profit, cost-breakdown donut, and loss alerts for orders sold below cost.

Income Statement

Industry-standard P&L: gross β†’ net revenue β†’ COGS β†’ gross profit β†’ opex β†’ net profit, with margins.

Cancellation & Refund

Lost revenue and reason-category breakdown for cancelled and refunded orders.

Product Mix

Revenue, cost, and margin by patch type and by quantity band (1–50, 51–100, 101–200, 200+).

Lead Source Distribution

Lead volume by channel β€” Search, Social, Paid Ads, AI/LLM, Referral β€” pulled from quotes.

Funnel & Attribution

Quote→order conversion, quote-flow bypass detection, and Meta CAPI data-quality breakdown.

Customer & Form Feedback

1–5β˜… satisfaction from order notes and ease-of-use ratings from website quote forms.

Integrations

Wired into the tools the business already runs on.

Payments, ads attribution, transactional email, and monitoring all flow through the same backend, no copy-paste between systems.

Supabase

Postgres Β· Auth Β· Storage Β· Realtime Β· 20 Edge Functions

Meta CAPI

Server-side purchase/lead events, reversal on refund

Square

Public payment links (/pay/:token) + checkout

Stripe

Balance & payout webhooks (idempotent)

ZeptoMail

Transactional email for every order milestone

Sentry

APM + error tracking via first-party proxy

Vercel

Frontend hosting, SPA routing, asset caching

Tech Stack

Enterprise level. Every layer.

100% TypeScript. Offline-first. APM monitoring. An internal senior-developer code review scored it 9.4/10 for code quality and 9.3/10 for architecture; that review was commissioned by us and is not an independent third-party audit or certification.

React 18
Frontend UI
TypeScript 5
100% type safety (strict)
Vite 5
Build + code-split HMR
Tailwind CSS 3
Design system + dark mode
Supabase
Postgres + Auth + RLS
TanStack Query 5
Server state + caching
React Router 6
Protected + nested routes
React Hook Form + Zod
Validated forms
Recharts
Analytics charts
@react-pdf/renderer
Invoices / PDFs
Framer Motion
UI animations
Row-Level Security
Per-table DB policies
Edge Functions (Deno)
20 serverless functions
Square + Stripe
Checkout + payouts
Meta CAPI
Server-side ad tracking
Sentry
APM + error tracking
Results

What changed after launch.

Order status updates via WhatsApp, buried in threads

Real-time order board. Every agent sees live status. No messages needed.

Monthly reports took 20 hours to compile manually

Reports auto-generated. Monthly summaries run via Supabase Edge Functions.

7 team members editing the same Google Sheet

One platform with row-level isolation. Zero version conflicts.

CRM completely disconnected from orders

Customer data, order history, and communications in one view.

Attendance tracked by WhatsApp messages

Timestamped clock in/out. Overtime auto-calculated. Payroll export ready.

Profit calculated manually from separate sheets

Profit auto-computed per order as a database-generated column. Always accurate.

The Result

What this actually meant for the business.

Before this platform, running the business meant opening 7 spreadsheets, scrolling WhatsApp for updates, and hoping nothing fell through the cracks. Now it doesn't.

πŸ“Š
Spreadsheets Replaced
7 β†’ 1

Order tracking, agent reports, attendance, payments, inventory, profit tracking, and customer records β€” all in one place. One login. One screen.

⏱
Time Saved Weekly
10+ hrs

No more manually compiling reports, chasing agents for updates, or cross-referencing files. The dashboard updates in real time.

πŸ’‘
Decisions Made Faster
1 Click

Which category is profitable? Who are your repeat customers? What's owed? The answer used to take 30 minutes. Now it takes one click.

Full Scope

Everything that was built.

PostgreSQL schema with Row-Level Security on every table (10 migrations)
13-status order pipeline (NEW_ORDER β†’ DELIVERED, plus REMAKE / CANCELLED / REFUNDED / FEEDBACK)
8+ financial reporting modules (Sales, P&L, Income Statement, Product Mix, Attribution), CSV export
Payments: Square checkout + public payment links (/pay/:token), Stripe payout webhooks
Server-side Meta Conversions API with refund reversal + attribution-quality scoring
Transactional email via ZeptoMail for every order milestone
Immutable order_history audit log, every change attributed
RBAC: ADMIN, SALES, PRODUCTION roles with 11 granular JSONB permissions
Sales agent dashboards, revenue, conversion rate, response time per agent
Customer quote management with email template system
Automated profit calculation: order_amount βˆ’ production βˆ’ shipping βˆ’ marketing
Employee attendance with PKT timezone, 5AM cutoff, auto-clockout
Monthly attendance summaries with overtime/undertime tracking
Payroll export (CSV) from attendance_summary table
Performance metrics table for goal tracking
3 database views: orders_with_details, sales_agent_reports, active_attendance_sessions
20 Supabase Edge Functions (user admin, email, Meta CAPI, Square/Stripe payments, webhooks)
Sentry APM + error tracking integration
Offline-first via Service Worker, works on poor connectivity
100% TypeScript with zero implicit any
TanStack Query for optimistic updates + server state
Framer Motion animated UI, rated UX 9.0/10
Independent Review

Rated 9.0/10 by a senior developer.

9.4/10
Code Quality
Type safety, separation of concerns, zero implicit any
9.3/10
Architecture
RLS policies, audit trail, RBAC design, DB schema
9.0/10
UX / Design
Framer Motion transitions, dark/light, accessibility

Frequently Asked Questions