schedule

src/app/[name]/(Main)/about/AboutPage.tsx

@@ -7,11 +7,11 @@ import { TabHeader } from '@/components/tab/TabHeader';
 import Comment from '@/components/utils/Comment';
 import RateBar from '@/components/utils/RateBar';
 import useToggle from '@/hooks/helpers/useToggle';
-import { CallCalling, Gallery, InfoCircle, Instagram, Location, Star1, Whatsapp } from 'iconsax-react';
+import { ArrowDown2, CallCalling, Clock, Gallery, InfoCircle, Instagram, Location, Star1, Whatsapp } from 'iconsax-react';
 import { useQueryState } from 'next-usequerystate';
 import Image from 'next/image';
 import React from 'react'
-import { useGetAbout, useGetReviews } from './hooks/useAboutData';
+import { useGetAbout, useGetReviews, useGetSchedules } from './hooks/useAboutData';
 
 const sortings = [
   'جدیدترین',
@@ -22,16 +22,52 @@ function AboutPage() {
 
   const { data: aboutData } = useGetAbout();
   const { data: reviewsData } = useGetReviews();
+  const { data: schedulesData } = useGetSchedules();
   const [sorting, setSorting] = useQueryState('sortBy', { defaultValue: '0' });
   const { state: sortingModal, toggle: toggleSortingModal, set: setSortingModal } = useToggle();
 
   const restaurant = aboutData?.data;
+  const schedules = schedulesData?.data || [];
 
   const changeSorting = (index: number) => {
     setSorting(() => String(index));
     setSortingModal(false);
   }
 
+  const formatTime = (time: string): string => {
+    return time.substring(0, 5);
+  };
+
+  const getDayName = (weekDay: number): string => {
+    const days = ['یکشنبه', 'دوشنبه', 'سه‌شنبه', 'چهارشنبه', 'پنج‌شنبه', 'جمعه', 'شنبه'];
+    return days[weekDay] || '';
+  };
+
+  const groupSchedulesByDay = () => {
+    const grouped: Record<number, typeof schedules> = {};
+    schedules
+      .filter(schedule => schedule.isActive)
+      .forEach(schedule => {
+        if (!grouped[schedule.weekDay]) {
+          grouped[schedule.weekDay] = [];
+        }
+        grouped[schedule.weekDay].push(schedule);
+      });
+    return grouped;
+  };
+
+  const getTodaySchedule = () => {
+    const today = new Date().getDay();
+    const todaySchedules = schedules.filter(schedule =>
+      schedule.isActive && schedule.weekDay === today
+    );
+    if (todaySchedules.length > 0) {
+      const firstSchedule = todaySchedules[0];
+      return `${formatTime(firstSchedule.openTime)} تا ${formatTime(firstSchedule.closeTime)}`;
+    }
+    return null;
+  };
+
   const firstTab = () => {
     if (!restaurant) return null;
 
@@ -119,6 +155,47 @@ function AboutPage() {
             )}
           </section>
         )}
+
+        {schedules.length > 0 && getTodaySchedule() && (
+          <section
+            aria-label='ساعات کاری'
+            className="bg-container rounded-container shadow-container py-6 px-4 mt-4 flex justify-between items-center">
+            <div className="flex items-center gap-2 justify-start">
+              <Clock size={16} className='stroke-disabled-text' />
+              <div className='text-sm2 font-medium leading-5 mt-0.5 text-[#8C90A3]'>باز</div>
+              <div className='size-1.5 bg-[#D9D9D9] rounded-full'></div>
+              <div className='text-sm2 mt-0.5'>امروز از ساعت {getTodaySchedule()}</div>
+            </div>
+            <div className="">
+              <ArrowDown2 size={16} className='stroke-[#292D32]' />
+            </div>
+          </section>
+        )}
+
+        {schedules.length > 0 && (
+          <section>
+            {Object.entries(groupSchedulesByDay())
+              .sort(([a], [b]) => Number(a) - Number(b))
+              .map(([weekDay, daySchedules]) => (
+                <div
+                  key={weekDay}
+                  style={{ boxShadow: '0px 0px 14px 0px #0000000F' }}
+                  className="bg-[#F6F6FA] dark:bg-border rounded-container leading-5 py-6 px-4 mt-4 flex justify-between items-center">
+                  <div className="text-sm2">
+                    {getDayName(Number(weekDay))}
+                  </div>
+                  <div className='text-sm2 font-light'>
+                    {daySchedules.map((schedule, index) => (
+                      <span key={schedule.id}>
+                        {formatTime(schedule.openTime)} - {formatTime(schedule.closeTime)}
+                        {index < daySchedules.length - 1 && '، '}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              ))}
+          </section>
+        )}
       </section>
     )
   }

src/app/[name]/(Main)/about/hooks/useAboutData.ts

@@ -21,3 +21,13 @@ export const useGetReviews = () => {
     retry: false,
   });
 };
+
+export const useGetSchedules = () => {
+  const { name } = useParams<{ name: string }>();
+  return useQuery({
+    queryKey: ["schedules"],
+    queryFn: () => api.getSchedules(name),
+    enabled: !!name,
+    retry: false,
+  });
+};

src/app/[name]/(Main)/about/service/AboutService.ts

@@ -1,5 +1,9 @@
 import { api } from "@/config/axios";
-import { AboutResponse, ReviewsResponse } from "../types/Types";
+import {
+  AboutResponse,
+  ReviewsResponse,
+  SchedulesResponse,
+} from "../types/Types";
 
 export const getAbout = async (name: string): Promise<AboutResponse> => {
   const { data } = await api.get<AboutResponse>(`/public/restaurants/${name}`);
@@ -12,3 +16,12 @@ export const getReviews = async (name: string): Promise<ReviewsResponse> => {
   );
   return data;
 };
+
+export const getSchedules = async (
+  name: string
+): Promise<SchedulesResponse> => {
+  const { data } = await api.get<SchedulesResponse>(
+    `/public/schedules/restaurant/${name}`
+  );
+  return data;
+};

src/app/[name]/(Main)/about/types/Types.ts

@@ -92,5 +92,18 @@ export interface Review {
   isApproved: boolean;
 }
 
+export interface Schedule {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  weekDay: number;
+  openTime: string;
+  closeTime: string;
+  isActive: boolean;
+  restId: string;
+}
+
 export type AboutResponse = BaseResponse<Restaurant>;
 export type ReviewsResponse = BaseResponse<Review[]>;
+export type SchedulesResponse = BaseResponse<Schedule[]>;