From 2c4116871bb53591a65212dce8d6daf844e9fc06 Mon Sep 17 00:00:00 2001
From: nasmans <114198613+nasmans@users.noreply.github.com>
Date: Wed, 29 Oct 2025 19:58:39 +0100
Subject: [PATCH] feat: add booking form and ticket modal

---
 src/components/booking/BookingForm.module.css | 100 ++++++
 src/components/booking/BookingForm.tsx        | 320 ++++++++++++++++++
 .../booking/BookingTicketModal.module.css     | 101 ++++++
 src/components/booking/BookingTicketModal.tsx | 107 ++++++
 src/context/ClientContext.tsx                 |  32 ++
 src/types/css.d.ts                            |   4 +
 6 files changed, 664 insertions(+)
 create mode 100644 src/components/booking/BookingForm.module.css
 create mode 100644 src/components/booking/BookingForm.tsx
 create mode 100644 src/components/booking/BookingTicketModal.module.css
 create mode 100644 src/components/booking/BookingTicketModal.tsx
 create mode 100644 src/context/ClientContext.tsx
 create mode 100644 src/types/css.d.ts

diff --git a/src/components/booking/BookingForm.module.css b/src/components/booking/BookingForm.module.css
new file mode 100644
index 0000000..647497f
--- /dev/null
+++ b/src/components/booking/BookingForm.module.css
@@ -0,0 +1,100 @@
+.form {
+  display: grid;
+  gap: 24px;
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 28px;
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
+  font-family: 'Tajawal', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.fieldset {
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 12px;
+  padding: 18px 20px 20px;
+  display: grid;
+  gap: 18px;
+}
+
+.fieldset legend {
+  font-weight: 600;
+  font-size: 1rem;
+  padding: 0 6px;
+}
+
+.label {
+  display: grid;
+  gap: 6px;
+  font-size: 0.95rem;
+  color: rgba(15, 23, 42, 0.78);
+}
+
+.label input,
+.label select,
+.label textarea {
+  border: 1px solid rgba(15, 23, 42, 0.16);
+  border-radius: 10px;
+  padding: 10px 12px;
+  font-size: 0.95rem;
+  font-family: inherit;
+}
+
+.label input[readonly],
+.fieldset:disabled input,
+.fieldset:disabled select {
+  background: rgba(148, 163, 184, 0.12);
+  color: rgba(15, 23, 42, 0.65);
+  cursor: not-allowed;
+}
+
+.radioGroup {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+  font-size: 0.95rem;
+}
+
+.homeOptions {
+  display: grid;
+  gap: 18px;
+}
+
+.participants {
+  display: grid;
+  gap: 16px;
+}
+
+.participantCard {
+  border: 1px solid rgba(47, 128, 237, 0.28);
+  border-radius: 12px;
+  padding: 16px;
+  background: rgba(47, 128, 237, 0.06);
+  display: grid;
+  gap: 12px;
+}
+
+.participantCard h4 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.submitButton {
+  background: linear-gradient(130deg, #2f80ed, #56ccf2);
+  color: #ffffff;
+  border: none;
+  border-radius: 999px;
+  padding: 12px 26px;
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: box-shadow 0.2s ease;
+}
+
+.submitButton:hover {
+  box-shadow: 0 12px 22px rgba(47, 128, 237, 0.3);
+}
diff --git a/src/components/booking/BookingForm.tsx b/src/components/booking/BookingForm.tsx
new file mode 100644
index 0000000..aa6721b
--- /dev/null
+++ b/src/components/booking/BookingForm.tsx
@@ -0,0 +1,320 @@
+import React, { FormEvent, useMemo, useState } from 'react';
+import { useClientProfile } from '../../context/ClientContext';
+import styles from './BookingForm.module.css';
+import BookingTicketModal, {
+  BookingTicketDetails,
+  ParticipantDetail,
+} from './BookingTicketModal';
+
+export interface BookingFormProps {
+  onSubmitBooking?: (details: BookingTicketDetails) => void;
+  onShowTicketInDashboard?: (details: BookingTicketDetails) => void;
+}
+
+interface ParticipantsState extends ParticipantDetail {
+  id: number;
+}
+
+interface BookingFormState {
+  service: string;
+  date: string;
+  period: 'morning' | 'afternoon' | 'evening';
+  visitType: 'center' | 'home';
+  homeVisitTime: string;
+  participantsCount: number;
+  participants: ParticipantsState[];
+  visitAddress: string;
+}
+
+const serviceOptions: string[] = [
+  'جلسة استشارية',
+  'خدمة علاجية',
+  'متابعة شهرية',
+  'زيارة منزلية',
+];
+
+const periodOptions: { value: BookingFormState['period']; label: string }[] = [
+  { value: 'morning', label: 'الفترة الصباحية' },
+  { value: 'afternoon', label: 'الفترة المسائية' },
+  { value: 'evening', label: 'الفترة الليلية' },
+];
+
+const buildParticipants = (count: number): ParticipantsState[] => {
+  return Array.from({ length: count }, (_, index) => ({
+    id: index,
+    name: '',
+    age: '',
+    note: '',
+  }));
+};
+
+const BookingForm: React.FC<BookingFormProps> = ({
+  onSubmitBooking,
+  onShowTicketInDashboard,
+}) => {
+  const client = useClientProfile();
+
+  const [formState, setFormState] = useState<BookingFormState>({
+    service: serviceOptions[0],
+    date: '',
+    period: 'morning',
+    visitType: 'center',
+    homeVisitTime: '',
+    participantsCount: 1,
+    participants: buildParticipants(1),
+    visitAddress: '',
+  });
+
+  const [isTicketOpen, setIsTicketOpen] = useState(false);
+
+  const visibleParticipants = useMemo(() => {
+    if (formState.participants.length === formState.participantsCount) {
+      return formState.participants;
+    }
+
+    const next = buildParticipants(formState.participantsCount);
+    return next.map((participant, index) => ({
+      ...participant,
+      ...formState.participants[index],
+    }));
+  }, [formState.participants, formState.participantsCount]);
+
+  const updateField = <K extends keyof BookingFormState>(key: K, value: BookingFormState[K]) => {
+    setFormState((prev) => ({
+      ...prev,
+      [key]: value,
+      ...(key === 'participantsCount'
+        ? {
+            participants: buildParticipants(value as number).map((participant, index) => ({
+              ...participant,
+              ...prev.participants[index],
+            })),
+          }
+        : null),
+    }));
+  };
+
+  const updateParticipant = (index: number, key: keyof ParticipantDetail, value: string) => {
+    setFormState((prev) => {
+      const nextParticipants = [...visibleParticipants];
+      nextParticipants[index] = {
+        ...nextParticipants[index],
+        [key]: value,
+      } as ParticipantsState;
+
+      return {
+        ...prev,
+        participants: nextParticipants,
+      };
+    });
+  };
+
+  const buildTicketDetails = (): BookingTicketDetails => ({
+    service: formState.service,
+    date: formState.date,
+    period: formState.period,
+    visitType: formState.visitType,
+    homeVisitTime: formState.visitType === 'home' ? formState.homeVisitTime : undefined,
+    visitAddress: formState.visitType === 'home' ? formState.visitAddress : undefined,
+    participants:
+      formState.visitType === 'home'
+        ? visibleParticipants.map(({ name, age, note }) => ({
+            name,
+            age,
+            note,
+          }))
+        : [],
+  });
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const ticket = buildTicketDetails();
+    onSubmitBooking?.(ticket);
+    setIsTicketOpen(true);
+  };
+
+  const handleOpenDashboard = () => {
+    const ticket = buildTicketDetails();
+    onShowTicketInDashboard?.(ticket);
+    setIsTicketOpen(false);
+  };
+
+  return (
+    <>
+      <form className={styles.form} onSubmit={handleSubmit}>
+        <fieldset className={styles.fieldset} disabled>
+          <legend>بيانات العميل</legend>
+          <label className={styles.label}>
+            الاسم الكامل
+            <input type="text" value={client.name} readOnly />
+          </label>
+          <label className={styles.label}>
+            البريد الإلكتروني
+            <input type="email" value={client.email} readOnly />
+          </label>
+          <label className={styles.label}>
+            رقم الجوال
+            <input type="tel" value={client.phone} readOnly />
+          </label>
+        </fieldset>
+
+        <fieldset className={styles.fieldset}>
+          <legend>تفاصيل الحجز</legend>
+
+          <label className={styles.label}>
+            نوع الخدمة
+            <select
+              value={formState.service}
+              onChange={(event) => updateField('service', event.target.value)}
+            >
+              {serviceOptions.map((option) => (
+                <option value={option} key={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className={styles.label}>
+            التاريخ
+            <input
+              type="date"
+              value={formState.date}
+              onChange={(event) => updateField('date', event.target.value)}
+              required
+            />
+          </label>
+
+          <label className={styles.label}>
+            الفترة الزمنية
+            <select
+              value={formState.period}
+              onChange={(event) => updateField('period', event.target.value as BookingFormState['period'])}
+            >
+              {periodOptions.map((period) => (
+                <option value={period.value} key={period.value}>
+                  {period.label}
+                </option>
+              ))}
+            </select>
+          </label>
+        </fieldset>
+
+        <fieldset className={styles.fieldset}>
+          <legend>طريقة الحضور</legend>
+          <div className={styles.radioGroup}>
+            <label>
+              <input
+                type="radio"
+                name="visitType"
+                value="center"
+                checked={formState.visitType === 'center'}
+                onChange={() => updateField('visitType', 'center')}
+              />
+              زيارة المركز
+            </label>
+            <label>
+              <input
+                type="radio"
+                name="visitType"
+                value="home"
+                checked={formState.visitType === 'home'}
+                onChange={() => updateField('visitType', 'home')}
+              />
+              زيارة منزلية
+            </label>
+          </div>
+
+          {formState.visitType === 'home' && (
+            <div className={styles.homeOptions}>
+              <label className={styles.label}>
+                توقيت الزيارة
+                <input
+                  type="time"
+                  value={formState.homeVisitTime}
+                  onChange={(event) => updateField('homeVisitTime', event.target.value)}
+                  required
+                />
+              </label>
+
+              <label className={styles.label}>
+                عنوان الزيارة
+                <input
+                  type="text"
+                  value={formState.visitAddress}
+                  onChange={(event) => updateField('visitAddress', event.target.value)}
+                  placeholder="اسم الحي، الشارع، رقم المبنى"
+                  required
+                />
+              </label>
+
+              <label className={styles.label}>
+                عدد الأفراد
+                <input
+                  type="number"
+                  min={1}
+                  max={10}
+                  value={formState.participantsCount}
+                  onChange={(event) => updateField('participantsCount', Number(event.target.value))}
+                />
+              </label>
+
+              <div className={styles.participants}>
+                {visibleParticipants.map((participant, index) => (
+                  <div key={participant.id} className={styles.participantCard}>
+                    <h4>الفرد {index + 1}</h4>
+                    <label className={styles.label}>
+                      الاسم
+                      <input
+                        type="text"
+                        value={participant.name}
+                        onChange={(event) => updateParticipant(index, 'name', event.target.value)}
+                        placeholder="الاسم الكامل"
+                        required
+                      />
+                    </label>
+                    <label className={styles.label}>
+                      العمر
+                      <input
+                        type="number"
+                        min={0}
+                        value={participant.age ?? ''}
+                        onChange={(event) => updateParticipant(index, 'age', event.target.value)}
+                        placeholder="مثال: 34"
+                      />
+                    </label>
+                    <label className={styles.label}>
+                      ملاحظات إضافية
+                      <textarea
+                        value={participant.note ?? ''}
+                        onChange={(event) => updateParticipant(index, 'note', event.target.value)}
+                        rows={2}
+                        placeholder="احتياجات خاصة، تفاصيل إضافية"
+                      />
+                    </label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </fieldset>
+
+        <div className={styles.actions}>
+          <button type="submit" className={styles.submitButton}>
+            إصدار التذكرة
+          </button>
+        </div>
+      </form>
+
+      <BookingTicketModal
+        isOpen={isTicketOpen}
+        onClose={() => setIsTicketOpen(false)}
+        onOpenDashboard={handleOpenDashboard}
+        booking={buildTicketDetails()}
+        client={client}
+      />
+    </>
+  );
+};
+
+export default BookingForm;
diff --git a/src/components/booking/BookingTicketModal.module.css b/src/components/booking/BookingTicketModal.module.css
new file mode 100644
index 0000000..dbadafd
--- /dev/null
+++ b/src/components/booking/BookingTicketModal.module.css
@@ -0,0 +1,101 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(20, 24, 32, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.ticket {
+  background: #fffef9;
+  border-radius: 16px;
+  width: min(560px, 92vw);
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.25);
+  overflow: hidden;
+  color: #13213c;
+  font-family: 'Tajawal', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.header {
+  padding: 24px 28px 20px;
+  border-bottom: 2px dotted rgba(19, 33, 60, 0.28);
+}
+
+.title {
+  margin: 0;
+  font-size: 1.35rem;
+  font-weight: 700;
+}
+
+.subtitle {
+  margin-top: 6px;
+  font-size: 0.95rem;
+  color: rgba(19, 33, 60, 0.7);
+}
+
+.body {
+  padding: 24px 28px;
+  display: grid;
+  gap: 20px;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.sectionTitle {
+  font-size: 0.95rem;
+  margin: 0 0 8px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.detail {
+  margin: 6px 0;
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+.footer {
+  padding: 18px 28px 24px;
+  border-top: 1px solid rgba(19, 33, 60, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.actionButton {
+  background: linear-gradient(130deg, #2f80ed, #56ccf2);
+  border: none;
+  color: #ffffff;
+  font-weight: 600;
+  padding: 10px 18px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: box-shadow 0.2s ease;
+}
+
+.actionButton:hover {
+  box-shadow: 0 12px 24px rgba(47, 128, 237, 0.35);
+}
+
+.closeButton {
+  background: transparent;
+  border: none;
+  color: rgba(19, 33, 60, 0.65);
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.participantCard {
+  background: rgba(47, 128, 237, 0.08);
+  border-radius: 12px;
+  padding: 12px 16px;
+  margin-top: 10px;
+}
+
+.participantCard strong {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
diff --git a/src/components/booking/BookingTicketModal.tsx b/src/components/booking/BookingTicketModal.tsx
new file mode 100644
index 0000000..f259768
--- /dev/null
+++ b/src/components/booking/BookingTicketModal.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import styles from './BookingTicketModal.module.css';
+import { ClientProfile } from '../../context/ClientContext';
+
+export interface ParticipantDetail {
+  name: string;
+  age?: string;
+  note?: string;
+}
+
+export interface BookingTicketDetails {
+  service: string;
+  date: string;
+  period: string;
+  visitType: 'center' | 'home';
+  homeVisitTime?: string;
+  participants: ParticipantDetail[];
+  visitAddress?: string;
+}
+
+export interface BookingTicketModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onOpenDashboard: () => void;
+  booking: BookingTicketDetails;
+  client: ClientProfile;
+}
+
+const periodLabels: Record<string, string> = {
+  morning: 'الفترة الصباحية',
+  afternoon: 'الفترة المسائية',
+  evening: 'الفترة الليلية',
+};
+
+export const BookingTicketModal: React.FC<BookingTicketModalProps> = ({
+  isOpen,
+  onClose,
+  onOpenDashboard,
+  booking,
+  client,
+}) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  const readablePeriod = periodLabels[booking.period] ?? booking.period;
+
+  return (
+    <div className={styles.overlay} role="dialog" aria-modal="true">
+      <article className={styles.ticket}>
+        <header className={styles.header}>
+          <h2 className={styles.title}>تأكيد الحجز</h2>
+          <p className={styles.subtitle}>
+            تم إنشاء تذكرتك بنجاح. احتفظ بالبيانات التالية للرجوع إليها لاحقًا.
+          </p>
+        </header>
+
+        <section className={styles.body}>
+          <div>
+            <h3 className={styles.sectionTitle}>بيانات العميل</h3>
+            <p className={styles.detail}>الاسم: {client.name}</p>
+            <p className={styles.detail}>رقم الجوال: {client.phone}</p>
+            {client.email && <p className={styles.detail}>البريد الإلكتروني: {client.email}</p>}
+            {booking.visitType === 'home' && booking.visitAddress && (
+              <p className={styles.detail}>العنوان: {booking.visitAddress}</p>
+            )}
+          </div>
+
+          <div>
+            <h3 className={styles.sectionTitle}>معلومات الخدمة</h3>
+            <p className={styles.detail}>الخدمة: {booking.service}</p>
+            <p className={styles.detail}>التاريخ: {booking.date}</p>
+            <p className={styles.detail}>الفترة: {readablePeriod}</p>
+            {booking.visitType === 'home' && booking.homeVisitTime && (
+              <p className={styles.detail}>موعد الزيارة المنزلية: {booking.homeVisitTime}</p>
+            )}
+          </div>
+
+          {booking.participants.length > 0 && (
+            <div>
+              <h3 className={styles.sectionTitle}>تفاصيل الأفراد</h3>
+              {booking.participants.map((participant, index) => (
+                <div key={index} className={styles.participantCard}>
+                  <strong>الفرد {index + 1}</strong>
+                  <p className={styles.detail}>الاسم: {participant.name || '—'}</p>
+                  {participant.age && <p className={styles.detail}>العمر: {participant.age}</p>}
+                  {participant.note && <p className={styles.detail}>ملاحظات: {participant.note}</p>}
+                </div>
+              ))}
+            </div>
+          )}
+        </section>
+
+        <footer className={styles.footer}>
+          <button type="button" className={styles.closeButton} onClick={onClose}>
+            إغلاق
+          </button>
+          <button type="button" className={styles.actionButton} onClick={onOpenDashboard}>
+            عرض التذكرة في الداشبورد
+          </button>
+        </footer>
+      </article>
+    </div>
+  );
+};
+
+export default BookingTicketModal;
diff --git a/src/context/ClientContext.tsx b/src/context/ClientContext.tsx
new file mode 100644
index 0000000..727a7ab
--- /dev/null
+++ b/src/context/ClientContext.tsx
@@ -0,0 +1,32 @@
+import { createContext, ReactNode, useContext } from 'react';
+
+export interface ClientProfile {
+  id?: string;
+  name: string;
+  email: string;
+  phone: string;
+  address?: string;
+}
+
+const ClientContext = createContext<ClientProfile | null>(null);
+
+export interface ClientProviderProps {
+  client: ClientProfile;
+  children: ReactNode;
+}
+
+export const ClientProvider = ({ client, children }: ClientProviderProps) => {
+  return <ClientContext.Provider value={client}>{children}</ClientContext.Provider>;
+};
+
+export const useClientProfile = () => {
+  const client = useContext(ClientContext);
+
+  if (!client) {
+    throw new Error('useClientProfile must be used inside a ClientProvider');
+  }
+
+  return client;
+};
+
+export default ClientContext;
diff --git a/src/types/css.d.ts b/src/types/css.d.ts
new file mode 100644
index 0000000..3d673e2
--- /dev/null
+++ b/src/types/css.d.ts
@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}