Glassmorphism Design System Implementation

🏗️ Component Architecture

The admin panel follows a component separation pattern to maintain clean architecture:

admin/
├── packages/ui/                        # Shared UI Library
│   └── src/
│       ├── styles/
│       │   └── theme.css               ✅ Global theme & glassmorphism
│       ├── components/
│       │   ├── layout/                 # Layout Components
│       │   │   ├── index.ts            ✅ Barrel export
│       │   │   ├── MainLayout.tsx      ✅ Main page layout
│       │   │   ├── Sidebar.tsx         ✅ Navigation sidebar
│       │   │   └── Navbar.tsx          ✅ Top navbar
│       │   └── ui/                     # UI Primitives
│       │       ├── index.ts            ✅ Barrel export
│       │       ├── Avatar.tsx          ✅ User avatars
│       │       ├── Badge.tsx           ✅ Status badges
│       │       ├── Button.tsx          ✅ Action buttons
│       │       ├── Card.tsx            ✅ Content cards
│       │       ├── GlassButton.tsx     ✅ Glassmorphism styled button
│       │       ├── GlassCard.tsx       ✅ Glassmorphism styled card
│       │       ├── HolidayCard.tsx     ✅ Calendar date display
│       │       ├── Input.tsx           ✅ Form inputs
│       │       ├── ProgressBar.tsx     ✅ Progress indicators
│       │       ├── SearchBar.tsx       ✅ Search input
│       │       └── Table.tsx           ✅ Data tables
│       ├── utils/
│       │   └── cn.ts                   ✅ Class name utility
│       ├── index.ts                    ✅ Public API exports
│       └── package.json
│
└── apps/panel/                         # Admin Application
    └── src/
        ├── components/
        │   └── pages/                  # Page-Specific Components
        │       ├── dashboard/          # Dashboard Domain
        │       │   ├── index.ts        ✅ Barrel export
        │       │   ├── StatCard.tsx    ✅ Statistics widget
        │       │   ├── DepartmentUsage.tsx  ✅ Dept. metrics
        │       │   └── UpcomingHolidays.tsx ✅ Holiday calendar
        │       └── auth/               # Auth Domain
        │           ├── index.ts        ✅ Barrel export
        │           └── ProtectedRoute.tsx   ✅ Route guard
        └── routes/
            └── index.tsx               # Dashboard page

📚 Component Categories

1. UI Primitives (`packages/ui/src/components/ui/`)

Purpose: Reusable design system components with no business logic Examples:

Button, Card, Badge, Avatar
GlassButton, GlassCard (styled variants)
Input, SearchBar, Table, ProgressBar

Characteristics:

✅ Generic and reusable
✅ No domain-specific data
✅ Style and interaction focused
✅ Can be used across any page

2. Layout Components (`packages/ui/src/components/layout/`)

Purpose: Structural components for page layout Examples:

MainLayout - Main page wrapper
Sidebar - Navigation sidebar
Navbar - Top navigation bar

Characteristics:

✅ Define page structure
✅ Handle navigation
✅ Responsive layouts

3. Page-Specific Components (`apps/panel/src/components/pages/`)

Purpose: Domain logic and page-specific features Examples:

StatCard - Dashboard statistics with trends
DepartmentUsage - HR department metrics
UpcomingHolidays - Holiday calendar widget
ProtectedRoute - Auth route wrapper

Characteristics:

✅ Contains business logic
✅ Uses domain-specific data
✅ Organized by feature/page
✅ Imports UI primitives from @monorepo/solid-pkg-ui

✅ Completed Components

Global Theme

✅ packages/ui/src/styles/theme.css
- CSS custom properties for colors, spacing, shadows
- Glassmorphism effects
- Dark mode support
- Custom scrollbar styling
- Animation utilities

Layout Components

✅ MainLayout.tsx - Main page wrapper with sidebar + navbar
✅ Sidebar.tsx - Navigation with sections, badges, icons
✅ Navbar.tsx - Search bar, theme toggle, notifications, user menu

UI Primitives

