Timesheet

Prompt

Act as an expert frontend developer and a strict payroll accountant. I need you to write the code for a lightweight, secure employee time-tracking web application designed for a team of 8 employees. The application will use a modern frontend (HTML/JS/Tailwind CSS or React) and a Google Apps Script (Google Sheets) backend. I need the complete Frontend code and the Google Apps Script (Code.gs) code. 1. Architecture & Tech Stack Frontend: A clean, mobile-responsive web app (optimizing for iPad/tablet kiosk and mobile phones) using Tailwind CSS for styling. Backend: Google Apps Script deployed as a Web App (using doPost to receive frontend JSON requests). Database: A Google Sheet with three tabs: Employees (Name, PIN, Status), Raw_Punches (Timestamp, Employee Name, Action), and Weekly_Totals (Pivot table handled by me). 2. Accounting & Payroll Business Logic (Strict Rules) Decimal Hours: All time calculations sent to the frontend for "My Shifts" must be converted into standard payroll decimals (e.g., 8 hours 15 minutes = 8.25 hours). State Management: The system must check the employee's current state. An employee cannot "Clock In" if their last action was "Clock In" (prevent double-punches). Timestamps: The Google Apps Script must generate the timestamp on the server-side when logging the punch, NOT rely on the device's local time, to prevent time manipulation. 3. Frontend UI/UX Requirements Screen 1: The PIN Pad. A digital numeric keypad (0-9). The user enters a 4-digit PIN. The PIN input must be masked (dots or asterisks). Screen 2: Employee Dashboard. Once a valid PIN is submitted: Greet the employee by name. Show a large, distinct "Clock In" or "Clock Out" button based on their current status. Use green for Clock In, red for Clock Out. Show a success toast/message after they punch. "My Shifts" Section: Below the button, display a clean table or list showing their shifts for the current week, ending with a bold "Total Weekly Hours: X.XX" calculation. Auto-Logout: The dashboard must automatically return to the PIN pad after 15 seconds of inactivity to protect employee privacy on a shared device. 4. Backend API (Google Apps Script) Requirements Please write the Code.gs script to handle a doPost(e) function with three primary actions routed via a JSON payload: action: "login": Accepts a PIN. Searches the Employees tab. If found, returns the Employee Name, their current status (Clocked In or Clocked Out by checking the last entry in Raw_Punches), and their shift data for the current week. action: "punch": Accepts the Employee Name and Action (Clock In / Clock Out). Appends a new row to Raw_Punches with new Date(), the Name, and the Action. Returns a success confirmation. Please output the following: The full Google Apps Script (Code.gs) to handle the database logic. The complete Frontend code structure to build the UI and handle the fetch requests to the Apps Script URL. Step-by-step instructions on how to deploy the Google Apps Script to get the Web App URL.

A system prompt was added to support web rendering