docs: add report draft and dashboard form refinements

This commit is contained in:
Syahdan 2026-04-29 21:27:36 +07:00
parent 4e0cf0140f
commit 441e709193
26 changed files with 1700 additions and 505 deletions

View file

@ -4,7 +4,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useEffect } from "react";
import { toast } from "sonner";
import { DetailCard, FormCard, PageSection, QueryStateCard, TextAreaField, TextField } from "@/components/dashboard-ui";
import { DetailCard, FormCard, PageSection, QueryStateCard, SelectField, TextAreaField, TextField } from "@/components/dashboard-ui";
import { queryClient, trpc, trpcClient } from "@/utils/trpc";
export const Route = createFileRoute("/dashboard/notes_/$noteId")({
@ -75,6 +75,12 @@ function RouteComponent() {
return <QueryStateCard title="Note unavailable" description="The requested note could not be loaded." />;
}
const serverMap = new Map(servers.data.map((item) => [item.id, item.name]));
const serverOptions = servers.data.map((item) => ({
value: item.id,
label: `${item.name} (${item.id})`,
}));
return (
<div className="grid gap-6">
<PageSection title={note.data.title} description="View and edit this note.">
@ -82,7 +88,7 @@ function RouteComponent() {
title="Note summary"
description="Current note metadata and content preview."
rows={[
{ label: "Server ID", value: note.data.serverId },
{ label: "Server", value: serverMap.get(note.data.serverId) || note.data.serverId },
{ label: "Category", value: note.data.category || "-" },
{ label: "Updated", value: new Date(note.data.updatedAt).toLocaleString() },
{ label: "Content", value: note.data.content },
@ -114,13 +120,15 @@ function RouteComponent() {
>
<form.Field name="serverId">
{(field) => (
<TextField
label="Server ID"
<SelectField
label="Server"
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
description={`Available: ${servers.data.map((item) => `${item.name} (${item.id})`).join(", ")}`}
onValueChange={field.handleChange}
description="Select the server this note belongs to."
placeholder="Select a server"
options={serverOptions}
/>
)}
</form.Field>