Attendance List

Employee attendance tracking list with status badges, summary statistics, search and filter toolbar, clock times, and work hours.

Full List with Summary Stats

Preview

Daily Attendance

24 Present

3 Absent

5 Late

2 On Leave

8 Remote

Ana Martinez Engineering

Present

In 08:55

Out --:--

5h 12m

Carlos Ruiz Design

Late

In 09:23

Out --:--

4h 44m

Laura Garcia Sales

Remote

In 08:30

Out --:--

5h 37m

Pedro Lopez HR

Absent

In --:--

Out --:--

Maria Fernandez Finance

On Leave

In --:--

Out --:--

Showing 5 of 42 employees ERPlora HR - Feb 7, 2026

<div class="attendance-list">
  <div class="attendance-list-header">
    <div class="attendance-list-header-row">
      <h2 class="attendance-list-title">Daily Attendance</h2>
      <div class="attendance-list-date">
        <input type="date" class="attendance-list-date-input" value="2026-02-07">
      </div>
    </div>
  </div>
  <div class="attendance-list-summary">
    <div class="attendance-list-stat attendance-list-stat-present">
      <span class="attendance-list-stat-value">24</span>
      <span class="attendance-list-stat-label">Present</span>
    </div>
    <div class="attendance-list-stat attendance-list-stat-absent">
      <span class="attendance-list-stat-value">3</span>
      <span class="attendance-list-stat-label">Absent</span>
    </div>
    <div class="attendance-list-stat attendance-list-stat-late">
      <span class="attendance-list-stat-value">5</span>
      <span class="attendance-list-stat-label">Late</span>
    </div>
    <div class="attendance-list-stat attendance-list-stat-leave">
      <span class="attendance-list-stat-value">2</span>
      <span class="attendance-list-stat-label">On Leave</span>
    </div>
    <div class="attendance-list-stat attendance-list-stat-remote">
      <span class="attendance-list-stat-value">8</span>
      <span class="attendance-list-stat-label">Remote</span>
    </div>
  </div>
  <div class="attendance-list-body">
    <div class="attendance-list-item">
      <div class="attendance-list-avatar">
        <div class="attendance-list-avatar-initials">AM</div>
      </div>
      <div class="attendance-list-info">
        <span class="attendance-list-name">Ana Martinez</span>
        <span class="attendance-list-department">Engineering</span>
      </div>
      <span class="attendance-list-status attendance-list-status-present">
        <span class="attendance-list-status-dot"></span>
        Present
      </span>
      <div class="attendance-list-times">
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-label">In</span>
          <span class="attendance-list-clock-time">08:55</span>
        </div>
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-label">Out</span>
          <span class="attendance-list-clock-time">--:--</span>
        </div>
        <span class="attendance-list-work-hours">5h 12m</span>
      </div>
    </div>

    <div class="attendance-list-item">
      <div class="attendance-list-avatar">
        <div class="attendance-list-avatar-initials">CR</div>
      </div>
      <div class="attendance-list-info">
        <span class="attendance-list-name">Carlos Ruiz</span>
        <span class="attendance-list-department">Design</span>
      </div>
      <span class="attendance-list-status attendance-list-status-late">
        <span class="attendance-list-status-dot"></span>
        Late
      </span>
      <div class="attendance-list-times">
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-label">In</span>
          <span class="attendance-list-clock-time attendance-list-clock-time-late">09:23</span>
        </div>
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-label">Out</span>
          <span class="attendance-list-clock-time">--:--</span>
        </div>
        <span class="attendance-list-work-hours attendance-list-work-hours-under">4h 44m</span>
      </div>
    </div>

    <div class="attendance-list-item">
      <div class="attendance-list-avatar">
        <div class="attendance-list-avatar-initials">LG</div>
      </div>
      <div class="attendance-list-info">
        <span class="attendance-list-name">Laura Garcia</span>
        <span class="attendance-list-department">Sales</span>
      </div>
      <span class="attendance-list-status attendance-list-status-remote">
        <span class="attendance-list-status-dot"></span>
        Remote
      </span>
      <div class="attendance-list-times">
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-label">In</span>
          <span class="attendance-list-clock-time">08:30</span>
        </div>
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-label">Out</span>
          <span class="attendance-list-clock-time">--:--</span>
        </div>
        <span class="attendance-list-work-hours attendance-list-work-hours-over">5h 37m</span>
      </div>
    </div>

    <div class="attendance-list-item">
      <div class="attendance-list-avatar">
        <div class="attendance-list-avatar-initials">PL</div>
      </div>
      <div class="attendance-list-info">
        <span class="attendance-list-name">Pedro Lopez</span>
        <span class="attendance-list-department">HR</span>
      </div>
      <span class="attendance-list-status attendance-list-status-absent">
        <span class="attendance-list-status-dot"></span>
        Absent
      </span>
      <div class="attendance-list-times">
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-label">In</span>
          <span class="attendance-list-clock-time">--:--</span>
        </div>
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-label">Out</span>
          <span class="attendance-list-clock-time">--:--</span>
        </div>
      </div>
    </div>

    <div class="attendance-list-item">
      <div class="attendance-list-avatar">
        <div class="attendance-list-avatar-initials">MF</div>
      </div>
      <div class="attendance-list-info">
        <span class="attendance-list-name">Maria Fernandez</span>
        <span class="attendance-list-department">Finance</span>
      </div>
      <span class="attendance-list-status attendance-list-status-leave">
        <span class="attendance-list-status-dot"></span>
        On Leave
      </span>
      <div class="attendance-list-times">
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-label">In</span>
          <span class="attendance-list-clock-time">--:--</span>
        </div>
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-label">Out</span>
          <span class="attendance-list-clock-time">--:--</span>
        </div>
      </div>
    </div>
  </div>
  <div class="attendance-list-footer">
    <span>Showing 5 of 42 employees</span>
    <span>ERPlora HR - Feb 7, 2026</span>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full overflow-hidden bg-base-100 rounded-box border border-base-300">
  <!-- Header -->
  <div class="flex flex-col gap-4 p-6 border-b border-base-300">
    <div class="flex items-center justify-between">
      <h2 class="font-semibold text-lg m-0">Daily Attendance</h2>
      <input type="date" class="px-4 py-2 border border-base-300 rounded-field text-sm bg-base-100" value="2026-02-07">
    </div>
  </div>
  <!-- Summary -->
  <div class="grid grid-cols-5 gap-2 px-6 py-4 bg-base-200 border-b border-base-300">
    <div class="flex flex-col items-center gap-1 p-2 bg-base-100 rounded-field">
      <span class="text-xl font-bold text-success tabular-nums">24</span>
      <span class="text-xs font-medium uppercase text-base-content/60">Present</span>
    </div>
    <div class="flex flex-col items-center gap-1 p-2 bg-base-100 rounded-field">
      <span class="text-xl font-bold text-error tabular-nums">3</span>
      <span class="text-xs font-medium uppercase text-base-content/60">Absent</span>
    </div>
    <div class="flex flex-col items-center gap-1 p-2 bg-base-100 rounded-field">
      <span class="text-xl font-bold text-warning tabular-nums">5</span>
      <span class="text-xs font-medium uppercase text-base-content/60">Late</span>
    </div>
    <div class="flex flex-col items-center gap-1 p-2 bg-base-100 rounded-field">
      <span class="text-xl font-bold text-info tabular-nums">2</span>
      <span class="text-xs font-medium uppercase text-base-content/60">On Leave</span>
    </div>
    <div class="flex flex-col items-center gap-1 p-2 bg-base-100 rounded-field">
      <span class="text-xl font-bold text-secondary tabular-nums">8</span>
      <span class="text-xs font-medium uppercase text-base-content/60">Remote</span>
    </div>
  </div>
  <!-- Items -->
  <div class="flex-1 overflow-y-auto">
    <div class="flex items-center gap-4 px-6 py-4 border-b border-base-300 hover:bg-base-200 transition">
      <div class="w-11 h-11 rounded-full bg-primary text-primary-content flex items-center justify-center font-semibold shrink-0">AM</div>
      <div class="flex-1 min-w-0"><div class="font-medium truncate">Ana Martinez</div><div class="text-sm text-base-content/60">Engineering</div></div>
      <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold uppercase bg-success/10 text-success"><span class="w-2.5 h-2.5 rounded-full bg-current"></span>Present</span>
      <div class="flex flex-col items-end gap-0.5 text-sm tabular-nums"><span>In: 08:55</span><span>Out: --:--</span><span class="text-xs text-base-content/60">5h 12m</span></div>
    </div>
  </div>
  <div class="flex items-center justify-between px-6 py-4 bg-base-200 border-t border-base-300 text-sm text-base-content/60">
    <span>Showing 5 of 42 employees</span>
    <span>ERPlora HR - Feb 7, 2026</span>
  </div>
