# Business Dashboard Template

A modern, professional SaaS dashboard template built with Responsive Slot Layout (RSL). This template showcases RSL's data-driven components including Smart Tables, Charts, Calendar, Date/Time Pickers, and more.

## Preview

Open `index.html` in your browser to see the template in action.

## Features

- **Modern Dashboard Design** - Clean, professional interface with a focus on data visualization
- **Dark Mode Support** - Full light/dark theme toggle
- **Fully Responsive** - Works seamlessly on desktop, tablet, and mobile
- **ADA Compliant** - WCAG 2.1 AA accessible with keyboard navigation
- **Zero Dependencies** - Pure HTML, CSS, and JavaScript (no jQuery or frameworks)

## Pages Included

- `index.html` - Main dashboard with KPIs, charts, activity table, and goals
- `analytics.html` - Deep-dive analytics with multiple chart types and data tables
- `schedule.html` - Full calendar with event management and quick-add form
- `settings.html` - User settings with profile, notifications, and preferences

## RSL Components Showcased

### Data Components
- **Smart Table** - Sortable, filterable, paginated data tables
- **Charts** - Area, bar, line, doughnut, and pie charts
- **KPI Cards** - Metric cards with trends and sparklines
- **Progress Bars** - Goal tracking with animated fill

### Date/Time Components
- **Calendar** - Full-featured calendar with month/week/day views
- **Date Picker** - Accessible date selection
- **Time Picker** - 12/24 hour time selection
- **Date Range Picker** - Range selection for filtering

### Form Components
- **Select** - Custom accessible dropdowns
- **Form Elements** - Modern form inputs with validation
- **Toggle Switches** - On/off preference toggles

### UI Components
- **Hero** - Welcome banner with date/time display
- **Navbar** - Responsive navigation with theme toggle
- **Toast** - Success/info notifications
- **Modal** - Dialog windows
- **Badges** - Status indicators
- **Filter** - Search and filter controls

## Customization

### Colors

The template uses CSS custom properties for easy theming. Edit `business-dashboard-style.css`:

```css
:root {
    --dashboard-primary: #1e40af;      /* Main brand color */
    --dashboard-primary-light: #3b82f6;
    --dashboard-accent: #059669;        /* Success/positive */
    --dashboard-warning: #d97706;       /* Warning/attention */
    --dashboard-danger: #dc2626;        /* Error/destructive */
    --dashboard-purple: #7c3aed;        /* Accent color */
}
```

### Fonts

The template uses Inter from Google Fonts. To change:

1. Update the `<link>` tag in each HTML file
2. Update the font-family in CSS:

```css
:root {
    --dashboard-font: 'Your Font', sans-serif;
}
```

### Content

Replace placeholder content with your own:
- Update company name "BizMetrics" in navbar and footer
- Replace sample data in tables and charts
- Update user name and profile information
- Customize event categories and colors

## File Structure

```
business-dashboard-template/
├── index.html                    # Dashboard home
├── analytics.html                # Analytics page
├── schedule.html                 # Calendar/schedule page
├── settings.html                 # Settings page
├── business-dashboard-style.css  # Template styles
├── business-dashboard-script.js  # Template scripts
├── README.md                     # This file
├── LICENSE                       # MIT License
├── styles/                       # RSL CSS files
├── javascript/                   # RSL JS files
└── images/                       # Images and icons
```

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Installation

1. Extract the template folder
2. Open `index.html` in your browser
3. All dependencies are included - no build step required

## Accessibility

This template follows WCAG 2.1 AA guidelines:
- Semantic HTML structure
- ARIA labels and roles
- Keyboard navigation support
- Focus indicators
- Screen reader compatibility
- Respects `prefers-reduced-motion`

## Credits

Built with [Responsive Slot Layout (RSL)](https://rslayout.com) - A zero-dependency, framework-agnostic UI toolkit.

## License

MIT License - Free to use for personal and commercial projects.
