wip

apps/website/app/sponsor/settings/page.tsx

@@ -0,0 +1,333 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import { 
+  Settings, 
+  Building2, 
+  Mail, 
+  Globe,
+  Upload,
+  Save,
+  Bell,
+  Shield,
+  Eye,
+  Trash2
+} from 'lucide-react';
+
+interface SponsorProfile {
+  name: string;
+  email: string;
+  website: string;
+  description: string;
+  logoUrl: string | null;
+}
+
+interface NotificationSettings {
+  emailNewSponsorships: boolean;
+  emailWeeklyReport: boolean;
+  emailRaceAlerts: boolean;
+  emailPaymentAlerts: boolean;
+}
+
+// Mock data
+const MOCK_PROFILE: SponsorProfile = {
+  name: 'Acme Racing Co.',
+  email: 'sponsor@acme-racing.com',
+  website: 'https://acme-racing.com',
+  description: 'Premium sim racing equipment and accessories for competitive drivers.',
+  logoUrl: null,
+};
+
+const MOCK_NOTIFICATIONS: NotificationSettings = {
+  emailNewSponsorships: true,
+  emailWeeklyReport: true,
+  emailRaceAlerts: false,
+  emailPaymentAlerts: true,
+};
+
+function Toggle({ checked, onChange, label }: { checked: boolean; onChange: (checked: boolean) => void; label: string }) {
+  return (
+    <label className="flex items-center justify-between cursor-pointer">
+      <span className="text-gray-300">{label}</span>
+      <button
+        type="button"
+        onClick={() => onChange(!checked)}
+        className={`relative w-11 h-6 rounded-full transition-colors ${checked ? 'bg-primary-blue' : 'bg-iron-gray'}`}
+      >
+        <span 
+          className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform ${checked ? 'translate-x-5' : ''}`}
+        />
+      </button>
+    </label>
+  );
+}
+
+export default function SponsorSettingsPage() {
+  const router = useRouter();
+  const [profile, setProfile] = useState(MOCK_PROFILE);
+  const [notifications, setNotifications] = useState(MOCK_NOTIFICATIONS);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  const handleSaveProfile = async () => {
+    setSaving(true);
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 800));
+    setSaving(false);
+    setSaved(true);
+    setTimeout(() => setSaved(false), 3000);
+  };
+
+  const handleDeleteAccount = () => {
+    if (confirm('Are you sure you want to delete your sponsor account? This action cannot be undone.')) {
+      // Clear demo cookies and redirect
+      document.cookie = 'gridpilot_demo_mode=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
+      document.cookie = 'gridpilot_sponsor_id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
+      router.push('/');
+    }
+  };
+
+  return (
+    <div className="max-w-3xl mx-auto py-8 px-4">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-white flex items-center gap-3">
+          <Settings className="w-7 h-7 text-gray-400" />
+          Sponsor Settings
+        </h1>
+        <p className="text-gray-400 mt-1">Manage your sponsor profile and preferences</p>
+      </div>
+
+      {/* Company Profile */}
+      <Card className="mb-6">
+        <div className="p-4 border-b border-charcoal-outline">
+          <h2 className="text-lg font-semibold text-white flex items-center gap-2">
+            <Building2 className="w-5 h-5 text-primary-blue" />
+            Company Profile
+          </h2>
+        </div>
+        <div className="p-4 space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">Company Name</label>
+            <Input
+              type="text"
+              value={profile.name}
+              onChange={(e) => setProfile({ ...profile, name: e.target.value })}
+              placeholder="Your company name"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              <div className="flex items-center gap-2">
+                <Mail className="w-4 h-4 text-gray-500" />
+                Contact Email
+              </div>
+            </label>
+            <Input
+              type="email"
+              value={profile.email}
+              onChange={(e) => setProfile({ ...profile, email: e.target.value })}
+              placeholder="sponsor@company.com"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              <div className="flex items-center gap-2">
+                <Globe className="w-4 h-4 text-gray-500" />
+                Website
+              </div>
+            </label>
+            <Input
+              type="url"
+              value={profile.website}
+              onChange={(e) => setProfile({ ...profile, website: e.target.value })}
+              placeholder="https://company.com"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">Company Description</label>
+            <textarea
+              value={profile.description}
+              onChange={(e) => setProfile({ ...profile, description: e.target.value })}
+              placeholder="Tell leagues about your company..."
+              rows={3}
+              className="w-full px-3 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary-blue resize-none"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              <div className="flex items-center gap-2">
+                <Upload className="w-4 h-4 text-gray-500" />
+                Company Logo
+              </div>
+            </label>
+            <div className="flex items-center gap-4">
+              <div className="w-20 h-20 rounded-lg bg-iron-gray border border-charcoal-outline flex items-center justify-center">
+                <Building2 className="w-8 h-8 text-gray-500" />
+              </div>
+              <div>
+                <input
+                  type="file"
+                  accept="image/png,image/jpeg,image/svg+xml"
+                  className="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-blue/10 file:text-primary-blue hover:file:bg-primary-blue/20"
+                />
+                <p className="text-xs text-gray-500 mt-1">PNG, JPEG, or SVG. Max 2MB.</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="pt-4 border-t border-charcoal-outline flex items-center justify-between">
+            <Button
+              variant="primary"
+              onClick={handleSaveProfile}
+              disabled={saving}
+            >
+              {saving ? (
+                'Saving...'
+              ) : saved ? (
+                <>
+                  <Save className="w-4 h-4 mr-2" />
+                  Saved!
+                </>
+              ) : (
+                <>
+                  <Save className="w-4 h-4 mr-2" />
+                  Save Changes
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      {/* Notification Preferences */}
+      <Card className="mb-6">
+        <div className="p-4 border-b border-charcoal-outline">
+          <h2 className="text-lg font-semibold text-white flex items-center gap-2">
+            <Bell className="w-5 h-5 text-warning-amber" />
+            Notifications
+          </h2>
+        </div>
+        <div className="p-4 space-y-4">
+          <Toggle
+            checked={notifications.emailNewSponsorships}
+            onChange={(checked) => setNotifications({ ...notifications, emailNewSponsorships: checked })}
+            label="Email when a sponsorship is approved"
+          />
+          <Toggle
+            checked={notifications.emailWeeklyReport}
+            onChange={(checked) => setNotifications({ ...notifications, emailWeeklyReport: checked })}
+            label="Weekly analytics report"
+          />
+          <Toggle
+            checked={notifications.emailRaceAlerts}
+            onChange={(checked) => setNotifications({ ...notifications, emailRaceAlerts: checked })}
+            label="Race day alerts for sponsored leagues"
+          />
+          <Toggle
+            checked={notifications.emailPaymentAlerts}
+            onChange={(checked) => setNotifications({ ...notifications, emailPaymentAlerts: checked })}
+            label="Payment and invoice notifications"
+          />
+        </div>
+      </Card>
+
+      {/* Privacy & Visibility */}
+      <Card className="mb-6">
+        <div className="p-4 border-b border-charcoal-outline">
+          <h2 className="text-lg font-semibold text-white flex items-center gap-2">
+            <Eye className="w-5 h-5 text-performance-green" />
+            Privacy & Visibility
+          </h2>
+        </div>
+        <div className="p-4 space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-300">Public Profile</p>
+              <p className="text-sm text-gray-500">Allow leagues to see your sponsor profile</p>
+            </div>
+            <Toggle checked={true} onChange={() => {}} label="" />
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-300">Show Sponsorship Stats</p>
+              <p className="text-sm text-gray-500">Display your total sponsorships and investment on profile</p>
+            </div>
+            <Toggle checked={false} onChange={() => {}} label="" />
+          </div>
+        </div>
+      </Card>
+
+      {/* Security */}
+      <Card className="mb-6">
+        <div className="p-4 border-b border-charcoal-outline">
+          <h2 className="text-lg font-semibold text-white flex items-center gap-2">
+            <Shield className="w-5 h-5 text-primary-blue" />
+            Security
+          </h2>
+        </div>
+        <div className="p-4 space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-300">Change Password</p>
+              <p className="text-sm text-gray-500">Update your account password</p>
+            </div>
+            <Button variant="secondary" className="text-sm">
+              Change
+            </Button>
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-300">Two-Factor Authentication</p>
+              <p className="text-sm text-gray-500">Add an extra layer of security</p>
+            </div>
+            <Button variant="secondary" className="text-sm">
+              Enable
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      {/* Danger Zone */}
+      <Card className="border-racing-red/30">
+        <div className="p-4 border-b border-racing-red/30">
+          <h2 className="text-lg font-semibold text-racing-red flex items-center gap-2">
+            <Trash2 className="w-5 h-5" />
+            Danger Zone
+          </h2>
+        </div>
+        <div className="p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-300">Delete Sponsor Account</p>
+              <p className="text-sm text-gray-500">Permanently delete your account and all sponsorship data</p>
+            </div>
+            <Button 
+              variant="secondary" 
+              onClick={handleDeleteAccount}
+              className="text-sm text-racing-red border-racing-red/30 hover:bg-racing-red/10"
+            >
+              Delete Account
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      {/* Alpha Notice */}
+      <div className="mt-6 rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
+        <p className="text-xs text-gray-400">
+          <strong className="text-warning-amber">Alpha Note:</strong> Settings are demonstration-only and won't persist.
+          Full account management will be available when the system is fully implemented.
+        </p>
+      </div>
+    </div>
+  );
+}