# /component — Scaffold React Components

Scaffold React components matching the mawidi design system: TypeScript, Tailwind CSS, shadcn/ui patterns, RTL-aware, bilingual.

## Usage

```
/component <Name>                      # Basic component
/component page <Name>                 # Dashboard page (data fetching, loading, error states)
/component form <Name>                 # Form with validation (React Hook Form + Zod)
/component card <Name>                 # Card component
/component modal <Name>                # Modal/dialog component
/component panel <Name>                # Dashboard panel/section
/component list <Name>                 # List component with pagination
```

**Examples:**
- `/component InvoiceCard`
- `/component page InvoiceManagement`
- `/component form CreateAppointment`
- `/component modal ConfirmCancellation`
- `/component panel AnalyticsOverview`

## Templates

### Basic Component
```typescript
'use client';

import React from 'react';

interface <Name>Props {
  // props
}

export function <Name>({ }: <Name>Props) {
  return (
    <div>
      {/* component content */}
    </div>
  );
}
```

### Dashboard Page Component
Includes: data fetching, loading skeleton, error state, empty state
```typescript
'use client';

import React, { useState, useEffect } from 'react';
import { useApiRequest } from '@/lib/hooks/useApiRequest';

interface <Name>Props {
  lang: string;
}

export function <Name>({ lang }: <Name>Props) {
  const isRTL = lang === 'ar';
  const { data, loading, error, refetch } = useApiRequest('/api/<resource>');

  if (loading) return <LoadingSkeleton />;
  if (error) return <ErrorState error={error} onRetry={refetch} />;
  if (!data?.length) return <EmptyState />;

  return (
    <div dir={isRTL ? 'rtl' : 'ltr'}>
      {/* page content */}
    </div>
  );
}
```

### Form Component
Includes: React Hook Form + Zod validation, submit handler, error display
```typescript
'use client';

import React from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  // fields
});

type FormData = z.infer<typeof schema>;

interface <Name>FormProps {
  onSubmit: (data: FormData) => Promise<void>;
  lang: string;
}

export function <Name>Form({ onSubmit, lang }: <Name>FormProps) {
  const isRTL = lang === 'ar';
  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)} dir={isRTL ? 'rtl' : 'ltr'}>
      {/* form fields */}
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
}
```

### Modal Component
```typescript
'use client';

import React from 'react';

interface <Name>ModalProps {
  isOpen: boolean;
  onClose: () => void;
  lang: string;
}

export function <Name>Modal({ isOpen, onClose, lang }: <Name>ModalProps) {
  const isRTL = lang === 'ar';

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4" dir={isRTL ? 'rtl' : 'ltr'}>
        {/* modal content */}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );
}
```

## File Placement
- Dashboard components → `app/[lang]/dashboard/components/`
- Shared components → `components/`
- Dashboard submodules → `components/dashboard/`
- Staff components → `components/staff/`
- Onboarding → `components/onboarding/`
- Blog → `components/blog/`

## Key Patterns from Existing Code
- All components are `'use client'` unless purely presentational
- RTL support via `dir={isRTL ? 'rtl' : 'ltr'}` and `lang` prop
- Tailwind CSS for styling with RTL-aware classes (`rtl:`, `ltr:`)
- `useApiRequest` hook for data fetching (from `@/lib/hooks/useApiRequest`)
- Loading states with skeletons
- Error boundaries with retry
- Bilingual labels: use translation objects or pass `lang` prop

## Key Rules
- ALWAYS check existing component patterns before scaffolding
- ALWAYS include TypeScript types/interfaces
- ALWAYS support RTL (Arabic) with `dir` attribute and `lang` prop
- ALWAYS use Tailwind CSS (not CSS modules)
- ALWAYS use `'use client'` directive for interactive components
- Place files in the correct directory based on type
- Follow existing naming conventions (PascalCase for components)