✅ Button.tsx - Variants: primary, secondary, outline, ghost, etc.
✅ Card.tsx - CardHeader, CardBody, CardFooter subcomponents
✅ Badge.tsx - Status badges with variants
✅ Avatar.tsx - User avatars with fallbacks
✅ Input.tsx - Form inputs with validation states
✅ SearchBar.tsx - Search input with glass effect
✅ Table.tsx - Data table with hover effects
✅ ProgressBar.tsx - Progress indicators
✅ HolidayCard.tsx - Calendar date display
✅ GlassButton.tsx - Glassmorphism button variant
✅ GlassCard.tsx - Glassmorphism card variant

Page-Specific Components

✅ StatCard.tsx - Dashboard statistics with trend indicators
✅ DepartmentUsage.tsx - Department leave usage widget
✅ UpcomingHolidays.tsx - Holiday calendar widget
✅ ProtectedRoute.tsx - Authentication route guard

🎨 Color System

// Primary Colors
primary: '#14b8a6'      // Teal 500
secondary: '#10b981'    // Emerald 500

// Semantic
success: '#10b981'      // Emerald 500
warning: '#f59e0b'      // Amber 500
danger: '#ef4444'       // Red 500
info: '#3b82f6'         // Blue 500

// Light Mode
background: Radial gradient (blue → cyan → teal)
glass: rgba(255, 255, 255, 0.45)
border: rgba(255, 255, 255, 0.6)

// Dark Mode
background: Radial gradient (slate-800 → slate-900 → black)
glass: rgba(30, 41, 59, 0.6)
border: rgba(255, 255, 255, 0.1)

📦 Icon Library (solid-icons)

Icon Component	Usage
`TbDashboard`	Dashboard
`TbUsers`	Employees
`TbCalendarEvent`	Leave Requests
`TbCalendar`	Calendar
`TbChartBar`	Reports
`TbUserGroup`	User Groups
`TbSettings`	Settings
`TbLogout`	Logout
`TbSearch`	Search
`TbBell`	Notifications
`TbMoon`/`TbSun`	Theme Toggle
`TbMenu2`	Mobile Menu
`TbLeaf`	Company Logo
`TbTrendingUp`	Stats Increase
`TbAlertCircle`	Warning
`TbClock`	Pending
`TbBeach`	Vacation
`TbCircleCheck`	Approved
`TbCheck`	Approve Action
`TbX`	Reject Action
`TbDotsVertical`	More Options

🎯 Usage Guidelines

When to Create a UI Primitive

Create a component in packages/ui/src/components/ui/ when:

✅ It’s a generic, reusable design element
✅ It has no business logic or domain data
✅ It can be used across multiple pages
✅ It’s part of the design system

Examples: Button, Input, Card, Badge, Avatar

When to Create a Page Component

Create a component in apps/panel/src/components/pages/[feature]/ when:

✅ It contains domain-specific logic
✅ It uses business data (e.g., statistics, department info)
✅ It’s specific to a particular page or feature
✅ It combines multiple UI primitives

Examples: StatCard, DepartmentUsage, UpcomingHolidays

Import Patterns

// ✅ CORRECT: Import UI primitives from package
import { Card, Badge, Avatar } from "@monorepo/solid-pkg-ui";

// ✅ CORRECT: Import page components locally
import { StatCard, DepartmentUsage } from "../components/pages/dashboard";

// ✅ CORRECT: Import utilities from package
import { cn } from "@monorepo/solid-pkg-ui/utils";

// ❌ WRONG: Don't import page-specific components from the package
import { StatCard } from "@monorepo/solid-pkg-ui"; // This won't work!

💡 Design Principles

1. Glassmorphism

Frosted glass effect with backdrop blur
Semi-transparent backgrounds
Layered depth with shadows
Border highlights

2. Micro-interactions

Scale animations on hover
Smooth transitions (300ms duration)
Backdrop blur effects
Color shifts on interaction

3. Dark Mode

Automatic system preference detection
Persistent storage
Smooth transitions
Optimized contrast ratios

4. Accessibility

ARIA labels on all interactive elements
Keyboard navigation support
Focus indicators
Screen reader compatibility

5. Responsive Design

Mobile-first approach
Tailwind breakpoints (sm, md, lg, xl)
Touch-friendly targets (min 44x44px)
Collapsible sidebar on mobile

🚀 Adding New Components

For UI Primitives:

Create component in packages/ui/src/components/ui/[ComponentName].tsx
Add export to packages/ui/src/components/ui/index.ts
Add export to packages/ui/src/index.ts
Document props and usage

For Page Components:

