# Component Library Audit Report

This report summarizes the discrepancies found between the Flutter codebase and the [HTML Component Library](file:///Applications/MAMP/htdocs/flutterProject/tongban_app/docs/document/HTML/index.html).

## 1. Basics & Theme

| Component | Status | Discrepancies / Missing Features |
| :--- | :--- | :--- |
| `AppSpacing` | ⚠️ Partial | Missing `navBarHeight` (50), `bottomNavBarHeight` (64). Missing standardized avatar sizes (`sm` to `xxl`). |
| `AppColors` | ✅ OK | |
| `AppRadius` | ✅ OK | |
| `AppTextStyles` | ✅ OK | |
| `AppDivider` | ✅ OK | |

## 2. Navigation

| Component | Status | Discrepancies / Missing Features |
| :--- | :--- | :--- |
| `AppNavBar` | ⚠️ Discrepancy | Height is 56dp in code, spec requires 50dp. |
| `AppTransparentNavBar` | 🔍 Review Needed | Need to verify if it supports `scrollController` for dynamic transparency. |
| `AppSearchNavBar` | ✅ OK | |
| `AppChatNavBar` | ✅ OK | |
| `AppBottomNavBar` | ✅ OK | |
| `AppTabBar` | ✅ OK | |

## 3. Lists & Data

| Component | Status | Discrepancies / Missing Features |
| :--- | :--- | :--- |
| `AppCell` | ✅ OK | Min-height 56dp correctly implemented. |
| `AppCellGroup` | ✅ OK | |
| `AppSwipeCell` | ✅ OK | |
| `AppListView` | ⚠️ Review | Uses `BezierHeader`. Spec implies a more custom/premium feel (potentially glassmorphism). |
| `CustomAvatar` | ⚠️ Mismatch | Sizes named `AvatarSize.ml`, `sm`, etc. don't align perfectly with spec (`sm`, `md`, `lg`, `xl`, `xxl`). |
| `AppBadge` | ✅ OK | |
| `AppTag` | ✅ OK | |
| `AppMessageTile` | ⚠️ Partial | Uses internal `_UnreadBadge` instead of global `AppBadge`. |

## 4. Feedback & Status

| Component | Status | Discrepancies / Missing Features |
| :--- | :--- | :--- |
| `AppSkeleton` | ✅ OK | |
| `AppEmptyState` | ✅ OK | |
| `AppToast` | 🔍 Review Needed | Verify top position and glassmorphism effect. |
| `AppLoading` | ✅ OK | |
| `AppDialog` | ✅ OK | |
| `AppActionSheet` | ✅ OK | |

## 5. Forms & Input

| Component | Status | Discrepancies / Missing Features |
| :--- | :--- | :--- |
| `AppInput` | ⚠️ Partial | Missing `AppOtpInput`. |
| `AppSwitch` | ⚠️ Discrepancy | Uses theme success color. Spec requires fixed `#34C759` (except destructive). |
| `AppCheckbox` | ⚠️ Discrepancy | Radius uses `AppRadius.sm`. Spec requires fixed 8dp. |
| `AppRadio` | ✅ OK | |
| `PrimaryActionButton` | ✅ OK | |
| `AppCapsuleButton` | ✅ OK | |

## 6. Chat Components

| Component | Status | Discrepancies / Missing Features |
| :--- | :--- | :--- |
| `ChatBubble` | ✅ OK | Broad support, but needs verification for all message types listed in spec. |
| `VoicePlayerBubble` | 🔍 Review Needed | Verify standalone usage as per spec. |
| `ChatVoicePill` | ✅ OK | |
| `ChatInputBar` | ✅ OK | |
| `MessageContextMenu` | ✅ OK | |
| `ChatMediaPanel` | ✅ OK | |

## Summary of Missing Components
- `AppOtpInput`

## Action Items
1. Update `AppSpacing` with missing constants.
2. Adjust `AppNavBar` height to 50.
3. Align `CustomAvatar` sizes and naming with spec.
4. Refactor `AppMessageTile` to use `AppBadge`.
5. Fix `AppSwitch` color and `AppCheckbox` radius.
6. Implement `AppOtpInput`.