import React, { useState } from "react"; import "./HeadCount.css"; interface ApiResponse { total_unique_faces: number; daily_counts: { date: string; unique_faces: number }[]; } interface DateTimeRange { date: string; time: string; } const HeadCount: React.FC = () => { const [from, setFrom] = useState<DateTimeRange>({ date: "", time: "" }); const [to, setTo] = useState<DateTimeRange>({ date: "", time: "" }); const [count, setCount] = useState<number | null>(null); const [loading, setLoading] = useState<boolean>(false); const [error, setError] = useState<string | null>(null); const [dailyCounts, setDailyCounts] = useState< { date: string; count: number }[] >([]); const handleInputChange = ( e: React.ChangeEvent<HTMLInputElement>, field: "from" | "to" ) => { const { name, value } = e.target; if (field === "from") { setFrom((prev) => ({ ...prev, [name]: value })); } else { setTo((prev) => ({ ...prev, [name]: value })); } }; const formatDateTime = (date: string, time: string) => { return `${date}T${time}:00+00:00`; }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (!from.date || !from.time || !to.date || !to.time) { setError("Please fill in all date and time fields."); return; } setLoading(true); setError(null); const start = formatDateTime(from.date, from.time); const end = formatDateTime(to.date, to.time); console.log(start, end); try { const response = await fetch( `${ process.env.NEXT_PUBLIC_BASE_URL }/face/headcount?start_time=${encodeURIComponent( start )}&end_time=${encodeURIComponent(end)}`, { method: "GET", headers: { "Content-Type": "application/json", }, } ); if (!response.ok) { throw new Error("Failed to fetch data"); } const data: ApiResponse = await response.json(); setCount(data.total_unique_faces); if (data?.daily_counts) { setDailyCounts( data.daily_counts.map((d) => ({ date: d.date, count: d.unique_faces, })) ); } } catch (err) { setError("An error occurred while fetching data."); console.error(err); } finally { setLoading(false); } }; return ( <div className="headcount-container"> <h1 className="heading">Head Count</h1> <form onSubmit={handleSubmit} className="form"> <div className="input-group"> <label htmlFor="from-date" className="label"> From Date: </label> <input type="date" id="from-date" name="date" value={from.date} onChange={(e) => handleInputChange(e, "from")} required className="input" /> </div> <div className="input-group"> <label htmlFor="from-time" className="label"> From Time: </label> <input type="time" id="from-time" name="time" value={from.time} onChange={(e) => handleInputChange(e, "from")} required className="input" /> </div> <div className="input-group"> <label htmlFor="to-date" className="label"> To Date: </label> <input type="date" id="to-date" name="date" value={to.date} onChange={(e) => handleInputChange(e, "to")} required className="input" /> </div> <div className="input-group"> <label htmlFor="to-time" className="label"> To Time: </label> <input type="time" id="to-time" name="time" value={to.time} onChange={(e) => handleInputChange(e, "to")} required className="input" /> </div> <button type="submit" disabled={loading} className="button"> {loading ? "Submitting..." : "Submit"} </button> </form> {error && <p className="error">{error}</p>} {count && ( <div className="names-container"> <h2 className="sub-heading">Total Unique Face Count:</h2> <ul className="list">{count}</ul> </div> )} {dailyCounts?.length > 0 && ( <div className="daily-counts-container"> <h2 className="sub-heading">Daily Counts:</h2> <ul className="list"> {dailyCounts.map((item, index) => ( <li key={index} className="list-item"> <span className="date">{item.date}:</span> <span className="count"> {item.count}</span> </li> ))} </ul> </div> )} </div> ); }; export default HeadCount;