checkpoint(cover): backend ready before AI development

frontend/src/components/forms/Select.tsx

@@ -28,8 +28,10 @@ export default function SelectField({ data, label, className = "" }: SelectProps
             )}
 
             <Select
-                onValueChange={field.handleChange}
-                onOpenChange={field.handleBlur}
+                onValueChange={(val) => {
+                    field.handleChange(val);
+                    field.handleBlur();
+                }}
                 defaultValue={field.state.value}
             >
                 <SelectTrigger className={"w-full"}>

frontend/src/routes/cover/create.tsx

@@ -1,17 +1,22 @@
 import renderQueryState from "@/components/RenderQueryState";
 import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
 import { useAppForm } from "@/hooks/formHook";
 import Authorised from "@/layouts/Authorised";
 import requests from "@/lib/requests";
 import type { Template } from "@/types/api";
-import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod/v4";
 
 export const Route = createFileRoute("/cover/create")({
     component: RouteComponent,
 });
 
+const createSchema = z.object({
+    templateId: z.string().min(1, "Please select template"),
+    application: z.string().min(50, "Application is too short"),
+});
+
 function RouteComponent() {
     const templates = useQuery({
         queryKey: ["user_templates"],
@@ -28,6 +33,12 @@ function RouteComponent() {
             templateId: "",
             application: "Paste job application here",
         },
+        validators: {
+            onBlur: createSchema,
+        },
+        onSubmit({ value }) {
+            console.log(JSON.stringify(value));
+        },
     });
 
     return (
@@ -41,7 +52,7 @@ function RouteComponent() {
                         name="templateId"
                         children={(f) => (
                             <f.SelectField
-                                data={templates.data?.map((t) => ({ value: t.id, name: t.name }))}
+                                data={templates.data?.map((t) => ({ value: `${t.id}`, name: t.name }))}
                                 label={"Select template for cover letter"}
                             />
                         )}
@@ -53,7 +64,9 @@ function RouteComponent() {
                 <form.AppField name="application" children={(f) => <f.RichTextEdit />} />
             </div>
 
-            <Button className="mt-4">Generate cover letter</Button>
+            <Button onClick={form.handleSubmit} className="mt-4">
+                Generate cover letter
+            </Button>
         </Authorised>
     );
 }