Dashboard

Edit "laser-robot-ui-config"

Slug

URL-friendly identifier (a-z, 0-9, -, _).

Description

HTML or React Content

import React, { useState, useEffect } from 'react';

const SyncServerDashboard = () => {
  // Simulated robots
  const [robots, setRobots] = useState({
    robot1: {
      id: 'Robot 1',
      state: 'Idle', // Idle, Running, Paused, Charging, Failed
      battery: 88,
      currentTask: { person: 'John Smith', room: 'Room 101', status: 'Completed' },
      taskLog: [],
      isOnline: true,
    },
    robot2: {
      id: 'Robot 2',
      state: 'Charging',
      battery: 22,
      currentTask: { person: 'Alice Brown', room: 'Room 305', status: 'In Progress' },
      taskLog: [
        { timestamp: '10:25:03', message: 'Retrieved tray from magazine 🧾✅', robot: 'Robot 2' },
        { timestamp: '10:27:12', message: 'Delivered to Room 305 🚶‍♂️➡️', robot: 'Robot 2' },
      ],
      isOnline: true,
    }
  });

const [availableRooms] = useState([
    'Room 101', 'Room 102', 'Room 103', 'Room 201', 'Room 202', 'Room 203',
    'Room 301', 'Room 302', 'Room 305', 'Room 401', 'Room 402', 'Room 403'
  ]);

const [availablePeople] = useState([
    'John Smith', 'Jane Doe', 'Bob Wilson', 'Alice Brown', 'Charlie Davis',
    'Diana Prince', 'Frank Miller', 'Grace Lee', 'Henry Ford', 'Iris West'
  ]);

const [pendingTasks, setPendingTasks] = useState([
    { id: 1, person: 'Jane Doe', room: 'Room 102', type: 'Delivery', priority: 'High' },
    { id: 2, person: 'Bob Wilson', room: 'Room 203', type: 'Retrieval', priority: 'Normal' },
    { id: 3, person: 'Diana Prince', room: 'Room 402', type: 'Delivery', priority: 'Normal' },
  ]);

const [systemLog, setSystemLog] = useState([
    { timestamp: '10:30:15', message: 'System initialized 🟢', type: 'info' },
    { timestamp: '10:31:02', message: 'Robot 1 synced job logs 📤', type: 'success' },
    { timestamp: '10:31:30', message: 'Robot 2 battery low → assigned charging 🟡', type: 'warning' }
  ]);

const [newTaskForm, setNewTaskForm] = useState({
    showForm: false,
    room: '',
    person: '',
    type: 'Delivery',
    assignTo: 'auto' // auto, robot1, robot2
  });

// Helper: Add to system log
  const addToLog = (message, type = 'info') => {
    const timestamp = new Date().toLocaleTimeString();
    setSystemLog(prev => [{ timestamp, message, type }, ...prev]);
  };

// Simulate sync from robots
  useEffect(() => {
    const interval = setInterval(() => {
      Object.keys(robots).forEach(robotId => {
        const robot = robots[robotId];
        if (robot.state === 'Running' || robot.state === 'Charging') {
          // Simulate periodic heartbeats
          addToLog(`${robot.id} heartbeat: ${robot.state}, ${robot.battery}% 🔄`, 'info');
        }
      });
    }, 5000);

return () => clearInterval(interval);
  }, [robots]);

// Sync task completion from robots
  const syncTaskUpdate = (robotId, update) => {
    const timestamp = new Date().toLocaleTimeString();

setRobots(prev => ({
      ...prev,
      [robotId]: {
        ...prev[robotId],
        ...update,
        taskLog: [
          ...prev[robotId].taskLog,
          { timestamp, message: update.message, robot: robotId }
        ]
      }
    }));

addToLog(update.message, 'success');
  };

// Assign task to specific robot
  const assignTask = (taskId, targetRobotId) => {
    const task = pendingTasks.find(t => t.id === taskId);
    if (!task) return;

const availableRobotId = targetRobotId === 'auto'
      ? Object.keys(robots).find(id => robots[id].state === 'Idle')
      : robots[targetRobotId].state !== 'Failed' ? targetRobotId : null;

if (!availableRobotId) {
      addToLog('⚠️ No available robot to assign task!', 'warning');
      return;
    }

const robot = robots[availableRobotId];
    setRobots(prev => ({
      ...prev,
      [availableRobotId]: {
        ...prev[availableRobotId],
        state: 'Running',
        currentTask: {
          person: task.person,
          room: task.room,
          status: 'In Progress'
        },
        taskLog: [
          ...prev[availableRobotId].taskLog,
          { timestamp: new Date().toLocaleTimeString(), message: `New job assigned: Deliver to ${task.person} in ${task.room} 🚀`, robot: availableRobotId }
        ]
      }
    }));

// Simulate task completion after delay
    setTimeout(() => {
      syncTaskUpdate(availableRobotId, {
        state: 'Idle',
        battery: Math.max(robot.battery - 15, 0),
        currentTask: { ...task, status: 'Completed' },
        message: `${availableRobotId}: Task completed – ${task.person} in ${task.room} ✅`
      });
    }, 4000);

// Remove from pending
    setPendingTasks(prev => prev.filter(t => t.id !== taskId));
    addToLog(`Task assigned to ${availableRobotId}: ${task.person} → ${task.room}`, 'info');
  };

// Add new task via form
  const addNewTask = () => {
    if (!newTaskForm.room || !newTaskForm.person) return;

const newTask = {
      id: Math.max(...pendingTasks.map(t => t.id), 0) + 1,
      room: newTaskForm.room,
      person: newTaskForm.person,
      type: newTaskForm.type,
      priority: newTaskForm.priority || 'Normal'
    };

setPendingTasks(prev => [...prev, newTask]);
    addToLog(`New task created: ${newTask.person} in ${newTask.room} 🆕`, 'info');

// Auto-assign if possible
    if (newTaskForm.assignTo !== 'manual') {
      setTimeout(() => assignTask(newTask.id, newTaskForm.assignTo), 500);
    }

setNewTaskForm({ showForm: false, room: '', person: '', type: 'Delivery', assignTo: 'auto' });
  };

// Status color helpers
  const getRobotStatusColor = (state) => {
    switch (state) {
      case 'Idle': return 'text-gray-600 bg-gray-100';
      case 'Running': return 'text-green-600 bg-green-100';
      case 'Charging': return 'text-blue-600 bg-blue-100';
      case 'Paused': return 'text-yellow-600 bg-yellow-100';
      case 'Failed': return 'text-red-600 bg-red-100';
      default: return 'text-gray-600 bg-gray-100';
    }
  };

const getTaskPriorityColor = (priority) => {
    switch (priority) {
      case 'High': return 'text-red-600 bg-red-100';
      case 'Normal': return 'text-yellow-600 bg-yellow-100';
      case 'Low': return 'text-green-600 bg-green-100';
      default: return 'text-gray-600 bg-gray-100';
    }
  };

const getTypeColor = (type) => {
    return type === 'Delivery'
      ? 'text-green-600 bg-green-100'
      : 'text-purple-600 bg-purple-100';
  };

return (
    <div className="max-w-7xl mx-auto p-6 space-y-6 bg-gray-50 min-h-screen">
      <h1 className="text-3xl font-bold text-gray-900 mb-2">LASER2 Central Synchronization Server 🖥️🔒</h1>
      <p className="text-gray-600 mb-8">Coordinating 2 autonomous robots | Real-time fleet management & audit logging</p>

{/* Robot Status Overview */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {Object.values(robots).map(robot => (
          <div key={robot.id} className="bg-white rounded-lg shadow-lg p-6">
            <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
              🤖 {robot.id} {robot.isOnline ? '🟢' : '🔴'}
            </h2>

<div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
                <span className={`inline-flex px-3 py-1 rounded-full text-sm font-medium ${getRobotStatusColor(robot.state)}`}>
                  {robot.state}
                </span>
              </div>

<div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Battery</label>
                <div className="flex items-center gap-2">
                  {robot.battery < 30 ? '⚡💔' : '🔋'} <span>{robot.battery}%</span>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-2 mt-1">
                  <div
                    className={`h-2 rounded-full transition-all duration-300 ${
                      robot.battery < 30 ? 'bg-red-500' : 'bg-green-500'
                    }`}
                    style={{ width: `${Math.max(robot.battery, 5)}%` }}
                  ></div>
                </div>
              </div>

<div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Current Task</label>
                {robot.currentTask ? (
                  <div>
                    <p className="font-medium">{robot.currentTask.person}</p>
                    <p className="text-sm text-gray-600">{robot.currentTask.room}</p>
                    <span className={`inline-flex mt-1 px-2 py-1 rounded text-xs ${getRobotStatusColor(robot.currentTask.status)}`}>
                      {robot.currentTask.status}
                    </span>
                  </div>
                ) : (
                  <p className="text-gray-500 text-sm">No current task</p>
                )}
              </div>

<div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Recent Activity</label>
                <div className="bg-gray-50 rounded p-2 max-h-24 overflow-y-auto text-xs">
                  {robot.taskLog.length > 0 ? (
                    robot.taskLog.slice(-2).map((log, i) => (
                      <p key={i} className="text-gray-700">{log.message}</p>
                    ))
                  ) : (
                    <p className="text-gray-400">No recent logs</p>
                  )}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

{/* Fleet Tasks & Controls */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Pending Tasks Queue */}
        <div className="bg-white rounded-lg shadow-lg p-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-semibold">Pending Tasks 📋</h2>
            <button
              onClick={() => setNewTaskForm(prev => ({ ...prev, showForm: true }))}
              className="flex items-center gap-1 px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm"
            >
              ➕ Add Task
            </button>
          </div>

{/* New Task Form */}
          {newTaskForm.showForm && (
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
              <h3 className="font-medium mb-3">Create New Task ✏️</h3>
              <div className="grid grid-cols-2 gap-3 mb-3">
                <div>
                  <label className="block text-xs font-medium mb-1">Room</label>
                  <select
                    value={newTaskForm.room}
                    onChange={e => setNewTaskForm(prev => ({ ...prev, room: e.target.value }))}
                    className="w-full px-2 py-1 text-sm border rounded"
                  >
                    <option value="">Select...</option>
                    {availableRooms.map(room => (
                      <option key={room} value={room}>{room}</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-medium mb-1">Person</label>
                  <select
                    value={newTaskForm.person}
                    onChange={e => setNewTaskForm(prev => ({ ...prev, person: e.target.value }))}
                    className="w-full px-2 py-1 text-sm border rounded"
                  >
                    <option value="">Select...</option>
                    {availablePeople.map(person => (
                      <option key={person} value={person}>{person}</option>
                    ))}
                  </select>
                </div>
              </div>
              <div className="grid grid-cols-3 gap-3 mb-3">
                <div>
                  <label className="block text-xs font-medium mb-1">Type</label>
                  <select
                    value={newTaskForm.type}
                    onChange={e => setNewTaskForm(prev => ({ ...prev, type: e.target.value }))}
                    className="w-full px-2 py-1 text-sm border rounded"
                  >
                    <option value="Delivery">Delivery</option>
                    <option value="Retrieval">Retrieval</option>
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-medium mb-1">Assign To</label>
                  <select
                    value={newTaskForm.assignTo}
                    onChange={e => setNewTaskForm(prev => ({ ...prev, assignTo: e.target.value }))}
                    className="w-full px-2 py-1 text-sm border rounded"
                  >
                    <option value="auto">Auto</option>
                    <option value="robot1">Robot 1</option>
                    <option value="robot2">Robot 2</option>
                    <option value="manual">Manual Later</option>
                  </select>
                </div>
              </div>
              <div className="flex gap-2">
                <button
                  onClick={addNewTask}
                  disabled={!newTaskForm.room || !newTaskForm.person}
                  className="flex-1 px-3 py-1 bg-green-600 text-white rounded text-sm disabled:bg-gray-300"
                >
                  ✅ Add
                </button>
                <button
                  onClick={() => setNewTaskForm({ showForm: false, room: '', person: '', type: 'Delivery', assignTo: 'auto' })}
                  className="px-3 py-1 border border-gray-300 rounded text-sm"
                >
                  🚫 Cancel
                </button>
              </div>
            </div>
          )}

<div className="space-y-2 max-h-64 overflow-y-auto">
            {pendingTasks.length > 0 ? (
              pendingTasks.map(task => (
                <div key={task.id} className="border border-gray-200 rounded-lg p-3 flex items-center justify-between hover:bg-gray-50">
                  <div>
                    <p className="font-medium">{task.person}</p>
                    <p className="text-sm text-gray-600">{task.room}</p>
                    <div className="flex gap-2 mt-1">
                      <span className={`px-2 py-0.5 rounded text-xs ${getTypeColor(task.type)}`}>{task.type}</span>
                      <span className={`px-2 py-0.5 rounded text-xs ${getTaskPriorityColor(task.priority)}`}>{task.priority}</span>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <button
                      onClick={() => assignTask(task.id, 'auto')}
                      className="px-3 py-1 bg-blue-600 text-white rounded text-sm hover:bg-blue-700"
                    >
                      ➡️ Assign
                    </button>
                  </div>
                </div>
              ))
            ) : (
              <p className="text-gray-500 text-center py-4">🟢 All tasks dispatched</p>
            )}
          </div>
        </div>

{/* System Event Log */}
        <div className="bg-white rounded-lg shadow-lg p-6">
          <h2 className="text-xl font-semibold mb-4">System Event Log 🗃️</h2>
          <div className="bg-gray-50 rounded-lg p-4 max-h-80 overflow-y-auto font-mono text-sm">
            <div className="space-y-1">
              {systemLog.map((entry, index) => (
                <div key={index} className="flex gap-2 text-xs">
                  <span className="text-gray-500 w-16">{entry.timestamp}</span>
                  <span
                    className={`${
                      entry.type === 'error' ? 'text-red-600' :
                      entry.type === 'warning' ? 'text-yellow-600' :
                      entry.type === 'success' ? 'text-green-600' :
                      'text-gray-700'
                    }`}
                  >
                    {entry.message}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

{/* Footer Info */}
      <div className="text-center text-sm text-gray-500 mt-8">
        <p>
          Secure sync active • End-to-end audit trail • Wi-Fi 6E network • Data encrypted at rest and in transit 🔐
        </p>
      </div>
    </div>
  );
};

export default SyncServerDashboard;

Paste raw HTML or kick off with a React component (first line referencing React) and we'll scaffold the render call automatically.

Cancel