feat(frontend): add async admin form foundations

src/components/AdminDateTimeField.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import * as React from "react";
+import DateObject from "react-date-object";
+import persian from "react-date-object/calendars/persian";
+import persian_fa from "react-date-object/locales/persian_fa";
+import DatePicker from "react-multi-date-picker";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+type AdminDateTimeFieldProps = {
+  label: string;
+  value?: string | null;
+  onChange: (value: string | null) => void;
+  required?: boolean;
+  disabled?: boolean;
+};
+
+function splitDateTime(value?: string | null) {
+  if (!value) {
+    return { date: null as DateObject | null, time: "" };
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return { date: null, time: "" };
+  }
+  return {
+    date: new DateObject({ date, calendar: persian, locale: persian_fa }),
+    time: `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`,
+  };
+}
+
+function combineDateTime(date: DateObject | null, time: string) {
+  if (!date || !time || !/^\d{2}:\d{2}$/.test(time)) return null;
+  const gregorian = date.toDate();
+  const [hours, minutes] = time.split(":").map(Number);
+  gregorian.setHours(hours, minutes, 0, 0);
+  return gregorian.toISOString();
+}
+
+export default function AdminDateTimeField({
+  label,
+  value,
+  onChange,
+  required,
+  disabled,
+}: AdminDateTimeFieldProps) {
+  const initial = React.useMemo(() => splitDateTime(value), [value]);
+  const [date, setDate] = React.useState<DateObject | null>(initial.date);
+  const [time, setTime] = React.useState(initial.time);
+
+  React.useEffect(() => {
+    setDate(initial.date);
+    setTime(initial.time);
+  }, [initial.date, initial.time]);
+
+  const emitChange = (nextDate: DateObject | null, nextTime: string) => {
+    onChange(combineDateTime(nextDate, nextTime));
+  };
+
+  return (
+    <div className="space-y-2">
+      <Label>
+        {label}
+        {required ? <span className="text-destructive"> *</span> : null}
+      </Label>
+      <div className="grid gap-2 sm:grid-cols-[1fr_120px]">
+        <DatePicker
+          value={date}
+          onChange={(next) => {
+            const nextDate = next instanceof DateObject ? next : null;
+            setDate(nextDate);
+            emitChange(nextDate, time);
+          }}
+          calendar={persian}
+          locale={persian_fa}
+          calendarPosition="bottom-right"
+          disabled={disabled}
+          inputClass="h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-right ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          placeholder="تاریخ"
+          containerClassName="w-full"
+        />
+        <Input
+          dir="ltr"
+          type="time"
+          value={time}
+          disabled={disabled}
+          onChange={(event) => {
+            setTime(event.target.value);
+            emitChange(date, event.target.value);
+          }}
+        />
+      </div>
+    </div>
+  );
+}