'use client'; import React from 'react'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { Label } from '@/components/ui/label'; import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'; import type { OrderCreateState, OrderCreateHandlers } from '@/frontend/hooks/useOrderCreate'; import EditableImg from "@/@base/EditableImg"; import { MapPin, Map, Navigation, User, Phone, CarFront, Package, Info, CheckCircle2, AlertOctagon, TerminalSquare, ShieldCheck, DollarSign, LockKeyhole } from 'lucide-react'; interface Props { state: OrderCreateState; handlers: OrderCreateHandlers; } export const OrderCreateView = ({ state, handlers }: Props) => { const { formData, errors, isSubmitting, submitStatus, submitMessage, isGateUnlocked, accessUsername, accessCode, accessCodeError } = state; const { handleFormFieldChange, handleAccessUsernameChange, handleAccessCodeChange, handleUnlockGate, handleSubmit } = handlers; return

{/* Injecting custom keyframes for the Mishwar ambient float effect */}