Admin Panel Setup

Prerequisites

• Node.js 20+
• pnpm
• Firebase project with Auth, Firestore, and Storage enabled

Quick Start

# Navigate to admin directory
cd acesense-admin

# Install dependencies
pnpm install

# Start development server
pnpm dev

The app will be available at http://localhost:5173 (or next available port).

In dev, the app auto-connects to the Firebase emulators so it never writes to prod. Opt out with VITE_USE_EMULATORS=false to debug against real data.

Environment Configuration

Firebase config is loaded entirely from environment variables (see .env.example) — there are no hardcoded credentials in src/config/firebase.ts. Copy .env.example to .env and fill in:

VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=acesense-prod.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=acesense-prod
VITE_FIREBASE_STORAGE_BUCKET=acesense-prod.firebasestorage.app
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...

# Analytics (PostHog, EU instance)
VITE_PUBLIC_POSTHOG_KEY=...
VITE_PUBLIC_POSTHOG_HOST=...

# Optional: opt out of emulators in dev
VITE_USE_EMULATORS=false

Functions are pinned to europe-west1.

Firebase Setup

Firestore Rules

Admin access is controlled via the email allowlist in Firestore rules (and the requireAdmin server-side guard). The canonical allowlist (mirrored in src/pages/Settings.tsx) is:

function isAdmin() {
  return isSignedIn() && (
    request.auth.token.admin == true ||
    request.auth.token.email == 'admin@acesense.io' ||
    request.auth.token.email == 'akshay@akshaysarode.com' ||
    request.auth.token.email == 'akshay.sarode@anilata.com' ||
    request.auth.token.email == 'akshay.sarode18@gmail.com'
  );
}

:::warning Enforcement is server-side The SPA itself only checks "is a user signed in" before rendering — any signed-in Google account loads the UI. Real authorization is enforced server-side via Firestore rules and the requireAdmin callables. The ADMIN_EMAILS array in Settings.tsx is display-only. :::

Storage Rules

Admins have full read/write access to all storage files.

Development Commands

Command	Description
pnpm dev	Start dev server with hot reload
pnpm build	Type-check + build for production (tsc -b && vite build)
pnpm preview	Preview production build
pnpm lint	Run ESLint
pnpm test	Run unit tests (Vitest)
pnpm test:watch	Vitest watch mode
pnpm test:e2e	Playwright end-to-end tests

Customization

Adding New Admin Users

1. Add email to the isAdmin() allowlist in firestore.rules and to ADMIN_EMAILS in src/pages/Settings.tsx (keep them in sync)
2. Deploy rules: firebase deploy --only firestore:rules

Theme

The dark theme is defined in src/index.css with CSS custom properties:

• --bg-primary: Main background
• --bg-card: Card backgrounds
• --accent: Accent color (#CCFF00)