feat: add plan title field with data migration

components/create-plan-form.tsx

@@ -33,6 +33,9 @@ export function CreatePlanForm({ dict, lang }: CreatePlanFormProps) {
     const router = useRouter()
 
     const formSchema = z.object({
+        title: z.string().min(2, {
+            message: dict.titleError,
+        }),
         dateRange: z.object({
             from: z.date(),
             to: z.date(),
@@ -46,6 +49,7 @@ export function CreatePlanForm({ dict, lang }: CreatePlanFormProps) {
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
         defaultValues: {
+            title: "",
             password: "",
             instructions: "",
         },
@@ -59,6 +63,7 @@ export function CreatePlanForm({ dict, lang }: CreatePlanFormProps) {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({
+                    title: values.title,
                     startDate: values.dateRange.from,
                     endDate: values.dateRange.to,
                     password: values.password,
@@ -81,7 +86,21 @@ export function CreatePlanForm({ dict, lang }: CreatePlanFormProps) {
 
     return (
         <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+                <FormField
+                    control={form.control}
+                    name="title"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>{dict.title}</FormLabel>
+                            <FormControl>
+                                <Input placeholder={dict.titlePlaceholder} {...field} />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+
                 <FormField
                     control={form.control}
                     name="dateRange"
@@ -150,7 +169,7 @@ export function CreatePlanForm({ dict, lang }: CreatePlanFormProps) {
                         </FormItem>
                     )}
                 />
-                <Button type="submit">{dict.submit}</Button>
+                <Button type="submit" className="w-full">{dict.submit}</Button>
             </form>
         </Form>
     )