Admin Dashboard

Comprehensive guide to the PROVESA Web administrative dashboard for content management

The Admin Dashboard provides a centralized interface for managing all aspects of the PROVESA website. Access is restricted to authenticated administrators via the Better Auth authentication system.

Dashboard Access

The admin panel is located at /admin and requires authentication. See Authentication for login details.

// src/routes/admin/+layout.server.js
export const load = async (event) => {
  const { user } = event.locals;
  
  if (!user) {
    throw redirect(302, '/login');
  }
  
  return { user };
};

Only authenticated users can access admin routes. Unauthenticated requests are automatically redirected to /login.

Dashboard Layout

The admin interface (src/routes/admin/+page.svelte) uses a sidebar navigation layout:

Sidebar Navigation

The AdminSidebar component provides access to all management sections:

let navItems = $derived([
  { name: 'Dashboard', icon: 'dashboard' },
  { name: 'Personalización', icon: 'palette' },
  { name: 'Sliders', icon: 'slideshow' },
  { name: 'Productos', icon: 'inventory_2' },
  { name: 'Nosotros', icon: 'groups' },
  { name: 'Footer', icon: 'web' },
  { name: 'Páginas Legales', icon: 'policy' },
  { name: 'Sugerencias', icon: 'chat_bubble_outline', badge: unreadSugerencias },
  { name: 'Candidatos', icon: 'people_outline' },
  { name: 'Concursos', icon: 'emoji_events' },
  { name: 'Configuración', icon: 'settings' }
]);

The Sugerencias tab displays a badge with the count of unread suggestions for quick notification.

Management Sections

Dashboard

Overview and analytics (coming soon)

Personalización

Global theme color management

Sliders

Hero slider configuration

Productos

Product showcase editor

Nosotros

About page content editor

Footer

Footer links and branch information

Páginas Legales

Terms and privacy policy editor

Sugerencias

Customer feedback inbox

Candidatos

Job application management

Concursos

Contest and winner management

Configuración

Site-wide configuration

Slider Management

The Sliders tab (src/lib/components/admin/SlidersTab.svelte) provides full control over homepage hero slides.

Adding a Slide

1. Click 'Nuevo Slide'

   Opens the slide creation form with image upload, text fields, and visual configuration.

2. Upload Image

   Drag and drop or click to upload. Recommended: 1920×1080px, max 10MB.

   async function uploadImage(file, target = 'new') {
     const formData = new FormData();
     formData.append('file', file);
     const res = await fetch('/api/upload', { method: 'POST', body: formData });
     const data = await res.json();
     if (!res.ok) {
       uploadError = data.error || 'Error al subir';
       return;
     }
     newSlide.imageUrl = data.url;
   }
   
3. Configure Text Content

   • Título principal: Main title text (white, 3-5 words)
   • Palabra destacada: Highlighted keyword (colored, 1-2 words, max 30 chars)
   • Descripción corta: Subtitle text (max 150 chars)
   • Etiqueta superior: Optional badge label
4. Visual Settings

   • Posición del texto: Left, Center, or Right alignment
   • Color de la palabra: Yellow, Blue, Red, or White for the highlighted word
5. Preview and Save

   Live preview shows exactly how the slide will appear on the homepage.

Slide Configuration Options

Text Alignment

const alignOptions = [
  { value: 'left', label: 'Izquierda', icon: 'format_align_left' },
  { value: 'center', label: 'Centro', icon: 'format_align_center' },
  { value: 'right', label: 'Derecha', icon: 'format_align_right' }
];

Highlight Colors

const colorOptions = [
  { value: 'text-accent-yellow', label: 'Amarillo', color: '#FFD100' },
  { value: 'text-primary', label: 'Azul', color: '#1565C0' },
  { value: 'text-accent-red', label: 'Rojo', color: '#E4002B' },
  { value: 'text-white', label: 'Blanco', color: '#FFFFFF' }
];

Editing Slides

