وایب‌کدینگ با پرتو

پروژه Next.js App Router جدیدم را با دیزاین سیستم پرتو راه‌اندازی کن.

نوع پروژه: [مثلاً: داشبورد تحلیل شبکه‌های اجتماعی برای برندها]
پلتفرم‌های هدف: [مثلاً: اینستاگرام، تلگرام، یوتیوب]
تم پیش‌فرض: dark

مراحل:
۱. /parto:setup اجرا کن — next.config.mjs، tailwind.config.ts، و app/layout.tsx را تنظیم کن
۲. app/layout.tsx را با html lang="fa" dir="rtl" و ThemeProvider بساز
۳. یک app/(dashboard)/layout.tsx با Sidebar ناوبری فارسی بساز
۴. صفحه اول را scaffold کن: /parto:page dashboard

می‌خواهم پروژه Next.js App Router موجودم را به دیزاین سیستم پرتو مهاجرت دهم.

۱. /parto:setup اجرا کن — پکیج را نصب و تنظیمات را اعمال کن
۲. /parto:review اجرا کن — بررسی کامل کد با اولویت‌بندی
۳. با app/layout.tsx شروع کن، بعد صفحه به صفحه جایگزین کن

فقط این صفحه را به پرتو مهاجرت بده: app/[path]/page.tsx

/parto:review app/[path]/page.tsx
مشکلات را فهرست کن، سپس یک به یک رفع کن — از تغییرات breaking شروع نکن.

یک layout کامل Next.js App Router برای route group داشبورد بساز:
- app/(dashboard)/layout.tsx
- Sidebar با ناوبری فارسی
- Header با نام کاربر و دکمه تغییر تم
- محتوای اصلی با Suspense boundary
- تم: dark، پلتفرم‌ها: اینستاگرام، تلگرام

یک Server Component برای صفحه [نام صفحه] بساز که:
- در app/[route]/page.tsx قرار می‌گیرد
- داده را از API/دیتابیس fetch می‌کند (async/await)
- از کامپوننت‌های پرتو برای نمایش استفاده می‌کند
- loading.tsx جداگانه با Skeleton پرتو دارد
- error.tsx جداگانه با ErrorState پرتو دارد

یک loading.tsx برای صفحه [نام صفحه] بساز.
از Skeleton کامپوننت پرتو استفاده کن.
ساختار را دقیقاً مثل صفحه اصلی بساز تا layout shift نداشته باشیم.

یک error.tsx برای بخش [نام بخش] بساز.
از ErrorState کامپوننت پرتو استفاده کن.
دکمه retry داشته باشد که error.reset() را صدا بزند.
پیام خطا به فارسی رسمی باشد.

یک فرم با Server Action بساز برای [عملیات].
- فیلدها: [لیست فیلدها]
- Server Action در app/actions/[name].ts
- validation با zod
- وضعیت pending با useFormStatus
- پیام موفقیت/خطا با Sonner پرتو
- کامپوننت‌های فرم از پرتو: Input، Select، Button

یک صفحه داشبورد Next.js App Router کامل بساز:
- ۴ MetricCard: دنبال‌کنندگان، نرخ تعامل، تعداد پست، ریچ
- PartoLineChart: روند ۳۰ روزه تعامل
- PartoBarChart: مقایسه پلتفرم‌ها
- DataTable: ۵ پست پرتعامل اخیر
- داده‌های نمونه فارسی واقعی
- Server Component با loading.tsx

صفحه لیست اینفلوئنسر با پرتو بساز (App Router):
- DataTable با ستون‌ها: نام، پلتفرم (SocialPlatformBadge)، دسته (نانو/میکرو/ماکرو/مگا)
- ستون نرخ تعامل: EngagementRate با category prop
- ستون سنتیمنت: SentimentBadge
- FilterBar بالای جدول: فیلتر پلتفرم، دسته، بازه زمانی
- SearchInput برای جستجو
- Pagination کنترل‌شده
- loading.tsx با Skeleton

صفحه پروفایل کامل اینفلوئنسر بساز (App Router):
- ProfileCard در بالا با آمار اصلی
- ۳ MetricCard: دنبال‌کنندگان، نرخ تعامل، تعداد پست
- PartoLineChart: تاریخچه ۶ ماهه نرخ تعامل
- Tabs: پست‌های اخیر / تحلیل مخاطبان / کمپین‌ها
- InstagramPost در تب پست‌های اخیر
- Server Component — params از URL می‌گیرد

فرم [نوع فرم] با پرتو بساز:
- فیلدها: [لیست کنید]
- Client Component با react-hook-form + zod
- کامپوننت‌ها: Input، Select، DatePicker، Switch از پرتو
- دکمه submit با loading state
- Sonner برای پیام موفقیت/خطا
- دکمه cancel که به صفحه قبل برمی‌گردد

[نوع: PartoLineChart/PartoBarChart/PartoPieChart/PartoAreaChart] بساز:
- داده: [توضیح دهید]
- عنوان فارسی
- isLoading prop برای حالت loading
- Empty state اگر data آرایه خالی باشد
- width="100%" برای ریسپانسیو

پروژه‌ام از @parto-system-design/ui روی Next.js App Router استفاده می‌کند.
قوانین:
- رنگ‌ها از سیستم پرتو: text-light نه text-gray-500، bg-surface-100 نه bg-gray-100
- RTL: ms/me/ps/pe به‌جای ml/mr/pl/pr
- تم: dark
- پلتفرم‌های فعال: اینستاگرام، تلگرام
- Server Components پیش‌فرض، "use client" فقط جایی که لازم است