@tailor-platform/erp-kit 0.7.0 → 0.8.0

package/templates/scaffold/app/frontend/src/pages/user-management/role/[id]/components/role-detail.tsx

@@ -0,0 +1,69 @@
+import { Badge, DescriptionCard } from "@tailor-platform/app-shell";
+import { graphql, type FragmentOf, readFragment } from "@/graphql";
+import { groupPermissions, isAutoAssigned } from "@/lib/permission-groups";
+
+export const RoleDetailFragment = graphql(`
+  fragment RoleDetail on Role {
+    id
+    name
+    description
+    createdAt
+    rolePermissions {
+      edges {
+        node {
+          id
+          permission {
+            id
+            key
+            description
+          }
+        }
+      }
+    }
+  }
+`);
+
+interface RoleDetailProps {
+  role: FragmentOf<typeof RoleDetailFragment>;
+}
+
+export const RoleDetail = ({ role: roleFragment }: RoleDetailProps) => {
+  const role = readFragment(RoleDetailFragment, roleFragment);
+  const assignedPermissions = role.rolePermissions.edges
+    .map((edge) => edge.node.permission)
+    .filter((p): p is NonNullable<typeof p> => p != null)
+    .filter((p) => !isAutoAssigned(p));
+  const assignedGroups = groupPermissions(assignedPermissions);
+
+  return (
+    <div className="space-y-6">
+      <DescriptionCard
+        data={role}
+        title="Role Information"
+        columns={3}
+        fields={[
+          { key: "name", label: "Name" },
+          { key: "description", label: "Description" },
+          {
+            key: "createdAt",
+            label: "Created At",
+            type: "date",
+            meta: { dateFormat: "medium" },
+          },
+        ]}
+      />
+      <div className="rounded-lg border p-4">
+        <h3 className="mb-3 text-sm font-medium">Permissions</h3>
+        {assignedGroups.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No permissions assigned.</p>
+        ) : (
+          <div className="flex flex-wrap gap-2">
+            {assignedGroups.map((group) => (
+              <Badge key={group.label}>{group.label}</Badge>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/templates/scaffold/app/frontend/src/pages/user-management/role/[id]/edit/components/edit-role-form.tsx

@@ -0,0 +1,192 @@
+import { useState } from "react";
+import { Button, useNavigate } from "@tailor-platform/app-shell";
+import { useQuery, useMutation } from "urql";
+import { graphql, type FragmentOf, readFragment } from "@/graphql";
+import { useToast } from "@/hooks/use-toast";
+import { Loading } from "@/components/composed/loading";
+import { ErrorFallback } from "@/components/composed/error-fallback";
+import { groupPermissions, isAutoAssigned, type PermissionGroup } from "@/lib/permission-groups";
+
+export const EditRoleFormFragment = graphql(`
+  fragment EditRoleForm on Role {
+    id
+    name
+    rolePermissions {
+      edges {
+        node {
+          id
+          permission {
+            id
+            key
+            description
+          }
+        }
+      }
+    }
+  }
+`);
+
+const AllPermissionsQuery = graphql(`
+  query AllPermissions {
+    permissions {
+      edges {
+        node {
+          id
+          key
+          description
+        }
+      }
+    }
+  }
+`);
+
+const AssignPermissionMutation = graphql(`
+  mutation AssignPermissionToRole($roleId: String!, $permissionId: String!) {
+    assignPermissionToRole(roleId: $roleId, permissionId: $permissionId) {
+      roleId
+      permissionId
+    }
+  }
+`);
+
+const RevokePermissionMutation = graphql(`
+  mutation RevokePermissionFromRole($roleId: String!, $permissionId: String!) {
+    revokePermissionFromRole(roleId: $roleId, permissionId: $permissionId) {
+      roleId
+      permissionId
+    }
+  }
+`);
+
+interface EditRoleFormProps {
+  role: FragmentOf<typeof EditRoleFormFragment>;
+}
+
+export const EditRoleForm = ({ role: roleFragment }: EditRoleFormProps) => {
+  const role = readFragment(EditRoleFormFragment, roleFragment);
+  const navigate = useNavigate();
+  const toast = useToast();
+  const [submitting, setSubmitting] = useState(false);
+
+  const assignedPermissionIds = new Set(
+    role.rolePermissions.edges
+      .filter((edge) => edge.node.permission != null)
+      .map((edge) => edge.node.permission!.id),
+  );
+
+  const [selectedPermissionIds, setSelectedPermissionIds] = useState<Set<string>>(
+    () => new Set(assignedPermissionIds),
+  );
+
+  const [{ data: permissionsData, error: permissionsError, fetching: permissionsFetching }] =
+    useQuery({ query: AllPermissionsQuery });
+
+  const [, assignPermission] = useMutation(AssignPermissionMutation);
+  const [, revokePermission] = useMutation(RevokePermissionMutation);
+
+  if (permissionsFetching) return <Loading />;
+
+  if (permissionsError || !permissionsData) {
+    return (
+      <ErrorFallback
+        title="Failed to load permissions"
+        message="An error occurred while fetching the permissions list."
+      />
+    );
+  }
+
+  const allPermissions = permissionsData.permissions.edges.map((edge) => edge.node);
+  const permissionGroups = groupPermissions(allPermissions);
+
+  const isGroupSelected = (group: PermissionGroup) =>
+    group.permissions.every((p) => selectedPermissionIds.has(p.id));
+
+  const toggleGroup = (group: PermissionGroup) => {
+    setSelectedPermissionIds((prev) => {
+      const next = new Set(prev);
+      const allSelected = group.permissions.every((p) => next.has(p.id));
+      for (const p of group.permissions) {
+        if (allSelected) next.delete(p.id);
+        else next.add(p.id);
+      }
+      return next;
+    });
+  };
+
+  const onSubmit = async () => {
+    setSubmitting(true);
+
+    const autoAssignedIds = new Set(allPermissions.filter(isAutoAssigned).map((p) => p.id));
+    const toAssign = [...selectedPermissionIds].filter((id) => !assignedPermissionIds.has(id));
+    // Never revoke auto-assigned permissions
+    const toRevoke = [...assignedPermissionIds].filter(
+      (id) => !selectedPermissionIds.has(id) && !autoAssignedIds.has(id),
+    );
+
+    const operations = [
+      ...toAssign.map((permissionId) =>
+        assignPermission(
+          { roleId: role.id, permissionId },
+          { additionalTypenames: ["RolePermission", "Role"] },
+        ),
+      ),
+      ...toRevoke.map((permissionId) =>
+        revokePermission(
+          { roleId: role.id, permissionId },
+          { additionalTypenames: ["RolePermission", "Role"] },
+        ),
+      ),
+    ];
+
+    const results = await Promise.all(operations);
+    const errorResult = results.find((r) => r.error);
+
+    setSubmitting(false);
+
+    if (errorResult?.error) {
+      toast.error(errorResult.error);
+      return;
+    }
+
+    toast.success("Role permissions updated successfully");
+    void navigate("..");
+  };
+
+  const onCancel = () => {
+    void navigate("..");
+  };
+
+  return (
+    <div className="max-w-md space-y-4">
+      <h2 className="text-lg font-semibold">Permissions for {role.name}</h2>
+      {permissionGroups.length === 0 ? (
+        <p className="text-sm text-muted-foreground">No permissions available.</p>
+      ) : (
+        <div className="space-y-3">
+          {permissionGroups.map((group) => (
+            <label key={group.label} className="flex items-start gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={isGroupSelected(group)}
+                onChange={() => toggleGroup(group)}
+                className="mt-1"
+              />
+              <div>
+                <div className="text-sm font-medium">{group.label}</div>
+                <div className="text-xs text-muted-foreground">{group.description}</div>
+              </div>
+            </label>
+          ))}
+        </div>
+      )}
+      <div className="flex gap-2">
+        <Button onClick={() => void onSubmit()} disabled={submitting}>
+          {submitting ? "Saving..." : "Save"}
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+};

package/templates/scaffold/app/frontend/src/pages/user-management/role/[id]/edit/page.tsx

@@ -0,0 +1,51 @@
+import { Layout, useParams, type AppShellPageProps } from "@tailor-platform/app-shell";
+import { useQuery } from "urql";
+import { EditRoleForm, EditRoleFormFragment } from "./components/edit-role-form";
+import { graphql } from "@/graphql";
+import { ErrorFallback } from "@/components/composed/error-fallback";
+import { Loading } from "@/components/composed/loading";
+
+const RoleForEditQuery = graphql(
+  `
+    query RoleForEdit($id: ID!) {
+      role(id: $id) {
+        ...EditRoleForm
+      }
+    }
+  `,
+  [EditRoleFormFragment],
+);
+
+const EditRolePage = () => {
+  const { id } = useParams();
+  const [{ data, error, fetching }, reexecuteQuery] = useQuery({
+    query: RoleForEditQuery,
+    variables: { id: id! },
+  });
+
+  if (fetching) return <Loading />;
+
+  if (error || !data?.role) {
+    return (
+      <ErrorFallback
+        title="Failed to load role"
+        message="An error occurred while fetching the role details."
+        onReset={() => reexecuteQuery({ requestPolicy: "network-only" })}
+      />
+    );
+  }
+
+  return (
+    <Layout columns={1} title="Edit Role">
+      <Layout.Column>
+        <EditRoleForm role={data.role} />
+      </Layout.Column>
+    </Layout>
+  );
+};
+
+EditRolePage.appShellPageProps = {
+  meta: { title: "Edit Role" },
+} satisfies AppShellPageProps;
+
+export default EditRolePage;

package/templates/scaffold/app/frontend/src/pages/user-management/role/[id]/page.tsx

@@ -0,0 +1,56 @@
+import { Layout, useParams, type AppShellPageProps } from "@tailor-platform/app-shell";
+import { useQuery } from "urql";
+import { RoleDetail, RoleDetailFragment } from "./components/role-detail";
+import { RoleActions } from "./components/role-actions";
+import { graphql } from "@/graphql";
+import { ErrorFallback } from "@/components/composed/error-fallback";
+import { Loading } from "@/components/composed/loading";
+
+const RoleQuery = graphql(
+  `
+    query Role($id: ID!) {
+      role(id: $id) {
+        ...RoleDetail
+      }
+    }
+  `,
+  [RoleDetailFragment],
+);
+
+const RolePage = () => {
+  const { id } = useParams();
+  const [{ data, error, fetching }, reexecuteQuery] = useQuery({
+    query: RoleQuery,
+    variables: { id: id! },
+  });
+
+  if (fetching) return <Loading />;
+
+  if (error || !data?.role) {
+    return (
+      <ErrorFallback
+        title="Failed to load role"
+        message="An error occurred while fetching the role details."
+        onReset={() => reexecuteQuery({ requestPolicy: "network-only" })}
+      />
+    );
+  }
+
+  return (
+    <Layout>
+      <Layout.Header title="Role Detail" />
+      <Layout.Column>
+        <RoleDetail role={data.role} />
+      </Layout.Column>
+      <Layout.Column area="right">
+        <RoleActions />
+      </Layout.Column>
+    </Layout>
+  );
+};
+
+RolePage.appShellPageProps = {
+  meta: { title: "Role Detail" },
+} satisfies AppShellPageProps;
+
+export default RolePage;

package/templates/scaffold/app/frontend/src/pages/user-management/role/components/roles-table.tsx

@@ -0,0 +1,85 @@
+import { Button, Link, Table } from "@tailor-platform/app-shell";
+import { graphql, type FragmentOf, readFragment } from "@/graphql";
+import { EmptyState } from "@/components/composed/empty-state";
+
+const RoleRowFragment = graphql(`
+  fragment RoleRow on Role {
+    id
+    name
+    description
+    createdAt
+  }
+`);
+
+export const RolesTableFragment = graphql(
+  `
+    fragment RolesTable on RoleConnection {
+      edges {
+        node {
+          ...RoleRow
+        }
+      }
+    }
+  `,
+  [RoleRowFragment],
+);
+
+interface RoleRowProps {
+  role: FragmentOf<typeof RoleRowFragment>;
+}
+
+const RoleRow = ({ role: roleFragment }: RoleRowProps) => {
+  const role = readFragment(RoleRowFragment, roleFragment);
+  return (
+    <Table.Row>
+      <Table.Cell>{role.name}</Table.Cell>
+      <Table.Cell>{role.description ?? "-"}</Table.Cell>
+      <Table.Cell>
+        {/* eslint-disable-next-line react-x/purity -- parsing a fixed timestamp, not reading current time */}
+        {role.createdAt ? new Date(role.createdAt).toLocaleDateString() : "-"}
+      </Table.Cell>
+      <Table.Cell>
+        <Button variant="ghost" size="sm" render={<Link to={role.id} />}>
+          View
+        </Button>
+      </Table.Cell>
+    </Table.Row>
+  );
+};
+
+interface RolesTableProps {
+  data: FragmentOf<typeof RolesTableFragment>;
+}
+
+export const RolesTable = ({ data }: RolesTableProps) => {
+  const connection = readFragment(RolesTableFragment, data);
+
+  if (connection.edges.length === 0) {
+    return (
+      <EmptyState
+        title="No roles"
+        message="Get started by creating a new role."
+        action={<Button render={<Link to="create" />}>Create Role</Button>}
+      />
+    );
+  }
+
+  return (
+    <Table.Root>
+      <Table.Header>
+        <Table.Row>
+          <Table.Head>Name</Table.Head>
+          <Table.Head>Description</Table.Head>
+          <Table.Head>Created At</Table.Head>
+          <Table.Head />
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {connection.edges.map((edge) => {
+          const { id } = readFragment(RoleRowFragment, edge.node);
+          return <RoleRow key={id} role={edge.node} />;
+        })}
+      </Table.Body>
+    </Table.Root>
+  );
+};

package/templates/scaffold/app/frontend/src/pages/user-management/role/create/components/create-role-form.tsx

@@ -0,0 +1,204 @@
+import { useState } from "react";
+import { Button, Input, useNavigate } from "@tailor-platform/app-shell";
+import { useMutation, useQuery } from "urql";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { graphql } from "@/graphql";
+import { useToast } from "@/hooks/use-toast";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Label } from "@/components/ui/label";
+import { groupPermissions, isAutoAssigned, type PermissionGroup } from "@/lib/permission-groups";
+
+const PermissionsForCreateQuery = graphql(`
+  query PermissionsForCreateRole {
+    permissions {
+      edges {
+        node {
+          id
+          key
+          description
+        }
+      }
+    }
+  }
+`);
+
+const CreateRoleMutation = graphql(`
+  mutation CreateRole($name: String!, $description: String) {
+    createRole(name: $name, description: $description) {
+      id
+      name
+      description
+    }
+  }
+`);
+
+const AssignPermissionMutation = graphql(`
+  mutation AssignPermissionOnCreate($roleId: String!, $permissionId: String!) {
+    assignPermissionToRole(roleId: $roleId, permissionId: $permissionId) {
+      roleId
+      permissionId
+    }
+  }
+`);
+
+const formSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  description: z.string().optional(),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+export const CreateRoleForm = () => {
+  const navigate = useNavigate();
+  const toast = useToast();
+  const [, createRole] = useMutation(CreateRoleMutation);
+  const [, assignPermission] = useMutation(AssignPermissionMutation);
+  const [{ data: permissionsData }] = useQuery({ query: PermissionsForCreateQuery });
+  const [selectedPermissions, setSelectedPermissions] = useState<Set<string>>(() => new Set());
+  const [submitting, setSubmitting] = useState(false);
+
+  const allPermissions = permissionsData?.permissions.edges.map((edge) => edge.node) ?? [];
+  const permissionGroups = groupPermissions(allPermissions);
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      description: "",
+    },
+  });
+
+  const isGroupSelected = (group: PermissionGroup) =>
+    group.permissions.every((p) => selectedPermissions.has(p.id));
+
+  const toggleGroup = (group: PermissionGroup) => {
+    setSelectedPermissions((prev) => {
+      const next = new Set(prev);
+      const allSelected = group.permissions.every((p) => next.has(p.id));
+      for (const p of group.permissions) {
+        if (allSelected) next.delete(p.id);
+        else next.add(p.id);
+      }
+      return next;
+    });
+  };
+
+  const onSubmit = async (values: FormValues) => {
+    if (selectedPermissions.size === 0) {
+      toast.error("At least one permission must be selected");
+      return;
+    }
+
+    setSubmitting(true);
+    const createResult = await createRole(values, { additionalTypenames: ["Role"] });
+    if (createResult.error) {
+      toast.error(createResult.error);
+      setSubmitting(false);
+      return;
+    }
+
+    const roleId = createResult.data?.createRole?.id;
+    if (!roleId) {
+      setSubmitting(false);
+      return;
+    }
+
+    // Include user-selected + auto-assigned permissions
+    const autoAssignedIds = allPermissions.filter(isAutoAssigned).map((p) => p.id);
+    const allPermissionIds = [...selectedPermissions, ...autoAssignedIds];
+    for (const permissionId of allPermissionIds) {
+      const assignResult = await assignPermission(
+        { roleId, permissionId },
+        { additionalTypenames: ["RolePermission"] },
+      );
+      if (assignResult.error) {
+        toast.error(assignResult.error);
+        setSubmitting(false);
+        return;
+      }
+    }
+
+    setSubmitting(false);
+    toast.success("Role created successfully");
+    void navigate("..");
+  };
+
+  const onCancel = () => {
+    void navigate("..");
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={(e) => void form.handleSubmit(onSubmit)(e)} className="max-w-md space-y-4">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter role name" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="description"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Description</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter description" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div className="space-y-2">
+          <Label>Permissions</Label>
+          <div className="rounded-md border p-3">
+            {permissionGroups.length === 0 ? (
+              <p className="text-muted-foreground text-sm">Loading permissions...</p>
+            ) : (
+              <div className="space-y-3">
+                {permissionGroups.map((group) => (
+                  <label key={group.label} className="flex items-start gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={isGroupSelected(group)}
+                      onChange={() => toggleGroup(group)}
+                      className="mt-1 rounded border"
+                    />
+                    <div>
+                      <div className="text-sm font-medium">{group.label}</div>
+                      <div className="text-xs text-muted-foreground">{group.description}</div>
+                    </div>
+                  </label>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <Button type="submit" disabled={submitting}>
+            {submitting ? "Creating..." : "Create"}
+          </Button>
+          <Button type="button" variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};

package/templates/scaffold/app/frontend/src/pages/user-management/role/create/page.tsx

@@ -0,0 +1,19 @@
+import type { AppShellPageProps } from "@tailor-platform/app-shell";
+import { CreateRoleForm } from "./components/create-role-form";
+
+const CreateRolePage = () => {
+  return (
+    <div className="p-4">
+      <h1 className="mb-4 text-2xl font-bold">Create Role</h1>
+      <CreateRoleForm />
+    </div>
+  );
+};
+
+CreateRolePage.appShellPageProps = {
+  meta: {
+    title: "Create Role",
+  },
+} satisfies AppShellPageProps;
+
+export default CreateRolePage;