create-astram-app 0.1.3 → 0.2.0

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

@@ -0,0 +1,303 @@
+/**
+ * MembershipCard — one company the user belongs to, with its multi-row posting editor.
+ * The card header shows the company NAME (resolved server-side), a "★ active" toggle (the
+ * login-company pointer — exactly one active per user, radio semantics client-side; the
+ * server is the real guard), and a Remove button (gated behind a themed ConfirmDialog).
+ * The body is a table of PostingRows + "add posting", saved per-card via an ATOMIC
+ * `replacePostings` (the full row set is submitted; the server diffs).
+ *
+ * Company-scoped dropdowns: this card loads ITS company's department + branch catalogs on
+ * mount (the parent may pass a cache to avoid refetching). The Role dropdown is the growable
+ * catalog — each PostingRow self-fetches it (server-paginated + searchable) via the injected
+ * `identity` client, so no global role list is threaded through here.
+ *
+ * ⛔ No raw UUIDs: the header renders `companyName`; posting dropdowns render names with
+ * uuid values. `membershipUuid` / `companyUuid` are used only as keys/params.
+ *
+ * Props:
+ *   membership  — { membershipUuid, companyUuid, companyName, isActive, status, postings }
+ *   userUuid    — the user this card belongs to (needed to activate — one-active invariant)
+ *   token       — access token
+ *   identity    — the shared identity client service (passed to PostingRow for the Role dropdown)
+ *   onActivate() / onRemoved() / onSaved() — parent refresh hooks
+ */
+import { useEffect, useState } from 'react';
+import { Loader2, Plus, Star, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card } from '@/components/ui/card';
+import ConfirmDialog from '@/components/ConfirmDialog';
+import PostingRow from './PostingRow';
+
+/**
+ * Map a server posting card → the editor's local row shape (a stable client key added).
+ * The server-resolved display NAMES (roleName / departmentName / branchName) ride along so
+ * the growable Role dropdown can render the selected name even before its option page loads
+ * (⛔ no raw uuid on the trigger).
+ */
+function toRow(p, i) {
+  return {
+    key: p.postingUuid || `new-${i}-${Math.random().toString(36).slice(2)}`,
+    roleUuid: p.roleUuid || '',
+    roleName: p.roleName || '',
+    departmentUuid: p.departmentUuid || null,
+    branchUuid: p.branchUuid || null,
+    effectiveFrom: p.effectiveFrom || null,
+    effectiveUntil: p.effectiveUntil || null,
+  };
+}
+
+/** A blank posting row (a fresh client key so React tracks it distinctly). */
+function blankRow() {
+  return {
+    key: `new-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+    roleUuid: '',
+    roleName: '',
+    departmentUuid: null,
+    branchUuid: null,
+    effectiveFrom: null,
+    effectiveUntil: null,
+  };
+}
+
+/** Strip the client-only `key` and normalize a row into the API PostingInput shape. */
+function toPostingInput(row) {
+  return {
+    roleUuid: row.roleUuid,
+    departmentUuid: row.departmentUuid || null,
+    branchUuid: row.branchUuid || null,
+    effectiveFrom: row.effectiveFrom || null,
+    effectiveUntil: row.effectiveUntil || null,
+  };
+}
+
+export default function MembershipCard({
+  membership,
+  userUuid,
+  token,
+  identity,
+  onActivate,
+  onRemoved,
+  onSaved,
+}) {
+  const { membershipUuid, companyUuid, companyName, isActive } = membership;
+
+  const [rows, setRows] = useState(() => (membership.postings || []).map(toRow));
+  const [departments, setDepartments] = useState([]);
+  const [branches, setBranches] = useState([]);
+  const [saving, setSaving] = useState(false);
+  const [activating, setActivating] = useState(false);
+  const [confirmRemove, setConfirmRemove] = useState(false);
+  const [removing, setRemoving] = useState(false);
+
+  // Re-seed local rows if the membership's postings change (e.g. after a save + reload).
+  useEffect(() => {
+    setRows((membership.postings || []).map(toRow));
+  }, [membership.postings]);
+
+  // Load this company's department + branch catalogs (the company-scoped dropdown options).
+  useEffect(() => {
+    if (!token || !companyUuid) return undefined;
+    let active = true;
+    (async () => {
+      const [dr, br] = await Promise.all([
+        identity.listDepartments(token, companyUuid),
+        identity.listBranches(token, companyUuid),
+      ]);
+      if (!active) return;
+      setDepartments(dr.ok ? dr.rows || [] : []);
+      setBranches(br.ok ? br.rows || [] : []);
+    })();
+    return () => {
+      active = false;
+    };
+  }, [identity, token, companyUuid]);
+
+  const patchRow = (key, patch) =>
+    setRows((prev) => prev.map((r) => (r.key === key ? { ...r, ...patch } : r)));
+
+  const removeRow = (key) => setRows((prev) => prev.filter((r) => r.key !== key));
+
+  const addRow = () => setRows((prev) => [...prev, blankRow()]);
+
+  const onSave = async () => {
+    // Guard: every row must have a role (role is the required field of a posting).
+    const missingRole = rows.some((r) => !r.roleUuid);
+    if (missingRole) {
+      toast.error('Every posting needs a role.');
+      return;
+    }
+    setSaving(true);
+    const r = await identity.replacePostings(token, membershipUuid, rows.map(toPostingInput));
+    setSaving(false);
+    if (!r.ok) {
+      toast.error(r.error || 'Could not save the postings.');
+      return;
+    }
+    toast.success('Assignments saved');
+    onSaved?.();
+  };
+
+  const onToggleActive = async () => {
+    if (isActive) return; // already the active company — radio semantics, no-op.
+    setActivating(true);
+    const r = await identity.setMembershipActive(token, membershipUuid, userUuid);
+    setActivating(false);
+    if (!r.ok) {
+      toast.error(r.error || 'Could not activate this company.');
+      return;
+    }
+    toast.success(`${companyName} is now the active company`);
+    onActivate?.();
+  };
+
+  const onConfirmRemove = async () => {
+    setRemoving(true);
+    const r = await identity.removeMembership(token, membershipUuid);
+    setRemoving(false);
+    if (!r.ok) {
+      toast.error(r.error || 'Could not remove the membership.');
+      return;
+    }
+    setConfirmRemove(false);
+    toast.success(`Removed from ${companyName}`);
+    onRemoved?.();
+  };
+
+  return (
+    <Card className="w-full min-w-0 gap-0 overflow-hidden py-0 shadow-sm">
+      {/* Header: company name + active toggle + remove. */}
+      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border px-3 py-2">
+        <div className="flex items-center gap-2">
+          <span className="font-medium text-foreground">{companyName || '(unknown company)'}</span>
+          {isActive && (
+            <Badge variant="success" className="gap-1">
+              <Star className="size-3 fill-current" />
+              active
+            </Badge>
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          <Button
+            type="button"
+            variant={isActive ? 'ghost' : 'soft'}
+            size="sm"
+            onClick={onToggleActive}
+            disabled={isActive || activating || saving}
+            title={isActive ? 'This is the active login company' : 'Make this the active login company'}
+          >
+            {activating ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <Star className={isActive ? 'size-4 fill-current' : 'size-4'} />
+            )}
+            {isActive ? 'Active' : 'Set active'}
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+            onClick={() => setConfirmRemove(true)}
+            disabled={removing || saving}
+          >
+            <Trash2 className="size-4" />
+            Remove
+          </Button>
+        </div>
+      </div>
+
+      {/* Body: the multi-row posting editor. `min-w-0` so the inner table wrapper's
+          `overflow-x-auto` scrolls the wide posting table rather than stretching the card. */}
+      <div className="min-w-0 px-3 py-2">
+        {rows.length === 0 ? (
+          <p className="py-2 text-sm text-muted-foreground">
+            No postings yet. Add a role (and optionally a department / branch / dates).
+          </p>
+        ) : (
+          <>
+            {/* Desktop / tablet: the posting table (PostingRow renders <tr>s).
+                `w-max min-w-full`: the table shrinks-to-fit its natural content width
+                (so the `overflow-x-auto` wrapper SCROLLS it instead of the table painting
+                past the wrapper — a plain `w-full` table grows to its content and spills),
+                while `min-w-full` keeps it filling the wrapper when the content is narrow. */}
+            <div className="hidden overflow-x-auto sm:block">
+              <table className="w-max min-w-full border-collapse text-sm">
+                <thead>
+                  <tr className="border-b border-border text-left">
+                    {['Role', 'Department', 'Branch', 'From', 'Until'].map((h) => (
+                      <th
+                        key={h}
+                        className="pb-1.5 pr-2 font-mono text-[0.66rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground"
+                      >
+                        {h}
+                      </th>
+                    ))}
+                    <th className="pb-1.5 font-medium" aria-label="Actions" />
+                  </tr>
+                </thead>
+                <tbody>
+                  {rows.map((row) => (
+                    <PostingRow
+                      key={row.key}
+                      posting={row}
+                      departments={departments}
+                      branches={branches}
+                      token={token}
+                      identity={identity}
+                      onChange={(patch) => patchRow(row.key, patch)}
+                      onRemove={() => removeRow(row.key)}
+                      disabled={saving}
+                      layout="row"
+                    />
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            {/* Mobile (≤640px): each posting reflows to a stacked mini-card. */}
+            <div className="space-y-3 sm:hidden">
+              {rows.map((row) => (
+                <PostingRow
+                  key={row.key}
+                  posting={row}
+                  departments={departments}
+                  branches={branches}
+                  token={token}
+                  identity={identity}
+                  onChange={(patch) => patchRow(row.key, patch)}
+                  onRemove={() => removeRow(row.key)}
+                  disabled={saving}
+                  layout="card"
+                />
+              ))}
+            </div>
+          </>
+        )}
+
+        <div className="mt-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+          <Button type="button" variant="ghost" size="sm" onClick={addRow} disabled={saving}>
+            <Plus className="size-4" />
+            Add posting
+          </Button>
+          <Button type="button" size="sm" onClick={onSave} disabled={saving}>
+            {saving && <Loader2 className="size-4 animate-spin" />}
+            Save assignments
+          </Button>
+        </div>
+      </div>
+
+      <ConfirmDialog
+        open={confirmRemove}
+        title={`Remove from ${companyName || 'this company'}?`}
+        message="This removes the user's membership in this company and all its postings. This cannot be undone."
+        confirmLabel="Remove"
+        destructive
+        busy={removing}
+        onConfirm={onConfirmRemove}
+        onCancel={() => setConfirmRemove(false)}
+      />
+    </Card>
+  );
+}

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

@@ -0,0 +1,264 @@
+/**
+ * PostingRow — one editable posting inside a MembershipCard: a bundled
+ * `(role, department?, branch?, from?, until?)` assignment. The dropdowns show display
+ * NAMES; their VALUES are the uuids (kept in the row's local edit state, never rendered
+ * as text). Department, Branch, From, and Until are all NULLABLE — each dropdown carries
+ * an explicit "— none —" option and the date inputs may be left blank.
+ *
+ * Controls are the shared OCA primitives: the three dropdowns use `ui/searchable-select.tsx`
+ * (the searchable + paginated dynamic dropdown) and the two date inputs use `ui/date-field.tsx`.
+ * Role is GROWABLE — it self-fetches the role catalog server-paginated + searchable via the
+ * injected `identity` client. Department and Branch are small, per-company catalogs (passed in
+ * from the card) rendered with the SAME control in CLIENT-FILTER mode (fetched once, filtered
+ * locally), so the look is consistent while avoiding per-keystroke round-trips.
+ *
+ * A row whose effective window is not "now" is flagged with a tonal Badge:
+ *   - "scheduled" — effectiveFrom is in the future (info) — not yet active.
+ *   - "expired"   — effectiveUntil is in the past (warning) — no longer active.
+ * The chip is a reviewer cue only; the row is still saved as-is (time bounds are honored
+ * by the login resolver server-side).
+ *
+ * Responsive: `layout="row"` renders a desktop `<tr>` (used inside the MembershipCard
+ * table). `layout="card"` renders a stacked mini-card of labeled fields for ≤640px, so
+ * the posting stays readable without horizontal scroll.
+ *
+ * ⛔ No raw UUIDs: Role/Department/Branch dropdowns render display NAMES; their values are
+ * uuids. The Role trigger shows `posting.roleName` (server-resolved) so the name is visible
+ * even before its option page loads; nothing renders a uuid as visible text.
+ *
+ * Props:
+ *   posting   — { roleUuid, roleName, departmentUuid, branchUuid, effectiveFrom, effectiveUntil }
+ *   departments / branches — [{ uuid, name }]  (this company's catalogs; may be empty)
+ *   token     — access token (for the Role dropdown's self-fetch)
+ *   identity  — the shared identity client service (for `listRoles`)
+ *   onChange(patch) — merge a field change into this row
+ *   onRemove()      — drop this row
+ *   disabled        — save in flight
+ *   layout          — 'row' (desktop table) | 'card' (mobile mini-card)
+ */
+import { useCallback } from 'react';
+import { X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Label } from '@/components/ui/label';
+import { DateField } from '@/components/ui/date-field';
+import { SearchableSelect } from '@/components/ui/searchable-select';
+
+/**
+ * Classify a posting's effective window relative to now:
+ *   'scheduled' (from in the future) | 'expired' (until in the past) | null (in effect).
+ * Mirrors the resolver's in-effect test: from <= now AND (until is null OR until > now).
+ */
+function windowState(effectiveFrom, effectiveUntil) {
+  const now = Date.now();
+  if (effectiveFrom) {
+    const fromMs = new Date(effectiveFrom).getTime();
+    if (!Number.isNaN(fromMs) && fromMs > now) return 'scheduled';
+  }
+  if (effectiveUntil) {
+    const untilMs = new Date(effectiveUntil).getTime();
+    if (!Number.isNaN(untilMs) && untilMs <= now) return 'expired';
+  }
+  return null;
+}
+
+/** A date string (or '') for a native date input, from a stored value. */
+function toDateInput(value) {
+  if (!value) return '';
+  // Stored values may be full timestamps ("2026-07-13 09:00:00" / ISO); keep the date part.
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) {
+    // Already a bare YYYY-MM-DD or unparseable — trust the leading date chunk.
+    return String(value).slice(0, 10);
+  }
+  return d.toISOString().slice(0, 10);
+}
+
+/** The effective-window chip (tonal Badge), or null when the posting is in effect. */
+function WindowChip({ chip }) {
+  if (!chip) return null;
+  return (
+    <Badge variant={chip === 'expired' ? 'warning' : 'info'} className="capitalize">
+      {chip}
+    </Badge>
+  );
+}
+
+export default function PostingRow({
+  posting,
+  departments,
+  branches,
+  token,
+  identity,
+  onChange,
+  onRemove,
+  disabled = false,
+  layout = 'row',
+}) {
+  const chip = windowState(posting.effectiveFrom, posting.effectiveUntil);
+
+  // Role is the growable catalog → server-paginated + searchable via `listRoles`. The row
+  // already knows the selected role's NAME (posting.roleName, resolved server-side), so the
+  // trigger shows a name even before the first page loads.
+  const fetchRoles = useCallback(
+    async ({ search, page, limit }) => {
+      const r = await identity.listRoles(token, { search, page, limit });
+      if (!r.ok) return { options: [], total: 0, page };
+      const options = (r.rows || []).map((row) => ({
+        value: row.id,
+        label: row.fields?.name || '(unnamed)',
+      }));
+      return { options, total: r.total ?? options.length, page: r.page ?? page };
+    },
+    [identity, token],
+  );
+
+  // Department / Branch: small, per-company catalogs (passed in). The SAME control in
+  // client-filter mode — `fetchPage` returns the whole list once; the panel filters locally.
+  const fetchDepartments = useCallback(
+    async () => {
+      const options = (departments || []).map((d) => ({ value: d.uuid, label: d.name }));
+      return { options, total: options.length, page: 1 };
+    },
+    [departments],
+  );
+  const fetchBranches = useCallback(
+    async () => {
+      const options = (branches || []).map((b) => ({ value: b.uuid, label: b.name }));
+      return { options, total: options.length, page: 1 };
+    },
+    [branches],
+  );
+
+  // Shared field controls — reused by both the desktop row and the mobile card.
+  const roleSelect = (
+    <SearchableSelect
+      aria-label="Role"
+      value={posting.roleUuid || null}
+      selectedLabel={posting.roleName}
+      onChange={(v) => onChange({ roleUuid: v || '' })}
+      onLabelChange={(label) => onChange({ roleName: label || '' })}
+      fetchPage={fetchRoles}
+      placeholder="Select a role…"
+      searchPlaceholder="Search roles…"
+      disabled={disabled}
+    />
+  );
+
+  const departmentSelect = (
+    <SearchableSelect
+      aria-label="Department"
+      value={posting.departmentUuid || null}
+      selectedLabel={(departments || []).find((d) => d.uuid === posting.departmentUuid)?.name}
+      onChange={(v) => onChange({ departmentUuid: v })}
+      fetchPage={fetchDepartments}
+      clientFilter
+      allowClear
+      placeholder="— none —"
+      searchPlaceholder="Search departments…"
+      disabled={disabled}
+    />
+  );
+
+  const branchSelect = (
+    <SearchableSelect
+      aria-label="Branch"
+      value={posting.branchUuid || null}
+      selectedLabel={(branches || []).find((b) => b.uuid === posting.branchUuid)?.name}
+      onChange={(v) => onChange({ branchUuid: v })}
+      fetchPage={fetchBranches}
+      clientFilter
+      allowClear
+      placeholder="— none —"
+      searchPlaceholder="Search branches…"
+      disabled={disabled}
+    />
+  );
+
+  const fromInput = (
+    <DateField
+      aria-label="Effective from"
+      value={toDateInput(posting.effectiveFrom)}
+      disabled={disabled}
+      onChange={(e) => onChange({ effectiveFrom: e.target.value || null })}
+    />
+  );
+
+  const untilInput = (
+    <DateField
+      aria-label="Effective until"
+      value={toDateInput(posting.effectiveUntil)}
+      disabled={disabled}
+      onChange={(e) => onChange({ effectiveUntil: e.target.value || null })}
+    />
+  );
+
+  const removeButton = (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className="size-8 text-muted-foreground hover:text-destructive"
+      onClick={onRemove}
+      disabled={disabled}
+      aria-label="Remove posting"
+    >
+      <X className="size-4" />
+    </Button>
+  );
+
+  // Mobile: a stacked mini-card of labeled fields (mirrors OCA's ≤640 .dsa-row stacking).
+  if (layout === 'card') {
+    return (
+      <div className="rounded-lg border border-border bg-background p-3">
+        <div className="mb-2 flex items-center justify-between gap-2">
+          <WindowChip chip={chip} />
+          {removeButton}
+        </div>
+        <div className="space-y-2.5">
+          <div className="space-y-1">
+            <Label variant="field">Role</Label>
+            {roleSelect}
+          </div>
+          <div className="space-y-1">
+            <Label variant="field">Department</Label>
+            {departmentSelect}
+          </div>
+          <div className="space-y-1">
+            <Label variant="field">Branch</Label>
+            {branchSelect}
+          </div>
+          <div className="grid grid-cols-2 gap-2">
+            <div className="space-y-1">
+              <Label variant="field">From</Label>
+              {fromInput}
+            </div>
+            <div className="space-y-1">
+              <Label variant="field">Until</Label>
+              {untilInput}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Desktop: a table row inside the MembershipCard table. Each cell carries a sane
+  // `min-w-*` so, when the (`w-max`) table is wider than its scroll wrapper and scrolls,
+  // the columns stay readable rather than collapsing to their tightest fit.
+  return (
+    <tr className="border-b last:border-b-0">
+      <td className="min-w-[8rem] py-1.5 pr-2 align-top">{roleSelect}</td>
+      <td className="min-w-[8rem] py-1.5 pr-2 align-top">{departmentSelect}</td>
+      <td className="min-w-[8rem] py-1.5 pr-2 align-top">{branchSelect}</td>
+      <td className="min-w-[9rem] py-1.5 pr-2 align-top">{fromInput}</td>
+      <td className="min-w-[9rem] py-1.5 pr-2 align-top">{untilInput}</td>
+      <td className="py-1.5 align-top">
+        <div className="flex items-center gap-1.5">
+          <WindowChip chip={chip} />
+          {removeButton}
+        </div>
+      </td>
+    </tr>
+  );
+}