Click the edit icon on any existing slide to modify its properties. The edit form appears inline with:

• Image replacement
• All text field updates
• Position and color adjustments

Deleting Slides

Click the delete icon to remove a slide. When all slides are deleted, the system reverts to showing 3 default slides on the public site.

Product Management

The Productos tab (src/lib/components/admin/ProductosTab.svelte) manages the product showcase section.

Product Structure

{
  name: 'Arroz Premium Salguero',
  description: 'El protagonista de la canasta familiar ecuatoriana...',
  align: 'left',           // 'left' or 'right'
  accentColor: 'primary',  // 'primary' or 'accent'
  displayType: 'features', // 'features' or 'categories'
  images: ['url1', 'url2', 'url3'],
  features: [
    { title: 'Grano Largo y Envejecido', desc: 'Perfecto para cocción uniforme.' }
  ],
  categories: [
    { num: '01', name: 'Aceites', desc: 'Variedad de marcas...' }
  ]
}

Display Types

Features Display

Shows product benefits in a vertical list with icons:

• Up to 3-4 features recommended
• Each feature has a title and description
• Icons rotate through BadgeCheck, ShoppingBasket, Truck, Award
• Best for single product highlights

Categories Display

Shows product categories in a 2×2 grid:

• Numbered categories (01, 02, 03, etc.)
• Category name and description
• Best for product line overviews

Image Management

Products support multiple images (recommended: 3 images):

1. Click the + icon to upload images
2. Images auto-rotate on the public site every 4 seconds
3. Hover over thumbnails in edit mode to remove images

Alternate align between products for a magazine-style layout: first product left, second right, third left, etc.

Theme Customization

See dedicated Theme Customization page for detailed color management.

User Profile

The sidebar footer displays the logged-in user:

let initials = $derived(
  user?.name
    ? user.name
        .split(' ')
        .map((n) => n[0])
        .join('')
        .toUpperCase()
        .substring(0, 2)
    : 'AD'
);

Includes a logout button for secure session termination.

Header Features

The sticky header displays:

• Current active tab name
• Search bar (placeholder for future functionality)
• Site status indicator (green dot = active)

<header class="sticky top-0 z-40 flex h-20 items-center justify-between border-b border-slate-100 bg-white/50 px-8 backdrop-blur-md">
  <h2 class="text-xl font-extrabold text-slate-900">{activeTab}</h2>
  <!-- Search and status indicators -->
</header>

Form Handling

All forms use SvelteKit’s progressive enhancement with use:enhance:

use:enhance={() => {
  isSaving = true;
  return async ({ update }) => {
    isSaving = false;
    await update();
  };
}}

This provides:

• Loading states during submission
• Automatic page data refresh
• Error handling
• No full page reload

Success Notifications

Successful form submissions show temporary success messages:

{#if formResult?.success}
  <p in:slide={{ axis: 'x' }} class="flex items-center gap-1 text-sm font-bold text-green-600">
    <span class="material-icons text-sm">check_circle</span> Cambios guardados
  </p>
{/if}

Responsive Design

The admin dashboard is optimized for desktop use but includes responsive breakpoints:

• Mobile/Tablet: Sidebar hidden, hamburger menu (planned)
• Desktop (lg+): Sidebar always visible at 288px width (w-72)

For best experience, use the admin dashboard on desktop or laptop with screen width ≥1024px.

Design System

The admin interface uses a consistent design language:

• Font: Work Sans
• Backgrounds: F1F5F9 (slate-100), F8FAFC (slate-50)
• Border Radius: 16px+ (rounded-2xl to rounded-[40px])
• Shadows: Subtle with hover elevation
• Icons: Material Icons
• Transitions: Smooth scale and opacity effects

Material Icons

All icons use Google Material Icons:

<svelte:head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</svelte:head>

Common icons:

• dashboard, palette, slideshow, inventory_2
• save, edit, delete, add, close
• check_circle, error, info