@visns-studio/visns-components 5.0.10 → 5.0.11

package/package.json

@@ -75,7 +75,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.0.10",
+    "version": "5.0.11",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/generic/GenericDetail.jsx

@@ -1321,7 +1321,10 @@ function GenericDetail({
                                 return null;
                             }
                         case 'scheduling':
-                            return renderSchedulingTable(activeTabConfig);
+                            return renderSchedulingTable(
+                                activeTabConfig,
+                                routeParams[urlParam]
+                            );
                         default:
                             return null;
                     }
@@ -1330,99 +1333,92 @@ function GenericDetail({
         }
     };
 
-    const renderSchedulingTable = (config) => {
+    const renderSchedulingTable = (config, dataId) => {
         const { columns, rows } = config;
         const scheduleData = data[rows.key]; // Access schedule data directly from the rows
 
-        // Group categories by their category (e.g., Concrete Work)
+        // Group categories by their type (e.g., Concrete Work, Design Services)
         const groupedCategories = groupCategoriesByType(scheduleData, rows);
 
-        const { total, nonTotal } = columns.reduce(
-            (acc, column) => {
-                if (column.total) {
-                    acc.total++;
-                } else {
-                    acc.nonTotal++;
-                }
-                return acc;
-            },
-            { total: 0, nonTotal: 0 }
-        );
+        // Count the number of total columns
+        const totalColumns = columns.filter((column) => column.total).length;
 
         return (
             <div className={styles.gridtxt}>
                 <div className={styles.gridtxt__header}>
-                    <span>{config.title || 'Project Scheduling'}</span>
+                    <span>{config.title || 'Estimation Schedule'}</span>
                 </div>
 
                 {groupedCategories.length > 0 ? (
-                    groupedCategories.map((group, index) => (
-                        <div key={index} className={styles.categoryGroup}>
-                            <h3>{group.category}</h3>
-                            <table className={styles.schedulingTable}>
-                                <thead>
-                                    <tr>
-                                        {columns.map((column) => (
-                                            <th
-                                                key={column.id}
-                                                style={
-                                                    column.width
-                                                        ? {
-                                                              width: column.width,
-                                                              textAlign:
-                                                                  column.type ===
-                                                                  'currency'
-                                                                      ? 'right'
-                                                                      : 'left',
-                                                          }
-                                                        : {}
-                                                }
-                                            >
-                                                {column.label}
-                                            </th>
-                                        ))}
-                                        <th style={{ width: '5%' }}></th>
+                    <table className={styles.schedulingTable}>
+                        <thead>
+                            <tr>
+                                {columns.map((column) => (
+                                    <th
+                                        key={column.id}
+                                        style={{
+                                            width: column.width || 'auto',
+                                            textAlign:
+                                                column.type === 'currency'
+                                                    ? 'right'
+                                                    : 'left',
+                                        }}
+                                    >
+                                        {column.label}
+                                    </th>
+                                ))}
+                                <th style={{ width: '5%' }}></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {groupedCategories.map((group) => (
+                                <React.Fragment key={group.category}>
+                                    {/* Category Row */}
+                                    <tr className={styles.categoryRow}>
+                                        <td colSpan={columns.length + 1}>
+                                            <strong>{group.category}</strong>
+                                        </td>
                                     </tr>
-                                </thead>
-                                <tbody>
-                                    {group.entries.map((category, idx) => (
-                                        <tr key={`row-${idx}`}>
+
+                                    {/* Data Rows */}
+                                    {group.entries.map((entry, idx) => (
+                                        <tr
+                                            key={`row-${group.category}-${idx}`}
+                                        >
                                             {columns.map((column) => (
                                                 <td
-                                                    key={`column-${idx}-${column.id}`}
-                                                    style={
-                                                        column.type ===
-                                                        'currency'
-                                                            ? {
-                                                                  textAlign:
-                                                                      'right',
-                                                              }
-                                                            : {}
-                                                    }
+                                                    key={`column-${column.id}-${idx}`}
+                                                    style={{
+                                                        textAlign:
+                                                            column.type ===
+                                                            'currency'
+                                                                ? 'right'
+                                                                : 'left',
+                                                    }}
                                                 >
                                                     {column.type === 'currency'
                                                         ? formatCurrency(
-                                                              category[
-                                                                  column.id
-                                                              ]
+                                                              entry[column.id]
                                                           )
-                                                        : category[column.id]
+                                                        : entry[column.id]
                                                               ?.label ||
-                                                          category[column.id] ||
+                                                          entry[column.id] ||
                                                           ''}
                                                 </td>
                                             ))}
                                             <td>
+                                                {/* Edit Icon */}
                                                 <span
                                                     data-tooltip-id="system-tooltip"
                                                     data-tooltip-content="Edit"
                                                     style={{
                                                         cursor: 'pointer',
+                                                        marginRight: '10px',
                                                     }}
                                                     onClick={() =>
                                                         modalOpen(
                                                             'update',
-                                                            category.id
+                                                            entry.id
                                                         )
                                                     }
                                                 >
@@ -1431,11 +1427,38 @@ function GenericDetail({
                                                         strokeWidth={2}
                                                     />
                                                 </span>
+
+                                                {/* Delete Icon */}
+                                                <span
+                                                    data-tooltip-id="system-tooltip"
+                                                    data-tooltip-content="Delete"
+                                                    style={{
+                                                        cursor: 'pointer',
+                                                    }}
+                                                    onClick={() =>
+                                                        handleDeleteRow(
+                                                            entry,
+                                                            config,
+                                                            dataId
+                                                        )
+                                                    }
+                                                >
+                                                    <TrashCan
+                                                        size={18}
+                                                        strokeWidth={2}
+                                                    />
+                                                </span>
                                             </td>
                                         </tr>
                                     ))}
-                                    <tr>
-                                        <td colSpan={nonTotal}>
+
+                                    {/* Total Cost Row */}
+                                    <tr className={styles.totalRow}>
+                                        <td
+                                            colSpan={
+                                                columns.length - totalColumns
+                                            }
+                                        >
                                             <strong>Total Cost</strong>
                                         </td>
                                         {columns.map((c) =>
@@ -1455,10 +1478,10 @@ function GenericDetail({
                                         )}
                                         <td></td>
                                     </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    ))
+                                </React.Fragment>
+                            ))}
+                        </tbody>
+                    </table>
                 ) : (
                     <div className={styles.noDataMessage}>
                         <p>No scheduling data has been added.</p>
@@ -1479,6 +1502,61 @@ function GenericDetail({
         );
     };
 
+    const handleDeleteRow = (d, c, dataId) => {
+        confirmAlert({
+            title: 'Delete Item',
+            message:
+                d.description && d.description !== ''
+                    ? d.description
+                    : `Are you sure you want to delete ${
+                          d.name ? d.name : d.label ? d.label : 'this item'
+                      }?`,
+            buttons: [
+                {
+                    label: 'Yes',
+                    onClick: () => {
+                        let deleteForm = {
+                            url: '',
+                            method: 'DELETE',
+                            payload: {},
+                        };
+
+                        deleteForm.url = `${c.form.url}/json/delete`;
+                        deleteForm.method = 'POST';
+                        deleteForm.payload = {
+                            id: d[c.form.primaryKey],
+                            dataId: dataId,
+                            key: c.form.jsonKey || '',
+                        };
+
+                        CustomFetch(
+                            deleteForm.url,
+                            deleteForm.method,
+                            deleteForm.payload,
+                            (result) => {
+                                if (result.error === '') {
+                                    handleReload();
+
+                                    toast.success(
+                                        `The selected item has been deleted.`
+                                    );
+                                } else {
+                                    toast.error(
+                                        <div>{parse(result.error)}</div>
+                                    );
+                                }
+                            }
+                        );
+                    },
+                },
+                {
+                    label: 'No',
+                    onClick: () => {},
+                },
+            ],
+        });
+    };
+
     // Function to group categories by their type (e.g., Concrete Work, Miscellaneous, etc.)
     const groupCategoriesByType = (data, rows) => {
         const grouped = {};
@@ -1488,28 +1566,43 @@ function GenericDetail({
                 const categoryType =
                     category[rows.categoryKey.id]?.[rows.categoryKey.label] ||
                     'Miscellaneous'; // Default to 'Miscellaneous' if no category is found
-                if (!grouped[categoryType]) {
-                    grouped[categoryType] = {
+
+                const categoryId =
+                    category[rows.categoryKey.id]?.id ||
+                    Number.MAX_SAFE_INTEGER; // Default to max integer if no id is found
+
+                if (!grouped[categoryId]) {
+                    grouped[categoryId] = {
+                        id: categoryId,
                         category: categoryType,
                         entries: [],
                     };
                 }
-                grouped[categoryType].entries.push(category);
+                grouped[categoryId].entries.push(category);
             });
         }
 
-        return Object.values(grouped).sort((a, b) =>
-            a.category.localeCompare(b.category)
-        ); // Sort categories alphabetically
+        return Object.values(grouped).sort((a, b) => a.id - b.id); // Sort categories by id
     };
 
     // Function to calculate the total cost for a group
     const calculateTotalCost = (entries, id) => {
+        if (!entries || entries.length === 0 || !id) {
+            return '$0.00'; // Return $0.00 if entries are empty or id is not provided
+        }
+
         let total = 0;
+
         entries.forEach((entry) => {
-            // Parse the cost from the 'materials' field and remove non-numeric characters
-            const cost = parseFloat(entry[id].replace(/[^0-9.-]+/g, '')) || 0;
-            total += cost;
+            if (entry && entry[id]) {
+                // Check if the entry and the specific field exist
+                // Parse the cost from the field and remove non-numeric characters
+                const cost =
+                    parseFloat(
+                        entry[id].toString().replace(/[^0-9.-]+/g, '')
+                    ) || 0;
+                total += cost;
+            }
         });
 
         // Format the total cost with commas and return it

package/src/components/crm/generic/styles/GenericDetail.module.scss

@@ -635,7 +635,7 @@
 }
 
 .schedulingTable th {
-    background-color: var(--secondary-color); /* Updated header color */
+    background-color: var(--secondary-color);
     color: var(--item-color);
     font-weight: bold;
 }
@@ -644,34 +644,30 @@
     background-color: rgba(var(--primary-rgb), 0.05);
 }
 
-.categoryGroup {
-    margin-top: 2rem;
-}
-
-h3 {
-    font-size: 1.5em;
+.categoryRow {
+    background-color: rgba(var(--primary-rgb), 0.1);
+    text-align: left;
+    font-weight: bold;
+    font-size: 1.2rem;
     color: var(--primary-color);
-    font-weight: 700;
-    display: flex;
-    justify-content: space-between; /* Ensure space for the Add button */
-    align-items: center;
 }
 
-.categoryGroup table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 1rem;
-}
-
-.categoryGroup td {
-    padding: 0.75rem;
-    border: 1px solid rgba(var(--primary-rgb), 0.1);
+.totalRow {
+    background-color: rgba(var(--primary-rgb), 0.05);
+    font-weight: bold;
+    text-align: right;
 }
 
 .noDataMessage {
     text-align: center;
-    color: var(--secondary-color);
-    font-size: 1.25em;
-    padding: 1em;
-    margin-top: 2em;
+    color: var(--secondary-color); /* Maintain a clear and neutral color */
+    font-size: 1.125em; /* Slightly reduce the font size for a cleaner look */
+    padding: 1.5em; /* Adjust padding for better spacing */
+    margin: 2em auto; /* Add auto margin for centering */
+    background: #f9f9f9; /* Subtle background to match the theme */
+    border: 1px solid #ddd; /* Light border for structure */
+    border-radius: 6px; /* Slight rounding for a modern feel */
+    max-width: 600px; /* Constrain width for a balanced layout */
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Gentle shadow for depth */
+    font-style: italic; /* Optional: Add a subtle font style */
 }