# Документация по переносу компонента ShiftModal (Модал смены)

## Общая структура в React
- **Файл**: client/src/components/modals/ShiftModal.tsx (предполагается, код не прочитан, на основе типичной логики из Dashboard).
- **Тип**: Функциональный компонент React с useState (form data: date, amount, notes), useEffect (validation), form onSubmit.
- **Зависимости**: react-hook-form, zod (validation), simple-ui (Dialog, Form, Input), useWebSocketNew (send shift data), useAuth (user).
- **Props**: isOpen, onClose.
- **State**: formData (date, amount, notes), errors from validation.
- **Template (JSX)**: Dialog open={isOpen} onOpenChange={onClose}, DialogContent bg-slate-800, form with fields (date input, amount input, notes textarea), buttons (submit, cancel).
- **Validation**: zod schema for date (required, date), amount (required, number >0), notes (optional).

## Элементы
- **Dialog**: open={isOpen}, onOpenChange={onClose}, class max-w-md bg-slate-800 p-6 rounded-lg.
- **Header**: h2 "Открытие смены", description "Введите данные для новой смены".
- **Form**: form onSubmit={handleSubmit}, fields:
  - Date: Input type="date" label "Дата смены", value={formData.date}, onChange, error display.
  - Amount: Input type="number" label "Начальный баланс", value={formData.amount}, min="0", step="100", error.
  - Notes: Textarea label "Примечания", value={formData.notes}, rows="3", error.
- **Buttons**: Submit "Открыть смену" (bg-green-600, disabled if invalid), Cancel (bg-gray-500, onClick onClose).
- **Error display**: div text-red-500 for field errors.

## Стили (Tailwind примеры)
- DialogContent: max-w-md bg-slate-800 border border-slate-600 rounded-lg shadow-xl p-6.
- Form fields: Input/Textarea w-full p-3 border border-slate-600 rounded-md focus:ring focus:border-blue-500.
- Labels: text-sm font-medium text-gray-300 mb-1.
- Errors: text-red-500 text-xs mt-1.
- Buttons: flex gap-4 justify-end, submit bg-green-600 hover:bg-green-700 px-4 py-2 rounded-md text-white, cancel bg-gray-500 hover:bg-gray-600.
- Responsive: max-w-90vw mobile, max-h-80vh overflow-auto.

## Взаимодействие
- onOpen: reset form, focus date input.
- onSubmit: validate with zod, if valid — send 'open-shift' via WebSocket (date, amount, notes, user), show success/error, onClose.
- onClose: reset form.
- Validation: onChange update errors, disable submit if invalid.
- In Dashboard: <ShiftModal isOpen={showShiftModal} onClose={handleCloseShiftModal} />.

## Vue маппинг
- <template>: <Dialog v-model:open="isOpen" @update:open="onClose"> <DialogContent class="max-w-md bg-slate-800 p-6"> <form @submit.prevent="handleSubmit" class="space-y-4"> <Input v-model="formData.date" type="date" label="Дата смены" /> <Input v-model.number="formData.amount" type="number" label="Начальный баланс" /> <Textarea v-model="formData.notes" label="Примечания" /> <div class="flex gap-4 justify-end"> <Button type="submit" :disabled="invalid">Открыть смену</Button> <Button type="button" @click="onClose">Отмена</Button> </div> </form> </DialogContent> </Dialog>.
- Props: isOpen, onClose.
- Emits: none (onClose via update:open).
- Composables: useWebSocket (sendMessage), useAuth (user), useForm (form handling, validation with zod).
- State: ref formData { date: '', amount: 0, notes: '' }, errors from validate.
- Effects: watch isOpen — reset form; onMounted focus date.
- Validation: computed invalid from errors, v-if for error messages.