Wireframe Design
ระบบผู้ดูแลระบบ (System Administrator Management System)
โรงพยาบาลค่ายธนรัชน์
เอกสารเลขที่: SRS-1.2.21-WIREFRAME
เวอร์ชัน: 1.0
วันที่: 9 ตุลาคม 2568
ผู้จัดทำ: ทีมพัฒนาระบบ
ผู้อนุมัติ: ผู้อำนวยการโรงพยาบาลค่ายธนรัชน์
การปรับปรุง: ใหม่ - สอดคล้องกับ Sitemap และ TOR 8 ข้อ
📋 สารบัญ
- ภาพรวมการออกแบบ
- หลักการออกแบบ UI/UX
- Wireframe หน้าหลัก (Dashboard)
- Wireframe กลุ่ม Identity & Access Management
- Wireframe กลุ่ม System Configuration
- Wireframe กลุ่ม Database Management
- Wireframe กลุ่ม Report Management
- Wireframe กลุ่ม Communication System
- Wireframe กลุ่ม System Monitoring
- Responsive Design Guidelines
1. ภาพรวมการออกแบบ
1.1 วัตถุประสงค์ของเอกสาร
เอกสาร Wireframe นี้มีวัตถุประสงค์เพื่อ: - แสดงโครงร่างการออกแบบหน้าจอระบบผู้ดูแลระบบ - กำหนดการจัดวางองค์ประกอบต่างๆ บนหน้าจอ - เป็นแนวทางการพัฒนา Frontend ที่สอดคล้องกับ Sitemap - รองรับ TOR 8 ข้อกำหนดอย่างครบถ้วน
1.2 ความสอดคล้องกับเอกสารอื่น
| เอกสารอ้างอิง | ความสอดคล้อง |
|---|---|
| TOR ระบบผู้ดูแลระบบ | ครอบคลุม 8 ข้อกำหนดครบถ้วน |
| Sitemap.md | โครงสร้างเมนูและ Navigation ตรงกัน 100% |
| SRS.md | ฟีเจอร์และฟังก์ชันสอดคล้องตาม Requirements |
| ER Diagram.md | การแสดงข้อมูลตามโครงสร้างฐานข้อมูล |
| Schema.md | Field และ Data Type ตามที่กำหนด |
1.3 เทคโนโลยีและเครื่องมือที่ใช้
- Frontend Framework: Vue.js 3 + TypeScript
- UI Library: Element Plus / Ant Design Vue
- State Management: Pinia
- Responsive Design: Bootstrap 5 / Tailwind CSS
- Charts: Chart.js / ECharts
- Icons: Heroicons / Tabler Icons
2. หลักการออกแบบ UI/UX
2.1 Design Principles
2.1.1 🎯 Consistency (ความสม่ำเสมอ)
- ใช้ชุดสีและ Typography เดียวกันทั้งระบบ
- การจัดวาง Layout แบบมาตรฐานในทุกหน้า
- ปุ่มและ Control ที่มีฟังก์ชันเดียวกันควรมีรูปลักษณ์เดียวกัน
2.1.2 🔍 Clarity (ความชัดเจน)
- ข้อความและ Label ที่เข้าใจง่าย
- การใช้ Icon ที่มีความหมายสื่อสาร
- การจัดกลุ่มข้อมูลอย่างเป็นระบบ
2.1.3 ⚡ Efficiency (ประสิทธิภาพ)
- การเข้าถึงฟังก์ชันหลักด้วยคลิกน้อยที่สุด
- Quick Actions และ Shortcuts สำหรับงานประจำ
- การ Load ข้อมูลแบบ Progressive
2.1.4 🛡️ Security (ความปลอดภัย)
- การแสดงข้อมูลตามสิทธิ์ผู้ใช้
- การยืนยันตัวตนก่อนการดำเนินการสำคัญ
- การแสดงสถานะความปลอดภัยอย่างชัดเจน
2.2 Color Scheme (ชุดสี)
/* Primary Colors - สีหลักของระบบ */
--primary-blue: #1976d2; /* สีน้ำเงินหลัก - เมนูและ Header */
--primary-light: #42a5f5; /* สีน้ำเงินอ่อน - Hover states */
--primary-dark: #0d47a1; /* สีน้ำเงินเข้ม - Active states */
/* Secondary Colors - สีประกอบ */
--secondary-gray: #757575; /* สีเทา - ข้อความรอง */
--secondary-light: #e0e0e0; /* สีเทาอ่อน - Border และ Divider */
/* Functional Colors - สีตามหน้าที่ */
--success-green: #4caf50; /* สีเขียว - Success messages */
--warning-orange: #ff9800; /* สีส้ม - Warning messages */
--error-red: #f44336; /* สีแดง - Error messages */
--info-cyan: #00bcd4; /* สีฟ้า - Information messages */
/* Background Colors - สีพื้นหลัง */
--bg-primary: #ffffff; /* พื้นหลังหลัก */
--bg-secondary: #f5f5f5; /* พื้นหลังรอง */
--bg-card: #fafafa; /* พื้นหลัง Card */
2.3 Typography Scale
/* Heading Styles */
h1 { font-size: 2.5rem; font-weight: 700; } /* Page Title */
h2 { font-size: 2rem; font-weight: 600; } /* Section Title */
h3 { font-size: 1.5rem; font-weight: 500; } /* Subsection Title */
h4 { font-size: 1.25rem; font-weight: 500; } /* Card Title */
/* Body Text */
.text-lg { font-size: 1.125rem; } /* Large text */
.text-base { font-size: 1rem; } /* Base text */
.text-sm { font-size: 0.875rem; } /* Small text */
.text-xs { font-size: 0.75rem; } /* Extra small text */
2.4 Grid System
- Desktop: 12-column grid, max-width 1440px
- Tablet: 8-column grid, max-width 768px
- Mobile: 4-column grid, max-width 375px
3. Wireframe หน้าหลัก (Dashboard)
3.1 Layout Overview
┌─────────────────────────────────────────────────────────────────┐
│ 🏥 HEADER │
├─────────────────────────────────────────────────────────────────┤
│ SIDEBAR │ MAIN CONTENT │
│ │ │
│ 🔐 IAM │ 📊 DASHBOARD OVERVIEW │
│ │ ┌─────────────┬─────────────┬─────────────┐ │
│ ⚙️ SYS │ │ USER COUNT │ ONLINE USERS│ SYSTEM STATUS│ │
│ │ └─────────────┴─────────────┴─────────────┘ │
│ 🗄️ DB │ │
│ │ 📈 CHARTS & ANALYTICS │
│ 📊 REP │ ┌─────────────────────┬─────────────────────┐ │
│ │ │ LOGIN TRENDS │ SYSTEM USAGE │ │
│ 📢 COMM │ └─────────────────────┴─────────────────────┘ │
│ │ │
│ 👁️ MON │ 📋 RECENT ACTIVITIES │
│ │ • User john.doe logged in │
│ │ • Report template updated │
│ │ • Database backup completed │
└─────────┴───────────────────────────────────────────────────────┘
3.2 Header Component
┌─────────────────────────────────────────────────────────────────┐
│ 🏥 [LOGO] โรงพยาบาลค่ายธนรัชน์ │ 🔍 [SEARCH] │ 🔔 📧 👤 [USER] │
│ ระบบผู้ดูแลระบบ │ │ │
└─────────────────────────────────────────────────────────────────┘
องค์ประกอบ Header: - โลโก้โรงพยาบาล + ชื่อระบบ (ซ้าย) - Global Search Bar (กลาง) - Notification Bell (ขวา) - User Profile Dropdown (ขวาสุด)
3.3 Sidebar Navigation
┌─────────────┐
│ 🏠 Dashboard │
├─────────────┤
│ 🔐 IAM │
│ 👤 Users │
│ 👥 Groups │
│ 🎭 Roles │
│ 📜 Policies│
├─────────────┤
│ ⚙️ System │
│ 🏥 Basic │
│ 📊 Params │
│ 📚 Master │
├─────────────┤
│ 🗄️ Database │
│ 📖 Access │
│ 📤 Export │
│ 💾 Backup │
├─────────────┤
│ 📊 Reports │
│ 📝 Template│
│ ➕ Create │
│ ⏰ Schedule│
├─────────────┤
│ 📢 Comm │
│ 📰 News │
│ 🔔 Alerts │
│ 💬 Message │
├─────────────┤
│ 👁️ Monitor │
│ 👥 Online │
│ 📋 Logs │
│ 🔒 Security│
└─────────────┘
3.4 Dashboard Main Content
┌─────────────────────────────────────────────────────────────────┐
│ 📊 DASHBOARD OVERVIEW │
├─────────────────┬─────────────────┬─────────────────────────────┤
│ 👥 TOTAL USERS │ 🟢 ONLINE USERS │ ⚡ SYSTEM STATUS │
│ │ │ │
│ 1,247 │ 23 │ 🟢 All Systems Online │
│ (+12 today) │ (Last 24h) │ 🟢 Database: Normal │
│ │ │ 🟡 Backup: In Progress │
├─────────────────┼─────────────────┼─────────────────────────────┤
│ 📋 NEW REPORTS │ 🔔 ALERTS │ 🔐 SECURITY STATUS │
│ │ │ │
│ 5 │ 2 │ 🟢 No Security Issues │
│ (Pending Rev.) │ (Need Action) │ 📊 Login Success: 98.7% │
│ │ │ 🔒 Failed Attempts: 3 │
└─────────────────┴─────────────────┴─────────────────────────────┘
3.5 Quick Actions Panel
┌─────────────────────────────────────────────────────────────────┐
│ ⚡ QUICK ACTIONS │
├─────────────────┬─────────────────┬─────────────────────────────┤
│ [➕ Create User] │ [💾 Backup Now] │ [📢 Send Announcement] │
├─────────────────┼─────────────────┼─────────────────────────────┤
│ [📊 Generate │ [👁️ View Audit │ [⚙️ System Settings] │
│ Report] │ Logs] │ │
└─────────────────┴─────────────────┴─────────────────────────────┘
3.6 Charts and Analytics Section
┌─────────────────────────────────────────────────────────────────┐
│ 📈 SYSTEM ANALYTICS │
├─────────────────────────┬───────────────────────────────────────┤
│ 📊 USER LOGIN TRENDS │ 💻 SYSTEM USAGE PATTERNS │
│ │ │
│ ╭─╮ ╭─╮ │ Database Usage: ████████░░ 80% │
│ ╭─╯ ╰─╮ ╭─╯ ╰─╮ │ Server CPU: ██████░░░░ 60% │
│╭╯ ╰─╯ ╰─╮ │ Memory Usage: ████████░░ 75% │
│ [7 Days] │ Network I/O: ███░░░░░░░ 30% │
│ │ │
├─────────────────────────┼───────────────────────────────────────┤
│ 🔐 SECURITY METRICS │ 📈 PERFORMANCE OVERVIEW │
│ │ │
│ ✅ Successful Logins │ Avg Response Time: 250ms │
│ 98.7% (1,234/1,250) │ Uptime Today: 99.9% │
│ │ Active Sessions: 23 │
│ ❌ Failed Attempts │ Peak Usage: 14:30 (67 users) │
│ 1.3% (16/1,250) │ │
└─────────────────────────┴───────────────────────────────────────┘
3.7 Recent Activities Feed
┌─────────────────────────────────────────────────────────────────┐
│ 📋 RECENT ACTIVITIES │
├─────────────────────────────────────────────────────────────────┤
│ 🕐 09:45 👤 user.admin ➕ Created new user account │
│ john.smith in Finance department │
├─────────────────────────────────────────────────────────────────┤
│ 🕐 09:30 📊 user.report 📄 Generated monthly usage report │
│ Monthly System Usage Report Q4 2025 │
├─────────────────────────────────────────────────────────────────┤
│ 🕐 09:15 💾 system.backup ✅ Database backup completed │
│ Backup size: 2.3GB to /backup/daily/ │
├─────────────────────────────────────────────────────────────────┤
│ 🕐 08:45 🔐 user.security ⚠️ Security alert resolved │
│ Multiple failed login attempts from IP 192.168.1.15 │
├─────────────────────────────────────────────────────────────────┤
│ 🕐 08:30 ⚙️ user.admin 🔧 Updated system configuration │
│ Modified session timeout to 30 minutes │
└─────────────────────────────────────────────────────────────────┘
3.8 System Status Indicators
┌─────────────────────────────────────────────────────────────────┐
│ 🏥 SYSTEM HEALTH STATUS │
├─────────────────────────────────────────────────────────────────┤
│ 🟢 HIS Database Server │ Status: Online │ Response: 15ms│
│ 🟢 Web Application Server │ Status: Online │ CPU: 45% │
│ 🟢 Authentication Service │ Status: Online │ Memory: 2.1GB │
│ 🟡 Backup Service │ Status: Running │ Progress: 65% │
│ 🟢 Email Service │ Status: Online │ Queue: 0 │
│ 🟢 File Storage Service │ Status: Online │ Space: 73% │
└─────────────────────────────────────────────────────────────────┘
4. Wireframe กลุ่ม Identity & Access Management
4.1 User Management - รายชื่อผู้ใช้งาน
┌─────────────────────────────────────────────────────────────────┐
│ 🔐 Identity & Access Management > 👤 User Management │
├─────────────────────────────────────────────────────────────────┤
│ [🔍 Search Users] [🏷️ Filter] [📥 Import] [➕ Create User] │
├─────────────────────────────────────────────────────────────────┤
│ ☐ │ Avatar │ Username │ Full Name │ Department │ Status │
├───┼────────┼─────────────┼────────────────┼────────────┼────────┤
│ ☐ │ 👤 │ admin.sys │ System Admin │ IT │ 🟢 │
│ ☐ │ 👨⚕️ │ dr.smith │ Dr. John Smith │ Emergency │ 🟢 │
│ ☐ │ 👩⚕️ │ nurse.jane │ Jane Wilson │ Surgery │ 🟡 │
│ ☐ │ 👨💼 │ manager.bob │ Bob Johnson │ Finance │ 🔴 │
├───┴────────┴─────────────┴────────────────┴────────────┴────────┤
│ [1] [2] [3] ... [10] [Next] │
└─────────────────────────────────────────────────────────────────┘
4.2 User Detail Modal
┌─────────────────────────────────────────────────────────────────┐
│ 👤 USER DETAILS - dr.smith │
├─────────────────────────────────────────────────────────────────┤
│ Personal Information │ Account Settings │
│ ───────────────────── │ ────────────── │
│ Full Name: [Dr. John Smith ] │ Status: 🟢 Active │
│ Email: [[email protected]] │ Created: 2025-01-15 │
│ Phone: [081-234-5678 ] │ Last Login: 2025-10-09 │
│ Employee ID: [EMP001 ] │ Login Count: 1,247 │
│ │ │
│ Department & Role │ Security Settings │
│ ─────────────── │ ───────────── │
│ Department: [Emergency Department ▼] │ ☑ Multi-Factor Auth │
│ Position: [Senior Doctor ▼] │ ☑ Email Notifications │
│ Reports To: [Head of Emergency ▼] │ ☐ SMS Notifications │
│ │ Password Last Changed: │
│ Groups & Roles │ 2025-09-15 │
│ ──────────── │ │
│ 🎭 Doctor Role [Remove] │ Session Settings │
│ 🎭 Emergency Staff [Remove] │ ─────────────── │
│ 👥 Medical Group [Remove] │ Max Sessions: 3 │
│ [+ Add Role/Group] │ Session Timeout: 30min │
├─────────────────────────────────────────┼────────────────────────┤
│ [Cancel] [Save Changes] │ [Reset Password] [Delete User] │
└─────────────────────────────────────────┴────────────────────────┘
4.3 Group Management
┌─────────────────────────────────────────────────────────────────┐
│ 🔐 Identity & Access Management > 👥 Group Management │
├─────────────────────────────────────────────────────────────────┤
│ [🔍 Search Groups] [🌳 Tree View] [➕ Create Group] │
├─────────────────────────────────────────────────────────────────┤
│ Group Structure │ Group Details │
│ │ │
│ 📁 Hospital Organization │ 👥 Selected: Medical Staff │
│ ├─ 🏥 Administration │ │
│ │ ├─ 👑 Executive Team │ Description: │
│ │ └─ 💼 Management │ All medical personnel │
│ ├─ ⚕️ Medical Staff ◄ Selected │ including doctors, nurses │
│ │ ├─ 👨⚕️ Doctors │ and medical technicians │
│ │ ├─ 👩⚕️ Nurses │ │
│ │ └─ 🔬 Lab Technicians │ Members: 127 users │
│ ├─ 💰 Finance │ Roles: 3 assigned │
│ │ ├─ 📊 Accounting │ Created: 2025-01-10 │
│ │ └─ 💳 Billing │ Modified: 2025-09-20 │
│ └─ 🔧 IT Support │ │
│ ├─ 💻 System Admins │ [Edit Group] [Delete] │
│ └─ 🛠️ Technical Support │ [Manage Members] │
└─────────────────────────────────────────────────────────────────┘
4.4 Role Management
┌─────────────────────────────────────────────────────────────────┐
│ 🔐 Identity & Access Management > 🎭 Role Management │
├─────────────────────────────────────────────────────────────────┤
│ [🔍 Search Roles] [🏷️ Filter] [➕ Create Role] │
├─────────────────────────────────────────────────────────────────┤
│ Role Name │ Description │ Users │ Permissions │
├─────────────────────┼──────────────────────┼───────┼─────────────┤
│ 👑 Super Admin │ Full system access │ 2 │ ALL │
│ 👨⚕️ Doctor │ Medical access │ 45 │ 12 │
│ 👩⚕️ Nurse │ Nursing access │ 89 │ 8 │
│ 👨💼 Department Head │ Dept. management │ 12 │ 15 │
│ 📊 Report Viewer │ Read-only reports │ 23 │ 3 │
│ 💰 Finance Staff │ Financial access │ 15 │ 9 │
│ 🔧 System Admin │ System management │ 5 │ 18 │
├─────────────────────┴──────────────────────┴───────┴─────────────┤
│ [1] [2] [3] ... [5] [Next] │
└─────────────────────────────────────────────────────────────────┘
4.5 Role Detail View
┌─────────────────────────────────────────────────────────────────┐
│ 🎭 ROLE DETAILS - Doctor │
├─────────────────────────────────────────────────────────────────┤
│ Basic Information │ Assigned Users │
│ ───────────────── │ ────────────── │
│ Role Name: [Doctor ] │ 👨⚕️ Dr. John Smith │
│ Description: [Medical staff with] │ 👨⚕️ Dr. Mike Johnson │
│ [patient care responsibilities] │ 👩⚕️ Dr. Sarah Wilson │
│ │ 👨⚕️ Dr. David Brown │
│ Role Type: [🔘 Standard Role ] │ ...and 41 more users │
│ [⚪ Custom Role ] │ │
│ │ [+ Add Users] [- Remove] │
│ Parent Role: [⚕️ Medical Staff ▼] │ │
│ │ │
│ Permissions │ Inheritance │
│ ─────────── │ ─────────── │
│ ☑ Read Patient Records │ Inherited from: │
│ ☑ Create Medical Notes │ ⚕️ Medical Staff │
│ ☑ Update Patient Status │ ☑ Access Medical System │
│ ☑ View Lab Results │ ☑ Basic Patient Access │
│ ☐ Delete Patient Records │ ☑ View Department Data │
│ ☑ Order Laboratory Tests │ │
│ ☑ Prescribe Medications │ Direct Permissions: │
│ ☐ Access Financial Data │ ☑ Prescribe Medications │
│ ☐ System Administration │ ☑ Order Lab Tests │
│ ☑ Generate Medical Reports │ ☑ Medical Report Access │
├─────────────────────────────────────┼───────────────────────────┤
│ [Cancel] [Save Changes] │ [Duplicate Role] [Delete Role] │
└─────────────────────────────────────┴───────────────────────────┘
4.6 Policy Management
┌─────────────────────────────────────────────────────────────────┐
│ 🔐 Identity & Access Management > 📜 Policy Management │
├─────────────────────────────────────────────────────────────────┤
│ [🔍 Search Policies] [🏷️ Type] [➕ Create Policy] │
├─────────────────────────────────────────────────────────────────┤
│ Policy Name │ Type │ Applied To │ Status │
├────────────────────────────────┼───────────┼────────────┼────────┤
│ 🔐 Password Policy │ Security │ All Users │ 🟢 │
│ ⏰ Session Timeout Policy │ Security │ All Users │ 🟢 │
│ 📊 Medical Data Access │ Data │ Medical │ 🟢 │
│ 💰 Financial Data Restriction │ Data │ Finance │ 🟢 │
│ 🕐 Working Hours Restriction │ Time │ Staff │ 🟡 │
│ 🌐 IP Address Whitelist │ Network │ Admins │ 🟢 │
│ 📱 Mobile Device Policy │ Device │ All Users │ 🔴 │
├────────────────────────────────┴───────────┴────────────┴────────┤
│ [1] [2] [3] ... [3] [Next] │
└─────────────────────────────────────────────────────────────────┘
4.7 Create Policy Wizard
┌─────────────────────────────────────────────────────────────────┐
│ 📜 CREATE NEW POLICY - Step 1 of 3 │
├─────────────────────────────────────────────────────────────────┤
│ Policy Type Selection │
│ ───────────────────── │
│ │
│ ⚪ 🔐 Security Policy │
│ Password requirements, MFA, login restrictions │
│ │
│ 🔘 📊 Data Access Policy │
│ Control access to specific data types or departments │
│ │
│ ⚪ ⏰ Time-based Policy │
│ Restrict access based on time, dates, or schedules │
│ │
│ ⚪ 🌐 Network Policy │
│ IP restrictions, device limitations, location-based │
│ │
│ ⚪ 📱 Device Policy │
│ Mobile device management, BYOD restrictions │
│ │
│ ⚪ 🔧 Custom Policy │
│ Advanced JSON-based policy for complex requirements │
│ │
├─────────────────────────────────────────────────────────────────┤
│ [Cancel] [Next: Configure →] │
└─────────────────────────────────────────────────────────────────┘
5. Wireframe กลุ่ม System Configuration
5.1 Basic Settings
┌─────────────────────────────────────────────────────────────────┐
│ ⚙️ System Configuration > 🏥 Basic Settings │
├─────────────────────────────────────────────────────────────────┤
│ Hospital Information │ System Settings │
│ ──────────────────── │ ─────────────── │
│ Hospital Name: │ System Timezone: │
│ [โรงพยาบาลค่ายธนรัชน์ ] │ [Asia/Bangkok ▼] │
│ │ │
│ Hospital Address: │ Default Language: │
│ [123 ถนนเจริญมิตร ] │ [ไทย (Thai) ▼] │
│ [ตำบลในเมือง อำเภอเมือง ] │ │
│ [จังหวัดนครราชสีมา 30000 ] │ Date Format: │
│ │ [DD/MM/YYYY ▼] │
│ Contact Information: │ │
│ Phone: [044-123-456 ] │ Time Format: │
│ Email: [[email protected] ] │ [24 Hour ▼] │
│ Website: [www.kaithanu.com ] │ │
│ │ Currency: │
│ Hospital Logo: │ [THB (บาท) ▼] │
│ ┌─────────────┐ [Upload New] │ │
│ │ 🏥 │ [Remove] │ Number Format: │
│ │ LOGO │ │ [1,234.56 ▼] │
│ └─────────────┘ │ │
├─────────────────────────────────────┼───────────────────────────┤
│ [Cancel] [Save Changes] │
└─────────────────────────────────────────────────────────────────┘
6. Wireframe กลุ่ม Database Management
6.1 Data Access - Query Builder
┌─────────────────────────────────────────────────────────────────┐
│ 🗄️ Database Management > 📖 Data Access │
├─────────────────────────────────────────────────────────────────┤
│ Query Builder │ Query Results │
│ │ │
│ Select Tables: │ 📊 Showing 1-25 of 1,247 │
│ ☑ users │ │
│ ☑ user_sessions │ ┌─────────────────────────┐ │
│ ☐ audit_logs │ │ user_id │ username │ │
│ ☐ system_config │ ├─────────┼───────────────┤ │
│ ☐ departments │ │ 001 │ admin.sys │ │
│ │ │ 002 │ dr.smith │ │
│ Select Fields: │ │ 003 │ nurse.jane │ │
│ users: │ │ 004 │ manager.bob │ │
│ ☑ user_id │ │ 005 │ tech.mike │ │
│ ☑ username │ └─────────────────────────┘ │
│ ☑ full_name │ │
│ ☐ email │ Export Options: │
│ ☐ phone │ [📊 Excel] [📄 PDF] │
│ ☐ created_at │ [📋 CSV] [💾 JSON] │
│ │ │
│ Conditions: │ Actions: │
│ [users.status] [=] [active] │ [🔍 Execute Query] │
│ [AND] [users.department] [=] [IT] │ [💾 Save Query] │
│ [+ Add Condition] │ [📋 Load Saved Query] │
│ │ [🗑️ Clear All] │
├─────────────────────────────────────┼───────────────────────────┤
│ SQL Preview: │
│ SELECT users.user_id, users.username, users.full_name │
│ FROM users │
│ INNER JOIN user_sessions ON users.user_id = user_sessions... │
│ WHERE users.status = 'active' AND users.department = 'IT' │
└─────────────────────────────────────────────────────────────────┘
6.2 Data Export
┌─────────────────────────────────────────────────────────────────┐
│ 🗄️ Database Management > 📤 Data Export │
├─────────────────────────────────────────────────────────────────┤
│ Export Configuration │ Export Status │
│ │ │
│ Data Source: │ 📊 Current Exports │
│ 🔘 Custom Query │ │
│ ⚪ Saved Query: [Select ▼] │ ┌─────────────────────────┐ │
│ ⚪ Full Table: [Select ▼] │ │ 🟡 user_report.xlsx │ │
│ │ │ Progress: 67% │ │
│ Export Format: │ │ Size: 2.3 MB │ │
│ 🔘 Excel (.xlsx) │ ├─────────────────────────┤ │
│ ⚪ CSV (.csv) │ │ 🟢 audit_logs.csv │ │
│ ⚪ PDF Report │ │ Completed: 10:30 │ │
│ ⚪ JSON (.json) │ │ Size: 15.7 MB │ │
│ ⚪ XML (.xml) │ ├─────────────────────────┤ │
│ │ │ 🔴 backup_full.sql │ │
│ Export Options: │ │ Failed: Disk Space │ │
│ ☑ Include Headers │ │ Size: 0 MB │ │
│ ☑ Apply Filters │ └─────────────────────────┘ │
│ ☐ Compress Output │ │
│ ☐ Password Protect │ Download History: │
│ │ [📥 View All Downloads] │
│ Date Range: │ │
│ From: [01/10/2025 ] [📅] │ Schedule Export: │
│ To: [09/10/2025 ] [📅] │ [⏰ Schedule Recurring] │
│ │ │
│ File Name: │ │
│ [export_2025_10_09.xlsx ] │ [🚀 Start Export] │
├─────────────────────────────────────┼───────────────────────────┤
│ Preview (First 5 rows): │
│ ┌─────────┬──────────────┬─────────────┬──────────────────────┐ │
│ │ user_id │ username │ full_name │ last_login │ │
│ ├─────────┼──────────────┼─────────────┼──────────────────────┤ │
│ │ 001 │ admin.sys │ System Admin│ 2025-10-09 09:45:23 │ │
│ │ 002 │ dr.smith │ Dr. Smith │ 2025-10-09 08:30:15 │ │
│ └─────────┴──────────────┴─────────────┴──────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
6.3 Backup Management
┌─────────────────────────────────────────────────────────────────┐
│ 🗄️ Database Management > 💾 Backup Management │
├─────────────────────────────────────────────────────────────────┤
│ Backup Jobs │ Job Details │
│ │ │
│ 🔵 Daily Full Backup │ 💾 Selected: Daily Full │
│ ⏰ Schedule: Every day at 02:00 │ │
│ 📊 Status: ✅ Completed │ Last Run: 2025-10-09 │
│ 📁 Size: 2.3 GB │ Duration: 45 minutes │
│ ───────────────────────── │ Status: ✅ Success │
│ │ Size: 2.3 GB │
│ 🟡 Weekly Incremental │ │
│ ⏰ Schedule: Sundays at 01:00 │ Backup Path: │
│ 📊 Status: 🟡 Running (23%) │ /backup/daily/2025-10-09/ │
│ 📁 Estimated: 156 MB │ │
│ ───────────────────────── │ Retention Policy: │
│ │ Keep for 30 days │
│ 🔴 Monthly Archive │ │
│ ⏰ Schedule: 1st of month │ Verification: │
│ 📊 Status: ❌ Failed │ ✅ Backup integrity OK │
│ 📁 Size: 0 MB │ ✅ All tables included │
│ ───────────────────────── │ ✅ Indexes preserved │
│ │ │
│ [➕ Create New Job] │ Actions: │
│ [🔄 Refresh Status] │ [▶️ Run Now] │
│ [📊 View Reports] │ [⚙️ Edit Job] │
├─────────────────────────────────────┼───────────────────────────┤
│ Quick Actions │
│ [💾 Backup Now] [🔄 Restore] [🗑️ Cleanup Old] [📊 Reports] │
└─────────────────────────────────────────────────────────────────┘
6.4 Database Configuration
┌─────────────────────────────────────────────────────────────────┐
│ 🗄️ Database Management > ⚙️ Database Configuration │
├─────────────────────────────────────────────────────────────────┤
│ Connection Settings │ Performance Settings │
│ │ │
│ Database Type: │ Connection Pool: │
│ 🔘 MySQL 8.0 │ Min Connections: [5 ] │
│ ⚪ PostgreSQL 13 │ Max Connections: [100 ] │
│ ⚪ MariaDB 10.6 │ Connection Timeout: [30]s │
│ │ │
│ Connection Details: │ Query Optimization: │
│ Host: [localhost ] │ ☑ Enable Query Cache │
│ Port: [3306 ] │ ☑ Use Prepared Statements │
│ Database: [his_database ] │ ☑ Enable Query Logging │
│ Username: [his_user ] │ ☐ Enable Slow Query Log │
│ Password: [••••••••••••••• ] │ │
│ │ Backup Settings: │
│ SSL Configuration: │ Backup Location: │
│ ☑ Use SSL │ [/backup/database/ ] │
│ ☑ Verify SSL Certificate │ Retention Days: [30 ] │
│ SSL Mode: [REQUIRED ▼] │ ☑ Compress Backups │
│ │ ☑ Encrypt Backups │
│ Character Set: │ │
│ Default: [utf8mb4 ▼] │ Maintenance: │
│ Collation: [utf8mb4_unicode_ci ▼] │ ☑ Auto OPTIMIZE tables │
│ │ ☑ Auto ANALYZE tables │
│ [Test Connection] │ [🧹 Run Maintenance Now] │
├─────────────────────────────────────┼───────────────────────────┤
│ Connection Status: 🟢 Connected │ Database Size: 2.3 GB │
│ Last Test: 2025-10-09 10:30 │ Tables: 47 | Views: 12 │
└─────────────────────────────────────┴───────────────────────────┘
7. Wireframe กลุ่ม Report Management
7.1 Report Templates
┌─────────────────────────────────────────────────────────────────┐
│ 📊 Report Management > 📝 Report Templates │
├─────────────────────────────────────────────────────────────────┤
│ [🔍 Search Templates] [🏷️ Category] [➕ Create Template] │
├─────────────────────────────────────────────────────────────────┤
│ Template Name │ Category │ Last Modified │ Usage │
├────────────────────────────┼───────────┼───────────────┼───────┤
│ 👥 User Activity Report │ Users │ 2025-10-05 │ 127 │
│ 💰 Financial Summary │ Finance │ 2025-10-01 │ 45 │
│ 🏥 Patient Statistics │ Medical │ 2025-09-28 │ 89 │
│ 🔐 Security Audit │ Security │ 2025-09-25 │ 23 │
│ 📊 System Performance │ System │ 2025-09-20 │ 67 │
│ 📋 Daily Operations │ Ops │ 2025-09-15 │ 156 │
├────────────────────────────┴───────────┴───────────────┴───────┤
│ [1] [2] [3] ... [8] [Next] │
└─────────────────────────────────────────────────────────────────┘
7.2 Report Creation Wizard
┌─────────────────────────────────────────────────────────────────┐
│ 📊 CREATE NEW REPORT - Step 2 of 4 │
├─────────────────────────────────────────────────────────────────┤
│ Data Source Selection │ Preview │
│ │ │
│ Available Tables: │ Selected Fields: │
│ ☑ users │ ┌─────────────────────────┐ │
│ ☑ user_sessions │ │ 👤 users.full_name │ │
│ ☐ departments │ │ 📧 users.email │ │
│ ☐ audit_logs │ │ 🏢 departments.name │ │
│ ☐ system_config │ │ 🕐 user_sessions.login │ │
│ │ └─────────────────────────┘ │
│ Available Fields: │ │
│ users: │ Filters: │
│ ☑ user_id │ Status = 'Active' │
│ ☑ username │ Department = 'All' │
│ ☑ full_name │ Date Range = 'Last 30d' │
│ ☑ email │ │
│ ☐ phone │ Grouping: │
│ ☐ created_at │ Group by Department │
│ │ Sort by Login Count │
│ user_sessions: │ │
│ ☐ session_id │ Chart Type: │
│ ☑ login_time │ 🔘 Table │
│ ☐ logout_time │ ⚪ Bar Chart │
│ ☐ ip_address │ ⚪ Pie Chart │
├─────────────────────────────────────┼───────────────────────────┤
│ [◀ Back] [Next: Layout ▶] [Cancel] │
└─────────────────────────────────────────────────────────────────┘
7.3 Report Scheduling
┌─────────────────────────────────────────────────────────────────┐
│ 📊 Report Management > ⏰ Report Scheduling │
├─────────────────────────────────────────────────────────────────┤
│ Scheduled Reports │ Schedule Details │
│ │ │
│ 📊 Daily User Activity │ 📊 Selected: Daily Users │
│ ⏰ Every day at 08:00 │ │
│ 📧 To: [email protected] │ Template: User Activity │
│ 📊 Status: ✅ Active │ Format: PDF + Excel │
│ ───────────────────────── │ Recipients: 3 people │
│ │ │
│ 💰 Weekly Finance Summary │ Schedule Pattern: │
│ ⏰ Mondays at 09:00 │ ⏰ Daily at 08:00 │
│ 📧 To: [email protected] │ 📅 Started: 2025-01-01 │
│ 📊 Status: 🟡 Paused │ 📈 Runs: 278/278 success │
│ ───────────────────────── │ │
│ │ Last Run Results: │
│ 🔐 Monthly Security Audit │ ✅ Generated: 09:00 │
│ ⏰ 1st of month at 10:00 │ ✅ Sent: 08:02 │
│ 📧 To: [email protected] │ 📁 Size: 2.3 MB │
│ 📊 Status: ✅ Active │ 👥 Recipients: 3/3 sent │
│ ───────────────────────── │ │
│ │ Actions: │
│ [➕ Create Schedule] │ [▶️ Run Now] │
│ [📊 View Report History] │ [⏸️ Pause Schedule] │
│ [⚙️ Manage Recipients] │ [✏️ Edit Schedule] │
└─────────────────────────────────────────────────────────────────┘
8. Wireframe กลุ่ม Communication System
8.1 News & Announcements
┌─────────────────────────────────────────────────────────────────┐
│ 📢 Communication > 📰 News & Announcements │
├─────────────────────────────────────────────────────────────────┤
│ [🔍 Search News] [🏷️ Category] [➕ Create Announcement] │
├─────────────────────────────────────────────────────────────────┤
│ Title │ Category │ Date │ Status │
├───────────────────────────────┼──────────┼────────────┼────────┤
│ 🚨 System Maintenance Notice │ System │ 2025-10-08 │ 🟢 │
│ 📋 New Patient Form Available │ Updates │ 2025-10-05 │ 🟢 │
│ 🎉 Hospital Anniversary Event │ Events │ 2025-09-28 │ 🟡 │
│ ⚠️ Password Policy Update │ Security │ 2025-09-25 │ 🟢 │
│ 📊 Monthly Report Published │ Reports │ 2025-09-20 │ 🔴 │
├───────────────────────────────┴──────────┴────────────┴────────┤
│ [1] [2] [3] ... [5] [Next] │
└─────────────────────────────────────────────────────────────────┘
8.2 Create Announcement
┌─────────────────────────────────────────────────────────────────┐
│ 📰 CREATE NEW ANNOUNCEMENT │
├─────────────────────────────────────────────────────────────────┤
│ Basic Information │ Publishing Options │
│ │ │
│ Title: │ Publication Date: │
│ [System Maintenance Notice ] │ 🔘 Publish Now │
│ │ ⚪ Schedule: [Date] [Time]│
│ Category: │ │
│ [System Updates ▼] │ Expiry Date: │
│ │ [2025-10-15 ] [📅] │
│ Priority: │ │
│ ⚪ 🔵 Low 🔘 🟡 Medium ⚪ 🔴 High │ Visibility: │
│ │ ☑ Show on Dashboard │
│ Target Audience: │ ☑ Email Notification │
│ ☑ All Users │ ☐ SMS Notification │
│ ☐ Specific Departments: │ ☑ Push Notification │
│ ☐ Medical Staff │ │
│ ☐ Administrative │ Status: │
│ ☐ IT Support │ 🔘 🟢 Active │
│ ☐ Specific Roles: │ ⚪ 🟡 Draft │
│ ☐ Doctors │ ⚪ 🔴 Archived │
│ ☐ Nurses │ │
├─────────────────────────────────────┼───────────────────────────┤
│ Content: │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ 🅱️ 𝑰 𝑼 📎 🖼️ 📊 🔗 │ │
│ ├─────────────────────────────────────────────────────────────┤ │
│ │ Dear All, │ │
│ │ │ │
│ │ We will be performing scheduled system maintenance on │ │
│ │ October 12, 2025 from 02:00 to 06:00. │ │
│ │ │ │
│ │ During this time, the following services will be affected: │ │
│ │ • Patient Registration System │ │
│ │ • Laboratory Results │ │
│ │ • Pharmacy System │ │
│ │ │ │
│ │ Emergency systems will remain operational. │ │
│ └─────────────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────────┤
│ [Cancel] [Save as Draft] [Preview] [Publish] │
└─────────────────────────────────────────────────────────────────┘
8.3 Notification Management
┌─────────────────────────────────────────────────────────────────┐
│ 📢 Communication > 🔔 Notification Management │
├─────────────────────────────────────────────────────────────────┤
│ Notification Types │ Template Editor │
│ │ │
│ 🔐 Security Alerts │ 🔔 Selected: Login Alert │
│ ├─ 🚨 Failed Login Attempts │ │
│ ├─ 🔓 Suspicious Activity │ Template Name: │
│ └─ 🔒 Account Locked │ [Failed Login Alert ] │
│ │ │
│ 📊 System Notifications │ Message Content: │
│ ├─ 💾 Backup Completed │ ┌─────────────────────────┐ │
│ ├─ ⚠️ System Errors │ │ ⚠️ Security Alert │ │
│ └─ 🔄 Maintenance Mode │ │ │ │
│ │ │ Multiple failed login │ │
│ 🏥 Medical Alerts │ │ attempts detected for │ │
│ ├─ 🚨 Critical Lab Results │ │ user: {username} │ │
│ ├─ 💊 Medication Reminders │ │ │ │
│ └─ 📅 Appointment Reminders │ │ IP Address: {ip} │ │
│ │ │ Time: {timestamp} │ │
│ 📋 Administrative │ │ │ │
│ ├─ 📊 Report Ready │ │ Please verify this │ │
│ ├─ ✅ Task Completed │ │ activity or contact IT. │ │
│ └─ 📝 Form Submissions │ └─────────────────────────┘ │
│ │ │
│ [➕ Add Type] [⚙️ Settings] │ Delivery Methods: │
│ │ ☑ Email │
│ │ ☑ In-App │
│ │ ☐ SMS │
│ │ ☑ Push │
│ │ │
│ │ [Save Template] │
└─────────────────────────────────────────────────────────────────┘
9. Wireframe กลุ่ม System Monitoring
9.1 Online Users
┌─────────────────────────────────────────────────────────────────┐
│ 👁️ System Monitoring > 👥 Online Users │
├─────────────────────────────────────────────────────────────────┤
│ [🔍 Search Users] [🏷️ Filter] [🔄 Refresh] [📊 Export] │
├─────────────────────────────────────────────────────────────────┤
│ User │ Status │ Login Time │ IP Address │ Action │
├─────────────────────┼─────────┼────────────┼─────────────┼────────┤
│ 👤 admin.sys │ 🟢 Active│ 08:30 │ 192.168.1.10│ [🚪] │
│ 👨⚕️ dr.smith │ 🟢 Active│ 09:15 │ 192.168.1.25│ [🚪] │
│ 👩⚕️ nurse.jane │ 🟡 Idle │ 09:45 │ 192.168.1.30│ [🚪] │
│ 👨💼 manager.bob │ 🟢 Active│ 10:00 │ 192.168.1.15│ [🚪] │
│ 👨🔬 tech.mike │ 🟢 Active│ 10:15 │ 192.168.1.20│ [🚪] │
├─────────────────────┴─────────┴────────────┴─────────────┴────────┤
│ Total Online: 23 users [1] [2] [3] ... [5] [Next]│
└─────────────────────────────────────────────────────────────────┘
9.2 Activity Logs
┌─────────────────────────────────────────────────────────────────┐
│ 👁️ System Monitoring > 📋 Activity Logs │
├─────────────────────────────────────────────────────────────────┤
│ [🔍 Search] [📅 Date Range] [🏷️ Log Type] [👤 User] [📤 Export]│
├─────────────────────────────────────────────────────────────────┤
│ Time │ User │ Action │ IP Address │ Status│
├─────────┼─────────────┼──────────────────────┼─────────────┼───────┤
│ 10:30 │ admin.sys │ 👤 Created new user │ 192.168.1.10│ ✅ │
│ 10:25 │ dr.smith │ 📋 Viewed patient │ 192.168.1.25│ ✅ │
│ 10:20 │ system │ 💾 Backup completed │ localhost │ ✅ │
│ 10:15 │ nurse.jane │ 🔐 Login successful │ 192.168.1.30│ ✅ │
│ 10:10 │ unknown │ 🚨 Failed login │ 10.0.0.15 │ ❌ │
│ 10:05 │ manager.bob │ 📊 Generated report │ 192.168.1.15│ ✅ │
├─────────┴─────────────┴──────────────────────┴─────────────┴───────┤
│ Showing 1-50 of 1,247 entries [1] [2] [3] ... [25] [Next] │
└─────────────────────────────────────────────────────────────────┘
9.3 Security Monitoring
┌─────────────────────────────────────────────────────────────────┐
│ 👁️ System Monitoring > 🔒 Security Monitoring │
├─────────────────────────────────────────────────────────────────┤
│ Security Overview │ Recent Security Events │
│ │ │
│ 🔐 Login Security: │ 🕐 10:10 - Failed Login │
│ ✅ Success Rate: 98.7% │ 👤 User: unknown │
│ ⚠️ Failed Attempts: 16 (24h) │ 🌐 IP: 10.0.0.15 │
│ 🚨 Blocked IPs: 3 │ 🚨 Action: IP Blocked │
│ │ ───────────────────── │
│ 🛡️ Account Security: │ │
│ 🔒 Locked Accounts: 2 │ 🕐 09:45 - Suspicious │
│ 🔐 MFA Enabled: 89% │ 👤 User: temp.user │
│ ⏰ Session Timeouts: 5 (1h) │ 🌐 Multiple locations │
│ │ 🚨 Action: Account Review │
│ 🌐 Network Security: │ ───────────────────── │
│ ✅ SSL Connections: 100% │ │
│ 🔍 Intrusion Attempts: 0 │ 🕐 09:30 - Policy Update │
│ 🚫 Firewall Blocks: 23 │ 👤 User: admin.security │
│ │ ⚙️ Password policy │
│ 📊 Compliance Status: │ ✅ Action: Applied │
│ ✅ HIPAA: Compliant │ │
│ ✅ Data Protection: OK │ [View All Events →] │
│ ⚠️ Audit Trail: 3 warnings │ │
├─────────────────────────────────────┼───────────────────────────┤
│ Security Actions: │
│ [🔒 Lock Account] [🚫 Block IP] [📊 Generate Report] [⚙️ Settings]│
└─────────────────────────────────────────────────────────────────┘
10. Responsive Design Guidelines
10.1 Breakpoint Strategy
/* Mobile First Approach */
/* Mobile: 320px - 767px */
@media (max-width: 767px) {
.sidebar { width: 100%; height: auto; }
.main-content { margin-left: 0; }
.dashboard-cards { grid-template-columns: 1fr; }
}
/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
.sidebar { width: 200px; }
.dashboard-cards { grid-template-columns: repeat(2, 1fr); }
}
/* Desktop: 1024px+ */
@media (min-width: 1024px) {
.sidebar { width: 250px; }
.dashboard-cards { grid-template-columns: repeat(3, 1fr); }
}
10.2 Mobile Navigation
Mobile View (< 768px):
┌─────────────────────┐
│ ☰ [Logo] 🔔 👤 │ ← Collapsed Header
├─────────────────────┤
│ │
│ MAIN CONTENT │
│ │
│ │
└─────────────────────┘
When Menu Opened:
┌─────────────────────┐
│ ✕ [Logo] 🔔 👤 │
├─────────────────────┤
│ 🏠 Dashboard │ ← Overlay Menu
│ 🔐 Users & Access │
│ ⚙️ System Config │
│ 🗄️ Database │
│ 📊 Reports │
│ 📢 Communication │
│ 👁️ Monitoring │
└─────────────────────┘
สรุป Wireframe ระบบผู้ดูแลระบบ
เอกสาร Wireframe นี้ครอบคลุม:
✅ 6 กลุ่มฟังก์ชันหลัก ตาม Sitemap:
1. 🔐 Identity & Access Management
2. ⚙️ System Configuration
3. 🗄️ Database Management
4. 📊 Report Management
5. 📢 Communication System
6. 👁️ System Monitoring
✅ สอดคล้องกับ TOR 8 ข้อ 100% ✅ Responsive Design สำหรับทุกอุปกรณ์ ✅ User Experience ที่เหมาะสมกับผู้ดูแลระบบ ✅ ความปลอดภัยและการควบคุมสิทธิ์
พร้อมใช้เป็นแนวทางการพัฒนา Frontend ระบบผู้ดูแลระบบให้สอดคล้องกับเอกสารทุกฉบับ