AbelBirdNest-Stock/docs/project-spec/walet-component-tree.md

Component Tree Per Halaman Sistem Inventory Walet

1. Dashboard

DashboardPage
├── AppShell
├── DashboardHeader
├── MetricsGrid
│   ├── TotalStockCard
│   ├── InventoryValueCard
│   ├── PurchaseThisMonthCard
│   ├── SalesThisMonthCard
│   └── ShrinkageThisMonthCard
├── StockSummaryChart
├── PurchaseVsSalesChart
├── SupplierQualityChart
├── AgingAlertPanel
└── QuickActionPanel

2. Purchase List

PurchaseListPage
├── AppShell
├── PageHeader
├── PurchaseFilterBar
├── PurchaseToolbar
└── PurchaseTable
    ├── TableToolbar
    ├── StatusBadge
    └── Pagination

3. Purchase Form

PurchaseFormPage
├── AppShell
├── PageHeader
├── PurchaseHeaderForm
│   ├── SupplierSelect
│   ├── PurchaseDateInput
│   ├── SupplierInvoiceInput
│   └── NotesTextarea
├── PurchaseLineEditor
│   ├── PurchaseLineRow
│   │   ├── ItemTypeSelect
│   │   ├── ItemGradeSelect
│   │   ├── QtyInput
│   │   ├── UnitSelect
│   │   ├── UnitPriceInput
│   │   ├── ClassificationStatusSelect
│   │   └── LineSubtotalCell
│   └── AddLineButton
├── PurchaseSummaryCard
└── StickyActionFooter

4. Receipt Form

ReceiptFormPage
├── AppShell
├── PageHeader
├── ReceiptHeaderForm
├── ReceiptLineTable
│   ├── ReceiptLineRow
│   │   ├── OrderedQtyCell
│   │   ├── ReceivedQtyInput
│   │   ├── AcceptedQtyInput
│   │   ├── RejectedQtyInput
│   │   ├── UnitCostInput
│   │   ├── WarehouseSelect
│   │   └── WarehouseLocationSelect
├── GenerateLotPanel
└── StickyActionFooter

5. Stock Lot List

StockLotListPage
├── AppShell
├── PageHeader
├── LotFilterBar
├── LotToolbar
└── LotTable
    ├── StatusBadge
    ├── AgingBadge
    ├── LotQuickActionsMenu
    └── Pagination

6. Lot Detail

LotDetailPage
├── AppShell
├── PageHeader
├── LotSummaryCard
├── LotIdentitySection
├── LotQuantitySection
├── LotTraceSection
│   ├── ParentLotCard
│   ├── ChildLotsTable
│   └── SourceReferenceCard
├── LotMovementTimeline
├── LotSalesUsageTable
├── LotLabelPanel
└── LotActionPanel
    ├── HoldLotButton
    ├── ReleaseLotButton
    ├── TransferLotButton
    ├── RegradeLotButton
    └── PrintLabelButton

7. Sorting Session Form

SortingSessionFormPage
├── AppShell
├── PageHeader
├── SourceLotSelector
├── SourceLotSummaryCard
├── SortingResultEditor
│   ├── SortingResultRow
│   │   ├── ItemTypeSelect
│   │   ├── ItemGradeSelect
│   │   ├── QtyResultInput
│   │   └── CostInput
│   └── AddResultLineButton
├── ShrinkageInputCard
└── StickyActionFooter

8. Sales Form

SalesFormPage
├── AppShell
├── PageHeader
├── SalesHeaderForm
│   ├── CustomerSelect
│   ├── SalesDateInput
│   └── NotesTextarea
├── SalesLineEditor
│   ├── SalesLineRow
│   │   ├── ItemTypeSelect
│   │   ├── ItemGradeSelect
│   │   ├── QtyInput
│   │   ├── UnitSelect
│   │   ├── SellingPriceInput
│   │   └── LineSubtotalCell
│   └── AddLineButton
├── SalesSummaryCard
└── StickyActionFooter

9. Allocation Screen

SalesAllocationPage
├── AppShell
├── PageHeader
├── SalesLineSummaryCard
├── AllocationToolbar
│   ├── AutoAllocateButton
│   ├── AllocationPolicySelect
│   └── RefreshStockButton
├── AvailableLotTable
│   ├── LotRow
│   │   ├── LotCodeCell
│   │   ├── SupplierCell
│   │   ├── AvailableQtyCell
│   │   ├── UnitCostCell
│   │   ├── FIFORecommendationBadge
│   │   └── AllocateQtyInput
├── AllocationSummaryCard
└── StickyActionFooter

10. Picking Screen

PickingPage
├── AppShell
├── PageHeader
├── PickingSummaryCard
├── QrScannerPanel
├── PickingAllocationList
│   ├── PickingAllocationRow
│   │   ├── LotInfoCard
│   │   ├── AllocatedQtyCell
│   │   ├── PickedQtyInput
│   │   └── VarianceBadge
└── StickyActionFooter

11. Barcode Lookup

BarcodeLookupPage
├── AppShell
├── PageHeader
├── QrScannerPanel
├── ManualBarcodeInput
├── LookupResultCard
├── TraceSummaryPanel
└── QuickActionPanel

12. Adjustment Form

AdjustmentFormPage
├── AppShell
├── PageHeader
├── LotSelector
├── LotSnapshotCard
├── AdjustmentForm
│   ├── AdjustmentTypeSelect
│   ├── ReasonSelect
│   ├── QtyBeforeReadonly
│   ├── QtyChangeInput
│   ├── QtyAfterPreview
│   ├── CostImpactPreview
│   └── NotesTextarea
└── StickyActionFooter

13. Reports Page

ReportPage
├── AppShell
├── PageHeader
├── ReportFilterBar
├── ReportSummaryCards
├── ReportChartSection
├── ReportTableSection
└── ExportActionBar

14. Shared Critical Components

AppShell
├── Sidebar
├── Topbar
├── Breadcrumb
└── ContentWrapper

DataTable
├── FilterBar
├── ColumnVisibilityToggle
├── ExportButton
├── Pagination
└── EmptyState

QrScannerPanel
├── CameraPreview
├── ScanOverlay
├── ScanResultBadge
└── ManualFallbackInput

15. Prioritas Component Build

Urutan komponen paling penting dibangun dulu:

1. AppShell
2. DataTable
3. StatusBadge / AgingBadge
4. Form primitives
5. PurchaseLineEditor
6. ReceiptLineTable
7. LotTable
8. LotSummaryCard
9. LotMovementTimeline
10. SalesLineEditor
11. AvailableLotTable
12. AllocationSummaryCard
13. QrScannerPanel
14. PickingAllocationList
15. ReportFilterBar

16. Catatan

• halaman lot detail dan allocation adalah pusat kompleksitas produk
• QR scanner dan movement timeline adalah komponen pembeda
• semua editor multi-line harus reusable agar purchase, receipt, sales, dan sorting lebih cepat dibangun