</div>

Requires: tw.min.css

// Date picker change handler
document.querySelector('.attendance-list-date-input')?.addEventListener('change', (e) => {
  // Fetch attendance data for the selected date
  const date = e.target.value;
  console.log('Load attendance for:', date);
});

// Row click handler
document.querySelectorAll('.attendance-list-item').forEach(item => {
  item.addEventListener('click', () => {
    // Show employee detail or time log
  });
});

Filter Toolbar

Preview

Team Attendance

Ana Martinez Engineering

Present

In 08:55

Out --:--

5h 12m

Juan Sanchez Marketing

Present

In 08:45

Out --:--

5h 22m

Laura Garcia Sales

Remote

In 08:30

Out --:--

5h 37m

Showing 3 of 42 employees ERPlora HR

<div class="attendance-list">
  <div class="attendance-list-header">
    <div class="attendance-list-header-row">
      <h2 class="attendance-list-title">Team Attendance</h2>
      <div class="attendance-list-date">
        <input type="date" class="attendance-list-date-input" value="2026-02-07">
      </div>
    </div>
  </div>
  <div class="attendance-list-toolbar">
    <div class="attendance-list-search">
      <svg class="attendance-list-search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
      <input type="text" class="attendance-list-search-input" placeholder="Search employees...">
    </div>
    <div class="attendance-list-filter">
      <button class="attendance-list-filter-btn attendance-list-filter-btn-active">All</button>
      <button class="attendance-list-filter-btn attendance-list-filter-btn-present">Present</button>
      <button class="attendance-list-filter-btn attendance-list-filter-btn-absent">Absent</button>
      <button class="attendance-list-filter-btn attendance-list-filter-btn-late">Late</button>
      <button class="attendance-list-filter-btn attendance-list-filter-btn-leave">Leave</button>
      <button class="attendance-list-filter-btn attendance-list-filter-btn-remote">Remote</button>
    </div>
  </div>
  <div class="attendance-list-body">
    <div class="attendance-list-item attendance-list-item-clickable">
      <div class="attendance-list-avatar">
        <div class="attendance-list-avatar-initials">AM</div>
      </div>
      <div class="attendance-list-info">
        <span class="attendance-list-name">Ana Martinez</span>
        <span class="attendance-list-department">Engineering</span>
      </div>
      <span class="attendance-list-status attendance-list-status-present">
        <span class="attendance-list-status-dot"></span>
        Present
      </span>
      <div class="attendance-list-times">
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-label">In</span>
          <span class="attendance-list-clock-time">08:55</span>
        </div>
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-label">Out</span>
          <span class="attendance-list-clock-time">--:--</span>
        </div>
        <span class="attendance-list-work-hours">5h 12m</span>
      </div>
    </div>

    <div class="attendance-list-item attendance-list-item-clickable">
      <div class="attendance-list-avatar">
        <div class="attendance-list-avatar-initials">JS</div>
      </div>
      <div class="attendance-list-info">
        <span class="attendance-list-name">Juan Sanchez</span>
        <span class="attendance-list-department">Marketing</span>
      </div>
      <span class="attendance-list-status attendance-list-status-present">
        <span class="attendance-list-status-dot"></span>
        Present
      </span>
      <div class="attendance-list-times">
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-label">In</span>
          <span class="attendance-list-clock-time">08:45</span>
        </div>
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-label">Out</span>
          <span class="attendance-list-clock-time">--:--</span>
        </div>
        <span class="attendance-list-work-hours attendance-list-work-hours-over">5h 22m</span>
      </div>
    </div>

    <div class="attendance-list-item attendance-list-item-clickable">
      <div class="attendance-list-avatar">
        <div class="attendance-list-avatar-initials">LG</div>
      </div>
      <div class="attendance-list-info">
        <span class="attendance-list-name">Laura Garcia</span>
        <span class="attendance-list-department">Sales</span>
      </div>
      <span class="attendance-list-status attendance-list-status-remote">
        <span class="attendance-list-status-dot"></span>
        Remote
      </span>
      <div class="attendance-list-times">
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-label">In</span>
          <span class="attendance-list-clock-time">08:30</span>
        </div>
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-label">Out</span>
          <span class="attendance-list-clock-time">--:--</span>
        </div>
        <span class="attendance-list-work-hours attendance-list-work-hours-over">5h 37m</span>
      </div>
    </div>
  </div>
  <div class="attendance-list-footer">
    <span>Showing 3 of 42 employees</span>
    <span>ERPlora HR</span>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full overflow-hidden bg-base-100 rounded-box border border-base-300">
  <div class="flex flex-col gap-4 p-6 border-b border-base-300">
    <div class="flex items-center justify-between">
      <h2 class="font-semibold text-lg m-0">Team Attendance</h2>
      <input type="date" class="px-4 py-2 border border-base-300 rounded-field text-sm" value="2026-02-07">
    </div>
  </div>
  <!-- Toolbar -->
  <div class="flex items-center flex-wrap gap-4 px-6 py-2 border-b border-base-300">
    <div class="flex-1 relative min-w-50">
      <svg class="absolute left-2 top-1/2 -translate-y-1/2 w-4.5 h-4.5 text-base-content/40 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
      <input type="text" placeholder="Search employees..." class="w-full pl-9 pr-4 py-2 border border-base-300 rounded-field bg-base-200 text-sm focus:border-primary focus:bg-base-100 focus:outline-none">
    </div>
    <div class="flex items-center gap-1">
      <button class="px-2 py-0.5 border border-primary bg-primary text-primary-content rounded-full text-sm">All</button>
      <button class="px-2 py-0.5 border border-base-300 bg-base-100 text-base-content/60 rounded-full text-sm hover:bg-base-200">Present</button>
      <button class="px-2 py-0.5 border border-base-300 bg-base-100 text-base-content/60 rounded-full text-sm hover:bg-base-200">Absent</button>
      <button class="px-2 py-0.5 border border-base-300 bg-base-100 text-base-content/60 rounded-full text-sm hover:bg-base-200">Late</button>
      <button class="px-2 py-0.5 border border-base-300 bg-base-100 text-base-content/60 rounded-full text-sm hover:bg-base-200">Leave</button>
      <button class="px-2 py-0.5 border border-base-300 bg-base-100 text-base-content/60 rounded-full text-sm hover:bg-base-200">Remote</button>
    </div>
  </div>
  <!-- Items (same pattern as above) -->
  <div class="flex-1 overflow-y-auto">
    <div class="flex items-center gap-4 px-6 py-4 border-b border-base-300 hover:bg-base-200 cursor-pointer transition">
      <div class="w-11 h-11 rounded-full bg-primary text-primary-content flex items-center justify-center font-semibold shrink-0">AM</div>
      <div class="flex-1 min-w-0"><div class="font-medium truncate">Ana Martinez</div><div class="text-sm text-base-content/60">Engineering</div></div>
      <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold uppercase bg-success/10 text-success"><span class="w-2.5 h-2.5 rounded-full bg-current"></span>Present</span>
      <div class="flex flex-col items-end text-sm tabular-nums"><span>In: 08:55</span><span>5h 12m</span></div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Filter buttons toggle
