/manage/people Grid Header UI Refactoring

[dangminhduc1101]

Problem

The grid header on the /manage/people page does not match the design specified in Figma.

Expected Design

Current Design

Current Code Implementation

In manage/people/page.tsx:

<div className="flex items-center justify-between bg-pedals-grey px-16 py-2">
    <div className="text-center">Name</div>
    <div className="text-center">Username</div>
    <div className="text-center">Date of Birth</div>
    <div className="text-center">Last Seen</div>
    <div className="text-center">Total</div>
</div>

Instructions

1. Pull the latest changes from the develop branch.
2. Start the local server by running npm run dev. (If needed, navigate to the src/ folder and run npm ci to install dependencies).
3. Visit localhost:3000/manage/people to view the page.
4. Update the header in the manage/people/page.tsx file using the reference code below.
5. Once updated, create a pull request and tag @dangminhduc1101 for review.

Reference Code for Header

You can refer to this code from manage/shifts/components/EditShiftsGrid.tsx for the grid header structure:

<div className="flex h-full flex-col overflow-y-auto bg-pedals-grey">
    <div className="sticky flex items-center justify-start px-20 py-2">
        <p className="w-96">Name</p>
        <p className="w-72">Date</p>
        <div className="flex justify-between gap-3">
            <p className="flex w-48 justify-center">Check In</p>
            <p className="flex w-48 justify-center">Check Out</p>
        </div>
        <p className="ml-40">Shift</p>
    </div>
</div>

Notes

Don't worry about getting the exact pixel values correct for now. Focus on matching the structure, and we can fine-tune the details later.

[dangminhduc1101]

Resolved temporarily with 77f4e9b02082de5234f2f6a06224ec8a721b308f