Sistem Pengurusan & Serahan PPE

Aplikasi web untuk menguruskan permohonan dan serahan Peralatan Perlindungan Diri (PPE). Dibina dengan Next.js 16 (App Router) + TypeScript + Tailwind CSS + Supabase.

Mula di sini: HANDOVER.md — dokumen serahan lengkap (seni bina, skema, peraturan bisnes, isu diketahui, cara guna semula). Jika README ini bercanggah dengan HANDOVER.md, HANDOVER.md yang betul.

Ciri-ciri

• Borang pekerja (awam, tanpa log masuk) — / — cari nama, pilih PPE layak mengikut jawatan, hantar permohonan. Staf baru daftar di /daftar.
• Dashboard HR (log masuk Supabase Auth) — /hr/dashboard — semak & lulus/tolak permohonan, urus stok (ikut saiz), urus pekerja, lulus pendaftaran staf baru, lihat rekod, muat turun PDF serahan, import/eksport Excel.

Persediaan (Setup)

1. Supabase

1. Cipta projek baharu di supabase.com.
2. Buka SQL Editor dan jalankan mengikut urutan: supabase/migrations/0001_init.sql, 0002_stock_by_size.sql, 0003_employee_registrations.sql. (Jangan jalankan semula 0001 selepas 0002 — lihat HANDOVER.md §5.)
3. Salin Project URL dan anon public key daripada Settings → API.
4. Authentication → Providers → Email → matikan "Allow new users to sign up", kemudian cipta pengguna HR secara manual (lihat HANDOVER.md §4 — sesiapa yang boleh log masuk ialah HR penuh).

2. Environment Variables

Salin .env.local.example kepada .env.local dan isikan:

NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=xxxxx

Kod tidak menggunakan service_role key; jangan letaknya dalam repo atau kod client.

3. Pasang & Jalankan Tempatan

npm install
npm run dev

Buka http://localhost:3000 untuk borang pekerja, dan http://localhost:3000/hr/login untuk log masuk HR.

4. Akaun HR Pertama

Buka Supabase Dashboard → Authentication → Add user → masukkan emel & kata laluan staf HR pertama. Log masuk di /hr/login menggunakan kelayakan itu.

5. Data Awal

• Pekerja: Tab Pekerja → Import Excel → guna templat yang disediakan.
• Stok PPE: Item PPE asas (7 jenis mengikut §6.1 spesifikasi) sudah diseed oleh migrasi dengan stok = 0. Kemaskini stok sebenar di tab Stok PPE (edit terus atau import Excel).
• Rekod sejarah: Tab Rekod → Import Data Lama jika ada rekod serahan PPE terdahulu untuk diarkibkan (tidak menolak stok semasa).

6. Deploy ke Vercel

1. Push repo ini ke GitHub.
2. Import repo ke Vercel.
3. Tetapkan Environment Variables yang sama seperti .env.local di Vercel Project Settings → Environment Variables.
4. Deploy. Setiap push ke main akan auto-deploy.

Struktur Projek

app/
├── page.tsx                 # Borang pekerja (awam)
├── hr/
│   ├── login/page.tsx        # Log masuk HR
│   └── dashboard/
│       ├── layout.tsx        # Shell + proteksi auth
│       ├── inbox/page.tsx    # Papan pemuka + permohonan menunggu
│       ├── stock/page.tsx    # Urus stok PPE
│       ├── employees/page.tsx# Pangkalan data pekerja
│       ├── records/page.tsx  # Rekod & import data lama
│       └── settings/page.tsx # Tetapan syarikat
components/
├── worker/RequestForm.tsx
├── hr/{DashboardShell,RequestModal,ImportModal,KpiTile}.tsx
└── ui/{Button,Card,Badge,Modal}.tsx
lib/
├── supabase/{client,server,middleware}.ts
├── ppe-config.ts             # Peraturan kelayakan PPE & saiz/kuantiti (§6.1–6.2)
├── pdf/{handover,downloadForRequest}.ts
└── excel/{employees,stock,records,shared}.ts
supabase/migrations/000{1,2,3}_*.sql
proxy.ts                      # Proteksi laluan /hr/dashboard (Next.js 16 "proxy")

Nota Seni Bina

• Pekerja (anon key) hanya boleh SELECT daripada view employees_public (tanpa No. IC) dan settings, serta INSERT pada requests dan employee_registrations. Lihat HANDOVER.md §4 untuk model keselamatan penuh.
• Lulus permohonan dilaksanakan melalui RPC approve_request (transaksi atomik: tolak stok + tandakan status issued dalam satu transaksi Postgres).
• PDF serahan dijana di client (jsPDF) mengikut susunan tepat §6.5 — tidak memaparkan lajur "Keluar"/"Baki Stok".