System Settings - OdontologyApp

Overview

The System Settings module provides centralized control over clinic branding, identity, fiscal configuration, and contact information. These settings affect invoices, reports, patient communications, and system-wide presentation.

Settings modification requires admin role. Changes affect all branches and users system-wide.

Configuration Categories

Settings are organized into four thematic sections:

💎 Identidad Visual

Branding and visual identity

Clinic name
Logo URL

📄 Información Fiscal

Tax and financial identifiers

RNC/Tax ID
Currency configuration

📍 Contacto Geográfico

Communication and location

Phone number
Email address
Physical address

🖼️ Vista Previa

Live branding preview

Logo display
Name rendering
Contact formatting

Settings Properties

Complete Settings Object

interface ClinicSettings {
  name: string;        // Clinic commercial name
  address: string;     // Full physical address
  phone: string;       // Primary phone line
  email: string;       // Official email address
  tax_id: string;      // RNC or tax identification
  currency: string;    // Currency code (e.g., "DOP")
  logo_url: string;    // Public URL to logo image
}

Visual Identity

Clinic Name

Field: name
Type: Text input
Example: “OdontoDigital Premium”
Usage: Displayed on:

Invoices and receipts
Patient reports
Email communications
System branding

Logo Configuration

Field: logo_url
Type: URL input
Format: Public accessible image URL
Recommended:

PNG or SVG format
Transparent background
Max height: 80px for optimal display
Hosted on CDN or public server

Example URLs:

https://example.com/assets/clinic-logo.png
https://cdn.example.com/branding/logo.svg

If no logo URL is provided, a placeholder icon (🏥) displays in the preview.

Fiscal Information

Tax Identification

Field: tax_id
Type: Text input
Label: “RNC / Identificación”
Format: Country-specific tax ID
Example (Dominican Republic): “RNC-001002003” Usage: Required for:

Legal invoicing
Tax reporting
Fiscal compliance
Government documentation

Currency Configuration

Field: currency
Type: Text input
Default: “DOP” (Dominican Peso)
Common Values:

DOP - Dominican Peso (RD$)
USD - US Dollar ($)
EUR - Euro (€)

Impact: Affects formatting in:

All financial reports
Invoice generation
Budget presentations
Debt tracking

Formatting Function:

function formatCurrency(amount) {
  return new Intl.NumberFormat('es-DO', {
    style: 'currency',
    currency: settings.currency || 'DOP'
  }).format(amount);
}

Contact Information

Phone Number

Field: phone
Type: Text input
Label: “Línea de Atención”
Format: Free-form (e.g., “(809) 555-0100”)
Usage:

Patient appointment reminders
Invoice contact info
Emergency contact
Website display

Email Address

Field: email
Type: Email input
Label: “Correo Oficial”
Validation: Standard email format
Usage:

Official communications
Invoice delivery
System notifications
Patient correspondence

Physical Address

Field: address
Type: Text input (full-width)
Label: “Dirección Principal del Sistema”
Format: Complete address string
Example: “Calle Principal #123, Torre Médica, Piso 5, Santo Domingo” Usage:

Legal documentation
Invoice footer
Google Maps integration (future)
Patient navigation

Live Preview Panel

Real-time branding preview card displays configured identity:

Preview Components
Fallback Values

Header: “Vista Previa de Marca”
Logo: Displays logo_url image or placeholder
Name: Clinic name in large bold font
Contact: Phone • Email (separated by dot)
Footer: Usage note for reports and budgets

System Status Pill: Green indicator showing “Sistema Operativo - Sede Central”

API Integration

Get Settings

GET /api/clinic/settings

Authorization: None required (settings are non-sensitive) Response:

{
  "success": true,
  "settings": {
    "name": "OdontoDigital Premium",
    "address": "Calle Principal #123, Santo Domingo",
    "phone": "(809) 555-0100",
    "email": "[email protected]",
    "tax_id": "RNC-001002003",
    "currency": "DOP",
    "logo_url": "https://cdn.example.com/logo.png"
  }
}

Source: /src/routes/api/clinic/settings/+server.js
Procedure: sp_get_clinic_settings()

Save Settings

POST /api/clinic/settings

Authorization: Admin role required Request Body:

{
  "name": "OdontoDigital Premium",
  "address": "Calle Principal #123",
  "phone": "(809) 555-0100",
  "email": "[email protected]",
  "tax_id": "RNC-001002003",
  "currency": "DOP",
  "logo_url": "https://cdn.example.com/logo.png"
}

Response:

{
  "success": true,
  "message": "Configuración actualizada"
}

Procedure: sp_save_clinic_settings(name, address, phone, email, currency, tax_id, logo_url) Success Toast: “Configuración de marca guardada”

