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

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

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

مراحل:
1. /parto:setup اجرا کن — next.config.mjs، app/globals.css (دو خط import، بدون tailwind.config) و app/layout.tsx را تنظیم کن
2. app/layout.tsx را با html lang="fa" dir="rtl" و ThemeProvider بساز
3. قاب برنامه را طبق node_modules/@partodata/ui/AGENTS.md §3 بساز: app/frame.tsx یک Client Component که ProductFrame
   (از @partodata/ui/product-frame) را با منوی فارسیِ داده‌محور و usePathname رندر می‌کند، و app/layout.tsx آن را یک بار
   دور children می‌گذارد. قاب را با Sidebar، AppShell یا AppBar نساز.
4. صفحه اول را scaffold کن: /parto:page dashboard

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

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

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

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

قاب برنامهٔ Next.js App Router را طبق node_modules/@partodata/ui/AGENTS.md §3 بساز:
- app/frame.tsx: Client Component با usePathname که ProductFrame (از @partodata/ui/product-frame) را رندر می‌کند
- منو از روی داده (nav): گروه‌ها و آیتم‌ها با برچسب فارسی، icon و href
- کلید تم را قاب خودش می‌گذارد (themeToggle؛ ThemeProvider در ریشه)، نه در actions؛ user: UserMenu با نام کاربر
- app/layout.tsx: <Frame>{children}</Frame>، یک بار برای همهٔ صفحه‌ها
- نوار بالا عنوان صفحه ندارد؛ هر صفحه یک قالب از @partodata/ui/templates است (ListPage، DetailPage، FormPage، SettingsPage، DashboardPage، UtilityPage)
- قاب را با Sidebar، AppShell یا AppBar نساز
- تم: 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 کامل بساز:
- ساختار: DashboardPage (از @partodata/ui/templates) با period (DateRangePicker با بازه‌های آماده، شروع با «ماه گذشته») و kpis، نمودارها در DashboardSection › DashboardChart، داخل ProductFrame برنامه
- 4 MetricCard: دنبال‌کنندگان، نرخ تعامل، تعداد پست، ریچ
- PartoLineChart: روند 30 روزه تعامل
- PartoBarChart: مقایسه پلتفرم‌ها
- DataTable: 5 پست پرتعامل اخیر
- داده‌های نمونه فارسی واقعی
- Server Component با loading.tsx

صفحه لیست اینفلوئنسر با پرتو بساز (App Router):
- DataTable با ستون‌ها: نام، پلتفرم (PlatformMark)، دسته (نانو/میکرو/ماکرو/مگا)
- ستون نرخ تعامل: EngagementRate با category prop
- ستون سنتیمنت: SentimentBadge
- ساختار: ListPage (از @partodata/ui/templates) با DataTable بی‌قاب به‌عنوان فرزند
- SearchInput در search؛ فیلتر پلتفرم، دسته و بازهٔ زمانی در filters
- اقدام اصلی «افزودن اینفلوئنسر» فقط در primaryAction؛ خروجی در secondaryActions، نمایش ستون‌ها در toolbarEnd
- صفحه‌بندی با pagination خود ListPage؛ حالت‌ها با state={pageState({ data: result?.items, isLoading, error, onRetry })} و filtered و onClearFilters خود ListPage

صفحه پروفایل کامل اینفلوئنسر بساز (App Router):
- ساختار: DetailPage (از @partodata/ui/templates) با back به فهرست، زبانه‌های نشانی‌دار (tabs) و DetailSection‌ها
- Account با layout="header" در بالا (هویت، بیو و آمار حساب) از @partodata/ui/social
- 3 MetricCard: دنبال‌کنندگان، نرخ تعامل، تعداد پست
- PartoLineChart: تاریخچه 6 ماهه نرخ تعامل
- Tabs: پست‌های اخیر / تحلیل مخاطبان / کمپین‌ها
- تب پست‌های اخیر: EntityCollection با entity="post" و Post از @partodata/ui/social (دادهٔ PostData یک بار با fromPostData)
- Server Component — params از URL می‌گیرد

فرم [نوع فرم] با پرتو بساز:
- ساختار: FormPage (از @partodata/ui/templates)؛ هر فیلد یک FormRow از render در FormField
- فیلدها: [لیست کنید]
- Client Component با react-hook-form + zod
- کامپوننت‌ها: Input، Select، DatePicker، Switch از پرتو
- دکمه‌ها را FormPage می‌سازد: submitLabel، onCancel (بازگشت به صفحهٔ قبل)، submitting
- خطای ثبت در error خود FormPage؛ Sonner فقط برای پیام موفقیت

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

پروژه‌ام از @partodata/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" فقط جایی که لازم است
- مرجع: node_modules/@partodata/ui/AGENTS.md؛ هرجا منبع دیگری مخالف بود، همین فایل
- قاب برنامه: ProductFrame، یک بار در layout ریشه
- هر صفحه: یک قالب از @partodata/ui/templates (جدول انتخاب قالب در AGENTS.md §3)
- یک اقدام اصلی در هر صفحه، در primaryAction همان قالب؛ بقیه در secondaryActions