# Components Guide

## Admin Components

All admin-specific components are located in `/components/admin/`.

### AdminLayout

**Location**: `components/admin/layout.tsx`

Main wrapper component for all admin pages. Combines sidebar, header, and content area.

```tsx
import { AdminLayout } from '@/components/admin/layout'

export default function Page() {
  return (
    <AdminLayout>
      <h1>Page Content Here</h1>
    </AdminLayout>
  )
}
```

**Features**:
- Responsive layout
- Mobile sidebar collapse
- Header integration
- Proper spacing and padding

---

### AdminSidebar

**Location**: `components/admin/sidebar.tsx`

Navigation sidebar with 7 menu items. Automatically highlights active page.

**Props**: None (uses `usePathname` hook internally)

**Features**:
- Active state highlighting
- Notification badges (e.g., "12", "5")
- Mobile hamburger menu
- Smooth animations
- Logout button

**Menu Items**:
- Dashboard
- Analytics
- Users
- Messages
- Reports
- Billing
- Settings

**Adding New Items**:

Edit the `menuItems` array:

```tsx
const menuItems = [
  {
    title: 'New Page',
    icon: Icon,
    href: '/admin/new-page',
    badge: '3',  // Optional
  },
  // ... other items
]
```

---

### AdminHeader

**Location**: `components/admin/header.tsx`

Top navigation bar with search, notifications, and user menu.

**Features**:
- Search input
- Notification bell with dot indicator
- User avatar with dropdown menu
- Responsive design (search hidden on mobile)

**Dropdown Menu**:
- Profile
- Settings
- Logout

---

### StatCard

**Location**: `components/admin/stat-card.tsx`

Reusable component for displaying metrics with optional change percentage and icon.

**Props**:

```tsx
interface StatCardProps {
  title: string           // Label text
  value: string | number  // Main value
  change?: number        // Percentage change (positive or negative)
  icon?: React.ReactNode // Optional icon
  description?: string   // Optional description
}
```

**Usage**:

```tsx
<StatCard
  title="Total Revenue"
  value="$45,231.89"
  change={20.1}
  icon={<TrendingUp className="w-6 h-6" />}
  description="USD"
/>
```

**Features**:
- Displays metric with optional percentage
- Arrow indicator (up/down)
- Icon on the right side
- Hover effect
- Color-coded change (green for positive, red for negative)

---

### DataTable

**Location**: `components/admin/data-table.tsx`

Flexible table component with search, pagination, and responsive design.

**Props**:

```tsx
interface DataTableProps {
  columns: Column[]
  data: Record<string, any>[]
  title?: string
  searchPlaceholder?: string
  itemsPerPage?: number
}

interface Column {
  key: string
  label: string
  sortable?: boolean
}
```

**Usage**:

```tsx
<DataTable
  title="All Users"
  searchPlaceholder="Search by name..."
  columns={[
    { key: 'name', label: 'Name' },
    { key: 'email', label: 'Email' },
    { key: 'status', label: 'Status' },
  ]}
  data={usersData}
  itemsPerPage={10}
/>
```

**Features**:
- Full-text search across all fields
- Automatic pagination
- Column headers with labels
- Responsive table with scroll on mobile
- Search results count
- Custom data rendering (JSX in data)
- Empty state message
- Hover effects on rows

**Example with Custom Rendering**:

```tsx
const data = users.map(user => ({
  name: user.name,
  email: user.email,
  status: (
    <Badge className="bg-green-500/20 text-green-400">
      {user.status}
    </Badge>
  ),
}))

<DataTable columns={columns} data={data} />
```

---

## ShadCn UI Components

All standard UI components from shadcn/ui are available in `/components/ui/`.

### Most Used Components

**Button**
```tsx
import { Button } from '@/components/ui/button'

<Button>Click me</Button>
<Button variant="outline">Secondary</Button>
<Button size="sm">Small</Button>
<Button className="gap-2"><Icon /> Icon Button</Button>
```

**Card**
```tsx
import { Card } from '@/components/ui/card'

<Card className="bg-card border-border p-6">
  <h3>Card Title</h3>
  <p>Card content</p>
</Card>
```

**Badge**
```tsx
import { Badge } from '@/components/ui/badge'

<Badge className="bg-green-500/20 text-green-400">Active</Badge>
<Badge>Default</Badge>
```