Form Layout

Desktop Layout

Two-column grid with preview sidebar:

┌─────────────────┬───────────────────────────┐
│                 │  💎 Visual Identity       │
│  Preview Card   │  - Name input             │
│                 │  - Logo URL input         │
│  [Logo/Name]    │                           │
│  [Contact]      ├───────────────────────────┤
│                 │  📄 Fiscal Info          │
│  Status Pill    │  - Tax ID input           │
│                 │  - Currency input         │
└─────────────────┼───────────────────────────┤
                  │  📍 Contact (full-width)  │
                  │  - Phone, Email           │
                  │  - Address                │
                  └───────────────────────────┘

Mobile Layout (< 1100px)

Single column stack:

Preview card
Visual identity section
Fiscal information section
Contact information section

Save Workflow

Load Current Settings

Page fetches existing settings via GET /api/clinic/settings on mount

Edit Fields

Admin modifies any settings fields in the form

Live Preview

Preview panel updates in real-time as user types

Click Save

”💾 Guardar Identidad” button triggers save handler

Submit to API

POST /api/clinic/settings with complete settings object

Confirmation

Success toast appears: “Configuración de marca guardada”

Code Example:

async function handleSave() {
  const res = await fetch('/api/clinic/settings', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(settings)
  });
  
  if (res.ok) {
    showToast('Configuración de marca guardada', 'success');
  } else {
    showToast('Error al guardar', 'error');
  }
}

Use Cases

Example 1: Initial System Setup

{
  "name": "Clínica Dental Sonrisa",
  "address": "Av. Winston Churchill #1234, Torre Ejecutiva, Piso 8, Santo Domingo, República Dominicana",
  "phone": "(809) 555-1234",
  "email": "[email protected]",
  "tax_id": "RNC-131234567",
  "currency": "DOP",
  "logo_url": "https://cdn.clinicasonrisa.com/logo-principal.png"
}

Example 2: Rebranding Update

Update Logo

Replace logo_url with new brand image

Update Name

Change clinic name to new brand identity

Verify Preview

Check live preview for correct appearance

Save Changes

Submit updated configuration

Example 3: Multi-Currency Setup

While the system supports currency configuration, reports and calculations use the configured currency throughout. Changing currency affects all financial displays.

// DOP Configuration (Dominican Republic)
{ "currency": "DOP" }
// Output: RD$1,500.00

// USD Configuration
{ "currency": "USD" }
// Output: $1,500.00

Security Considerations

Logo URL Security: Only use trusted, secure (HTTPS) URLs for logo images. Avoid linking to untrusted sources to prevent XSS vulnerabilities.

Settings are stored in the database with audit trail. The sp_save_clinic_settings procedure logs the admin user who made changes.

Impact on Other Features

Settings configured here affect:

Invoices

Clinic name, logo, and contact info appear on all patient invoices

Reports

Branding appears on printed financial and clinical reports

Budgets

Treatment budgets display clinic identity and contact

Communications

Email templates use configured name and contact info

Admin Dashboard

Return to main administrative overview

Reports

View how branding appears on financial reports

Get Started

Core Features

User Management

Administration

Integrations

​Overview

​Configuration Categories

💎 Identidad Visual

📄 Información Fiscal

📍 Contacto Geográfico

🖼️ Vista Previa

​Settings Properties

​Complete Settings Object

​Visual Identity

​Clinic Name

​Logo Configuration

​Fiscal Information

​Tax Identification

​Currency Configuration

​Contact Information

​Phone Number

​Email Address

​Physical Address

​Live Preview Panel

​API Integration

​Get Settings

​Save Settings

​Form Layout

​Desktop Layout

​Mobile Layout (< 1100px)

​Save Workflow

​Use Cases

​Example 1: Initial System Setup

​Example 2: Rebranding Update

​Example 3: Multi-Currency Setup

​Security Considerations

​Impact on Other Features

Invoices

Reports

Budgets

Communications

​Related Pages

Admin Dashboard

Reports

Build docs developers (and LLMs) love

Overview

Configuration Categories

Settings Properties

Complete Settings Object

Visual Identity

Clinic Name

Logo Configuration

Fiscal Information

Tax Identification

Currency Configuration

Contact Information

Phone Number

Email Address

Physical Address

Live Preview Panel

API Integration

Get Settings

Save Settings

Form Layout

Desktop Layout

Mobile Layout (< 1100px)

Save Workflow

Use Cases

Example 1: Initial System Setup

Example 2: Rebranding Update

Example 3: Multi-Currency Setup

Security Considerations

Impact on Other Features

Related Pages