What is Plesk

Plesk is a hosting panel with simple and secure web server, website and web apps management tools. It is specially designed to help web professionals manage web, DNS, mail and other services through a comprehensive and user-friendly GUI. Plesk is about intelligently managing servers, apps, websites and hosting businesses, on both traditional and cloud hosting.

Try Plesk Now!

Do you host WordPress sites outside of Plesk? Try WP Guardian - it provides complete visibility into the health of your WordPress websites in one place and keeps them protected with flexible updates management

//--------------------------------------------------------------- import React, { useState } from 'react'; import { Monitor, Printer, ScanLine, Projector, Plus, Edit2, Trash2, Search, Download, Bell, LogOut, BarChart3, Calendar, AlertCircle, CheckCircle, Clock, Wrench, QrCode, FileText, Eye, X, Check, CheckSquare, Square } from 'lucide-react'; const App = () => { const [currentPage, setCurrentPage] = useState('dashboard'); const [userRole, setUserRole] = useState('Admin'); const [searchTerm, setSearchTerm] = useState(''); const [filterType, setFilterType] = useState('All'); const [filterStatus, setFilterStatus] = useState('All'); const [selectedAsset, setSelectedAsset] = useState(null); const [showAddAsset, setShowAddAsset] = useState(false); const [showAddMaintenance, setShowAddMaintenance] = useState(false); const [showChecklistModal, setShowChecklistModal] = useState(false); const [selectedChecklist, setSelectedChecklist] = useState(null); const [assets, setAssets] = useState([ { id: 'SPS-NB01', assetNumber: '0839-60-7440-001-0028/1', type: 'Computer', brand: 'Dell', model: 'Latitude 7490', serial: 'DL789456', location: 'สำนักส่งเสริมและพัฒนาสุขภาพจิต', status: 'Active', purchaseDate: '2016-12-20', warranty: '2026-12-20', responsible: 'ไพฑูรย์, เอกศักดิ์', price: 25000 }, { id: 'SPS-COM11', assetNumber: '0839-60-7440-001-0029/1', type: 'Computer', brand: 'HP', model: 'ProDesk 600', serial: 'HP123789', location: 'ฝ่ายบัญชี/ห้อง 205', status: 'Under_Maintenance', purchaseDate: '2023-03-20', warranty: '2026-03-20', responsible: 'นางสาวสมหญิง รักงาน', price: 23000 }, { id: 'PRT-001', assetNumber: '0839-60-7440-002-0015/1', type: 'Printer', brand: 'Canon', model: 'LBP6030w', serial: 'CN456123', location: 'ฝ่ายบริหาร/ห้อง 301', status: 'Active', purchaseDate: '2023-02-10', warranty: '2025-02-10', responsible: 'นายสมชาย ใจดี', price: 8500 }, ]); const maintenanceChecklist = { daily: [ { id: 'D1', task: 'ดูแลเม้าท์และคีย์บอร์ดทุกครั้งที่เปิด-ปิดเครื่อง', frequency: 'ทุกวัน' }, { id: 'D2', task: 'ปิดหน้าจอคอมพิวเตอร์เมื่อไม่ใช้งานนาน 15 นาที', frequency: 'ทุกวัน' }, { id: 'D3', task: 'ปิดเครื่องคอมพิวเตอร์ทุกครั้งหลังเลิกใช้งาน', frequency: 'ทุกวัน' }, ], weekly: [ { id: 'W1', task: 'ตรวจสอบไวรัสคอมพิวเตอร์ (Update ไวรัส + Full Scan)', frequency: 'สัปดาห์ละ 1 ครั้ง' }, { id: 'W2', task: 'เช็คหน้าจอและอุปกรณ์ต่อพ่วง', frequency: 'สัปดาห์ละ 1 ครั้ง' }, ], monthly: [ { id: 'M1', task: 'การทำความสะอาดคอมพิวเตอร์ ภายนอก เช็คทำความสะอาด ปัดฝุ่น', frequency: 'เดือนละ 1 ครั้ง' }, { id: 'M2', task: 'บำรุงรักษาเครื่องพิมพ์ (Printer) ภายนอก เช็คทำความสะอาด ปัดฝุ่น', frequency: 'เดือนละ 1 ครั้ง' }, { id: 'M3', task: 'บำรุงรักษา Hard Disk: ลบไฟล์ขยะ Temp Files, Disk Cleanup, Defragment', frequency: 'เดือนละ 1 ครั้ง' }, ], quarterly: [ { id: 'Q1', task: 'ภายใน เปาฝุ่นภายในตัวเครื่อง', frequency: 'ทุก 3 เดือน' }, { id: 'Q2', task: 'เช็คสายไฟและต่อพ่วงทั้งหมด', frequency: 'ทุก 3 เดือน' }, ] }; const [dailyLogs, setDailyLogs] = useState([ { id: 1, assetId: 'SPS-NB01', date: '2024-11-11', time1: true, time2: true, time3: false, operator: 'ไพฑูรย์' }, { id: 2, assetId: 'SPS-NB01', date: '2024-11-10', time1: true, time2: true, time3: true, operator: 'เอกศักดิ์' }, ]); const [maintenance, setMaintenance] = useState([ { id: 1, assetId: 'SPS-COM11', date: '2024-11-10', type: 'Corrective', problem: 'คอมพิวเตอร์เปิดไม่ติด', solution: 'เปลี่ยน Power Supply', cost: 1500, technician: 'นายซ่อม มือดี', duration: 2.5, status: 'In_Progress', checklistDone: ['D1', 'D2', 'M1'] }, { id: 2, assetId: 'PRT-001', date: '2024-11-08', type: 'Preventive', problem: 'ตรวจเช็คตามกำหนด', solution: 'ทำความสะอาดและตรวจสอบ เปลี่ยนหมึก', cost: 850, technician: 'นายซ่อม มือดี', duration: 1, status: 'Completed', checklistDone: ['M2'] }, ]); const stats = { computer: assets.filter(a => a.type === 'Computer').length, printer: assets.filter(a => a.type === 'Printer').length, scanner: assets.filter(a => a.type === 'Scanner').length, projector: assets.filter(a => a.type === 'Projector').length, active: assets.filter(a => a.status === 'Active').length, broken: assets.filter(a => a.status === 'Broken').length, maintenance: assets.filter(a => a.status === 'Under_Maintenance').length, pendingWork: maintenance.filter(m => m.status === 'Pending').length, inProgressWork: maintenance.filter(m => m.status === 'In_Progress').length, completedWork: maintenance.filter(m => m.status === 'Completed').length, monthlyCost: maintenance.reduce((sum, m) => sum + m.cost, 0), todayLogs: dailyLogs.filter(l => l.date === '2024-11-11').length, }; const getIcon = (type) => { switch(type) { case 'Computer': return ; case 'Printer': return ; case 'Scanner': return ; case 'Projector': return ; default: return ; } }; const getStatusColor = (status) => { const colors = { 'Active': 'bg-green-100 text-green-800', 'Broken': 'bg-red-100 text-red-800', 'Under_Maintenance': 'bg-yellow-100 text-yellow-800', 'Disposed': 'bg-gray-100 text-gray-800', 'Pending': 'bg-orange-100 text-orange-800', 'In_Progress': 'bg-blue-100 text-blue-800', 'Completed': 'bg-green-100 text-green-800' }; return colors[status] || 'bg-gray-100 text-gray-800'; }; const getStatusText = (status) => { const statusMap = { 'Active': 'ใช้งานปกติ', 'Broken': 'ชำรุด', 'Under_Maintenance': 'อยู่ระหว่างซ่อม', 'Disposed': 'จำหน่าย', 'Pending': 'รอดำเนินการ', 'In_Progress': 'กำลังดำเนินการ', 'Completed': 'เสร็จสิ้น' }; return statusMap[status] || status; }; const getTypeText = (type) => { const typeMap = { 'Computer': 'คอมพิวเตอร์', 'Printer': 'ปริ้นเตอร์', 'Scanner': 'สแกนเนอร์', 'Projector': 'โปรเจคเตอร์' }; return typeMap[type] || type; }; const filteredAssets = assets.filter(asset => { const matchSearch = asset.id.toLowerCase().includes(searchTerm.toLowerCase()) || asset.assetNumber.includes(searchTerm) || asset.brand.toLowerCase().includes(searchTerm.toLowerCase()) || asset.model.toLowerCase().includes(searchTerm.toLowerCase()) || asset.serial.toLowerCase().includes(searchTerm.toLowerCase()); const matchType = filterType === 'All' || asset.type === filterType; const matchStatus = filterStatus === 'All' || asset.status === filterStatus; return matchSearch && matchType && matchStatus; }); const Dashboard = () => (

