@auxiora/dashboard 1.0.0 → 1.3.1

package/ui/src/pages/SettingsNotifications.tsx

@@ -1,241 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useApi } from '../hooks/useApi.js';
-import { api } from '../api.js';
-
-interface NotificationPreferences {
-  dnd: {
-    enabled: boolean;
-    schedule: { start: string; end: string };
-  };
-  urgencyKeywords: string[];
-  sources: {
-    email: boolean;
-    calendar: boolean;
-    github: boolean;
-  };
-  soundEnabled: boolean;
-}
-
-interface Notification {
-  id: string;
-  title: string;
-  body: string;
-  source: string;
-  timestamp: number;
-}
-
-const DEFAULT_PREFS: NotificationPreferences = {
-  dnd: {
-    enabled: false,
-    schedule: { start: '22:00', end: '08:00' },
-  },
-  urgencyKeywords: [],
-  sources: {
-    email: true,
-    calendar: true,
-    github: true,
-  },
-  soundEnabled: true,
-};
-
-export function SettingsNotifications() {
-  const { data: prefsData, loading: fetchingPrefs } = useApi(() => api.getNotificationPreferences(), []);
-  const { data: notifsData, loading: fetchingNotifs } = useApi(() => api.getNotifications(), []);
-  const [prefs, setPrefs] = useState<NotificationPreferences>(DEFAULT_PREFS);
-  const [notifications, setNotifications] = useState<Notification[]>([]);
-  const [saving, setSaving] = useState(false);
-  const [success, setSuccess] = useState('');
-  const [error, setError] = useState('');
-  const [keywordsText, setKeywordsText] = useState('');
-
-  useEffect(() => {
-    if (prefsData?.data && Object.keys(prefsData.data).length > 0) {
-      const d = prefsData.data;
-      const merged: NotificationPreferences = {
-        dnd: {
-          enabled: d.dnd?.enabled ?? DEFAULT_PREFS.dnd.enabled,
-          schedule: {
-            start: d.dnd?.schedule?.start ?? DEFAULT_PREFS.dnd.schedule.start,
-            end: d.dnd?.schedule?.end ?? DEFAULT_PREFS.dnd.schedule.end,
-          },
-        },
-        urgencyKeywords: d.urgencyKeywords ?? DEFAULT_PREFS.urgencyKeywords,
-        sources: {
-          email: d.sources?.email ?? DEFAULT_PREFS.sources.email,
-          calendar: d.sources?.calendar ?? DEFAULT_PREFS.sources.calendar,
-          github: d.sources?.github ?? DEFAULT_PREFS.sources.github,
-        },
-        soundEnabled: d.soundEnabled ?? DEFAULT_PREFS.soundEnabled,
-      };
-      setPrefs(merged);
-      setKeywordsText((merged.urgencyKeywords || []).join(', '));
-    }
-  }, [prefsData]);
-
-  useEffect(() => {
-    if (notifsData?.data) {
-      setNotifications(notifsData.data);
-    }
-  }, [notifsData]);
-
-  const handleSave = async () => {
-    setSaving(true);
-    setError('');
-    setSuccess('');
-    try {
-      const keywords = keywordsText
-        .split(',')
-        .map(k => k.trim())
-        .filter(Boolean);
-      await api.updateNotificationPreferences({ ...prefs, urgencyKeywords: keywords });
-      setSuccess('Notification settings saved successfully');
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : 'Failed to save settings');
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handleDismiss = async (id: string) => {
-    try {
-      await api.dismissNotification(id);
-      setNotifications(prev => prev.filter(n => n.id !== id));
-    } catch {
-      // ignore
-    }
-  };
-
-  if (fetchingPrefs || fetchingNotifs) return null;
-
-  return (
-    <div className="page">
-      <h2>Notification Settings</h2>
-      <div className="settings-form">
-        <div className="settings-section">
-          <h3>Do Not Disturb</h3>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '1rem' }}>
-            <div
-              className={`toggle${prefs.dnd.enabled ? ' active' : ''}`}
-              onClick={() => setPrefs(prev => ({
-                ...prev,
-                dnd: { ...prev.dnd, enabled: !prev.dnd.enabled },
-              }))}
-            />
-            <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
-              {prefs.dnd.enabled ? 'Enabled' : 'Disabled'}
-            </span>
-          </div>
-          {prefs.dnd.enabled && (
-            <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', marginBottom: '1rem' }}>
-              <div>
-                <label>Start</label>
-                <input
-                  type="time"
-                  value={prefs.dnd.schedule.start}
-                  onChange={(e) => setPrefs(prev => ({
-                    ...prev,
-                    dnd: { ...prev.dnd, schedule: { ...prev.dnd.schedule, start: e.target.value } },
-                  }))}
-                />
-              </div>
-              <div>
-                <label>End</label>
-                <input
-                  type="time"
-                  value={prefs.dnd.schedule.end}
-                  onChange={(e) => setPrefs(prev => ({
-                    ...prev,
-                    dnd: { ...prev.dnd, schedule: { ...prev.dnd.schedule, end: e.target.value } },
-                  }))}
-                />
-              </div>
-            </div>
-          )}
-        </div>
-
-        <div className="settings-section">
-          <h3>Urgency Keywords</h3>
-          <label>Comma-separated keywords that mark a notification as urgent</label>
-          <textarea
-            rows={3}
-            value={keywordsText}
-            onChange={(e) => setKeywordsText(e.target.value)}
-            placeholder="urgent, critical, deadline, asap"
-            style={{ width: '100%', resize: 'vertical' }}
-          />
-        </div>
-
-        <div className="settings-section">
-          <h3>Sources</h3>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginBottom: '1rem' }}>
-            {(['email', 'calendar', 'github'] as const).map(source => (
-              <label key={source} style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', cursor: 'pointer', fontSize: '0.85rem' }}>
-                <input
-                  type="checkbox"
-                  checked={prefs.sources[source]}
-                  onChange={() => setPrefs(prev => ({
-                    ...prev,
-                    sources: { ...prev.sources, [source]: !prev.sources[source] },
-                  }))}
-                  style={{ width: 'auto', marginBottom: 0 }}
-                />
-                {source.charAt(0).toUpperCase() + source.slice(1)}
-              </label>
-            ))}
-          </div>
-        </div>
-
-        <div className="settings-section">
-          <h3>Sound</h3>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '1rem' }}>
-            <div
-              className={`toggle${prefs.soundEnabled ? ' active' : ''}`}
-              onClick={() => setPrefs(prev => ({ ...prev, soundEnabled: !prev.soundEnabled }))}
-            />
-            <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
-              {prefs.soundEnabled ? 'Enabled' : 'Disabled'}
-            </span>
-          </div>
-        </div>
-
-        <button className="settings-btn" onClick={handleSave} disabled={saving}>
-          {saving ? 'Saving...' : 'Save Settings'}
-        </button>
-        {success && <div className="settings-success">{success}</div>}
-        {error && <div className="error">{error}</div>}
-
-        {notifications.length > 0 && (
-          <div className="settings-section" style={{ marginTop: '2rem' }}>
-            <h3>Recent Notifications</h3>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
-              {notifications.map(n => (
-                <div key={n.id} style={{
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                  padding: '0.75rem',
-                  background: 'var(--bg-secondary, #1a1a2e)',
-                  borderRadius: '6px',
-                }}>
-                  <div>
-                    <div style={{ fontWeight: 500 }}>{n.title}</div>
-                    <div style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>
-                      {n.source} &middot; {new Date(n.timestamp).toLocaleString()}
-                    </div>
-                  </div>
-                  <button
-                    className="settings-btn"
-                    style={{ padding: '0.25rem 0.75rem', fontSize: '0.8rem' }}
-                    onClick={() => handleDismiss(n.id)}
-                  >
-                    Dismiss
-                  </button>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/ui/src/pages/SetupAppearance.tsx

@@ -1,45 +0,0 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { SetupProgress } from '../components/SetupProgress';
-import { ThemeSelector } from '../components/ThemeSelector';
-import { useTheme } from '../contexts/ThemeContext';
-import { api } from '../api';
-
-export function SetupAppearance() {
-  const { theme } = useTheme();
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-  const navigate = useNavigate();
-
-  const handleContinue = async () => {
-    setLoading(true);
-    setError('');
-    try {
-      await api.updateAppearance(theme);
-      navigate('/setup/provider');
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : 'Failed to save appearance');
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="setup-page">
-      <SetupProgress currentStep={5} />
-      <div className="setup-card" style={{ maxWidth: 720 }}>
-        <h1>Appearance</h1>
-        <p className="subtitle">Choose a visual theme for Mission Control. You can change this later in settings.</p>
-        <ThemeSelector />
-        {error && <p className="error">{error}</p>}
-        <button
-          className="btn-primary"
-          onClick={handleContinue}
-          disabled={loading}
-          style={{ marginTop: '1.5rem', width: '100%' }}
-        >
-          {loading ? 'Saving...' : 'Continue'}
-        </button>
-      </div>
-    </div>
-  );
-}

package/ui/src/pages/SetupChannels.tsx

@@ -1,143 +0,0 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { api } from '../api';
-import { SetupProgress } from '../components/SetupProgress';
-
-interface ChannelDef {
-  type: string;
-  name: string;
-  description: string;
-  fields: Array<{ key: string; label: string; type: string }>;
-}
-
-const CHANNELS: ChannelDef[] = [
-  { type: 'webchat', name: 'Webchat', description: 'Built-in, no setup needed', fields: [] },
-  { type: 'discord', name: 'Discord', description: 'Connect a Discord bot', fields: [
-    { key: 'botToken', label: 'Bot Token', type: 'password' },
-  ]},
-  { type: 'telegram', name: 'Telegram', description: 'Connect a Telegram bot', fields: [
-    { key: 'botToken', label: 'Bot Token', type: 'password' },
-  ]},
-  { type: 'slack', name: 'Slack', description: 'Connect to a Slack workspace', fields: [
-    { key: 'botToken', label: 'Bot Token', type: 'password' },
-    { key: 'appToken', label: 'App Token', type: 'password' },
-  ]},
-  { type: 'matrix', name: 'Matrix', description: 'Connect to a Matrix homeserver', fields: [
-    { key: 'homeserverUrl', label: 'Homeserver URL', type: 'text' },
-    { key: 'userId', label: 'User ID', type: 'text' },
-    { key: 'accessToken', label: 'Access Token', type: 'password' },
-  ]},
-  { type: 'signal', name: 'Signal', description: 'Connect via Signal CLI', fields: [
-    { key: 'cliEndpoint', label: 'CLI Endpoint', type: 'text' },
-    { key: 'phoneNumber', label: 'Phone Number', type: 'text' },
-  ]},
-  { type: 'teams', name: 'Teams', description: 'Connect to Microsoft Teams', fields: [
-    { key: 'appId', label: 'App ID', type: 'text' },
-    { key: 'appPassword', label: 'App Password', type: 'password' },
-  ]},
-  { type: 'whatsapp', name: 'WhatsApp', description: 'Connect via WhatsApp Business API', fields: [
-    { key: 'phoneNumberId', label: 'Phone Number ID', type: 'text' },
-    { key: 'accessToken', label: 'Access Token', type: 'password' },
-    { key: 'verifyToken', label: 'Verify Token', type: 'text' },
-  ]},
-  { type: 'twilio', name: 'Twilio', description: 'Connect via Twilio SMS', fields: [
-    { key: 'accountSid', label: 'Account SID', type: 'text' },
-    { key: 'authToken', label: 'Auth Token', type: 'password' },
-    { key: 'phoneNumber', label: 'Phone Number', type: 'text' },
-  ]},
-  { type: 'email', name: 'Email', description: 'Connect via IMAP/SMTP', fields: [
-    { key: 'imapHost', label: 'IMAP Host', type: 'text' },
-    { key: 'imapPort', label: 'IMAP Port', type: 'text' },
-    { key: 'smtpHost', label: 'SMTP Host', type: 'text' },
-    { key: 'smtpPort', label: 'SMTP Port', type: 'text' },
-    { key: 'email', label: 'Email', type: 'text' },
-    { key: 'password', label: 'Password', type: 'password' },
-  ]},
-];
-
-export function SetupChannels() {
-  const [enabled, setEnabled] = useState<Record<string, boolean>>({ webchat: true });
-  const [credentials, setCredentials] = useState<Record<string, Record<string, string>>>({});
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-  const navigate = useNavigate();
-
-  const toggleChannel = (type: string) => {
-    if (type === 'webchat') return;
-    setEnabled((prev) => ({ ...prev, [type]: !prev[type] }));
-  };
-
-  const setField = (type: string, key: string, value: string) => {
-    setCredentials((prev) => ({
-      ...prev,
-      [type]: { ...prev[type], [key]: value },
-    }));
-  };
-
-  const handleSubmit = async () => {
-    setLoading(true);
-    setError('');
-    try {
-      const channels = CHANNELS
-        .filter((ch) => enabled[ch.type])
-        .map((ch) => ({
-          type: ch.type,
-          enabled: true,
-          credentials: credentials[ch.type],
-        }));
-      await api.setupChannels(channels);
-      navigate('/setup/connections');
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : 'Failed to save channels');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="setup-page">
-      <SetupProgress currentStep={7} />
-      <div className="setup-card" style={{ maxWidth: 720 }}>
-        <h1>Channels</h1>
-        <p className="subtitle">Enable the messaging channels you want to connect.</p>
-        <div className="channel-grid">
-          {CHANNELS.map((ch) => (
-            <div key={ch.type} className="channel-card">
-              <div className="channel-card-header">
-                <h3>{ch.name}</h3>
-                {ch.type === 'webchat' ? (
-                  <span style={{ fontSize: '0.75rem', color: 'var(--success)' }}>Always on</span>
-                ) : (
-                  <div
-                    className={`toggle${enabled[ch.type] ? ' active' : ''}`}
-                    onClick={() => toggleChannel(ch.type)}
-                  />
-                )}
-              </div>
-              <p style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', marginBottom: '0.5rem' }}>{ch.description}</p>
-              {enabled[ch.type] && ch.fields.length > 0 && (
-                <div className="channel-card-fields">
-                  {ch.fields.map((f) => (
-                    <div key={f.key}>
-                      <label>{f.label}</label>
-                      <input
-                        type={f.type}
-                        value={credentials[ch.type]?.[f.key] || ''}
-                        onChange={(e) => setField(ch.type, f.key, e.target.value)}
-                      />
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-        <button className="setup-btn-primary" onClick={handleSubmit} disabled={loading}>
-          {loading ? 'Saving...' : 'Save & Continue'}
-        </button>
-        {error && <p className="error">{error}</p>}
-        <span className="skip-link" onClick={() => navigate('/setup/connections')}>Skip for now</span>
-      </div>
-    </div>
-  );
-}

package/ui/src/pages/SetupComplete.tsx

@@ -1,31 +0,0 @@
-import { useState, useEffect } from 'react';
-import { api } from '../api';
-
-export function SetupComplete() {
-  const [error, setError] = useState('');
-
-  useEffect(() => {
-    api.completeSetup().catch((err: unknown) => {
-      setError(err instanceof Error ? err.message : 'Failed to finalize setup');
-    });
-  }, []);
-
-  return (
-    <div className="setup-page">
-      <div className="setup-card" style={{ textAlign: 'center' }}>
-        <div className="setup-complete-check">{'\u2713'}</div>
-        <h1>Setup Complete!</h1>
-        <p className="subtitle">Your assistant is ready to go.</p>
-        {error && <p className="error">{error}</p>}
-        <div className="setup-complete-buttons">
-          <button className="setup-btn-primary" onClick={() => { window.location.href = '/'; }}>
-            Open Chat
-          </button>
-          <button className="setup-btn-secondary" onClick={() => { window.location.href = '/dashboard'; }}>
-            Go to Mission Control
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/ui/src/pages/SetupConnections.tsx

@@ -1,80 +0,0 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { api } from '../api';
-import { SetupProgress } from '../components/SetupProgress';
-
-export function SetupConnections() {
-  const [clientId, setClientId] = useState('');
-  const [clientSecret, setClientSecret] = useState('');
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-  const navigate = useNavigate();
-
-  const handleConnect = async () => {
-    if (!clientId || !clientSecret) {
-      setError('Both Client ID and Client Secret are required');
-      return;
-    }
-    setLoading(true);
-    setError('');
-    try {
-      const result = await api.saveConnectorCredentials('google-workspace', clientId, clientSecret);
-      if (result.oauthUrl) {
-        window.location.href = result.oauthUrl;
-      } else {
-        navigate('/setup/complete');
-      }
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : 'Failed to save credentials');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="setup-page">
-      <SetupProgress currentStep={8} />
-      <div className="setup-card">
-        <h1>Connections</h1>
-        <p className="subtitle">Connect external services for calendar, email, and task intelligence.</p>
-        <div className="settings-section">
-          <h3>Google Workspace</h3>
-          <p style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', marginBottom: '1rem' }}>
-            Connect your Google account to enable calendar awareness, email summaries, and task sync.
-          </p>
-          <label>Client ID</label>
-          <input
-            type="text"
-            value={clientId}
-            onChange={(e) => setClientId(e.target.value)}
-            placeholder="your-client-id.apps.googleusercontent.com"
-          />
-          <label>Client Secret</label>
-          <input
-            type="password"
-            value={clientSecret}
-            onChange={(e) => setClientSecret(e.target.value)}
-            placeholder="GOCSPX-..."
-          />
-          <button
-            type="button"
-            className="setup-btn-primary"
-            onClick={handleConnect}
-            disabled={loading}
-          >
-            {loading ? 'Connecting...' : 'Connect Google Account'}
-          </button>
-          {error && <p className="error">{error}</p>}
-        </div>
-        <button
-          type="button"
-          className="setup-btn-secondary"
-          onClick={() => navigate('/setup/complete')}
-        >
-          Continue without connecting
-        </button>
-        <span className="skip-link" onClick={() => navigate('/setup/complete')}>Skip for now</span>
-      </div>
-    </div>
-  );
-}

package/ui/src/pages/SetupDashboardPassword.tsx

@@ -1,50 +0,0 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { api } from '../api';
-import { SetupProgress } from '../components/SetupProgress';
-import { PasswordStrength } from '../components/PasswordStrength';
-
-export function SetupDashboardPassword() {
-  const [password, setPassword] = useState('');
-  const [confirm, setConfirm] = useState('');
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-  const navigate = useNavigate();
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (password.length < 8) { setError('Password must be at least 8 characters'); return; }
-    if (password !== confirm) { setError('Passwords do not match'); return; }
-    setLoading(true);
-    setError('');
-    try {
-      await api.setupDashboardPassword(password);
-      navigate('/setup/identity');
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : 'Failed to set password');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="setup-page">
-      <SetupProgress currentStep={2} />
-      <div className="setup-card">
-        <h1>Mission Control Password</h1>
-        <p className="subtitle">This password protects Mission Control. You'll use it to log in.</p>
-        <form onSubmit={handleSubmit}>
-          <label>Password</label>
-          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} autoFocus />
-          <PasswordStrength password={password} />
-          <label>Confirm password</label>
-          <input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} />
-          <button type="submit" className="setup-btn-primary" disabled={loading}>
-            {loading ? 'Saving...' : 'Set Password'}
-          </button>
-          {error && <p className="error">{error}</p>}
-        </form>
-      </div>
-    </div>
-  );
-}

package/ui/src/pages/SetupIdentity.tsx

@@ -1,68 +0,0 @@
-import { useState, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { api } from '../api';
-import { SetupProgress } from '../components/SetupProgress';
-
-const AI_NAMES = [
-  'Nova', 'Atlas', 'Jasper', 'Echo', 'Sage', 'Onyx', 'Iris', 'Phoenix',
-  'Kai', 'Luna', 'Orion', 'Zephyr', 'Rune', 'Pixel', 'Nyx', 'Sol',
-  'Cleo', 'Juno', 'Vex', 'Aura',
-];
-
-export function SetupIdentity() {
-  const randomName = useMemo(() => AI_NAMES[Math.floor(Math.random() * AI_NAMES.length)], []);
-  const [name, setName] = useState('');
-  const [pronouns, setPronouns] = useState('she/her');
-  const [vibe, setVibe] = useState('');
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-  const navigate = useNavigate();
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    setError('');
-    try {
-      await api.setupIdentity(name || randomName, pronouns, vibe || undefined);
-      if (vibe) localStorage.setItem('auxiora_setup_vibe', vibe);
-      navigate('/setup/personality');
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : 'Failed to save identity');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="setup-page">
-      <SetupProgress currentStep={3} />
-      <div className="setup-card">
-        <h1>Agent Identity</h1>
-        <p className="subtitle">Give your AI assistant a name, pronouns, and vibe.</p>
-        <form onSubmit={handleSubmit}>
-          <label>Agent name</label>
-          <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={randomName} autoFocus />
-          <label>Pronouns</label>
-          <select value={pronouns} onChange={(e) => setPronouns(e.target.value)}>
-            <option value="she/her">she/her</option>
-            <option value="he/him">he/him</option>
-            <option value="they/them">they/them</option>
-            <option value="it/its">it/its</option>
-          </select>
-          <label>Describe the vibe</label>
-          <textarea
-            value={vibe}
-            onChange={(e) => setVibe(e.target.value)}
-            placeholder="e.g. chill and witty, professional and sharp, warm like a best friend"
-            rows={3}
-            style={{ width: '100%', resize: 'vertical' }}
-          />
-          <button type="submit" className="setup-btn-primary" disabled={loading}>
-            {loading ? 'Saving...' : 'Continue'}
-          </button>
-          {error && <p className="error">{error}</p>}
-        </form>
-      </div>
-    </div>
-  );
-}