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 | 4x 13x 13x 6x | /**
* @file Sidebar.tsx
* @description
* Dashboard sidebar component displaying inventory metrics and navigation buttons.
*
* **Displays:**
* - Total stock value in USD
* - Low stock product list
* - Product management navigation buttons
*
* **Props:**
* - `stockValue` - Total inventory value
* - `lowStockProducts` - Products with insufficient stock
*
* @component
*/
import React from 'react';
import { useTranslation } from 'react-i18next';
import Buttons from './Buttons';
/**
* Sidebar component props
* @interface SidebarProps
*/
interface SidebarProps {
/** Total value of all products in stock */
stockValue: number;
/** List of products with low stock levels */
lowStockProducts: { id: number; name: string; quantity: number }[];
}
/**
* Dashboard sidebar with inventory metrics
* @component
* @param {SidebarProps} props - Component props
* @returns {JSX.Element} Sidebar with stats and controls
*/
const Sidebar: React.FC<SidebarProps> = ({ stockValue, lowStockProducts }) => {
const { t } = useTranslation();
return (
<aside className="w-2/5 bg-white shadow p-4 rounded flex flex-col space-y-6 min-h-[500px]">
<div>
<h3 className="text-lg font-semibold">{t('adminDashboard.stockValue')}</h3>
<p className="text-xl text-blue-600 font-bold">${stockValue.toFixed(2)}</p>
</div>
<div>
<h3 className="text-lg font-semibold">{t('adminDashboard.lowStock')}</h3>
{lowStockProducts.length > 0 ? (
<ul className="mt-4 space-y-2">
{lowStockProducts.map((product) => (
<li key={product.id} className="p-2 bg-gray-100 border rounded">
{product.name} ({t('quantity')}: {product.quantity})
</li>
))}
</ul>
) : (
<p className="text-gray-500 mt-2">{t('adminDashboard.sufficientStock')}</p>
)}
</div>
<div className="mt-auto">
<Buttons />
</div>
</aside>
);
};
export default Sidebar;
|