T1/Phase 1: scaffold Vite SPA + Hono API + Bun worker
- apps/web: Vite + React 19 + TanStack Router/Query + shadcn/ui - apps/api: Hono + Bun on :3001 with /api/health, /api/auth/*, /mcp stubs - apps/worker: Bun worker stub, DB connection, graceful SIGTERM - apps/web-legacy/: old Next.js code moved aside (preserved for T2-T8 reference) - Dockerfiles: api (Bun), worker (Bun), spa (multi-stage Caddy) - Caddyfile: serves dist + reverse-proxies /api/* + /mcp to api - docker-compose.yml: 4-service target (api, spa, db, worker) - packages/db/src/client.ts: shared Drizzle client for api + worker - db/client.ts: root-level alias for convenience Parent: t_e1cbd87d -> t_24c9c3fd (T0)
This commit is contained in:
Hermes
@@ -0,0 +1,381 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState, Suspense } from 'react';
|
||||
import { Plus, FileBarChart, Calendar, Target, TrendingUp, Clock, Trash2 } from 'lucide-react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
|
||||
// Lazy load TipTap report editor (~80KB)
|
||||
const ReportEditor = dynamic(
|
||||
() => import('@/components/reports/report-editor').then((m) => m.ReportEditor),
|
||||
{
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<div className="animate-pulse text-sm text-muted-foreground">Loading editor...</div>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
);
|
||||
|
||||
// Lazy load report templates
|
||||
const ReportTemplates = dynamic(
|
||||
() => import('@/components/reports/report-templates').then((m) => m.ReportTemplates),
|
||||
{
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<div className="animate-pulse text-sm text-muted-foreground">Loading templates...</div>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
);
|
||||
|
||||
interface Report {
|
||||
id: string;
|
||||
title: string;
|
||||
content: string;
|
||||
report_type: 'weekly' | 'monthly' | 'project' | 'habit' | 'custom';
|
||||
date_range_start?: string;
|
||||
date_range_end?: string;
|
||||
domain: string;
|
||||
created: string;
|
||||
updated: string;
|
||||
}
|
||||
|
||||
export default function ReportsPage() {
|
||||
const [reports, setReports] = useState<Report[]>([]);
|
||||
const [selectedReport, setSelectedReport] = useState<Report | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showTemplates, setShowTemplates] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [saveStatus, setSaveStatus] = useState<'Saved' | 'Saving' | 'Failed'>('Saved');
|
||||
const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
|
||||
const [reportToDelete, setReportToDelete] = useState<Report | null>(null);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const pendingSave = useRef<{ id: string; updates: Partial<Report> } | null>(null);
|
||||
const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const saveVersion = useRef(0);
|
||||
|
||||
useEffect(() => {
|
||||
fetchReports();
|
||||
fetchDomains();
|
||||
return () => {
|
||||
if (saveTimer.current) clearTimeout(saveTimer.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
async function fetchDomains() {
|
||||
try {
|
||||
const res = await fetch('/api/domains?sort=sort_order');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
const map = new Map<string, string>();
|
||||
for (const d of data.items || []) map.set(d.id, d.name);
|
||||
setDomainMap(map);
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async function fetchReports() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetch('/api/reports?sort=-created');
|
||||
if (!response.ok) throw new Error('Unable to load reports.');
|
||||
const data = await response.json();
|
||||
const reportsList = data.items || [];
|
||||
setReports(reportsList);
|
||||
setSelectedReport((current) => current || reportsList[0] || null);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch reports:', error);
|
||||
setError('Unable to load reports. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function createReport(overrides?: Partial<Report>) {
|
||||
try {
|
||||
const response = await fetch('/api/reports', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
title: 'Untitled report',
|
||||
content: '',
|
||||
report_type: 'custom',
|
||||
domain: 'personal',
|
||||
...overrides,
|
||||
}),
|
||||
});
|
||||
if (!response.ok) throw new Error('Unable to create report.');
|
||||
const newReport = await response.json();
|
||||
setReports((current) => [newReport, ...current]);
|
||||
setSelectedReport(newReport);
|
||||
setShowTemplates(false);
|
||||
toast.success('Report created');
|
||||
} catch (error) {
|
||||
console.error('Failed to create report:', error);
|
||||
toast.error('Unable to create report');
|
||||
}
|
||||
}
|
||||
|
||||
function scheduleSave(reportId: string, updates: Partial<Report>) {
|
||||
const version = ++saveVersion.current;
|
||||
pendingSave.current = {
|
||||
id: reportId,
|
||||
updates: { ...(pendingSave.current?.id === reportId ? pendingSave.current.updates : {}), ...updates },
|
||||
};
|
||||
if (saveTimer.current) clearTimeout(saveTimer.current);
|
||||
setSaveStatus('Saving');
|
||||
saveTimer.current = setTimeout(() => {
|
||||
const save = pendingSave.current;
|
||||
pendingSave.current = null;
|
||||
if (save) updateReport(save.id, save.updates, version);
|
||||
}, 700);
|
||||
}
|
||||
|
||||
async function updateReport(reportId: string, updates: Partial<Report>, version: number) {
|
||||
try {
|
||||
const response = await fetch(`/api/reports/${reportId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(updates),
|
||||
});
|
||||
if (!response.ok) throw new Error('Unable to save report.');
|
||||
const updated = await response.json();
|
||||
setReports((current) => current.map((report) => (report.id === reportId ? updated : report)));
|
||||
if (saveVersion.current === version) setSaveStatus('Saved');
|
||||
} catch (error) {
|
||||
console.error('Failed to update report:', error);
|
||||
if (saveVersion.current === version) setSaveStatus('Failed');
|
||||
toast.error('Unable to save report');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteReport() {
|
||||
if (!reportToDelete) return;
|
||||
if (pendingSave.current?.id === reportToDelete.id && saveTimer.current) {
|
||||
clearTimeout(saveTimer.current);
|
||||
pendingSave.current = null;
|
||||
}
|
||||
++saveVersion.current;
|
||||
setDeleting(true);
|
||||
try {
|
||||
const response = await fetch(`/api/reports/${reportToDelete.id}`, { method: 'DELETE' });
|
||||
if (!response.ok) throw new Error('Unable to delete report.');
|
||||
setReports((current) => current.filter((report) => report.id !== reportToDelete.id));
|
||||
setSelectedReport((selected) =>
|
||||
selected?.id === reportToDelete.id ? reports.find((report) => report.id !== reportToDelete.id) || null : selected
|
||||
);
|
||||
setReportToDelete(null);
|
||||
toast.success('Report deleted');
|
||||
} catch (error) {
|
||||
console.error('Failed to delete report:', error);
|
||||
toast.error('Unable to delete report');
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
}
|
||||
}
|
||||
|
||||
function getReportTypeIcon(type: string) {
|
||||
switch (type) {
|
||||
case 'weekly':
|
||||
return <Calendar className="h-4 w-4" />;
|
||||
case 'monthly':
|
||||
return <Calendar className="h-4 w-4" />;
|
||||
case 'project':
|
||||
return <Target className="h-4 w-4" />;
|
||||
case 'habit':
|
||||
return <TrendingUp className="h-4 w-4" />;
|
||||
case 'custom':
|
||||
return <FileBarChart className="h-4 w-4" />;
|
||||
default:
|
||||
return <FileBarChart className="h-4 w-4" />;
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <p className="text-muted-foreground" role="status">Loading reports...</p>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div className="space-y-3"><p className="text-muted-foreground" role="alert">{error}</p><Button onClick={fetchReports}>Retry</Button></div>;
|
||||
}
|
||||
|
||||
if (showTemplates) {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<div className="animate-pulse text-sm text-muted-foreground">Loading templates...</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<ReportTemplates
|
||||
onSelect={(template) => {
|
||||
createReport({
|
||||
title: template.name,
|
||||
report_type: template.type,
|
||||
content: template.content,
|
||||
});
|
||||
}}
|
||||
onCancel={() => setShowTemplates(false)}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Reports</h1>
|
||||
<p className="mt-1 text-muted-foreground">Step back and see what changed.</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={() => setShowTemplates(true)}>
|
||||
From template
|
||||
</Button>
|
||||
<Button onClick={() => createReport()}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
New report
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-[300px_1fr]">
|
||||
{/* Reports list */}
|
||||
<Card className="max-h-80 overflow-auto lg:h-[calc(100vh-200px)] lg:max-h-none">
|
||||
<div className="p-2">
|
||||
{reports.length === 0 ? (
|
||||
<div className="py-8 text-center">
|
||||
<p className="text-sm text-muted-foreground">No reports yet</p>
|
||||
<Button className="mt-3" size="sm" onClick={() => createReport()}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Create your first report
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{reports.map((report) => (
|
||||
<button
|
||||
key={report.id}
|
||||
onClick={() => setSelectedReport(report)}
|
||||
aria-label={`Open report: ${report.title}`}
|
||||
aria-current={selectedReport?.id === report.id ? 'true' : undefined}
|
||||
className={`w-full rounded-lg p-3 text-left transition-colors ${
|
||||
selectedReport?.id === report.id
|
||||
? 'bg-accent'
|
||||
: 'hover:bg-accent/50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="mt-0.5 text-muted-foreground" aria-hidden="true">
|
||||
{getReportTypeIcon(report.report_type)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="truncate text-sm font-medium">{report.title}</p>
|
||||
<p className="mt-1 truncate text-xs text-muted-foreground">
|
||||
{new Date(report.updated).toLocaleDateString()}
|
||||
</p>
|
||||
<div className="mt-1 flex gap-1">
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{report.report_type}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{domainMap.get(report.domain) || report.domain}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Report editor */}
|
||||
<Card className="min-h-[420px] lg:h-[calc(100vh-200px)]">
|
||||
{selectedReport ? (
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="border-b p-4">
|
||||
<label htmlFor="report-title" className="sr-only">
|
||||
Report title
|
||||
</label>
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
id="report-title"
|
||||
type="text"
|
||||
value={selectedReport.title}
|
||||
onChange={(e) => { const title = e.target.value; setSelectedReport({ ...selectedReport, title }); scheduleSave(selectedReport.id, { title }); }}
|
||||
className="min-w-0 flex-1 text-xl font-semibold outline-none"
|
||||
placeholder="Report title"
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground" role="status">{saveStatus}</span>
|
||||
<AlertDialog open={reportToDelete?.id === selectedReport.id} onOpenChange={(open) => !open && setReportToDelete(null)}>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="ghost" size="icon" aria-label={`Delete ${selectedReport.title}`} onClick={() => setReportToDelete(selectedReport)}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader><AlertDialogTitle>Delete {reportToDelete?.title}?</AlertDialogTitle><AlertDialogDescription>This permanently deletes this report.</AlertDialogDescription></AlertDialogHeader>
|
||||
<AlertDialogFooter><AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel><AlertDialogAction onClick={deleteReport} disabled={deleting}>{deleting ? 'Deleting...' : 'Delete report'}</AlertDialogAction></AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
<div className="mt-2 flex gap-2">
|
||||
<Badge variant="outline">{selectedReport.report_type}</Badge>
|
||||
<Badge variant="outline">{domainMap.get(selectedReport.domain) || selectedReport.domain}</Badge>
|
||||
{selectedReport.date_range_start && selectedReport.date_range_end && (
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
{new Date(selectedReport.date_range_start).toLocaleDateString()} -{' '}
|
||||
{new Date(selectedReport.date_range_end).toLocaleDateString()}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto p-4">
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<div className="animate-pulse text-sm text-muted-foreground">
|
||||
Loading editor...
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<ReportEditor
|
||||
content={selectedReport.content}
|
||||
onChange={(content) => { setSelectedReport({ ...selectedReport, content }); scheduleSave(selectedReport.id, { content }); }}
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-muted-foreground">Select a report or create a new one</p>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user