create-astram-app 0.1.3 → 0.2.0

package/template/frontend/src/pages/roles/RoleForm.jsx

@@ -0,0 +1,99 @@
+/**
+ * RoleForm — the Add/Edit role form (a single Name field), rendered as a routed-modal
+ * overlay by /roles/add and /roles/edit/:uuid under RolesPage's layout. The SAME
+ * component serves add + edit via `useParams()` (a `:uuid` → edit, load first; else add).
+ * Closes via `navigate(-1)`; on success toasts + calls the layout's `onRefresh`.
+ *
+ * ⛔ The `:uuid` is a route param only — never rendered as visible text.
+ */
+import { useEffect, useState } from 'react';
+import { useNavigate, useOutletContext, useParams } from 'react-router-dom';
+import { toast } from 'sonner';
+import { useAuth } from '@/auth/AuthContext';
+import EntityFormModal from '@/components/EntityFormModal';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+export default function RoleForm() {
+  const { tokens, identity } = useAuth();
+  const token = tokens?.accessToken;
+  const { uuid } = useParams();
+  const isEdit = Boolean(uuid);
+  const navigate = useNavigate();
+  const { onRefresh } = useOutletContext() ?? {};
+
+  const [name, setName] = useState('');
+  const [loading, setLoading] = useState(isEdit);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  // On edit, load the current record so the form pre-fills with its display fields.
+  useEffect(() => {
+    if (!isEdit || !token) return undefined;
+    let active = true;
+    (async () => {
+      const r = await identity.getRole(token, uuid);
+      if (!active) return;
+      if (r.ok) {
+        setName(r.record?.fields?.name || '');
+      } else {
+        setError(r.error || 'Could not load the role.');
+      }
+      setLoading(false);
+    })();
+    return () => {
+      active = false;
+    };
+  }, [identity, token, uuid, isEdit]);
+
+  const close = () => navigate(-1);
+
+  const onSubmit = async () => {
+    const trimmed = name.trim();
+    if (!trimmed) {
+      setError('Enter a role name.');
+      return;
+    }
+    setError('');
+    setBusy(true);
+    const r = isEdit
+      ? await identity.updateRole(token, uuid, { name: trimmed })
+      : await identity.createRole(token, trimmed);
+    setBusy(false);
+    if (!r.ok) {
+      setError(r.error || 'Could not save the role.');
+      return;
+    }
+    toast.success(isEdit ? 'Role updated' : 'Role created');
+    onRefresh?.();
+    close();
+  };
+
+  return (
+    <EntityFormModal
+      title={isEdit ? 'Edit role' : 'Add role'}
+      description={isEdit ? undefined : 'Create a named grant.'}
+      open
+      onClose={close}
+      onSubmit={onSubmit}
+      submitLabel={isEdit ? 'Save changes' : 'Create role'}
+      busy={busy || loading}
+      error={error}
+    >
+      <div className="space-y-1.5">
+        <Label htmlFor="role-name" variant="field">
+          Name
+        </Label>
+        <Input
+          id="role-name"
+          autoFocus
+          maxLength={120}
+          placeholder="e.g. Admin, Approver, Viewer"
+          value={name}
+          disabled={loading}
+          onChange={(e) => setName(e.target.value)}
+        />
+      </div>
+    </EntityFormModal>
+  );
+}

package/template/frontend/src/pages/roles/RolesPage.jsx

