Sriamsh - Add Previous Logs preview panel to Daily Equipment Log

src/components/BMDashboard/Equipment/DailyActivityLog/EDailyActivityLog.jsx

@@ -20,6 +20,21 @@ const getToday = () => {
   return `${year}-${month}-${day}`;
 };
 
+const toYMD = d => (d ? new Date(d).toISOString().slice(0, 10) : '');
+
+const timeFromObjectId = id => {
+  if (!id || typeof id !== 'string' || id.length < 8) return '—';
+  const ts = parseInt(id.slice(0, 8), 16);
+  if (Number.isNaN(ts)) return '—';
+  const dt = new Date(ts * 1000);
+  return dt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+};
+
+const objectIdToMs = id => {
+  if (!id || typeof id !== 'string' || id.length < 8) return 0;
+  return parseInt(id.slice(0, 8), 16) * 1000;
+};
+
 const buildToolNumbers = (name = 'EQ', qty = 0) => {
   const prefix = (
     name
@@ -77,6 +92,8 @@ function EDailyActivityLog(props) {
   const [logType, setLogType] = useState('check-in'); // 'check-in' | 'check-out'
 
   const [rows, setRows] = useState([]);
+  const [showPreviousLogs, setShowPreviousLogs] = useState(false);
+  const [previousLogs, setPreviousLogs] = useState([]);
 
   useEffect(() => {
     dispatch(fetchBMProjects());
@@ -89,6 +106,50 @@ function EDailyActivityLog(props) {
     }
   }, [selectedProject, dispatch]);
 
+  useEffect(() => {
+    if (!selectedProject || !date) {
+      setPreviousLogs([]);
+      return;
+    }
+
+    const selectedDate = new Date(`${date}T00:00:00.000Z`);
+
+    const previousLogEntries = (equipments || []).flatMap(e => {
+      const working = (e.purchaseRecord || []).reduce((sum, rec) => sum + (rec?.quantity || 0), 0);
+
+      const allLogsSorted = (e.logRecord || [])
+        .slice()
+        .sort((a, b) => objectIdToMs(a._id) - objectIdToMs(b._id));
+
+      let using = 0;
+      const rows = [];
+
+      for (const l of allLogsSorted) {
+        if (l.type === 'Check In') using += 1;
+        if (l.type === 'Check Out') using = Math.max(using - 1, 0);
+
+        const available = Math.max(working - using, 0);
+
+        if (toYMD(l.date) === date) {
+          rows.push({
+            equipmentName: e.itemType?.name || 'Unknown',
+            working,
+            available,
+            using,
+            type: l.type,
+            time: timeFromObjectId(l._id),
+          });
+        }
+      }
+
+      return rows;
+    });
+
+    previousLogEntries.sort((a, b) => (a.time || '').localeCompare(b.time || ''));
+
+    setPreviousLogs(previousLogEntries);
+  }, [selectedProject, date, equipments]);
+
   /* build rows whenever equipments slice updates */
   const derived = useMemo(() => buildRows(equipments), [equipments]);
   useEffect(() => setRows(derived), [derived]);
@@ -533,6 +594,49 @@ function EDailyActivityLog(props) {
               })}
           </tbody>
         </Table>
+        {/* Previous Logs Panel */}
+        {selectedProject && (
+          <div className={`mt-4 ${darkMode ? 'text-light' : 'text-dark'}`}>
+            <Button color="link" className="fw-bold" onClick={() => setShowPreviousLogs(p => !p)}>
+              {showPreviousLogs ? '▼' : '▶'} Previous Logs (for this date & project)
+            </Button>
+
+            {showPreviousLogs && (
+              <Table bordered size="sm" className={darkMode ? 'table-dark' : 'table-light'}>
+                <thead>
+                  <tr>
+                    <th>Equipment</th>
+                    <th>Working</th>
+                    <th>Available</th>
+                    <th>Using</th>
+                    <th>Type</th>
+                    <th>Time</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {previousLogs.length === 0 && (
+                    <tr>
+                      <td colSpan="6" className="text-center">
+                        No logs found for this date.
+                      </td>
+                    </tr>
+                  )}
+
+                  {previousLogs.map((log, i) => (
+                    <tr key={i}>
+                      <td>{log.equipmentName}</td>
+                      <td>{log.working}</td>
+                      <td>{log.available}</td>
+                      <td>{log.using}</td>
+                      <td>{log.type}</td>
+                      <td>{log.time}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </Table>
+            )}
+          </div>
+        )}
 
         {/* actions */}
         <div className="d-flex justify-content-end gap-2">