document.querySelectorAll('.attendance-list-filter-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.attendance-list-filter-btn').forEach(b =>
      b.classList.remove('attendance-list-filter-btn-active')
    );
    btn.classList.add('attendance-list-filter-btn-active');
    // Filter items by status
  });
});

// Search input
const searchInput = document.querySelector('.attendance-list-search-input');
searchInput?.addEventListener('input', (e) => {
  const query = e.target.value.toLowerCase();
  document.querySelectorAll('.attendance-list-item').forEach(item => {
    const name = item.querySelector('.attendance-list-name')?.textContent.toLowerCase();
    item.style.display = name?.includes(query) ? '' : 'none';
  });
});

Compact Variant

Preview

Quick View

Ana Martinez Engineering

Present

08:55

5h 12m

Carlos Ruiz Design

Late

09:23

4h 44m

Laura Garcia Sales

Remote

08:30

5h 37m

Pedro Lopez HR

Absent

--:--

Juan Sanchez Marketing

Present

08:45

5h 22m

<div class="attendance-list attendance-list-compact">
  <div class="attendance-list-header">
    <div class="attendance-list-header-row">
      <h2 class="attendance-list-title">Quick View</h2>
    </div>
  </div>
  <div class="attendance-list-body">
    <div class="attendance-list-item">
      <div class="attendance-list-avatar">
        <div class="attendance-list-avatar-initials">AM</div>
      </div>
      <div class="attendance-list-info">
        <span class="attendance-list-name">Ana Martinez</span>
        <span class="attendance-list-department">Engineering</span>
      </div>
      <span class="attendance-list-status attendance-list-status-present">
        <span class="attendance-list-status-dot"></span>
        Present
      </span>
      <div class="attendance-list-times attendance-list-times-compact">
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-time">08:55</span>
        </div>
        <span class="attendance-list-work-hours">5h 12m</span>
      </div>
    </div>

    <div class="attendance-list-item">
      <div class="attendance-list-avatar">
        <div class="attendance-list-avatar-initials">CR</div>
      </div>
      <div class="attendance-list-info">
        <span class="attendance-list-name">Carlos Ruiz</span>
        <span class="attendance-list-department">Design</span>
      </div>
      <span class="attendance-list-status attendance-list-status-late">
        <span class="attendance-list-status-dot"></span>
        Late
      </span>
      <div class="attendance-list-times attendance-list-times-compact">
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-time attendance-list-clock-time-late">09:23</span>
        </div>
        <span class="attendance-list-work-hours attendance-list-work-hours-under">4h 44m</span>
      </div>
    </div>

    <div class="attendance-list-item">
      <div class="attendance-list-avatar">
        <div class="attendance-list-avatar-initials">LG</div>
      </div>
      <div class="attendance-list-info">
        <span class="attendance-list-name">Laura Garcia</span>
        <span class="attendance-list-department">Sales</span>
      </div>
      <span class="attendance-list-status attendance-list-status-remote">
        <span class="attendance-list-status-dot"></span>
        Remote
      </span>
      <div class="attendance-list-times attendance-list-times-compact">
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-time">08:30</span>
        </div>
        <span class="attendance-list-work-hours attendance-list-work-hours-over">5h 37m</span>
      </div>
    </div>

    <div class="attendance-list-item">
      <div class="attendance-list-avatar">
        <div class="attendance-list-avatar-initials">PL</div>
      </div>
      <div class="attendance-list-info">
        <span class="attendance-list-name">Pedro Lopez</span>
        <span class="attendance-list-department">HR</span>
      </div>
      <span class="attendance-list-status attendance-list-status-absent">
        <span class="attendance-list-status-dot"></span>
        Absent
      </span>
      <div class="attendance-list-times attendance-list-times-compact">
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-time">--:--</span>
        </div>
      </div>
    </div>

    <div class="attendance-list-item">
      <div class="attendance-list-avatar">
        <div class="attendance-list-avatar-initials">JS</div>
      </div>
      <div class="attendance-list-info">
        <span class="attendance-list-name">Juan Sanchez</span>
        <span class="attendance-list-department">Marketing</span>
      </div>
      <span class="attendance-list-status attendance-list-status-present">
        <span class="attendance-list-status-dot"></span>
        Present
      </span>
      <div class="attendance-list-times attendance-list-times-compact">
        <div class="attendance-list-clock">
          <span class="attendance-list-clock-time">08:45</span>
        </div>
        <span class="attendance-list-work-hours attendance-list-work-hours-over">5h 22m</span>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="border border-base-300 rounded-box overflow-hidden bg-base-100">
  <div class="divide-y divide-base-200">
    <div class="flex items-center gap-3 px-4 py-2">
      <div class="w-8 h-8 rounded-full bg-primary text-primary-content flex items-center justify-center text-xs font-semibold shrink-0">AM</div>
      <div class="flex-1 min-w-0">
        <span class="text-sm font-medium block truncate">Ana Martinez</span>
        <span class="text-xs text-base-content/50">Engineering</span>
      </div>
      <span class="inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full bg-success/10 text-success">
        <span class="w-1.5 h-1.5 rounded-full bg-success"></span>
        Present
      </span>
      <div class="flex items-center gap-2 text-xs tabular-nums text-base-content/60">
        <span>08:00</span>
        <span class="font-medium text-base-content">6h 07m</span>
      </div>
    </div>
    <div class="flex items-center gap-3 px-4 py-2">
      <div class="w-8 h-8 rounded-full bg-error text-error-content flex items-center justify-center text-xs font-semibold shrink-0">JS</div>
      <div class="flex-1 min-w-0">
        <span class="text-sm font-medium block truncate">Juan Sanchez</span>
        <span class="text-xs text-base-content/50">Marketing</span>
      </div>
      <span class="inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full bg-success/10 text-success">
        <span class="w-1.5 h-1.5 rounded-full bg-success"></span>
        Present
      </span>
      <div class="flex items-center gap-2 text-xs tabular-nums text-base-content/60">
        <span>08:45</span>
        <span class="font-medium text-success">5h 22m</span>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JS needed — compact is a CSS-only size variant

