several changes

src/features/tournaments/components/tournament-form.tsx

@@ -0,0 +1,201 @@
+import { FileInput, Stack, TextInput, Textarea } from "@mantine/core";
+import { useForm, UseFormInput } from "@mantine/form";
+import { LinkIcon } from "@phosphor-icons/react";
+import SlidePanel, { SlidePanelField } from "@/components/sheet/slide-panel";
+import { TournamentFormInput } from "@/features/tournaments/types";
+import { isNotEmpty } from "@mantine/form";
+import useCreateTournament from "../hooks/use-create-tournament";
+import useUpdateTournament from "../hooks/use-update-tournament";
+import toast from '@/lib/sonner';
+import { logger } from "..";
+import { useQueryClient } from "@tanstack/react-query";
+import { tournamentQueries } from "@/features/tournaments/queries";
+import { DateTimePicker } from "@mantine/dates";
+
+interface TournamentFormProps {
+  close: () => void;
+  initialValues?: Partial<TournamentFormInput>;
+  tournamentId?: string;
+}
+
+const TournamentForm = ({ close, initialValues, tournamentId }: TournamentFormProps) => {
+  const isEditMode = !!tournamentId;
+
+  const config: UseFormInput<TournamentFormInput> = {
+    initialValues: {
+      name: initialValues?.name || '',
+      location: initialValues?.location || '',
+      desc: initialValues?.desc || '',
+      start_time: initialValues?.start_time || '',
+      enroll_time: initialValues?.enroll_time || '',
+      end_time: initialValues?.end_time || '',
+      logo: undefined,
+    },
+    onSubmitPreventDefault: 'always',
+    validate: {
+      name: isNotEmpty('Name is required'),
+      location: isNotEmpty('Location is required'),
+      start_time: isNotEmpty('Start time is required'),
+      enroll_time: isNotEmpty('Enrollment time is required'),
+    }
+  }
+
+  const form = useForm(config);
+  const queryClient = useQueryClient();
+
+  const { mutate: createTournament, isPending: createPending } = useCreateTournament();
+  const { mutate: updateTournament, isPending: updatePending } = useUpdateTournament(tournamentId || '');
+  
+  const isPending = createPending || updatePending;
+
+  const handleSubmit = async (values: TournamentFormInput) => {
+    const { logo, ...tournamentData } = values;
+    
+    const mutation = isEditMode ? updateTournament : createTournament;
+    const successMessage = isEditMode ? 'Tournament updated successfully!' : 'Tournament created successfully!';
+    const errorMessage = isEditMode ? 'Failed to update tournament' : 'Failed to create tournament';
+    
+    mutation(tournamentData, {
+      onSuccess: async (tournament) => {        
+        if (logo && tournament) {
+          try {
+            const formData = new FormData();
+            formData.append('tournamentId', tournament.id);
+            formData.append('logo', logo);
+
+            const response = await fetch('/api/tournaments/upload-logo', {
+              method: 'POST',
+              body: formData,
+            });
+
+            if (!response.ok) {
+              const error = await response.json();
+              throw new Error(error.error || 'Failed to upload logo');
+            }
+
+            const result = await response.json();
+        
+            queryClient.invalidateQueries({ queryKey: tournamentQueries.list().queryKey });
+            queryClient.invalidateQueries({ queryKey: tournamentQueries.details(result.tournament!.id).queryKey });
+            queryClient.setQueryData(
+              tournamentQueries.details(result.tournament!.id).queryKey,
+              result.tournament
+            );
+            
+            toast.success(successMessage);
+          } catch (error: any) {
+            const logoErrorMessage = isEditMode 
+              ? `Tournament updated but logo upload failed: ${error.message}`
+              : `Tournament created but logo upload failed: ${error.message}`;
+            toast.error(logoErrorMessage);
+            logger.error('Tournament logo upload error', error);
+          }
+        } else {
+          toast.success(successMessage);
+        }
+        close();
+      },
+      onError: (error: any) => {
+        toast.error(`${errorMessage}: ${error.message}`);
+        logger.error(`Tournament ${isEditMode ? 'update' : 'create'} error`, error);
+      }
+    });
+  }
+
+  return (
+    <SlidePanel
+      onSubmit={form.onSubmit(handleSubmit)}
+      onCancel={close}
+      submitText={isEditMode ? "Update Tournament" : "Create Tournament"}
+      cancelText="Cancel"
+      loading={isPending}
+    >
+      <Stack>
+        <TextInput
+          label="Name"
+          withAsterisk
+          key={form.key('name')}
+          {...form.getInputProps('name')}
+        />
+        <TextInput
+          label="Location"
+          withAsterisk
+          key={form.key('location')}
+          {...form.getInputProps('location')}
+        />
+
+        <Textarea
+          label="Description"
+          key={form.key('desc')}
+          {...form.getInputProps('desc')}
+          minRows={3}
+        />
+
+        <FileInput
+          key={form.key('logo')}
+          accept="image/png,image/jpeg,image/gif,image/jpg"
+          label={isEditMode ? "Change Logo" : "Logo"}
+          leftSection={<LinkIcon size={16} />}
+          {...form.getInputProps('logo')}
+        />
+
+        <SlidePanelField
+          key={form.key('start_time')}
+          {...form.getInputProps('start_time')}
+          Component={DateTimePicker}
+          title="Select Start Date"
+          label="Start Date"
+          withAsterisk
+          formatValue={(date) => new Date(date).toLocaleDateString('en-US', {
+            weekday: 'short',
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+            hour12: true
+          })}
+        />
+
+        <SlidePanelField
+          key={form.key('enroll_time')}
+          {...form.getInputProps('enroll_time')}
+          Component={DateTimePicker}
+          title="Select Enrollment Due Date"
+          label="Enrollment Due"
+          withAsterisk
+          formatValue={(date) => new Date(date).toLocaleDateString('en-US', {
+            weekday: 'short',
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+            hour12: true
+          })}
+        />
+
+        {isEditMode && (
+          <SlidePanelField
+            key={form.key('end_time')}
+            {...form.getInputProps('end_time')}
+            Component={DateTimePicker}
+            title="Select End Date"
+            label="End Date (Optional)"
+            formatValue={(date) => date ? new Date(date).toLocaleDateString('en-US', {
+              weekday: 'short',
+              year: 'numeric',
+              month: 'short',
+              day: 'numeric',
+              hour: 'numeric',
+              minute: 'numeric',
+              hour12: true
+            }) : 'Not set'}
+          />
+        )}
+      </Stack>
+    </SlidePanel>
+  );
+};
+
+export default TournamentForm;