perf: host panel, event adding fields modified

src/pages/AddEvent.tsx

@@ -21,11 +21,13 @@ function MatchSelect({
   options,
   now,
   onChange,
+  error,
 }: {
   value: string
   options: MatchEvent[]
   now: Date
   onChange: (uuid: string) => void
+  error?: string
 }) {
   const [open, setOpen] = useState(false)
   const selectedMatch = options.find((match) => match.uuid === value)
@@ -38,7 +40,7 @@ function MatchSelect({
         type="button"
         disabled={!hasMatches}
         onClick={() => setOpen((o) => !o)}
-        className="flex h-14 w-full items-center justify-between rounded-2xl border border-gray-200 px-4 text-right disabled:opacity-50"
+        className={`flex h-14 w-full items-center justify-between rounded-2xl border px-4 text-right disabled:opacity-50 ${error ? 'border-red-400' : 'border-gray-200'}`}
       >
         <span className={selectedMatch ? 'text-gray-900' : 'font-light text-[#999999]'}>
           {selectedMatch
@@ -70,6 +72,7 @@ function MatchSelect({
           </div>
         </>
       )}
+      {error && <p className="mt-1 text-right text-sm text-red-500">{error}</p>}
     </div>
   )
 }
@@ -171,8 +174,24 @@ export default function AddEvent() {
   const [entryFee, setEntryFee] = useState(100000)
   const [description, setDescription] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({})
+
+  const clearFieldError = (field: string) =>
+    setFieldErrors((prev) => {
+      if (!prev[field]) return prev
+      const next = { ...prev }
+      delete next[field]
+      return next
+    })
 
   const handleSubmit = async () => {
+    const errors: Record<string, string> = {}
+    if (!selectedMatchUuid) errors.match = 'بازی را انتخاب کنید'
+    if (Object.keys(errors).length > 0) {
+      setFieldErrors(errors)
+      return
+    }
+    setFieldErrors({})
     setIsSubmitting(true)
     try {
       await createCafeSchedule(getCafeUuid() ?? '', {
@@ -199,7 +218,13 @@ export default function AddEvent() {
       </button>
 
       <div className="px-4">
-        <MatchSelect value={selectedMatchUuid} options={matches} now={now} onChange={setSelectedMatchUuid} />
+        <MatchSelect
+          value={selectedMatchUuid}
+          options={matches}
+          now={now}
+          onChange={(uuid) => { setSelectedMatchUuid(uuid); clearFieldError('match') }}
+          error={fieldErrors.match}
+        />
 
         <div className="mt-5">
           <label className="mb-3 block text-right text-lg font-normal text-gray-900">ظرفیت</label>