@varshylinc/team-management 0.1.0 → 0.2.0

package/src/client/pages/AuditLogPage.tsx

@@ -1,164 +0,0 @@
-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>
-  );
-}

package/src/client/pages/EmailChangePage.tsx

@@ -1,144 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { requestEmailChange, verifyEmailChange, cancelEmailChange } from '../api.js';
-
-interface EmailChangePageProps {
-  /** 'request' | 'verify' | 'cancel' */
-  mode: 'request' | 'verify' | 'cancel';
-  token?: string;
-}
-
-export function EmailChangePage({ mode, token }: EmailChangePageProps) {
-  const [newEmail, setNewEmail] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState(false);
-
-  // Auto-submit verify/cancel on mount
-  useEffect(() => {
-    if ((mode === 'verify' || mode === 'cancel') && token) {
-      setSubmitting(true);
-      const fn = mode === 'verify' ? verifyEmailChange : cancelEmailChange;
-      fn(token)
-        .then(() => setSuccess(true))
-        .catch((e: Error) => setError(e.message))
-        .finally(() => setSubmitting(false));
-    }
-  }, [mode, token]);
-
-  if (mode === 'verify' || mode === 'cancel') {
-    if (submitting) {
-      return (
-        <div className="min-h-screen flex items-center justify-center bg-slate-50">
-          <div className="text-center">
-            <div className="mx-auto h-10 w-10 animate-spin rounded-full border-2 border-blue-500 border-t-transparent mb-4" />
-            <p className="text-sm text-slate-600">
-              {mode === 'verify' ? 'Verifying your email change…' : 'Cancelling email change…'}
-            </p>
-          </div>
-        </div>
-      );
-    }
-    if (success) {
-      return (
-        <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
-          <div className="bg-white rounded-xl shadow-md w-full max-w-md p-8 text-center">
-            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-              <svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-              </svg>
-            </div>
-            <h1 className="text-xl font-bold text-slate-900 mb-2">
-              {mode === 'verify' ? 'Email updated!' : 'Email change cancelled.'}
-            </h1>
-            <p className="text-sm text-slate-600 mb-6">
-              {mode === 'verify'
-                ? 'Your email address has been successfully updated.'
-                : 'The email change request has been cancelled. Your email remains unchanged.'}
-            </p>
-            <a href="/settings" className="inline-block rounded-md border border-slate-300 px-6 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors">
-              Back to Settings
-            </a>
-          </div>
-        </div>
-      );
-    }
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
-        <div className="bg-white rounded-xl shadow-md w-full max-w-md p-8 text-center">
-          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-            <svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </div>
-          <h1 className="text-xl font-bold text-slate-900 mb-2">Something went wrong</h1>
-          <p className="text-sm text-slate-600 mb-6">{error}</p>
-          <a href="/settings" className="inline-block rounded-md border border-slate-300 px-6 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors">
-            Back to Settings
-          </a>
-        </div>
-      </div>
-    );
-  }
-
-  // mode === 'request'
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setSubmitting(true);
-    setError(null);
-    try {
-      await requestEmailChange(newEmail.trim());
-      setSuccess(true);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to request email change');
-    } finally {
-      setSubmitting(false);
-    }
-  }
-
-  if (success) {
-    return (
-      <div className="max-w-lg mx-auto px-4 py-8 text-center">
-        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-          <svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-          </svg>
-        </div>
-        <h1 className="text-xl font-bold text-slate-900 mb-2">Check your email</h1>
-        <p className="text-sm text-slate-600">
-          We sent a confirmation link to <strong>{newEmail}</strong>. Click the link to confirm your new email address.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="max-w-lg mx-auto px-4 py-8">
-      <h1 className="text-2xl font-bold text-slate-900 mb-2">Change Email Address</h1>
-      <p className="text-sm text-slate-600 mb-6">
-        Enter your new email address. We will send a confirmation link to verify the change.
-      </p>
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <div>
-          <label className="block text-sm font-medium text-slate-700 mb-1">New Email Address</label>
-          <input
-            type="email"
-            value={newEmail}
-            onChange={(e) => setNewEmail(e.target.value)}
-            required
-            disabled={submitting}
-            placeholder="new@email.com"
-            className="w-full 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 disabled:bg-slate-50"
-          />
-        </div>
-        {error && <p className="text-sm text-red-600">{error}</p>}
-        <button
-          type="submit"
-          disabled={submitting || !newEmail.trim()}
-          className="rounded-md bg-blue-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 transition-colors"
-        >
-          {submitting ? 'Sending…' : 'Send Confirmation'}
-        </button>
-      </form>
-    </div>
-  );
-}

