From 866b3988fcfb5452321367d36d07f82dc9a13b3a Mon Sep 17 00:00:00 2001
From: ttiimmothy <dinosauli2006@gmail.com>
Date: Thu, 23 Nov 2023 23:03:34 -0500
Subject: [PATCH] feat: create restaurant

---
 .env.example                                  |   1 -
 src/api/photo/photoApiIndex.ts                |   3 +-
 src/api/restaurant/restaurantApiIndex.ts      |   5 +-
 .../restaurantOwner/RestaurantOwnerType.ts    |   4 +
 .../restaurantOwnerApiIndex.ts                |  12 +
 src/api/review/reviewApiIndex.ts              |   3 +-
 src/components/utils/cards/RestaurantCard.tsx |  12 +-
 src/components/utils/inputs/NumberInput.tsx   |   6 +-
 .../utils/inputs/OpeningHoursInput.tsx        |   4 +-
 src/components/utils/inputs/SelectInput.tsx   |   4 +-
 .../utils/modals/CreateReviewModal.tsx        |   6 +-
 .../utils/modals/UploadImageModal.tsx         |   1 -
 src/pages/restaurant/CreateRestaurantPage.tsx | 601 ++++++++++--------
 src/redux/photo/photoSlice.ts                 |   3 -
 .../restaurantOwner/restaurantOwnerSlice.ts   |  24 +
 src/redux/review/reviewSlice.ts               |   9 +-
 src/store.ts                                  |   5 +
 src/utils/uploadImageService.ts               |  29 +-
 tailwind.config.js                            |   6 +
 19 files changed, 427 insertions(+), 311 deletions(-)
 create mode 100644 src/api/restaurantOwner/RestaurantOwnerType.ts
 create mode 100644 src/api/restaurantOwner/restaurantOwnerApiIndex.ts
 create mode 100644 src/redux/restaurantOwner/restaurantOwnerSlice.ts

diff --git a/.env.example b/.env.example
index 58832db..4ce3a03 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,4 @@
 REACT_APP_API_URL=your-backend-url
 REACT_APP_MAPBOX_TOKEN=your-mapbox-app-token
-REACT_APP_IMAGE_PREFIX=your-supabase-storage-image-folder-name
 REACT_APP_SUPABASE_BUCKET_PATH=your-supabae-bucket-path
 REACT_APP_SUPABASE_SECRET_API_KEY=your-supabase-secret-api-key
\ No newline at end of file
diff --git a/src/api/photo/photoApiIndex.ts b/src/api/photo/photoApiIndex.ts
index 9a533e4..8cdc323 100644
--- a/src/api/photo/photoApiIndex.ts
+++ b/src/api/photo/photoApiIndex.ts
@@ -18,14 +18,13 @@ export const getMenuPhotos = async (
 };
 
 export const createMenuPhoto = async (
-  imagePrefix: string,
   restaurantID: string,
   imageName: string,
   photoCategory: string
 ): Promise<MenuPhoto> => {
   return apiClient.post(
     "",
-    { imagePrefix, restaurantID, imageName },
+    { restaurantID, imageName },
     { params: { photoCategory } }
   );
 };
diff --git a/src/api/restaurant/restaurantApiIndex.ts b/src/api/restaurant/restaurantApiIndex.ts
index 5a33a5a..c56dbb6 100644
--- a/src/api/restaurant/restaurantApiIndex.ts
+++ b/src/api/restaurant/restaurantApiIndex.ts
@@ -22,7 +22,8 @@ export const getRestaurantDetail = async (
 };
 
 export const createRestaurant = async (
-  restaurant: CreateRestaurantType
+  restaurant: CreateRestaurantType,
+  fileExtension?: string
 ): Promise<Restaurant> => {
-  return apiClient.post("", restaurant);
+  return apiClient.post("", { restaurant, fileExtension });
 };
