@varshylinc/team-management 0.1.0

package/src/client/components/InviteForm.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import type { OrgRole } from '../types.js';
+import { createInvitation } from '../api.js';
+import { RoleSelect } from './RoleSelect.js';
+
+interface InviteFormProps {
+  orgId: number;
+  onSuccess: () => void;
+}
+
+export function InviteForm({ orgId, onSuccess }: InviteFormProps) {
+  const [email, setEmail] = useState('');
+  const [role, setRole] = useState<OrgRole>('member');
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!email.trim()) return;
+
+    setSubmitting(true);
+    setError(null);
+    setSuccess(false);
+
+    try {
+      await createInvitation(orgId, { email: email.trim(), role });
+      setEmail('');
+      setRole('member');
+      setSuccess(true);
+      onSuccess();
+      setTimeout(() => setSuccess(false), 3000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to send invitation');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="bg-white border border-slate-200 rounded-lg p-4 shadow-sm">
+      <h3 className="text-sm font-semibold text-slate-800 mb-3">Invite a team member</h3>
+      <div className="flex flex-col sm:flex-row gap-2">
+        <input
+          type="email"
+          placeholder="colleague@company.com"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+          disabled={submitting}
+          className="flex-1 rounded-md border border-slate-300 px-3 py-2 text-sm placeholder-slate-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:bg-slate-50"
+        />
+        <div className="w-full sm:w-36">
+          <RoleSelect
+            value={role}
+            onChange={setRole}
+            disabled={submitting}
+            disabledRoles={['owner']}
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={submitting || !email.trim()}
+          className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        >
+          {submitting ? 'Sending…' : 'Send Invite'}
+        </button>
+      </div>
+      {error && (
+        <p className="mt-2 text-sm text-red-600">{error}</p>
+      )}
+      {success && (
+        <p className="mt-2 text-sm text-green-600">Invitation sent successfully!</p>
+      )}
+    </form>
+  );
+}

package/src/client/components/MemberRow.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { PublicMember, OrgRole } from '../types.js';
+import { RoleBadge } from './RoleBadge.js';
+import { RoleSelect } from './RoleSelect.js';
+
+interface MemberRowProps {
+  member: PublicMember;
+  currentUserRole: OrgRole;
+  onRemove: (userId: number) => void;
+  onRoleChange: (userId: number, newRole: OrgRole) => void;
+}
+
+const canManage = (currentRole: OrgRole): boolean =>
+  currentRole === 'owner' || currentRole === 'admin';
+
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+export function MemberRow({ member, currentUserRole, onRemove, onRoleChange }: MemberRowProps) {
+  const canEdit = canManage(currentUserRole) && member.role !== 'owner';
+  const disabledRoles: OrgRole[] =
+    currentUserRole === 'admin' ? ['owner'] : [];
+
+  return (
+    <tr className="border-b border-slate-100 last:border-0 hover:bg-slate-50 transition-colors">
+      <td className="py-3 px-4">
+        <div className="flex flex-col">
+          <span className="text-sm font-medium text-slate-900">
+            {member.name ?? member.email}
+          </span>
+          {member.name && (
+            <span className="text-xs text-slate-500">{member.email}</span>
+          )}
+        </div>
+      </td>
+      <td className="py-3 px-4">
+        {canEdit ? (
+          <RoleSelect
+            value={member.role}
+            onChange={(r) => onRoleChange(member.user_id, r)}
+            disabledRoles={disabledRoles}
+          />
+        ) : (
+          <RoleBadge role={member.role} />
+        )}
+      </td>
+      <td className="py-3 px-4 text-sm text-slate-500 whitespace-nowrap">
+        {formatDate(member.joined_at)}
+      </td>
+      <td className="py-3 px-4 text-right">
+        {canEdit && (
+          <button
+            onClick={() => onRemove(member.user_id)}
+            className="text-sm text-red-600 hover:text-red-800 font-medium transition-colors"
+          >
+            Remove
+          </button>
+        )}
+      </td>
+    </tr>
+  );
+}
+

