create add location

src/pages/AddLocation/index.tsx

@@ -4,7 +4,7 @@ import { LocationInfo } from "../../domains/LocationInfo";
 import { DropdownInput } from "../../components";
 import { IndonesiaRegionsInfo, LocationType } from "../../types/common";
 import { Regency, emptyRegency } from "../../domains";
-import { Form } from './types';
+import { Form, MenuItem } from './types';
 import { enumKeys } from "../../utils";
 import './style.css';
 import { createLocationService } from "../../services/locations";
@@ -27,6 +27,7 @@ function AddLocation() {
     regency: emptyRegency(),
     thumbnails: [],
     amenities: [],
+    restaurant_menu: [],
   })
   const [showAmenitiesModal, setShowAmenitiesModal] = useState(false)
   const [submitLoading, setSubmitLoading ] = useState<boolean>(false)
@@ -66,7 +67,24 @@ function AddLocation() {
 
   function onChangeLocationType(e: ChangeEvent) {
     const value = (e.target as HTMLSelectElement).value as LocationType
-    setForm({ ...form, location_type: value, amenities: [] })
+    setForm({ ...form, location_type: value, amenities: [], restaurant_menu: [] })
+  }
+
+  function onAddMenuItem(e: TargetedEvent) {
+    e.preventDefault()
+    setForm({ ...form, restaurant_menu: [...form.restaurant_menu, { name: '', price: 0, category: '', description: '' }] })
+  }
+
+  function onChangeMenuItem(idx: number, field: keyof MenuItem, value: string) {
+    const updated = form.restaurant_menu.map((item, i) =>
+      i === idx ? { ...item, [field]: field === 'price' ? parseInt(value) || 0 : value } : item
+    )
+    setForm({ ...form, restaurant_menu: updated })
+  }
+
+  function onDeleteMenuItem(e: TargetedEvent, idx: number) {
+    e.preventDefault()
+    setForm({ ...form, restaurant_menu: form.restaurant_menu.filter((_, i) => i !== idx) })
   }
 
   async function onSubmitForm(e: TargetedEvent) {
@@ -95,6 +113,9 @@ function AddLocation() {
     if (form.amenities.length > 0) {
       formData.append("amenities", JSON.stringify(form.amenities))
     }
+    if (form.restaurant_menu.length > 0) {
+      formData.append("restaurant_menu", JSON.stringify(form.restaurant_menu))
+    }
 
     for(let i = 0; i < tempThumbnailArr.length; i++) {
       formData.append("thumbnail", tempThumbnailArr[i])
@@ -199,6 +220,42 @@ function AddLocation() {
                 ))
                 }
               </select>
+              {form.location_type === LocationType.Culinary && (
+                <div>
+                  <span className={'block mt-2 text-sm mb-2'}>Restaurant Menu</span>
+                  {form.restaurant_menu.map((item, idx) => (
+                    <div key={idx} style={{ backgroundColor: '#23272a', padding: '8px 10px', marginBottom: 8, borderRadius: 4 }}>
+                      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'flex-end' }}>
+                        <div style={{ flex: '1 1 140px' }}>
+                          <span className={'block text-xs mb-1'}>Name <span className={'text-error'}>*</span></span>
+                          <input className={'bg-primary text-sm input-text'} type={'text'} value={item.name} onInput={(e) => onChangeMenuItem(idx, 'name', (e.target as HTMLInputElement).value)} />
+                        </div>
+                        <div style={{ flex: '1 1 100px' }}>
+                          <span className={'block text-xs mb-1'}>Price (IDR) <span className={'text-error'}>*</span></span>
+                          <input className={'bg-primary text-sm input-text'} type={'number'} min={0} value={item.price} onInput={(e) => onChangeMenuItem(idx, 'price', (e.target as HTMLInputElement).value)} />
+                        </div>
+                        <div style={{ flex: '1 1 120px' }}>
+                          <span className={'block text-xs mb-1'}>Category</span>
+                          <select className={'bg-primary p-1 text-sm'} value={item.category} onChange={(e) => onChangeMenuItem(idx, 'category', (e.target as HTMLSelectElement).value)}>
+                            <option value={''}>—</option>
+                            <option value={'dessert'}>Dessert</option>
+                            <option value={'main_course'}>Main Course</option>
+                            <option value={'beverages'}>Beverages</option>
+                            <option value={'appetizer'}>Appetizer</option>
+                            <option value={'snack'}>Snack</option>
+                          </select>
+                        </div>
+                        <div style={{ flex: '2 1 180px' }}>
+                          <span className={'block text-xs mb-1'}>Description</span>
+                          <input className={'bg-primary text-sm input-text'} type={'text'} value={item.description} onInput={(e) => onChangeMenuItem(idx, 'description', (e.target as HTMLInputElement).value)} />
+                        </div>
+                        <a onClick={(e) => onDeleteMenuItem(e, idx)} style={{ cursor: 'pointer', color: '#ed4245', fontWeight: 'bold', paddingBottom: 4 }}>✕</a>
+                      </div>
+                    </div>
+                  ))}
+                  <button type="button" className="amenities-trigger-btn" onClick={onAddMenuItem}>+ Add Menu Item</button>
+                </div>
+              )}
               {(form.location_type === LocationType.Accommodation || form.location_type === LocationType.Culinary || form.location_type === LocationType.Mall) && (
                 <div>
                   <button type="button" className="amenities-trigger-btn" onClick={() => setShowAmenitiesModal(true)}>

src/pages/AddLocation/types.ts

@@ -6,6 +6,13 @@ export interface Thumbnail {
   url: string
 }
 
+export interface MenuItem {
+  name: string,
+  price: number,
+  category: string,
+  description: string,
+}
+
 export interface Form {
   name: string,
   address: string,
@@ -13,5 +20,6 @@ export interface Form {
   location_type: LocationType,
   google_maps_link: string,
   thumbnails: Array<Thumbnail>,
-  amenities: Array<Record<string, string[]>>
+  amenities: Array<Record<string, string[]>>,
+  restaurant_menu: Array<MenuItem>,
 }