feat: Implement resource-based appointment booking flow

- Updated DoctorPage component to accept bookingResources prop for appointment list.
- Added serviceQuery function to serialize service item UUIDs for API requests.
- Introduced new API endpoints for fetching booking resources and resource slots.
- Enhanced tests for new resource-based booking functionality, including resource selection and service availability.
- Created ResourceSelect component for selecting appointment types, including doctor and resource options.
- Updated appointment submission logic to include resource_uuid in payload when applicable.
- Ensured UI reflects changes in booking flow without disrupting existing doctor-centric experience.

components/appointment/date/Time/SelectDatePicker.js

@@ -1,7 +1,15 @@
 import DatePicker from "@/app/component/date/datePicker";
 
-function SelectDatePicker({ setDate, disabledDates, clinicUuid }) {
-  return <DatePicker setDate={setDate} disabledDates={disabledDates} clinicUuid={clinicUuid} />;
+function SelectDatePicker({ setDate, disabledDates, clinicUuid, resourceUuid = null, selectedServiceUuids = [] }) {
+  return (
+    <DatePicker
+      setDate={setDate}
+      disabledDates={disabledDates}
+      clinicUuid={clinicUuid}
+      resourceUuid={resourceUuid}
+      selectedServiceUuids={selectedServiceUuids}
+    />
+  );
 }
 
 export default SelectDatePicker;

components/appointment/date/Time/index.js

@@ -1,12 +1,18 @@
 import SelectDatePicker from "./SelectDatePicker";
 
-function Time({ isStep, setDate, disabledDates, clinicUuid }) {
+function Time({ isStep, setDate, disabledDates, clinicUuid, resourceUuid = null, selectedServiceUuids = [] }) {
   return (
     <div className="flex relative mt-[24px] flex-col items-start gap-[19px] justify-start">
       <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
         1. انتخاب روز
       </p>
-      <SelectDatePicker setDate={setDate} disabledDates={disabledDates} clinicUuid={clinicUuid} />
+      <SelectDatePicker
+        setDate={setDate}
+        disabledDates={disabledDates}
+        clinicUuid={clinicUuid}
+        resourceUuid={resourceUuid}
+        selectedServiceUuids={selectedServiceUuids}
+      />
       {!isStep && (
         <div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
       )}

components/appointment/date/hour/index.js

@@ -1,6 +1,6 @@
 import DateTime from "@/app/component/date/dateTime";
 
-function Hour({ doctor, setStep, date, isStep, setSelectedSlot, setSelectedDate, serviceMode = false, selectedServiceUuids = [], clinicUuid = null, selectedLocation = null }) {
+function Hour({ doctor, setStep, date, isStep, setSelectedSlot, setSelectedDate, serviceMode = false, selectedServiceUuids = [], clinicUuid = null, resourceUuid = null, selectedLocation = null }) {
   return (
     <div className="flex relative mt-[24px] flex-col items-start gap-[12px] justify-start">
       <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
@@ -15,6 +15,7 @@ function Hour({ doctor, setStep, date, isStep, setSelectedSlot, setSelectedDate,
         serviceMode={serviceMode}
         selectedServiceUuids={selectedServiceUuids}
         clinicUuid={clinicUuid}
+        resourceUuid={resourceUuid}
         selectedLocation={selectedLocation}
       />
       {!isStep && (

components/appointment/date/index.js

@@ -13,7 +13,9 @@ function Date({
   onChangeService,
   selectedLocation = null,
   clinicUuid = null,
+  resourceUuid = null,
   onChangeLocation,
+  onChangeResource,
   onDateChange,
   closedOnDate = false,
 }) {
@@ -29,7 +31,7 @@ function Date({
       <div
         className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] bg-transparent lg:bg-[#FFF]"
       >
-        {(onChangeLocation || (serviceMode && onChangeService)) && (
+        {(onChangeLocation || onChangeResource || (serviceMode && onChangeService)) && (
           <div className="mb-3 flex flex-wrap items-center gap-x-4 gap-y-1">
             {onChangeLocation && (
               <button
@@ -40,6 +42,15 @@ function Date({
                 ← تغییر محل{selectedLocation?.title ? ` (${selectedLocation.title})` : ""}
               </button>
             )}
+            {onChangeResource && (
+              <button
+                type="button"
+                onClick={onChangeResource}
+                className="text-[13px] text-[#5559CE] hover:underline"
+              >
+                ← تغییر نوع نوبت
+              </button>
+            )}
             {serviceMode && onChangeService && (
               <button
                 type="button"
@@ -72,6 +83,8 @@ function Date({
           isStep
           disabledDates={disabledDates}
           clinicUuid={clinicUuid}
+          resourceUuid={resourceUuid}
+          selectedServiceUuids={selectedServiceUuids}
         />
         <Hour
           isStep
@@ -83,6 +96,7 @@ function Date({
           serviceMode={serviceMode}
           selectedServiceUuids={selectedServiceUuids}
           clinicUuid={clinicUuid}
+          resourceUuid={resourceUuid}
           selectedLocation={selectedLocation}
         />
       </div>