AttentionCard.tsx

Go to the documentation of this file.

"use client";
import Link from "next/link";
import React from "react";
 
interface AttentionCardProps {
  printing: number;
  reminders: number;
}
 
export default function AttentionCard({ printing, reminders }: AttentionCardProps) {
  return (
    <div className="card p-4">
      <div className="flex items-center justify-between mb-2">
        <div className="text-sm font-semibold">Attention</div>
        <div className="text-xs text-muted">What needs action</div>
      </div>
 
      <div className="space-y-3">
        <div className="card p-3">
          <div className="font-semibold">{reminders > 0 ? `Checking reminders…` : 'No pending reminders'}</div>
          <div className="text-xs text-muted">{reminders > 0 ? `${reminders} reminders to check` : 'All caught up'}</div>
          <div className="mt-3"><Link href="/ticketing" className="inline-flex px-3 py-1 rounded bg-brand text-white shadow-sm">Open</Link></div>
        </div>
 
        <div className="card p-3">
          <div className="font-semibold">{printing > 0 ? `Checking print queue…` : 'No shelf labels waiting'}</div>
          <div className="text-xs text-muted">{printing > 0 ? `${printing} waiting to print` : 'Print queue is clear.'}</div>
          <div className="mt-3"><Link href="/printing" className="inline-flex px-3 py-1 rounded border border-border bg-surface text-text hover:shadow-sm transition">Open Print Queue</Link></div>
        </div>
 
        <div className="card p-3">
          <div className="font-semibold">System</div>
          <div className="text-xs text-muted">Status indicator is in the top bar.</div>
        </div>
      </div>
    </div>
  );
}