88:I[903690,["/chat-static/_next/static/immutable/chunks/2b75ildtv3myf.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/0zhl8lkpuievb.js","/chat-static/_next/static/immutable/chunks/0k8xwdx3dazwi.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/0znv-saj_9omo.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2z8pc3a6_tk5s.js","/chat-static/_next/static/immutable/chunks/33gy6rv7z29e-.js","/chat-static/_next/static/immutable/chunks/43zma2pkpdkjx.js","/chat-static/_next/static/immutable/chunks/1fhqvawdycviw.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/3afbgo6rex_vb.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/03ug0e28spr-r.js","/chat-static/_next/static/immutable/chunks/25c165o1owp5w.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/2yftv5m77a_ya.js","/chat-static/_next/static/immutable/chunks/37vyim_j6k8zg.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/3sxmabmtv_ypg.js","/chat-static/_next/static/immutable/chunks/1y3wb_ctc2yj3.js","/chat-static/_next/static/immutable/chunks/1eis6aa_6elvj.js","/chat-static/_next/static/immutable/chunks/0cf7c5y80zn5y.js","/chat-static/_next/static/immutable/chunks/13u6nv9sa659m.js","/chat-static/_next/static/immutable/chunks/3dibh-kqieo_c.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/08dnz-21bo91p.js","/chat-static/_next/static/immutable/chunks/3lnkop95209np.js","/chat-static/_next/static/immutable/chunks/30j5nhw--l_-2.js","/chat-static/_next/static/immutable/chunks/2t6e3v_r3gzl3.js","/chat-static/_next/static/immutable/chunks/2wevl_37wwyd3.js","/chat-static/_next/static/immutable/chunks/0z6x5gx309dym.js","/chat-static/_next/static/immutable/chunks/14kk35_tsw4m3.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/0bxymcj1of6fi.js","/chat-static/_next/static/immutable/chunks/0bli-y2vwpvug.js","/chat-static/_next/static/immutable/chunks/2tnhkzhju26vp.js"],"ExplicitChatIdProvider"] 89:I[838238,["/chat-static/_next/static/immutable/chunks/2b75ildtv3myf.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/0zhl8lkpuievb.js","/chat-static/_next/static/immutable/chunks/0k8xwdx3dazwi.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/0znv-saj_9omo.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2z8pc3a6_tk5s.js","/chat-static/_next/static/immutable/chunks/33gy6rv7z29e-.js","/chat-static/_next/static/immutable/chunks/43zma2pkpdkjx.js","/chat-static/_next/static/immutable/chunks/1fhqvawdycviw.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/3afbgo6rex_vb.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/03ug0e28spr-r.js","/chat-static/_next/static/immutable/chunks/25c165o1owp5w.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/2yftv5m77a_ya.js","/chat-static/_next/static/immutable/chunks/37vyim_j6k8zg.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/3sxmabmtv_ypg.js","/chat-static/_next/static/immutable/chunks/1y3wb_ctc2yj3.js","/chat-static/_next/static/immutable/chunks/1eis6aa_6elvj.js","/chat-static/_next/static/immutable/chunks/0cf7c5y80zn5y.js","/chat-static/_next/static/immutable/chunks/13u6nv9sa659m.js","/chat-static/_next/static/immutable/chunks/3dibh-kqieo_c.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/08dnz-21bo91p.js","/chat-static/_next/static/immutable/chunks/3lnkop95209np.js","/chat-static/_next/static/immutable/chunks/30j5nhw--l_-2.js","/chat-static/_next/static/immutable/chunks/2t6e3v_r3gzl3.js","/chat-static/_next/static/immutable/chunks/2wevl_37wwyd3.js","/chat-static/_next/static/immutable/chunks/0z6x5gx309dym.js","/chat-static/_next/static/immutable/chunks/14kk35_tsw4m3.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/0bxymcj1of6fi.js","/chat-static/_next/static/immutable/chunks/0bli-y2vwpvug.js","/chat-static/_next/static/immutable/chunks/2tnhkzhju26vp.js"],"SWRDataProvider"] 8b:[] 8c:[["b_0D8zvwyvViA",null],["b_hvUpVY37XND",null],["b_M11nzFv6NkH",null]] 8d:[["b_0D8zvwyvViA",{"templateVersionId":null,"templateCanonId":null}],["b_hvUpVY37XND",{"templateVersionId":null,"templateCanonId":null}],["b_M11nzFv6NkH",{"templateVersionId":null,"templateCanonId":null}]] 8e:[["b_XYCYtcYm7uN","$D2025-03-27T09:52:50.195Z"],["b_GOTAXPzK9r8","$D2025-03-27T09:54:05.977Z"],["b_q2l6rG4rCvI","$D2025-03-27T09:57:06.106Z"],["b_iU8MGgB4JDi","$D2025-03-27T10:00:39.627Z"],["b_0D8zvwyvViA","$D2025-03-27T10:02:17.650Z"],["b_hvUpVY37XND","$D2025-03-27T10:09:57.768Z"],["b_M11nzFv6NkH","$D2025-03-27T10:17:38.738Z"]] 8f:[["b_0D8zvwyvViA",false],["b_hvUpVY37XND",false],["b_M11nzFv6NkH",false]] 90:[["b_0D8zvwyvViA","$undefined"],["b_hvUpVY37XND","$undefined"],["b_M11nzFv6NkH","$undefined"]] 91:[["b_0D8zvwyvViA",null],["b_hvUpVY37XND",null],["b_M11nzFv6NkH",null]] 92:[["b_0D8zvwyvViA",true],["b_hvUpVY37XND",true],["b_M11nzFv6NkH",true]] 93:[["b_0D8zvwyvViA",true],["b_hvUpVY37XND",true],["b_M11nzFv6NkH",true]] 94:[] 95:Ta8d2,""use client"; import type React from "react"; import { useState } from "react"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; import { validateBasicInfo } from "@/lib/onboarding/validation"; import type { FormData } from "@/types/form-types"; interface BasicInfoFormProps { formData: Pick< FormData, "restaurantName" | "description" | "address" | "phone" | "email" >; updateFormData: (data: Partial) => void; onSubmit: () => void; } export function BasicInfoForm({ formData, updateFormData, onSubmit, }: BasicInfoFormProps) { const [errors, setErrors] = useState< Partial> >({}); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const validationErrors = validateBasicInfo(formData); setErrors(validationErrors); if (Object.keys(validationErrors).length === 0) { onSubmit(); } }; return (

Basic information

To display them on your site

Restaurant name updateFormData({ restaurantName: e.target.value })} placeholder="Enter restaurant name" className={errors.restaurantName ? "border-red-500" : ""} /> {errors.restaurantName && (

{errors.restaurantName}

)}

Short description updateFormData({ description: e.target.value })} placeholder="Describe your restaurant" className={errors.description ? "border-red-500" : ""} /> {errors.description && (

Error occurred

)}

Address updateFormData({ address: e.target.value })} placeholder="Start typing your address..." className={errors.address ? "border-red-500" : ""} /> {errors.address && (

{errors.address}

)}

Customer phone (optional) updateFormData({ phone: e.target.value })} placeholder="Enter phone number" />

Email address to display (optional) updateFormData({ email: e.target.value })} placeholder="Enter email address" />

); }, ""use client"; import type React from "react"; import { Button } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; import type { FormData } from "@/types/form-types"; import { daysOfWeek } from "@/lib/onboarding/form-data"; import { useState } from "react"; import { TimeSlot } from "./time-slot"; interface HoursOperationFormProps { formData: Pick; updateFormData: (data: Partial) => void; onSubmit: () => void; } export function HoursOperationForm({ formData, updateFormData, onSubmit, }: HoursOperationFormProps) { // Track which days have had their status selected const [dayStatusSelected, setDayStatusSelected] = useState< Record >({}); // Track validation errors const [errors, setErrors] = useState>({}); const toggleDayStatus = (day: string, isOpen: boolean) => { const updatedHours = { ...formData.hours }; updatedHours[day] = { ...updatedHours[day], isOpen, }; updateFormData({ hours: updatedHours }); // Mark this day as having had its status selected setDayStatusSelected({ ...dayStatusSelected, [day]: true, }); // Clear any errors for this day if (errors[day]) { const newErrors = { ...errors }; delete newErrors[day]; setErrors(newErrors); } }; const updateTimeSlot = ( day: string, index: number, field: "start" | "end", value: string ) => { const updatedHours = { ...formData.hours }; updatedHours[day].slots[index][field] = value; updateFormData({ hours: updatedHours }); }; const addTimeSlot = (day: string) => { // Maximum 5 slots allowed if (formData.hours[day].slots.length >= 5) return; const updatedHours = { ...formData.hours }; // Find a suitable default time slot that doesn't overlap const existingSlots = updatedHours[day].slots; let newStart = "12:00"; let newEnd = "15:00"; // Try to find a non-overlapping time const usedHours = new Set(); existingSlots.forEach((slot) => { const startHour = Number.parseInt(slot.start.split(":")[0]); const endHour = Number.parseInt(slot.end.split(":")[0]); for (let h = startHour; h <= endHour; h++) { usedHours.add(h); } }); // Find first available 3-hour slot for (let h = 0; h < 24; h++) { if (!usedHours.has(h) && !usedHours.has(h + 1) && !usedHours.has(h + 2)) { newStart = `${h.toString().padStart(2, "0")}:00`; newEnd = `${(h + 3).toString().padStart(2, "0")}:00`; break; } } updatedHours[day].slots.push({ start: newStart, end: newEnd }); updateFormData({ hours: updatedHours }); }; const removeTimeSlot = (day: string, index: number) => { const updatedHours = { ...formData.hours }; updatedHours[day].slots.splice(index, 1); updateFormData({ hours: updatedHours }); }; const validateForm = () => { const newErrors: Record = {}; // Check each day that is marked as open Object.entries(formData.hours).forEach(([day, dayData]) => { // Skip days that are closed if (!dayData.isOpen) return; // Check if the day has at least one slot if (dayData.slots.length === 0) { newErrors[day] = "At least one time slot is required for open days"; } // Check for invalid time ranges (end before start) dayData.slots.forEach((slot, index) => { const startHour = Number.parseInt(slot.start.split(":")[0]); const endHour = Number.parseInt(slot.end.split(":")[0]); if (endHour <= startHour) { newErrors[day] = `Slot ${index + 1} has an invalid time range`; } }); // Check for overlapping slots for (let i = 0; i < dayData.slots.length; i++) { for (let j = i + 1; j < dayData.slots.length; j++) { const slot1Start = Number.parseInt( dayData.slots[i].start.split(":")[0] ); const slot1End = Number.parseInt(dayData.slots[i].end.split(":")[0]); const slot2Start = Number.parseInt( dayData.slots[j].start.split(":")[0] ); const slot2End = Number.parseInt(dayData.slots[j].end.split(":")[0]); if ( (slot2Start >= slot1Start && slot2Start < slot1End) || (slot2End > slot1Start && slot2End <= slot1End) || (slot1Start >= slot2Start && slot1Start < slot2End) ) { newErrors[day] = "Time slots cannot overlap"; } } } }); setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (validateForm()) { onSubmit(); } }; // Check if a day's status has been selected const isDayStatusSelected = (day: string) => { return dayStatusSelected[day] === true; }; return (

Opening Hours

To display them on your site

