@tailor-platform/erp-kit 0.7.0 → 0.8.0

package/templates/scaffold/app/frontend/src/hooks/use-toast.ts

@@ -10,7 +10,7 @@ function getErrorMessage(error: CombinedError): string {
   const attrError = (gqlError?.extensions as Record<string, Record<string, string>> | undefined)
     ?.attr?.error;
   if (attrError) {
-    const match = /desc = Error: (.+?)(?:\n|$)/.exec(attrError);
+    const match = /desc = (?:\w+: )?(.+?)(?:\n|$)/.exec(attrError);
     if (match) return match[1];
   }
   return error.message;

package/templates/scaffold/app/frontend/src/lib/permission-groups.ts

@@ -0,0 +1,59 @@
+// Auto-assigned to all roles — hidden from UI
+const AUTO_ASSIGNED_KEYS = new Set(["audit:logAuditEvent", "user-management:updateOwnProfile"]);
+
+const GROUPS = [
+  {
+    label: "Manage Users",
+    description: "Create, edit, activate, and deactivate user accounts",
+    keys: [
+      "user-management:createUser",
+      "user-management:updateUser",
+      "user-management:activateUser",
+      "user-management:deactivateUser",
+      "user-management:reactivateUser",
+    ],
+  },
+  {
+    label: "Assign Roles",
+    description: "Assign and remove roles from users",
+    keys: ["user-management:assignRoleToUser", "user-management:revokeRoleFromUser"],
+  },
+  {
+    label: "Manage Roles & Permissions",
+    description: "Create roles, manage permissions and their assignments",
+    keys: [
+      "user-management:createRole",
+      "user-management:createPermission",
+      "user-management:assignPermissionToRole",
+      "user-management:revokePermissionFromRole",
+    ],
+  },
+] as const;
+
+interface Permission {
+  id: string;
+  key: string;
+  description?: string | null;
+}
+
+export interface PermissionGroup {
+  label: string;
+  description: string;
+  permissions: Permission[];
+}
+
+export function groupPermissions(permissions: Permission[]): PermissionGroup[] {
+  const keyToPermission = new Map(permissions.map((p) => [p.key, p]));
+
+  return GROUPS.map((group) => ({
+    label: group.label,
+    description: group.description,
+    permissions: group.keys
+      .map((key) => keyToPermission.get(key))
+      .filter((p): p is Permission => p != null),
+  })).filter((group) => group.permissions.length > 0);
+}
+
+export function isAutoAssigned(permission: Permission): boolean {
+  return AUTO_ASSIGNED_KEYS.has(permission.key);
+}

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

@@ -0,0 +1,102 @@
+import { Badge, DescriptionCard, Table } from "@tailor-platform/app-shell";
+import { graphql, type FragmentOf, readFragment } from "@/graphql";
+
+const ChangeDetailRowFragment = graphql(`
+  fragment ChangeDetailRow on ChangeDetail {
+    id
+    fieldName
+    oldValue
+    newValue
+  }
+`);
+
+export const AuditEntryDetailFragment = graphql(
+  `
+    fragment AuditEntryDetail on AuditEntry {
+      id
+      eventId
+      operationType
+      entityType
+      entityId
+      actorType
+      actorId
+      createdAt
+      changeDetails {
+        edges {
+          node {
+            ...ChangeDetailRow
+          }
+        }
+      }
+    }
+  `,
+  [ChangeDetailRowFragment],
+);
+
+interface AuditEntryDetailProps {
+  entry: FragmentOf<typeof AuditEntryDetailFragment>;
+}
+
+export const AuditEntryDetail = ({ entry: entryFragment }: AuditEntryDetailProps) => {
+  const entry = readFragment(AuditEntryDetailFragment, entryFragment);
+  const changes = entry.changeDetails.edges.map((edge) =>
+    readFragment(ChangeDetailRowFragment, edge.node),
+  );
+
+  return (
+    <div className="space-y-6">
+      <DescriptionCard
+        data={entry}
+        title="Audit Entry"
+        columns={3}
+        fields={[
+          { key: "eventId", label: "Event ID", meta: { copyable: true } },
+          {
+            key: "createdAt",
+            label: "Timestamp",
+            type: "date",
+            meta: { dateFormat: "medium" },
+          },
+          { key: "operationType", label: "Operation Type" },
+          { type: "divider" },
+          { key: "entityType", label: "Entity Type" },
+          { key: "entityId", label: "Entity ID", meta: { copyable: true } },
+          { type: "divider" },
+          { key: "actorType", label: "Actor Type" },
+          { key: "actorId", label: "Actor ID", meta: { copyable: true } },
+        ]}
+      />
+      <div className="rounded-lg border p-4">
+        <h3 className="mb-3 text-sm font-medium">Change Details</h3>
+        {changes.length > 0 ? (
+          <Table.Root>
+            <Table.Header>
+              <Table.Row>
+                <Table.Head>Field</Table.Head>
+                <Table.Head>Old Value</Table.Head>
+                <Table.Head>New Value</Table.Head>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {changes.map((change) => (
+                <Table.Row key={change.id}>
+                  <Table.Cell>
+                    <Badge variant="outline-neutral">{change.fieldName}</Badge>
+                  </Table.Cell>
+                  <Table.Cell className="font-mono text-sm">
+                    {change.oldValue ?? <span className="text-muted-foreground">-</span>}
+                  </Table.Cell>
+                  <Table.Cell className="font-mono text-sm">
+                    {change.newValue ?? <span className="text-muted-foreground">-</span>}
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table.Root>
+        ) : (
+          <p className="text-muted-foreground text-sm">No change details recorded.</p>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,65 @@
+import {
+  Button,
+  Layout,
+  Link,
+  useParams,
+  type AppShellPageProps,
+} from "@tailor-platform/app-shell";
+import { useQuery } from "urql";
+import { AuditEntryDetail, AuditEntryDetailFragment } from "./components/audit-entry-detail";
+import { graphql } from "@/graphql";
+import { ErrorFallback } from "@/components/composed/error-fallback";
+import { Loading } from "@/components/composed/loading";
+
+const AuditEntryQuery = graphql(
+  `
+    query AuditEntryDetail($id: ID!) {
+      auditEntry(id: $id) {
+        ...AuditEntryDetail
+      }
+    }
+  `,
+  [AuditEntryDetailFragment],
+);
+
+const AuditEntryPage = () => {
+  const { id } = useParams();
+  const [{ data, error, fetching }, reexecuteQuery] = useQuery({
+    query: AuditEntryQuery,
+    variables: { id: id! },
+  });
+
+  if (fetching) return <Loading />;
+
+  if (error || !data?.auditEntry) {
+    return (
+      <ErrorFallback
+        title="Failed to load audit entry"
+        message="An error occurred while fetching the audit entry details."
+        onReset={() => reexecuteQuery({ requestPolicy: "network-only" })}
+      />
+    );
+  }
+
+  return (
+    <Layout
+      columns={1}
+      title="Audit Entry Detail"
+      actions={[
+        <Button key="back" variant="outline" render={<Link to=".." />}>
+          Back to Audit Log
+        </Button>,
+      ]}
+    >
+      <Layout.Column>
+        <AuditEntryDetail entry={data.auditEntry} />
+      </Layout.Column>
+    </Layout>
+  );
+};
+
+AuditEntryPage.appShellPageProps = {
+  meta: { title: "Audit Entry Detail" },
+} satisfies AppShellPageProps;
+
+export default AuditEntryPage;

package/templates/scaffold/app/frontend/src/pages/user-management/audit/components/audit-entries-table.tsx

@@ -0,0 +1,90 @@
+import { Button, Link, Table, Badge } from "@tailor-platform/app-shell";
+import { graphql, type FragmentOf, readFragment } from "@/graphql";
+import { EmptyState } from "@/components/composed/empty-state";
+
+const AuditEntryRowFragment = graphql(`
+  fragment AuditEntryRow on AuditEntry {
+    id
+    operationType
+    entityType
+    entityId
+    actorType
+    actorId
+    createdAt
+  }
+`);
+
+export const AuditEntriesTableFragment = graphql(
+  `
+    fragment AuditEntriesTable on AuditEntryConnection {
+      edges {
+        node {
+          ...AuditEntryRow
+        }
+      }
+    }
+  `,
+  [AuditEntryRowFragment],
+);
+
+interface AuditEntryRowProps {
+  entry: FragmentOf<typeof AuditEntryRowFragment>;
+}
+
+const AuditEntryRow = ({ entry: entryFragment }: AuditEntryRowProps) => {
+  const entry = readFragment(AuditEntryRowFragment, entryFragment);
+  return (
+    <Table.Row>
+      {/* eslint-disable-next-line react-x/purity -- parsing a fixed timestamp, not reading current time */}
+      <Table.Cell>{entry.createdAt ? new Date(entry.createdAt).toLocaleString() : "-"}</Table.Cell>
+      <Table.Cell>{entry.entityType}</Table.Cell>
+      <Table.Cell>{entry.entityId}</Table.Cell>
+      <Table.Cell>
+        <Badge variant="default">{entry.operationType}</Badge>
+      </Table.Cell>
+      <Table.Cell>{entry.actorId}</Table.Cell>
+      <Table.Cell>
+        <Button variant="ghost" size="sm" render={<Link to={entry.id} />}>
+          View
+        </Button>
+      </Table.Cell>
+    </Table.Row>
+  );
+};
+
+interface AuditEntriesTableProps {
+  data: FragmentOf<typeof AuditEntriesTableFragment>;
+}
+
+export const AuditEntriesTable = ({ data }: AuditEntriesTableProps) => {
+  const { edges } = readFragment(AuditEntriesTableFragment, data);
+
+  if (edges.length === 0) {
+    return (
+      <EmptyState title="No audit entries" message="No audit entries have been recorded yet." />
+    );
+  }
+
+  return (
+    <Table.Root>
+      <Table.Header>
+        <Table.Row>
+          <Table.Head>Timestamp</Table.Head>
+          <Table.Head>Entity Type</Table.Head>
+          <Table.Head>Entity ID</Table.Head>
+          <Table.Head>Operation</Table.Head>
+          <Table.Head>Actor</Table.Head>
+          <Table.Head />
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {edges.map((edge) => (
+          <AuditEntryRow
+            key={readFragment(AuditEntryRowFragment, edge.node).id}
+            entry={edge.node}
+          />
+        ))}
+      </Table.Body>
+    </Table.Root>
+  );
+};

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

@@ -0,0 +1,52 @@
+import { Layout, type AppShellPageProps } from "@tailor-platform/app-shell";
+import { useQuery } from "urql";
+import { AuditEntriesTable, AuditEntriesTableFragment } from "./components/audit-entries-table";
+import { graphql } from "@/graphql";
+import { ErrorFallback } from "@/components/composed/error-fallback";
+import { Loading } from "@/components/composed/loading";
+
+const AuditEntriesQuery = graphql(
+  `
+    query AuditEntries {
+      auditEntries(order: [{ field: createdAt, direction: Desc }]) {
+        ...AuditEntriesTable
+      }
+    }
+  `,
+  [AuditEntriesTableFragment],
+);
+
+const AuditPage = () => {
+  const [{ data, error, fetching }, reexecuteQuery] = useQuery({
+    query: AuditEntriesQuery,
+  });
+
+  if (fetching) return <Loading />;
+
+  if (error || !data) {
+    return (
+      <ErrorFallback
+        title="Failed to load audit log"
+        message="An error occurred while fetching the audit log."
+        onReset={() => reexecuteQuery({ requestPolicy: "network-only" })}
+      />
+    );
+  }
+
+  return (
+    <Layout columns={1} title="Audit Log">
+      <Layout.Column>
+        <AuditEntriesTable data={data.auditEntries} />
+      </Layout.Column>
+    </Layout>
+  );
+};
+
+AuditPage.appShellPageProps = {
+  meta: {
+    title: "Audit Log",
+  },
+  guards: [],
+} satisfies AppShellPageProps;
+
+export default AuditPage;

package/templates/scaffold/app/frontend/src/pages/user-management/profile/edit/components/edit-profile-form.tsx

@@ -0,0 +1,125 @@
+import { Button, Input, useNavigate } from "@tailor-platform/app-shell";
+import { useQuery, useMutation } 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 { ErrorFallback } from "@/components/composed/error-fallback";
+import { Loading } from "@/components/composed/loading";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+
+const MeQuery = graphql(`
+  query MeForEditProfile {
+    me {
+      id
+      name
+      email
+    }
+  }
+`);
+
+const UpdateOwnProfileMutation = graphql(`
+  mutation UpdateOwnProfile($name: String!, $email: String!) {
+    updateOwnProfile(name: $name, email: $email) {
+      id
+      name
+      email
+    }
+  }
+`);
+
+const formSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  email: z.email("Invalid email address"),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+export const EditProfileForm = () => {
+  const navigate = useNavigate();
+  const toast = useToast();
+  const [{ data, error, fetching }, reexecuteQuery] = useQuery({ query: MeQuery });
+  const [, updateProfile] = useMutation(UpdateOwnProfileMutation);
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    values: {
+      name: data?.me?.name ?? "",
+      email: data?.me?.email ?? "",
+    },
+  });
+
+  if (fetching) return <Loading />;
+
+  if (error || !data?.me) {
+    return (
+      <ErrorFallback
+        title="Failed to load profile"
+        message="An error occurred while fetching your profile."
+        onReset={() => reexecuteQuery({ requestPolicy: "network-only" })}
+      />
+    );
+  }
+
+  const onSubmit = (values: FormValues) => {
+    void updateProfile(values, { additionalTypenames: ["User"] }).then((result) => {
+      if (result.error) {
+        toast.error(result.error);
+        return;
+      }
+      toast.success("Profile updated 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 name" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input type="email" placeholder="Enter email" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div className="flex gap-2">
+          <Button type="submit">Save</Button>
+          <Button type="button" variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};

package/templates/scaffold/app/frontend/src/pages/user-management/profile/edit/page.tsx

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

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

@@ -1,23 +1,34 @@
 import {
+  ActionPanel,
   Layout,
   DescriptionCard,
   type AppShellPageProps,
   useAuth,
 } from "@tailor-platform/app-shell";
+import { LogOut, Pencil } from "lucide-react";
 import { useQuery } from "urql";
 import { graphql } from "@/graphql";
 import { ErrorFallback } from "@/components/composed/error-fallback";
 import { Loading } from "@/components/composed/loading";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
 
 const MeQuery = graphql(`
-  query Me {
+  query MeProfile {
     me {
       id
       name
       email
       status
+      userRoles {
+        edges {
+          node {
+            id
+            role {
+              id
+              name
+            }
+          }
+        }
+      }
     }
   }
 `);
@@ -41,12 +52,17 @@ const ProfilePage = () => {
   }
 
   const profile = data.me;
+  const assignedRoles = profile.userRoles.edges
+    .map((edge) => edge.node.role?.name)
+    .filter(Boolean)
+    .join(", ");
 
   return (
-    <Layout columns={2} title="My Profile">
+    <Layout>
+      <Layout.Header title="My Profile" />
       <Layout.Column>
         <DescriptionCard
-          data={profile}
+          data={{ ...profile, assignedRoles: assignedRoles || "-" }}
           title="Profile Information"
           fields={[
             { key: "name", label: "Name" },
@@ -63,26 +79,30 @@ const ProfilePage = () => {
                 },
               },
             },
+            { key: "assignedRoles", label: "Assigned Roles" },
           ]}
         />
       </Layout.Column>
       <Layout.Column>
-        <Card>
-          <CardHeader>
-            <CardTitle>Actions</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Button
-              variant="ghost"
-              className="w-full justify-start"
-              onClick={() => {
-                void logout();
-              }}
-            >
-              Sign out
-            </Button>
-          </CardContent>
-        </Card>
+        <ActionPanel
+          title="Actions"
+          actions={[
+            {
+              key: "edit-profile",
+              label: "Edit Profile",
+              icon: <Pencil />,
+              onClick: () => {
+                window.location.href = "/user-management/profile/edit";
+              },
+            },
+            {
+              key: "sign-out",
+              label: "Sign out",
+              icon: <LogOut />,
+              onClick: () => void logout(),
+            },
+          ]}
+        />
       </Layout.Column>
     </Layout>
   );

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

@@ -0,0 +1,26 @@
+import { ActionPanel, useNavigate } from "@tailor-platform/app-shell";
+import { Pencil, ArrowLeft } from "lucide-react";
+
+export const RoleActions = () => {
+  const navigate = useNavigate();
+
+  return (
+    <ActionPanel
+      title="Actions"
+      actions={[
+        {
+          key: "edit",
+          label: "Edit Role",
+          icon: <Pencil />,
+          onClick: () => navigate("edit"),
+        },
+        {
+          key: "back",
+          label: "Back to Role List",
+          icon: <ArrowLeft />,
+          onClick: () => navigate("/user-management/role"),
+        },
+      ]}
+    />
+  );
+};