presceque plus pt

.env

@@ -0,0 +1,6 @@
+DB_HOST=172.10.1.4
+DB_USER=prox
+DB_PASSWORD=2104
+DB_NAME=2104
+PORT=3006
+VITE_API_URL=http://localhost:3006/api

package.json

@@ -4,13 +4,20 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "concurrently \"vite\" \"node server/index.js\"",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "server": "node server/index.js"
   },
   "dependencies": {
+    "axios": "^1.6.7",
+    "concurrently": "^8.2.2",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.1",
+    "express": "^4.18.2",
     "lucide-react": "^0.344.0",
+    "mysql2": "^3.9.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1"

server/index.js

@@ -0,0 +1,85 @@
+import express from 'express';
+import cors from 'cors';
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const app = express();
+app.use(cors());
+app.use(express.json());
+
+const pool = mysql.createPool({
+  host: process.env.DB_HOST,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASSWORD,
+  database: process.env.DB_NAME,
+  waitForConnections: true,
+  connectionLimit: 10,
+  queueLimit: 0
+});
+
+// Test database connection
+pool.getConnection()
+  .then(connection => {
+    console.log('Database connected successfully');
+    connection.release();
+  })
+  .catch(error => {
+    console.error('Error connecting to the database:', error);
+    process.exit(1);
+  });
+
+// Get all servers
+app.get('/api/servers', async (req, res) => {
+  try {
+    const [rows] = await pool.query('SELECT * FROM servers ORDER BY created_at DESC');
+    const servers = rows.map(row => ({
+      ...row,
+      cpus: Array(row.cpu_count).fill({
+        model: row.cpu_model,
+        cores: row.cpu_cores
+      })
+    }));
+    res.json(servers);
+  } catch (error) {
+    console.error('Error fetching servers:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
+// Add new server
+app.post('/api/servers', async (req, res) => {
+  try {
+    const { name, model, cpus, ram_gb, proxmox_url } = req.body;
+    const id = crypto.randomUUID();
+    
+    await pool.query(
+      'INSERT INTO servers (id, name, model, cpu_model, cpu_cores, cpu_count, ram_gb, proxmox_url) VALUES (?, ?, ?, ?, ?, ?, ?, ?)',
+      [id, name, model, cpus[0].model, cpus[0].cores, cpus.length, ram_gb, proxmox_url]
+    );
+    
+    const [newServer] = await pool.query('SELECT * FROM servers WHERE id = ?', [id]);
+    res.status(201).json(newServer[0]);
+  } catch (error) {
+    console.error('Error adding server:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
+// Delete server
+app.delete('/api/servers/:id', async (req, res) => {
+  try {
+    const { id } = req.params;
+    await pool.query('DELETE FROM servers WHERE id = ?', [id]);
+    res.status(204).send();
+  } catch (error) {
+    console.error('Error deleting server:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
+const PORT = process.env.PORT || 3000;
+app.listen(PORT, () => {
+  console.log(`Server running on port ${PORT}`);
+});

src/App.tsx

@@ -9,31 +9,31 @@ import type { Server } from './types';
 function App() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [servers, setServers] = useState<Server[]>([]);
+  const [loading, setLoading] = useState(true);
 
-  const fetchServers = () => {
-    const serverData = storage.getServers();
-    setServers(serverData);
+  const fetchServers = async () => {
+    try {
+      setLoading(true);
+      const serverData = await storage.getServers();
+      setServers(serverData);
+    } catch (error) {
+      console.error('Error fetching servers:', error);
+    } finally {
+      setLoading(false);
+    }
   };
 
-  const handleDeleteServer = (id: string) => {
-    storage.deleteServer(id);
-    fetchServers();
+  const handleDeleteServer = async (id: string) => {
+    try {
+      await storage.deleteServer(id);
+      await fetchServers();
+    } catch (error) {
+      console.error('Error deleting server:', error);
+    }
   };
 
-  // Listen for storage changes from other tabs/windows
   useEffect(() => {
-    const handleStorageChange = (event: StorageEvent) => {
-      if (event.key === 'proxmox_servers') {
-        fetchServers();
-      }
-    };
-
-    window.addEventListener('storage', handleStorageChange);
-    fetchServers(); // Initial fetch
-
-    return () => {
-      window.removeEventListener('storage', handleStorageChange);
-    };
+    fetchServers();
   }, []);
 
   return (
@@ -58,7 +58,14 @@ function App() {
           </button>
         </div>
 
-        {servers.length === 0 ? (
+        {loading ? (
+          <div className="text-center py-16">
+            <div className="animate-spin text-purple-400 mb-4">
+              <ServerIcon size={48} />
+            </div>
+            <p className="text-gray-300">Loading servers...</p>
+          </div>
+        ) : servers.length === 0 ? (
           <div className="text-center py-16">
             <ServerIcon size={48} className="text-purple-400 mx-auto mb-4 opacity-50" />
             <h2 className="text-2xl font-semibold text-gray-300 mb-2">No servers yet</h2>

src/utils/storage.ts

@@ -1,49 +1,35 @@
+import axios from 'axios';
 import { Server } from '../types';
 
-const STORAGE_KEY = 'proxmox_servers';
+const API_URL = import.meta.env.VITE_API_URL;
 
 export const storage = {
-  getServers: (): Server[] => {
+  getServers: async (): Promise<Server[]> => {
     try {
-      const data = localStorage.getItem(STORAGE_KEY);
-      return data ? JSON.parse(data) : [];
+      const response = await axios.get(`${API_URL}/servers`);
+      return response.data;
     } catch (error) {
-      console.error('Error reading servers:', error);
+      console.error('Error fetching servers:', error);
       return [];
     }
   },
 
-  saveServers: (servers: Server[]): void => {
+  addServer: async (server: Omit<Server, 'id' | 'created_at' | 'updated_at'>): Promise<Server> => {
     try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(servers));
-      // Dispatch storage event to notify other tabs/windows
-      window.dispatchEvent(new StorageEvent('storage', {
-        key: STORAGE_KEY,
-        newValue: JSON.stringify(servers),
-        url: window.location.href
-      }));
+      const response = await axios.post(`${API_URL}/servers`, server);
+      return response.data;
     } catch (error) {
-      console.error('Error saving servers:', error);
+      console.error('Error adding server:', error);
+      throw error;
     }
   },
 
-  addServer: (server: Omit<Server, 'id' | 'created_at' | 'updated_at'>): Server => {
-    const servers = storage.getServers();
-    const newServer: Server = {
-      ...server,
-      id: crypto.randomUUID(),
-      created_at: new Date().toISOString(),
-      updated_at: new Date().toISOString()
-    };
-    
-    servers.push(newServer);
-    storage.saveServers(servers);
-    return newServer;
-  },
-
-  deleteServer: (id: string): void => {
-    const servers = storage.getServers();
-    const filteredServers = servers.filter(server => server.id !== id);
-    storage.saveServers(filteredServers);
+  deleteServer: async (id: string): Promise<void> => {
+    try {
+      await axios.delete(`${API_URL}/servers/${id}`);
+    } catch (error) {
+      console.error('Error deleting server:', error);
+      throw error;
+    }
   }
 };

supabase/migrations/20250323010544_autumn_butterfly.sql

@@ -0,0 +1,47 @@
+-- Create the database if it doesn't exist
+CREATE DATABASE IF NOT EXISTS proxmox_dashboard;
+USE proxmox_dashboard;
+
+-- Create servers table
+CREATE TABLE IF NOT EXISTS servers (
+    id VARCHAR(36) PRIMARY KEY,
+    name VARCHAR(255) NOT NULL,
+    model VARCHAR(255) NOT NULL,
+    cpu_model VARCHAR(255) NOT NULL,
+    cpu_cores INT NOT NULL,
+    cpu_count INT NOT NULL,
+    ram_gb INT NOT NULL,
+    proxmox_url VARCHAR(255) NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    INDEX idx_created_at (created_at),
+    INDEX idx_name (name)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- Create a user for the application (if not exists)
+CREATE USER IF NOT EXISTS 'proxmox_user'@'localhost' IDENTIFIED BY 'proxmox_password';
+
+-- Grant privileges to the application user
+GRANT ALL PRIVILEGES ON proxmox_dashboard.* TO 'proxmox_user'@'localhost';
+FLUSH PRIVILEGES;
+
+-- Add some sample data (optional)
+INSERT INTO servers (
+    id,
+    name,
+    model,
+    cpu_model,
+    cpu_cores,
+    cpu_count,
+    ram_gb,
+    proxmox_url
+) VALUES (
+    UUID(),
+    'Test Server 1',
+    'Dell R720',
+    'Intel Xeon E5-2680 v2',
+    10,
+    2,
+    128,
+    'https://proxmox1.example.com:8006'
+);

supabase/migrations/20250323010819_warm_marsh.sql

@@ -0,0 +1,15 @@
+-- Create servers table if it doesn't exist
+CREATE TABLE IF NOT EXISTS servers (
+    id VARCHAR(36) PRIMARY KEY,
+    name VARCHAR(255) NOT NULL,
+    model VARCHAR(255) NOT NULL,
+    cpu_model VARCHAR(255) NOT NULL,
+    cpu_cores INT NOT NULL,
+    cpu_count INT NOT NULL,
+    ram_gb INT NOT NULL,
+    proxmox_url VARCHAR(255) NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    INDEX idx_created_at (created_at),
+    INDEX idx_name (name)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;