{daysOfWeek.map((day) => (

{day}

{/* Time slots - always visible but disabled until status is selected */}

{formData.hours[day].slots.map((slot, index) => ( i !== index )} onUpdate={updateTimeSlot} onAdd={addTimeSlot} onRemove={removeTimeSlot} /> ))} {errors[day] && (

{errors[day]}

)}

))}

); }, ""use client"; import type React from "react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; import { X } from "lucide-react"; import type { FormData } from "@/types/form-types"; import { ALLOWED_MENU_TYPES, ALLOWED_PHOTO_TYPES, ALLOWED_LOGO_TYPES, isFileTypeAllowed, getFileTypeErrorMessage, } from "@/lib/onboarding/file-utils"; interface MenuVisualsFormProps { formData: Pick; updateFormData: (data: Partial) => void; onSubmit: () => void; } export function MenuVisualsForm({ formData, updateFormData, onSubmit, }: MenuVisualsFormProps) { const [errors, setErrors] = useState<{ menu?: string; logo?: string; photos?: string; }>({}); const handleMenuUpload = (e: React.ChangeEvent) => { if (e.target.files && e.target.files[0]) { const file = e.target.files[0]; if (!isFileTypeAllowed(file, ALLOWED_MENU_TYPES)) { setErrors({ ...errors, menu: getFileTypeErrorMessage(file.type, ALLOWED_MENU_TYPES), }); return; } updateFormData({ menu: file }); setErrors({ ...errors, menu: undefined }); } }; const handleLogoUpload = (e: React.ChangeEvent) => { if (e.target.files && e.target.files[0]) { const file = e.target.files[0]; if (!isFileTypeAllowed(file, ALLOWED_LOGO_TYPES)) { setErrors({ ...errors, logo: getFileTypeErrorMessage(file.type, ALLOWED_LOGO_TYPES), }); return; } updateFormData({ logo: file }); setErrors({ ...errors, logo: undefined }); } }; const handlePhotosUpload = (e: React.ChangeEvent) => { if (e.target.files) { const newPhotos = Array.from(e.target.files); const invalidPhoto = newPhotos.find( (file) => !isFileTypeAllowed(file, ALLOWED_PHOTO_TYPES) ); if (invalidPhoto) { setErrors({ ...errors, photos: getFileTypeErrorMessage( invalidPhoto.type, ALLOWED_PHOTO_TYPES ), }); return; } updateFormData({ photos: [...formData.photos, ...newPhotos] }); setErrors({ ...errors, photos: undefined }); } }; const removeMenu = () => { updateFormData({ menu: null }); setErrors({ ...errors, menu: undefined }); }; const removeLogo = () => { updateFormData({ logo: null }); setErrors({ ...errors, logo: undefined }); }; const removePhoto = (index: number) => { const updatedPhotos = [...formData.photos]; updatedPhotos.splice(index, 1); updateFormData({ photos: updatedPhotos }); }; const validateForm = () => { const newErrors: { menu?: string; logo?: string; photos?: string; } = {}; // Photos are required if (formData.photos.length === 0) { newErrors.photos = "At least one photo is required"; } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (validateForm()) { onSubmit(); } }; return (

Menu and visuals

To display them on your site

Menu (optionnel)

{formData.menu ? (

{formData.menu.name}

) : (

Click to upload menu (PDF, PNG, JPG)

)} {errors.menu && (

{errors.menu}

)}

Logo (optionnel)

{formData.logo ? (

) : (

Upload your logo

Png or svg or jpg format

Browse files

)} {errors.logo && (

{errors.logo}

)}

Photos *

{formData.photos.map((photo, index) => (

{photo.name}

))} {formData.photos.length === 0 && (

Click to upload photos (PNG, JPG only)

)}

{formData.photos.length > 0 && (

Add more photos

)} {errors.photos && (

{errors.photos}

)}

); }, ""use client"; import type React from "react"; import { useState, useEffect } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Checkbox } from "@/components/ui/checkbox"; import type { FormData } from "@/types/form-types"; interface ReservationsSocialFormProps { formData: Pick< FormData, "reservationMethod" | "instagram" | "facebook" | "tiktok" >; updateFormData: (data: Partial) => void; onSubmit: () => void; } export function ReservationsSocialForm({ formData, updateFormData, onSubmit, }: ReservationsSocialFormProps) { // Initialize checkbox states based on the current reservationMethod const [noReservations, setNoReservations] = useState( formData.reservationMethod === "none" ); const [byPhone, setByPhone] = useState( formData.reservationMethod === "phone" ); const [byOnlineSystem, setByOnlineSystem] = useState( formData.reservationMethod === "online" ); // Validation error states const [instagramError, setInstagramError] = useState(""); const [facebookError, setFacebookError] = useState(""); const [tiktokError, setTiktokError] = useState(""); // Validate Instagram username const validateInstagram = (username: string) => { if (!username) return ""; // Empty is valid (optional field) // Instagram validation: lowercase, alphanumeric, underscores only, no spaces const instagramRegex = /^[a-z0-9_]+$/; if (!instagramRegex.test(username)) { return "Instagram username should contain only lowercase letters, numbers, and underscores."; } return ""; }; // Validate Facebook URL const validateFacebook = (url: string) => { if (!url) return ""; // Empty is valid (optional field) // Basic URL validation for Facebook if (url.includes(" ")) { return "Facebook URL should not contain spaces."; } // Simple check for facebook.com domain if (url && !url.includes("facebook.com") && !url.includes("fb.com")) { return "Please enter a valid Facebook URL (e.g., www.facebook.com/example)."; } return ""; }; // Validate TikTok username const validateTikTok = (username: string) => { if (!username) return ""; // Empty is valid (optional field) // TikTok validation: lowercase, alphanumeric, underscores only, no spaces const tiktokRegex = /^[a-z0-9_]+$/; if (!tiktokRegex.test(username)) { return "TikTok username should contain only lowercase letters, numbers, and underscores."; } return ""; }; // Handle checkbox changes directly without useEffect const handleNoReservationsChange = (checked: boolean) => { if (checked) { // If checking "no reservations", disable other options setNoReservations(true); setByPhone(false); setByOnlineSystem(false); updateFormData({ reservationMethod: "none" }); } else { // If unchecking "no reservations", just uncheck it without selecting anything else setNoReservations(false); // Only update the form data if another option is already selected if (byPhone) { updateFormData({ reservationMethod: "phone" }); } else if (byOnlineSystem) { updateFormData({ reservationMethod: "online" }); } else { // If nothing else is selected, leave reservationMethod empty updateFormData({ reservationMethod: "" }); } } }; const handleByPhoneChange = (checked: boolean) => { setByPhone(checked); if (checked) { // If checking "by phone", uncheck "no reservations" setNoReservations(false); updateFormData({ reservationMethod: "phone" }); } else if (!byOnlineSystem && !noReservations) { // If unchecking and nothing else is selected, leave empty updateFormData({ reservationMethod: "" }); } }; const handleByOnlineSystemChange = (checked: boolean) => { setByOnlineSystem(checked); if (checked) { // If checking "online system", uncheck "no reservations" setNoReservations(false); updateFormData({ reservationMethod: "online" }); } else if (!byPhone && !noReservations) { // If unchecking and nothing else is selected, leave empty updateFormData({ reservationMethod: "" }); } }; // Handle Instagram input with validation const handleInstagramChange = (value: string) => { const cleanValue = value.startsWith("@") ? value.substring(1) : value; updateFormData({ instagram: cleanValue }); setInstagramError(validateInstagram(cleanValue)); }; // Handle Facebook input with validation const handleFacebookChange = (value: string) => { updateFormData({ facebook: value }); setFacebookError(validateFacebook(value)); }; // Handle TikTok input with validation const handleTikTokChange = (value: string) => { const cleanValue = value.startsWith("@") ? value.substring(1) : value; updateFormData({ tiktok: cleanValue }); setTiktokError(validateTikTok(cleanValue)); }; // Validate all fields on initial load and when they change useEffect(() => { setInstagramError(validateInstagram(formData.instagram || "")); setFacebookError(validateFacebook(formData.facebook || "")); setTiktokError(validateTikTok(formData.tiktok || "")); }, [formData.instagram, formData.facebook, formData.tiktok]); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); // Validate all fields before submission const instagramValidation = validateInstagram(formData.instagram || ""); const facebookValidation = validateFacebook(formData.facebook || ""); const tiktokValidation = validateTikTok(formData.tiktok || ""); setInstagramError(instagramValidation); setFacebookError(facebookValidation); setTiktokError(tiktokValidation); // Only proceed if all validations pass if (!instagramValidation && !facebookValidation && !tiktokValidation) { onSubmit(); } }; return (

Reservations and social networks

To integrate them on your site

How do you manage reservations?

Select one or more options

handleByPhoneChange(checked === true) } disabled={noReservations} /> By phone

handleByOnlineSystemChange(checked === true) } disabled={noReservations} /> With an online reservation system

handleNoReservationsChange(checked === true) } /> I do not take reservations.

Restaurant Instagram (optional)

@ handleInstagramChange(e.target.value)} placeholder="example" className={`border-0 ${instagramError ? "border-red-500" : ""}`} />

{instagramError && (

{instagramError}

)}

Use only lowercase letters, numbers, and underscores without space.

Restaurant Facebook (optional) handleFacebookChange(e.target.value)} placeholder="www.facebook.com/example" className={facebookError ? "border-red-500" : ""} /> {facebookError && (

{facebookError}

)}

Enter a valid Facebook URL without spaces.

TikTok du restaurant (optional)

@ handleTikTokChange(e.target.value)} placeholder="example" className={`border-0 ${tiktokError ? "border-red-500" : ""}`} />

{tiktokError && (

{tiktokError}

)}

Use only lowercase letters, numbers, and underscores without space.

); }, "interface StepperProps { currentStep: number; totalSteps: number; } export function Stepper({ currentStep, totalSteps }: StepperProps) { return (

{Array.from({ length: totalSteps }, (_, i) => i + 1).map((step) => (

{step}

))}

); } " ""use client"; import { X, Plus } from "lucide-react"; import type { TimeSlot as TimeSlotType } from "@/types/form-types"; import { timeOptions } from "@/lib/onboarding/form-data"; interface TimeSlotProps { slot: TimeSlotType; index: number; day: string; isOpen: boolean; isDaySelected: boolean; totalSlots: number; otherSlots: TimeSlotType[]; onUpdate: ( day: string, index: number, field: "start" | "end", value: string ) => void; onAdd: (day: string) => void; onRemove: (day: string, index: number) => void; } export function TimeSlot({ slot, index, day, isOpen, isDaySelected, totalSlots, otherSlots, onUpdate, onAdd, onRemove, }: TimeSlotProps) { // Find the latest end time from previous slots const getLatestEndTime = () => { if (index === 0) return "00:00"; // First slot can start from 12AM // Sort other slots by end time and get the latest one const sortedSlots = [...otherSlots] .filter((_, i) => i < index) // Only consider slots before current one .sort((a, b) => { const aHour = Number.parseInt(a.end.split(":")[0]); const bHour = Number.parseInt(b.end.split(":")[0]); return bHour - aHour; }); return sortedSlots.length > 0 ? sortedSlots[0].end : "00:00"; }; // Check if a time is already selected in another slot const isTimeSelected = (time: string, field: "start" | "end") => { return otherSlots.some( (otherSlot, i) => i !== index && // Don't compare with self ((field === "start" && otherSlot.start === time) || (field === "end" && otherSlot.end === time)) ); }; // Check if a time is within any existing slot's range const isTimeInRange = (time: string) => { const checkTime = Number.parseInt(time.split(":")[0]); return otherSlots.some((otherSlot, i) => { if (i === index) return false; // Skip current slot const startTime = Number.parseInt(otherSlot.start.split(":")[0]); const endTime = Number.parseInt(otherSlot.end.split(":")[0]); return checkTime >= startTime && checkTime < endTime; }); }; // Check if time is before the latest end time of previous slots const isBeforeLatestEndTime = (time: string) => { const latestEnd = getLatestEndTime(); const latestEndHour = Number.parseInt(latestEnd.split(":")[0]); const timeHour = Number.parseInt(time.split(":")[0]); return timeHour < latestEndHour; }; // Validate if end time is after start time const isValidEndTime = (startTime: string, endTime: string) => { const start = Number.parseInt(startTime.split(":")[0]); const end = Number.parseInt(endTime.split(":")[0]); return end > start; }; // Handle start time change with validation const handleStartTimeChange = (value: string) => { if (!isValidEndTime(value, slot.end)) { const startHour = Number.parseInt(value.split(":")[0]); const newEndTime = `${Math.min(startHour + 2, 23)}:00`; onUpdate(day, index, "start", value); onUpdate(day, index, "end", newEndTime); } else { onUpdate(day, index, "start", value); } }; // Handle end time change with validation const handleEndTimeChange = (value: string) => { if (isValidEndTime(slot.start, value)) { onUpdate(day, index, "end", value); } }; // Get the latest end time for validation const latestEndTime = getLatestEndTime(); return (

{index === 0 ? ( ) : ( )}

); } " all use in this page ""use client"; import { useState } from "react"; import type { FormData } from "@/types/form-types"; import { initialFormData } from "@/lib/onboarding/form-data"; import { BasicInfoForm } from "@/components/onboarding/basic-info-form"; import { MenuVisualsForm } from "@/components/onboarding/menu-visuals-form"; import { HoursOperationForm } from "@/components/onboarding/hours-operation-form"; import { ReservationsSocialForm } from "@/components/onboarding/reservations-social-form"; import { DomainForm } from "@/components/onboarding/domain-form"; import { ConstructionProgress } from "@/components/onboarding/construction-progress"; import { Congratulations } from "@/components/onboarding/congratulations"; import { Stepper } from "@/components/onboarding/stepper"; export default function Home() { const [currentStep, setCurrentStep] = useState(1); const [formData, setFormData] = useState(initialFormData); const handleNextStep = () => { if (currentStep < 7) { setCurrentStep(currentStep + 1); } // Log form data when completing the form if (currentStep === 5) { console.log("Form submitted with data:", formData); } }; const updateFormData = (data: Partial) => { setFormData({ ...formData, ...data }); }; const renderStep = () => { switch (currentStep) { case 1: return ( ); case 2: return ( ); case 3: return ( ); case 4: return ( ); case 5: return ( ); case 6: return ; case 7: return ; default: return ( ); } }; return (

{currentStep < 7 && ( )}

{renderStep()}

); } " " "here is my forms i use in steps for collect data from user but i want this form is used in dasboard for update default valuse here is good functionality but add more and make more reusebale for furher use in dashboar this form is not have the title an desription make it simple like console the update data "import type { FormData, HoursData } from "@/types/form-types" // Initial hours data for all days of the week export const initialHoursData: HoursData = { Monday: { isOpen: false, slots: [{ start: "12:00", end: "15:00" }] }, Tuesday: { isOpen: true, slots: [{ start: "12:00", end: "15:00" }] }, Wednesday: { isOpen: true, slots: [{ start: "12:00", end: "15:00" }] }, Thursday: { isOpen: true, slots: [{ start: "12:00", end: "15:00" }] }, Friday: { isOpen: true, slots: [{ start: "12:00", end: "15:00" }] }, Saturday: { isOpen: true, slots: [{ start: "12:00", end: "15:00" }] }, Sunday: { isOpen: true, slots: [{ start: "12:00", end: "15:00" }] }, } // Initial form data export const initialFormData: FormData = { // Basic information restaurantName: "", description: "", address: "", phone: "", email: "", // Menu and visuals menu: null, logo: null, photos: [], // Hours of operation hours: initialHoursData, // Reservations and social networks reservationMethod: "", instagram: "", facebook: "", tiktok: "", // Domain domain: "", isDomainAvailable: false, } // Days of the week array export const daysOfWeek = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] // Time options for select dropdowns export const timeOptions = Array.from({ length: 24 }, (_, i) => { const hour = i.toString().padStart(2, "0") return { value: `${hour}:00`, label: `${hour}:00` } }) " not use any toaster 96:T42e,I need to create a more reusable version of these forms for use in a dashboard context. The key differences will be: - Remove titles and descriptions that were used in the onboarding flow - Make the forms more compact and suitable for a dashboard layout - Add functionality to handle updates rather than just initial data collection - Console log the updated data when changes are made - Make the components more reusable Let's plan the structure: - Create a set of reusable form components that can be used both in onboarding and dashboard contexts - Add props to control whether the form is in "onboarding" or "dashboard" mode - Add functionality to handle updates and provide feedback - Make sure the forms maintain all the validation logic but in a more compact UI For each form component, I'll: - Add a mode prop (onboarding/dashboard) - Make titles and descriptions conditional - Adjust styling for dashboard context - Add immediate update functionality for dashboard mode - Ensure all validation still works Let's start by creating these updated components.97:T4f0,export default function BasicInfoSettingsPage() { const [formData, setFormData] = useState(null); const [isLoading, setIsLoading] = useState(true); // 1. Load data useEffect(() => { const fetchData = async () => { setIsLoading(true); try { // Fetch data from API const data = await fetchRestaurantData(); setFormData(data); } catch (error) { console.error("Error:", error); } finally { setIsLoading(false); } }; fetchData(); }, []); // 2. Update form data const updateFormData = (data: Partial) => { if (formData) { setFormData({ ...formData, ...data }); } }; // 3. Handle loading state if (isLoading) { return ; } // 4. Handle error state if (!formData) { return ; } // 5. Render form return (

