feat: admin panel and invite acceptance UI

src/App.tsx

@@ -9,6 +9,8 @@ import ClientDetailPage from '@/pages/ClientDetailPage';
 import EventsPage from '@/pages/EventsPage';
 import EmailsPage from '@/pages/EmailsPage';
 import SettingsPage from '@/pages/SettingsPage';
+import AdminPage from '@/pages/AdminPage';
+import InvitePage from '@/pages/InvitePage';
 import { PageLoader } from '@/components/LoadingSpinner';
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
@@ -31,6 +33,7 @@ export default function App() {
         <Route path="/login" element={
           isAuthenticated ? <Navigate to="/" replace /> : <LoginPage />
         } />
+        <Route path="/invite/:token" element={<InvitePage />} />
         <Route path="/" element={
           <ProtectedRoute>
             <Layout />
@@ -42,6 +45,7 @@ export default function App() {
           <Route path="events" element={<EventsPage />} />
           <Route path="emails" element={<EmailsPage />} />
           <Route path="settings" element={<SettingsPage />} />
+          <Route path="admin" element={<AdminPage />} />
         </Route>
       </Routes>
     </BrowserRouter>

src/components/Layout.tsx

@@ -3,11 +3,11 @@ import { Link, useLocation, Outlet } from 'react-router-dom';
 import { useAuthStore } from '@/stores/auth';
 import { cn } from '@/lib/utils';
 import {
-  LayoutDashboard, Users, Calendar, Mail, Settings,
+  LayoutDashboard, Users, Calendar, Mail, Settings, Shield,
   LogOut, Menu, X, ChevronLeft, Network,
 } from 'lucide-react';
 
-const navItems = [
+const baseNavItems = [
   { path: '/', label: 'Dashboard', icon: LayoutDashboard },
   { path: '/clients', label: 'Clients', icon: Users },
   { path: '/events', label: 'Events', icon: Calendar },
@@ -15,11 +15,14 @@ const navItems = [
   { path: '/settings', label: 'Settings', icon: Settings },
 ];
 
+const adminNavItem = { path: '/admin', label: 'Admin', icon: Shield };
+
 export default function Layout() {
   const [collapsed, setCollapsed] = useState(false);
   const [mobileOpen, setMobileOpen] = useState(false);
   const location = useLocation();
   const { user, logout } = useAuthStore();
+  const navItems = user?.role === 'admin' ? [...baseNavItems, adminNavItem] : baseNavItems;
 
   const handleLogout = async () => {
     await logout();

src/lib/api.ts

@@ -1,4 +1,4 @@
-import type { Profile, Client, ClientCreate, Event, EventCreate, Email, EmailGenerate, User } from '@/types';
+import type { Profile, Client, ClientCreate, Event, EventCreate, Email, EmailGenerate, User, Invite } from '@/types';
 
 const API_BASE = import.meta.env.PROD
   ? 'https://api.thenetwork.donovankelly.xyz/api'
@@ -223,6 +223,60 @@ class ApiClient {
   async deleteEmail(id: string): Promise<void> {
     await this.fetch(`/emails/${id}`, { method: 'DELETE' });
   }
+
+  // Admin
+  async getUsers(): Promise<User[]> {
+    return this.fetch('/admin/users');
+  }
+
+  async updateUserRole(userId: string, role: string): Promise<void> {
+    await this.fetch(`/admin/users/${userId}/role`, {
+      method: 'PUT',
+      body: JSON.stringify({ role }),
+    });
+  }
+
+  async deleteUser(userId: string): Promise<void> {
+    await this.fetch(`/admin/users/${userId}`, { method: 'DELETE' });
+  }
+
+  async createInvite(data: { email: string; name: string; role?: string }): Promise<Invite & { setupUrl: string }> {
+    return this.fetch('/admin/invites', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async getInvites(): Promise<Invite[]> {
+    return this.fetch('/admin/invites');
+  }
+
+  async deleteInvite(id: string): Promise<void> {
+    await this.fetch(`/admin/invites/${id}`, { method: 'DELETE' });
+  }
+
+  // Invite acceptance (public - no auth)
+  async validateInvite(token: string): Promise<{ id: string; email: string; name: string; role: string; expiresAt: string }> {
+    const response = await fetch(`${AUTH_BASE}/auth/invite/${token}`);
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: 'Invalid invite' }));
+      throw new Error(error.error || 'Invalid invite');
+    }
+    return response.json();
+  }
+
+  async acceptInvite(token: string, password: string, name?: string): Promise<{ success: boolean; token?: string }> {
+    const response = await fetch(`${AUTH_BASE}/auth/invite/${token}/accept`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ password, name }),
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: 'Failed to accept invite' }));
+      throw new Error(error.error || 'Failed to accept invite');
+    }
+    return response.json();
+  }
 }
 
 export const api = new ApiClient();

