-
-
-
-
- {step.title}
-
- {step.body}
-
- setMobileNavOpen(false)} />
-
- )
-}
-
-function Sidebar({ mobileOpen, onClose }: { mobileOpen: boolean; onClose: () => void }) {
- return (
- <>
-
- {mobileOpen ? : null}
-
- )
-}
-
-function Topbar({
- query,
- onQueryChange,
- onMenu,
- onUpload,
-}: {
- query: string
- onQueryChange: (value: string) => void
- onMenu: () => void
- onUpload: () => void
-}) {
- return (
-
- setMobileNavOpen(true)}
- onUpload={() => navigate('/uploads')}
- />
-
-
- navigate('/costs')}
- />
- }
- />
- setUploads((current) => [upload, ...current])}
- onNotice={setNotice}
- />
- }
- />
- {
- updateLatestUploadStatus('validating')
- setNotice('Đã lưu mapping. DataBreeze đang kiểm tra dữ liệu trước khi import.')
- navigate('/uploads/validation')
- }}
- onReset={() => setMappingRows(initialMappingRows)}
- />
- }
- />
- setNotice('Đã tạo file lỗi mẫu cho các dòng cần sửa.')}
- onImport={() => {
- setValidationComplete(true)
- updateLatestUploadStatus('completed')
- setNotice('Dashboard đã được cập nhật từ file Shopee mới nhất.')
- }}
- />
- }
- />
-
- setCostItems((current) => current.map((item) => (item.sku === sku ? { ...item, unitCost: value } : item)))
- }
- onSave={(sku) => {
- const item = costItems.find((cost) => cost.sku === sku)
- if (!item?.unitCost.trim()) return
- setCostItems((current) => current.filter((cost) => cost.sku !== sku))
- setNotice(`Đã lưu giá vốn cho ${sku}.`)
- }}
- />
- }
- />
- {
- setExpenses((current) => [expense, ...current])
- setNotice('Đã thêm chi phí mới vào workspace.')
- }}
- />
- }
- />
- navigate('/costs')} />} />
-
-
-
-
- Workspace
- Maison Commerce
-
-
-
-
-
-
-
- MQ
-
-
-
- )
-}
-
-function DashboardPage({
- selectedStore,
- dateRange,
- source,
- query,
- notice,
- onStoreChange,
- onDateRangeChange,
- onSourceChange,
- onResolveCosts,
-}: {
- selectedStore: string
- dateRange: string
- source: string
- query: string
- notice: string
- onStoreChange: (value: string) => void
- onDateRangeChange: (value: string) => void
- onSourceChange: (value: string) => void
- onResolveCosts: () => void
-}) {
- const visibleSkus = useMemo(() => {
- const normalized = query.trim().toLowerCase()
- if (!normalized) return topSkus
- return topSkus.filter((sku) => `${sku.sku} ${sku.name} ${sku.status}`.toLowerCase().includes(normalized))
- }, [query])
-
- return (
-
-
- {action}
- {title}
-{body}
-
- Xử lý giá vốn}
- />
-
- )
-}
-
-function ActionList({ onResolveCosts }: { onResolveCosts: () => void }) {
- return (
-
-
-
-
-
- {kpis.map((kpi) => (
-
-
-
-
- 3 việc}>
-
-
-
-
-
-
-
- 86%
- Dữ liệu đủ tốt để xem dashboard. Thêm giá vốn cho 3 SKU để lợi nhuận chính xác hơn.
-
-
- {insights.slice(0, 3).map((insight, index) => (
-
- ))}
-
- )
-}
-
-function ProfitChart() {
- const max = Math.max(...profitSeries)
- const points = profitSeries
- .map((value, index) => {
- const x = (index / (profitSeries.length - 1)) * 100
- const y = 100 - (value / max) * 86
- return `${x},${y}`
- })
- .join(' ')
-
- return (
-
-
-
- )
-}
-
-function SkuTable({ skus }: { skus: typeof topSkus }) {
- if (!skus.length) {
- return
- 7 thg 5
- Hôm nay
-
-
-
-
-
-
- )
-}
-
-function UploadsPage({
- uploads,
- selectedStore,
- source,
- query,
- onAddUpload,
- onNotice,
-}: {
- uploads: UploadRecord[]
- selectedStore: string
- source: string
- query: string
- onAddUpload: (upload: UploadRecord) => void
- onNotice: (value: string) => void
-}) {
- const navigate = useNavigate()
- const inputRef = useRef| SKU | -Sản phẩm | -Doanh thu | -Lợi nhuận | -Biên | -Trạng thái | -
|---|---|---|---|---|---|
| {sku.sku} | -{sku.name} | -{sku.revenue} | -{sku.profit} | -{sku.margin} | -
- |
-
- inputRef.current?.click()}>Tải file mới}
- />
- navigate('/uploads/mapping')}>Mở mapping mẫu}
- />
-
- )
-}
-
-function UploadTable({ uploads }: { uploads: UploadRecord[] }) {
- const navigate = useNavigate()
-
- if (!uploads.length) {
- return
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-function MappingPage({
- rows,
- onRowsChange,
- onContinue,
- onReset,
-}: {
- rows: MappingRow[]
- onRowsChange: (rows: MappingRow[]) => void
- onContinue: () => void
- onReset: () => void
-}) {
- const navigate = useNavigate()
- const [saveTemplate, setSaveTemplate] = useState(true)
- const requiredMissing = rows.filter((row) => row.required && row.target === 'Không map').length
- const mappedRequired = rows.filter((row) => row.required && row.target !== 'Không map').length
- const requiredTotal = rows.filter((row) => row.required).length
-
- const updateTarget = (source: string, target: string) => {
- onRowsChange(
- rows.map((row) =>
- row.source === source
- ? {
- ...row,
- target,
- confidence: target === 'Không map' ? 'Thiếu' : row.confidence === 'Thiếu' ? 'Trung bình' : row.confidence,
- }
- : row,
- ),
- )
- }
-
- return (
- | File | -Shop | -Nguồn | -Trạng thái | -Dòng | -Thời gian | -Hành động | -
|---|---|---|---|---|---|---|
| {upload.file} | -{upload.store} | -{upload.source} | -
- |
- {upload.rows} | -{upload.time} | -- - | -
- 0} onClick={onContinue}>Tiếp tục kiểm tra dữ liệu}
- />
-
- )
-}
-
-function ValidationPage({
- complete,
- onImport,
- onDownloadErrors,
-}: {
- complete: boolean
- onImport: () => void
- onDownloadErrors: () => void
-}) {
- return (
-
-
-
-
-
-
-
- {rows.map((row) => (
-
-
-
- {row.confidence}
-
- {row.required ? Bắt buộc : Tùy chọn}
-
- ))}
-
- {row.source}
- Ví dụ: {row.example || 'Không có giá trị mẫu'}
-
-
- {row.group}
-
-
-
-
-
-
-
-
-
-
-
- {[
- ['Thông tin đơn', 'Mã đơn, ngày tạo, trạng thái và shop.'],
- ['Doanh thu và phí', 'Tính doanh thu gộp, phí sàn và khuyến mãi.'],
- ['Sản phẩm và SKU', 'Gắn lợi nhuận về đúng SKU và biến thể.'],
- ['Giá vốn', 'Có thể bổ sung sau nếu file không có.'],
- ].map(([group, text]) => (
-
- {requiredMissing > 0 ? (
-
- {group}
- {text}
-
- ))}
-
-
- ) : (
-
-
- )}
-
- {complete ? 'Đã cập nhật dashboard' : 'Đồng ý và cập nhật dashboard'}}
- />
-
-
-
- )
-}
-
-function StoresPage() {
- return (
-
-
- {complete ? (
-
-
- ) : null}
-
- {['369 dòng bán hàng thiếu giá vốn', '64 dòng thiếu SKU', '18 đơn có ngày không hợp lệ'].map((warning) => (
-
-
-
- ))}
-
-
-
-
-
- Thêm shop} />
-
- )
-}
-
-function CostsPage({
- items,
- onCostChange,
- onSave,
-}: {
- items: CostItem[]
- onCostChange: (sku: string, value: string) => void
- onSave: (sku: string) => void
-}) {
- return (
-
- {stores.map((store) => (
-
-
- ))}
-
-
- {store.status}
-
-
-
-
- {store.name}
- {store.platform}
-
- -
-
- Lần import gần nhất -
- {store.lastImport} -
- Doanh thu -
- {store.revenue} -
-
-
-
-
- Nhập giá vốn hàng loạt}
- />
-
- {items.length ? (
-
-
- )
-}
-
-function ExpensesPage({ expenses, onAddExpense }: { expenses: ExpenseItem[]; onAddExpense: (expense: ExpenseItem) => void }) {
- const [draft, setDraft] = useState({ category: 'Quảng cáo', description: '', store: 'Tất cả shop', amount: '' })
-
- const submitExpense = (event: FormEvent
-
-
-
-
- ) : (
- | SKU | -Sản phẩm | -Đơn hàng | -Doanh thu ảnh hưởng | -Giá vốn / đơn | -Hành động | -
|---|---|---|---|---|---|
| {cost.sku} | -{cost.product} | -{cost.orders} | -{cost.affected} | -- onCostChange(cost.sku, event.target.value)} - placeholder="VD: 92000" - aria-label={`Giá vốn cho ${cost.sku}`} - /> - | -- - | -
- Thêm chi phí}
- />
-
- )
-}
-
-function InsightsPage({ onResolveCosts }: { onResolveCosts: () => void }) {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- | Nhóm | -Mô tả | -Shop | -Số tiền | -Ngày | -
|---|---|---|---|---|
| {expense.category} | -{expense.description} | -{expense.store} | -{expense.amount} | -{expense.date} | -
- Làm mới gợi ý}
- />
-
- )
-}
-
-function UsagePage() {
- return (
-
- {insights.map((insight) => (
-
-
- ))}
-
-
-
- {insight.severity}
-
-
-
- {insight.title}
- {insight.summary}
-
-
-
- Nâng cấp} />
-
- )
-}
-
-function statusTone(status: UploadStatus): Tone {
- if (status === 'completed') return 'good'
- if (status === 'warning' || status === 'mapping' || status === 'validating') return 'warn'
- if (status === 'failed') return 'danger'
- return 'info'
-}
-
-function statusLabel(status: UploadStatus) {
- const labels: Record
- {[
- ['Tệp tải lên', '42 / 80', '52%'],
- ['Dòng đã xử lý', '318k / 500k', '64%'],
- ['Shop', '3 / 5', '60%'],
- ['Lượt tạo gợi ý', '18 / 40', '45%'],
- ].map(([label, value, percent]) => (
-
-
- ))}
-
-
- {label}
- {value}
-
-
-
-
- Đã dùng {percent}
-
-
-
- 
-
-
-
- Mở dashboard
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
deleted file mode 100644
index 01d71e7..0000000
--- a/src/components/ui.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import type { ReactNode } from 'react'
-import type { Tone } from '../data/sampleData'
-
-const toneClass: Record
-
-
-
- Mở dashboard
-
-
-
-
-
-
-
- Lợi nhuận rõ ràng từ những file bán hàng lộn xộn.
-- DataBreeze giúp seller Việt đưa file marketplace vào một quy trình có kiểm tra, có cảnh báo và có dashboard lợi nhuận đủ tin để ra quyết định. -
-
-
- Vào dashboard
-
- Không chỉ gom file vào một chỗ. DataBreeze cho seller biết số nào đáng tin, số nào cần sửa và việc nào nên làm tiếp theo.
-
- 86%
- độ sẵn sàng dữ liệu
-
-
- 4 nguồn
- bán hàng, ads, chi phí, giá vốn
-
-
- Quy trình vận hành
-
- Từ file thô đến quyết định có căn cứ.
-Mỗi bước giữ lại dấu vết dữ liệu: file nào đã vào, lỗi nào bị chặn và dashboard nào đã được cập nhật.
-
- {workflowSteps.map((step) => {
- const Icon = step.icon
- return (
-
-
- )
- })}
-
-
- Dữ liệu trước, quyết định sau
-
- Không giấu lỗi import dưới một con số đẹp.
-- Seller không cần biết ETL hay SQL. Họ cần biết file nào đã vào, dòng nào bị chặn, SKU nào thiếu cost và dashboard nào đủ tin để hành động. -
-
- {trustLanes.map(([value, label, body]) => (
-
-
- {value}
- {label}
-
- ))}
- {body}
-
-
-
-
- Mở sản phẩm
-
- Mở thử workspace và xem luồng dữ liệu chạy thật.
-
-
- )}
- {children}
-
- {title ?
- {action}
- {title}
: null} - {description ?{description}
: null} -
- {label}
- {value}
- {delta}
-
- )
-}
-
-export function EmptyState({
- title,
- body,
- action,
-}: {
- title: string
- body: string
- action?: ReactNode
-}) {
- return (
-
-
-
- )
-}
-
-export function StepIndicator({ active }: { active: number }) {
- const steps = ['Tải file', 'Map cột', 'Kiểm tra', 'Hoàn tất']
-
- return (
-
-
- {action ? {title}
-{body}
-{action}
: null}
- -
- {steps.map((step, index) => {
- const state = index < active ? 'done' : index === active ? 'active' : 'idle'
- return (
-
- - {index + 1} - {step} - - ) - })} -