Basic Information

); }98:T6cb,""use client"; import type React from "react"; import { PageHeader } from "@/components/dashboard/edit/page-header"; import { BasicInfoForm } from "@/components/onboarding/basic-info-form"; import { useEffect, useState } from "react"; import { initialFormData } from "@/lib/onboarding/form-data"; export default function BasicInformation() { const [formData, setFormData] = useState(null); const [isLoading, setIsLoading] = useState(true); useEffect(() => { // Simulate fetching data from API const fetchData = async () => { setIsLoading(true); try { // In a real app, this would be an API call await new Promise((resolve) => setTimeout(resolve, 1000)); // For demo purposes, we'll use the initial data with some values filled in const data: FormData = { ...initialFormData, restaurantName: "Delicious Bites", description: "A cozy restaurant serving international cuisine", address: "123 Main Street, Anytown", phone: "+1 (555) 123-4567", email: "contact@deliciousbites.com", }; setFormData(data); } catch (error) { console.error("Error fetching restaurant data:", error); } finally { setIsLoading(false); } }; fetchData(); }, []); const updateFormData = (data: Partial) => { if (formData) { setFormData({ ...formData, ...data }); } }; return (

); } "i use like this ok not make any layout99:T157ab,[V0_FILE]typescriptreact:file="components/forms/basic-info-form.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { validateBasicInfo } from "@/lib/onboarding/validation" import type { FormData } from "@/types/form-types" interface BasicInfoFormProps { formData: Pick updateFormData: (data: Partial) => void onSubmit?: () => void mode?: "onboarding" | "dashboard" autoSave?: boolean } export function BasicInfoForm({ formData, updateFormData, onSubmit, mode = "onboarding", autoSave = false, }: BasicInfoFormProps) { const [errors, setErrors] = useState>>({}) const [isSaving, setIsSaving] = useState(false) const [lastSaved, setLastSaved] = useState(null) // For auto-save functionality const [debouncedFormData, setDebouncedFormData] = useState(formData) useEffect(() => { if (autoSave && mode === "dashboard") { const timer = setTimeout(() => { setDebouncedFormData(formData) }, 1000) return () => clearTimeout(timer) } }, [formData, autoSave, mode]) useEffect(() => { if (autoSave && mode === "dashboard" && debouncedFormData !== formData) { handleSave() } }, [debouncedFormData]) // eslint-disable-line react-hooks/exhaustive-deps const handleSave = async () => { const validationErrors = validateBasicInfo(formData) setErrors(validationErrors) if (Object.keys(validationErrors).length === 0) { setIsSaving(true) try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 500)) console.log("Basic info updated:", formData) setLastSaved(new Date()) } catch (error) { console.error("Error saving basic info:", error) } finally { setIsSaving(false) } } } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() const validationErrors = validateBasicInfo(formData) setErrors(validationErrors) if (Object.keys(validationErrors).length === 0) { if (mode === "dashboard") { handleSave() } else if (onSubmit) { onSubmit() } } } const handleChange = (field: keyof typeof formData, value: string) => { updateFormData({ [field]: value } as Partial) // Clear error when user starts typing if (errors[field]) { setErrors({ ...errors, [field]: undefined }) } } return (

{mode === "onboarding" && (

Basic information

To display them on your site

)}

Restaurant name handleChange("restaurantName", e.target.value)} placeholder="Enter restaurant name" className={errors.restaurantName ? "border-red-500" : ""} /> {errors.restaurantName &&

{errors.restaurantName}

}

Short description handleChange("description", e.target.value)} placeholder="Describe your restaurant" className={errors.description ? "border-red-500" : ""} /> {errors.description &&

{errors.description}

}

Address handleChange("address", e.target.value)} placeholder="Start typing your address..." className={errors.address ? "border-red-500" : ""} /> {errors.address &&

{errors.address}

}

Customer phone (optional) handleChange("phone", e.target.value)} placeholder="Enter phone number" />

Email address to display (optional) handleChange("email", e.target.value)} placeholder="Enter email address" />

{mode === "dashboard" && lastSaved && (

Last saved: {lastSaved.toLocaleTimeString()}

)}

) } [V0_FILE]typescriptreact:file="components/forms/hours-operation-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import type { FormData } from "@/types/form-types" import { daysOfWeek } from "@/lib/onboarding/form-data" import { TimeSlot } from "./time-slot" interface HoursOperationFormProps { formData: Pick updateFormData: (data: Partial) => void onSubmit?: () => void mode?: "onboarding" | "dashboard" autoSave?: boolean } export function HoursOperationForm({ formData, updateFormData, onSubmit, mode = "onboarding", autoSave = false, }: HoursOperationFormProps) { // Track which days have had their status selected const [dayStatusSelected, setDayStatusSelected] = useState>({}) // Track validation errors const [errors, setErrors] = useState>({}) const [isSaving, setIsSaving] = useState(false) const [lastSaved, setLastSaved] = useState(null) const toggleDayStatus = (day: string, isOpen: boolean) => { const updatedHours = { ...formData.hours } updatedHours[day] = { ...updatedHours[day], isOpen, } updateFormData({ hours: updatedHours }) // Mark this day as having had its status selected setDayStatusSelected({ ...dayStatusSelected, [day]: true, }) // Clear any errors for this day if (errors[day]) { const newErrors = { ...errors } delete newErrors[day] setErrors(newErrors) } if (autoSave && mode === "dashboard") { handleSave(updatedHours) } } const updateTimeSlot = (day: string, index: number, field: "start" | "end", value: string) => { const updatedHours = { ...formData.hours } updatedHours[day].slots[index][field] = value updateFormData({ hours: updatedHours }) if (autoSave && mode === "dashboard") { // Use a debounce for time slot updates to avoid too many saves const timer = setTimeout(() => { handleSave(updatedHours) }, 1000) return () => clearTimeout(timer) } } const addTimeSlot = (day: string) => { // Maximum 5 slots allowed if (formData.hours[day].slots.length >= 5) return const updatedHours = { ...formData.hours } // Find a suitable default time slot that doesn't overlap const existingSlots = updatedHours[day].slots let newStart = "12:00" let newEnd = "15:00" // Try to find a non-overlapping time const usedHours = new Set() existingSlots.forEach((slot) => { const startHour = Number.parseInt(slot.start.split(":")[0]) const endHour = Number.parseInt(slot.end.split(":")[0]) for (let h = startHour; h <= endHour; h++) { usedHours.add(h) } }) // Find first available 3-hour slot for (let h = 0; h < 24; h++) { if (!usedHours.has(h) && !usedHours.has(h + 1) && !usedHours.has(h + 2)) { newStart = `${h.toString().padStart(2, "0")}:00` newEnd = `${(h + 3).toString().padStart(2, "0")}:00` break } } updatedHours[day].slots.push({ start: newStart, end: newEnd }) updateFormData({ hours: updatedHours }) if (autoSave && mode === "dashboard") { handleSave(updatedHours) } } const removeTimeSlot = (day: string, index: number) => { const updatedHours = { ...formData.hours } updatedHours[day].slots.splice(index, 1) updateFormData({ hours: updatedHours }) if (autoSave && mode === "dashboard") { handleSave(updatedHours) } } const handleSave = async (updatedHours = formData.hours) => { const newErrors = validateHours(updatedHours) setErrors(newErrors) if (Object.keys(newErrors).length === 0) { setIsSaving(true) try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 500)) console.log("Hours updated:", updatedHours) setLastSaved(new Date()) } catch (error) { console.error("Error saving hours:", error) } finally { setIsSaving(false) } } } const validateHours = (hours = formData.hours) => { const newErrors: Record = {} // Check each day that is marked as open Object.entries(hours).forEach(([day, dayData]) => { // Skip days that are closed if (!dayData.isOpen) return // Check if the day has at least one slot if (dayData.slots.length === 0) { newErrors[day] = "At least one time slot is required for open days" } // Check for invalid time ranges (end before start) dayData.slots.forEach((slot, index) => { const startHour = Number.parseInt(slot.start.split(":")[0]) const endHour = Number.parseInt(slot.end.split(":")[0]) if (endHour <= startHour) { newErrors[day] = `Slot ${index + 1} has an invalid time range` } }) // Check for overlapping slots for (let i = 0; i < dayData.slots.length; i++) { for (let j = i + 1; j < dayData.slots.length; j++) { const slot1Start = Number.parseInt(dayData.slots[i].start.split(":")[0]) const slot1End = Number.parseInt(dayData.slots[i].end.split(":")[0]) const slot2Start = Number.parseInt(dayData.slots[j].start.split(":")[0]) const slot2End = Number.parseInt(dayData.slots[j].end.split(":")[0]) if ( (slot2Start >= slot1Start && slot2Start < slot1End) || (slot2End > slot1Start && slot2End <= slot1End) || (slot1Start >= slot2Start && slot1Start < slot2End) ) { newErrors[day] = "Time slots cannot overlap" } } } }) return newErrors } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() const newErrors = validateHours() setErrors(newErrors) if (Object.keys(newErrors).length === 0) { if (mode === "dashboard") { handleSave() } else if (onSubmit) { onSubmit() } } } // Check if a day's status has been selected const isDayStatusSelected = (day: string) => { return dayStatusSelected[day] === true || formData.hours[day].isOpen !== undefined } return (

{mode === "onboarding" && (

Opening Hours

To display them on your site

)}

{daysOfWeek.map((day) => (

{day}

{/* Time slots - always visible but disabled until status is selected */}

{formData.hours[day].slots.map((slot, index) => ( i !== index)} onUpdate={updateTimeSlot} onAdd={addTimeSlot} onRemove={removeTimeSlot} /> ))} {errors[day] &&

{errors[day]}

}

))}

