بناءً على البيانات المتوفرة في الملف المرفق لمشروع الإشراف في المدينة المنورة (سعود كونسلت)، قمت بتحليل أداء الصحة والسلامة والبيئة (HSE) من خلال مؤشرات التنفيذ ونسب الإنجاز لكل مقاول، حيث يعكس "اكتمال العمل" جانباً حيوياً من الامتثال التشغيلي. لقد قمت بتصميم **لوحة بيانات تفاعلية (Interactive Dashboard)** احترافية باستخدام لغة HTML و CSS و JavaScript (Chart.js) لتظهر إحصائيات المقاولين وحالات أوامر العمل. ### كود لوحة البيانات (HSE Dashboard) يمكنك نسخ الكود التالي وحفظه بصيغة .html وتشغيله في أي متصفح: ```html <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <title>لوحة مؤشرات الأداء HSE - مشروع المدينة المنورة</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f7f6; margin: 0; padding: 20px; } .container { max-width: 1200px; margin: auto; } .header { background: #2c3e50; color: white; padding: 20px; border-radius: 10px; text-align: center; margin-bottom: 20px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; } .stat-card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; } .stat-card h3 { margin: 0; color: #7f8c8d; font-size: 0.9em; } .stat-card p { margin: 10px 0 0; font-size: 1.8em; font-weight: bold; color: #2c3e50; } .charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .chart-container { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .footer { text-align: center; margin-top: 30px; color: #95a5a6; font-size: 0.8em; } </style> </head> <body> <div class="container"> <div class="header"> <h1>لوحة مؤشرات أداء المقاولين (HSE & Operations)</h1> <p>مشروع الإشراف على مقاولى أعمال العقد الموحد - سعود كونسلت</p> </div> <div class="stats-grid"> <div class="stat-card">