@@ -0,0 +1,207 @@
+/**
+ * RolesPage — the Roles management screen (name-only catalog). Same routed-modal CRUD
+ * shape as CompaniesPage: a layout route owning the list + `<Outlet context={{ onRefresh }} />`
+ * for the /roles/add and /roles/edit/:uuid child routes. Loads on mount via the shared
+ * identity client service; a 403 (roles are root-only server-side) degrades to a
+ * graceful "need platform-admin access" message.
+ *
+ * ⛔ No raw UUIDs: the single column renders `fields.name`; `row.id` is a key/route param only.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { Outlet, useNavigate, useSearchParams } from 'react-router-dom';
+import { ShieldCheck } from 'lucide-react';
+import { toast } from 'sonner';
+import { useAuth } from '@/auth/AuthContext';
+import AppShell from '@/shell/AppShell';
+import PageHeader from '@/components/PageHeader';
+import EntityList, { EntityListControls, EntityListPager } from '@/components/EntityList';
+import ConfirmDialog from '@/components/ConfirmDialog';
+
+/** Compact absolute date — e.g. "13 Jul 2026"; '—' when missing/invalid. */
+function formatDate(v) {
+  if (!v) return '—';
+  try {
+    return new Date(v).toLocaleDateString(undefined, {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+    });
+  } catch {
+    return '—';
+  }
+}
+
+// Sortable columns (server-side): Name, Created.
+const COLUMNS = [
+  {
+    key: 'name',
+    label: 'Name',
+    sortable: true,
+    sortKey: 'name',
+    render: (row) => row.fields?.name || '(unnamed)',
+  },
+  {
+    key: 'createdAt',
+    label: 'Created',
+    sortable: true,
+    sortKey: 'createdAt',
+    render: (row) => formatDate(row.fields?.createdAt),
+  },
+];
+
+const DEFAULT_LIMIT = 25;
+
+/**
+ * Seed the initial DataTable query from the URL so a reload / shared link restores
+ * EXACTLY the view (page + limit + search + sortBy + sortOrder). Absent params fall
+ * back to the defaults; values are clamped/guarded so a hand-edited URL can't poison state.
+ */
+function readQueryFromParams(sp) {
+  const page = Number.parseInt(sp.get('page') ?? '', 10);
+  const limit = Number.parseInt(sp.get('limit') ?? '', 10);
+  const sortOrder = (sp.get('sortOrder') || '').toLowerCase();
+  return {
+    page: Number.isFinite(page) && page >= 1 ? page : 1,
+    limit: Number.isFinite(limit) && limit >= 1 && limit <= 200 ? limit : DEFAULT_LIMIT,
+    search: sp.get('search') || '',
+    sortBy: sp.get('sortBy') || 'createdAt',
+    sortOrder: sortOrder === 'asc' || sortOrder === 'desc' ? sortOrder : 'desc',
+  };
+}
+
+export default function RolesPage() {
+  const { tokens, identity } = useAuth();
+  const token = tokens?.accessToken;
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const [rows, setRows] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  // Seed ONCE from the URL (initializer runs only on mount) → single source of truth.
+  const [query, setQuery] = useState(() => readQueryFromParams(searchParams));
+
+  // Sync query → URL on every change (replace:true — no history spam). Only non-default
+  // page/limit/search are emitted to keep the URL clean; sortBy/sortOrder are always
+  // meaningful so they're always emitted. Reads only `query` — never the URL — so no loop.
+  useEffect(() => {
+    const p = new URLSearchParams();
+    if (query.page > 1) p.set('page', String(query.page));
+    if (query.limit !== DEFAULT_LIMIT) p.set('limit', String(query.limit));
+    if (query.search) p.set('search', query.search);
+    if (query.sortBy) p.set('sortBy', query.sortBy);
+    if (query.sortOrder) p.set('sortOrder', query.sortOrder);
+    setSearchParams(p, { replace: true });
+  }, [query, setSearchParams]);
+
+  const [deleteTarget, setDeleteTarget] = useState(null);
+  const [deleteBusy, setDeleteBusy] = useState(false);
+
+  const load = useCallback(async () => {
+    if (!token) return;
+    setLoading(true);
+    const r = await identity.listRoles(token, query);
+    if (r.ok) {
+      setRows(r.rows || []);
+      setTotal(r.total || 0);
+      setError('');
+    } else {
+      setRows([]);
+      setTotal(0);
+      setError(r.error || 'Could not load roles.');
+    }
+    setLoading(false);
+  }, [identity, token, query]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const onSearchChange = useCallback(
+    (search) => setQuery((q) => ({ ...q, search, page: 1 })),
+    [],
+  );
+  const onSortChange = useCallback(
+    (sortBy, sortOrder) => setQuery((q) => ({ ...q, sortBy, sortOrder })),
+    [],
+  );
+  const onPageChange = useCallback((page) => setQuery((q) => ({ ...q, page })), []);
+  const onLimitChange = useCallback(
+    (limit) => setQuery((q) => ({ ...q, limit, page: 1 })),
+    [],
+  );
+
+  const onConfirmDelete = async () => {
+    if (!deleteTarget) return;
+    setDeleteBusy(true);
+    const r = await identity.deleteRole(token, deleteTarget.id);
+    setDeleteBusy(false);
+    if (!r.ok) {
+      toast.error(r.error || 'Could not delete the role.');
+      return;
+    }
+    setDeleteTarget(null);
+    toast.success('Role deleted');
+    await load();
+  };
+
+  return (
+    <AppShell section="Identity" title="Roles">
+      <div className="p-4">
+        <PageHeader
+          section="Identity"
+          title="Roles"
+          icon={ShieldCheck}
+          actions={
+            <EntityListControls
+              search={query.search}
+              onSearchChange={onSearchChange}
+              searchPlaceholder="Search roles…"
+              addLabel="Add role"
+              onAdd={() => navigate('/roles/add')}
+            />
+          }
+        />
+
+        <EntityList
+          columns={COLUMNS}
+          rows={rows}
+          search={query.search}
+          sortBy={query.sortBy}
+          sortOrder={query.sortOrder}
+          loading={loading}
+          error={error}
+          emptyLabel="No roles yet. Add one to get started."
+          onEdit={(row) => navigate(`/roles/edit/${row.id}`)}
+          onDelete={(row) => setDeleteTarget(row)}
+          onSortChange={onSortChange}
+        />
+
+        <EntityListPager
+          total={total}
+          page={query.page}
+          limit={query.limit}
+          loading={loading}
+          error={error}
+          onPageChange={onPageChange}
+          onLimitChange={onLimitChange}
+        />
+      </div>
+
+      <Outlet context={{ onRefresh: load }} />
+
+      <ConfirmDialog
+        open={!!deleteTarget}
+        title={deleteTarget ? `Delete “${deleteTarget.fields?.name || 'this role'}”?` : 'Delete role?'}
+        message="This permanently removes the role. Users currently assigned it will lose the grant. This cannot be undone."
+        confirmLabel="Delete"
+        destructive
+        busy={deleteBusy}
+        onConfirm={onConfirmDelete}
+        onCancel={() => setDeleteTarget(null)}
+      />
+    </AppShell>
+  );
+}

package/template/frontend/src/pages/users/AssignmentsEditor.jsx

@@ -0,0 +1,193 @@
+/**
+ * AssignmentsEditor — the centerpiece of the user edit page: the user's company
+ * memberships and their role/department/branch postings. One MembershipCard per company
+ * the user belongs to; each card owns its multi-row posting editor + active toggle +
+ * remove. A "+ add to another company" control at the bottom adds the user to a company
+ * they aren't already in (a fresh, inactive membership card).
+ *
+ * Data: loads `getUserMemberships` on mount (cards + postings, NAMES resolved server-side).
+ * The "add to another company" picker is a growable SearchableSelect (server-paginated +
+ * searchable via `listCompanies`), filtered client-side to hide companies the user is already
+ * in. Each card lazily loads its own company's department/branch option lists; its Role
+ * dropdown self-fetches the (growable) role catalog.
+ *
+ * ⛔ No raw UUIDs anywhere: company/role/department/branch all render as resolved NAMES;
+ * uuids live only in dropdown values + as keys/params.
+ *
+ * Props:
+ *   userUuid — the user being edited (memberships hang off the user, not the tenant).
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { Loader2, Plus, Users } from 'lucide-react';
+import { toast } from 'sonner';
+import { useAuth } from '@/auth/AuthContext';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { SearchableSelect } from '@/components/ui/searchable-select';
+import MembershipCard from './MembershipCard';
+
+export default function AssignmentsEditor({ userUuid }) {
+  const { tokens, identity } = useAuth();
+  const token = tokens?.accessToken;
+
+  const [memberships, setMemberships] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  // "Add to another company" picker state — the chosen company's uuid + its display NAME
+  // (the SearchableSelect trigger shows the name; the uuid is never rendered).
+  const [pickCompany, setPickCompany] = useState(null);
+  const [pickCompanyName, setPickCompanyName] = useState('');
+  const [adding, setAdding] = useState(false);
+
+  const loadMemberships = useCallback(async () => {
+    if (!token || !userUuid) return;
+    const r = await identity.getUserMemberships(token, userUuid);
+    if (r.ok) {
+      setMemberships(r.memberships || []);
+      setError('');
+    } else {
+      setMemberships([]);
+      setError(r.error || 'Could not load the user’s assignments.');
+    }
+  }, [identity, token, userUuid]);
+
+  // Initial load: just the memberships. Roles + companies are now fetched on demand by the
+  // growable dropdowns (SearchableSelect), so nothing else is preloaded here.
+  useEffect(() => {
+    if (!token || !userUuid) return undefined;
+    let active = true;
+    (async () => {
+      setLoading(true);
+      const mr = await identity.getUserMemberships(token, userUuid);
+      if (!active) return;
+      if (mr.ok) {
+        setMemberships(mr.memberships || []);
+        setError('');
+      } else {
+        setError(mr.error || 'Could not load the user’s assignments.');
+      }
+      setLoading(false);
+    })();
+    return () => {
+      active = false;
+    };
+  }, [identity, token, userUuid]);
+
+  // Companies the user is already in — excluded client-side from the picker (the server
+  // list endpoint has no exclusion filter, so we drop taken rows after fetching a page).
+  const taken = new Set(memberships.map((m) => m.companyUuid));
+
+  const fetchCompanies = useCallback(
+    async ({ search, page, limit }) => {
+      const r = await identity.listCompanies(token, { search, page, limit });
+      if (!r.ok) return { options: [], total: 0, page };
+      const options = (r.rows || [])
+        .filter((row) => !taken.has(row.id))
+        .map((row) => ({ value: row.id, label: row.fields?.name || '(unnamed)' }));
+      return { options, total: r.total ?? options.length, page: r.page ?? page };
+    },
+    // `taken` derives from `memberships`; recompute the fetcher when they change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [identity, token, memberships],
+  );
+
+  const onAddCompany = async () => {
+    if (!pickCompany) return;
+    setAdding(true);
+    const r = await identity.addMembership(token, userUuid, pickCompany);
+    setAdding(false);
+    if (!r.ok) {
+      toast.error(r.error || 'Could not add the membership.');
+      return;
+    }
+    setPickCompany(null);
+    setPickCompanyName('');
+    toast.success('Added to company');
+    await loadMemberships();
+  };
+
+  return (
+    <div className="min-w-0 space-y-3">
+      <div className="flex items-center gap-2">
+        <Users className="size-4 text-primary" />
+        <div>
+          <p className="text-sm font-medium text-foreground">Assignments</p>
+          <p className="text-xs text-muted-foreground">
+            Company memberships and their role / department / branch postings.
+          </p>
+        </div>
+      </div>
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {loading ? (
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Loader2 className="size-4 animate-spin" />
+          Loading assignments…
+        </div>
+      ) : (
+        <>
+          {memberships.length === 0 ? (
+            <div className="rounded-lg border border-dashed bg-muted/30 px-3 py-4 text-sm text-muted-foreground">
+              Not a member of any company yet. Add the user to a company below.
+            </div>
+          ) : (
+            <div className="min-w-0 space-y-3">
+              {memberships.map((m) => (
+                <MembershipCard
+                  key={m.membershipUuid}
+                  membership={m}
+                  userUuid={userUuid}
+                  token={token}
+                  identity={identity}
+                  onActivate={loadMemberships}
+                  onRemoved={loadMemberships}
+                  onSaved={loadMemberships}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Add to another company — a growable, searchable picker (companies the user is
+              already in are filtered out client-side inside `fetchCompanies`). */}
+          <div className="flex flex-col gap-2 pt-1 sm:flex-row sm:items-center">
+            <div className="w-full sm:w-64">
+              <SearchableSelect
+                aria-label="Add to another company"
+                value={pickCompany}
+                selectedLabel={pickCompanyName}
+                onChange={(v) => {
+                  setPickCompany(v);
+                  if (!v) setPickCompanyName('');
+                }}
+                fetchPage={fetchCompanies}
+                placeholder="Add to another company…"
+                searchPlaceholder="Search companies…"
+                disabled={adding}
+                allowClear
+                // Capture the chosen label so the trigger shows the name (never the uuid).
+                onLabelChange={(label) => setPickCompanyName(label || '')}
+              />
+            </div>
+            <Button
+              type="button"
+              variant="soft"
+              size="sm"
+              className="w-full sm:w-auto"
+              onClick={onAddCompany}
+              disabled={!pickCompany || adding}
+            >
+              {adding ? <Loader2 className="size-4 animate-spin" /> : <Plus className="size-4" />}
+              Add company
+            </Button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}