`components/settings/SettingsTab.tsx`

204 lines
'use client';

import { Settings, Building2, User, Bell, Database } from 'lucide-react';

export default function SettingsTab() {
  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div>
        <h2
          className="text-lg font-bold"
          style={{ color: 'var(--color-text)' }}
        >
          Settings
        </h2>
        <p className="text-sm mt-1" style={{ color: 'var(--color-text-muted)' }}>
          Manage your organization profile, account settings, and integrations.
        </p>
      </div>

      {/* Settings Sections */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Organization Profile */}
        <div className="card">
          <div className="flex items-center gap-2 mb-4">
            <Building2 size={16} style={{ color: 'var(--color-primary)' }} aria-hidden="true" />
            <h3
              className="text-sm font-semibold"
              style={{ color: 'var(--color-text)' }}
            >
              Organization Profile
            </h3>
          </div>
          <div className="space-y-3">
            <div>
              <label
                className="block text-xs font-medium mb-1"
                style={{ color: 'var(--color-text-secondary)' }}
              >
                Organization Name
              </label>
              <input
                type="text"
                className="input"
                placeholder="Your non-profit name"
                disabled
              />
            </div>
            <div>
              <label
                className="block text-xs font-medium mb-1"
                style={{ color: 'var(--color-text-secondary)' }}
              >
                Website
              </label>
              <input
                type="url"
                className="input"
                placeholder="https://yourorg.org"
                disabled
              />
            </div>
            <div>
              <label
                className="block text-xs font-medium mb-1"
                style={{ color: 'var(--color-text-secondary)' }}
              >
                Non-Profit Status
              </label>
              <select className="input" disabled>
                <option>Planning</option>
                <option>501(c)(3)</option>
                <option>501(c)(4)</option>
                <option>Other</option>
              </select>
            </div>
            <p className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
              Complete the onboarding wizard to set up your organization profile.
            </p>
          </div>
        </div>

        {/* Account */}
        <div className="card">
          <div className="flex items-center gap-2 mb-4">
            <User size={16} style={{ color: 'var(--color-primary)' }} aria-hidden="true" />
            <h3
              className="text-sm font-semibold"
              style={{ color: 'var(--color-text)' }}
            >
              Account
            </h3>
          </div>
          <div className="space-y-3">
            <div
              className="flex items-center justify-between p-3 rounded-lg"
              style={{
                backgroundColor: 'var(--color-surface-el)',
                border: '1px solid var(--color-border)',
              }}
            >
              <div>
                <div className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
                  Admin Account
                </div>
                <div className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
                  admin
                </div>
              </div>
              <span className="badge badge-success">Active</span>
            </div>
            <div
              className="flex items-center justify-between p-3 rounded-lg"
              style={{
                backgroundColor: 'var(--color-surface-el)',
                border: '1px solid var(--color-border)',
              }}
            >
              <div>
                <div className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
                  Google Sign-In
                </div>
                <div className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
                  Connect your Google account for Gmail integration
                </div>
              </div>
              <span className="badge badge-warning">Coming Soon</span>
            </div>
          </div>
        </div>

        {/* Notifications */}
        <div className="card">
          <div className="flex items-center gap-2 mb-4">
            <Bell size={16} style={{ color: 'var(--color-primary)' }} aria-hidden="true" />
            <h3
              className="text-sm font-semibold"
              style={{ color: 'var(--color-text)' }}
            >
              Notifications
            </h3>
          </div>
          <div className="flex flex-col items-center justify-center py-8 text-center">
            <p className="text-sm" style={{ color: 'var(--color-text-muted)' }}>
              Notification preferences coming soon
            </p>
          </div>
        </div>

        {/* Data & Integrations */}
        <div className="card">
          <div className="flex items-center gap-2 mb-4">
            <Database size={16} style={{ color: 'var(--color-primary)' }} aria-hidden="true" />
            <h3
              className="text-sm font-semibold"
              style={{ color: 'var(--color-text)' }}
            >
              Data & Integrations
            </h3>
          </div>
          <div className="space-y-2">
            <div
              className="flex items-center justify-between p-3 rounded-lg"
              style={{
                backgroundColor: 'var(--color-surface-el)',
                border: '1px solid var(--color-border)',
              }}
            >
              <div className="text-sm" style={{ color: 'var(--color-text)' }}>
                Grants.gov API
              </div>
              <span className="badge badge-warning">Planned</span>
            </div>
            <div
              className="flex items-center justify-between p-3 rounded-lg"
              style={{
                backgroundColor: 'var(--color-surface-el)',
                border: '1px solid var(--color-border)',
              }}
            >
              <div className="text-sm" style={{ color: 'var(--color-text)' }}>
                Google Drive
              </div>
              <span className="badge badge-warning">Planned</span>
            </div>
            <div
              className="flex items-center justify-between p-3 rounded-lg"
              style={{
                backgroundColor: 'var(--color-surface-el)',
                border: '1px solid var(--color-border)',
              }}
            >
              <div className="text-sm" style={{ color: 'var(--color-text)' }}>
                Gmail
              </div>
              <span className="badge badge-warning">Planned</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}