{mode === "dashboard" && lastSaved && (

Last saved: {lastSaved.toLocaleTimeString()}

)}

) } [V0_FILE]typescriptreact:file="components/forms/menu-visuals-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { X } from "lucide-react" import type { FormData } from "@/types/form-types" import { ALLOWED_MENU_TYPES, ALLOWED_PHOTO_TYPES, ALLOWED_LOGO_TYPES, isFileTypeAllowed, getFileTypeErrorMessage, } from "@/lib/onboarding/file-utils" interface MenuVisualsFormProps { formData: Pick updateFormData: (data: Partial) => void onSubmit?: () => void mode?: "onboarding" | "dashboard" autoSave?: boolean } export function MenuVisualsForm({ formData, updateFormData, onSubmit, mode = "onboarding", autoSave = false, }: MenuVisualsFormProps) { const [errors, setErrors] = useState<{ menu?: string logo?: string photos?: string }>({}) const [isSaving, setIsSaving] = useState(false) const [lastSaved, setLastSaved] = useState(null) const handleMenuUpload = (e: React.ChangeEvent) => { if (e.target.files && e.target.files[0]) { const file = e.target.files[0] if (!isFileTypeAllowed(file, ALLOWED_MENU_TYPES)) { setErrors({ ...errors, menu: getFileTypeErrorMessage(file.type, ALLOWED_MENU_TYPES), }) return } updateFormData({ menu: file }) setErrors({ ...errors, menu: undefined }) if (autoSave && mode === "dashboard") { handleSave({ ...formData, menu: file }) } } } const handleLogoUpload = (e: React.ChangeEvent) => { if (e.target.files && e.target.files[0]) { const file = e.target.files[0] if (!isFileTypeAllowed(file, ALLOWED_LOGO_TYPES)) { setErrors({ ...errors, logo: getFileTypeErrorMessage(file.type, ALLOWED_LOGO_TYPES), }) return } updateFormData({ logo: file }) setErrors({ ...errors, logo: undefined }) if (autoSave && mode === "dashboard") { handleSave({ ...formData, logo: file }) } } } const handlePhotosUpload = (e: React.ChangeEvent) => { if (e.target.files) { const newPhotos = Array.from(e.target.files) const invalidPhoto = newPhotos.find((file) => !isFileTypeAllowed(file, ALLOWED_PHOTO_TYPES)) if (invalidPhoto) { setErrors({ ...errors, photos: getFileTypeErrorMessage(invalidPhoto.type, ALLOWED_PHOTO_TYPES), }) return } const updatedPhotos = [...formData.photos, ...newPhotos] updateFormData({ photos: updatedPhotos }) setErrors({ ...errors, photos: undefined }) if (autoSave && mode === "dashboard") { handleSave({ ...formData, photos: updatedPhotos }) } } } const removeMenu = () => { updateFormData({ menu: null }) setErrors({ ...errors, menu: undefined }) if (autoSave && mode === "dashboard") { handleSave({ ...formData, menu: null }) } } const removeLogo = () => { updateFormData({ logo: null }) setErrors({ ...errors, logo: undefined }) if (autoSave && mode === "dashboard") { handleSave({ ...formData, logo: null }) } } const removePhoto = (index: number) => { const updatedPhotos = [...formData.photos] updatedPhotos.splice(index, 1) updateFormData({ photos: updatedPhotos }) if (autoSave && mode === "dashboard") { handleSave({ ...formData, photos: updatedPhotos }) } } const handleSave = async (updatedData = formData) => { const newErrors = validateForm(updatedData) setErrors(newErrors) if (Object.keys(newErrors).length === 0) { setIsSaving(true) try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 500)) console.log("Menu and visuals updated:", updatedData) setLastSaved(new Date()) } catch (error) { console.error("Error saving menu and visuals:", error) } finally { setIsSaving(false) } } } const validateForm = (data = formData) => { const newErrors: { menu?: string logo?: string photos?: string } = {} // Photos are required if (data.photos.length === 0) { newErrors.photos = "At least one photo is required" } return newErrors } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() const newErrors = validateForm() setErrors(newErrors) if (Object.keys(newErrors).length === 0) { if (mode === "dashboard") { handleSave() } else if (onSubmit) { onSubmit() } } } return (

{mode === "onboarding" && (

Menu and visuals

To display them on your site

)}

Menu (optional)

{formData.menu ? (

{formData.menu.name}

) : (

Click to upload menu (PDF, PNG, JPG)

)} {errors.menu &&

{errors.menu}

}

Logo (optional)

{formData.logo ? (

) : (

Upload your logo

PNG, SVG, or JPG format

Browse files

)} {errors.logo &&

{errors.logo}

}

Photos *

{formData.photos.map((photo, index) => (

{photo.name}

))} {formData.photos.length === 0 && (

Click to upload photos (PNG, JPG only)

)}

{formData.photos.length > 0 && (

Add more photos

)} {errors.photos &&

{errors.photos}

}

{mode === "dashboard" && lastSaved && (

Last saved: {lastSaved.toLocaleTimeString()}

)}

) } [V0_FILE]typescriptreact:file="components/forms/reservations-social-form.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import type { FormData } from "@/types/form-types" interface ReservationsSocialFormProps { formData: Pick updateFormData: (data: Partial) => void onSubmit?: () => void mode?: "onboarding" | "dashboard" autoSave?: boolean } export function ReservationsSocialForm({ formData, updateFormData, onSubmit, mode = "onboarding", autoSave = false, }: ReservationsSocialFormProps) { // Initialize checkbox states based on the current reservationMethod const [noReservations, setNoReservations] = useState(formData.reservationMethod === "none") const [byPhone, setByPhone] = useState(formData.reservationMethod === "phone") const [byOnlineSystem, setByOnlineSystem] = useState(formData.reservationMethod === "online") // Validation error states const [instagramError, setInstagramError] = useState("") const [facebookError, setFacebookError] = useState("") const [tiktokError, setTiktokError] = useState("") const [isSaving, setIsSaving] = useState(false) const [lastSaved, setLastSaved] = useState(null) // Validate Instagram username const validateInstagram = (username: string) => { if (!username) return "" // Empty is valid (optional field) // Instagram validation: lowercase, alphanumeric, underscores only, no spaces const instagramRegex = /^[a-z0-9_]+$/ if (!instagramRegex.test(username)) { return "Instagram username should contain only lowercase letters, numbers, and underscores." } return "" } // Validate Facebook URL const validateFacebook = (url: string) => { if (!url) return "" // Empty is valid (optional field) // Basic URL validation for Facebook if (url.includes(" ")) { return "Facebook URL should not contain spaces." } // Simple check for facebook.com domain if (url && !url.includes("facebook.com") && !url.includes("fb.com")) { return "Please enter a valid Facebook URL (e.g., www.facebook.com/example)." } return "" } // Validate TikTok username const validateTikTok = (username: string) => { if (!username) return "" // Empty is valid (optional field) // TikTok validation: lowercase, alphanumeric, underscores only, no spaces const tiktokRegex = /^[a-z0-9_]+$/ if (!tiktokRegex.test(username)) { return "TikTok username should contain only lowercase letters, numbers, and underscores." } return "" } // For auto-save functionality const [debouncedFormData, setDebouncedFormData] = useState(formData) useEffect(() => { if (autoSave && mode === "dashboard") { const timer = setTimeout(() => { setDebouncedFormData(formData) }, 1000) return () => clearTimeout(timer) } }, [formData, autoSave, mode]) useEffect(() => { if (autoSave && mode === "dashboard" && debouncedFormData !== formData) { handleSave() } }, [debouncedFormData]) // eslint-disable-line react-hooks/exhaustive-deps // Handle checkbox changes directly without useEffect const handleNoReservationsChange = (checked: boolean) => { if (checked) { // If checking "no reservations", disable other options setNoReservations(true) setByPhone(false) setByOnlineSystem(false) updateFormData({ reservationMethod: "none" }) } else { // If unchecking "no reservations", just uncheck it without selecting anything else setNoReservations(false) // Only update the form data if another option is already selected if (byPhone) { updateFormData({ reservationMethod: "phone" }) } else if (byOnlineSystem) { updateFormData({ reservationMethod: "online" }) } else { // If nothing else is selected, leave reservationMethod empty updateFormData({ reservationMethod: "" }) } } if (autoSave && mode === "dashboard") { const timer = setTimeout(() => { handleSave() }, 500) return () => clearTimeout(timer) } } const handleByPhoneChange = (checked: boolean) => { setByPhone(checked) if (checked) { // If checking "by phone", uncheck "no reservations" setNoReservations(false) updateFormData({ reservationMethod: "phone" }) } else if (!byOnlineSystem && !noReservations) { // If unchecking and nothing else is selected, leave empty updateFormData({ reservationMethod: "" }) } if (autoSave && mode === "dashboard") { const timer = setTimeout(() => { handleSave() }, 500) return () => clearTimeout(timer) } } const handleByOnlineSystemChange = (checked: boolean) => { setByOnlineSystem(checked) if (checked) { // If checking "online system", uncheck "no reservations" setNoReservations(false) updateFormData({ reservationMethod: "online" }) } else if (!byPhone && !noReservations) { // If unchecking and nothing else is selected, leave empty updateFormData({ reservationMethod: "" }) } if (autoSave && mode === "dashboard") { const timer = setTimeout(() => { handleSave() }, 500) return () => clearTimeout(timer) } } // Handle Instagram input with validation const handleInstagramChange = (value: string) => { const cleanValue = value.startsWith("@") ? value.substring(1) : value updateFormData({ instagram: cleanValue }) setInstagramError(validateInstagram(cleanValue)) } // Handle Facebook input with validation const handleFacebookChange = (value: string) => { updateFormData({ facebook: value }) setFacebookError(validateFacebook(value)) } // Handle TikTok input with validation const handleTikTokChange = (value: string) => { const cleanValue = value.startsWith("@") ? value.substring(1) : value updateFormData({ tiktok: cleanValue }) setTiktokError(validateTikTok(cleanValue)) } const handleSave = async () => { // Validate all fields before submission const instagramValidation = validateInstagram(formData.instagram || "") const facebookValidation = validateFacebook(formData.facebook || "") const tiktokValidation = validateTikTok(formData.tiktok || "") setInstagramError(instagramValidation) setFacebookError(facebookValidation) setTiktokError(tiktokValidation) // Only proceed if all validations pass if (!instagramValidation && !facebookValidation && !tiktokValidation) { setIsSaving(true) try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 500)) console.log("Reservations and social info updated:", { reservationMethod: formData.reservationMethod, instagram: formData.instagram, facebook: formData.facebook, tiktok: formData.tiktok, }) setLastSaved(new Date()) } catch (error) { console.error("Error saving reservations and social info:", error) } finally { setIsSaving(false) } } } // Validate all fields on initial load and when they change useEffect(() => { setInstagramError(validateInstagram(formData.instagram || "")) setFacebookError(validateFacebook(formData.facebook || "")) setTiktokError(validateTikTok(formData.tiktok || "")) }, [formData.instagram, formData.facebook, formData.tiktok]) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Validate all fields before submission const instagramValidation = validateInstagram(formData.instagram || "") const facebookValidation = validateFacebook(formData.facebook || "") const tiktokValidation = validateTikTok(formData.tiktok || "") setInstagramError(instagramValidation) setFacebookError(facebookValidation) setTiktokError(tiktokValidation) // Only proceed if all validations pass if (!instagramValidation && !facebookValidation && !tiktokValidation) { if (mode === "dashboard") { handleSave() } else if (onSubmit) { onSubmit() } } } return (

{mode === "onboarding" && (

Reservations and social networks

To integrate them on your site

)}

How do you manage reservations?

{mode === "onboarding" &&

Select one or more options

}

handleByPhoneChange(checked === true)} disabled={noReservations} /> By phone

handleByOnlineSystemChange(checked === true)} disabled={noReservations} /> With an online reservation system

handleNoReservationsChange(checked === true)} /> I do not take reservations.

Restaurant Instagram (optional)

@ handleInstagramChange(e.target.value)} placeholder="example" className={`border-0 ${instagramError ? "border-red-500" : ""}`} />

{instagramError &&

{instagramError}

}

Use only lowercase letters, numbers, and underscores without space.

Restaurant Facebook (optional) handleFacebookChange(e.target.value)} placeholder="www.facebook.com/example" className={facebookError ? "border-red-500" : ""} /> {facebookError &&

{facebookError}

}

Enter a valid Facebook URL without spaces.

Restaurant TikTok (optional)

@ handleTikTokChange(e.target.value)} placeholder="example" className={`border-0 ${tiktokError ? "border-red-500" : ""}`} />

{tiktokError &&

{tiktokError}

}

Use only lowercase letters, numbers, and underscores without space.

