ui: unnest dashboard detail routes and stabilize form hooks

2026-04-29 19:20:27 +07:00 · 2026-04-29 19:20:27 +07:00 · 8e9acd5006
commit 8e9acd5006
parent 41fff32f60
5 changed files with 219 additions and 157 deletions
--- a/apps/web/src/routes/dashboard.servers_.$serverId.tsx
+++ b/apps/web/src/routes/dashboard.servers_.$serverId.tsx
@ -0,0 +1,147 @@
+import { Button } from "@minmon/ui/components/button";
+import { StatusBadge } from "@minmon/ui/components/status-badge";
+import { useForm } from "@tanstack/react-form";
+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 { queryClient, trpc, trpcClient } from "@/utils/trpc";
+
+export const Route = createFileRoute("/dashboard/servers_/$serverId")({
+  component: RouteComponent,
+});
+
+type ServerFormValues = {
+  name: string;
+  primaryIpAddress: string;
+  secondaryIpAddress: string;
+  operatingSystem: string;
+  location: string;
+  provider: string;
+  description: string;
+  status: "active" | "maintenance" | "inactive";
+};
+
+function RouteComponent() {
+  const { serverId } = Route.useParams();
+  const navigate = useNavigate();
+  const server = useQuery(trpc.servers.byId.queryOptions({ id: serverId }));
+
+  const updateServer = useMutation({
+    mutationFn: async (values: ServerFormValues) =>
+      trpcClient.servers.update.mutate({
+        id: serverId,
+        ...values,
+        secondaryIpAddress: values.secondaryIpAddress || null,
+        operatingSystem: values.operatingSystem || null,
+        location: values.location || null,
+        provider: values.provider || null,
+        description: values.description || null,
+      }),
+    onSuccess: async () => {
+      toast.success("Server updated");
+      await queryClient.invalidateQueries();
+    },
+    onError: (error) => toast.error(error.message),
+  });
+
+  const defaultValues: ServerFormValues = {
+      name: "",
+      primaryIpAddress: "",
+      secondaryIpAddress: "",
+      operatingSystem: "",
+      location: "",
+      provider: "",
+      description: "",
+      status: "active",
+    };
+
+  const form = useForm({
+    defaultValues,
+    onSubmit: async ({ value }) => {
+      await updateServer.mutateAsync(value);
+    },
+  });
+
+  useEffect(() => {
+    if (!server.data) {
+      return;
+    }
+
+    form.reset({
+      name: server.data.name,
+      primaryIpAddress: server.data.primaryIpAddress,
+      secondaryIpAddress: server.data.secondaryIpAddress ?? "",
+      operatingSystem: server.data.operatingSystem ?? "",
+      location: server.data.location ?? "",
+      provider: server.data.provider ?? "",
+      description: server.data.description ?? "",
+      status: server.data.status,
+    });
+  }, [server.data, form]);
+
+  if (server.isLoading) {
+    return <QueryStateCard title="Loading server" description="Fetching the selected server details." />;
+  }
+
+  if (server.isError || !server.data) {
+    return <QueryStateCard title="Server unavailable" description="The requested server could not be loaded." />;
+  }
+
+  return (
+    <div className="grid gap-6">
+      <PageSection title={server.data.name} description="View and edit the selected server.">
+        <DetailCard
+          title="Server summary"
+          description="Relationship and status summary for this server."
+          rows={[
+            { label: "Status", value: <StatusBadge variant={server.data.status === "active" ? "success" : server.data.status === "maintenance" ? "warning" : "neutral"}>{server.data.status}</StatusBadge> },
+            { label: "Primary IP", value: server.data.primaryIpAddress },
+            { label: "Secondary IP", value: server.data.secondaryIpAddress || "-" },
+            { label: "Operating system", value: server.data.operatingSystem || "-" },
+            { label: "Location", value: server.data.location || "-" },
+            { label: "Provider", value: server.data.provider || "-" },
+            { label: "Services", value: String(server.data.summary.services) },
+            { label: "Notes", value: String(server.data.summary.notes) },
+          ]}
+        />
+      </PageSection>
+
+      <form
+        className="grid gap-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          form.handleSubmit();
+        }}
+      >
+        <FormCard
+          title="Edit server"
+          description="Update server information and keep the dashboard records current."
+          footer={
+            <>
+              <Button type="button" variant="ghost" onClick={() => navigate({ to: "/dashboard/servers" })}>
+                Back
+              </Button>
+              <form.Subscribe selector={(state) => ({ isSubmitting: state.isSubmitting })}>
+                {({ isSubmitting }) => <Button type="submit">{isSubmitting ? "Saving..." : "Save changes"}</Button>}
+              </form.Subscribe>
+            </>
+          }
+        >
+          <div className="grid gap-4 md:grid-cols-2">
+            <form.Field name="name">{(field) => <TextField label="Server name" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
+            <form.Field name="primaryIpAddress">{(field) => <TextField label="Primary IP address" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
+            <form.Field name="secondaryIpAddress">{(field) => <TextField label="Secondary IP address" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
+            <form.Field name="operatingSystem">{(field) => <TextField label="Operating system" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
+            <form.Field name="location">{(field) => <TextField label="Location" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
+            <form.Field name="provider">{(field) => <TextField label="Provider" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
+            <form.Field name="status">{(field) => <TextField label="Status" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value as "active" | "maintenance" | "inactive")} />}</form.Field>
+          </div>
+          <form.Field name="description">{(field) => <TextAreaField label="Description" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
+        </FormCard>
+      </form>
+    </div>
+  );
+}