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

# Component Tree Per Halaman Sistem Inventory Walet

## 1. Dashboard
```text
DashboardPage
├── AppShell
├── DashboardHeader
├── MetricsGrid
│   ├── TotalStockCard
│   ├── InventoryValueCard
│   ├── PurchaseThisMonthCard
│   ├── SalesThisMonthCard
│   └── ShrinkageThisMonthCard
├── StockSummaryChart
├── PurchaseVsSalesChart
├── SupplierQualityChart
├── AgingAlertPanel
└── QuickActionPanel
```

## 2. Purchase List
```text
PurchaseListPage
├── AppShell
├── PageHeader
├── PurchaseFilterBar
├── PurchaseToolbar
└── PurchaseTable
    ├── TableToolbar
    ├── StatusBadge
    └── Pagination
```

## 3. Purchase Form
```text
PurchaseFormPage
├── AppShell
├── PageHeader
├── PurchaseHeaderForm
│   ├── SupplierSelect
│   ├── PurchaseDateInput
│   ├── SupplierInvoiceInput
│   └── NotesTextarea
├── PurchaseLineEditor
│   ├── PurchaseLineRow
│   │   ├── ItemTypeSelect
│   │   ├── ItemGradeSelect
│   │   ├── QtyInput
│   │   ├── UnitSelect
│   │   ├── UnitPriceInput
│   │   ├── ClassificationStatusSelect
│   │   └── LineSubtotalCell
│   └── AddLineButton
├── PurchaseSummaryCard
└── StickyActionFooter
```

## 4. Receipt Form
```text
ReceiptFormPage
├── AppShell
├── PageHeader
├── ReceiptHeaderForm
├── ReceiptLineTable
│   ├── ReceiptLineRow
│   │   ├── OrderedQtyCell
│   │   ├── ReceivedQtyInput
│   │   ├── AcceptedQtyInput
│   │   ├── RejectedQtyInput
│   │   ├── UnitCostInput
│   │   ├── WarehouseSelect
│   │   └── WarehouseLocationSelect
├── GenerateLotPanel
└── StickyActionFooter
```

## 5. Stock Lot List
```text
StockLotListPage
├── AppShell
├── PageHeader
├── LotFilterBar
├── LotToolbar
└── LotTable
    ├── StatusBadge
    ├── AgingBadge
    ├── LotQuickActionsMenu
    └── Pagination
```

## 6. Lot Detail
```text
LotDetailPage
├── AppShell
├── PageHeader
├── LotSummaryCard
├── LotIdentitySection
├── LotQuantitySection
├── LotTraceSection
│   ├── ParentLotCard
│   ├── ChildLotsTable
│   └── SourceReferenceCard
├── LotMovementTimeline
├── LotSalesUsageTable
├── LotLabelPanel
└── LotActionPanel
    ├── HoldLotButton
    ├── ReleaseLotButton
    ├── TransferLotButton
    ├── RegradeLotButton
    └── PrintLabelButton
```

## 7. Sorting Session Form
```text
SortingSessionFormPage
├── AppShell
├── PageHeader
├── SourceLotSelector
├── SourceLotSummaryCard
├── SortingResultEditor
│   ├── SortingResultRow
│   │   ├── ItemTypeSelect
│   │   ├── ItemGradeSelect
│   │   ├── QtyResultInput
│   │   └── CostInput
│   └── AddResultLineButton
├── ShrinkageInputCard
└── StickyActionFooter
```

## 8. Sales Form
```text
SalesFormPage
├── AppShell
├── PageHeader
├── SalesHeaderForm
│   ├── CustomerSelect
│   ├── SalesDateInput
│   └── NotesTextarea
├── SalesLineEditor
│   ├── SalesLineRow
│   │   ├── ItemTypeSelect
│   │   ├── ItemGradeSelect
│   │   ├── QtyInput
│   │   ├── UnitSelect
│   │   ├── SellingPriceInput
│   │   └── LineSubtotalCell
│   └── AddLineButton
├── SalesSummaryCard
└── StickyActionFooter
```

## 9. Allocation Screen
```text
SalesAllocationPage
├── AppShell
├── PageHeader
├── SalesLineSummaryCard
├── AllocationToolbar
│   ├── AutoAllocateButton
│   ├── AllocationPolicySelect
│   └── RefreshStockButton
├── AvailableLotTable
│   ├── LotRow
│   │   ├── LotCodeCell
│   │   ├── SupplierCell
│   │   ├── AvailableQtyCell
│   │   ├── UnitCostCell
│   │   ├── FIFORecommendationBadge
│   │   └── AllocateQtyInput
├── AllocationSummaryCard
└── StickyActionFooter
```

## 10. Picking Screen
```text
PickingPage
├── AppShell
├── PageHeader
├── PickingSummaryCard
├── QrScannerPanel
├── PickingAllocationList
│   ├── PickingAllocationRow
│   │   ├── LotInfoCard
│   │   ├── AllocatedQtyCell
│   │   ├── PickedQtyInput
│   │   └── VarianceBadge
└── StickyActionFooter
```

## 11. Barcode Lookup
```text
BarcodeLookupPage
├── AppShell
├── PageHeader
├── QrScannerPanel
├── ManualBarcodeInput
├── LookupResultCard
├── TraceSummaryPanel
└── QuickActionPanel
```

## 12. Adjustment Form
```text
AdjustmentFormPage
├── AppShell
├── PageHeader
├── LotSelector
├── LotSnapshotCard
├── AdjustmentForm
│   ├── AdjustmentTypeSelect
│   ├── ReasonSelect
│   ├── QtyBeforeReadonly
│   ├── QtyChangeInput
│   ├── QtyAfterPreview
│   ├── CostImpactPreview
│   └── NotesTextarea
└── StickyActionFooter
```

## 13. Reports Page
```text
ReportPage
├── AppShell
├── PageHeader
├── ReportFilterBar
├── ReportSummaryCards
├── ReportChartSection
├── ReportTableSection
└── ExportActionBar
```

## 14. Shared Critical Components
```text
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