Create component in apps/panel/src/components/pages/[feature]/[ComponentName].tsx
Add export to apps/panel/src/components/pages/[feature]/index.ts
Import UI primitives from @monorepo/solid-pkg-ui
Use in your page routes

📝 Example: Creating a New Page Component

// apps/panel/src/components/pages/dashboard/TeamStats.tsx
import { Card, CardBody } from "@monorepo/solid-pkg-ui";
import { cn } from "@monorepo/solid-pkg-ui/utils";
import { TbUsers } from "solid-icons/tb";

export const TeamStats = () => {
  return (
    <Card>
      <CardBody>
        <div class="flex items-center gap-4">
          <TbUsers size={32} class="text-primary" />
          <div>
            <h3 class="text-2xl font-bold">24</h3>
            <p class="text-sm text-slate-500">Team Members</p>
          </div>
        </div>
      </CardBody>
    </Card>
  );
};

// apps/panel/src/components/pages/dashboard/index.ts
export { TeamStats } from "./TeamStats";
export { StatCard } from "./StatCard";
export { DepartmentUsage } from "./DepartmentUsage";
export { UpcomingHolidays } from "./UpcomingHolidays";

// apps/panel/src/routes/index.tsx
import { TeamStats } from "../components/pages/dashboard";

export default function DashboardPage() {
  return <TeamStats />;
}

🔧 Utility Functions

`cn()` - Class Name Utility

Combines Tailwind classes with conditional logic:

import { cn } from "@monorepo/solid-pkg-ui/utils";

<div class={cn("base-class", isActive && "active-class", props.class)} />;

This utility uses clsx and tailwind-merge to handle class name conflicts intelligently.

Getting Started

Development

UI Components

Design System Implementation

Glassmorphism Design System Implementation

🏗️ Component Architecture

📚 Component Categories

1. UI Primitives (`packages/ui/src/components/ui/`)

2. Layout Components (`packages/ui/src/components/layout/`)

3. Page-Specific Components (`apps/panel/src/components/pages/`)

✅ Completed Components

Global Theme

Layout Components

UI Primitives

Page-Specific Components

🎨 Color System

📦 Icon Library (solid-icons)

🎯 Usage Guidelines

When to Create a UI Primitive

When to Create a Page Component

Import Patterns

💡 Design Principles

1. Glassmorphism

2. Micro-interactions

3. Dark Mode

4. Accessibility

5. Responsive Design

🚀 Adding New Components

For UI Primitives:

For Page Components:

📝 Example: Creating a New Page Component

🔧 Utility Functions

`cn()` - Class Name Utility

​Glassmorphism Design System Implementation

​🏗️ Component Architecture

​📚 Component Categories

​1. UI Primitives (packages/ui/src/components/ui/)

​2. Layout Components (packages/ui/src/components/layout/)

​3. Page-Specific Components (apps/panel/src/components/pages/)

​✅ Completed Components

​Global Theme

​Layout Components

​UI Primitives

​Page-Specific Components

​🎨 Color System

​📦 Icon Library (solid-icons)

​🎯 Usage Guidelines

​When to Create a UI Primitive

​When to Create a Page Component

​Import Patterns

​💡 Design Principles

​1. Glassmorphism

​2. Micro-interactions

​3. Dark Mode

​4. Accessibility

​5. Responsive Design

​🚀 Adding New Components

​For UI Primitives:

​For Page Components:

​📝 Example: Creating a New Page Component

​🔧 Utility Functions

​cn() - Class Name Utility

Glassmorphism Design System Implementation

🏗️ Component Architecture

📚 Component Categories

1. UI Primitives (`packages/ui/src/components/ui/`)

2. Layout Components (`packages/ui/src/components/layout/`)

3. Page-Specific Components (`apps/panel/src/components/pages/`)

✅ Completed Components

Global Theme

Layout Components

UI Primitives

Page-Specific Components

🎨 Color System

📦 Icon Library (solid-icons)

🎯 Usage Guidelines

When to Create a UI Primitive

When to Create a Page Component

Import Patterns

💡 Design Principles

1. Glassmorphism

2. Micro-interactions

3. Dark Mode

4. Accessibility

5. Responsive Design

🚀 Adding New Components

For UI Primitives:

For Page Components:

📝 Example: Creating a New Page Component

🔧 Utility Functions

`cn()` - Class Name Utility