คอมพิวเตอร์

{stats.computer}

ปริ้นเตอร์

{stats.printer}

สแกนเนอร์

{stats.scanner}

โปรเจคเตอร์

{stats.projector}

สถานะอุปกรณ์

ใช้งานปกติ {stats.active}
ซ่อมบำรุง {stats.maintenance}
ชำรุด {stats.broken}

งานบำรุงรักษา

รอดำเนินการ {stats.pendingWork}
กำลังดำเนินการ {stats.inProgressWork}
เสร็จสิ้น {stats.completedWork}

ค่าใช้จ่ายเดือนนี้

฿{stats.monthlyCost.toLocaleString()}

บาท

บันทึกวันนี้

{stats.todayLogs}

รายการ

การแจ้งเตือน

อุปกรณ์ใกล้หมดประกัน

มี 2 รายการที่จะหมดประกันภายใน 90 วัน

ถึงกำหนดบำรุงรักษา

มี 5 รายการที่ต้องบำรุงรักษาสัปดาห์นี้

ยังไม่ได้บันทึกวันนี้

มี 3 เครื่องที่ยังไม่ได้บันทึกการตรวจสอบประจำวัน

ตารางบำรุงรักษา Checklist

{setSelectedChecklist('daily'); setShowChecklistModal(true);}}>
✓ รายวัน (Daily) {maintenanceChecklist.daily.length} รายการ
{setSelectedChecklist('weekly'); setShowChecklistModal(true);}}>
✓ รายสัปดาห์ (Weekly) {maintenanceChecklist.weekly.length} รายการ
{setSelectedChecklist('monthly'); setShowChecklistModal(true);}}>
✓ รายเดือน (Monthly) {maintenanceChecklist.monthly.length} รายการ
{setSelectedChecklist('quarterly'); setShowChecklistModal(true);}}>
✓ รายไตรมาส (Quarterly) {maintenanceChecklist.quarterly.length} รายการ

งานบำรุงรักษาล่าสุด

{maintenance.slice(0, 5).map(m => ( ) //----------------------------------------------------------------------------
รหัสอุปกรณ์ วันที่ ประเภท รายการที่ทำ ช่าง สถานะ
{m.assetId} {m.date} {m.type === 'Preventive' ? 'เชิงป้องกัน' : 'แก้ไข'} {m.checklistDone ? m.checklistDone.length + ' รายการ' : '-'} {m.technician} {getStatusText(m.status)}