Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 1x 1x 1x 1x 1x 1x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 2x 2x 2x 2x 2x 2x 2x 9x 9x 9x 9x 8x 8x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 7x 7x 7x 7x 7x 7x 11x 11x 11x 6x 6x 6x 6x 6x 6x 6x 6x 11x 11x 8x 9x 9x 9x | import React from 'react';
// Types
import { OfficeStats } from '@/types';
// Components
import { IncreaseIcon } from './IncreaseIcon';
import { DecreaseIcon } from './DecreaseIcon';
import { combineClasses } from '@shared/utils';
import { formatDate, isToday } from '@/utils';
import { KitchenIcon, LeafIcon } from '@/components/icons/reacts';
interface Props {
totalNormalMeals: number;
totalVeganMeals?: number;
stats?: OfficeStats[];
date: string;
}
export const DailyStatistics: React.FC<Props> = ({
totalNormalMeals,
totalVeganMeals,
stats = [],
date,
}) => {
const safeTotalVeganMeals = totalVeganMeals ?? 0;
const total = totalNormalMeals + safeTotalVeganMeals!;
return (
<div className="space-y-4 p-4 bg-slate-50 rounded-3xl border border-slate-200 shadow-sm">
<div className="flex flex-col gap-2 w-full text-center py-4 px-2">
<p
className={combineClasses(
'text-lg md:text-4xs tracking-[0.8px] sm:tracking-[0.5px] text-center uppercase',
isToday(date) ? 'text-secondary' : 'text-ocean',
)}
>
{formatDate(date)}
</p>
<p className="text-4xl font-extrabold text-frost-900 leading-none">
{total}
</p>
<div className="flex gap-3 items-center justify-center">
<p className="text-sm font-bold text-frost-900 flex items-center gap-2 uppercase tracking-tighter">
<KitchenIcon width={20} height={20} className="text-frost-900" />
{totalNormalMeals}
</p>
{safeTotalVeganMeals > 0 && (
<>
<span className="w-1.5 h-1.5 bg-slate-300 rounded-full"></span>
<p className="text-sm text-emerald-600 font-bold flex items-center gap-2 uppercase tracking-tighter">
<LeafIcon width={20} height={20} />
{totalVeganMeals}
</p>
</>
)}
</div>
</div>
<div className="space-y-2">
{!!stats?.length &&
stats.map(
({
office = '-',
veganMeals = 0,
normalMeals = 0,
changeNumber = 0,
}) => (
<div
key={office}
className="bg-white py-2 px-3 rounded-2xl border border-slate-100 flex items-center justify-between hover:shadow-md transition-shadow"
>
<div className="w-full flex items-center gap-3 justify-between">
<div className="flex items-center">
<p className="w-12 h-10 rounded-xl bg-slate-100 flex items-center justify-center font-bold text-slate-600 text-sm">
{office}
</p>
<div className="flex gap-4 ml-2">
<div className="flex items-center gap-1.5">
<KitchenIcon className="text-frost-900" />
<span className="text-sm font-bold text-frost-900 leading-none">
{normalMeals}
</span>
</div>
{veganMeals > 0 && (
<div className="flex items-center gap-1.5 border-l border-slate-400 pl-4">
<LeafIcon className="text-emerald-600" />
<span className="text-sm font-bold text-emerald-600 leading-none">
{veganMeals}
</span>
</div>
)}
</div>
</div>
{changeNumber !== 0 && (
<span
className={combineClasses(
'flex items-center gap-1 justify-start text-[10px] font-bold w-8',
changeNumber > 0 ? 'text-emerald-600' : 'text-rose-600',
)}
>
{changeNumber > 0 ? <IncreaseIcon /> : <DecreaseIcon />}
{Math.abs(changeNumber)}
</span>
)}
</div>
</div>
),
)}
</div>
</div>
);
};
|