{mode === "dashboard" && lastSaved && (

Last saved: {lastSaved.toLocaleTimeString()}

)}

) } [V0_FILE]typescriptreact:file="components/forms/time-slot.tsx" isMerged="true" "use client" import { X, Plus } from "lucide-react" import type { TimeSlot as TimeSlotType } from "@/types/form-types" import { timeOptions } from "@/lib/onboarding/form-data" interface TimeSlotProps { slot: TimeSlotType index: number day: string isOpen: boolean isDaySelected: boolean totalSlots: number otherSlots: TimeSlotType[] onUpdate: (day: string, index: number, field: "start" | "end", value: string) => void onAdd: (day: string) => void onRemove: (day: string, index: number) => void } export function TimeSlot({ slot, index, day, isOpen, isDaySelected, totalSlots, otherSlots, onUpdate, onAdd, onRemove, }: TimeSlotProps) { // Find the latest end time from previous slots const getLatestEndTime = () => { if (index === 0) return "00:00" // First slot can start from 12AM // Sort other slots by end time and get the latest one const sortedSlots = [...otherSlots] .filter((_, i) => i < index) // Only consider slots before current one .sort((a, b) => { const aHour = Number.parseInt(a.end.split(":")[0]) const bHour = Number.parseInt(b.end.split(":")[0]) return bHour - aHour }) return sortedSlots.length > 0 ? sortedSlots[0].end : "00:00" } // Check if a time is already selected in another slot const isTimeSelected = (time: string, field: "start" | "end") => { return otherSlots.some( (otherSlot, i) => i !== index && // Don't compare with self ((field === "start" && otherSlot.start === time) || (field === "end" && otherSlot.end === time)), ) } // Check if a time is within any existing slot's range const isTimeInRange = (time: string) => { const checkTime = Number.parseInt(time.split(":")[0]) return otherSlots.some((otherSlot, i) => { if (i === index) return false // Skip current slot const startTime = Number.parseInt(otherSlot.start.split(":")[0]) const endTime = Number.parseInt(otherSlot.end.split(":")[0]) return checkTime >= startTime && checkTime < endTime }) } // Check if time is before the latest end time of previous slots const isBeforeLatestEndTime = (time: string) => { const latestEnd = getLatestEndTime() const latestEndHour = Number.parseInt(latestEnd.split(":")[0]) const timeHour = Number.parseInt(time.split(":")[0]) return timeHour < latestEndHour } // Validate if end time is after start time const isValidEndTime = (startTime: string, endTime: string) => { const start = Number.parseInt(startTime.split(":")[0]) const end = Number.parseInt(endTime.split(":")[0]) return end > start } // Handle start time change with validation const handleStartTimeChange = (value: string) => { if (!isValidEndTime(value, slot.end)) { const startHour = Number.parseInt(value.split(":")[0]) const newEndTime = `${Math.min(startHour + 2, 23)}:00` onUpdate(day, index, "start", value) onUpdate(day, index, "end", newEndTime) } else { onUpdate(day, index, "start", value) } } // Handle end time change with validation const handleEndTimeChange = (value: string) => { if (isValidEndTime(slot.start, value)) { onUpdate(day, index, "end", value) } } // Get the latest end time for validation const latestEndTime = getLatestEndTime() return (

{index === 0 ? ( ) : ( )}

) } [V0_FILE]typescriptreact:file="components/forms/domain-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Check, X } from "lucide-react" import type { FormData } from "@/types/form-types" interface DomainFormProps { formData: Pick updateFormData: (data: Partial) => void onSubmit?: () => void mode?: "onboarding" | "dashboard" autoSave?: boolean } export function DomainForm({ formData, updateFormData, onSubmit, mode = "onboarding", autoSave = false, }: DomainFormProps) { const [isChecking, setIsChecking] = useState(false) const [error, setError] = useState("") const [isSaving, setIsSaving] = useState(false) const [lastSaved, setLastSaved] = useState(null) const validateDomain = (domain: string) => { if (!domain) { return "Domain name is required" } // Basic domain validation const domainRegex = /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/i if (!domainRegex.test(domain)) { return "Domain can only contain letters, numbers, and hyphens, and cannot start or end with a hyphen" } return "" } const checkDomainAvailability = async () => { const validationError = validateDomain(formData.domain) if (validationError) { setError(validationError) updateFormData({ isDomainAvailable: false }) return } setIsChecking(true) setError("") try { // Simulate API call to check domain availability await new Promise((resolve) => setTimeout(resolve, 1000)) // For demo purposes, we'll consider domains with even length as available const isAvailable = formData.domain.length % 2 === 0 updateFormData({ isDomainAvailable: isAvailable }) if (!isAvailable) { setError(`Domain ${formData.domain}.example.com is not available`) } } catch (error) { console.error("Error checking domain availability:", error) setError("Failed to check domain availability. Please try again.") updateFormData({ isDomainAvailable: false }) } finally { setIsChecking(false) } } const handleDomainChange = (value: string) => { // Remove spaces and convert to lowercase const cleanValue = value.replace(/\s+/g, "").toLowerCase() updateFormData({ domain: cleanValue, isDomainAvailable: false, // Reset availability when domain changes }) setError("") } const handleSave = async () => { const validationError = validateDomain(formData.domain) if (validationError) { setError(validationError) return } if (!formData.isDomainAvailable) { setError("Please check domain availability before saving") return } setIsSaving(true) try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 500)) console.log("Domain updated:", { domain: formData.domain, isDomainAvailable: formData.isDomainAvailable, }) setLastSaved(new Date()) } catch (error) { console.error("Error saving domain:", error) setError("Failed to save domain. Please try again.") } finally { setIsSaving(false) } } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() const validationError = validateDomain(formData.domain) if (validationError) { setError(validationError) return } if (!formData.isDomainAvailable) { setError("Please check domain availability before proceeding") return } if (mode === "dashboard") { handleSave() } else if (onSubmit) { onSubmit() } } return (

{mode === "onboarding" && (

Choose your domain

This will be your website address

)}

Domain name

handleDomainChange(e.target.value)} placeholder="your-restaurant" className={`pr-12 ${error ? "border-red-500" : ""}`} />

{formData.isDomainAvailable && } {error && }

.example.com

{error &&

{error}

} {formData.isDomainAvailable && (

Domain {formData.domain}.example.com is available!

)}

{mode === "dashboard" && lastSaved && (

Last saved: {lastSaved.toLocaleTimeString()}

)}

) } [V0_FILE]typescriptreact:file="components/forms/form-wrapper.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { BasicInfoForm } from "./basic-info-form" import { MenuVisualsForm } from "./menu-visuals-form" import { HoursOperationForm } from "./hours-operation-form" import { ReservationsSocialForm } from "./reservations-social-form" import { DomainForm } from "./domain-form" import type { FormData } from "@/types/form-types" interface FormWrapperProps { initialData: FormData mode?: "onboarding" | "dashboard" autoSave?: boolean onSave?: (data: FormData) => void } export function FormWrapper({ initialData, mode = "dashboard", autoSave = true, onSave }: FormWrapperProps) { const [formData, setFormData] = useState(initialData) const [activeTab, setActiveTab] = useState("basic-info") const updateFormData = (data: Partial) => { const updatedData = { ...formData, ...data } setFormData(updatedData) if (onSave) { onSave(updatedData) } } return ( Restaurant Settings Basic Info Menu & Visuals Hours Reservations & Social Domain ) } [V0_FILE]typescriptreact:file="types/form-types.ts" isMerged="true" export interface TimeSlot { start: string end: string } export interface DaySchedule { isOpen: boolean slots: TimeSlot[] } export interface HoursData { Monday: DaySchedule Tuesday: DaySchedule Wednesday: DaySchedule Thursday: DaySchedule Friday: DaySchedule Saturday: DaySchedule Sunday: DaySchedule [key: string]: DaySchedule } export interface FormData { // Basic information restaurantName: string description: string address: string phone: string email: string // Menu and visuals menu: File | null logo: File | null photos: File[] // Hours of operation hours: HoursData // Reservations and social networks reservationMethod: "phone" | "online" | "none" | "" instagram: string facebook: string tiktok: string // Domain domain: string isDomainAvailable: boolean } [V0_FILE]typescriptreact:file="lib/onboarding/file-utils.ts" isMerged="true" export const ALLOWED_MENU_TYPES = ["application/pdf", "image/png", "image/jpeg", "image/jpg"] export const ALLOWED_LOGO_TYPES = ["image/png", "image/jpeg", "image/jpg", "image/svg+xml"] export const ALLOWED_PHOTO_TYPES = ["image/png", "image/jpeg", "image/jpg"] export function isFileTypeAllowed(file: File, allowedTypes: string[]): boolean { return allowedTypes.includes(file.type) } export function getFileTypeErrorMessage(fileType: string, allowedTypes: string[]): string { const formattedAllowedTypes = allowedTypes .map((type) => { return type.replace("application/", "").replace("image/", "").toUpperCase() }) .join(", ") return `File type ${fileType.split("/")[1].toUpperCase()} is not allowed. Please use ${formattedAllowedTypes} only.` } [V0_FILE]typescriptreact:file="lib/onboarding/validation.ts" isMerged="true" import type { FormData } from "@/types/form-types" export function validateBasicInfo( data: Pick, ) { const errors: Partial> = {} // Restaurant name validation if (!data.restaurantName) { errors.restaurantName = "Restaurant name is required" } else if (data.restaurantName.length < 2) { errors.restaurantName = "Restaurant name must be at least 2 characters" } else if (data.restaurantName.length > 50) { errors.restaurantName = "Restaurant name must be less than 50 characters" } // Description validation if (!data.description) { errors.description = "Description is required" } else if (data.description.length < 10) { errors.description = "Description must be at least 10 characters" } else if (data.description.length > 500) { errors.description = "Description must be less than 500 characters" } // Address validation if (!data.address) { errors.address = "Address is required" } else if (data.address.length < 5) { errors.address = "Please enter a valid address" } // Email validation (optional field) if (data.email) { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(data.email)) { errors.email = "Please enter a valid email address" } } // Phone validation (optional field) if (data.phone) { // Simple phone validation - should contain only numbers, spaces, and some special characters const phoneRegex = /^[0-9\s\-+()]*$/ if (!phoneRegex.test(data.phone)) { errors.phone = "Please enter a valid phone number" } } return errors } [V0_FILE]typescript:file="lib/onboarding/form-data.ts" isQuickEdit="true" isMerged="true" export const daysOfWeek = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] export const timeOptions = Array.from({ length: 24 }, (_, i) => { const hour = i.toString().padStart(2, "0") return { value: `${hour}:00`, label: `${hour}:00`, } }) export const initialFormData = { restaurantName: "", description: "", address: "", phone: "", email: "", menu: null, logo: null, photos: [], hours: { Monday: { isOpen: true, slots: [{ start: "09:00", end: "17:00" }] }, Tuesday: { isOpen: true, slots: [{ start: "09:00", end: "17:00" }] }, Wednesday: { isOpen: true, slots: [{ start: "09:00", end: "17:00" }] }, Thursday: { isOpen: true, slots: [{ start: "09:00", end: "17:00" }] }, Friday: { isOpen: true, slots: [{ start: "09:00", end: "21:00" }] }, Saturday: { isOpen: true, slots: [{ start: "11:00", end: "22:00" }] }, Sunday: { isOpen: false, slots: [] }, }, reservationMethod: "", instagram: "", facebook: "", tiktok: "", domain: "", isDomainAvailable: false, } [V0_FILE]typescriptreact:file="app/dashboard/settings/basic-info/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { BasicInfoForm } from "@/components/forms/basic-info-form" import { initialFormData } from "@/lib/onboarding/form-data" import type { FormData } from "@/types/form-types" import { DashboardSettingsLayout } from "@/components/dashboard/settings-layout" export default function BasicInfoSettingsPage() { const [formData, setFormData] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Simulate fetching data from API const fetchData = async () => { setIsLoading(true) try { // In a real app, this would be an API call await new Promise((resolve) => setTimeout(resolve, 1000)) // For demo purposes, we'll use the initial data with some values filled in const data: FormData = { ...initialFormData, restaurantName: "Delicious Bites", description: "A cozy restaurant serving international cuisine", address: "123 Main Street, Anytown", phone: "+1 (555) 123-4567", email: "contact@deliciousbites.com", } setFormData(data) } catch (error) { console.error("Error fetching restaurant data:", error) } finally { setIsLoading(false) } } fetchData() }, []) const updateFormData = (data: Partial) => { if (formData) { setFormData({ ...formData, ...data }) } } if (isLoading) { return (

Loading basic information...

) } if (!formData) { return (

Failed to load restaurant information

) } return (

Basic Information

) } [V0_FILE]typescriptreact:file="app/dashboard/settings/hours/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { HoursOperationForm } from "@/components/forms/hours-operation-form" import { initialFormData } from "@/lib/onboarding/form-data" import type { FormData } from "@/types/form-types" import { DashboardSettingsLayout } from "@/components/dashboard/settings-layout" export default function HoursSettingsPage() { const [formData, setFormData] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Simulate fetching data from API const fetchData = async () => { setIsLoading(true) try { // In a real app, this would be an API call await new Promise((resolve) => setTimeout(resolve, 1000)) // For demo purposes, we'll use the initial data with some custom hours const data: FormData = { ...initialFormData, hours: { Monday: { isOpen: true, slots: [{ start: "09:00", end: "17:00" }] }, Tuesday: { isOpen: true, slots: [{ start: "09:00", end: "17:00" }] }, Wednesday: { isOpen: true, slots: [{ start: "09:00", end: "17:00" }] }, Thursday: { isOpen: true, slots: [{ start: "09:00", end: "17:00" }] }, Friday: { isOpen: true, slots: [{ start: "09:00", end: "21:00" }] }, Saturday: { isOpen: true, slots: [{ start: "11:00", end: "22:00" }] }, Sunday: { isOpen: false, slots: [] }, }, } setFormData(data) } catch (error) { console.error("Error fetching restaurant hours:", error) } finally { setIsLoading(false) } } fetchData() }, []) const updateFormData = (data: Partial) => { if (formData) { setFormData({ ...formData, ...data }) } } if (isLoading) { return (

Loading operating hours...

) } if (!formData) { return (

Failed to load operating hours

) } return (

Operating Hours

) } [V0_FILE]typescriptreact:file="app/dashboard/settings/menu-visuals/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { MenuVisualsForm } from "@/components/forms/menu-visuals-form" import { initialFormData } from "@/lib/onboarding/form-data" import type { FormData } from "@/types/form-types" import { DashboardSettingsLayout } from "@/components/dashboard/settings-layout" export default function MenuVisualsSettingsPage() { const [formData, setFormData] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Simulate fetching data from API const fetchData = async () => { setIsLoading(true) try { // In a real app, this would be an API call await new Promise((resolve) => setTimeout(resolve, 1000)) // For demo purposes, we'll use the initial data // Note: In a real app, you would fetch the actual files or file references const data: FormData = { ...initialFormData, // We can't simulate files in this demo, so we'll just use empty arrays photos: [], } setFormData(data) } catch (error) { console.error("Error fetching menu and visuals data:", error) } finally { setIsLoading(false) } } fetchData() }, []) const updateFormData = (data: Partial) => { if (formData) { setFormData({ ...formData, ...data }) } } if (isLoading) { return (