src/pages/AdminPage.tsx

@@ -0,0 +1,362 @@
+import { useState, useEffect } from 'react';
+import { Users, Mail, Plus, Trash2, Copy, Check } from 'lucide-react';
+import { api } from '@/lib/api';
+import { useAuthStore } from '@/stores/auth';
+import type { User, Invite } from '@/types';
+import { cn } from '@/lib/utils';
+
+export default function AdminPage() {
+  const { user: currentUser } = useAuthStore();
+  const [users, setUsers] = useState<User[]>([]);
+  const [invites, setInvites] = useState<Invite[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState<'users' | 'invites'>('users');
+
+  // Invite form
+  const [showInviteForm, setShowInviteForm] = useState(false);
+  const [inviteEmail, setInviteEmail] = useState('');
+  const [inviteName, setInviteName] = useState('');
+  const [inviteRole, setInviteRole] = useState<'admin' | 'user'>('user');
+  const [inviteError, setInviteError] = useState('');
+  const [inviteUrl, setInviteUrl] = useState('');
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const loadData = async () => {
+    setIsLoading(true);
+    try {
+      const [usersData, invitesData] = await Promise.all([
+        api.getUsers(),
+        api.getInvites(),
+      ]);
+      setUsers(usersData);
+      setInvites(invitesData);
+    } catch (error) {
+      console.error('Failed to load admin data:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCreateInvite = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setInviteError('');
+
+    try {
+      const result = await api.createInvite({ email: inviteEmail, name: inviteName, role: inviteRole });
+      setInviteUrl(result.setupUrl);
+      setInvites([result, ...invites]);
+    } catch (error) {
+      setInviteError(error instanceof Error ? error.message : 'Failed to create invite');
+    }
+  };
+
+  const handleCopyUrl = () => {
+    navigator.clipboard.writeText(inviteUrl);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleChangeRole = async (userId: string, role: 'admin' | 'user') => {
+    try {
+      await api.updateUserRole(userId, role);
+      setUsers(users.map(u => u.id === userId ? { ...u, role } : u));
+    } catch (error) {
+      console.error('Failed to update role:', error);
+    }
+  };
+
+  const handleDeleteUser = async (userId: string) => {
+    if (!confirm('Are you sure you want to delete this user? All their data will be lost.')) return;
+    try {
+      await api.deleteUser(userId);
+      setUsers(users.filter(u => u.id !== userId));
+    } catch (error) {
+      console.error('Failed to delete user:', error);
+    }
+  };
+
+  const handleDeleteInvite = async (inviteId: string) => {
+    try {
+      await api.deleteInvite(inviteId);
+      setInvites(invites.filter(i => i.id !== inviteId));
+    } catch (error) {
+      console.error('Failed to delete invite:', error);
+    }
+  };
+
+  const resetInviteForm = () => {
+    setShowInviteForm(false);
+    setInviteEmail('');
+    setInviteName('');
+    setInviteRole('user');
+    setInviteError('');
+    setInviteUrl('');
+  };
+
+  if (currentUser?.role !== 'admin') {
+    return (
+      <div className="text-center py-12">
+        <p className="text-red-500 font-medium">Access denied. Admin only.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <h1 className="text-2xl font-bold text-slate-900 mb-6">Admin</h1>
+
+      {/* Tabs */}
+      <div className="flex gap-4 border-b border-slate-200 mb-6">
+        <button
+          onClick={() => setActiveTab('users')}
+          className={cn(
+            'pb-3 px-1 text-sm font-medium border-b-2 transition-colors',
+            activeTab === 'users'
+              ? 'border-blue-600 text-blue-600'
+              : 'border-transparent text-slate-500 hover:text-slate-700'
+          )}
+        >
+          <Users className="w-4 h-4 inline mr-2" />
+          Users ({users.length})
+        </button>
+        <button
+          onClick={() => setActiveTab('invites')}
+          className={cn(
+            'pb-3 px-1 text-sm font-medium border-b-2 transition-colors',
+            activeTab === 'invites'
+              ? 'border-blue-600 text-blue-600'
+              : 'border-transparent text-slate-500 hover:text-slate-700'
+          )}
+        >
+          <Mail className="w-4 h-4 inline mr-2" />
+          Invites ({invites.filter(i => i.status === 'pending').length} pending)
+        </button>
+      </div>
+
+      {isLoading ? (
+        <div className="text-center py-12 text-slate-500">Loading...</div>
+      ) : activeTab === 'users' ? (
+        <div className="bg-white rounded-xl border border-slate-200 overflow-x-auto">
+          <table className="w-full min-w-[600px]">
+            <thead>
+              <tr className="border-b border-slate-200 text-left text-sm text-slate-500">
+                <th className="px-4 py-3 font-medium">Name</th>
+                <th className="px-4 py-3 font-medium">Email</th>
+                <th className="px-4 py-3 font-medium">Role</th>
+                <th className="px-4 py-3 font-medium">Joined</th>
+                <th className="px-4 py-3"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.map((user) => (
+                <tr key={user.id} className="border-b border-slate-100 last:border-0">
+                  <td className="px-4 py-3 text-sm font-medium text-slate-900">{user.name}</td>
+                  <td className="px-4 py-3 text-sm text-slate-600">{user.email}</td>
+                  <td className="px-4 py-3">
+                    {user.id === currentUser?.id ? (
+                      <span className="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-700">
+                        {user.role}
+                      </span>
+                    ) : (
+                      <select
+                        value={user.role || 'user'}
+                        onChange={(e) => handleChangeRole(user.id, e.target.value as 'admin' | 'user')}
+                        className={cn(
+                          'px-2 py-1 text-xs rounded-full border-none cursor-pointer appearance-none',
+                          user.role === 'admin' ? 'bg-purple-100 text-purple-700' : 'bg-slate-100 text-slate-700'
+                        )}
+                      >
+                        <option value="user">user</option>
+                        <option value="admin">admin</option>
+                      </select>
+                    )}
+                  </td>
+                  <td className="px-4 py-3 text-sm text-slate-500">
+                    {user.createdAt ? new Date(user.createdAt).toLocaleDateString() : '—'}
+                  </td>
+                  <td className="px-4 py-3">
+                    {user.id !== currentUser?.id && (
+                      <button
+                        onClick={() => handleDeleteUser(user.id)}
+                        className="p-1 text-slate-400 hover:text-red-500 transition-colors"
+                        title="Delete user"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <div>
+          {/* Create invite button/form */}
+          {!showInviteForm ? (
+            <button
+              onClick={() => setShowInviteForm(true)}
+              className="mb-4 inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
+            >
+              <Plus className="w-4 h-4" />
+              Invite User
+            </button>
+          ) : (
+            <div className="mb-6 p-4 bg-slate-50 rounded-xl border border-slate-200">
+              <h3 className="font-medium text-slate-900 mb-4">Invite New User</h3>
+
+              {inviteUrl ? (
+                <div>
+                  <p className="text-sm text-green-600 mb-2">✓ Invite created! Share this link:</p>
+                  <div className="flex gap-2">
+                    <input
+                      type="text"
+                      value={inviteUrl}
+                      readOnly
+                      className="flex-1 px-3 py-2 border border-slate-300 rounded-lg text-sm bg-white"
+                    />
+                    <button
+                      onClick={handleCopyUrl}
+                      className="px-3 py-2 border border-slate-300 rounded-lg hover:bg-slate-100 transition-colors"
+                    >
+                      {copied ? <Check className="w-4 h-4 text-green-600" /> : <Copy className="w-4 h-4 text-slate-600" />}
+                    </button>
+                  </div>
+                  <button
+                    onClick={resetInviteForm}
+                    className="mt-3 text-sm text-slate-500 hover:text-slate-700"
+                  >
+                    Create another invite
+                  </button>
+                </div>
+              ) : (
+                <form onSubmit={handleCreateInvite} className="space-y-4">
+                  {inviteError && (
+                    <p className="text-sm text-red-500">{inviteError}</p>
+                  )}
+                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                    <div>
+                      <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
+                      <input
+                        type="text"
+                        value={inviteName}
+                        onChange={(e) => setInviteName(e.target.value)}
+                        required
+                        className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        placeholder="John Doe"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-slate-700 mb-1">Email</label>
+                      <input
+                        type="email"
+                        value={inviteEmail}
+                        onChange={(e) => setInviteEmail(e.target.value)}
+                        required
+                        className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        placeholder="john@example.com"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-slate-700 mb-1">Role</label>
+                      <select
+                        value={inviteRole}
+                        onChange={(e) => setInviteRole(e.target.value as 'admin' | 'user')}
+                        className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      >
+                        <option value="user">User</option>
+                        <option value="admin">Admin</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div className="flex gap-2">
+                    <button
+                      type="submit"
+                      className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
+                    >
+                      Send Invite
+                    </button>
+                    <button
+                      type="button"
+                      onClick={resetInviteForm}
+                      className="px-4 py-2 border border-slate-300 text-sm font-medium rounded-lg hover:bg-slate-100 transition-colors"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </form>
+              )}
+            </div>
+          )}
+
+          {/* Invites list */}
+          <div className="bg-white rounded-xl border border-slate-200 overflow-x-auto">
+            <table className="w-full min-w-[600px]">
+              <thead>
+                <tr className="border-b border-slate-200 text-left text-sm text-slate-500">
+                  <th className="px-4 py-3 font-medium">Name</th>
+                  <th className="px-4 py-3 font-medium">Email</th>
+                  <th className="px-4 py-3 font-medium">Role</th>
+                  <th className="px-4 py-3 font-medium">Status</th>
+                  <th className="px-4 py-3 font-medium">Expires</th>
+                  <th className="px-4 py-3"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {invites.length === 0 ? (
+                  <tr>
+                    <td colSpan={6} className="px-4 py-8 text-center text-slate-500">
+                      No invites yet
+                    </td>
+                  </tr>
+                ) : (
+                  invites.map((invite) => (
+                    <tr key={invite.id} className="border-b border-slate-100 last:border-0">
+                      <td className="px-4 py-3 text-sm font-medium text-slate-900">{invite.name}</td>
+                      <td className="px-4 py-3 text-sm text-slate-600">{invite.email}</td>
+                      <td className="px-4 py-3">
+                        <span className={cn(
+                          'px-2 py-1 text-xs rounded-full',
+                          invite.role === 'admin' ? 'bg-purple-100 text-purple-700' : 'bg-slate-100 text-slate-700'
+                        )}>
+                          {invite.role}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3">
+                        <span className={cn(
+                          'px-2 py-1 text-xs rounded-full',
+                          invite.status === 'accepted' ? 'bg-green-100 text-green-700' :
+                          invite.status === 'expired' ? 'bg-red-100 text-red-700' :
+                          'bg-yellow-100 text-yellow-700'
+                        )}>
+                          {invite.status}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3 text-sm text-slate-500">
+                        {new Date(invite.expiresAt).toLocaleDateString()}
+                      </td>
+                      <td className="px-4 py-3">
+                        {invite.status === 'pending' && (
+                          <button
+                            onClick={() => handleDeleteInvite(invite.id)}
+                            className="p-1 text-slate-400 hover:text-red-500 transition-colors"
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </button>
+                        )}
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/InvitePage.tsx

@@ -0,0 +1,180 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Network, Eye, EyeOff } from 'lucide-react';
+import { api } from '@/lib/api';
+import { useAuthStore } from '@/stores/auth';
+import LoadingSpinner from '@/components/LoadingSpinner';
+
+export default function InvitePage() {
+  const { token } = useParams<{ token: string }>();
+  const navigate = useNavigate();
+  const { checkSession } = useAuthStore();
+
+  const [invite, setInvite] = useState<{ email: string; name: string; role: string } | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [name, setName] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState('');
+
+  useEffect(() => {
+    if (!token) return;
+    (async () => {
+      try {
+        const data = await api.validateInvite(token);
+        setInvite(data);
+        setName(data.name);
+      } catch (err: any) {
+        setError(err.message || 'Invalid or expired invite');
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [token]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitError('');
+
+    if (password.length < 8) {
+      setSubmitError('Password must be at least 8 characters');
+      return;
+    }
+    if (password !== confirmPassword) {
+      setSubmitError('Passwords do not match');
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      const result = await api.acceptInvite(token!, password, name);
+      // If we got a token, store it
+      if (result.token) {
+        api.setToken(result.token);
+      }
+      // Now log in with the credentials
+      try {
+        await api.login(invite!.email, password);
+      } catch {
+        // Login might fail if token auth already worked
+      }
+      await checkSession();
+      navigate('/');
+    } catch (err: any) {
+      setSubmitError(err.message || 'Failed to create account');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-slate-50">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-slate-50 p-4">
+        <div className="w-full max-w-md text-center">
+          <div className="inline-flex items-center justify-center w-14 h-14 bg-red-100 rounded-2xl mb-4">
+            <Network className="w-8 h-8 text-red-500" />
+          </div>
+          <h1 className="text-2xl font-bold text-slate-900 mb-2">Invalid Invite</h1>
+          <p className="text-slate-500">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-slate-50 flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        {/* Logo */}
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-14 h-14 bg-blue-600 rounded-2xl mb-4">
+            <Network className="w-8 h-8 text-white" />
+          </div>
+          <h1 className="text-2xl font-bold text-slate-900">Welcome to NetworkCRM</h1>
+          <p className="text-slate-500 mt-1">You've been invited to join as <span className="font-medium text-slate-700">{invite?.role}</span></p>
+        </div>
+
+        {/* Card */}
+        <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
+          <div className="mb-6 p-3 bg-blue-50 rounded-lg">
+            <p className="text-sm text-blue-700">
+              Setting up account for <strong>{invite?.email}</strong>
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-5">
+            {submitError && (
+              <div className="p-3 bg-red-50 border border-red-200 text-red-700 text-sm rounded-lg">
+                {submitError}
+              </div>
+            )}
+
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1.5">Name</label>
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+                className="w-full px-3.5 py-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1.5">Password</label>
+              <div className="relative">
+                <input
+                  type={showPassword ? 'text' : 'password'}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                  minLength={8}
+                  className="w-full px-3.5 py-2.5 pr-10 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
+                  placeholder="Min 8 characters"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
+                >
+                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1.5">Confirm Password</label>
+              <input
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                required
+                className="w-full px-3.5 py-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
+                placeholder="Re-enter password"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={submitting}
+              className="w-full py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
+            >
+              {submitting ? <LoadingSpinner size="sm" className="text-white" /> : null}
+              {submitting ? 'Creating account...' : 'Create Account'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

src/types/index.ts

@@ -4,6 +4,7 @@ export interface User {
   email: string;
   image?: string;
   role?: string;
+  createdAt?: string;
 }
 
 export interface Profile {
@@ -110,3 +111,15 @@ export interface EmailGenerate {
   purpose: string;
   provider?: 'anthropic' | 'openai';
 }
+
+export interface Invite {
+  id: string;
+  email: string;
+  name: string;
+  role: string;
+  token: string;
+  invitedBy?: string;
+  status: 'pending' | 'accepted' | 'expired';
+  expiresAt: string;
+  createdAt: string;
+}