62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { Boxes, ChevronRight, Eye, RefreshCw } from 'lucide-react';
|
|
|
|
/**
|
|
* The three things most often done from this board.
|
|
*
|
|
* Lifted out of the shop card when that card went. They belong beside Store
|
|
* health rather than under it: the health panel is where a merchant learns that
|
|
* something needs doing, and these are the doors to go and do it.
|
|
*
|
|
* Deliberately three. A column of nine shortcuts is a second navigation, and
|
|
* this console already has one along the top.
|
|
*/
|
|
export function QuickActions({ base }: { base: string }) {
|
|
return (
|
|
<section className="panel">
|
|
<header className="panel-head">
|
|
<div>
|
|
<h3 className="panel-title">Quick actions</h3>
|
|
<p className="panel-sub">The three things most often done from here</p>
|
|
</div>
|
|
</header>
|
|
<div className="quick-list">
|
|
<Action
|
|
to={`${base}/inventory?tab=products`}
|
|
icon={<Eye size={15} />}
|
|
label="View store"
|
|
note="what a shopper sees"
|
|
/>
|
|
<Action
|
|
to={`${base}/inventory?tab=catalogue`}
|
|
icon={<Boxes size={15} />}
|
|
label="Manage catalogue"
|
|
note="add and price products"
|
|
/>
|
|
<Action
|
|
to={`${base}/inventory?tab=stock`}
|
|
icon={<RefreshCw size={15} />}
|
|
label="Update inventory"
|
|
note="upload today's counts"
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function Action({
|
|
to, icon, label, note,
|
|
}: { to: string; icon: ReactNode; label: string; note: string }) {
|
|
return (
|
|
<Link to={to} className="quick">
|
|
<span className="tile" data-tone="brand" aria-hidden>{icon}</span>
|
|
<span className="quick-text">
|
|
<span className="quick-label">{label}</span>
|
|
<span className="quick-note">{note}</span>
|
|
</span>
|
|
<ChevronRight size={15} className="quick-chev" />
|
|
</Link>
|
|
);
|
|
}
|