QuickActions.tsx

Go to the documentation of this file.

"use client";
import Link from "next/link";
import React from "react";
import { Icon } from '@/contexts/IconContext';
 
const ACTIONS = [
  { title: "Sell", icon: "shopping_cart", path: "/sales", desc: "Open selling tools and common sales workflows" },
  { title: "Products", icon: "inventory_2", path: "/products", desc: "Maintain products, barcodes, and catalog data" },
  { title: "Print labels", icon: "local_offer", path: "/pages/products/signs-labels", desc: "Manage shelf labels, signage, and print queues" },
  { title: "End of Day", icon: "receipt_long", path: "/pages/sales/end-of-day", desc: "Close out, check summaries, and reconcile" },
  { title: "Customers", icon: "group", path: "/pages/customers", desc: "Find customers, manage accounts and loyalty." },
  { title: "Reports", icon: "assessment", path: "/pages/allreports", desc: "Browse the report library and exports." }
];
 
export default function QuickActions() {
  return (
    <div className="card p-4">
      <div className="flex items-center justify-between mb-3">
        <div className="text-sm font-semibold">Quick actions</div>
        <div className="text-xs text-muted">The most common things people do</div>
      </div>
 
      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
        {ACTIONS.map((a) => (
          <Link 
            key={a.title} 
            href={a.path} 
            aria-label={`${a.title} - ${a.desc}`} 
            className="group relative block bg-gradient-to-br from-surface to-surface-2 border border-border rounded-xl p-4 hover:shadow-xl hover:scale-[1.02] hover:border-brand/50 hover:from-brand/5 hover:to-brand/10 transition-all duration-300 overflow-hidden"
          >
            <div className="absolute inset-0 bg-gradient-to-br from-brand/0 to-brand/0 group-hover:from-brand/5 group-hover:to-brand/10 transition-all duration-300"></div>
            <div className="relative z-10 flex flex-col gap-2">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-brand/10 to-brand/20 group-hover:from-brand/20 group-hover:to-brand/30 flex items-center justify-center shadow-sm group-hover:shadow-md transition-all duration-300">
                  <Icon name={a.icon} size={24} className="text-brand group-hover:scale-110 transition-transform duration-300" />
                </div>
                <div className="font-semibold text-text group-hover:text-brand transition-colors duration-200">{a.title}</div>
              </div>
              <div className="text-xs text-muted">{a.desc}</div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}