Add professional Arabic date and time picker to booking form

Introduce a custom DateTimePicker component for improved date and time selection in the protocol request form, replacing native inputs with an Arabic-localized, RTL-compatible interface.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 8b01db58-6cde-464b-bd7d-46bd031e467f
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/OsTuUKE
Replit-Helium-Checkpoint-Created: true

artifacts/tx-os/src/pages/protocol-request.tsx

@@ -12,6 +12,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { DateTimePicker } from "@/components/date-time-picker";
 
 const API = `${import.meta.env.BASE_URL}api`;
 
@@ -303,24 +304,23 @@ export default function ProtocolRequestPage() {
               <Label htmlFor="startsAt">
                 من <span className="text-rose-500">*</span>
               </Label>
-              <Input
+              <DateTimePicker
                 id="startsAt"
-                type="datetime-local"
                 value={form.startsAt}
-                onChange={(e) => set("startsAt", e.target.value)}
-                required
+                onChange={(v) => set("startsAt", v)}
+                placeholder="اختر تاريخ ووقت البداية"
               />
             </div>
             <div className="space-y-2">
               <Label htmlFor="endsAt">
                 إلى <span className="text-rose-500">*</span>
               </Label>
-              <Input
+              <DateTimePicker
                 id="endsAt"
-                type="datetime-local"
                 value={form.endsAt}
-                onChange={(e) => set("endsAt", e.target.value)}
-                required
+                onChange={(v) => set("endsAt", v)}
+                placeholder="اختر تاريخ ووقت النهاية"
+                minDate={form.startsAt ? new Date(form.startsAt) : undefined}
               />
             </div>
           </div>