@varshylinc/team-management 0.1.0 → 0.2.0

package/src/client/components/DangerZoneCard.tsx

@@ -1,103 +0,0 @@
-import React, { useState } from 'react';
-
-interface DangerZoneCardProps {
-  title: string;
-  description: string;
-  buttonLabel: string;
-  onConfirm: () => Promise<void> | void;
-  confirmPrompt?: string;
-}
-
-export function DangerZoneCard({
-  title,
-  description,
-  buttonLabel,
-  onConfirm,
-  confirmPrompt,
-}: DangerZoneCardProps) {
-  const [showModal, setShowModal] = useState(false);
-  const [confirmText, setConfirmText] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const isConfirmed = !confirmPrompt || confirmText === confirmPrompt;
-
-  async function handleConfirm() {
-    if (!isConfirmed) return;
-    setSubmitting(true);
-    setError(null);
-    try {
-      await onConfirm();
-      setShowModal(false);
-      setConfirmText('');
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Action failed');
-    } finally {
-      setSubmitting(false);
-    }
-  }
-
-  return (
-    <>
-      <div className="border border-red-200 rounded-lg p-5 bg-red-50">
-        <div className="flex flex-col sm:flex-row sm:items-center gap-4">
-          <div className="flex-1">
-            <h3 className="text-sm font-semibold text-red-800">{title}</h3>
-            <p className="mt-1 text-sm text-red-700">{description}</p>
-          </div>
-          <button
-            onClick={() => setShowModal(true)}
-            className="shrink-0 rounded-md border border-red-600 bg-white px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1 transition-colors"
-          >
-            {buttonLabel}
-          </button>
-        </div>
-      </div>
-
-      {showModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
-          <div className="bg-white rounded-xl shadow-2xl w-full max-w-md p-6">
-            <h2 className="text-lg font-semibold text-slate-900 mb-2">{title}</h2>
-            <p className="text-sm text-slate-600 mb-4">{description}</p>
-
-            {confirmPrompt && (
-              <div className="mb-4">
-                <p className="text-sm text-slate-700 mb-1">
-                  Type <strong className="font-mono">{confirmPrompt}</strong> to confirm:
-                </p>
-                <input
-                  type="text"
-                  value={confirmText}
-                  onChange={(e) => setConfirmText(e.target.value)}
-                  placeholder={confirmPrompt}
-                  className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-red-500 focus:outline-none focus:ring-1 focus:ring-red-500"
-                />
-              </div>
-            )}
-
-            {error && (
-              <p className="mb-3 text-sm text-red-600">{error}</p>
-            )}
-
-            <div className="flex gap-3 justify-end">
-              <button
-                onClick={() => { setShowModal(false); setConfirmText(''); setError(null); }}
-                disabled={submitting}
-                className="rounded-md border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50 transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleConfirm}
-                disabled={!isConfirmed || submitting}
-                className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-              >
-                {submitting ? 'Processing…' : buttonLabel}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}

package/src/client/components/InvitationCodeDisplay.tsx

@@ -1,48 +0,0 @@
-import React, { useState } from 'react';
-import { getInvitationCode } from '../api.js';
-
-interface InvitationCodeDisplayProps {
-  orgId: number;
-  invitationId: number;
-}
-
-export function InvitationCodeDisplay({ orgId, invitationId }: InvitationCodeDisplayProps) {
-  const [code, setCode] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleShowCode() {
-    if (code) return;
-    setLoading(true);
-    setError(null);
-    try {
-      const result = await getInvitationCode(orgId, invitationId);
-      setCode(result.code);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load code');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <div className="inline-flex items-center gap-2">
-      {code ? (
-        <span className="font-mono text-sm font-semibold tracking-widest text-slate-900 bg-slate-100 border border-slate-300 rounded px-3 py-1 select-all">
-          {code}
-        </span>
-      ) : (
-        <button
-          onClick={handleShowCode}
-          disabled={loading}
-          className="text-xs text-blue-600 hover:text-blue-800 underline disabled:opacity-50 transition-colors"
-        >
-          {loading ? 'Loading…' : 'Show Code'}
-        </button>
-      )}
-      {error && (
-        <span className="text-xs text-red-600">{error}</span>
-      )}
-    </div>
-  );
-}

package/src/client/components/InviteForm.tsx

@@ -1,77 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

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