feat: use structured output, import CSV, bugfixes

components/settings/global-settings-form.tsx

@@ -9,6 +9,7 @@ import { Button } from "@/components/ui/button"
 import { Category, Currency } from "@prisma/client"
 import { CircleCheckBig } from "lucide-react"
 import { useActionState } from "react"
+import { FormError } from "../forms/error"
 
 export default function GlobalSettingsForm({
   settings,
@@ -53,7 +54,7 @@ export default function GlobalSettingsForm({
         )}
       </div>
 
-      {saveState?.error && <p className="text-red-500">{saveState.error}</p>}
+      {saveState?.error && <FormError>{saveState.error}</FormError>}
     </form>
   )
 }

components/settings/llm-settings-form.tsx

@@ -1,45 +1,75 @@
 "use client"
 
+import { fieldsToJsonSchema } from "@/app/ai/schema"
 import { saveSettingsAction } from "@/app/settings/actions"
 import { FormInput, FormTextarea } from "@/components/forms/simple"
 import { Button } from "@/components/ui/button"
-import { CircleCheckBig } from "lucide-react"
+import { CircleCheckBig, Edit } from "lucide-react"
+import Link from "next/link"
 import { useActionState } from "react"
+import { FormError } from "../forms/error"
+import { Card, CardTitle } from "../ui/card"
 
-export default function LLMSettingsForm({ settings }: { settings: Record<string, string> }) {
+export default function LLMSettingsForm({ settings, fields }: { settings: Record<string, string>; fields: Field[] }) {
   const [saveState, saveAction, pending] = useActionState(saveSettingsAction, null)
 
   return (
-    <form action={saveAction} className="space-y-4">
-      <FormInput title="OpenAI API Key" name="openai_api_key" defaultValue={settings.openai_api_key} />
+    <>
+      <form action={saveAction} className="space-y-4">
+        <FormInput title="OpenAI API Key" name="openai_api_key" defaultValue={settings.openai_api_key} />
 
-      <small className="text-muted-foreground">
-        Get your API key from{" "}
-        <a href="https://platform.openai.com/settings/organization/api-keys" target="_blank" className="underline">
-          OpenAI Platform Console
-        </a>
-      </small>
+        <small className="text-muted-foreground">
+          Get your API key from{" "}
+          <a href="https://platform.openai.com/settings/organization/api-keys" target="_blank" className="underline">
+            OpenAI Platform Console
+          </a>
+        </small>
 
-      <FormTextarea
-        title="Prompt for Analyze Transaction"
-        name="prompt_analyse_new_file"
-        defaultValue={settings.prompt_analyse_new_file}
-        className="h-96"
-      />
+        <FormTextarea
+          title="Prompt for Analyze Transaction"
+          name="prompt_analyse_new_file"
+          defaultValue={settings.prompt_analyse_new_file}
+          className="h-96"
+        />
 
-      <div className="flex flex-row items-center gap-4">
-        <Button type="submit" disabled={pending}>
-          {pending ? "Saving..." : "Save Settings"}
-        </Button>
-        {saveState?.success && (
-          <p className="text-green-500 flex flex-row items-center gap-2">
-            <CircleCheckBig />
-            Saved!
-          </p>
-        )}
-      </div>
+        <div className="flex flex-row items-center gap-4">
+          <Button type="submit" disabled={pending}>
+            {pending ? "Saving..." : "Save Settings"}
+          </Button>
+          {saveState?.success && (
+            <p className="text-green-500 flex flex-row items-center gap-2">
+              <CircleCheckBig />
+              Saved!
+            </p>
+          )}
+        </div>
 
-      {saveState?.error && <p className="text-red-500">{saveState.error}</p>}
-    </form>
+        {saveState?.error && <FormError>{saveState.error}</FormError>}
+      </form>
+
+      <Card className="flex flex-col gap-4 p-4 bg-accent mt-20">
+        <CardTitle className="flex flex-row justify-between items-center gap-2">
+          <span className="text-md font-medium">
+            Current JSON Schema for{" "}
+            <a
+              href="https://platform.openai.com/docs/guides/structured-outputs?api-mode=responses&lang=javascript"
+              target="_blank"
+              className="underline"
+            >
+              structured output
+            </a>
+          </span>
+          <Link
+            href="/settings/fields"
+            className="text-xs underline inline-flex flex-row items-center gap-1 text-muted-foreground"
+          >
+            <Edit className="w-4 h-4" /> Edit Fields
+          </Link>
+        </CardTitle>
+        <pre className="text-xs overflow-hidden text-ellipsis">
+          {JSON.stringify(fieldsToJsonSchema(fields), null, 2)}
+        </pre>
+      </Card>
+    </>
   )
 }

components/settings/side-nav.tsx

@@ -16,7 +16,7 @@ export function SideNav({ className, items, ...props }: SidebarNavProps) {
   const pathname = usePathname()
 
   return (
-    <nav className={cn("flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1", className)} {...props}>
+    <nav className={cn("flex flex-wrap space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1", className)} {...props}>
       {items.map((item) => (
         <Link
           key={item.href}