Prompt for Replit

"Add a new SettingsPage.tsx under src/pages/Settings/. Connect it to the gear icon in the sidebar. It should have tabs for Profile, Notifications, Preferences, and Security. Each tab should render a simple form or toggles. The notification toggles should be backed by the notifications_prefs table/endpoint. Default values come from the API. Save on change. Use Tailwind for layout, and lucide-react icons for each tab."

Example Code: src/pages/Settings/SettingsPage.tsx
import { useState, useEffect } from "react";
import { Bell, User, Sliders, Lock } from "lucide-react";

const tabs = [
  { key: "profile", label: "Profile", icon: <User className="w-4 h-4" /> },
  { key: "notifications", label: "Notifications", icon: <Bell className="w-4 h-4" /> },
  { key: "preferences", label: "Preferences", icon: <Sliders className="w-4 h-4" /> },
  { key: "security", label: "Security", icon: <Lock className="w-4 h-4" /> },
];

export default function SettingsPage() {
  const [active, setActive] = useState("profile");
  const [prefs, setPrefs] = useState<any>({});

  useEffect(() => {
    fetch("/api/user/settings", { credentials: "include" })
      .then(r => r.json())
      .then(d => setPrefs(d));
  }, []);

  const handleToggle = (field: string) => {
    const updated = { ...prefs, [field]: !prefs[field] };
    setPrefs(updated);
    fetch("/api/user/settings", {
      method: "POST",
      credentials: "include",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(updated),
    });
  };

  return (
    <div className="max-w-3xl mx-auto py-8">
      <h1 className="text-2xl font-bold mb-6">Settings</h1>
      <div className="flex gap-4 border-b">
        {tabs.map(t => (
          <button
            key={t.key}
            onClick={() => setActive(t.key)}
            className={`flex items-center gap-2 py-2 px-4 border-b-2 ${
              active === t.key ? "border-blue-600 font-semibold" : "border-transparent"
            }`}
          >
            {t.icon} {t.label}
          </button>
        ))}
      </div>

      <div className="mt-6">
        {active === "profile" && (
          <div>
            <h2 className="text-lg font-semibold mb-2">Profile</h2>
            <p className="text-gray-600">Edit your display name, company, or avatar here.</p>
            {/* simple form goes here */}
          </div>
        )}

        {active === "notifications" && (
          <div>
            <h2 className="text-lg font-semibold mb-2">Notifications</h2>
            <div className="space-y-2">
              {["billing", "system", "projects"].map(field => (
                <label key={field} className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={!!prefs[field]}
                    onChange={() => handleToggle(field)}
                  />
                  <span className="capitalize">{field} notifications</span>
                </label>
              ))}
            </div>
          </div>
        )}

        {active === "preferences" && (
          <div>
            <h2 className="text-lg font-semibold mb-2">Preferences</h2>
            <p className="text-gray-600">Theme, language, and other personalization options.</p>
          </div>
        )}

        {active === "security" && (
          <div>
            <h2 className="text-lg font-semibold mb-2">Security</h2>
            <p className="text-gray-600">Change your password, enable 2FA (later).</p>
          </div>
        )}
      </div>
    </div>
  );
}


👉 That gives you a Settings hub scaffolded and ready.
Later we can:

Wire real DB endpoints (/api/user/settings).

Add profile edit form (name, company, avatar upload).

Expand security (password change, 2FA).