Loading menu and visuals...

) } if (!formData) { return (

Failed to load menu and visuals

) } return (

Menu & Visuals

) } [V0_FILE]typescriptreact:file="app/dashboard/settings/reservations-social/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { ReservationsSocialForm } from "@/components/forms/reservations-social-form" import { initialFormData } from "@/lib/onboarding/form-data" import type { FormData } from "@/types/form-types" import { DashboardSettingsLayout } from "@/components/dashboard/settings-layout" export default function ReservationsSocialSettingsPage() { const [formData, setFormData] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Simulate fetching data from API const fetchData = async () => { setIsLoading(true) try { // In a real app, this would be an API call await new Promise((resolve) => setTimeout(resolve, 1000)) // For demo purposes, we'll use the initial data with some values filled in const data: FormData = { ...initialFormData, reservationMethod: "phone", instagram: "deliciousbites", facebook: "www.facebook.com/deliciousbites", tiktok: "deliciousbites", } setFormData(data) } catch (error) { console.error("Error fetching reservations and social data:", error) } finally { setIsLoading(false) } } fetchData() }, []) const updateFormData = (data: Partial) => { if (formData) { setFormData({ ...formData, ...data }) } } if (isLoading) { return (

Loading reservations and social data...

) } if (!formData) { return (

Failed to load reservations and social data

) } return (

Reservations & Social Media

) } [V0_FILE]typescriptreact:file="app/dashboard/settings/domain/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { DomainForm } from "@/components/forms/domain-form" import { initialFormData } from "@/lib/onboarding/form-data" import type { FormData } from "@/types/form-types" import { DashboardSettingsLayout } from "@/components/dashboard/settings-layout" export default function DomainSettingsPage() { const [formData, setFormData] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Simulate fetching data from API const fetchData = async () => { setIsLoading(true) try { // In a real app, this would be an API call await new Promise((resolve) => setTimeout(resolve, 1000)) // For demo purposes, we'll use the initial data with some values filled in const data: FormData = { ...initialFormData, domain: "delicious-bites", isDomainAvailable: true, } setFormData(data) } catch (error) { console.error("Error fetching domain data:", error) } finally { setIsLoading(false) } } fetchData() }, []) const updateFormData = (data: Partial) => { if (formData) { setFormData({ ...formData, ...data }) } } if (isLoading) { return (

Loading domain information...

) } if (!formData) { return (

Failed to load domain information

) } return (

Domain Settings

) } [V0_FILE]typescriptreact:file="components/dashboard/settings-layout.tsx" isMerged="true" import type React from "react" import Link from "next/link" import { Card } from "@/components/ui/card" interface DashboardSettingsLayoutProps { children: React.ReactNode } export function DashboardSettingsLayout({ children }: DashboardSettingsLayoutProps) { const navItems = [ { href: "/dashboard/settings/basic-info", label: "Basic Info" }, { href: "/dashboard/settings/menu-visuals", label: "Menu & Visuals" }, { href: "/dashboard/settings/hours", label: "Hours" }, { href: "/dashboard/settings/reservations-social", label: "Reservations & Social" }, { href: "/dashboard/settings/domain", label: "Domain" }, ] return (

Restaurant Settings

{/* Sidebar Navigation */}

{/* Main Content */}

{children}

) } [V0_FILE]typescriptreact:file="app/dashboard/settings/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { redirect } from "next/navigation" export default function SettingsPage() { // Redirect to the basic info page by default redirect("/dashboard/settings/basic-info") } [V0_FILE]typescriptreact:file="app/dashboard/basic-information/page.tsx" "use client" import type { FormData } from "@/types/form-types" // Added missing import import { PageHeader } from "@/components/dashboard/edit/page-header" import { BasicInfoForm } from "@/components/forms/basic-info-form" // Updated import path import { useEffect, useState } from "react" import { initialFormData } from "@/lib/onboarding/form-data" export default function BasicInformation() { const [formData, setFormData] = useState(null) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { // Simulate fetching data from API const fetchData = async () => { setIsLoading(true) setError(null) try { // In a real app, this would be an API call await new Promise((resolve) => setTimeout(resolve, 1000)) // For demo purposes, we'll use the initial data with some values filled in const data: FormData = { ...initialFormData, restaurantName: "Delicious Bites", description: "A cozy restaurant serving international cuisine", address: "123 Main Street, Anytown", phone: "+1 (555) 123-4567", email: "contact@deliciousbites.com", } setFormData(data) } catch (error) { console.error("Error fetching restaurant data:", error) setError("Failed to load restaurant data. Please try again.") } finally { setIsLoading(false) } } fetchData() }, []) const updateFormData = (data: Partial) => { if (formData) { setFormData({ ...formData, ...data }) } } return (

{isLoading && (

)} {error &&

{error}

} {!isLoading && !error && formData && ( )}

) } [V0_FILE]typescriptreact:file="app/dashboard/hours/page.tsx" "use client" import type { FormData } from "@/types/form-types" import { PageHeader } from "@/components/dashboard/edit/page-header" import { HoursOperationForm } from "@/components/forms/hours-operation-form" import { useEffect, useState } from "react" import { initialFormData } from "@/lib/onboarding/form-data" export default function HoursPage() { const [formData, setFormData] = useState(null) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { // Simulate fetching data from API const fetchData = async () => { setIsLoading(true) setError(null) try { // In a real app, this would be an API call await new Promise((resolve) => setTimeout(resolve, 1000)) // For demo purposes, we'll use the initial data with custom hours const data: FormData = { ...initialFormData, hours: { Monday: { isOpen: true, slots: [{ start: "09:00", end: "17:00" }] }, Tuesday: { isOpen: true, slots: [{ start: "09:00", end: "17:00" }] }, Wednesday: { isOpen: true, slots: [{ start: "09:00", end: "17:00" }] }, Thursday: { isOpen: true, slots: [{ start: "09:00", end: "17:00" }] }, Friday: { isOpen: true, slots: [{ start: "09:00", end: "21:00" }] }, Saturday: { isOpen: true, slots: [{ start: "11:00", end: "22:00" }] }, Sunday: { isOpen: false, slots: [] }, }, } setFormData(data) } catch (error) { console.error("Error fetching hours data:", error) setError("Failed to load operating hours. Please try again.") } finally { setIsLoading(false) } } fetchData() }, []) const updateFormData = (data: Partial) => { if (formData) { setFormData({ ...formData, ...data }) } } return (

{isLoading && (

)} {error &&

{error}

} {!isLoading && !error && formData && ( )}

) } [V0_FILE]typescriptreact:file="app/dashboard/menu-visuals/page.tsx" "use client" import type { FormData } from "@/types/form-types" import { PageHeader } from "@/components/dashboard/edit/page-header" import { MenuVisualsForm } from "@/components/forms/menu-visuals-form" import { useEffect, useState } from "react" import { initialFormData } from "@/lib/onboarding/form-data" export default function MenuVisualsPage() { const [formData, setFormData] = useState(null) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { // Simulate fetching data from API const fetchData = async () => { setIsLoading(true) setError(null) try { // In a real app, this would be an API call await new Promise((resolve) => setTimeout(resolve, 1000)) // For demo purposes, we'll use the initial data // Note: In a real app, you would fetch the actual files or file references const data: FormData = { ...initialFormData, // We can't simulate files in this demo, so we'll just use empty arrays photos: [], } setFormData(data) } catch (error) { console.error("Error fetching menu and visuals data:", error) setError("Failed to load menu and visuals. Please try again.") } finally { setIsLoading(false) } } fetchData() }, []) const updateFormData = (data: Partial) => { if (formData) { setFormData({ ...formData, ...data }) } } return (

{isLoading && (

)} {error &&

{error}

} {!isLoading && !error && formData && ( )}

) } [V0_FILE]typescriptreact:file="app/dashboard/reservations-social/page.tsx" "use client" import type { FormData } from "@/types/form-types" import { PageHeader } from "@/components/dashboard/edit/page-header" import { ReservationsSocialForm } from "@/components/forms/reservations-social-form" import { useEffect, useState } from "react" import { initialFormData } from "@/lib/onboarding/form-data" export default function ReservationsSocialPage() { const [formData, setFormData] = useState(null) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { // Simulate fetching data from API const fetchData = async () => { setIsLoading(true) setError(null) try { // In a real app, this would be an API call await new Promise((resolve) => setTimeout(resolve, 1000)) // For demo purposes, we'll use the initial data with some values filled in const data: FormData = { ...initialFormData, reservationMethod: "phone", instagram: "deliciousbites", facebook: "www.facebook.com/deliciousbites", tiktok: "deliciousbites", } setFormData(data) } catch (error) { console.error("Error fetching reservations and social data:", error) setError("Failed to load reservations and social data. Please try again.") } finally { setIsLoading(false) } } fetchData() }, []) const updateFormData = (data: Partial) => { if (formData) { setFormData({ ...formData, ...data }) } } return (

{isLoading && (

)} {error &&

{error}

} {!isLoading && !error && formData && ( )}

) } [V0_FILE]typescriptreact:file="app/dashboard/domain/page.tsx" "use client" import type { FormData } from "@/types/form-types" import { PageHeader } from "@/components/dashboard/edit/page-header" import { DomainForm } from "@/components/forms/domain-form" import { useEffect, useState } from "react" import { initialFormData } from "@/lib/onboarding/form-data" export default function DomainPage() { const [formData, setFormData] = useState(null) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { // Simulate fetching data from API const fetchData = async () => { setIsLoading(true) setError(null) try { // In a real app, this would be an API call await new Promise((resolve) => setTimeout(resolve, 1000)) // For demo purposes, we'll use the initial data with some values filled in const data: FormData = { ...initialFormData, domain: "delicious-bites", isDomainAvailable: true, } setFormData(data) } catch (error) { console.error("Error fetching domain data:", error) setError("Failed to load domain information. Please try again.") } finally { setIsLoading(false) } } fetchData() }, []) const updateFormData = (data: Partial) => { if (formData) { setFormData({ ...formData, ...data }) } } return (

{isLoading && (

)} {error &&

{error}

} {!isLoading && !error && formData && ( )}

) } [V0_FILE]typescriptreact:file="components/dashboard/edit/page-header.tsx" interface PageHeaderProps { title: string description?: string } export function PageHeader({ title, description }: PageHeaderProps) { return (

{title}

{description &&

{description}

}

) } 9a:T4be,export default function FormPage() { // 1. State management const [formData, setFormData] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); // 2. Data fetching useEffect(() => { const fetchData = async () => { setIsLoading(true); setError(null); try { // Fetch data const data = await fetchDataFromAPI(); setFormData(data); } catch (error) { setError("Error message"); } finally { setIsLoading(false); } }; fetchData(); }, []); // 3. Update handler const updateFormData = (data: Partial) => { if (formData) { setFormData({ ...formData, ...data }); } }; // 4. Render with conditional states return (

{isLoading && } {error && } {!isLoading && !error && formData && ( )}

); }9b:T157ab,[V0_FILE]typescriptreact:file="components/forms/basic-info-form.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { validateBasicInfo } from "@/lib/onboarding/validation" import type { FormData } from "@/types/form-types" interface BasicInfoFormProps { formData: Pick updateFormData: (data: Partial) => void onSubmit?: () => void mode?: "onboarding" | "dashboard" autoSave?: boolean } export function BasicInfoForm({ formData, updateFormData, onSubmit, mode = "onboarding", autoSave = false, }: BasicInfoFormProps) { const [errors, setErrors] = useState>>({}) const [isSaving, setIsSaving] = useState(false) const [lastSaved, setLastSaved] = useState(null) // For auto-save functionality const [debouncedFormData, setDebouncedFormData] = useState(formData) useEffect(() => { if (autoSave && mode === "dashboard") { const timer = setTimeout(() => { setDebouncedFormData(formData) }, 1000) return () => clearTimeout(timer) } }, [formData, autoSave, mode]) useEffect(() => { if (autoSave && mode === "dashboard" && debouncedFormData !== formData) { handleSave() } }, [debouncedFormData]) // eslint-disable-line react-hooks/exhaustive-deps const handleSave = async () => { const validationErrors = validateBasicInfo(formData) setErrors(validationErrors) if (Object.keys(validationErrors).length === 0) { setIsSaving(true) try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 500)) console.log("Basic info updated:", formData) setLastSaved(new Date()) } catch (error) { console.error("Error saving basic info:", error) } finally { setIsSaving(false) } } } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() const validationErrors = validateBasicInfo(formData) setErrors(validationErrors) if (Object.keys(validationErrors).length === 0) { if (mode === "dashboard") { handleSave() } else if (onSubmit) { onSubmit() } } } const handleChange = (field: keyof typeof formData, value: string) => { updateFormData({ [field]: value } as Partial) // Clear error when user starts typing if (errors[field]) { setErrors({ ...errors, [field]: undefined }) } } return (

