HRM-System/docs/PLAN-biometric-sync-status.md

PLAN: Sync Status Column Integration

This plan outlines the changes required to add a "Status" column to the biometric attendance table, displaying whether each daily entry is "Synced" or "Pending".

---

🏗️ Target Files

1. Frontend UI Page: resources/js/pages/hr/biometric-attendance/index.tsx

---

🛠️ Proposed Implementation Steps

Phase 1: Frontend Table Update

Modify index.tsx:

• Insert the new column into the columns array right before the end (which sits before the actions column):

  {
    key: 'sync_status',
    label: t('Status'),
    sortable: false,
    render: (value: string) => {
      if (value === 'synced') {
        return (
          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-green-50 text-green-700 dark:bg-green-950/20 dark:text-green-400 border border-green-200/50">
            <CheckCircle className="h-3.5 w-3.5" />
            {t('Synced')}
          </span>
        );
      }
      return (
        <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-amber-50 text-amber-700 dark:bg-amber-950/20 dark:text-amber-400 border border-amber-200/50">
          <Clock className="h-3.5 w-3.5" />
          {t('Pending')}
        </span>
      );
    }
  }
  

---

🏁 Verification Checklist

• Verify Status Column presence: Open the biometric dashboard and check that the new "Status" column is visible.
• Verify Badge Styles: Check that records with a status of synced display the green checkmark badge, and records with a status of pending display the amber clock badge.
• Vite compilation: Run npm run build to verify React compilation.