init

2025-08-20 22:35:40 -05:00
commit f51c278cd3
169 changed files with 8173 additions and 0 deletions
--- a/src/features/admin/components/create-tournament.tsx
+++ b/src/features/admin/components/create-tournament.tsx
@@ -0,0 +1,118 @@
+import { 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 { DateTimePicker } from "./date-time-picker";
+import { isNotEmpty } from "@mantine/form";
+import useCreateTournament from "../hooks/use-create-tournament";
+
+const CreateTournament = ({ close }: { close: () => void }) => {
+
+  const config: UseFormInput<TournamentFormInput> = {
+    initialValues: { // TODO : Remove fake initial values
+      name: 'Test Tournament',
+      location: 'Test Location',
+      desc: 'Test Description',
+      logo_url: 'https://en.wikipedia.org/wiki/Trophy#/media/File:1934_Melbourne_Cup,_National_Museum_of_Australia.jpg',
+      start_time: '2025-01-01T00:00:00Z',
+      enroll_time: '2025-01-01T00:00:00Z',
+    },
+    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 { mutate: createTournament, isPending } = useCreateTournament();
+
+  const handleSubmit = async (values: TournamentFormInput) => {
+    createTournament(values, {
+      onSuccess: () => {
+        close();
+      }
+    });
+  }
+
+  return (
+    <SlidePanel
+      onSubmit={form.onSubmit(handleSubmit)}
+      onCancel={close}
+      submitText="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')}
+        />
+
+        <TextInput
+          label="Short Description"
+          key={form.key('desc')}
+          {...form.getInputProps('desc')}
+        />
+
+        <TextInput
+          key={form.key('logo_url')}
+          accept="image/*"
+          label="Logo"
+          leftSection={<LinkIcon size={16} />}
+          {...form.getInputProps('logo_url')}
+        />
+
+        <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
+          })}
+        />
+      </Stack>
+    </SlidePanel>
+  );
+};
+
+export default CreateTournament;