{mode === "onboarding" && (

Basic information

To display them on your site

)}

Restaurant name handleChange("restaurantName", e.target.value)} placeholder="Enter restaurant name" className={errors.restaurantName ? "border-red-500" : ""} /> {errors.restaurantName &&

{errors.restaurantName}

}

Short description handleChange("description", e.target.value)} placeholder="Describe your restaurant" className={errors.description ? "border-red-500" : ""} /> {errors.description &&

{errors.description}

}

Address handleChange("address", e.target.value)} placeholder="Start typing your address..." className={errors.address ? "border-red-500" : ""} /> {errors.address &&

{errors.address}

}

Customer phone (optional) handleChange("phone", e.target.value)} placeholder="Enter phone number" />

Email address to display (optional) handleChange("email", e.target.value)} placeholder="Enter email address" />

{mode === "dashboard" && lastSaved && (

Last saved: {lastSaved.toLocaleTimeString()}

)}

{mode === "onboarding" && (

Opening Hours

To display them on your site

)}

{daysOfWeek.map((day) => (

{day}

{/* Time slots - always visible but disabled until status is selected */}

{formData.hours[day].slots.map((slot, index) => ( i !== index)} onUpdate={updateTimeSlot} onAdd={addTimeSlot} onRemove={removeTimeSlot} /> ))} {errors[day] &&

{errors[day]}

}

))}

{mode === "dashboard" && lastSaved && (

Last saved: {lastSaved.toLocaleTimeString()}

)}

{mode === "onboarding" && (

Menu and visuals

To display them on your site

)}

Menu (optional)

{formData.menu ? (

{formData.menu.name}

) : (

Click to upload menu (PDF, PNG, JPG)

)} {errors.menu &&

{errors.menu}

}

Logo (optional)

{formData.logo ? (

) : (

Upload your logo

PNG, SVG, or JPG format

Browse files

)} {errors.logo &&

{errors.logo}

}

Photos *

{formData.photos.map((photo, index) => (

{photo.name}

))} {formData.photos.length === 0 && (

Click to upload photos (PNG, JPG only)

)}

{formData.photos.length > 0 && (

Add more photos

)} {errors.photos &&

{errors.photos}

}

{mode === "dashboard" && lastSaved && (

Last saved: {lastSaved.toLocaleTimeString()}

)}

{mode === "onboarding" && (

Reservations and social networks

To integrate them on your site

)}

How do you manage reservations?

{mode === "onboarding" &&

Select one or more options

}

handleByPhoneChange(checked === true)} disabled={noReservations} /> By phone

handleByOnlineSystemChange(checked === true)} disabled={noReservations} /> With an online reservation system

handleNoReservationsChange(checked === true)} /> I do not take reservations.

Restaurant Instagram (optional)

@ handleInstagramChange(e.target.value)} placeholder="example" className={`border-0 ${instagramError ? "border-red-500" : ""}`} />

{instagramError &&

{instagramError}

}

Use only lowercase letters, numbers, and underscores without space.

Restaurant Facebook (optional) handleFacebookChange(e.target.value)} placeholder="www.facebook.com/example" className={facebookError ? "border-red-500" : ""} /> {facebookError &&

{facebookError}

}

Enter a valid Facebook URL without spaces.

Restaurant TikTok (optional)

@ handleTikTokChange(e.target.value)} placeholder="example" className={`border-0 ${tiktokError ? "border-red-500" : ""}`} />

{tiktokError &&

{tiktokError}

}

Use only lowercase letters, numbers, and underscores without space.

{mode === "dashboard" && lastSaved && (

Last saved: {lastSaved.toLocaleTimeString()}

)}

{index === 0 ? ( ) : ( )}

{mode === "onboarding" && (

Choose your domain

This will be your website address

)}

Domain name

handleDomainChange(e.target.value)} placeholder="your-restaurant" className={`pr-12 ${error ? "border-red-500" : ""}`} />

{formData.isDomainAvailable && } {error && }

.example.com

{error &&

{error}

} {formData.isDomainAvailable && (

Domain {formData.domain}.example.com is available!

)}

{mode === "dashboard" && lastSaved && (

Last saved: {lastSaved.toLocaleTimeString()}

)}

