feat: initial SPA frontend for network app

2026-01-28 19:51:45 +00:00
commit 1afd5d5bac
35 changed files with 7071 additions and 0 deletions
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -0,0 +1,148 @@
+import { useEffect, useState } from 'react';
+import { api } from '@/lib/api';
+import type { Profile } from '@/types';
+import { Save, User } from 'lucide-react';
+import LoadingSpinner, { PageLoader } from '@/components/LoadingSpinner';
+
+export default function SettingsPage() {
+  const [profile, setProfile] = useState<Profile | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [success, setSuccess] = useState(false);
+
+  useEffect(() => {
+    api.getProfile().then((p) => {
+      setProfile(p);
+      setLoading(false);
+    }).catch(() => setLoading(false));
+  }, []);
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!profile) return;
+    setSaving(true);
+    setSuccess(false);
+    try {
+      const updated = await api.updateProfile(profile);
+      setProfile(updated);
+      setSuccess(true);
+      setTimeout(() => setSuccess(false), 3000);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) return <PageLoader />;
+
+  const inputClass = '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';
+  const labelClass = 'block text-sm font-medium text-slate-700 mb-1.5';
+
+  return (
+    <div className="max-w-2xl mx-auto space-y-6 animate-fade-in">
+      <div>
+        <h1 className="text-2xl font-bold text-slate-900">Settings</h1>
+        <p className="text-slate-500 text-sm mt-1">Manage your profile and preferences</p>
+      </div>
+
+      <form onSubmit={handleSave} className="space-y-6">
+        {/* Profile section */}
+        <div className="bg-white border border-slate-200 rounded-xl p-6 space-y-5">
+          <div className="flex items-center gap-3 pb-4 border-b border-slate-100">
+            <div className="w-10 h-10 bg-blue-100 text-blue-700 rounded-lg flex items-center justify-center">
+              <User className="w-5 h-5" />
+            </div>
+            <div>
+              <h2 className="font-semibold text-slate-900">Profile Information</h2>
+              <p className="text-xs text-slate-500">Your public-facing details</p>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className={labelClass}>Name</label>
+              <input
+                value={profile?.name || ''}
+                onChange={(e) => setProfile({ ...profile!, name: e.target.value })}
+                className={inputClass}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>Email</label>
+              <input
+                value={profile?.email || ''}
+                disabled
+                className={`${inputClass} bg-slate-50 text-slate-500`}
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className={labelClass}>Title</label>
+              <input
+                value={profile?.title || ''}
+                onChange={(e) => setProfile({ ...profile!, title: e.target.value })}
+                placeholder="e.g., Account Executive"
+                className={inputClass}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>Company</label>
+              <input
+                value={profile?.company || ''}
+                onChange={(e) => setProfile({ ...profile!, company: e.target.value })}
+                className={inputClass}
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className={labelClass}>Phone</label>
+            <input
+              value={profile?.phone || ''}
+              onChange={(e) => setProfile({ ...profile!, phone: e.target.value })}
+              className={inputClass}
+            />
+          </div>
+        </div>
+
+        {/* Signature */}
+        <div className="bg-white border border-slate-200 rounded-xl p-6 space-y-4">
+          <h2 className="font-semibold text-slate-900">Email Signature</h2>
+          <textarea
+            value={profile?.emailSignature || ''}
+            onChange={(e) => setProfile({ ...profile!, emailSignature: e.target.value })}
+            rows={6}
+            placeholder="Your email signature (supports plain text)..."
+            className={`${inputClass} font-mono`}
+          />
+          {profile?.emailSignature && (
+            <div>
+              <p className="text-xs font-medium text-slate-500 mb-2">Preview:</p>
+              <div className="p-4 bg-slate-50 rounded-lg text-sm whitespace-pre-wrap border border-slate-200">
+                {profile.emailSignature}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Save */}
+        <div className="flex items-center gap-3">
+          <button
+            type="submit"
+            disabled={saving}
+            className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50 transition-colors"
+          >
+            {saving ? <LoadingSpinner size="sm" className="text-white" /> : <Save className="w-4 h-4" />}
+            Save Changes
+          </button>
+          {success && (
+            <span className="text-sm text-emerald-600 font-medium animate-fade-in">✓ Saved successfully</span>
+          )}
+        </div>
+      </form>
+    </div>
+  );
+}