Mockup v2 — Shell thống nhất · OIMA Mobile · PITS Execution Flow (Console giữ v1)

Shell thống nhất — Header / Bottom Bar ẩn hiện theo thao tác

Một bộ khung dùng chung từ Console đến mọi product end-user. Cuộn xuống → bar tự ẩn (nội dung chiếm trọn màn hình) · cuộn lên / chạm mép → bar hiện lại. Thử ngay trong khung điện thoại bên dưới: cuộn nội dung để xem bar ẩn/hiện.

☰
OIMA Emerald Precinct · Phương
🔍🔔
Cuộn thử để xem bar ẩn/hiện ↓
Header & bottom bar tự nhường chỗ khi bạn đọc
Daily Meeting 07:30
45 phút nữa · chủ trì: CEO
Cam kết còn treo (2)
công nợ Gelexia · báo cáo tháng
Podcast tuần này
4 cuộc họp · 18 phút nghe
Nội dung dài 1
phần thân cuộn tự do, bar không che
Nội dung dài 2
…
Nội dung dài 3
…
Nội dung dài 4
…
Nội dung dài 5
cuộn ngược lên → bar quay lại ngay
Cuối trang
chạm vùng mép dưới cũng gọi lại bar
🏠Trang chính 📋Việc . 🎧Nghe 👤Tôi
🎤
▲▼ cuộn để thử
Quy tắc hành vi (chuẩn toàn platform)
1
Cuộn xuống ≥ 24px → header trượt lên, bottom trượt xuống — nội dung full màn hình
2
Cuộn lên bất kỳ hoặc chạm mép trên/dưới → bar hiện lại ≤ 280ms
3
Không bao giờ ẩn khi: đang ghi âm (thanh REC ghim), có hành động chờ xác nhận, bàn phím mở
4
FAB trung tâm = hành động số 1 của từng product: OIMA 🎤 dự họp · PITS 🎤 tạo việc · CSAgent 📣 phản ánh — vị trí không đổi, ngón cái với tới 1
5
Mở rộng về sau: bar tối đa 4 tab + FAB; feature mới vào tab "Tôi ▸ Tiện ích" hoặc menu ☰ — không nêm thêm icon 2
Cùng 1 shell, 3 hình thái
📱
Mobile: header + bottom bar (như demo)
🖥
Desktop end-user: header + sidebar trái thu gọn được thành dải icon (giữ không gian nội dung)
⚙
Console: cùng header/sidebar, thêm breadcrumb — admin luôn là nhánh, không phải nhà
Desktop shell — sidebar thu gọn (hover/click ⟩ để mở) · cùng token, cùng hành vi
🏠📋🎧⚙ ⟩
vùng nội dung tối đa — sidebar chỉ 52px khi thu gọn, mở rộng thành 210px có nhãn chữ
Header desktop cũng auto-hide khi cuộn đọc tài liệu dài
ví dụ: đọc transcript họp 90 phút, biên bản, báo cáo tháng
Chú thích Shell
  • 1 — FAB là "trang chủ = trang hành động" thu về 1 nút: mở app là làm được việc chính trong 1 chạm.
  • 2 — Kỷ luật mở rộng: thêm feature không được phá bar — đúng tinh thần extend-không-sửa-lõi áp vào UI.

    • OIMA Mobile — trợ lý họp trong túi

    Cùng shell chuẩn. Ba khoảnh khắc: trước họp · trong họp (bar tự ẩn, thanh REC ghim) · sau họp nghe podcast.

    ☰
    OIMA Trước họp · 06:45
    🔔
    Daily Meeting 07:30 45'
    Teams · chủ trì CEO Nguyễn Hồng Minh
    📋 Brief hôm nay

    Báo cáo TÀI CHÍNH — CEO thường truy:
    ① số so kỳ trước ② deadline khoản treo ③ tên người phụ trách

    Question Bank · 79%
    ⏳ Cam kết treo (2)
    !
    Công nợ Gelexia
    hạn HÔM NAY
    🏠Chính📅Họp .🎧Nghe👤Tôi
    🎤
    ĐANG GHI 00:42:17
    [Anh Toàn — KT] …bể bơi đã châm hóa chất, chỉ số ghi nhận đầy đủ…
    [CEO] pH so chuẩn thế nào, ai kiểm tra chéo?
    Q&A dự đoán

    ① pH 3 tháng so TCVN?

    7.2–7.6 đạt chuẩn BC nền tảng T4-T6

    ③ Chi phí hóa chất/m³?

    chưa đủ dẫn chứng — chỉ hỏi, không đoán
    Ghi chú riêng @00:42
    "hỏi lại anh Toàn lịch kiểm chéo" — không vào biên bản
    bar tự ẩn khi họp — thanh REC luôn ghim 1
    ☰
    Sau họp Daily 10/07 · đã chốt
    ⇪
    🎧 Podcast 4 phút
    1:24/4:05
    cam kết của bạn ở 2:10 · giọng AI trung tính
    Cam kết MỚI của bạn (1)
    ＋
    Gửi bảng pH kiểm chéo
    hạn: ngày mai · đã vào Google Calendar ✓
    Hỏi OIS về cuộc họp
    trả lời luôn kèm nguồn + timestamp
    ◈ Agent gợi ý
    Đóng gói NotebookLM? · Ghi Obsidian? — 1 chạm
    🏠Chính📅Họp .🎧Nghe👤Tôi
    🎤
    Chú thích OIMA Mobile
  • 1 — Quy tắc shell #3: trạng thái ghi âm là "hành động sống" → REC bar ghim vĩnh viễn, các bar khác nhường chỗ cho transcript.

    • PITS — Nhận việc → Thực hiện → Bằng chứng → Đánh giá

    Tiếp nối kịch bản nước chảy F.7.07: góc nhìn chị Nguyễn Thị Tuyết (VS Seiketsu, hành lang F) nhận task #3, báo cáo bằng lời + ảnh, rồi Case tổng xem lại đầy đủ bằng chứng & hiệu năng.

    ←
    Task #2841-3 Cào thoát nước · hành lang T7-F
    ⋮
    ƯU TIÊNSLA còn 1h 42'
    Cào thoát nước, lau dọn hành lang T7 Block F
    thuộc Case #2841 · sau bước KT ✓ đã xong 10:05
    Bằng chứng TRƯỚC (từ người báo + KT)
    💧
    GSDV chụp · 09:32
    🔧
    KT: đã khóa van · 10:05
    KT ghi chú: "rò ống thoát sàn căn F.7.07, đã xử lý nguồn — cần lau khô hành lang"
    nhận việc = mốc thời gian tính hiệu năng 1
    ←
    Báo cáo hoàn thành Task #2841-3 · đang thực hiện 00:26
    "Đã cào hết nước, lau khô toàn bộ hành lang, đặt biển cảnh báo sàn ướt, khu vực sạch sẽ rồi ạ"
    AI điền sẵn — sửa nếu cần
    Kết quảHoàn thành — sạch, khô, có biển cảnh báo
    Vật tư—
    Đề xuất thêmtheo dõi lại sau 24h (AI gợi từ playbook)
    Ảnh SAU — bắt buộc ≥1 2
    📷
    ✓ 10:38 · GPS T7-F
    ＋ chụp thêm
    ←
    Case #2841 Nước tràn hành lang T7-F · F.7.07
    ⇪
    ĐÃ NGHIỆM THUtổng 1h 21'
    Trước ↔ Sau 3
    💧
    TRƯỚC · 09:32
    ✨
    SAU · 10:38 · BE xác nhận
    Dòng thời gian & bằng chứng
    09:32 · GSDV tạo case (voice + 2 ảnh)
    4 task tự sinh theo playbook
    10:05 · KT a.Hoàng Phú xong bước 1
    33' · khóa van, ảnh + ghi chú
    10:08 · CS gọi chủ hộ F.7.07 ✓
    ghi âm cuộc gọi đính kèm
    10:38 · VS c.Tuyết xong bước 3
    26' · ảnh sau + voice note
    10:53 · BE nghiệm thu ✓ + tạo việc theo dõi 24h
    đề xuất của VS được chấp nhận → playbook học
    Hiệu năng — hiện ngay khi đóng
    A
    SLA: đạt (1h21'/2h) · phản hồi đầu 12'
    ★★★★★ cư dân F.7.07 đánh giá qua CSAgent
    điểm cộng vào Commitment Score từng người & Evaluation nhà thầu Seiketsu — tự động, có vết, không chấm tay
    Chú thích PITS Flow
  • 1 — Mốc "nhận việc" tách khỏi "giao việc": đo được cả thời gian phản hồi lẫn thời gian thực thi — 2 chỉ số khác nhau trong Evaluation.
  • 2 — Ảnh SAU bắt buộc + tự đóng dấu giờ/GPS: chuẩn hóa đúng thói quen "chụp báo Zalo" thành bằng chứng có cấu trúc.
  • 3 — Cặp Trước↔Sau là đơn vị bằng chứng chuẩn: BQL nghiệm thu, BQT xem trong Portal, cư dân thấy trong CSAgent — cùng 1 dữ liệu, 3 lăng kính (Compute Once).