Loading basic information...

) } if (!formData) { return (

Failed to load restaurant information

) } return (

Basic Information

Loading operating hours...

) } if (!formData) { return (

Failed to load operating hours

) } return (

Operating Hours

Loading menu and visuals...

) } if (!formData) { return (

Failed to load menu and visuals

) } return (

Menu & Visuals

Loading reservations and social data...

) } if (!formData) { return (

Failed to load reservations and social data

) } return (

Reservations & Social Media

Loading domain information...

) } if (!formData) { return (

Failed to load domain information

) } return (

Domain Settings

Restaurant Settings

{/* Sidebar Navigation */}

{/* Main Content */}

{children}

{isLoading && (

)} {error &&

{error}

} {!isLoading && !error && formData && ( )}

{isLoading && (

)} {error &&

{error}

} {!isLoading && !error && formData && ( )}

{isLoading && (

)} {error &&

{error}

} {!isLoading && !error && formData && ( )}

{isLoading && (

)} {error &&

{error}

} {!isLoading && !error && formData && ( )}

{isLoading && (

)} {error &&

{error}

} {!isLoading && !error && formData && ( )}

{title}

{description &&

{description}

}

) } 40:["$","$L5c",null,{"params":{"chatId":"g2pArBGUZnf"},"promises":{"attributes":"$@5d","externalMeta":"$@5e","latest":"$@83","messagesRange":"$@84","messages":"$@85","template":"$@62","passwordProtection":"$@86","gitStatus":"$@87"},"children":["$","$L88",null,{"chatId":"g2pArBGUZnf","children":["$","$L89",null,{"seedOnlyKeys":["@\"chat:state\",\"g2pArBGUZnf\","],"data":{"project:id":null,"block:output:initial":{"id":"b_M11nzFv6NkH","file":"$undefined","result":"$@8a"},"":null,"@\"block:mappings\",\"g2pArBGUZnf\",":{"sqlBlockExecutionStates":"$Q8b","blocksForkedFrom":"$Q8c","blocksTemplateIds":"$Q8d","blocksCreatedAt":"$Q8e","blocksShared":"$Q8f","blocksDeployed":"$Q90","blocksSubdomains":"$Q91","brandedBlocks":"$Q92","unlistedBlocks":"$Q93","blockOutputs":"$Q94"},"@\"chat:sql-exec-provider\",\"g2pArBGUZnf\",":null,"@\"chat:drafts\",null,":null,"@\"chat:state\",\"g2pArBGUZnf\",":{"messages":[{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"NNexUHCsjqjfrXTkhDUF7qb0gVSdgV8j","parentId":"$undefined","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-07-07T11:33:30.874Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_XYCYtcYm7uN","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"dgpdUXtNSsdUO63zTKrJ3t9m7eLVVeit","streaming":false,"finishReason":"stop","parentId":"NNexUHCsjqjfrXTkhDUF7qb0gVSdgV8j","type":"message"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"OKL2HbRdNyyelV0AymbXtUWz1GiOq9U2","parentId":"$undefined","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-07-07T11:33:30.874Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_GOTAXPzK9r8","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"wRb2nWjBJl4oj6p3cl5BAOCyjXE6iYq8","streaming":false,"finishReason":"stop","parentId":"OKL2HbRdNyyelV0AymbXtUWz1GiOq9U2","type":"message"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"o90uHCL4MSXgq74leRS8uHs7sQeATITG","parentId":"$undefined","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-07-07T11:33:30.874Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_q2l6rG4rCvI","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"I7pCU4h4a5TeS7Oi5pjn4Jh9B7Rq5bvb","streaming":false,"finishReason":"stop","parentId":"o90uHCL4MSXgq74leRS8uHs7sQeATITG","type":"message"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"W1B7a1Slyedi81rUjn3vKJU8mYOtPLIQ","parentId":"$undefined","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-07-07T11:33:30.874Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_iU8MGgB4JDi","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"0ZcAahELQcnq4gEnMMHWroL7HpELPu9j","streaming":false,"finishReason":"stop","parentId":"W1B7a1Slyedi81rUjn3vKJU8mYOtPLIQ","type":"message"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"$95"}],"version":1},"role":"user","id":"vJw18zwjSWCk89eFzN4XWXyTSSs1yYt6","attachments":[],"attachedSkills":"$undefined","attachedDesignSystemSkill":"$undefined","parentId":"$undefined","type":"message","authorId":"DGoqCZTvXmTDDE7qs3HhmACL","createdAt":"$D2025-03-27T10:02:08.362Z"},{"content":{"type":"message-binary-format","value":[[0,[["AssistantMessageContentPart",{"part":{"type":"task-thinking-v1","id":"thinking-0","parts":[{"type":"thinking-end","duration":6.294117647058823,"thought":"$96"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1},"id":"thinking-0"}],["p",{},["text",{},"I'll create more reusable versions of your form components that can be used both in the onboarding flow and in a dashboard for updates. Let's make them more flexible and maintainable."]],["p",{},["text",{},"I've created a comprehensive set of reusable form components that can be used both in your onboarding flow and in a dashboard for updates. Here's what I've improved:"]],["h3",{},["text",{},"Key Improvements"]],["ol",{"start":1},["li",{"index":1},["p",{},["strong",{},["text",{},"Mode Support"]],["text",{},": Added a "],["code",{},"mode"],["text",{}," prop to all forms that can be either \"onboarding\" or \"dashboard\""]],["ul",{"start":1},["li",{"index":1},["text",{},"In onboarding mode, forms show titles and descriptions"]],["li",{"index":2},["text",{},"In dashboard mode, forms are more compact and focused on editing"]]]],["li",{"index":2},["p",{},["strong",{},["text",{},"Auto-Save Functionality"]],["text",{},": Added "],["code",{},"autoSave"],["text",{}," prop that enables automatic saving when changes are made"]],["ul",{"start":1},["li",{"index":1},["text",{},"Debounced to prevent too many save operations"]],["li",{"index":2},["text",{},"Shows \"Last saved\" timestamp for better user feedback"]]]],["li",{"index":3},["p",{},["strong",{},["text",{},"Validation"]],["text",{},": Maintained all validation logic but improved error handling"]],["ul",{"start":1},["li",{"index":1},["text",{},"Errors clear automatically when users start typing"]],["li",{"index":2},["text",{},"Validation runs before saving in dashboard mode"]]]],["li",{"index":4},["p",{},["strong",{},["text",{},"Save States"]],["text",{},": Added loading states for save operations"]],["ul",{"start":1},["li",{"index":1},["text",{},"Button text changes to \"Saving...\" during save operations"]],["li",{"index":2},["text",{},"Disabled buttons during saving to prevent multiple submissions"]]]],["li",{"index":5},["p",{},["strong",{},["text",{},"Centralized Form Wrapper"]],["text",{},": Created a "],["code",{},"FormWrapper"],["text",{}," component that:"]],["ul",{"start":1},["li",{"index":1},["text",{},"Uses tabs to organize all form sections in one view"]],["li",{"index":2},["text",{},"Handles state management for the entire form"]],["li",{"index":3},["text",{},"Provides a consistent UI across all settings"]]]],["li",{"index":6},["p",{},["strong",{},["text",{},"Dashboard Integration"]],["text",{},": Created a dashboard settings page that:"]],["ul",{"start":1},["li",{"index":1},["text",{},"Loads initial data (simulated API call)"]],["li",{"index":2},["text",{},"Shows loading states"]],["li",{"index":3},["text",{},"Handles errors gracefully"]],["li",{"index":4},["text",{},"Logs updates to the console (would connect to an API in production)"]]]]],["h3",{},["text",{},"How to Use"]],["p",{},["text",{},"You can now use these forms in two ways:"]],["ol",{"start":1},["li",{"index":1},["strong",{},["text",{},"In Onboarding Flow"]],["text",{},":"]]],["Codeblock",{"lang":"typescriptreact","meta":{},"closed":true},""],["ol",{"start":2},["li",{"index":2},["strong",{},["text",{},"In Dashboard"]],["text",{},":"]]],["Codeblock",{"lang":"typescriptreact","meta":{},"closed":true},""],["p",{},["text",{},"Or use the complete form wrapper for a tabbed interface:"]],["Codeblock",{"lang":"typescriptreact","meta":{},"closed":true},""],["h3",{},["text",{},"Console Logging"]],["p",{},["text",{},"All forms now log their updates to the console when in dashboard mode, making it easy to see what data would be sent to your API. For example:"]],["Codeblock",{"lang":"plaintext","meta":{},"closed":true},"Basic info updated: {restaurantName: \"Delicious Bites\", description: \"A cozy restaurant...\"}"],["p",{},["text",{},"This implementation maintains all the functionality of your original forms while making them more reusable and suitable for a dashboard context."]]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"iLFtCjxqogrVanewrSTqCAUEwQ6dCBcy","streaming":false,"finishReason":"stop","vote":"$undefined","parentId":"vJw18zwjSWCk89eFzN4XWXyTSSs1yYt6","type":"message","creditCost":0.258777,"workMetrics":{"diffMap":{},"imageGenerationCost":"$undefined","imageGenerationCount":"$undefined","linesRead":"$undefined","agentActions":"$undefined"},"createdAt":"$D2025-03-27T10:02:08.363Z","updatedAt":"$D2025-03-27T10:06:13.803Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"how to use a single form in each single page of dashboard like basic info page resvertaion hour page"}],"version":1},"role":"user","id":"H2hj60OZoR451YBWaPKfFMHj9jmETzKu","attachments":[],"attachedSkills":"$undefined","attachedDesignSystemSkill":"$undefined","parentId":"iLFtCjxqogrVanewrSTqCAUEwQ6dCBcy","type":"message","authorId":"DGoqCZTvXmTDDE7qs3HhmACL","createdAt":"$D2025-03-27T10:09:48.922Z"},{"content":{"type":"message-binary-format","value":[[0,[["AssistantMessageContentPart",{"part":{"type":"task-thinking-v1","id":"thinking-0","parts":[{"type":"thinking-end","duration":2.976470588235294,"thought":"The user wants to know how to use individual forms on separate pages in the dashboard, rather than using the tabbed interface I created. I'll need to explain how to:\n\n- Create individual dashboard pages for each form type\n- Set up routing for these pages\n- Properly load and save data for each form independently\n- Maintain a consistent UI across these separate pages\n\nI'll create a structure that allows each form to be used on its own dedicated page in the dashboard, with proper navigation between them."}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1},"id":"thinking-0"}],["p",{},["text",{},"I'll show you how to use each form on its own dedicated page in the dashboard. This approach gives you more space for each form and can be better for focused editing of specific sections."]],["h2",{},["text",{},"How to Use Individual Forms in Separate Dashboard Pages"]],["p",{},["text",{},"I've created a complete structure for using each form on its own dedicated page in your dashboard. This approach gives you more space for each form and creates a more focused editing experience."]],["h3",{},["text",{},"Structure Overview"]],["ol",{"start":1},["li",{"index":1},["p",{},["strong",{},["text",{},"Settings Layout"]],["text",{},": A shared layout component that provides:"]],["ul",{"start":1},["li",{"index":1},["text",{},"Consistent sidebar navigation between all settings pages"]],["li",{"index":2},["text",{},"Common page structure and styling"]],["li",{"index":3},["text",{},"Responsive design (sidebar becomes top navigation on mobile)"]]]],["li",{"index":2},["p",{},["strong",{},["text",{},"Individual Pages"]],["text",{},": Separate pages for each form type:"]],["ul",{"start":1},["li",{"index":1},["code",{},"/dashboard/settings/basic-info"]],["li",{"index":2},["code",{},"/dashboard/settings/menu-visuals"]],["li",{"index":3},["code",{},"/dashboard/settings/hours"]],["li",{"index":4},["code",{},"/dashboard/settings/reservations-social"]],["li",{"index":5},["code",{},"/dashboard/settings/domain"]]]],["li",{"index":3},["strong",{},["text",{},"Default Redirect"]],["text",{},": The main settings page ("],["code",{},"/dashboard/settings"],["text",{},") redirects to the basic info page"]]],["h3",{},["text",{},"How It Works"]],["p",{},["text",{},"Each page follows the same pattern:"]],["ol",{"start":1},["li",{"index":1},["strong",{},["text",{},"Load Data"]],["text",{},": Fetch the relevant data for that specific form"]],["li",{"index":2},["strong",{},["text",{},"Display Loading State"]],["text",{},": Show a spinner while data is loading"]],["li",{"index":3},["strong",{},["text",{},"Handle Errors"]],["text",{},": Display an error message if data loading fails"]],["li",{"index":4},["strong",{},["text",{},"Render Form"]],["text",{},": Display the form with the loaded data"]],["li",{"index":5},["strong",{},["text",{},"Auto-Save"]],["text",{},": Changes are automatically saved as the user edits"]]],["h3",{},["text",{},"Example Usage"]],["p",{},["text",{},"Here's how each page is structured:"]],["Codeblock",{"lang":"typescriptreact","meta":{},"closed":true},"$97"],["h3",{},["text",{},"Benefits of This Approach"]],["ol",{"start":1},["li",{"index":1},["strong",{},["text",{},"Focused Editing"]],["text",{},": Users can focus on one section at a time"]],["li",{"index":2},["strong",{},["text",{},"Better Performance"]],["text",{},": Only loads the data needed for the current form"]],["li",{"index":3},["strong",{},["text",{},"Simpler State Management"]],["text",{},": Each page manages only its own form data"]],["li",{"index":4},["strong",{},["text",{},"Cleaner URLs"]],["text",{},": Each section has its own URL, making bookmarking and sharing easier"]],["li",{"index":5},["strong",{},["text",{},"Progressive Loading"]],["text",{},": Users can start editing one section while others are still loading"]]],["p",{},["text",{},"This structure provides a clean, organized way to manage your restaurant settings while maintaining all the validation and auto-save functionality from the forms."]]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"Lo0Sq00FwZYQxLFZEYTJZNwqTYXwZgze","streaming":false,"finishReason":"stop","vote":"$undefined","parentId":"H2hj60OZoR451YBWaPKfFMHj9jmETzKu","type":"message","creditCost":0.0997965,"workMetrics":{"diffMap":{},"imageGenerationCost":"$undefined","imageGenerationCount":"$undefined","linesRead":"$undefined","agentActions":"$undefined"},"createdAt":"$D2025-03-27T10:09:48.923Z","updatedAt":"$D2025-03-27T10:11:01.591Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"$98"}],"version":1},"role":"user","id":"vTx8PAtM5NXLyaaNbJEt3WhOHaoZslyd","attachments":[],"attachedSkills":"$undefined","attachedDesignSystemSkill":"$undefined","parentId":"Lo0Sq00FwZYQxLFZEYTJZNwqTYXwZgze","type":"message","authorId":"DGoqCZTvXmTDDE7qs3HhmACL","createdAt":"$D2025-03-27T10:17:27.862Z"},{"content":{"type":"message-binary-format","value":[[0,[["AssistantMessageContentPart",{"part":{"type":"task-thinking-v1","id":"thinking-0","parts":[{"type":"thinking-end","duration":4.270588235294118,"thought":"The user has shared their implementation of a basic information page in the dashboard. They're using a simpler approach without the layout component I created. I need to adapt my solution to match their approach.\n\nKey observations:\n\n- They're using a `PageHeader` component for the title\n- They're not using a layout wrapper\n- They have a loading state but aren't showing a loading UI\n- They're using the form in dashboard mode with autoSave enabled\n- They're missing the type import for FormData\n\nI should provide a solution that:\n\n- Fixes any issues in their current implementation\n- Shows how to implement the other form pages in a similar style\n- Ensures consistency across all pages\n- Adds proper loading and error states"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1},"id":"thinking-0"}],["p",{},["text",{},"I see you're using a simpler approach without a shared layout component. That's perfectly fine! Let me help you implement the other form pages in a similar style and fix a few small issues in your current implementation."]],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_M11nzFv6NkH","parts":[{"type":"code-project","isVersioned":true,"isSourceless":false,"changedFiles":[{"fileName":"app/dashboard/basic-information/page.tsx","baseName":"page.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/dashboard/hours/page.tsx","baseName":"page.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/dashboard/menu-visuals/page.tsx","baseName":"page.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/dashboard/reservations-social/page.tsx","baseName":"page.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/dashboard/domain/page.tsx","baseName":"page.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/dashboard/edit/page-header.tsx","baseName":"page-header.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false}],"source":"$99","latestDeploymentInfo":"$undefined","lastDeployedAt":"$undefined","lastEditedAt":"$undefined","sourceVersionKey":"$undefined","needsBlockSource":false,"isAllImages":false,"blockId":"b_M11nzFv6NkH","meta":{"type":"code-project","id":"restaurant_forms","project":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"$undefined","taskNameComplete":"$undefined"},"id":"block-b_M11nzFv6NkH"}],["h2",{},["text",{},"Using Individual Forms in Dashboard Pages"]],["p",{},["text",{},"I've adapted the solution to match your approach of using individual pages without a shared layout. Here's how to implement each form page in your dashboard:"]],["h3",{},["text",{},"Key Improvements"]],["ol",{"start":1},["li",{"index":1},["strong",{},["text",{},"Added Loading States"]],["text",{},": Each page now shows a loading spinner while data is being fetched"]],["li",{"index":2},["strong",{},["text",{},"Added Error Handling"]],["text",{},": Shows error messages if data loading fails"]],["li",{"index":3},["strong",{},["text",{},"Consistent Structure"]],["text",{},": All pages follow the same pattern for consistency"]],["li",{"index":4},["strong",{},["text",{},"Fixed Import Paths"]],["text",{},": Updated to use the new form components"]],["li",{"index":5},["strong",{},["text",{},"Added Type Imports"]],["text",{},": Added missing FormData type import"]]],["h3",{},["text",{},"Page Structure"]],["p",{},["text",{},"Each page follows this consistent pattern:"]],["Codeblock",{"lang":"typescriptreact","meta":{},"closed":true},"$9a"],["h3",{},["text",{},"Implementation Notes"]],["ol",{"start":1},["li",{"index":1},["strong",{},["text",{},"Form Components"]],["text",{},": Make sure to import from the new form components path ("],["code",{},"@/components/forms/..."],["text",{},")"]],["li",{"index":2},["strong",{},["text",{},"Data Fetching"]],["text",{},": In a real application, replace the simulated API calls with actual API calls to your backend"]],["li",{"index":3},["strong",{},["text",{},"Auto-Save"]],["text",{},": All forms have "],["code",{},"autoSave={true}"],["text",{}," which will automatically save changes as users edit"]],["li",{"index":4},["strong",{},["text",{},"Error Handling"]],["text",{},": The error state shows a user-friendly message if data loading fails"]],["li",{"index":5},["strong",{},["text",{},"Routing"]],["text",{},": You can set up these pages at whatever routes make sense for your dashboard structure"]]],["p",{},["text",{},"This approach gives you a clean, consistent way to implement each form on its own page while maintaining all the validation and auto-save functionality."]]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"56HOAjmSSkigL8VrThPUjk3aLIpHqSlJ","streaming":false,"finishReason":"stop","vote":"$undefined","parentId":"vTx8PAtM5NXLyaaNbJEt3WhOHaoZslyd","type":"message","creditCost":0.100131,"workMetrics":{"diffMap":{},"imageGenerationCost":"$undefined","imageGenerationCount":"$undefined","linesRead":"$undefined","agentActions":"$undefined"},"createdAt":"$D2025-03-27T10:17:27.863Z","updatedAt":"$D2025-03-27T10:18:28.131Z"}],"isLoading":false,"lastSyncedAt":1783423248610,"undo":null,"activeForkKey":["vJw18zwjSWCk89eFzN4XWXyTSSs1yYt6","iLFtCjxqogrVanewrSTqCAUEwQ6dCBcy","H2hj60OZoR451YBWaPKfFMHj9jmETzKu","Lo0Sq00FwZYQxLFZEYTJZNwqTYXwZgze","vTx8PAtM5NXLyaaNbJEt3WhOHaoZslyd","56HOAjmSSkigL8VrThPUjk3aLIpHqSlJ"],"isStreaming":false,"isStopping":false,"isAuthor":false,"isRestoring":false,"hashMessageId":null,"initialStreamPromise":"$undefined"},"@\"active-block\",\"g2pArBGUZnf\",":{"id":"b_M11nzFv6NkH","meta":{"type":"code-project","id":"restaurant_forms","project":"Code"},"initial":true,"type":"code-project","messageId":"56HOAjmSSkigL8VrThPUjk3aLIpHqSlJ","language":"typescriptreact","source":"$9b","resultId":"$undefined","closed":true,"hasSourceBeenEdited":false,"lastEditedAt":"$undefined","lastDeployedAt":"$undefined","latestDeploymentInfo":"$undefined","templateVersionId":"$undefined","templateCanonId":"$undefined","forkedFromBlockId":"$undefined","isLoading":false,"needsBlockSource":false},"@\"chat:meta\",\"g2pArBGUZnf\",":{"title":"Reusable Basic Info Form","isNew":false,"authorId":"DGoqCZTvXmTDDE7qs3HhmACL","ownerId":"DGoqCZTvXmTDDE7qs3HhmACL","storageEntityType":null,"storageEntityId":null,"tailwindV4Default":"$undefined","vercelProjectId":null,"canWriteToChat":false,"from":"$undefined","nextVersionDefault":"$undefined","nextVersion15Default":"$undefined"},"@\"chat:privacy\",\"g2pArBGUZnf\",":"public","@\"chat:vm-mode\",\"g2pArBGUZnf\",":false,"@\"chat:persisted\",\"g2pArBGUZnf\",":true,"@\"chat:vercel-project\",\"g2pArBGUZnf\",":"$undefined","@\"chat:show-v0-button\",\"g2pArBGUZnf\",":false,"@\"team:sensitive-environment-variable-policy\",\"g2pArBGUZnf\",":"$undefined","projects:for-user":{"projects":[],"selectedProjectId":null},"project:can-make-project-updates":"$undefined","@\"block-view\",\"g2pArBGUZnf\",":true,"integrations:figma":"$@9c"},"children":["$L9d","$L9e","$L9f","$La0"]}]}]}]