@php // Sample data for demonstration $sampleEmployees = [ (object)[ 'id' => '1', 'name' => 'Sarah Chen', 'email' => 'sarah.chen@company.com', 'phone' => '+1 (555) 123-4567', 'position' => 'Senior Software Engineer', 'department' => 'Engineering', 'location' => 'San Francisco, CA', 'status' => 'active', 'joinDate' => '2024-01-15', 'avatar' => null ], (object)[ 'id' => '2', 'name' => 'Michael Johnson', 'email' => 'm.johnson@company.com', 'phone' => '+1 (555) 234-5678', 'position' => 'Product Manager', 'department' => 'Product', 'location' => 'New York, NY', 'status' => 'active', 'joinDate' => '2024-02-01', 'avatar' => null ], (object)[ 'id' => '3', 'name' => 'Emily Rodriguez', 'email' => 'emily.r@company.com', 'phone' => '+1 (555) 345-6789', 'position' => 'UX Designer', 'department' => 'Design', 'location' => 'Austin, TX', 'status' => 'on-leave', 'joinDate' => '2023-11-20', 'avatar' => null ], (object)[ 'id' => '4', 'name' => 'David Kim', 'email' => 'david.kim@company.com', 'phone' => '+1 (555) 456-7890', 'position' => 'Data Analyst', 'department' => 'Analytics', 'location' => 'Seattle, WA', 'status' => 'active', 'joinDate' => '2024-01-08', 'avatar' => null ] ]; $sampleTasks = [ 'todo' => [ [ 'id' => '1', 'title' => 'Design new employee onboarding flow', 'description' => 'Create wireframes and mockups for the new employee onboarding process', 'priority' => 'high', 'assignee' => ['name' => 'Sarah Chen', 'avatar' => null], 'dueDate' => '2024-01-15', 'comments' => 3, 'attachments' => 2, 'tags' => ['Design', 'UX'] ], [ 'id' => '2', 'title' => 'Update employee handbook', 'description' => 'Review and update the company employee handbook with latest policies', 'priority' => 'medium', 'assignee' => ['name' => 'Mike Johnson', 'avatar' => null], 'dueDate' => '2024-01-20', 'comments' => 1, 'tags' => ['Documentation'] ] ], 'inprogress' => [ [ 'id' => '3', 'title' => 'Implement payroll automation', 'description' => 'Develop automated payroll calculation system with tax deductions', 'priority' => 'high', 'assignee' => ['name' => 'Alex Rivera', 'avatar' => null], 'dueDate' => '2024-01-25', 'comments' => 8, 'attachments' => 1, 'tags' => ['Development', 'Backend'] ] ], 'review' => [ [ 'id' => '4', 'title' => 'Performance review templates', 'description' => 'Create standardized templates for annual performance reviews', 'priority' => 'medium', 'assignee' => ['name' => 'Emma Wilson', 'avatar' => null], 'dueDate' => '2024-01-18', 'comments' => 2, 'tags' => ['HR', 'Templates'] ] ], 'done' => [ [ 'id' => '5', 'title' => 'Setup employee database', 'description' => 'Configure and populate the new employee management database', 'priority' => 'high', 'assignee' => ['name' => 'David Kim', 'avatar' => null], 'comments' => 5, 'tags' => ['Database', 'Setup'] ], [ 'id' => '6', 'title' => 'Create leave request form', 'description' => 'Design and implement the online leave request form', 'priority' => 'low', 'assignee' => ['name' => 'Lisa Zhang', 'avatar' => null], 'comments' => 1, 'tags' => ['Frontend', 'Forms'] ] ] ]; @endphp @extends('layouts/layoutMaster') @section('title', 'HR Components Demo') @section('vendor-style') @vite(['resources/assets/vendor/libs/apex-charts/apex-charts.scss']) @endsection @section('vendor-script') @vite(['resources/assets/vendor/libs/apex-charts/apexcharts.js']) @endsection @section('page-style') @vite(['resources/assets/scss/components/_hr-enhanced.scss']) @endsection @section('content')

HR Components Demo

Showcase of converted HR Style Vault components

Back to Dashboard Task Management
Metric Cards
Employee Cards
@foreach($sampleEmployees as $employee)
@endforeach
Task Management Kanban Board
Component Features
Metric Cards
  • Multiple variants (default, primary, success, warning)
  • Trend indicators with positive/negative styling
  • Hover effects and animations
  • Responsive design
  • Customizable icons and colors
Employee Cards
  • Status indicators (active, inactive, on-leave)
  • Dropdown menus for actions
  • Contact information with clickable links
  • Avatar fallbacks with initials
  • Hover effects and smooth transitions
Kanban Board
  • Drag and drop functionality (ready for implementation)
  • Priority indicators with color coding
  • Task details (assignee, due date, comments, attachments)
  • Tag system for categorization
  • Responsive column layout
Integration Features
  • Laravel Blade component system
  • Bootstrap 5 compatibility
  • Custom SCSS styling
  • Existing app theme integration
  • Mobile responsive design
Usage Instructions
Metric Card
<x-metric-card 
  title="Total Employees" 
  value="248" 
  icon="bx bx-user" 
  variant="primary"
  :trend="['value' => 12, 'isPositive' => true]"
/>
Employee Card
<x-employee-card 
  :employee="$employee" 
/>
Kanban Board
<x-kanban-board 
  :tasks="$tasks" 
/>
@endsection