Danh sách các Shared Component

Dưới đây là danh sách các Shared Component (Component dùng chung) hiện có trong hệ thống Vĩnh Phát ERP v3 (đặt tại thư mục src/shared/components), được phân chia theo từng nhóm chức năng để dễ tham khảo:

1. Nút bấm & Các thao tác Hành động (Buttons & Actions)

Button: Thành phần nút bấm cơ bản với nhiều biến thể (variant).
AddButton: Nút bấm chuyên biệt dùng để thêm mới (thường có icon plus).
CancelButton: Nút hủy thao tác hoặc quay lại.
ClearFilterButton: Nút xóa thông tin bộ lọc.
ActionBar: Thanh công cụ chứa danh sách các hành động nằm cạnh nhau.
ActionMenu: Trình đơn (menu) xổ xuống chứa các hành động (dropdown actions).

2. Nhập liệu & Form (Inputs & Forms)

SearchInput: Ô nhập liệu chuyên dùng cho việc tìm kiếm.
Combobox: Trình đơn lựa chọn có hỗ trợ gõ phím tìm kiếm (thay thế cho thẻ select native).
CurrencyInput: Ô nhập tiền tệ (tự động format số và ký hiệu đồng).
FilterBarPremium: Thanh công cụ bộ lọc cao cấp chứa được nhiều trường lọc.
QuickSupplierForm: Form dùng cho việc tạo nhanh một Nhà cung cấp.

3. Hiển thị dữ liệu & Bảng (Data Display & Tables)

DataTablePremium: Bảng hiển thị dữ liệu chuẩn "Premium" của hệ thống (hỗ trợ phân trang, sắp xếp).
TableSkeleton: Component hiển thị khung chờ (loading skeleton) cho cấu trúc dạng bảng.
Pagination: Thanh phân trang.
EmptyState: Component hiển thị khi không có dữ liệu (kèm icon và lời nhắn).
Badge: Nhãn (tag) hiển thị các trạng thái (ví dụ: đang chờ, hoàn thành).
Icon: Trình bao bọc (wrapper) chung để hiển thị bộ icon lucide-react.

4. Bố cục & Trạng thái Layout (Layout & Structure)

AdaptiveSheet: Thành phần giao diện dạng màn hình kéo lên từ dưới (bottom sheet) cho thiết bị di động.
PagePlaceholder: Khu vực dành chỗ (placeholder) hiển thị trên giao diện trang.
FeatureScaffoldPage: Mã khung cơ sở (scaffold) để setup nhanh layout cho một chức năng mới.
TabSwitcher: Thanh chuyển tab qua lại.
ViewToggle: Nút chuyển đổi giao diện xem (ví dụ: chuyển từ dạng bảng sang dạng lưới).

5. Báo cáo tĩnh & Thẻ thông tin (Stats & KPIs)

KpiCard & KpiGrid: Thẻ và lưới thẻ hiển thị KPI cơ bản.
KpiCardPremium & KpiGridPremium: Thẻ hiển thị các thông số đo lường chỉ điểm cấp cao (Premium design).
StatWidget: Tiện ích dạng widget hiển thị số liệu thống kê.

6. Biểu đồ (Charts)

MiniBarChart: Biểu đồ dạng cột thu nhỏ.
RevenueBarChart: Biểu đồ cột hiển thị doanh thu.
FabricRevenueChart: Biểu đồ báo cáo doanh số cho danh mục Vải.
PaymentMethodChart: Biểu đồ hiển thị phương thức thanh toán.
ChartLegend: Component hiển thị phần chú giải cho biểu đồ.

7. Tương tác Người dùng & Trạng thái (Feedback & Context)

ConfirmDialog (ConfirmProvider, useConfirm): Hộp thoại xác nhận hành động (VD: Xóa, Duyệt).
DraftBanner: Thay trạng thái hoặc biểu ngữ báo hiệu bản nháp.
SaveStatus: Thành phần hiển thị trạng thái đang lưu/đã lưu (cho auto-save).
ErrorBoundary: Biên giới xử lý các lỗi component React tránh bị crash nguyên trang.
Portal: Cổng gắn kết Render của React lên một node gốc riêng biệt (thường dùng cho modal/sheet).

Các hệ sinh thái Component con (Sub-modules):

Ngoài ra, trong thư mục shared component còn chứa các thư mục chuyên biệt dành cho các use-case riêng:

ops-ui: Hệ thống các UI phục vụ định chuẩn Operational (Giao diện vận hành đặc thù).
roll-grid: Hệ thống lưới phục vụ hiển thị dữ liệu cây/cuộn vải.
debt-aging: Hệ thống component phục vụ theo dõi công nợ (tuổi nợ).

#VinhPhatERP #ReactJS #SharedComponents #WebDevelopment #FrontendComponent #TechBlog