Pennyzo-webapp-frontend/COMPONENTS_GUIDE.md

✅ Components Created - Quick Access Guide

🎨 Theme System

File: src/theme/index.ts

Complete theme configuration with:

• ✅ Color palette (emerald/teal + gold)
• ✅ Typography system (display, h1-h4, body, buttons)
• ✅ Spacing (xs to massive)
• ✅ Border radius
• ✅ Icon sizes
• ✅ Shadow system
• ✅ Animation durations
• ✅ Breakpoints
• ✅ Z-index layers

Usage:

import { theme, colors, typography, spacing } from "./theme";

---

🏗️ Core Components Created

1. Screen Component

File: src/components/Screen.tsx

Main wrapper for pages with:

• Background image with 8px blur
• Dark overlay (rgba(4, 24, 21, 0.75))
• Proper z-index layering
• Floating AI assistant button support

Usage:

<Screen showBackground={true} showAssistant={true}>
  {/* Your content */}
</Screen>

---

2. StatCard Component

File: src/components/StatCard.tsx

Display metrics with trend indicators.

Usage:

<StatCard
  icon={<svg>...</svg>}
  label="Revenue"
  value="₹1.2M"
  trend={{ value: "+18%", isPositive: true }}
  iconColor="#4ADE80"
/>

---

3. QuickActionCard Component

File: src/components/QuickActionCard.tsx

Horizontal action card with icon and description.

Usage:

<QuickActionCard
  icon={<svg>...</svg>}
  label="Send salary slips"
  description="Monthly payroll ready"
  iconColor="#CBA951"
  badge={5}
  onPress={() => console.log("Pressed")}
/>

---

4. SectionCard Component

File: src/components/SectionCard.tsx

Container for grouped content.

Usage:

<SectionCard title="My Section" subtitle="Description">
  {/* Your content */}
</SectionCard>

---

5. SummaryCard Component

File: src/components/SummaryCard.tsx

List items with icons and count badges.

Usage:

<SummaryCard
  title="Actionable Insights"
  items={[
    {
      id: "1",
      icon: <svg>...</svg>,
      label: "Pending approvals",
      count: 5,
      iconColor: "#FBBF24",
    },
  ]}
/>

---

6. CompanySelector Component

File: src/components/CompanySelector.tsx

Company dropdown with modal.

Usage:

<CompanySelector
  companies={[{ id: "1", name: "Acme Corp", industry: "Tech" }]}
  selectedCompanyId="1"
  onSelectCompany={(id) => console.log(id)}
/>

---

📄 Pages Created

HomePage

File: src/pages/HomePage.tsx Route: /dashboard

Complete Home Screen with:

1. ✅ Greeting (time-based)
2. ✅ Company Selector
3. ✅ Decorative Divider
4. ✅ Quick Stats (horizontal scroll)
5. ✅ AI Insights Summary
6. ✅ Suggested Actions

---

🚀 How to View

Option 1: Direct URL

1. Start your dev server: npm run dev
2. Navigate to: http://localhost:5173/dashboard

Option 2: From Login Page

1. Go to: http://localhost:5173/login
2. Click "Demo Login"
3. This goes to /home (current LandingPage with agents)
4. Click "Dashboard" in the sidebar to navigate to /dashboard

Option 3: Update Login Redirect

Change the login redirect in src/pages/LoginPage.tsx line 13:

// Change this:
navigate("/home");

// To this:
navigate("/dashboard");

---

🎯 Routes Available

Route	Component	Description
/login	LoginPage	Login screen
/home	LandingPage	Current agent dashboard
/dashboard	HomePage	NEW Home screen (spec-compliant)
/buy-credits	BuyCreditsPage	Credits purchase
/forgot-password	ForgotPasswordPage	Password recovery

---

📝 Next Steps

To make HomePage the default:

// In src/App.tsx
<Route path="/" element={<Navigate to="/dashboard" replace />} />
<Route path="/home" element={<HomePage />} />
<Route path="/agents" element={<LandingPage />} />

To integrate with existing nav:

The HomePage already integrates with:

• ✅ Theme system
• ✅ Translation context (ready to use)
• ✅ Responsive design
• ✅ Screen component with background

---

🎨 Design Specifications Used

All components follow the exact design from:

• Document: WEB_APP_REPLICATION_PROMPT.md
• Section: Home Screen
• Colors: Deep emerald (#041815) + Gold (#CBA951)
• Typography: Bold headings, proper spacing
• Shadows: Medium elevation for cards
• Borders: 2px gold borders with 35-60% opacity

---

✅ All Files Created Successfully

• ✅ src/theme/index.ts (326 lines)
• ✅ src/components/Screen.tsx (112 lines)
• ✅ src/components/StatCard.tsx (95 lines)
• ✅ src/components/QuickActionCard.tsx (155 lines)
• ✅ src/components/SectionCard.tsx (85 lines)
• ✅ src/components/SummaryCard.tsx (130 lines)
• ✅ src/components/CompanySelector.tsx (180 lines)
• ✅ src/pages/HomePage.tsx (275 lines)

Total: 8 new files, ~1,358 lines of code

All files have:

• ✅ No TypeScript errors
• ✅ Proper typing
• ✅ Documentation comments
• ✅ Theme integration
• ✅ Responsive design

---

🐛 Troubleshooting

Can't see HomePage?

1. Check console for errors
2. Verify route in src/App.tsx line 63
3. Clear cache and restart dev server

Styles not applying?

1. Verify src/theme/index.ts exists
2. Check import path: import { theme } from '../theme'

Background not showing?

1. Add background image: public/bg-pennyzo.png
2. Or set showBackground={false} in Screen component

---

🎉 Everything is ready to use!