sea-dev 1.0.0

package/apps/main/src/routes/_authed/_app/feedback/index.tsx

@@ -0,0 +1,639 @@
+import { Container } from "@/components/header/container";
+import { getAppConfig } from "@/lib/config";
+import { membershipMiddleware } from "@/middleware";
+import { analyzeFeedbackForItem, generateImprovedHint, getChatModel } from "@sea/core";
+import {
+  getCorrectionsGroupedByItem,
+  listCorrections,
+  markAddressed,
+  markMultipleAddressed,
+} from "@sea/dal/feedback";
+import { updateFormFieldHint } from "@sea/dal/form";
+import { db, schema } from "@sea/db";
+import type { SubmissionItemValue } from "@sea/db/schema";
+import { Badge } from "@sea/ui/components/ui/badge";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@sea/ui/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@sea/ui/components/ui/dialog";
+import { H1, H3 } from "@sea/ui/components/ui/typography";
+import { createFileRoute, Link, useRouter } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { eq } from "drizzle-orm";
+import { Lightbulb } from "lucide-react";
+import { useState } from "react";
+
+// Number of feedback items to show per field card before collapsing into a “+ X more” link
+const VISIBLE_COUNT = 10;
+
+// Fetch both the raw correction rows (for the timeline table) *and*
+// a compact aggregate view so users can action *hint improvements* without
+// leaving the page. We only surface *field* (item) and *group* level targets
+// for now – schema & deal improvements live on the dedicated `/feedback/summary`
+// route.
+
+const loadFeedbackFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .handler(async ({ context: { member } }) => {
+    const corrections = await listCorrections({ member, limit: 250 });
+    const groupedCorrections = await getCorrectionsGroupedByItem({ member });
+    return { corrections, groupedCorrections };
+  });
+
+const markAddressedFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { correctionId: string }) => data)
+  .handler(async ({ data: { correctionId }, context: { member } }) => {
+    await markAddressed({ member, correctionId });
+  });
+
+// Commented out for now - can be restored if needed
+// const generateItemAnalysisFn = createServerFn({ method: "POST" })
+//   .middleware([membershipMiddleware])
+//   .validator((data: { formFieldId: string }) => data)
+//   .handler(async ({ data: { formFieldId }, context: { member } }) => {
+//     const groupedCorrections = await getCorrectionsGroupedByItem({ member });
+//     const corrections = groupedCorrections[formFieldId] || [];
+//
+//     if (corrections.length === 0) {
+//       return { analysis: "No feedback available for this field." };
+//     }
+//
+//     const analysis = await analyzeFeedbackForItem({ member, corrections, itemId: formFieldId });
+//     return { analysis };
+//   });
+
+const generateImprovedHintFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { formFieldId: string }) => data)
+  .handler(async ({ data: { formFieldId }, context: { member } }) => {
+    const groupedCorrections = await getCorrectionsGroupedByItem({ member });
+    const corrections = groupedCorrections[formFieldId] || [];
+
+    if (corrections.length === 0) {
+      return { error: "No feedback available for this field." };
+    }
+
+    // Get the actual form field to get current hint and field name
+    const formField = await db.query.formField.findFirst({
+      where: eq(schema.formField.id, formFieldId),
+    });
+
+    if (!formField) {
+      return { error: "Form field not found." };
+    }
+
+    const fieldName = formField.name;
+    const currentHint = formField.hint || "";
+
+    const config = getAppConfig();
+    const model = getChatModel({
+      aiGatewayApiKey: config.vercel.aiGatewayApiKey,
+      modelId: "gpt-4o",
+    });
+
+    // Generate analysis first
+    const analysis = await analyzeFeedbackForItem(model, member, corrections, formFieldId);
+
+    // Generate improved hint based on analysis
+    const improvedHint = await generateImprovedHint(
+      model,
+      member,
+      fieldName,
+      currentHint,
+      corrections,
+    );
+
+    return {
+      success: true,
+      fieldName,
+      currentHint,
+      improvedHint,
+      analysis,
+    };
+  });
+
+const applyImprovedHintFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { formFieldId: string; improvedHint: string }) => data)
+  .handler(async ({ data: { formFieldId, improvedHint }, context: { member } }) => {
+    // Update the hint in the database
+    await updateFormFieldHint({
+      member,
+      formFieldId,
+      hint: improvedHint,
+    });
+
+    // Mark all corrections for this field as addressed
+    const groupedCorrections = await getCorrectionsGroupedByItem({ member });
+    const corrections = groupedCorrections[formFieldId] || [];
+    const pendingCorrectionIds = corrections
+      .filter((correction) => correction.status === "pending")
+      .map((correction) => correction.id);
+
+    if (pendingCorrectionIds.length > 0) {
+      await markMultipleAddressed({
+        member,
+        correctionIds: pendingCorrectionIds,
+      });
+    }
+
+    return { success: true };
+  });
+
+export const Route = createFileRoute("/_authed/_app/feedback/")({
+  component: FeedbackDashboard,
+  loader: () => loadFeedbackFn(),
+});
+
+function GroupedFeedbackCard({
+  itemId,
+  corrections,
+  router,
+}: {
+  itemId: string;
+  corrections: Array<{
+    id: string;
+    submissionItemId: string;
+    extractedValue: SubmissionItemValue | null;
+    correctedValue: SubmissionItemValue | null;
+    feedback: string | null;
+    status: string;
+    createdAt: Date;
+    submissionItem: {
+      formField: {
+        name: string;
+        hint: string;
+        group?: {
+          form?: {
+            id?: string;
+            workflow?: {
+              name?: string;
+              slug?: string;
+            };
+          };
+        };
+      };
+    };
+  }>;
+  router: { invalidate: () => void };
+}) {
+  // Commented out for now - can be restored if needed
+  // const [showAnalysis, setShowAnalysis] = useState(false);
+  // const [analysis, setAnalysis] = useState<string | null>(null);
+  // const [isGenerating, setIsGenerating] = useState(false);
+  const [isImprovingHint, setIsImprovingHint] = useState(false);
+  const [hintImproved, setHintImproved] = useState(false);
+  const [showHintDialog, setShowHintDialog] = useState(false);
+  const [hintComparison, setHintComparison] = useState<{
+    fieldName: string;
+    currentHint: string;
+    improvedHint: string;
+    analysis: string;
+  } | null>(null);
+  const [isApplyingHint, setIsApplyingHint] = useState(false);
+
+  // Commented out for now - can be restored if needed
+  // const handleGenerateAnalysis = async () => {
+  //   if (analysis) {
+  //     setShowAnalysis(!showAnalysis);
+  //     return;
+  //   }
+  //
+  //   setIsGenerating(true);
+  //   try {
+  //     const result = await generateItemAnalysisFn({
+  //       data: { formFieldId: itemId },
+  //     });
+  //     setAnalysis(result.analysis);
+  //     setShowAnalysis(true);
+  //   } catch (error) {
+  //     console.error("Failed to generate analysis:", error);
+  //   } finally {
+  //     setIsGenerating(false);
+  //   }
+  // };
+
+  const handleImproveHint = async () => {
+    setIsImprovingHint(true);
+    try {
+      const result = await generateImprovedHintFn({
+        data: { formFieldId: itemId },
+      });
+      if (result.success) {
+        setHintComparison({
+          fieldName: result.fieldName,
+          currentHint: result.currentHint,
+          improvedHint: result.improvedHint.improvedHint,
+          analysis: result.analysis,
+        });
+        setShowHintDialog(true);
+      }
+    } catch (error) {
+      console.error("Failed to generate improved hint:", error);
+    } finally {
+      setIsImprovingHint(false);
+    }
+  };
+
+  const handleApplyHint = async () => {
+    if (!hintComparison) return;
+
+    setIsApplyingHint(true);
+    try {
+      await applyImprovedHintFn({
+        data: {
+          formFieldId: itemId,
+          improvedHint: hintComparison.improvedHint,
+        },
+      });
+      setHintImproved(true);
+      setShowHintDialog(false);
+      setHintComparison(null);
+      router.invalidate();
+    } catch (error) {
+      console.error("Failed to apply improved hint:", error);
+    } finally {
+      setIsApplyingHint(false);
+    }
+  };
+
+  const handleCancelHint = () => {
+    setShowHintDialog(false);
+    setHintComparison(null);
+  };
+
+  const fieldName = corrections[0]?.submissionItem?.formField?.name || "Unknown Field";
+  const formName =
+    corrections[0]?.submissionItem?.formField?.group?.form?.workflow?.name || "Unknown Form";
+  const formId = corrections[0]?.submissionItem?.formField?.group?.form?.id;
+  const workflowSlug =
+    corrections[0]?.submissionItem?.formField?.group?.form?.workflow?.slug || "Unknown workflow";
+
+  return (
+    <Card className="mb-4">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-brand-600 text-lg">
+              {workflowSlug && formId ? (
+                <Link
+                  to="/workflows/$wfSlug/$formId"
+                  params={{ wfSlug: workflowSlug, formId: formId }}
+                  className="text-brand-600 hover:underline"
+                >
+                  {formName}
+                </Link>
+              ) : (
+                formName
+              )}
+              : {fieldName}
+            </CardTitle>
+            <CardDescription>
+              Current hint: {corrections[0]?.submissionItem?.formField?.hint || "No hint provided"}
+            </CardDescription>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleImproveHint}
+              disabled={isImprovingHint || hintImproved}
+              className="flex items-center gap-2"
+            >
+              {isImprovingHint ? (
+                <div className="h-3 w-3 animate-spin rounded-full border border-current border-t-transparent" />
+              ) : (
+                <Lightbulb className="h-3 w-3" />
+              )}
+              {isImprovingHint
+                ? "Improving..."
+                : hintImproved
+                  ? "Hint Improved!"
+                  : "Improve AI Hint"}
+            </Button>
+            {/* Commented out for now - can be restored if needed
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleGenerateAnalysis}
+              disabled={isGenerating}
+              className="flex items-center gap-2"
+            >
+              {isGenerating ? (
+                <div className="h-3 w-3 animate-spin rounded-full border border-current border-t-transparent" />
+              ) : showAnalysis && analysis ? (
+                <ChevronDown className="h-3 w-3" />
+              ) : (
+                <ChevronRight className="h-3 w-3" />
+              )}
+              {isGenerating
+                ? "Analyzing..."
+                : showAnalysis && analysis
+                  ? "Hide Changes"
+                  : "Show What Changed"}
+            </Button>
+            */}
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-3">
+        {/* Feedback Items Summary */}
+        <div className="space-y-2">
+          {corrections.slice(0, VISIBLE_COUNT).map((correction) => (
+            <div key={correction.id} className="bg-muted/50 space-y-2 rounded-md p-3 text-sm">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <span className="text-muted-foreground whitespace-nowrap">
+                    {new Date(correction.createdAt).toLocaleDateString()}
+                  </span>
+                  <span className="max-w-[200px] truncate">
+                    {correction.extractedValue?.toString() ?? "null"}
+                  </span>
+                  <span className="text-muted-foreground">→</span>
+                  <span className="max-w-[200px] truncate">
+                    {correction.correctedValue?.toString()}
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Badge
+                    variant={correction.status === "pending" ? "secondary" : "green"}
+                    className="text-xs"
+                  >
+                    {correction.status}
+                  </Badge>
+                  {correction.status === "pending" && (
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="h-6 px-2 text-xs"
+                      onClick={async () => {
+                        await markAddressedFn({ data: { correctionId: correction.id } });
+                        router.invalidate();
+                      }}
+                    >
+                      Mark addressed
+                    </Button>
+                  )}
+                </div>
+              </div>
+              {correction.feedback && (
+                <div className="text-muted-foreground border-muted-foreground/20 border-l-2 pl-3 text-xs italic">
+                  "{correction.feedback}"
+                </div>
+              )}
+            </div>
+          ))}
+
+          {corrections.length > VISIBLE_COUNT && (
+            <div className="text-muted-foreground py-1 text-center text-xs">
+              + {corrections.length - VISIBLE_COUNT} more feedback item
+              {corrections.length - VISIBLE_COUNT !== 1 ? "s" : ""}
+            </div>
+          )}
+        </div>
+
+        {/* Commented out for now - can be restored if needed
+        {showAnalysis && analysis && (
+          <div className="mt-4 border-t pt-4">
+            <H3 className="mb-2 text-sm font-medium">
+              Hint Improvements - All {totalCount} Feedback Items
+            </H3>
+            <div className="text-muted-foreground bg-background rounded-md border p-3 text-sm">
+              <pre className="font-mono text-xs whitespace-pre-wrap">{analysis}</pre>
+            </div>
+          </div>
+        )}
+        */}
+      </CardContent>
+
+      {/* Hint Improvement Confirmation Dialog */}
+      <Dialog open={showHintDialog} onOpenChange={setShowHintDialog}>
+        <DialogContent className="max-w-4xl">
+          <DialogHeader>
+            <DialogTitle>
+              Improve AI Hint for "{hintComparison?.fieldName}" in{" "}
+              {workflowSlug && formId ? (
+                <Link
+                  to="/workflows/$wfSlug/$formId"
+                  params={{ wfSlug: workflowSlug, formId: formId }}
+                  className="text-brand-600 hover:underline"
+                >
+                  {formName}
+                </Link>
+              ) : (
+                formName
+              )}
+            </DialogTitle>
+            <DialogDescription>
+              Review the improved hint based on user feedback before applying it.
+            </DialogDescription>
+          </DialogHeader>
+
+          {hintComparison && (
+            <div className="space-y-4">
+              <div className="flex flex-col gap-4">
+                <H3>Current Hint</H3>
+                <div className="bg-muted min-h-[80px] rounded-md p-3 text-sm">
+                  {hintComparison.currentHint || (
+                    <span className="text-muted-foreground italic">No hint provided</span>
+                  )}
+                </div>
+              </div>
+
+              <div>
+                <H3>Improved Hint</H3>
+                <div className="bg-background min-h-[80px] rounded-md border p-3 text-sm">
+                  {hintComparison.improvedHint}
+                </div>
+              </div>
+
+              {/* Commented out for now - can be restored if needed
+              <div>
+                <H3>What Changed & Why</H3>
+                <div className="bg-muted prose prose-slate dark:prose-invert max-h-32 overflow-y-auto rounded-md p-3 text-sm">
+                  <Markdown>{hintComparison.analysis}</Markdown>
+                </div>
+              </div>
+              */}
+            </div>
+          )}
+
+          <DialogFooter>
+            <Button variant="outline" onClick={handleCancelHint} disabled={isApplyingHint}>
+              Cancel
+            </Button>
+            <Button onClick={handleApplyHint} disabled={isApplyingHint}>
+              {isApplyingHint ? (
+                <>
+                  <div className="mr-2 h-3 w-3 animate-spin rounded-full border border-current border-t-transparent" />
+                  Applying...
+                </>
+              ) : (
+                "Apply Improved Hint"
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Card>
+  );
+}
+
+function FeedbackDashboard() {
+  const router = useRouter();
+  const { corrections, groupedCorrections } = Route.useLoaderData();
+  const [viewMode, setViewMode] = useState<"grouped" | "timeline">("grouped");
+
+  // Sort grouped corrections by total count (most problematic first)
+  const sortedGroupedCorrections = Object.entries(groupedCorrections).sort(
+    ([, a], [, b]) => b.length - a.length,
+  );
+
+  return (
+    <Container crumbs={[{ href: "feedback", label: "Feedback" }]}>
+      <div className="mb-6 flex items-center justify-between">
+        <H1>Feedback</H1>
+        <div className="flex items-center gap-2">
+          <div className="flex items-center rounded-md border">
+            <Button
+              variant={viewMode === "grouped" ? "default" : "ghost"}
+              size="sm"
+              onClick={() => setViewMode("grouped")}
+              className="rounded-r-none"
+            >
+              Grouped
+            </Button>
+            <Button
+              variant={viewMode === "timeline" ? "default" : "ghost"}
+              size="sm"
+              onClick={() => setViewMode("timeline")}
+              className="rounded-l-none"
+            >
+              Timeline
+            </Button>
+          </div>
+          <Link to="/feedback/insights" className="text-brand-600 text-sm hover:underline">
+            View insights
+            <span className="ml-1 inline-block">&rarr;</span>
+          </Link>
+        </div>
+      </div>
+
+      {corrections.length === 0 ? (
+        <p className="text-muted-foreground">No feedback yet.</p>
+      ) : viewMode === "grouped" ? (
+        <div className="space-y-4">
+          <div className="text-muted-foreground mb-4 text-sm">
+            There are {sortedGroupedCorrections.length} field
+            {sortedGroupedCorrections.length !== 1 ? "s" : ""} with feedback for attention
+          </div>
+          {sortedGroupedCorrections.map(([itemId, itemCorrections]) => (
+            <GroupedFeedbackCard
+              key={itemId}
+              itemId={itemId}
+              corrections={itemCorrections}
+              router={router}
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full table-auto text-sm">
+            <thead>
+              <tr className="border-b text-left">
+                <th className="px-3 py-2 font-medium">Date</th>
+                <th className="px-3 py-2 font-medium">Form</th>
+                <th className="px-3 py-2 font-medium">Field</th>
+                <th className="px-3 py-2 font-medium">Extracted</th>
+                <th className="px-3 py-2 font-medium">Corrected</th>
+                <th className="px-3 py-2 font-medium">Feedback</th>
+                <th className="px-3 py-2 font-medium">Status</th>
+                <th className="px-3 py-2 font-medium"> </th>
+              </tr>
+            </thead>
+            <tbody>
+              {corrections.map((c) => (
+                <tr key={c.id} className="border-b last:border-0">
+                  <td className="px-3 py-2 whitespace-nowrap">
+                    {new Date(c.createdAt).toLocaleDateString()}
+                  </td>
+                  <td className="px-3 py-2 whitespace-nowrap">
+                    {c.submissionItem?.formField?.group?.form?.id ? (
+                      <Link
+                        to="/workflows/$wfSlug/$formId"
+                        params={{
+                          wfSlug:
+                            c.submissionItem.formField.group.form.workflow?.slug || "workflow",
+                          formId: c.submissionItem.formField.group.form.id,
+                        }}
+                        className="text-brand-600 hover:underline"
+                      >
+                        {c.submissionItem.formField.group.form.workflow?.name || "Unknown Form"}
+                      </Link>
+                    ) : (
+                      <span className="text-muted-foreground">Unknown Form</span>
+                    )}
+                  </td>
+                  <td className="px-3 py-2 whitespace-nowrap">
+                    <span className="text-brand-600">
+                      {c.submissionItem?.formField?.name || "Unknown Field"}
+                    </span>
+                  </td>
+                  <td className="max-w-[12rem] truncate px-3 py-2">
+                    {c.extractedValue?.toString() ?? "null"}
+                  </td>
+                  <td className="max-w-[12rem] truncate px-3 py-2">
+                    {c.correctedValue?.toString()}
+                  </td>
+                  <td className="max-w-[16rem] truncate px-3 py-2">
+                    {c.feedback ? (
+                      <span className="text-muted-foreground italic" title={c.feedback}>
+                        "{c.feedback}"
+                      </span>
+                    ) : (
+                      <span className="text-muted-foreground">—</span>
+                    )}
+                  </td>
+                  <td className="px-3 py-2">
+                    <Badge variant={c.status === "pending" ? "secondary" : "green"}>
+                      {c.status}
+                    </Badge>
+                  </td>
+                  <td className="px-3 py-2 text-right">
+                    {c.status === "pending" && (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        className="h-6 px-2 text-xs"
+                        onClick={async () => {
+                          await markAddressedFn({ data: { correctionId: c.id } });
+                          router.invalidate();
+                        }}
+                      >
+                        Mark addressed
+                      </Button>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </Container>
+  );
+}