Документация по переносу компонента 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.

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: .

: <Dialog v-model:open="isOpen" @update:open="onClose"> <form @submit.prevent="handleSubmit" class="space-y-4"> <div class="flex gap-4 justify-end"> <Button type="submit" :disabled="invalid">Открыть смену</Button> <Button type="button" @click="onClose">Отмена</Button> </div> </form> </DialogContent> </Dialog>.</li> <li>Props: isOpen, onClose.</li> <li>Emits: none (onClose via update:open).</li> <li>Composables: useWebSocket (sendMessage), useAuth (user), useForm (form handling, validation with zod).</li> <li>State: ref formData { date: '', amount: 0, notes: '' }, errors from validate.</li> <li>Effects: watch isOpen — reset form; onMounted focus date.</li> <li>Validation: computed invalid from errors, v-if for error messages.</li> </ul> </body></html>