Classes Reference

Class	Description
`.attendance-list`	Base container with border and rounded corners
`.attendance-list-compact`	Compact variant (smaller items and avatars)
`.attendance-list-inset`	Adds margin around the list
`.attendance-list.glass`	Glass morphism variant
`.attendance-list-header`	Header section with title and date
`.attendance-list-header-row`	Flex row inside header
`.attendance-list-title`	List title text
`.attendance-list-date`	Date picker container
`.attendance-list-date-input`	Date input field
`.attendance-list-summary`	Summary stats grid section
`.attendance-list-stat`	Individual stat card
`.attendance-list-stat-present`	Present stat (green value)
`.attendance-list-stat-absent`	Absent stat (red value)
`.attendance-list-stat-late`	Late stat (yellow value)
`.attendance-list-stat-leave`	Leave stat (blue value)
`.attendance-list-stat-remote`	Remote stat (secondary value)
`.attendance-list-stat-value`	Stat number
`.attendance-list-stat-label`	Stat label text
`.attendance-list-toolbar`	Search and filter toolbar
`.attendance-list-search`	Search input container
`.attendance-list-search-input`	Search text input
`.attendance-list-search-icon`	Search magnifying glass icon
`.attendance-list-filter`	Filter buttons container
`.attendance-list-filter-btn`	Filter pill button
`.attendance-list-filter-btn-active`	Active filter state
`.attendance-list-filter-btn-{status}`	Status-colored active state: present, absent, late, leave, remote
`.attendance-list-body`	Scrollable items container
`.attendance-list-body-fixed-height`	Fixed max-height (400px) body
`.attendance-list-item`	Single attendance row
`.attendance-list-item-clickable`	Clickable item with active state
`.attendance-list-avatar`	Avatar container
`.attendance-list-avatar-img`	Avatar image element
`.attendance-list-avatar-initials`	Initials fallback avatar
`.attendance-list-info`	Name and department container
`.attendance-list-name`	Employee name text
`.attendance-list-department`	Department text
`.attendance-list-status`	Status badge pill
`.attendance-list-status-{type}`	Status color: present, absent, late, leave, remote
`.attendance-list-status-dot`	Colored dot inside status badge
`.attendance-list-times`	Clock times and hours container
`.attendance-list-times-compact`	Horizontal compact times layout
`.attendance-list-clock`	Clock in/out time row
`.attendance-list-clock-label`	In/Out label
`.attendance-list-clock-time`	Time value
`.attendance-list-clock-time-late`	Late time highlight (warning color)
`.attendance-list-work-hours`	Total work hours text
`.attendance-list-work-hours-over`	Over target hours (green)
`.attendance-list-work-hours-under`	Under target hours (yellow)
`.attendance-list-footer`	Footer with pagination info
`.attendance-list-empty`	Empty state container
`.attendance-list-empty-icon`	Empty state icon
`.attendance-list-empty-title`	Empty state title
`.attendance-list-empty-text`	Empty state description