105 lines
5.1 KiB
JavaScript
105 lines
5.1 KiB
JavaScript
"use client";
|
|
import { useTheme } from "../../context/ThemeContext";
|
|
|
|
export default function Header({
|
|
currentToken,
|
|
previousToken,
|
|
nextToken,
|
|
missedTokens,
|
|
entries = []
|
|
}) {
|
|
const totalTokens = entries.length;
|
|
const doneTokens = entries.filter(entry => entry.status === "done").length;
|
|
const missedTokensCount = entries.filter(entry => entry.status === "missed").length;
|
|
const inQueueTokens = entries.filter(entry => entry.status === "booked").length;
|
|
const { darkMode } = useTheme();
|
|
|
|
|
|
|
|
|
|
return (
|
|
<div className={`flex grow flex-col items-center ${darkMode ? 'bg-gray-500' : 'bg-white'} justify-between lg:flex-row lg:px-6 w-full`}> <div className="hidden lg:flex lg:justify-center lg:items-center lg:w-full lg:px-6 lg:py-3 xl:flex xl:justify-center xl:items-center xl:w-full xl:px-6 2xl:flex 2xl:justify-center 2xl:items-center 2xl:w-full 2xl:px-6">
|
|
<div className={`flex flex-col gap-3 p-4 rounded-lg ${darkMode ? 'bg-gray-800 text-gray-200' : 'bg-gray-50 text-gray-600'}`}>
|
|
<div className="grid grid-cols-4 gap-4">
|
|
{/* ----------Total Tokens Card---------------- */}
|
|
<div className={`border rounded-lg px-3 py-3 flex flex-col gap-3 w-[10rem] transition-colors ${
|
|
darkMode ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-200'
|
|
}`}>
|
|
<h2 className="font-semibold text-sm text-gray-500 dark:text-gray-300">Total Tokens</h2>
|
|
<div className="flex gap-5 items-baseline">
|
|
<p className="text-2xl font-medium dark:text-white">{totalTokens}</p>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
|
<span className="text-green-500 dark:text-green-400">+{inQueueTokens}</span> in queue
|
|
</p>
|
|
</div>
|
|
<button className={`bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600
|
|
text-white text-xs py-1.5 w-full rounded transition-colors`}>
|
|
View All
|
|
</button>
|
|
</div>
|
|
|
|
{/* ----------Done Tokens Card---------------- */}
|
|
<div className={`border rounded-lg px-3 py-3 flex flex-col gap-3 w-[10rem] transition-colors ${
|
|
darkMode ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-200'
|
|
}`}>
|
|
<h2 className="font-semibold text-sm text-gray-500 dark:text-gray-300">Done</h2>
|
|
<div className="flex gap-5 items-baseline">
|
|
<p className="text-2xl font-medium dark:text-white">{doneTokens}</p>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
|
<span className="text-green-500 dark:text-green-400">
|
|
{totalTokens > 0 ? Math.round((doneTokens/totalTokens)*100) : 0}%
|
|
</span> of total
|
|
</p>
|
|
</div>
|
|
<button className={`bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600
|
|
text-white text-xs py-1.5 w-full rounded transition-colors`}>
|
|
View List
|
|
</button>
|
|
</div>
|
|
|
|
{/* ----------Missed Tokens Card---------------- */}
|
|
<div className={`border rounded-lg px-3 py-3 flex flex-col gap-3 w-[10rem] transition-colors ${
|
|
darkMode ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-200'
|
|
}`}>
|
|
<h2 className="font-semibold text-sm text-gray-500 dark:text-gray-300">Missed Tokens</h2>
|
|
<div className="flex gap-5 items-baseline">
|
|
<p className="text-2xl font-medium dark:text-white">{missedTokensCount}</p>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
|
{missedTokensCount > 0 ? (
|
|
<span className="text-red-500 dark:text-red-400">{missedTokens}</span>
|
|
) : (
|
|
"All attended"
|
|
)}
|
|
</p>
|
|
</div>
|
|
<button className={`bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600
|
|
text-white text-xs py-1.5 w-full rounded transition-colors`}>
|
|
View List
|
|
</button>
|
|
</div>
|
|
|
|
{/* ----------Current Token Card---------------- */}
|
|
<div className={`border rounded-lg px-3 py-3 flex flex-col gap-3 w-[10rem] transition-colors ${
|
|
darkMode ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-200'
|
|
}`}>
|
|
<h2 className="font-semibold text-sm text-gray-500 dark:text-gray-300">Current Token</h2>
|
|
<div className="flex flex-col gap-1">
|
|
<p className="text-2xl font-medium text-center dark:text-white">
|
|
{currentToken || "---"}
|
|
</p>
|
|
<div className="flex justify-between text-xs text-gray-500 dark:text-gray-400">
|
|
<span>Prev: {previousToken || "---"}</span>
|
|
<span>Next: {nextToken || "---"}</span>
|
|
</div>
|
|
</div>
|
|
<button className={`bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600
|
|
text-white text-xs py-1.5 w-full rounded transition-colors`}>
|
|
Call Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |