KpiRow.tsx

Go to the documentation of this file.

"use client";
import React from "react";
 
interface KpiRowProps {
  salesTotal: number;
  transactions: number;
  reminders: number;
  labelsPending: number;
}
 
export default function KpiRow({ salesTotal, transactions, reminders, labelsPending }: KpiRowProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
      <div className="card p-4">
        <div className="text-sm muted">Sales today</div>
        <div className="text-3xl font-extrabold mt-3">${salesTotal.toLocaleString()}</div>
        <div className="text-xs muted mt-1">Live total</div>
      </div>
 
      <div className="card p-4">
        <div className="text-sm muted">Transactions</div>
        <div className="text-2xl font-extrabold mt-3">{transactions}</div>
        <div className="text-xs muted mt-1">Across stores</div>
      </div>
 
      <div className="card p-4">
        <div className="text-sm muted">Reminders</div>
        <div className="text-2xl font-extrabold mt-3">{reminders}</div>
        <div className="text-xs muted mt-1">To review</div>
      </div>
 
      <div className="card p-4">
        <div className="text-sm muted">Labels pending</div>
        <div className="text-2xl font-extrabold mt-3">{labelsPending}</div>
        <div className="text-xs muted mt-1">Waiting to print</div>
      </div>
    </div>
  );
}