shift table actual
Tue Apr 09 2024 23:29:21 GMT+0000 (Coordinated Universal Time)
Saved by @rafal_rydz
import { useEffect, useState } from "react"; import { useSupabaseClient } from "@supabase/auth-helpers-react"; import { HeadingLink, MinimalPage, PageHeading, Spinner } from "ui"; import type { Database } from "../../../types"; import dayjs from "dayjs"; const ShiftTable = () => { const [usersOnShift, setUsersOnShift] = useState< Array<{ user: string; shift_start: string | null }> >([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(""); const supabaseClient = useSupabaseClient<Database>(); useEffect(() => { const fetchUsersOnShift = async () => { setLoading(true); try { const { data: usersData, error: usersError } = await supabaseClient .from("UserLastWorkedOn") .select("shift_start, user, users_view (email)") .not("shift_start", "is", null); if (usersError) { setError(usersError.message ?? "Failed to fetch user shift data"); console.error(usersError); } const mappedUsers = usersData?.map((user) => { const mappedUser: { user: string; shift_start: string | null } = { shift_start: user.shift_start, user: Array.isArray(user.users_view) ? user.users_view[0].email : user.users_view?.email ?? user.user, }; return mappedUser; }); setUsersOnShift(mappedUsers ?? []); } catch (err) { setError("Failed to fetch user shift data"); console.error(err); } finally { setLoading(false); } }; fetchUsersOnShift(); }, [supabaseClient]); return ( <MinimalPage pageTitle="Shift Table | Email Interface" pageDescription="Spot Ship Email Interface | Shift Table" commandPrompt > <div className="w-full"> <HeadingLink icon="back" text="Home" href="/secure/home" /> </div> <PageHeading text="Spot Ship Shift Table" /> <div className="flex w-full flex-col"> {loading ? ( <Spinner /> ) : error ? ( <p className="text-red-500">Error: {error}</p> ) : usersOnShift.length ? ( <table className="mt-4 min-w-full"> <thead> <tr> <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"> User Email </th> <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"> Shift Started </th> </tr> </thead> <tbody className="divide-white-200 divide-x "> {usersOnShift.map((user, index) => ( <tr key={index}> <td className=" text-white-500 px-6 py-4 text-sm"> {user.user} </td> <td className=" text-white-500 px-6 py-4 text-sm"> {dayjs(user.shift_start).format("DD-MM-YYYY | HH:mm")} </td> </tr> ))} </tbody> </table> ) : ( <p>No users are currently on shift</p> )} </div> </MinimalPage> ); }; export default ShiftTable;
Comments