package/src/client/pages/InvitationAcceptPage.tsx

@@ -1,163 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { acceptInvitationByToken } from '../api.js';
-import type { OrgRole } from '../types.js';
-
-interface InvitationAcceptPageProps {
-  /** The magic-link token, typically extracted from the URL query string */
-  token: string;
-  /** Whether the current user is authenticated */
-  isAuthenticated: boolean;
-  loginUrl?: string;
-  signupUrl?: string;
-}
-
-type State =
-  | { status: 'loading' }
-  | { status: 'success'; orgId: number; role: OrgRole }
-  | { status: 'already_member'; message: string }
-  | { status: 'error'; message: string }
-  | { status: 'unauthenticated' };
-
-export function InvitationAcceptPage({
-  token,
-  isAuthenticated,
-  loginUrl = '/login',
-  signupUrl = '/signup',
-}: InvitationAcceptPageProps) {
-  const [state, setState] = useState<State>(
-    isAuthenticated ? { status: 'loading' } : { status: 'unauthenticated' }
-  );
-
-  useEffect(() => {
-    if (!isAuthenticated || !token) return;
-
-    acceptInvitationByToken(token)
-      .then(({ orgId, role }) => setState({ status: 'success', orgId, role }))
-      .catch((err: Error) => {
-        const msg = err.message ?? 'Something went wrong';
-        if (msg.includes('already') || msg.includes('member')) {
-          setState({ status: 'already_member', message: msg });
-        } else {
-          setState({ status: 'error', message: msg });
-        }
-      });
-  }, [token, isAuthenticated]);
-
-  if (state.status === 'unauthenticated') {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
-        <div className="bg-white rounded-xl shadow-md w-full max-w-md p-8 text-center">
-          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-blue-100">
-            <svg className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-            </svg>
-          </div>
-          <h1 className="text-xl font-bold text-slate-900 mb-2">You have been invited!</h1>
-          <p className="text-sm text-slate-600 mb-6">
-            Please log in or create an account to accept this invitation.
-          </p>
-          <div className="flex flex-col gap-3">
-            <a
-              href={`${loginUrl}?redirect_token=${encodeURIComponent(token)}`}
-              className="rounded-md bg-blue-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-blue-700 text-center transition-colors"
-            >
-              Log In
-            </a>
-            <a
-              href={`${signupUrl}?redirect_token=${encodeURIComponent(token)}`}
-              className="rounded-md border border-slate-300 px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 text-center transition-colors"
-            >
-              Create Account
-            </a>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (state.status === 'loading') {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-slate-50">
-        <div className="text-center">
-          <div className="mx-auto h-10 w-10 animate-spin rounded-full border-2 border-blue-500 border-t-transparent mb-4" />
-          <p className="text-sm text-slate-600">Accepting your invitation…</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (state.status === 'success') {
-    const roleLabels: Record<OrgRole, string> = {
-      owner: 'Owner',
-      admin: 'Admin',
-      member: 'Member',
-      viewer: 'Viewer',
-    };
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
-        <div className="bg-white rounded-xl shadow-md w-full max-w-md p-8 text-center">
-          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-            <svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-            </svg>
-          </div>
-          <h1 className="text-xl font-bold text-slate-900 mb-2">Welcome aboard!</h1>
-          <p className="text-sm text-slate-600 mb-6">
-            You have joined the organization as <strong>{roleLabels[state.role]}</strong>.
-          </p>
-          <a
-            href={`/orgs/${state.orgId}`}
-            className="inline-block rounded-md bg-blue-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-blue-700 transition-colors"
-          >
-            Go to Organization
-          </a>
-        </div>
-      </div>
-    );
-  }
-
-  if (state.status === 'already_member') {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
-        <div className="bg-white rounded-xl shadow-md w-full max-w-md p-8 text-center">
-          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-amber-100">
-            <svg className="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-          </div>
-          <h1 className="text-xl font-bold text-slate-900 mb-2">Already a member</h1>
-          <p className="text-sm text-slate-600 mb-6">{state.message}</p>
-          <a
-            href="/"
-            className="inline-block rounded-md border border-slate-300 px-6 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors"
-          >
-            Back to Home
-          </a>
-        </div>
-      </div>
-    );
-  }
-
-  // error state
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
-      <div className="bg-white rounded-xl shadow-md w-full max-w-md p-8 text-center">
-        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-          <svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </div>
-        <h1 className="text-xl font-bold text-slate-900 mb-2">Invitation failed</h1>
-        <p className="text-sm text-slate-600 mb-6">
-          {'message' in state ? state.message : 'This invitation link is invalid or has expired.'}
-        </p>
-        <a
-          href="/"
-          className="inline-block rounded-md border border-slate-300 px-6 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors"
-        >
-          Back to Home
-        </a>
-      </div>
-    </div>
-  );
-}