diff --git a/src/api/restaurantOwner/RestaurantOwnerType.ts b/src/api/restaurantOwner/RestaurantOwnerType.ts
new file mode 100644
index 0000000..b889f27
--- /dev/null
+++ b/src/api/restaurantOwner/RestaurantOwnerType.ts
@@ -0,0 +1,4 @@
+export type RestaurantOwner = {
+  user_id: string;
+  restaurant_id: string;
+};
diff --git a/src/api/restaurantOwner/restaurantOwnerApiIndex.ts b/src/api/restaurantOwner/restaurantOwnerApiIndex.ts
new file mode 100644
index 0000000..06a2955
--- /dev/null
+++ b/src/api/restaurantOwner/restaurantOwnerApiIndex.ts
@@ -0,0 +1,12 @@
+import { AxiosApiClientBuilder } from "../axiosIndex";
+import { RestaurantOwner } from "./RestaurantOwnerType";
+
+const apiClient = new AxiosApiClientBuilder()
+  .withResourceName("/restaurant/owner")
+  .build();
+
+export const createRestaurantOwner = async (
+  restaurantOwner: RestaurantOwner
+): Promise<RestaurantOwner> => {
+  return apiClient.post("", restaurantOwner);
+};
diff --git a/src/api/review/reviewApiIndex.ts b/src/api/review/reviewApiIndex.ts
index 8b6830d..c1722d4 100644
--- a/src/api/review/reviewApiIndex.ts
+++ b/src/api/review/reviewApiIndex.ts
@@ -17,14 +17,13 @@ export const getReviewsByRestaurantID = async (
 
 export const createReview = async (
   createReviewDto: CreateReviewDto,
-  imagePrefix: string,
   restaurantID: string,
   photoCategory: string,
   fileExtension?: string
 ): Promise<Review> => {
   return apiClient.post(
     "",
-    { createReviewDto, imagePrefix, restaurantID, fileExtension },
+    { createReviewDto, restaurantID, fileExtension },
     { params: { photoCategory } }
   );
 };
diff --git a/src/components/utils/cards/RestaurantCard.tsx b/src/components/utils/cards/RestaurantCard.tsx
index 360d1e0..859a72a 100644
--- a/src/components/utils/cards/RestaurantCard.tsx
+++ b/src/components/utils/cards/RestaurantCard.tsx
@@ -21,11 +21,13 @@ const RestaurantCard: React.FC<Restaurant> = (props: Restaurant) => {
       className="rounded-md shadow-lg hover:bg-slate-200"
     >
       <div className="w-full h-48 overflow-hidden">
-        <img
-          src={props.cover_image_url}
-          alt={props.name}
-          className="w-[100%] h-[100%] object-cover rounded-tl-md rounded-tr-md hover:scale-110 duration-300"
-        />
+        {props.cover_image_url && (
+          <img
+            src={props.cover_image_url}
+            alt={props.name}
+            className="w-[100%] h-[100%] object-cover rounded-tl-md rounded-tr-md hover:scale-110 duration-300"
+          />
+        )}
       </div>
       <div className="p-4">
         <RestaurantRow text={props.name} icon={<IoRestaurant />} />
diff --git a/src/components/utils/inputs/NumberInput.tsx b/src/components/utils/inputs/NumberInput.tsx
index 92c3b4b..5729237 100644
--- a/src/components/utils/inputs/NumberInput.tsx
+++ b/src/components/utils/inputs/NumberInput.tsx
@@ -18,10 +18,10 @@ const NumberInput: React.FC<NumberInputProps> = ({
   max,
 }) => {
   return (
-    <div className="flex flex-col">
-      <label>{label}</label>
+    <div className="flex flex-col gap-1">
+      <label className="text-sm font-semibold">{label}</label>
       <input
-        className="border border-gray-400 rounded-md p-2 mt-1"
+        className="border border-gray-400 rounded-md p-2"
         type="number"
         step={step}
         placeholder={placeholder}
diff --git a/src/components/utils/inputs/OpeningHoursInput.tsx b/src/components/utils/inputs/OpeningHoursInput.tsx
index 3adf280..ddbe667 100644
--- a/src/components/utils/inputs/OpeningHoursInput.tsx
+++ b/src/components/utils/inputs/OpeningHoursInput.tsx
@@ -15,8 +15,8 @@ const OpeningHoursInput: React.FC<OpeningHoursInputProps> = ({
   onChange,
 }) => {
   return (
-    <div className="flex flex-col">
-      <label>{label}</label>
+    <div className="flex flex-col gap-1">
+      <label className="text-sm font-semibold">{label}</label>
       <DatePicker
         placeholderText={placeholder}
         onChange={(date, e: React.ChangeEvent<HTMLInputElement>) => onChange(e)}
diff --git a/src/components/utils/inputs/SelectInput.tsx b/src/components/utils/inputs/SelectInput.tsx
index 3541120..9ebbda4 100644
--- a/src/components/utils/inputs/SelectInput.tsx
+++ b/src/components/utils/inputs/SelectInput.tsx
@@ -21,8 +21,8 @@ const SelectInput: React.FC<SelectInputProps> = ({
   optionList,
 }) => {
   return (
-    <div className="flex flex-col">
-      <label>{label}</label>
+    <div className="flex flex-col gap-1">
+      <label className="text-sm font-semibold">{label}</label>
       <Select
         isClearable
         placeholder={placeholder}
diff --git a/src/components/utils/modals/CreateReviewModal.tsx b/src/components/utils/modals/CreateReviewModal.tsx
index d9009a3..56a92d0 100644
--- a/src/components/utils/modals/CreateReviewModal.tsx
+++ b/src/components/utils/modals/CreateReviewModal.tsx
@@ -24,14 +24,14 @@ interface CreateReviewModalProps {
   restaurant_id?: string;
 }
 
-export type ReviewForm = {
+export interface ReviewForm {
   rating: number;
   title: string;
   visit_date: string;
   content: string;
   spending: number;
   photo?: any;
-};
+}
 
 const CreateReviewModal: React.FC<CreateReviewModalProps> = (props) => {
   const navigate = useNavigate();
@@ -63,7 +63,6 @@ const CreateReviewModal: React.FC<CreateReviewModalProps> = (props) => {
               user_id: user?.user_id,
               visit_date: new Date(review.visit_date),
             },
-            process.env.REACT_APP_IMAGE_PREFIX as string,
             props.restaurant_id as string,
             "Review",
             fileTypeToExtension[review.photo?.type]
@@ -93,7 +92,6 @@ const CreateReviewModal: React.FC<CreateReviewModalProps> = (props) => {
                 user_id: user?.user_id,
                 visit_date: new Date(review.visit_date),
               },
-              imagePrefix: process.env.REACT_APP_IMAGE_PREFIX as string,
               restaurantID: props.restaurant_id as string,
               photoCategory: "Review",
             })
diff --git a/src/components/utils/modals/UploadImageModal.tsx b/src/components/utils/modals/UploadImageModal.tsx
index 7273aac..39df3e2 100644
--- a/src/components/utils/modals/UploadImageModal.tsx
+++ b/src/components/utils/modals/UploadImageModal.tsx
@@ -59,7 +59,6 @@ const UploadImageModal: React.FC<UploadImageModalProps> = ({
 
         dispatch(
           createMenuPhotoThunk({
-            imagePrefix: process.env.REACT_APP_IMAGE_PREFIX as string,
             restaurantID: restaurant_id as string,
             imageName,
             photoCategory: "Menu",
diff --git a/src/pages/restaurant/CreateRestaurantPage.tsx b/src/pages/restaurant/CreateRestaurantPage.tsx
index 0f06975..5528ca5 100644
--- a/src/pages/restaurant/CreateRestaurantPage.tsx
+++ b/src/pages/restaurant/CreateRestaurantPage.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
@@ -5,24 +6,62 @@ import { Controller, useForm } from "react-hook-form";
 import { closeSnackbar, enqueueSnackbar } from "notistack";
 import DatePicker from "react-datepicker";
 
+import { createRestaurant } from "../../api/restaurant/restaurantApiIndex";
 import { AppDispatch, IRootState } from "../../store";
 import { getDishesThunk } from "../../redux/dish/dishSlice";
 import { getDistrictsThunk } from "../../redux/district/districtSlice";
 import { getPaymentMethodsThunk } from "../../redux/paymentMethod/paymentMethodSlice";
-import { createRestaurantThunk } from "../../redux/restaurant/restaurantSlice";
 import { createRestaurantPaymentMethodThunk } from "../../redux/restaurantPaymentMethod/restaurantPaymentMethodSlice";
 import { createRestaurantDishThunk } from "../../redux/restaurantDish/restaurantDishSlice";
 import TextareaInput from "../../components/utils/inputs/TextareaInput";
 import TextInput from "../../components/utils/inputs/TextInput";
 import SelectInput from "../../components/utils/inputs/SelectInput";
 import NumberInput from "../../components/utils/inputs/NumberInput";
+import FileInput from "../../components/utils/inputs/FileInput";
 import ErrorPage from "../error/ErrorPage";
 
 import "react-datepicker/dist/react-datepicker.css";
+import { createRestaurantOwnerThunk } from "../../redux/restaurantOwner/restaurantOwnerSlice";
+import { uploadImage } from "../../utils/uploadImageService";
+import { fileTypeToExtension } from "../../utils/fileTypeToExtension";
+
+export interface RestaurantForm {
+  name: string;
+  address: string;
+  district_id: string;
+  latitude: number;
+  longitude: number;
+  postal_code: string;
+  phone: string;
+  intro: string;
+  startTime: Date | null;
+  endTime: Date | null;
+  dish_id: string;
+  payment_method_id: string;
+  photo?: any;
+  opening_hours?: string;
+  cover_image_url?: string;
+}
 
 const CreateRestaurantPage: React.FC = () => {
   const navigate = useNavigate();
-  const { handleSubmit, control } = useForm();
+  const { handleSubmit, control } = useForm({
+    defaultValues: {
+      name: "",
+      address: "",
+      district_id: "",
+      latitude: 0,
+      longitude: 0,
+      postal_code: "",
+      phone: "",
+      intro: "",
+      startTime: null,
+      endTime: null,
+      dish_id: "",
+      payment_method_id: "",
+      photo: "",
+    },
+  });
 
   const dispatch = useDispatch<AppDispatch>();
   const dishes = useSelector((state: IRootState) => state.dish.dishes);
@@ -33,9 +72,6 @@ const CreateRestaurantPage: React.FC = () => {
     (state: IRootState) => state.paymentMethod.paymentMethods
   );
   const user = useSelector((state: IRootState) => state.auth.currentUser);
-  const restaurantID = useSelector(
-    (state: IRootState) => state.restaurant.restaurant?.restaurant_id
-  );
 
   useEffect(() => {
     const fetchDishes = async () => {
@@ -59,19 +95,9 @@ const CreateRestaurantPage: React.FC = () => {
   }, [user?.role, dispatch]);
 
   const createNewRestaurant = async (
-    restaurant: {
-      name: string;
-      address: string;
-      district_id: string;
-      latitude: string;
-      longitude: string;
-      postal_code: string;
-      phone: string;
-      intro: string;
-      opening_hours: string;
-    },
-    start_time: string,
-    end_time: string,
+    restaurant: RestaurantForm,
+    start_time: Date,
+    end_time: Date,
     dish_id: string,
     payment_method_id: string
   ) => {
@@ -84,27 +110,71 @@ const CreateRestaurantPage: React.FC = () => {
       saturday: { from: start_time, to: end_time },
       sunday: { from: start_time, to: end_time },
     });
+    if (user?.user_id) {
+      if (restaurant.photo) {
+        const res = await createRestaurant(
+          {
+            name: restaurant.name,
+            address: restaurant.address,
+            district_id: restaurant.district_id,
+            latitude: restaurant.latitude.toString(),
+            longitude: restaurant.longitude.toString(),
+            postal_code: restaurant.postal_code,
+            phone: restaurant.phone,
+            intro: restaurant.intro,
+            opening_hours: restaurant.opening_hours,
+          },
+          fileTypeToExtension[restaurant.photo.type]
+        );
 
-    dispatch(createRestaurantThunk(restaurant));
+        if (res.restaurant_id) {
+          await uploadImage(
+            restaurant.photo,
+            res.restaurant_id as string,
+            "",
+            "",
+            "",
+            fileTypeToExtension[restaurant.photo.type]
+          );
 
-    if (restaurantID) {
-      dispatch(
-        createRestaurantDishThunk({
-          restaurant_id: restaurantID,
-          dish_id,
-        })
-      );
+          dispatch(
+            createRestaurantDishThunk({
+              restaurant_id: res.restaurant_id,
+              dish_id,
+            })
+          );
 
-      dispatch(
-        createRestaurantPaymentMethodThunk({
-          restaurant_id: restaurantID,
-          payment_method_id,
-        })
-      );
+          dispatch(
+            createRestaurantOwnerThunk({
+              user_id: user?.user_id,
+              restaurant_id: res.restaurant_id,
+            })
+          );
 
-      enqueueSnackbar("Restaurant added successfully!", { variant: "success" });
+          dispatch(
+            createRestaurantPaymentMethodThunk({
+              restaurant_id: res.restaurant_id,
+              payment_method_id,
+            })
+          );
+
+          enqueueSnackbar("Restaurant is added successfully", {
+            variant: "success",
+          });
+          setTimeout(() => {
+            navigate(`/restaurant/id/${res.restaurant_id}`);
+            navigate(0);
+          }, 1000);
+
+          setTimeout(() => {
+            closeSnackbar();
+          }, 2000);
+        }
+      }
+    } else {
+      enqueueSnackbar("You haven't login yet", { variant: "error" });
       setTimeout(() => {
-        navigate(`/restaurant/id/${restaurantID}`);
+        navigate(`/`);
         navigate(0);
       }, 1000);
 
@@ -116,249 +186,248 @@ const CreateRestaurantPage: React.FC = () => {
 
   return user?.role === "Admin" ? (
     <form
-      className="grid grid-cols-2 gap-3 px-6"
-      onSubmit={handleSubmit((restaurant) =>
-        createNewRestaurant(
-          restaurant as {
-            name: string;
-            address: string;
-            district_id: string;
-            latitude: string;
-            longitude: string;
-            postal_code: string;
-            phone: string;
-            intro: string;
-            opening_hours: string;
-          },
-          restaurant.startTime,
-          restaurant.endTime,
-          restaurant.dishId,
-          restaurant.paymentMethodId
-        )
-      )}
+      className="flex flex-col gap-3 px-6 w-120 mx-auto"
+      onSubmit={handleSubmit((restaurant) => {
+        if (restaurant.startTime && restaurant.endTime) {
+          createNewRestaurant(
+            restaurant,
+            restaurant.startTime,
+            restaurant.endTime,
+            restaurant.dish_id,
+            restaurant.payment_method_id
+          );
+        }
+      })}
     >
       <p className="col-span-2 text-center text-3xl font-bold">
         Create new restaurant
       </p>
-      <div className="col-span-1 justify-center p-3">
-        <Controller
-          name="name"
-          control={control}
-          defaultValue={""}
-          rules={{ required: true }}
-          render={({ field }) => (
-            <TextInput
-              label="Name"
-              type="text"
-              placeholder="Enter restaurant name"
-              value={field.value}
-              onChange={field.onChange}
-            />
-          )}
-        />
-        <Controller
-          name="address"
-          control={control}
-          defaultValue={""}
-          rules={{ required: true }}
-          render={({ field }) => (
-            <TextInput
-              label="Address"
-              type="text"
-              placeholder="Enter restaurant address"
-              value={field.value}
-              onChange={field.onChange}
+      <Controller
+        name="name"
+        control={control}
+        rules={{ required: true }}
+        render={({ field }) => (
+          <TextInput
+            label="Name"
+            type="text"
+            placeholder="Enter restaurant name"
+            value={field.value}
+            onChange={field.onChange}
+          />
+        )}
+      />
+      <Controller
+        name="address"
+        control={control}
+        rules={{ required: true }}
+        render={({ field }) => (
+          <TextInput
+            label="Address"
+            type="text"
+            placeholder="Enter restaurant address"
+            value={field.value}
+            onChange={field.onChange}
+          />
+        )}
+      />
+      <Controller
+        name="district_id"
+        control={control}
+        render={({ field }) => (
+          <SelectInput
+            label="District"
+            placeholder="Select district"
+            value={field.value}
+            onChange={field.onChange}
+            optionList={districts.map((district) => {
+              return { label: district.name, value: district.district_id };
+            })}
+          />
+        )}
+      />
+      <Controller
+        name="latitude"
+        control={control}
+        rules={{ required: true }}
+        render={({ field }) => (
+          <NumberInput
+            label="Latitude"
+            step="0.1"
+            placeholder="Enter restaurant latitude"
+            value={field.value}
+            onChange={field.onChange}
+          />
+        )}
+      />
+      <Controller
+        name="longitude"
+        control={control}
+        rules={{ required: true }}
+        render={({ field }) => (
+          <NumberInput
+            label="Longitude"
+            step="0.1"
+            placeholder="Enter restaurant longitude"
+            value={field.value}
+            onChange={field.onChange}
+          />
+        )}
+      />
+      <Controller
+        name="postal_code"
+        control={control}
+        rules={{ required: true }}
+        render={({ field }) => (
+          <TextInput
+            label="Postal Code"
+            type="text"
+            placeholder="Enter restaurant postal code"
+            value={field.value}
+            onChange={field.onChange}
+          />
+        )}
+      />
+      <Controller
+        name="phone"
+        control={control}
+        defaultValue={""}
+        rules={{ required: true }}
+        render={({ field }) => (
+          <TextInput
+            label="Phone"
+            type="text"
+            placeholder="Enter restaurant phone"
+            value={field.value}
+            onChange={field.onChange}
+          />
+        )}
+      />
+      <Controller
+        name="intro"
+        control={control}
+        rules={{ required: true }}
+        render={({ field }) => (
+          <TextareaInput
+            label="Introduction"
+            placeholder="Enter restaurant introduction"
+            value={field.value}
+            onChange={field.onChange}
+            className="border border-gray-400 p-2 rounded-md"
+          />
+        )}
+      />
+      <div className="flex flex-col gap-1">
+        <label className="text-sm font-semibold">Opening Hours</label>
+        <div className="flex gap-2 items-center max-w-full">
+          <div className="text-sm font-semibold">from</div>
+          <div>
+            <Controller
+              name="startTime"
+              control={control}
+              rules={{ required: true }}
+              render={({ field }) => {
+                return (
+                  <div className="grow w-44">
+                    <DatePicker
+                      placeholderText="Opening Hour"
+                      onChange={field.onChange}
+                      selected={field.value}
+                      showTimeSelect
+                      showTimeSelectOnly
+                      timeIntervals={15}
+                      timeCaption="Time"
+                      dateFormat="h:mm aa"
+                      className="border-2 rounded-md p-1 w-full"
+                    />
+                  </div>
+                );
+              }}
             />
-          )}
-        />
-        <Controller
-          name="districtId"
-          control={control}
-          defaultValue={""}
-          render={({ field }) => (
-            <SelectInput
-              label="District"
-              placeholder="Select district"
-              value={field.value}
-              onChange={field.onChange}
-              optionList={districts.map((district) => {
-                return { label: district.name, value: district.district_id };
-              })}
-            />
-          )}
-        />
-        <Controller
-          name="latitude"
-          control={control}
-          defaultValue={""}
-          rules={{ required: true }}
-          render={({ field }) => (
-            <NumberInput
-              label="Latitude"
-              step="0.0001"
-              placeholder="Enter restaurant latitude"
-              value={field.value}
-              onChange={field.onChange}
-            />
-          )}
-        />
-        <Controller
-          name="longitude"
-          control={control}
-          defaultValue={""}
-          rules={{ required: true }}
-          render={({ field }) => (
-            <NumberInput
-              label="Longitude"
-              step="0.0001"
-              placeholder="Enter restaurant longitude"
-              value={field.value}
-              onChange={field.onChange}
-            />
-          )}
-        />
-        <Controller
-          name="createalCode"
-          control={control}
-          defaultValue={""}
-          rules={{ required: true }}
-          render={({ field }) => (
-            <TextInput
-              label="createal Code"
-              type="text"
-              placeholder="Enter restaurant createal code"
-              value={field.value}
-              onChange={field.onChange}
-            />
-          )}
-        />
-      </div>
-      <div className="col-span-1 justify-center p-3">
-        <Controller
-          name="phone"
-          control={control}
-          defaultValue={""}
-          rules={{ required: true }}
-          render={({ field }) => (
-            <TextInput
-              label="Phone"
-              type="text"
-              placeholder="Enter restaurant phone"
-              value={field.value}
-              onChange={field.onChange}
-            />
-          )}
-        />
-        <Controller
-          name="intro"
-          control={control}
-          defaultValue={""}
-          rules={{ required: true }}
-          render={({ field }) => (
-            <TextareaInput
-              label="Introduction"
-              placeholder="Enter restaurant introduction"
-              value={field.value}
-              onChange={field.onChange}
-              className="border border-gray-400 p-2 mt-1   rounded-md"
+          </div>
+          <div className="text-sm font-semibold">to</div>
+          <div>
+            <Controller
+              name="endTime"
+              control={control}
+              rules={{ required: true }}
+              render={({ field }) => {
+                return (
+                  <div className="grow w-44">
+                    <DatePicker
+                      placeholderText="Closing Hour"
+                      onChange={field.onChange}
+                      selected={field.value}
+                      showTimeSelect
+                      showTimeSelectOnly
+                      timeIntervals={15}
+                      timeCaption="Time"
+                      dateFormat="h:mm aa"
+                      className="border-2 rounded-md p-1 w-full"
+                    />
+                  </div>
+                );
+              }}
             />
-          )}
-        />
-        <div className="flex flex-col">
-          <label>Opening Hours</label>
-          <div className="grid grid-cols-2">
-            <div>
-              <Controller
-                name="start_time"
-                control={control}
-                defaultValue={""}
-                rules={{ required: true }}
-                render={({ field }) => {
-                  return (
-                    <>
-                      <DatePicker
-                        placeholderText="Opening Hour"
-                        onChange={field.onChange}
-                        selected={field.value}
-                        showTimeSelect
-                        showTimeSelectOnly
-                        timeIntervals={15}
-                        timeCaption="Time"
-                        dateFormat="h:mm aa"
-                      />
-                    </>
-                  );
-                }}
-              />
-            </div>
-            <div>
-              <Controller
-                name="end_time"
-                control={control}
-                defaultValue={""}
-                rules={{ required: true }}
-                render={({ field }) => {
-                  return (
-                    <>
-                      <DatePicker
-                        placeholderText="Closing Hour"
-                        onChange={field.onChange}
-                        selected={field.value}
-                        showTimeSelect
-                        showTimeSelectOnly
-                        timeIntervals={15}
-                        timeCaption="Time"
-                        dateFormat="h:mm aa"
-                      />
-                    </>
-                  );
-                }}
-              />
-            </div>
           </div>
         </div>
-        <Controller
-          name="dish_id"
-          control={control}
-          defaultValue={""}
-          rules={{ required: true }}
-          render={({ field }) => (
-            <SelectInput
-              label="Dish"
-              placeholder="Select dish"
-              value={field.value}
-              onChange={field.onChange}
-              optionList={dishes.map((dish) => {
-                return { label: dish.name, value: dish.dish_id };
-              })}
-            />
-          )}
-        />
-        <Controller
-          name="payment_method_id"
-          control={control}
-          defaultValue={""}
-          rules={{ required: true }}
-          render={({ field }) => (
-            <SelectInput
-              label="Payment Method"
-              placeholder="Select payment method"
-              value={field.value}
-              onChange={field.onChange}
-              optionList={paymentMethods.map((paymentMethod) => {
-                return {
-                  label: paymentMethod.name,
-                  value: paymentMethod.payment_method_id,
-                };
-              })}
-            />
-          )}
-        />
       </div>
-      <div className="flex flex-col items-center col-span-2">
+      <Controller
+        name="dish_id"
+        control={control}
+        rules={{ required: true }}
+        render={({ field }) => (
+          <SelectInput
+            label="Dish"
+            placeholder="Select dish"
+            value={field.value}
+            onChange={field.onChange}
+            optionList={dishes.map((dish) => {
+              return { label: dish.name, value: dish.dish_id };
+            })}
+          />
+        )}
+      />
+      <Controller
+        name="payment_method_id"
+        control={control}
+        rules={{ required: true }}
+        render={({ field }) => (
+          <SelectInput
+            label="Payment Method"
+            placeholder="Select payment method"
+            value={field.value}
+            onChange={field.onChange}
+            optionList={paymentMethods.map((paymentMethod) => {
+              return {
+                label: paymentMethod.name,
+                value: paymentMethod.payment_method_id,
+              };
+            })}
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="photo"
+        render={({ field }) => (
+          <FileInput
+            onChange={(e) => {
+              if (e.target.files) {
+                const selectedFile = e.target.files[0];
+                field.onChange(selectedFile);
+              }
+            }}
+            label="Restaurant Cover Photo"
+            type="file"
+            className="form-control"
+            placeholder=""
+          />
+        )}
+      />
+      <div className="flex flex-col items-center mb-2">
         <button
           type="submit"
-          className="bg-[#000000] px-4 py-2 rounded-md text-[#ffffff] font-bold"
+          className="bg-black px-4 py-2 rounded-md text-white font-bold hover:bg-opacity-70"
         >
           Add
         </button>
diff --git a/src/redux/photo/photoSlice.ts b/src/redux/photo/photoSlice.ts
index ab0367d..df5ab64 100644
--- a/src/redux/photo/photoSlice.ts
+++ b/src/redux/photo/photoSlice.ts
@@ -35,18 +35,15 @@ export const getMenuPhotosThunk = createAsyncThunk(
 export const createMenuPhotoThunk = createAsyncThunk(
   "photo/create",
   async ({
-    imagePrefix,
     restaurantID,
     imageName,
     photoCategory,
   }: {
-    imagePrefix: string;
     restaurantID: string;
     imageName: string;
     photoCategory: string;
   }) => {
     const response = await createMenuPhoto(
-      imagePrefix,
       restaurantID,
       imageName,
       photoCategory
diff --git a/src/redux/restaurantOwner/restaurantOwnerSlice.ts b/src/redux/restaurantOwner/restaurantOwnerSlice.ts
new file mode 100644
index 0000000..18e01c5
--- /dev/null
+++ b/src/redux/restaurantOwner/restaurantOwnerSlice.ts
@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { createRestaurantOwner } from "../../api/restaurantOwner/restaurantOwnerApiIndex";
+import { RestaurantOwner } from "../../api/restaurantOwner/RestaurantOwnerType";
+
+export interface IRestaurantOwnerState {}
+
+const initialState: IRestaurantOwnerState = {};
+
+export const createRestaurantOwnerThunk = createAsyncThunk(
+  "restaurantOwner/create",
+  async (restaurantOwner: RestaurantOwner) => {
+    const response = await createRestaurantOwner(restaurantOwner);
+    return response;
+  }
+);
+
+const restaurantOwnerSlice = createSlice({
+  name: "restaurant_owner",
+  initialState,
+  reducers: {},
+});
+
+export default restaurantOwnerSlice.reducer;
diff --git a/src/redux/review/reviewSlice.ts b/src/redux/review/reviewSlice.ts
index d9623e7..1d67ce7 100644
--- a/src/redux/review/reviewSlice.ts
+++ b/src/redux/review/reviewSlice.ts
@@ -36,21 +36,14 @@ export const createReviewThunk = createAsyncThunk(
   "review/create",
   async ({
     review,
-    imagePrefix,
     restaurantID,
     photoCategory,
   }: {
     review: CreateReviewDto;
-    imagePrefix: string;
     restaurantID: string;
     photoCategory: string;
   }) => {
-    const response = await createReview(
-      review,
-      imagePrefix,
-      restaurantID,
-      photoCategory
-    );
+    const response = await createReview(review, restaurantID, photoCategory);
     return response;
   }
 );
diff --git a/src/store.ts b/src/store.ts
index 1863d86..c717f34 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -18,6 +18,9 @@ import restaurantPaymentMethodReducer, {
   IRestaurantPaymentMethodState,
 } from "./redux/restaurantPaymentMethod/restaurantPaymentMethodSlice";
 import photoReducer, { IPhotoState } from "./redux/photo/photoSlice";
+import restaurantOwnerReducer, {
+  IRestaurantOwnerState,
+} from "./redux/restaurantOwner/restaurantOwnerSlice";
 
 export interface IRootState {
   auth: IAuthState;
@@ -27,6 +30,7 @@ export interface IRootState {
   district: IDistrictState;
   paymentMethod: IPaymentMethodState;
   restaurantDish: IRestaurantDishState;
+  restaurantOwner: IRestaurantOwnerState;
   restaurantPaymentMethod: IRestaurantPaymentMethodState;
   photo: IPhotoState;
 }
@@ -39,6 +43,7 @@ const reducer = combineReducers<IRootState>({
   district: districtReducer,
   paymentMethod: paymentMethodReducer,
   restaurantDish: restaurantDishReducer,
+  restaurantOwner: restaurantOwnerReducer,
   restaurantPaymentMethod: restaurantPaymentMethodReducer,
   photo: photoReducer,
 });
diff --git a/src/utils/uploadImageService.ts b/src/utils/uploadImageService.ts
index d2a33b1..bbbaf2f 100644
--- a/src/utils/uploadImageService.ts
+++ b/src/utils/uploadImageService.ts
@@ -7,25 +7,34 @@ const supabase = createClient(
 
 export async function uploadImage(
   file: File,
-  restaurantId: string,
+  restaurantID: string,
   path?: string,
   id?: string,
   imageName?: string,
   fileExtension?: string
 ) {
-  if (id && fileExtension) {
+  if (!path) {
     await supabase.storage
       .from("restaurant")
-      .upload(`/${restaurantId}/${path}/${id}.${fileExtension}`, file, {
-        cacheControl: "3600",
-        upsert: false,
-      });
-  } else if (imageName) {
-    await supabase.storage
-      .from("restaurant")
-      .upload(`/${restaurantId}/${path}/${imageName}`, file, {
+      .upload(`/${restaurantID}/cover_image_url.${fileExtension}`, file, {
         cacheControl: "3600",
         upsert: false,
       });
+  } else {
+    if (id && fileExtension) {
+      await supabase.storage
+        .from("restaurant")
+        .upload(`/${restaurantID}/${path}/${id}.${fileExtension}`, file, {
+          cacheControl: "3600",
+          upsert: false,
+        });
+    } else if (imageName) {
+      await supabase.storage
+        .from("restaurant")
+        .upload(`/${restaurantID}/${path}/${imageName}`, file, {
+          cacheControl: "3600",
+          upsert: false,
+        });
+    }
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 0697212..330a464 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -19,6 +19,12 @@ export default {
       borderWidth: {
         1: "1px",
       },
+      width: {
+        120: "30rem",
+      },
+      minWidth: {
+        36: "9rem",
+      },
     },
   },
   plugins: [],