feat: redesign Clients admin — drag-and-drop, inline edit, tags

Schema:
- Client model: add tags String[] field
- Shared types + Zod schemas updated for tags

API:
- client.create/update: accept tags array
- client.delete: with safety checks (no projects, no children)
- client.batchUpdateSortOrder: batch reorder in transaction

UI (complete redesign of ClientsAdminClient):
- Drag-and-drop reordering via @dnd-kit (sortable)
- Inline editing: click name/sortOrder to edit in-place
- Tag pills: auto-colored by hash, add/remove inline
- Tag auto-suggest from existing tags across all clients
- Sticky "Add Client" input row at top
- Search/filter by name, code, or tag
- Delete with inline confirmation
- Optimistic reorder (instant UI update)
- Full dark theme support

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
2026-03-22 21:04:20 +01:00
parent a9a8a13424
commit 03922764db
7 changed files with 731 additions and 217 deletions
+43 -1
View File
@@ -2,7 +2,7 @@ import { CreateClientSchema, UpdateClientSchema } from "@planarchy/shared";
import { TRPCError } from "@trpc/server";
import { z } from "zod";
import { findUniqueOrThrow } from "../db/helpers.js";
import { createTRPCRouter, managerProcedure, protectedProcedure } from "../trpc.js";
import { adminProcedure, createTRPCRouter, managerProcedure, protectedProcedure } from "../trpc.js";
import type { ClientTree } from "@planarchy/shared";
@@ -13,6 +13,7 @@ interface FlatClient {
parentId: string | null;
isActive: boolean;
sortOrder: number;
tags: string[];
createdAt: Date;
updatedAt: Date;
}
@@ -102,6 +103,7 @@ export const clientRouter = createTRPCRouter({
...(input.code ? { code: input.code } : {}),
...(input.parentId ? { parentId: input.parentId } : {}),
sortOrder: input.sortOrder,
...(input.tags ? { tags: input.tags } : {}),
},
});
}),
@@ -129,6 +131,7 @@ export const clientRouter = createTRPCRouter({
...(input.data.sortOrder !== undefined ? { sortOrder: input.data.sortOrder } : {}),
...(input.data.isActive !== undefined ? { isActive: input.data.isActive } : {}),
...(input.data.parentId !== undefined ? { parentId: input.data.parentId } : {}),
...(input.data.tags !== undefined ? { tags: input.data.tags } : {}),
},
});
}),
@@ -141,4 +144,43 @@ export const clientRouter = createTRPCRouter({
data: { isActive: false },
});
}),
delete: adminProcedure
.input(z.object({ id: z.string() }))
.mutation(async ({ ctx, input }) => {
const client = await findUniqueOrThrow(
ctx.db.client.findUnique({
where: { id: input.id },
include: { _count: { select: { projects: true, children: true } } },
}),
"Client",
);
if (client._count.projects > 0) {
throw new TRPCError({
code: "PRECONDITION_FAILED",
message: `Cannot delete client with ${client._count.projects} project(s). Deactivate instead.`,
});
}
if (client._count.children > 0) {
throw new TRPCError({
code: "PRECONDITION_FAILED",
message: `Cannot delete client with ${client._count.children} child client(s). Remove children first.`,
});
}
return ctx.db.client.delete({ where: { id: input.id } });
}),
batchUpdateSortOrder: managerProcedure
.input(z.array(z.object({ id: z.string(), sortOrder: z.number().int() })))
.mutation(async ({ ctx, input }) => {
await ctx.db.$transaction(
input.map((item) =>
ctx.db.client.update({
where: { id: item.id },
data: { sortOrder: item.sortOrder },
}),
),
);
return { ok: true };
}),
});
+1
View File
@@ -602,6 +602,7 @@ model Client {
children Client[] @relation("ClientTree")
isActive Boolean @default(true)
sortOrder Int @default(0)
tags String[] @default([])
projects Project[]
resourceClientUnits Resource[] @relation("resource_client_unit")
@@ -5,6 +5,7 @@ export const CreateClientSchema = z.object({
code: z.string().max(50).optional(),
parentId: z.string().optional(),
sortOrder: z.number().int().default(0),
tags: z.array(z.string().max(50)).optional(),
});
export const UpdateClientSchema = z.object({
@@ -13,6 +14,7 @@ export const UpdateClientSchema = z.object({
sortOrder: z.number().int().optional(),
isActive: z.boolean().optional(),
parentId: z.string().nullable().optional(),
tags: z.array(z.string().max(50)).optional(),
});
export type CreateClientInput = z.infer<typeof CreateClientSchema>;
+1
View File
@@ -5,6 +5,7 @@ export interface Client {
parentId?: string | null;
isActive: boolean;
sortOrder: number;
tags: string[];
createdAt: Date;
updatedAt: Date;
}