برنامه‌ی شیفت
shift-schedulerکامپوننت تقویماسم افراد سمت راست و شنبه تا جمعه جلوشون، شیفت صبح و عصر و شب در هر خونه، جمع ساعت هفتگی با هشدار بیش از ۴۴ ساعت و پرچم وقتی استراحت بین دو شیفت کمه.
۱۸ مهر تا ۲۴ مهر
۲۳ شیفت این هفته
- صبح ۰۷:۰۰–۱۵:۰۰
- عصر ۱۵:۰۰–۲۳:۰۰
- شب ۲۳:۰۰–۰۷:۰۰
| نفر | شنبه۱۸ مهر | یکشنبه۱۹ مهر | دوشنبه۲۰ مهر | سه‌شنبه۲۱ مهر | چهارشنبه۲۲ مهر | پنجشنبه۲۳ مهر | جمعه۲۴ مهر | ساعت |
|---|---|---|---|---|---|---|---|---|
| سارا احمدیسرپرستار | صبح | صبح | صبح | صبح | صبح | ۴۰ | ||
| رضا کریمیپرستار | عصر | عصر | شب | صبح | عصر | عصر | ۴۸ | |
| مریم حسینیپرستار | شب | شب | عصر | عصر | شب | شب | ۴۸ | |
| علی رضاییبهیار | صبحعصر | عصر | شب | صبح | صبح | ۴۸ | ||
| پوشش | صبح ۱عصر ۱شب ۱ | صبح ۲عصر ۲شب ۱ | صبح ۱عصر ۱شب ۱ | صبح ۲عصر ۱شب ۰ | صبح ۱عصر ۱شب ۱ | صبح ۱عصر ۱شب ۱ | صبح ۱عصر ۱شب ۱ |
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.
$ npx vibefarsi add shift-schedulerنصب دستی
محتوای تب «کد» را در
components/calendar/shift-scheduler.tsxبگذارید. پیش‌نیاز: calendar-core، popover.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { ShiftScheduler } from "@/components/calendar/shift-scheduler"23<ShiftScheduler4 resources={[{ id: "sara", title: "سارا احمدی", subtitle: "پرستار" }]}5 shifts={shifts}6 onShiftsChange={setShifts}7/>پراپ‌ها
| پراپ | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| resources | Resource[] | - | افراد یا اتاق‌ها با id، title و subtitle. |
| shifts / onShiftsChange | Shift[] | - | هر شیفت resourceId، date و type داره. |
| shiftTypes | ShiftType[] | صبح، عصر، شب | نوع شیفت‌ها با ساعت شروع و پایان. پایان کمتر از شروع یعنی روز بعد تموم میشه. |
| maxHours / minRest | number | 44 / 12 | سقف ساعت هفتگی و حداقل استراحت بین دو شیفت. |
| onCellClick | (resourceId, date) => void | - | اگه بدید، منوی داخلی خاموش میشه تا دیالوگ خودتون را باز کنید. |
نکته‌ها
- ردیف پوشش پایین جدول تعداد هر شیفت در هر روز را نشون میده و صفرها قرمز میشن.