@tailor-platform/erp-kit 0.7.0 → 0.9.0

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

@@ -0,0 +1,60 @@
+import { Button, Layout, Link, type AppShellPageProps } from "@tailor-platform/app-shell";
+import { useQuery } from "urql";
+import { RolesTable, RolesTableFragment } from "./components/roles-table";
+import { graphql } from "@/graphql";
+import { ErrorFallback } from "@/components/composed/error-fallback";
+import { Loading } from "@/components/composed/loading";
+
+const RolesQuery = graphql(
+  `
+    query Roles {
+      roles {
+        ...RolesTable
+      }
+    }
+  `,
+  [RolesTableFragment],
+);
+
+const RolesPage = () => {
+  const [{ data, error, fetching }, reexecuteQuery] = useQuery({
+    query: RolesQuery,
+  });
+
+  if (fetching) return <Loading />;
+
+  if (error || !data) {
+    return (
+      <ErrorFallback
+        title="Failed to load roles"
+        message="An error occurred while fetching the role list."
+        onReset={() => reexecuteQuery({ requestPolicy: "network-only" })}
+      />
+    );
+  }
+
+  return (
+    <Layout
+      columns={1}
+      title="Roles"
+      actions={[
+        <Button key="create" render={<Link to="create" />}>
+          Create Role
+        </Button>,
+      ]}
+    >
+      <Layout.Column>
+        <RolesTable data={data.roles} />
+      </Layout.Column>
+    </Layout>
+  );
+};
+
+RolesPage.appShellPageProps = {
+  meta: {
+    title: "Roles",
+  },
+  guards: [],
+} satisfies AppShellPageProps;
+
+export default RolesPage;

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

