Merge pull request #5070 from OneCommunityGlobal/sudheesh-daily-equipment-log-feedback

Sudheesh Enhance Validation, Feedback & Action Controls on Daily Equipment

Author: one-community

src/actions/bmdashboard/equipmentActions.js

@@ -88,7 +88,6 @@ export const updateMultipleEquipmentLogs = (projectId, bulkArr) => dispatch => {
     )
     .then(res => {
       dispatch(setEquipments(res.data));
-      toast.success('Equipment logs updated successfully!');
       return res.data;
     })
     .catch(err => {

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

@@ -10,6 +10,7 @@ import {
 } from '~/actions/bmdashboard/equipmentActions';
 import { getHeaderData } from '~/actions/authActions';
 import { getUserProfile } from '~/actions/userProfile';
+import { toast } from 'react-toastify';
 
 import styles from './EDailyActivityLog.module.css';
 
@@ -44,7 +45,7 @@ const buildRows = list =>
       .filter(l => l.type === 'Check Out')
       .reduce((s, l) => s + (l.quantity || 1), 0);
 
-    const usingQty = Math.max(checkInQty - checkOutQty, 0);
+    const usingQty = Math.max(checkOutQty - checkInQty, 0);
     const availableQty = Math.max(total - usingQty, 0);
 
     const allNumbers = buildToolNumbers(e.itemType?.name, total);
@@ -139,9 +140,15 @@ function EDailyActivityLog(props) {
 
   const [rows, setRows] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
-  const [toastMessage, setToastMessage] = useState(null);
   const [showConfirm, setShowConfirm] = useState(false);
 
+  // Deriving validation states
+  const isMissingProject = !selectedProject;
+  const isInvalidDate = !date || isNaN(Date.parse(date));
+  const hasNoEquipments = isMissingProject || rows.length === 0;
+  const noEquipmentSelected = rows.length === 0 || rows.every(r => r.selectedNumbers.length === 0);
+  const isSubmitDisabled = isMissingProject || isInvalidDate || noEquipmentSelected;
+
   useEffect(() => {
     dispatch(fetchBMProjects());
   }, [dispatch]);
@@ -159,8 +166,8 @@ function EDailyActivityLog(props) {
   const onToolSelect = (rowIdx, selected) => {
     setRows(prev => {
       const row = prev[rowIdx];
-      const valid = logType === 'check-in' ? row.availableNumbers : row.inUseNumbers;
-      const limit = logType === 'check-in' ? row.availableQty : row.usingQty;
+      const valid = logType === 'check-in' ? row.inUseNumbers : row.availableNumbers;
+      const limit = logType === 'check-in' ? row.usingQty : row.availableQty;
 
       const clean = selected
         .map(o => o.value)
@@ -175,8 +182,8 @@ function EDailyActivityLog(props) {
     setLogType(newType);
     setRows(prev =>
       prev.map(r => {
-        const valid = newType === 'check-in' ? r.availableNumbers : r.inUseNumbers;
-        const limit = newType === 'check-in' ? r.availableQty : r.usingQty;
+        const valid = newType === 'check-in' ? r.inUseNumbers : r.availableNumbers;
+        const limit = newType === 'check-in' ? r.usingQty : r.availableQty;
         return {
           ...r,
           selectedNumbers: r.selectedNumbers.filter(n => valid.includes(n)).slice(0, limit),
@@ -193,6 +200,7 @@ function EDailyActivityLog(props) {
   };
 
   const handleSubmit = () => {
+    if (isSubmitDisabled) return;
     setShowConfirm(true);
   };
   const confirmSubmit = () => {
@@ -210,7 +218,14 @@ function EDailyActivityLog(props) {
 
     dispatch(updateMultipleEquipmentLogs(selectedProject.value, payload));
     setShowConfirm(false);
-    setToastMessage('Entry recorded.');
+    toast.success(
+      logType === 'check-in'
+        ? 'Equipment checked in successfully'
+        : 'Equipment checked out successfully',
+    );
+
+    // Clear selections immediately so UI responds while backend async request finishes
+    setRows(prev => prev.map(r => ({ ...r, selectedNumbers: [] })));
   };
 
   const projectSelectStyles = getSelectStyles(darkMode, false);
@@ -298,8 +313,13 @@ function EDailyActivityLog(props) {
             }
           >
             <span>Are you sure? This will update equipment availability.</span>
-            <div className="d-flex gap-2">
-              <Button size="sm" color="secondary" onClick={() => setShowConfirm(false)}>
+            <div className="d-flex">
+              <Button
+                size="sm"
+                color="secondary"
+                className="mr-2"
+                onClick={() => setShowConfirm(false)}
+              >
                 Cancel
               </Button>
               <Button size="sm" color="danger" onClick={confirmSubmit}>
@@ -336,6 +356,9 @@ function EDailyActivityLog(props) {
                   : {}
               }
             />
+            {isInvalidDate && (
+              <small className="text-danger mt-1 d-block">Please select a valid date.</small>
+            )}
             {darkMode && (
               <small className="text-muted mt-1 d-block">
                 Note: Calendar appearance depends on your browser and OS.
@@ -360,6 +383,9 @@ function EDailyActivityLog(props) {
               isClearable
               styles={projectSelectStyles}
             />
+            {isMissingProject && (
+              <small className="text-danger mt-1 d-block">Project selection is required.</small>
+            )}
           </div>
 
           <div className="col-md-4">
@@ -374,19 +400,32 @@ function EDailyActivityLog(props) {
             <div className="d-flex" role="group" aria-labelledby="log-type-label">
               <Button
                 color={logType === 'check-in' ? 'primary' : 'secondary'}
-                onClick={() => flipLogType('check-in')}
+                onClick={() => !hasNoEquipments && flipLogType('check-in')}
                 className={styles.checkInBtn}
+                disabled={hasNoEquipments}
+                style={hasNoEquipments ? { opacity: 0.65, cursor: 'not-allowed' } : {}}
               >
                 Check In
               </Button>
               <Button
                 color={logType === 'check-out' ? 'primary' : 'secondary'}
-                onClick={() => flipLogType('check-out')}
+                onClick={() => !hasNoEquipments && flipLogType('check-out')}
                 className={styles.checkOutBtn}
+                disabled={hasNoEquipments}
+                style={hasNoEquipments ? { opacity: 0.65, cursor: 'not-allowed' } : {}}
               >
                 Check Out
               </Button>
             </div>
+            <small
+              className={`mt-2 d-block ${styles.helperText} ${
+                darkMode ? 'text-light' : 'text-muted'
+              }`}
+            >
+              <strong>Check In:</strong> Report equipment as returned and available.
+              <br />
+              <strong>Check Out:</strong> Assign equipment for current use.
+            </small>
           </div>
         </div>
 
@@ -445,8 +484,8 @@ function EDailyActivityLog(props) {
             {selectedProject &&
               rows.length > 0 &&
               rows.map((r, idx) => {
-                const validList = logType === 'check-in' ? r.availableNumbers : r.inUseNumbers;
-                const limit = logType === 'check-in' ? r.availableQty : r.usingQty;
+                const validList = logType === 'check-in' ? r.inUseNumbers : r.availableNumbers;
+                const limit = logType === 'check-in' ? r.usingQty : r.availableQty;
 
                 return (
                   <tr
@@ -479,7 +518,12 @@ function EDailyActivityLog(props) {
           <Button color="secondary" onClick={handleCancel}>
             Cancel
           </Button>
-          <Button color="primary" onClick={handleSubmit}>
+          <Button
+            color="primary"
+            onClick={handleSubmit}
+            disabled={isSubmitDisabled}
+            style={isSubmitDisabled ? { cursor: 'not-allowed', opacity: 0.65 } : {}}
+          >
             Submit
           </Button>
         </div>

src/components/BMDashboard/Equipment/DailyActivityLog/EDailyActivityLog.module.css

@@ -42,3 +42,8 @@
 .checkOutBtn {
   width: 50%;
 }
+
+.helperText {
+  line-height: 1.4;
+  font-size: 0.85rem;
+}