> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Settings Pages

> Customize dashboard settings (general, account, billing, notifications) connected to Supabase.

The dashboard includes four settings pages under `/dashboard/settings/*`. This guide shows how to customize them and wire fields to your Supabase schema.

## Routes

* `/dashboard/settings/general` - Profile, preferences, locale
* `/dashboard/settings/account` - Password, email, delete account
* `/dashboard/settings/billing` - Subscription, invoices
* `/dashboard/settings/notifications` - Email/push toggles

## Schema types

**File**: `sabo/src/lib/types/database.ts`

The settings pages map to these Supabase tables:

* `UserProfile` - Profile data (name, bio, website, notification prefs)
* `UserSubscription` - Stripe subscription (plan, status, period)
* `PaymentHistory` - Payment records (amount, invoice URL)

## Common pattern

All settings pages follow this flow:

<Steps>
  <Step title="Load data">
    Fetch current values from Supabase (profile, subscription, etc.) in a Server Component or server action.
  </Step>

  <Step title="Render form">
    Use shadcn/ui form components (`Input`, `Switch`, `Select`). Validate with Zod schemas.
  </Step>

  <Step title="Persist changes">
    Submit via server action:

    * **General/Notifications**: Update `UserProfile` table
    * **Account**: Call `supabase.auth.updateUser()` for password/email
    * **Billing**: Query `UserSubscription` + `PaymentHistory`, link to Stripe Portal

    ```tsx theme={null}
    // Example server action
    export async function updateProfile(formData: FormData) {
      const supabase = await createClient();
      const { error } = await supabase
        .from("user_profiles")
        .update({ full_name: formData.get("name") })
        .eq("user_id", userId);
      if (error) return { error: error.message };
      revalidatePath("/dashboard/settings/general");
    }
    ```
  </Step>

  <Step title="Confirm success">
    Show a toast and revalidate the page to reflect changes.
  </Step>
</Steps>

## Key notes

* **Account password/email**: Use `supabase.auth.updateUser()`, not database tables
* **Billing**: Stripe webhooks populate `UserSubscription` and `PaymentHistory` tables
* **Notifications**: Store toggles in `UserProfile` (e.g., `email_notifications`, `push_notifications`)

## Redirect behavior

Signed‑in users hitting `/sign-in`/`/sign-up` are redirected to `/dashboard`.\
Signed‑out users visiting `/dashboard/*` are redirected to `/sign-in`.

<Note>
  For details on customizing protected routes and auth redirects, see <a href="/core-features/routing-and-middleware">Routing & Middleware</a>.
</Note>

## Troubleshooting

* Email change not taking effect
  * Verification step is pending. Check the mail provider or Supabase Auth logs.
* Password updated but session acts stale
  * Revalidate layout/page after update; ensure your middleware refreshes cookies.
* No subscription data shows
  * Stripe endpoints/webhooks not implemented. Complete Payments setup first.
* Forms not persisting
  * Ensure server actions write to the correct row (user\_id) and you revalidate the route/segment after success.