syahdan/minmon
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: add remaining dashboard detail routes

Browse source
This commit is contained in:
Syahdan 2026-04-29 18:11:22 +07:00
parent cb0d4d7809
commit afd60706c3
4 changed files with 537 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

129
apps/web/src/routes/dashboard.servers.$serverId.tsx Normal file
View file

@ -0,0 +1,129 @@
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 { 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),
});
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." />;
}
const defaultValues: ServerFormValues = {
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,
};
const form = useForm({
defaultValues,
onSubmit: async ({ value }) => {
await updateServer.mutateAsync(value);
},
});
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>
);
}