Skip to content

Commit dcde91b

Browse files
GiabaodayGiabaoday
committed
Update frontend
1 parent 709aafc commit dcde91b

1 file changed

Lines changed: 75 additions & 131 deletions

File tree

‎frontend/src/App.js‎

Lines changed: 75 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -534,7 +534,6 @@ export default function ProductTraceabilityApp() {
534534
{ key: 'dashboard', label: 'Trang chủ', icon: Home },
535535
{ key: 'products', label: 'Sản phẩm', icon: Package },
536536
{ key: 'import', label: 'Nhập hàng', icon: Package },
537-
{ key: 'sale', label: 'Bán hàng', icon: ShoppingCart },
538537
...baseItems
539538
];
540539
default:
@@ -947,79 +946,82 @@ export default function ProductTraceabilityApp() {
947946

948947
const renderProducts = () => (
949948
<div className="space-y-6">
950-
<div className="bg-white rounded-lg shadow p-6">
951-
<h2 className="text-xl font-semibold mb-4">Thêm sản phẩm mới</h2>
952-
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
953-
<div>
954-
<label className="block text-sm font-medium text-gray-700 mb-1">Tên sản phẩm</label>
955-
<input
956-
type="text"
957-
value={productForm.name}
958-
onChange={(e) => setProductForm({ ...productForm, name: e.target.value })}
959-
className="w-full px-3 py-2 border rounded-md"
960-
placeholder="Nhập tên sản phẩm"
961-
/>
962-
</div>
963-
<div>
964-
<label className="block text-sm font-medium text-gray-700 mb-1">Danh mục</label>
965-
<input
966-
type="text"
967-
value={productForm.category}
968-
onChange={(e) => setProductForm({ ...productForm, category: e.target.value })}
969-
className="w-full px-3 py-2 border rounded-md"
970-
placeholder="Nhập danh mục"
971-
/>
972-
</div>
973-
<div>
974-
<label className="block text-sm font-medium text-gray-700 mb-1">Mô tả</label>
975-
<input
976-
type="text"
977-
value={productForm.description}
978-
onChange={(e) => setProductForm({ ...productForm, description: e.target.value })}
979-
className="w-full px-3 py-2 border rounded-md"
980-
placeholder="Nhập mô tả"
981-
/>
982-
</div>
983-
<div>
984-
<label className="block text-sm font-medium text-gray-700 mb-1">Số lượng</label>
985-
<input
986-
type="number"
987-
value={productForm.quantity}
988-
onChange={(e) => setProductForm({ ...productForm, quantity: e.target.value })}
989-
className="w-full px-3 py-2 border rounded-md"
990-
placeholder="Nhập số lượng"
991-
/>
992-
</div>
993-
<div>
994-
<label className="block text-sm font-medium text-gray-700 mb-1">Giá</label>
995-
<input
996-
type="number"
997-
value={productForm.price}
998-
onChange={(e) => setProductForm({ ...productForm, price: e.target.value })}
999-
className="w-full px-3 py-2 border rounded-md"
1000-
placeholder="Nhập giá"
1001-
/>
1002-
</div>
1003-
<div>
1004-
<label className="block text-sm font-medium text-gray-700 mb-1">Mã lô</label>
1005-
<input
1006-
type="text"
1007-
value={productForm.batch}
1008-
onChange={(e) => setProductForm({ ...productForm, batch: e.target.value })}
1009-
className="w-full px-3 py-2 border rounded-md"
1010-
placeholder="Nhập mã lô"
1011-
/>
949+
{/* Ẩn form thêm sản phẩm nếu là nhà bán lẻ */}
950+
{user?.role !== USER_ROLES.RETAILER && (
951+
<div className="bg-white rounded-lg shadow p-6">
952+
<h2 className="text-xl font-semibold mb-4">Thêm sản phẩm mới</h2>
953+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
954+
<div>
955+
<label className="block text-sm font-medium text-gray-700 mb-1">Tên sản phẩm</label>
956+
<input
957+
type="text"
958+
value={productForm.name}
959+
onChange={(e) => setProductForm({ ...productForm, name: e.target.value })}
960+
className="w-full px-3 py-2 border rounded-md"
961+
placeholder="Nhập tên sản phẩm"
962+
/>
963+
</div>
964+
<div>
965+
<label className="block text-sm font-medium text-gray-700 mb-1">Danh mục</label>
966+
<input
967+
type="text"
968+
value={productForm.category}
969+
onChange={(e) => setProductForm({ ...productForm, category: e.target.value })}
970+
className="w-full px-3 py-2 border rounded-md"
971+
placeholder="Nhập danh mục"
972+
/>
973+
</div>
974+
<div>
975+
<label className="block text-sm font-medium text-gray-700 mb-1">Mô tả</label>
976+
<input
977+
type="text"
978+
value={productForm.description}
979+
onChange={(e) => setProductForm({ ...productForm, description: e.target.value })}
980+
className="w-full px-3 py-2 border rounded-md"
981+
placeholder="Nhập mô tả"
982+
/>
983+
</div>
984+
<div>
985+
<label className="block text-sm font-medium text-gray-700 mb-1">Số lượng</label>
986+
<input
987+
type="number"
988+
value={productForm.quantity}
989+
onChange={(e) => setProductForm({ ...productForm, quantity: e.target.value })}
990+
className="w-full px-3 py-2 border rounded-md"
991+
placeholder="Nhập số lượng"
992+
/>
993+
</div>
994+
<div>
995+
<label className="block text-sm font-medium text-gray-700 mb-1">Giá</label>
996+
<input
997+
type="number"
998+
value={productForm.price}
999+
onChange={(e) => setProductForm({ ...productForm, price: e.target.value })}
1000+
className="w-full px-3 py-2 border rounded-md"
1001+
placeholder="Nhập giá"
1002+
/>
1003+
</div>
1004+
<div>
1005+
<label className="block text-sm font-medium text-gray-700 mb-1">Mã lô</label>
1006+
<input
1007+
type="text"
1008+
value={productForm.batch}
1009+
onChange={(e) => setProductForm({ ...productForm, batch: e.target.value })}
1010+
className="w-full px-3 py-2 border rounded-md"
1011+
placeholder="Nhập mã lô"
1012+
/>
1013+
</div>
10121014
</div>
1015+
<button
1016+
onClick={addProduct}
1017+
disabled={apiLoading}
1018+
className="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 disabled:opacity-50"
1019+
>
1020+
{apiLoading ? 'Đang xử lý...' : 'Thêm sản phẩm'}
1021+
</button>
10131022
</div>
1014-
<button
1015-
onClick={addProduct}
1016-
disabled={apiLoading}
1017-
className="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 disabled:opacity-50"
1018-
>
1019-
{apiLoading ? 'Đang xử lý...' : 'Thêm sản phẩm'}
1020-
</button>
1021-
</div>
1022-
1023+
)}
1024+
{/* Danh sách sản phẩm vẫn hiển thị cho mọi vai trò */}
10231025
<div className="bg-white rounded-lg shadow overflow-hidden">
10241026
<div className="p-6">
10251027
<h2 className="text-xl font-semibold mb-4">Danh sách sản phẩm</h2>
@@ -1541,13 +1543,6 @@ export default function ProductTraceabilityApp() {
15411543
{renderOrders('import')}
15421544
</RoleGuard>
15431545
);
1544-
case 'sale':
1545-
case 'add-sale':
1546-
return (
1547-
<RoleGuard allowedRoles={[USER_ROLES.RETAILER]}>
1548-
{renderOrders('sale')}
1549-
</RoleGuard>
1550-
);
15511546
case 'about':
15521547
return renderAbout();
15531548
case 'contact':
@@ -1635,12 +1630,11 @@ export default function ProductTraceabilityApp() {
16351630
</div>
16361631
<h3 className="text-xl font-semibold text-gray-800 mb-2">Nhà bán lẻ</h3>
16371632
<p className="text-gray-600 mb-4">
1638-
Quản lý kho hàng, nhập hàng và bán hàng
1633+
Quản lý kho hàng, nhập hàng
16391634
</p>
16401635
<ul className="text-sm text-gray-500 space-y-1">
16411636
<li>• Quản lý tồn kho</li>
16421637
<li>• Theo dõi nhập/xuất hàng</li>
1643-
<li>• Xử lý đơn bán hàng</li>
16441638
</ul>
16451639
<div className="mt-4 pt-4 border-t border-gray-100">
16461640
<div className="bg-purple-50 text-purple-700 text-xs px-3 py-1 rounded-full inline-block">
@@ -1650,56 +1644,6 @@ export default function ProductTraceabilityApp() {
16501644
</div>
16511645
</div>
16521646
</div>
1653-
1654-
<div className="text-center mt-8">
1655-
<div className="mb-4">
1656-
<p className="text-gray-600 mb-4">
1657-
Hoặc dùng chế độ demo để test không cần đăng nhập:
1658-
</p>
1659-
<div className="flex flex-wrap justify-center gap-4">
1660-
<button
1661-
onClick={() => selectRoleDemo(USER_ROLES.CONSUMER)}
1662-
className="bg-blue-100 text-blue-700 px-4 py-2 rounded-lg hover:bg-blue-200 transition duration-200"
1663-
>
1664-
Demo Người tiêu dùng
1665-
</button>
1666-
<button
1667-
onClick={() => selectRoleDemo(USER_ROLES.MANUFACTURER)}
1668-
className="bg-green-100 text-green-700 px-4 py-2 rounded-lg hover:bg-green-200 transition duration-200"
1669-
>
1670-
Demo Nhà sản xuất
1671-
</button>
1672-
<button
1673-
onClick={() => selectRoleDemo(USER_ROLES.RETAILER)}
1674-
className="bg-purple-100 text-purple-700 px-4 py-2 rounded-lg hover:bg-purple-200 transition duration-200"
1675-
>
1676-
Demo Nhà bán lẻ
1677-
</button>
1678-
</div>
1679-
</div>
1680-
1681-
<div className="border-t pt-6">
1682-
<p className="text-sm text-gray-500 mb-4">
1683-
💡 <strong>Hướng dẫn:</strong>
1684-
</p>
1685-
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-left max-w-4xl mx-auto">
1686-
<div className="bg-blue-50 p-4 rounded-lg">
1687-
<h4 className="font-semibold text-blue-800 mb-2">🔐 Chế độ Production</h4>
1688-
<p className="text-sm text-blue-600">
1689-
Click vào vai trò → Chuyển đến Cognito → Đăng nhập/Đăng ký →
1690-
Sử dụng với dữ liệu thật và xác thực blockchain
1691-
</p>
1692-
</div>
1693-
<div className="bg-gray-50 p-4 rounded-lg">
1694-
<h4 className="font-semibold text-gray-800 mb-2">🎮 Chế độ Demo</h4>
1695-
<p className="text-sm text-gray-600">
1696-
Click nút "Demo..." → Vào ngay ứng dụng →
1697-
Test tính năng với dữ liệu mẫu
1698-
</p>
1699-
</div>
1700-
</div>
1701-
</div>
1702-
</div>
17031647
</div>
17041648
</div>
17051649
);

0 commit comments

Comments
 (0)