# Layout Guidelines for Kanvaro Application ## Overview This document outlines the standard layout patterns and theme-aware styling guidelines for all routes in the Kanvaro application. ## Layout Structure ### 1. Main Application Layout All application pages (except auth pages) MUST use the `MainLayout` component: ```tsx import { MainLayout } from '@/components/layout/MainLayout' export default function YourPage() { return (

{/* Your page content */}

) } ``` ### 2. Page Structure Template ```tsx 'use client' import { MainLayout } from '@/components/layout/MainLayout' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card' import { Button } from '@/components/ui/Button' export default function YourPage() { return (

{/* Page Header */}

Page Title

Page description or subtitle

{/* Page Content */} Section Title Section description {/* Your content here */}

) } ``` ## Theme-Aware Styling Guidelines ### 1. Text Colors - **Primary Text**: `text-foreground` (for main headings and important text) - **Secondary Text**: `text-muted-foreground` (for descriptions, subtitles, and less important text) - **Destructive Text**: `text-destructive` (for errors and dangerous actions) ### 2. Background Colors - **Primary Background**: `bg-background` (main page background) - **Card Background**: `bg-card` (for card components) - **Muted Background**: `bg-muted` (for subtle backgrounds) ### 3. Border Colors - **Default Border**: `border` (standard borders) - **Muted Border**: `border-muted` (subtle borders) ### 4. Interactive Elements - **Primary Actions**: `bg-primary text-primary-foreground` - **Secondary Actions**: `bg-secondary text-secondary-foreground` - **Destructive Actions**: `text-destructive hover:text-destructive` ### 5. Status Colors - **Success**: `text-green-600 dark:text-green-400` - **Warning**: `text-yellow-600 dark:text-yellow-400` - **Error**: `text-red-600 dark:text-red-400` - **Info**: `text-blue-600 dark:text-blue-400` ## Component Guidelines ### 1. Headers and Titles ```tsx // Main page title

Page Title

// Subtitle

Page description

// Section headers

Section Title

``` ### 2. Cards ```tsx Card Title Card description {/* Content */} ``` ### 3. Form Elements ```tsx

Field Label

Helper text

``` ### 4. Alerts ```tsx // Success alert Success message // Error alert Error message ``` ## Layout Patterns ### 1. List Pages - Use `MainLayout` wrapper - Include search and filter controls - Use cards for individual items - Include pagination if needed ### 2. Form Pages - Use `MainLayout` wrapper - Break complex forms into steps/tabs - Include progress indicators - Use proper form validation ### 3. Detail Pages - Use `MainLayout` wrapper - Include breadcrumb navigation - Use cards to organize information - Include action buttons ## Common Mistakes to Avoid ### ❌ Don't Use Hardcoded Colors ```tsx // ❌ Wrong

Title

Description

// ✅ Correct

Title

Description

``` ### ❌ Don't Skip MainLayout ```tsx // ❌ Wrong export default function Page() { return (

{/* Content */}

) } // ✅ Correct export default function Page() { return (

{/* Content */}

) } ``` ### ❌ Don't Use Empty String Values in Select ```tsx // ❌ Wrong All Items // ✅ Correct All Items ``` ## Testing Checklist Before deploying any new page, ensure: - [ ] Uses `MainLayout` wrapper - [ ] All text uses theme-aware classes (`text-foreground`, `text-muted-foreground`) - [ ] No hardcoded colors (`text-gray-900`, `bg-blue-600`, etc.) - [ ] Select components use non-empty string values - [ ] Proper spacing with `space-y-6` or similar - [ ] Responsive design considerations - [ ] Dark mode compatibility - [ ] Proper semantic HTML structure ## Examples ### Complete Page Example ```tsx 'use client' import { useState } from 'react' import { MainLayout } from '@/components/layout/MainLayout' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card' import { Button } from '@/components/ui/Button' import { Input } from '@/components/ui/Input' import { Badge } from '@/components/ui/Badge' export default function ExamplePage() { const [items, setItems] = useState([]) return (

{/* Page Header */}

Example Page

This is an example page following the guidelines

{/* Content */} Items List Manage your items here

{items.map((item) => (

{item.name}

{item.description}

{item.status}

))}

) } ``` This ensures consistency across all routes and proper theme support.

Documentation

Layout Guidelines

Table of Contents