قفلشده
ابتدا مرحله قبلی را تکمیل کنید
کارت navigation تخصصی ERP برای ورود به ماژول، بخش تنظیمات، مرحله راهاندازی یا فرآیند سازمانی — presentation-only و جایگزین TaavCard عمومی نیست.
import { TaavModuleCard } from "@repo/ui/taav/business";این کارت برای ورود به یک ماژول، بخش تنظیمات، مرحله راهاندازی یا فرآیند سازمانی استفاده میشود. منطق route، permission، تکمیلبودن، فعالبودن یا قفلبودن باید از اپ اصلی (DastRanj / VahedYek) پاس داده شود — این کامپوننت نباید خودش داده fetch کند یا business logic داشته باشد.
نمونه نزدیک به اسکرینشات ERP تیره — پنج کارت دو ستونه با هدر الگویی.
ابتدا مرحله قبلی را تکمیل کنید
دسترسی به این بخش برای شما فعال نیست
این بخش زیرمجموعه TaavModuleCard است و route جدا فقط برای backward compatibility نگه داشته میشود.
import { TaavModuleCard, TaavModuleCardGrid, TaavModuleCardGridItem } from "@repo/ui/taav/business";
<TaavModuleCardGrid columns={2} gap="md">
<TaavModuleCardGridItem span={2}>
<TaavModuleCard
title="نوع مالکیت و اطلاعات پایه"
description="ورود این اطلاعات در تنظیمات قرارداد ضروری است"
href="#"
width="full"
/>
</TaavModuleCardGridItem>
<TaavModuleCardGridItem>
<TaavModuleCard
title="نماینده قانونی"
description="مدیریت و تنظیم قراردادها، فرمهای رسمی و الحاقیهها"
status="incomplete"
href="#"
/>
</TaavModuleCardGridItem>
<TaavModuleCardGridItem>
<TaavModuleCard
title="شرکای اصلی"
description="مدیریت شرکای اصلی و اطلاعات مرتبط با کسبوکار"
status="incomplete"
href="#"
/>
</TaavModuleCardGridItem>
</TaavModuleCardGrid>| Prop | نوع | پیشفرض | توضیح |
|---|---|---|---|
columns | 1 | 2 | 3 | 4 | 2 | تعداد ستون دسکتاپ — پیشفرض دو ستونه مانند ERP |
gap | 'sm' | 'md' | 'lg' | 'xl' | md | فاصله بین کارتها |
density | 'compact' | 'comfortable' | 'spacious' | comfortable | تراکم فاصلهگذاری |
responsive | boolean | true | در موبایل تکستونه شود |
children* | ReactNode | — | کارتها — ترجیحاً داخل TaavModuleCardGridItem |
| Prop | نوع | پیشفرض | توضیح |
|---|---|---|---|
span | 1 | 2 | 3 | 4 | 1 | پوشش چند ستون — برای کارت full-width |
responsive | boolean | true | span واکنشگرا در breakpointهای کوچک |
| Prop | نوع | پیشفرض | توضیح |
|---|---|---|---|
title* | ReactNode | — | عنوان ماژول یا بخش تنظیمات (RTL، راستچین در هدر) |
description | ReactNode | — | توضیح کوتاه زیر هدر — میتواند شامل وضعیت مثل «(تکمیل نشده)» باشد |
eyebrow | ReactNode | — | متن کمکی بالای توضیح |
status | 'default' | 'active' | 'complete' | 'incomplete' | 'locked' | 'disabled' | 'warning' | 'error' | default | وضعیت بصری — از اپ پاس داده میشود |
statusLabel | ReactNode | — | برچسب وضعیت جداگانه (اختیاری) |
icon / arrowIcon | ReactNode | — | آیکون سفارشی بدنه یا فلش هدر |
href | string | — | لینک navigation — بدون وابستگی به Next.js Link |
onClick | () => void | — | handler کلیک — در صورت نبود href، دکمه رندر میشود |
disabled / loading / selected | boolean | — | حالتهای تعاملی |
variant | 'default' | 'setup' | 'imageHeader' | 'compact' | 'flat' | setup | الگوی بصری کارت |
tone | 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info' | neutral | تن رنگ هدر/مرز |
themeMode | 'auto' | 'light' | 'dark' | auto | تم اجباری کارت یا همگام با shell |
size | 'sm' | 'md' | 'lg' | md | اندازه تایپوگرافی و padding |
width | 'auto' | 'full' | auto | عرض کارت داخل گرید |
headerPattern | 'geometric' | 'subtle' | 'none' | geometric | الگوی CSS هدر — بدون asset تصویری |
align | 'start' | 'center' | 'end' | start | تراز متن بدنه — پیشفرض راستچین RTL |
direction | 'enter' | 'back' | enter | جهت فلش هدر (RTL) |
ariaLabel | string | — | برچسب دسترسپذیری در صورت ناکافی بودن title/description |