feat: add SPA, serve at /app/, update Dockerfile and README

- React + TanStack Router + shadcn/ui SPA under spa/ - serve spa/dist at /app/ with index.html fallback for client routing - Dockerfile: node build stage for SPA, copy dist into runtime image - README: document SPA, CORS_ORIGINS env var, architecture entry - vite base set to /app/, manifest.json paths fixed
2026-06-04 04:20:15 +02:00
parent 15dc0e526b
commit b9c0b10740
153 changed files with 24329 additions and 1 deletions
--- a/spa/src/routes/_app/settings/wrapup.tsx
+++ b/spa/src/routes/_app/settings/wrapup.tsx
@@ -0,0 +1,148 @@
+import { createFileRoute, Link } from "@tanstack/react-router"
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { ArrowLeft, ChevronRight, Sparkles, Trash2 } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Skeleton } from "@/components/ui/skeleton"
+import { EmptyState } from "@/components/empty-state"
+import { useIsAdmin } from "@/components/auth-provider"
+import {
+  useWrapUps,
+  useGenerateWrapUp,
+  useDeleteWrapUp,
+} from "@/hooks/use-wrapup"
+
+export const Route = createFileRoute("/_app/settings/wrapup")({
+  component: WrapupPage,
+})
+
+function WrapupPage() {
+  const { t } = useTranslation()
+  const isAdmin = useIsAdmin()
+  const { data, isPending } = useWrapUps()
+  const generate = useGenerateWrapUp()
+  const remove = useDeleteWrapUp()
+
+  const [open, setOpen] = useState(false)
+  const [startDate, setStartDate] = useState("")
+  const [endDate, setEndDate] = useState("")
+
+  const handleGenerate = () => {
+    generate.mutate(
+      { start_date: startDate, end_date: endDate },
+      {
+        onSuccess: () => {
+          setOpen(false)
+          setStartDate("")
+          setEndDate("")
+        },
+      },
+    )
+  }
+
+  const items = data?.items ?? []
+
+  return (
+    <div className="space-y-4 p-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <Link to="/settings" className="text-muted-foreground">
+            <ArrowLeft className="size-5" />
+          </Link>
+          <h1 className="text-lg font-bold">{t("wrapup.title")}</h1>
+        </div>
+        {isAdmin && (
+          <Button variant="ghost" size="icon" onClick={() => setOpen(true)}>
+            <Sparkles className="size-5" />
+          </Button>
+        )}
+      </div>
+
+      {isPending ? (
+        <div className="space-y-2">
+          {[1, 2].map((i) => (
+            <Skeleton key={i} className="h-14 rounded-xl" />
+          ))}
+        </div>
+      ) : !items.length ? (
+        <EmptyState icon={Sparkles} title={t("wrapup.noWrapUps")} />
+      ) : (
+        <div className="space-y-2">
+          {items.map((w) => (
+            <Card key={w.id} size="sm">
+              <CardContent className="flex items-center justify-between">
+                {w.status === "completed" ? (
+                  <Link to="/wrapup/$id" params={{ id: w.id }} className="flex flex-1 items-center justify-between">
+                    <div>
+                      <p className="text-sm font-medium">{w.start_date} — {w.end_date}</p>
+                      <Badge className="mt-1 text-[10px]">{w.status}</Badge>
+                    </div>
+                    <ChevronRight className="size-4 text-muted-foreground" />
+                  </Link>
+                ) : (
+                  <div>
+                    <p className="text-sm font-medium">{w.start_date} — {w.end_date}</p>
+                    <Badge variant="secondary" className="mt-1 text-[10px]">{w.status}</Badge>
+                  </div>
+                )}
+                {isAdmin && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => remove.mutate(w.id)}
+                    className="ml-2 text-destructive hover:text-destructive"
+                  >
+                    <Trash2 className="size-4" />
+                  </Button>
+                )}
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerContent className="mx-auto max-w-lg">
+          <DrawerHeader>
+            <DrawerTitle>{t("wrapup.generateWrapUp")}</DrawerTitle>
+          </DrawerHeader>
+          <div className="space-y-3 p-4 pb-8">
+            <div className="space-y-1.5">
+              <Label>{t("wrapup.startDate")}</Label>
+              <Input
+                type="date"
+                value={startDate}
+                onChange={(e) => setStartDate(e.target.value)}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label>{t("wrapup.endDate")}</Label>
+              <Input
+                type="date"
+                value={endDate}
+                onChange={(e) => setEndDate(e.target.value)}
+              />
+            </div>
+            <Button
+              onClick={handleGenerate}
+              disabled={generate.isPending || !startDate || !endDate}
+              className="w-full"
+            >
+              {generate.isPending ? t("common.generating") : t("common.generate")}
+            </Button>
+          </div>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  )
+}