@@ -0,0 +1,216 @@
+import { useState } from "react";
+import { ActionPanel, Button, Dialog, useNavigate } from "@tailor-platform/app-shell";
+import { useMutation, useQuery } from "urql";
+import { Pencil, UserX, UserCheck, ShieldPlus, ArrowLeft } from "lucide-react";
+import { graphql, type FragmentOf, readFragment } from "@/graphql";
+import { useToast } from "@/hooks/use-toast";
+
+const DeactivateUserMutation = graphql(`
+  mutation DeactivateUser($userId: String!) {
+    deactivateUser(userId: $userId) {
+      id
+      status
+    }
+  }
+`);
+
+const ReactivateUserMutation = graphql(`
+  mutation ReactivateUser($userId: String!) {
+    reactivateUser(userId: $userId) {
+      id
+      status
+    }
+  }
+`);
+
+const AssignRoleToUserMutation = graphql(`
+  mutation AssignRoleToUserAction($userId: String!, $roleId: String!) {
+    assignRoleToUser(userId: $userId, roleId: $roleId) {
+      userId
+      roleId
+    }
+  }
+`);
+
+const RolesForAssignQuery = graphql(`
+  query RolesForAssign {
+    roles {
+      edges {
+        node {
+          id
+          name
+        }
+      }
+    }
+  }
+`);
+
+const MeForActionsQuery = graphql(`
+  query MeForActions {
+    me {
+      id
+    }
+  }
+`);
+
+export const UserActionsFragment = graphql(`
+  fragment UserActions on User {
+    id
+    status
+  }
+`);
+
+interface UserActionsProps {
+  user: FragmentOf<typeof UserActionsFragment>;
+}
+
+export const UserActions = ({ user: userFragment }: UserActionsProps) => {
+  const user = readFragment(UserActionsFragment, userFragment);
+  const navigate = useNavigate();
+  const toast = useToast();
+  const [{ fetching: deactivating }, deactivateUser] = useMutation(DeactivateUserMutation);
+  const [{ fetching: reactivating }, reactivateUser] = useMutation(ReactivateUserMutation);
+  const [{ fetching: assigning }, assignRole] = useMutation(AssignRoleToUserMutation);
+  const [{ data: rolesData }] = useQuery({ query: RolesForAssignQuery });
+  const [{ data: meData }] = useQuery({ query: MeForActionsQuery });
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [selectedRoleIds, setSelectedRoleIds] = useState<Set<string>>(() => new Set());
+
+  const roles = rolesData?.roles.edges.map((edge) => edge.node) ?? [];
+  const isSelf = meData?.me?.id === user.id;
+
+  const toggleRole = (id: string) => {
+    setSelectedRoleIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const handleAssignRoles = () => {
+    if (selectedRoleIds.size === 0) return;
+    const selected = roles.filter((r) => selectedRoleIds.has(r.id));
+    void Promise.all(
+      selected.map((role) =>
+        assignRole(
+          { userId: user.id, roleId: role.id },
+          { additionalTypenames: ["User", "UserRole"] },
+        ),
+      ),
+    ).then((results) => {
+      const failed = results.filter((r) => r.error);
+      if (failed.length > 0) {
+        toast.error(failed[0].error!);
+        return;
+      }
+      const names = selected.map((r) => r.name).join(", ");
+      toast.success(`Roles assigned: ${names}`);
+      setDialogOpen(false);
+      setSelectedRoleIds(new Set());
+    });
+  };
+
+  return (
+    <>
+      <ActionPanel
+        title="Actions"
+        actions={[
+          {
+            key: "edit",
+            label: "Edit User",
+            icon: <Pencil />,
+            onClick: () => navigate("edit"),
+          },
+          ...(user.status === "ACTIVE" && !isSelf
+            ? [
+                {
+                  key: "deactivate",
+                  label: "Deactivate User",
+                  icon: <UserX />,
+                  loading: deactivating,
+                  onClick: () =>
+                    deactivateUser({ userId: user.id }, { additionalTypenames: ["User"] }).then(
+                      (result) => {
+                        if (result.error) {
+                          toast.error(result.error);
+                          return;
+                        }
+                        toast.success("User deactivated successfully");
+                      },
+                    ),
+                },
+              ]
+            : []),
+          ...(user.status === "INACTIVE"
+            ? [
+                {
+                  key: "reactivate",
+                  label: "Reactivate User",
+                  icon: <UserCheck />,
+                  loading: reactivating,
+                  onClick: () =>
+                    reactivateUser({ userId: user.id }, { additionalTypenames: ["User"] }).then(
+                      (result) => {
+                        if (result.error) {
+                          toast.error(result.error);
+                          return;
+                        }
+                        toast.success("User reactivated successfully");
+                      },
+                    ),
+                },
+              ]
+            : []),
+          {
+            key: "assign-role",
+            label: "Assign Role",
+            icon: <ShieldPlus />,
+            onClick: () => setDialogOpen(true),
+          },
+          {
+            key: "back",
+            label: "Back to User List",
+            icon: <ArrowLeft />,
+            onClick: () => navigate("/user-management/user"),
+          },
+        ]}
+      />
+      <Dialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
+        <Dialog.Content>
+          <Dialog.Header>
+            <Dialog.Title>Assign Roles</Dialog.Title>
+            <Dialog.Description>Select roles to assign to this user.</Dialog.Description>
+          </Dialog.Header>
+          <div className="max-h-60 space-y-1 overflow-y-auto py-4">
+            {roles.map((role) => (
+              <label
+                key={role.id}
+                className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-accent"
+              >
+                <input
+                  type="checkbox"
+                  checked={selectedRoleIds.has(role.id)}
+                  onChange={() => toggleRole(role.id)}
+                  className="h-4 w-4 rounded border-gray-300"
+                />
+                <span className="text-sm">{role.name}</span>
+              </label>
+            ))}
+            {roles.length === 0 && (
+              <p className="text-muted-foreground text-sm">No roles available</p>
+            )}
+          </div>
+          <Dialog.Footer>
+            <Button variant="outline" onClick={() => setDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleAssignRoles} disabled={selectedRoleIds.size === 0 || assigning}>
+              Assign
+            </Button>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog.Root>
+    </>
+  );
+};

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

@@ -1,5 +1,17 @@
-import { DescriptionCard } from "@tailor-platform/app-shell";
+import { Badge, Button, DescriptionCard } from "@tailor-platform/app-shell";
+import { useMutation } from "urql";
+import { X } from "lucide-react";
 import { graphql, type FragmentOf, readFragment } from "@/graphql";
+import { useToast } from "@/hooks/use-toast";
+
+const RevokeRoleFromUserMutation = graphql(`
+  mutation RevokeRoleFromUserDetail($userId: String!, $roleId: String!) {
+    revokeRoleFromUser(userId: $userId, roleId: $roleId) {
+      userId
+      roleId
+    }
+  }
+`);
 
 export const UserDetailFragment = graphql(`
   fragment UserDetail on User {
@@ -9,6 +21,17 @@ export const UserDetailFragment = graphql(`
     status
     createdAt
     updatedAt
+    userRoles {
+      edges {
+        node {
+          id
+          role {
+            id
+            name
+          }
+        }
+      }
+    }
   }
 `);
 
@@ -18,41 +41,82 @@ interface UserDetailProps {
 
 export const UserDetail = ({ user: userFragment }: UserDetailProps) => {
   const user = readFragment(UserDetailFragment, userFragment);
+  const roles = user.userRoles.edges.map((edge) => edge.node);
+  const toast = useToast();
+  const [{ fetching: revoking }, revokeRole] = useMutation(RevokeRoleFromUserMutation);
+
+  const handleRemoveRole = (roleId: string, roleName: string) => {
+    void revokeRole(
+      { userId: user.id, roleId },
+      { additionalTypenames: ["User", "UserRole"] },
+    ).then((result) => {
+      if (result.error) {
+        toast.error(result.error);
+        return;
+      }
+      toast.success(`Role "${roleName}" removed`);
+    });
+  };
 
   return (
-    <DescriptionCard
-      data={user}
-      title="User Information"
-      columns={3}
-      fields={[
-        { key: "name", label: "Name" },
-        { key: "email", label: "Email", meta: { copyable: true } },
-        {
-          key: "status",
-          label: "Status",
-          type: "badge",
-          meta: {
-            badgeVariantMap: {
-              ACTIVE: "success",
-              PENDING: "warning",
-              INACTIVE: "neutral",
+    <div className="space-y-4">
+      <DescriptionCard
+        data={user}
+        title="User Information"
+        columns={3}
+        fields={[
+          { key: "name", label: "Name" },
+          { key: "email", label: "Email", meta: { copyable: true } },
+          {
+            key: "status",
+            label: "Status",
+            type: "badge",
+            meta: {
+              badgeVariantMap: {
+                ACTIVE: "success",
+                PENDING: "warning",
+                INACTIVE: "neutral",
+              },
             },
           },
-        },
-        { type: "divider" },
-        {
-          key: "createdAt",
-          label: "Created At",
-          type: "date",
-          meta: { dateFormat: "medium" },
-        },
-        {
-          key: "updatedAt",
-          label: "Updated At",
-          type: "date",
-          meta: { dateFormat: "relative" },
-        },
-      ]}
-    />
+          { type: "divider" },
+          {
+            key: "createdAt",
+            label: "Created At",
+            type: "date",
+            meta: { dateFormat: "medium" },
+          },
+          {
+            key: "updatedAt",
+            label: "Updated At",
+            type: "date",
+            meta: { dateFormat: "relative" },
+          },
+        ]}
+      />
+      <div className="rounded-lg border p-4">
+        <h3 className="mb-3 text-sm font-medium">Assigned Roles</h3>
+        {roles.length > 0 ? (
+          <div className="flex flex-wrap gap-2">
+            {roles.map((userRole) => (
+              <Badge key={userRole.id} className="flex items-center gap-1">
+                {userRole.role?.name ?? "-"}
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-4 w-4 p-0"
+                  disabled={revoking}
+                  onClick={() => handleRemoveRole(userRole.role!.id, userRole.role!.name)}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              </Badge>
+            ))}
+          </div>
+        ) : (
+          <p className="text-muted-foreground text-sm">No roles assigned</p>
+        )}
+      </div>
+    </div>
   );
 };

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

@@ -0,0 +1,115 @@
+import { Button, Input, useNavigate } from "@tailor-platform/app-shell";
+import { useMutation } from "urql";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { graphql, type FragmentOf, readFragment } from "@/graphql";
+import { useToast } from "@/hooks/use-toast";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+
+const UpdateUserProfileMutation = graphql(`
+  mutation UpdateUserProfile($userId: String!, $name: String!, $email: String!) {
+    updateUserProfile(userId: $userId, name: $name, email: $email) {
+      id
+      name
+      email
+    }
+  }
+`);
+
+export const EditUserFormFragment = graphql(`
+  fragment EditUserForm on User {
+    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>;
+
+interface EditUserFormProps {
+  user: FragmentOf<typeof EditUserFormFragment>;
+}
+
+export const EditUserForm = ({ user: userFragment }: EditUserFormProps) => {
+  const user = readFragment(EditUserFormFragment, userFragment);
+  const navigate = useNavigate();
+  const toast = useToast();
+  const [, updateUserProfile] = useMutation(UpdateUserProfileMutation);
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: user.name,
+      email: user.email,
+    },
+  });
+
+  const onSubmit = (values: FormValues) => {
+    void updateUserProfile({ userId: user.id, ...values }, { additionalTypenames: ["User"] }).then(
+      (result) => {
+        if (result.error) {
+          toast.error(result.error);
+          return;
+        }
+        toast.success("User 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/user/[id]/edit/page.tsx

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

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

@@ -1,6 +1,7 @@
 import { Layout, useParams, type AppShellPageProps } from "@tailor-platform/app-shell";
 import { useQuery } from "urql";
 import { UserDetail, UserDetailFragment } from "./components/user-detail";
+import { UserActions, UserActionsFragment } from "./components/user-actions";
 import { graphql } from "@/graphql";
 import { ErrorFallback } from "@/components/composed/error-fallback";
 import { Loading } from "@/components/composed/loading";
@@ -10,10 +11,11 @@ const UserQuery = graphql(
     query User($id: ID!) {
       user(id: $id) {
         ...UserDetail
+        ...UserActions
       }
     }
   `,
-  [UserDetailFragment],
+  [UserDetailFragment, UserActionsFragment],
 );
 
 const UserPage = () => {
@@ -36,10 +38,14 @@ const UserPage = () => {
   }
 
   return (
-    <Layout columns={1} title="User Detail">
+    <Layout>
+      <Layout.Header title="User Detail" />
       <Layout.Column>
         <UserDetail user={data.user} />
       </Layout.Column>
+      <Layout.Column area="right">
+        <UserActions user={data.user} />
+      </Layout.Column>
     </Layout>
   );
 };