package/src/client/pages/InvitationCodePage.tsx

@@ -1,108 +0,0 @@
-import React, { useState } from 'react';
-import { acceptInvitationByCode } from '../api.js';
-import type { OrgRole } from '../types.js';
-
-interface InvitationCodePageProps {
-  prefillEmail?: string;
-}
-
-type State =
-  | { status: 'idle' }
-  | { status: 'submitting' }
-  | { status: 'success'; orgId: number; role: OrgRole }
-  | { status: 'error'; message: string };
-
-export function InvitationCodePage({ prefillEmail = '' }: InvitationCodePageProps) {
-  const [email, setEmail] = useState(prefillEmail);
-  const [code, setCode] = useState('');
-  const [state, setState] = useState<State>({ status: 'idle' });
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setState({ status: 'submitting' });
-    try {
-      const result = await acceptInvitationByCode(email.trim(), code.trim());
-      setState({ status: 'success', ...result });
-    } catch (err) {
-      setState({ status: 'error', message: err instanceof Error ? err.message : 'Invalid code' });
-    }
-  }
-
-  if (state.status === 'success') {
-    const roleLabels: Record<OrgRole, string> = {
-      owner: 'Owner', admin: 'Admin', member: 'Member', viewer: 'Viewer',
-    };
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
-        <div className="bg-white rounded-xl shadow-md w-full max-w-md p-8 text-center">
-          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-            <svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-            </svg>
-          </div>
-          <h1 className="text-xl font-bold text-slate-900 mb-2">You're in!</h1>
-          <p className="text-sm text-slate-600 mb-6">
-            You joined as <strong>{roleLabels[state.role]}</strong>.
-          </p>
-          <a
-            href={`/orgs/${state.orgId}`}
-            className="inline-block rounded-md bg-blue-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-blue-700 transition-colors"
-          >
-            Go to Organization
-          </a>
-        </div>
-      </div>
-    );
-  }
-
-  const submitting = state.status === 'submitting';
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
-      <div className="bg-white rounded-xl shadow-md w-full max-w-md p-8">
-        <h1 className="text-xl font-bold text-slate-900 mb-2">Enter Invitation Code</h1>
-        <p className="text-sm text-slate-600 mb-6">
-          Enter the email address your invitation was sent to and the 6-digit code you received.
-        </p>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1">Email Address</label>
-            <input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-              disabled={submitting}
-              placeholder="you@company.com"
-              className="w-full 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 disabled:bg-slate-50"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1">6-Digit Code</label>
-            <input
-              type="text"
-              value={code}
-              onChange={(e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
-              required
-              disabled={submitting}
-              placeholder="123456"
-              maxLength={6}
-              inputMode="numeric"
-              className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm font-mono tracking-widest text-center focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:bg-slate-50"
-            />
-          </div>
-          {state.status === 'error' && (
-            <p className="text-sm text-red-600">{state.message}</p>
-          )}
-          <button
-            type="submit"
-            disabled={submitting || code.length !== 6 || !email.trim()}
-            className="w-full rounded-md bg-blue-600 px-4 py-2.5 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 ? 'Verifying…' : 'Accept Invitation'}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}