package/src/client/components/PendingTransferBanner.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import type { OwnershipTransfer } from '../types.js';
+import { acceptTransfer, cancelTransfer } from '../api.js';
+
+interface PendingTransferBannerProps {
+  transfer: OwnershipTransfer;
+  currentUserId: number;
+  orgId: number;
+  onAction: () => void;
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+export function PendingTransferBanner({
+  transfer,
+  currentUserId,
+  orgId,
+  onAction,
+}: PendingTransferBannerProps) {
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const isTarget = currentUserId === transfer.to_user_id;
+
+  async function handleAccept() {
+    setSubmitting(true);
+    setError(null);
+    try {
+      await acceptTransfer(orgId);
+      onAction();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Action failed');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function handleDecline() {
+    setSubmitting(true);
+    setError(null);
+    try {
+      await cancelTransfer(orgId);
+      onAction();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Action failed');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 shadow-sm">
+      <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+        <div className="flex-1">
+          <p className="text-sm font-semibold text-amber-900">
+            Pending Ownership Transfer
+          </p>
+          <p className="text-sm text-amber-800 mt-0.5">
+            {isTarget
+              ? `You have been invited to become the new owner of this organization.`
+              : `An ownership transfer has been initiated to user #${transfer.to_user_id}.`}
+          </p>
+          <p className="text-xs text-amber-700 mt-1">
+            Expires {formatDate(transfer.expires_at)}
+          </p>
+        </div>
+        {isTarget && (
+          <div className="flex gap-2 shrink-0">
+            <button
+              onClick={handleAccept}
+              disabled={submitting}
+              className="rounded-md bg-amber-600 px-4 py-2 text-sm font-medium text-white hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 disabled:opacity-50 transition-colors"
+            >
+              Accept
+            </button>
+            <button
+              onClick={handleDecline}
+              disabled={submitting}
+              className="rounded-md border border-amber-400 bg-white px-4 py-2 text-sm font-medium text-amber-800 hover:bg-amber-100 focus:outline-none focus:ring-2 focus:ring-amber-400 disabled:opacity-50 transition-colors"
+            >
+              Decline
+            </button>
+          </div>
+        )}
+      </div>
+      {error && (
+        <p className="mt-2 text-sm text-red-600">{error}</p>
+      )}
+    </div>
+  );
+}

package/src/client/components/PlaceholderCard.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+/**
+ * PlaceholderCard — rendered by host products while the full
+ * Team Management feature is in development.
+ */
+export function PlaceholderCard(): React.ReactElement {
+  return (
+    <div style={{
+      border: '1px solid #e2e8f0',
+      borderRadius: '8px',
+      padding: '24px',
+      maxWidth: '400px',
+      fontFamily: 'system-ui, sans-serif',
+    }}>
+      <div style={{ fontSize: '24px', marginBottom: '8px' }}>👥</div>
+      <h3 style={{ margin: '0 0 8px', fontSize: '16px', fontWeight: 600, color: '#1a2230' }}>
+        Team Management
+      </h3>
+      <p style={{ margin: 0, fontSize: '14px', color: '#64748b' }}>
+        Coming soon. Invite teammates, manage roles, and control access
+        to your Varshyl products.
+      </p>
+    </div>
+  );
+}

package/src/client/components/RoleBadge.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { OrgRole } from '../types.js';
+
+const roleStyles: Record<OrgRole, string> = {
+  owner: 'bg-purple-100 text-purple-800 border border-purple-300',
+  admin: 'bg-blue-100 text-blue-800 border border-blue-300',
+  member: 'bg-green-100 text-green-800 border border-green-300',
+  viewer: 'bg-slate-100 text-slate-700 border border-slate-300',
+};
+
+const roleLabels: Record<OrgRole, string> = {
+  owner: 'Owner',
+  admin: 'Admin',
+  member: 'Member',
+  viewer: 'Viewer',
+};
+
+export function RoleBadge({ role }: { role: OrgRole }) {
+  return (
+    <span
+      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${roleStyles[role]}`}
+    >
+      {roleLabels[role]}
+    </span>
+  );
+}

package/src/client/components/RoleSelect.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { OrgRole } from '../types.js';
+
+const ALL_ROLES: OrgRole[] = ['owner', 'admin', 'member', 'viewer'];
+
+const roleLabels: Record<OrgRole, string> = {
+  owner: 'Owner',
+  admin: 'Admin',
+  member: 'Member',
+  viewer: 'Viewer',
+};
+
+interface RoleSelectProps {
+  value: OrgRole;
+  onChange: (r: OrgRole) => void;
+  disabled?: boolean;
+  disabledRoles?: OrgRole[];
+}
+
+export function RoleSelect({ value, onChange, disabled, disabledRoles = [] }: RoleSelectProps) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value as OrgRole)}
+      disabled={disabled}
+      className="block w-full rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400"
+    >
+      {ALL_ROLES.map((r) => (
+        <option key={r} value={r} disabled={disabledRoles.includes(r)}>
+          {roleLabels[r]}
+        </option>
+      ))}
+    </select>
+  );
+}

package/src/client/hooks/useCurrentMembership.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect, useCallback } from 'react';
+import { getMyMembership } from '../api.js';
+import type { CurrentMembership } from '../types.js';
+
+export function useCurrentMembership() {
+  const [membership, setMembership] = useState<CurrentMembership | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    setError(null);
+    getMyMembership()
+      .then(setMembership)
+      .catch((e: Error) => setError(e.message))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  return { membership, loading, error, refresh: load };
+}

package/src/client/hooks/useMembers.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect, useCallback } from 'react';
+import { listMembers } from '../api.js';
+import type { PublicMember } from '../types.js';
+
+export function useMembers(orgId: number, opts?: { includeFormer?: boolean }) {
+  const [members, setMembers] = useState<PublicMember[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    setError(null);
+    listMembers(orgId, opts)
+      .then(setMembers)
+      .catch((e: Error) => setError(e.message))
+      .finally(() => setLoading(false));
+  }, [orgId, opts?.includeFormer]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  return { members, loading, error, refresh: load };
+}

package/src/client/hooks/usePendingInvitations.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect, useCallback } from 'react';
+import { listInvitations } from '../api.js';
+import type { PendingInvitation } from '../types.js';
+
+export function usePendingInvitations(orgId: number) {
+  const [invitations, setInvitations] = useState<PendingInvitation[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    setError(null);
+    listInvitations(orgId)
+      .then(setInvitations)
+      .catch((e: Error) => setError(e.message))
+      .finally(() => setLoading(false));
+  }, [orgId]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  return { invitations, loading, error, refresh: load };
+}

package/src/client/hooks/usePendingTransfer.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect, useCallback } from 'react';
+import { getPendingTransfer } from '../api.js';
+import type { OwnershipTransfer } from '../types.js';
+
+export function usePendingTransfer(orgId: number) {
+  const [transfer, setTransfer] = useState<OwnershipTransfer | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    setError(null);
+    getPendingTransfer(orgId)
+      .then(setTransfer)
+      .catch((e: Error) => setError(e.message))
+      .finally(() => setLoading(false));
+  }, [orgId]);
+
+  useEffect(() => {
+    load();
+    // Poll every 30 seconds for transfer status changes
+    const interval = setInterval(load, 30_000);
+    return () => clearInterval(interval);
+  }, [load]);
+
+  return { transfer, loading, error, refresh: load };
+}

package/src/client/index.ts

@@ -0,0 +1,80 @@
+export { MembersPage } from './pages/MembersPage.js';
+export { OrgSettingsPage } from './pages/OrgSettingsPage.js';
+export { InvitationAcceptPage } from './pages/InvitationAcceptPage.js';
+export { InvitationCodePage } from './pages/InvitationCodePage.js';
+export { AuditLogPage } from './pages/AuditLogPage.js';
+export { OwnershipTransferPage } from './pages/OwnershipTransferPage.js';
+export { EmailChangePage } from './pages/EmailChangePage.js';
+export { PasswordResetRequestPage } from './pages/PasswordResetRequestPage.js';
+export { PasswordResetPage } from './pages/PasswordResetPage.js';
+export { SuperAdminDashboard } from './pages/SuperAdminDashboard.js';
+
+// Components
+export { RoleBadge } from './components/RoleBadge.js';
+export { RoleSelect } from './components/RoleSelect.js';
+export { MemberRow } from './components/MemberRow.js';
+export { InviteForm } from './components/InviteForm.js';
+export { InvitationCodeDisplay } from './components/InvitationCodeDisplay.js';
+export { AuditEventRow } from './components/AuditEventRow.js';
+export { DangerZoneCard } from './components/DangerZoneCard.js';
+export { CascadePreview } from './components/CascadePreview.js';
+export { PendingTransferBanner } from './components/PendingTransferBanner.js';
+
+// Hooks
+export { useCurrentMembership } from './hooks/useCurrentMembership.js';
+export { useMembers } from './hooks/useMembers.js';
+export { usePendingInvitations } from './hooks/usePendingInvitations.js';
+export { usePendingTransfer } from './hooks/usePendingTransfer.js';
+
+// API
+export {
+  setTmApiBase,
+  getOrg,
+  updateOrg,
+  deleteOrg,
+  listMembers,
+  removeMember,
+  changeMemberRole,
+  listInvitations,
+  createInvitation,
+  revokeInvitation,
+  resendInvitation,
+  getInvitationCode,
+  acceptInvitationByToken,
+  acceptInvitationByCode,
+  getMyMembership,
+  requestEmailChange,
+  verifyEmailChange,
+  cancelEmailChange,
+  requestPasswordReset,
+  resetPassword,
+  getPendingTransfer,
+  initiateTransfer,
+  acceptTransfer,
+  cancelTransfer,
+  getAuditLog,
+  adminListOrgs,
+  adminGetOrg,
+  adminRestoreOrg,
+  adminAppointOwner,
+  adminHardDeleteOrg,
+  adminAddMember,
+  adminRemoveMember,
+  adminLockUser,
+  adminUnlockUser,
+  adminResetPassword,
+} from './api.js';
+
+// Types
+export type {
+  OrgRole,
+  TransferStatus,
+  PublicOrg,
+  PublicMember,
+  PendingInvitation,
+  AuditEvent,
+  OwnershipTransfer,
+  CurrentMembership,
+  SuperAdminOrgSummary,
+  ApiError,
+} from './types.js';

package/src/client/pages/AuditLogPage.tsx

@@ -0,0 +1,164 @@
+import React, { useState } from 'react';
+import { useCurrentMembership } from '../hooks/useCurrentMembership.js';
+import { AuditEventRow } from '../components/AuditEventRow.js';
+import { getAuditLog } from '../api.js';
+import type { AuditEvent } from '../types.js';
+
+interface AuditLogPageProps {
+  orgId: number;
+}
+
+const PAGE_SIZE = 25;
+
+export function AuditLogPage({ orgId }: AuditLogPageProps) {
+  const { membership } = useCurrentMembership();
+  const [events, setEvents] = useState<AuditEvent[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [actionFilter, setActionFilter] = useState('');
+  const [initialized, setInitialized] = useState(false);
+
+  const role = membership?.role;
+  const canView = role === 'owner' || role === 'admin';
+
+  async function load(p: number, action: string) {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await getAuditLog(orgId, { page: p, limit: PAGE_SIZE, action: action || undefined });
+      setEvents(result.events);
+      setTotal(result.total);
+      setPage(result.page);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load audit log');
+    } finally {
+      setLoading(false);
+      setInitialized(true);
+    }
+  }
+
+  // Load on first render after membership check
+  React.useEffect(() => {
+    if (canView && !initialized) {
+      load(1, actionFilter);
+    }
+  }, [canView]);
+
+  async function handleFilter(e: React.FormEvent) {
+    e.preventDefault();
+    await load(1, actionFilter);
+  }
+
+  const totalPages = Math.ceil(total / PAGE_SIZE);
+
+  if (!canView) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-8">
+        <div className="rounded-md bg-amber-50 border border-amber-200 px-4 py-3 text-sm text-amber-700">
+          You do not have permission to view the audit log.
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-5xl mx-auto px-4 py-8">
+      <div className="flex flex-col sm:flex-row sm:items-center gap-4 mb-6">
+        <h1 className="text-2xl font-bold text-slate-900 flex-1">Audit Log</h1>
+        <form onSubmit={handleFilter} className="flex gap-2">
+          <input
+            type="text"
+            value={actionFilter}
+            onChange={(e) => setActionFilter(e.target.value)}
+            placeholder="Filter by action…"
+            className="rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          />
+          <button
+            type="submit"
+            className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors"
+          >
+            Filter
+          </button>
+          {actionFilter && (
+            <button
+              type="button"
+              onClick={() => { setActionFilter(''); load(1, ''); }}
+              className="rounded-md border border-slate-300 px-3 py-2 text-sm text-slate-600 hover:bg-slate-50 transition-colors"
+            >
+              Clear
+            </button>
+          )}
+        </form>
+      </div>
+
+      {error && (
+        <div className="rounded-md bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700 mb-4">
+          {error}
+        </div>
+      )}
+
+      {loading ? (
+        <div className="flex items-center justify-center py-16">
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+        </div>
+      ) : (
+        <>
+          <div className="overflow-hidden rounded-lg border border-slate-200 shadow-sm">
+            <table className="w-full text-left">
+              <thead className="bg-slate-50 border-b border-slate-200">
+                <tr>
+                  <th className="py-3 px-4 text-xs font-semibold uppercase tracking-wide text-slate-500">Actor</th>
+                  <th className="py-3 px-4 text-xs font-semibold uppercase tracking-wide text-slate-500">Action</th>
+                  <th className="py-3 px-4 text-xs font-semibold uppercase tracking-wide text-slate-500">Target</th>
+                  <th className="py-3 px-4 text-xs font-semibold uppercase tracking-wide text-slate-500">When</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-slate-100">
+                {events.map((event) => (
+                  <AuditEventRow key={event.id} event={event} />
+                ))}
+                {events.length === 0 && initialized && (
+                  <tr>
+                    <td colSpan={4} className="py-10 text-center text-sm text-slate-500">
+                      No audit events found.
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="mt-4 flex items-center justify-between">
+              <p className="text-sm text-slate-600">
+                Showing {(page - 1) * PAGE_SIZE + 1}–{Math.min(page * PAGE_SIZE, total)} of {total} events
+              </p>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => load(page - 1, actionFilter)}
+                  disabled={page <= 1 || loading}
+                  className="rounded-md border border-slate-300 px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                >
+                  Previous
+                </button>
+                <span className="flex items-center px-2 text-sm text-slate-600">
+                  {page} / {totalPages}
+                </span>
+                <button
+                  onClick={() => load(page + 1, actionFilter)}
+                  disabled={page >= totalPages || loading}
+                  className="rounded-md border border-slate-300 px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                >
+                  Next
+                </button>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}