Thêm phần 5. Monitoring và 6. System

www/style.css

@@ -3503,6 +3503,62 @@ body.auth-readonly-integrations .integrationToolbar .btn.primary { pointer-event
   gap: 8px;
 }
 
+.settingsMirGridWrap {
+  width: 100%;
+}
+
+.settingsMirGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px;
+}
+
+.settingsMirTile {
+  display: grid;
+  grid-template-rows: 54px auto auto;
+  place-items: center;
+  gap: 6px;
+  padding: 16px 14px 14px;
+  border-radius: 6px;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  cursor: pointer;
+  text-align: center;
+  min-height: 138px;
+}
+
+.settingsMirTile:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 1px 10px rgba(2, 6, 23, 0.08);
+}
+
+.settingsMirTile:disabled,
+.settingsMirTile.is-disabled {
+  opacity: 0.55;
+  cursor: default;
+  box-shadow: none;
+}
+
+.settingsMirTileIcon {
+  width: 44px;
+  height: 44px;
+  color: var(--mir-accent, #22c55e);
+  display: grid;
+  place-items: center;
+}
+
+.settingsMirTileTitle {
+  font-size: 14px;
+  font-weight: 700;
+  color: #111827;
+}
+
+.settingsMirTileSub {
+  font-size: 12px;
+  color: #6b7280;
+  line-height: 1.2;
+}
+
 .mapsMirHelpBtn {
   display: inline-flex;
   align-items: center;
@@ -3940,6 +3996,139 @@ body.auth-readonly-io-modules .ioModulesMirRow .ioModuleDeleteBtn { pointer-even
 body.auth-readonly-paths .pathsMirRow .mapsMirIconBtn--danger { pointer-events: none; opacity: 0.55; }
 .mapEditorPathPreview { filter: drop-shadow(0 0 2px rgba(37, 99, 235, 0.45)); }
 
+.mapsMirTable--missionLog thead th.monMirThIcon,
+.mapsMirTable--actionLog thead th.monMirThIcon { width: 52px; }
+.monMirIcon { color: var(--mir-accent, #2563eb); display: block; }
+.monMirTdIcon { width: 52px; text-align: center; }
+.monMirMessageCell { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.monMirState {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.monMirState--ok { background: #e8f5e9; color: #2e7d32; }
+.monMirState--running { background: #e3f2fd; color: #1565c0; }
+.monMirState--warn { background: #fff8e1; color: #f57f17; }
+.monMirState--error { background: #ffebee; color: #c62828; }
+.monMirState--user { background: #f3e5f5; color: #6a1b9a; }
+.monMirRow--current { background: rgba(37, 99, 235, 0.06); }
+.monitoringActionLogBack { margin-bottom: 8px; }
+
+.monMirStateDot {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+.monMirStateDot--ok { background: #2e7d32; }
+.monMirStateDot--warn { background: #f57f17; }
+.monMirStateDot--error { background: #c62828; }
+.monMirStateDot--info { background: #1565c0; }
+.mapsMirTable--systemLog thead th.monMirThState { width: 52px; }
+
+.monAnalyticsToolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 20px;
+  align-items: flex-end;
+  margin-bottom: 16px;
+  padding: 12px 16px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+}
+.monAnalyticsDates, .monAnalyticsOptions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.monAnalyticsPresets { display: flex; flex-wrap: wrap; gap: 6px; }
+.monAnalyticsLabel { font-size: 12px; font-weight: 600; color: #475569; }
+.monAnalyticsInput, .monAnalyticsSelect {
+  padding: 6px 10px;
+  border: 1px solid #cbd5e1;
+  border-radius: 4px;
+  font-size: 13px;
+}
+.monAnalyticsSummary { margin-bottom: 8px; }
+.monAnalyticsTotal { font-size: 14px; font-weight: 600; color: #1e293b; }
+.monAnalyticsChartWrap {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  padding: 12px;
+  min-height: 200px;
+}
+.monAnalyticsChart { width: 100%; height: auto; display: block; }
+.monAnalyticsBar { fill: #2563eb; }
+.monAnalyticsAxis { stroke: #94a3b8; stroke-width: 1; }
+.monAnalyticsLabel { font-size: 10px; fill: #64748b; }
+
+.monHwList { display: flex; flex-direction: column; gap: 8px; }
+.monHwGroup {
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  background: #fff;
+  overflow: hidden;
+}
+.monHwGroupHeader {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 12px 16px;
+  border: none;
+  background: #f8fafc;
+  cursor: pointer;
+  text-align: left;
+  font-size: 14px;
+}
+.monHwGroupArrow { color: #64748b; width: 14px; }
+.monHwGroupName { font-weight: 600; flex: 1; }
+.monHwStatusDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.monHwStatusDot.monHwStatus--ok, .monHwGroupBadge.monHwStatus--ok { background: #2e7d32; color: #fff; }
+.monHwStatusDot.monHwStatus--warn, .monHwGroupBadge.monHwStatus--warn { background: #f57f17; color: #fff; }
+.monHwStatusDot.monHwStatus--error, .monHwGroupBadge.monHwStatus--error { background: #c62828; color: #fff; }
+.monHwGroupBadge {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+.monHwGroupBody { padding: 8px 16px 12px 40px; border-top: 1px solid #e2e8f0; }
+.monHwComponent {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 0;
+  font-size: 13px;
+}
+.monHwComponentName { font-weight: 500; min-width: 160px; }
+.monHwComponentMsg { color: #64748b; }
+
+.monSafetyGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
+  max-width: 900px;
+}
+.monSafetyCard {
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 20px;
+  background: #fff;
+  text-align: center;
+}
+.monSafetyCard--ok { border-color: #2e7d32; background: #f1f8f4; }
+.monSafetyCard--bad { border-color: #c62828; background: #fff5f5; }
+.monSafetyCardTitle { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
+.monSafetyStatus { font-size: 18px; font-weight: 700; }
+.monSafetyCard--ok .monSafetyStatus { color: #2e7d32; }
+.monSafetyCard--bad .monSafetyStatus { color: #c62828; }
+
 .transMirIcon {
   color: var(--mir-green, #5cb85c);
   display: block;