Upload files to "/"

Initial upload

index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Backup Dashboard</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <div class="dashboard">
+    <h1>Client Backup Dashboard</h1>
+    <div id="backup-container"></div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,66 @@
+const container = document.getElementById('backup-container');
+
+fetch('http://localhost:3000/api/backups')
+  .then((response) => response.json())
+  .then((data) => {
+    let currentCompany = '';
+    let currentProduct = '';
+
+    data.forEach((item) => {
+      // Group by company
+      if (item.company_name !== currentCompany) {
+        currentCompany = item.company_name;
+        const companySection = document.createElement('div');
+        companySection.className = 'company-section';
+        const header = document.createElement('h2');
+        header.className = 'company-header';
+        header.textContent = currentCompany;
+        companySection.appendChild(header);
+        container.appendChild(companySection);
+      }
+
+      // Group by backup product
+      if (item.backup_product !== currentProduct) {
+        currentProduct = item.backup_product;
+        const productSection = document.createElement('div');
+        productSection.className = 'backup-product';
+        const productHeader = document.createElement('h3');
+        productHeader.textContent = currentProduct;
+        productSection.appendChild(productHeader);
+        container.appendChild(productSection);
+      }
+
+      const jobItem = document.createElement('div');
+      jobItem.className = 'job-item';
+      jobItem.innerHTML = `
+        <span class="job-name">${item.job_name}</span>
+        <span class="last-backup">Last Backup: ${new Date(item.last_backup_time).toLocaleString()}</span>
+        <span class="status-pill status-${item.status}" data-detail="${item.error_details}">${item.status}</span>
+      `;
+
+      // Click to show error details
+      const statusPill = jobItem.querySelector('.status-pill');
+      statusPill.addEventListener('click', () => {
+        const detailModal = document.createElement('div');
+        detailModal.className = 'detail-modal';
+        detailModal.innerHTML = `
+          <span class="modal-close">&times;</span>
+          <h4>Error Details</h4>
+          <p>${item.error_details}</p>
+        `;
+        document.body.appendChild(detailModal);
+
+        const closeModal = detailModal.querySelector('.modal-close');
+        closeModal.addEventListener('click', () => {
+          document.body.removeChild(detailModal);
+        });
+      });
+
+      const productSection = container.lastElementChild;
+      productSection.appendChild(jobItem);
+    });
+  })
+  .catch((error) => {
+    console.error('Error fetching data:', error);
+    container.innerHTML = '<p>Error loading backup data. Check backend logs.</p>';
+  });

server.js

@@ -0,0 +1,37 @@
+const express = require('express');
+const { Pool } = require('pg');
+const app = express();
+const port = 3000;
+
+const pool = new Pool({
+  user: 'your_user',
+  host: 'localhost',
+  database: 'backup_dashboard',
+  password: 'your_password',
+  port: 5432,
+});
+
+app.get('/api/backups', async (req, res) => {
+  try {
+    const result = await pool.query(`
+      SELECT 
+        company_name,
+        backup_product,
+        job_name,
+        last_backup_time,
+        status,
+        error_details,
+        next_backup_time
+      FROM backup_jobs
+      ORDER BY company_name, backup_product;
+    `);
+    res.json(result.rows);
+  } catch (err) {
+    console.error(err);
+    res.status(500).send('Server error');
+  }
+});
+
+app.listen(port, () => {
+  console.log(`Backend running on http://localhost:${port}`);
+});

styles.css

@@ -0,0 +1,95 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 20px;
+  background: #f4f6f8;
+}
+
+.dashboard {
+  max-width: 1200px;
+  margin: auto;
+}
+
+.company-section {
+  margin-bottom: 40px;
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.company-header {
+  font-size: 24px;
+  margin-bottom: 15px;
+}
+
+.backup-product {
+  margin-bottom: 20px;
+  padding: 10px;
+  background: #e8f0fe;
+  border-radius: 5px;
+}
+
+.job-list {
+  margin-left: 20px;
+}
+
+.job-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px;
+  margin-bottom: 5px;
+  background: #fff;
+  border-radius: 5px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.job-name {
+  font-weight: bold;
+}
+
+.status-pill {
+  padding: 4px 8px;
+  border-radius: 20px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.status-success {
+  background: #d4edda;
+  color: #155724;
+}
+
+.status-warning {
+  background: #fff3cd;
+  color: #856404;
+}
+
+.status-error {
+  background: #f8d7da;
+  color: #721c24;
+}
+
+.detail-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  display: none;
+}
+
+.detail-modal.show {
+  display: block;
+}
+
+.modal-close {
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  font-size: 20px;
+  cursor: pointer;
+}