`components/settings/SettingsTab.tsx`

129 lines
'use client';

import { useState } from 'react';
import { Settings, Shield, Database, Zap, Globe, Bell, Check } from 'lucide-react';
import { useToast } from '../ToastProvider';

export default function SettingsTab() {
  const { addToast } = useToast();

  const handleSave = () => {
    addToast('Settings saved', 'success');
  };

  return (
    <div className="p-6 space-y-6 max-w-3xl">
      <div>
        <h2 className="text-xl font-bold flex items-center gap-2" style={{ color: 'var(--color-text)' }}>
          <Settings size={20} style={{ color: 'var(--color-text-muted)' }} />
          Settings
        </h2>
        <p className="text-sm mt-1" style={{ color: 'var(--color-text-muted)' }}>
          Platform configuration and preferences
        </p>
      </div>

      {/* Platform Info */}
      <div className="card p-5 space-y-4">
        <h3 className="text-sm font-semibold flex items-center gap-2" style={{ color: 'var(--color-text-secondary)' }}>
          <Globe size={14} /> Platform Information
        </h3>
        <div className="grid grid-cols-2 gap-4 text-sm">
          <div>
            <span style={{ color: 'var(--color-text-muted)' }}>Application</span>
            <p style={{ color: 'var(--color-text)' }}>Freddy - The Fundraising Coordinator</p>
          </div>
          <div>
            <span style={{ color: 'var(--color-text-muted)' }}>Version</span>
            <p style={{ color: 'var(--color-text)' }}>1.0.0</p>
          </div>
          <div>
            <span style={{ color: 'var(--color-text-muted)' }}>Stack</span>
            <p style={{ color: 'var(--color-text)' }}>Next.js 16 + PostgreSQL + Gemini AI</p>
          </div>
          <div>
            <span style={{ color: 'var(--color-text-muted)' }}>Port</span>
            <p style={{ color: 'var(--color-text)' }}>7470</p>
          </div>
        </div>
      </div>

      {/* Fee Configuration */}
      <div className="card p-5 space-y-4">
        <h3 className="text-sm font-semibold flex items-center gap-2" style={{ color: 'var(--color-text-secondary)' }}>
          <Zap size={14} style={{ color: '#fbbf24' }} /> Fee Configuration
        </h3>
        <div className="space-y-3">
          <div>
            <label className="block text-sm mb-1" style={{ color: 'var(--color-text-secondary)' }}>Introduction Fee ($)</label>
            <input className="input" type="number" defaultValue="750" style={{ maxWidth: 200 }} />
          </div>
          <div>
            <label className="block text-sm mb-1" style={{ color: 'var(--color-text-secondary)' }}>Success Fee (%)</label>
            <input className="input" type="number" defaultValue="5" step="0.5" style={{ maxWidth: 200 }} />
          </div>
        </div>
      </div>

      {/* AI Settings */}
      <div className="card p-5 space-y-4">
        <h3 className="text-sm font-semibold flex items-center gap-2" style={{ color: 'var(--color-text-secondary)' }}>
          <Zap size={14} style={{ color: '#c084fc' }} /> AI Configuration
        </h3>
        <div className="space-y-3">
          <div>
            <label className="block text-sm mb-1" style={{ color: 'var(--color-text-secondary)' }}>AI Model</label>
            <select className="input" defaultValue="gemini-2.0-flash" style={{ maxWidth: 300 }}>
              <option value="gemini-2.0-flash">Gemini 2.0 Flash</option>
            </select>
          </div>
          <div>
            <label className="block text-sm mb-1" style={{ color: 'var(--color-text-secondary)' }}>Match Temperature</label>
            <input className="input" type="number" defaultValue="0.5" step="0.1" min="0" max="1" style={{ maxWidth: 200 }} />
          </div>
        </div>
      </div>

      {/* Security */}
      <div className="card p-5 space-y-4">
        <h3 className="text-sm font-semibold flex items-center gap-2" style={{ color: 'var(--color-text-secondary)' }}>
          <Shield size={14} style={{ color: '#22c55e' }} /> Security
        </h3>
        <div className="text-sm space-y-2" style={{ color: 'var(--color-text-muted)' }}>
          <p>Authentication: Cookie-based session (SHA-256 HMAC)</p>
          <p>Session Duration: 24 hours</p>
          <p>Cookie Name: freddy-auth</p>
        </div>
      </div>

      {/* Database */}
      <div className="card p-5 space-y-4">
        <h3 className="text-sm font-semibold flex items-center gap-2" style={{ color: 'var(--color-text-secondary)' }}>
          <Database size={14} style={{ color: '#60a5fa' }} /> Database
        </h3>
        <div className="text-sm space-y-2" style={{ color: 'var(--color-text-muted)' }}>
          <p>Engine: PostgreSQL 16</p>
          <p>Database: freddy</p>
          <p>Tables: users, organizations, granters, causes, votes, matches, funding_rounds, impact_reports, revenue, contacts, audit_events</p>
        </div>
      </div>

      {/* Legal Disclaimer */}
      <div className="card p-5 space-y-3" style={{ borderColor: 'rgba(217, 119, 6, 0.3)' }}>
        <h3 className="text-sm font-semibold flex items-center gap-2" style={{ color: '#fbbf24' }}>
          <Shield size={14} /> Legal Disclaimer
        </h3>
        <p className="text-xs" style={{ color: 'var(--color-text-secondary)', lineHeight: 1.6 }}>
          Freddy provides introduction and facilitation services only. Freddy does not serve as fiscal agent, fiduciary, or guarantor of any grant, donation, or contractual agreement between parties. All financial transactions, grant agreements, and contractual obligations are solely between the granting organization and the non-profit recipient.
        </p>
      </div>

      <div className="flex justify-end">
        <button onClick={handleSave} className="btn btn-primary">
          Save Settings
        </button>
      </div>
    </div>
  );
}