**Input**
```tsx
import { Input } from '@/components/ui/input'

<Input placeholder="Search..." className="bg-input border-border" />
```

**Table**
```tsx
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Header</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Data</TableCell>
    </TableRow>
  </TableBody>
</Table>
```

**Tabs**
```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content 1</TabsContent>
  <TabsContent value="tab2">Content 2</TabsContent>
</Tabs>
```

**Dialog/Modal**
```tsx
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description</DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>
```

**Dropdown Menu**
```tsx
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'

<DropdownMenu>
  <DropdownMenuTrigger>Menu</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Option 1</DropdownMenuItem>
    <DropdownMenuItem>Option 2</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

**Switch**
```tsx
import { Switch } from '@/components/ui/switch'

<Switch checked={enabled} onCheckedChange={setEnabled} />
```

**Avatar**
```tsx
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

<Avatar>
  <AvatarImage src="/avatar.jpg" />
  <AvatarFallback>AD</AvatarFallback>
</Avatar>
```

---

## Styling Components

### Using CSS Classes

All components use Tailwind CSS classes for styling:

```tsx
<div className="bg-card border border-border p-6 rounded-lg">
  Content
</div>
```

### Available Color Classes

- Background: `bg-background`, `bg-card`, `bg-input`
- Text: `text-foreground`, `text-muted-foreground`
- Border: `border-border`
- Primary: `bg-primary`, `text-primary`, `text-primary-foreground`
- Secondary: `bg-secondary`, `text-secondary-foreground`
- Accent: `bg-accent`, `text-accent-foreground`
- Destructive: `bg-destructive`, `text-destructive-foreground`

---

## Creating Custom Components

### Example: Custom Metric Card

```tsx
// components/admin/metric-card.tsx

import { Card } from '@/components/ui/card'

interface MetricCardProps {
  title: string
  value: number
  unit: string
}

export function MetricCard({ title, value, unit }: MetricCardProps) {
  return (
    <Card className="bg-card border-border p-4">
      <p className="text-sm text-muted-foreground">{title}</p>
      <p className="text-3xl font-bold text-foreground mt-2">
        {value} <span className="text-lg">{unit}</span>
      </p>
    </Card>
  )
}
```

### Using in a Page

```tsx
import { MetricCard } from '@/components/admin/metric-card'

export default function Page() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <MetricCard title="Users" value={2543} unit="active" />
      <MetricCard title="Revenue" value={45231} unit="$" />
    </div>
  )
}
```

---

## Component Best Practices

### 1. Use Semantic HTML
```tsx
// Good
<div className="flex items-center gap-2">
  <Icon />
  <span>Label</span>
</div>

// Better
<label className="flex items-center gap-2">
  <Icon />
  <span>Label</span>
</label>
```

### 2. Compose Components
```tsx
// Create reusable combinations
export function StatHeader({ title, description }: Props) {
  return (
    <div className="mb-6">
      <h3 className="text-lg font-semibold text-foreground">{title}</h3>
      <p className="text-xs text-muted-foreground mt-1">{description}</p>
    </div>
  )
}
```

### 3. Use Consistent Spacing
```tsx
// Use Tailwind spacing scale
gap-2, gap-4, gap-6     // Instead of gap-[8px], gap-[16px]
p-4, p-6, p-8           // Instead of p-[16px], p-[24px]
my-4, mx-2, py-6        // Instead of my-[16px], mx-[8px]
```

### 4. Mobile-First Responsive Design
```tsx
// Default is mobile, then enhance for larger screens
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  {/* Single column on mobile, 2 on tablet, 4 on desktop */}
</div>
```

---

## Performance Tips

### 1. Memoize Components
```tsx
import { memo } from 'react'

const StatCard = memo(function StatCard(props) {
  return // ...
})
```

### 2. Use Dynamic Imports
```tsx
import dynamic from 'next/dynamic'

const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <Skeleton />,
})
```

### 3. Lazy Load Data
```tsx
'use client'

const [data, setData] = useState(null)

useEffect(() => {
  fetchData().then(setData)
}, [])
```

---

For more information, visit:
- [ShadCn UI Docs](https://ui.shadcn.com)
- [Tailwind CSS Docs](https://tailwindcss.com)
- [Recharts Docs](https://recharts.org)