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:**

```typescript
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:**

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

---

### 2. StatCard Component

**File:** `src/components/StatCard.tsx`

Display metrics with trend indicators.

**Usage:**

```tsx
<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:**

```tsx
<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:**

```tsx
<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:**

```tsx
<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:**

```tsx
<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:

```typescript
// 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:

```typescript
// 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!**