@visns-studio/visns-components 5.0.7 → 5.0.9

package/package.json

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

package/src/components/crm/Field.jsx

@@ -681,7 +681,6 @@ function Field({
                                 className={inputClass[settings.id]}
                                 onChange={onChange}
                             />
-                            {console.info(inputValue)}
                             {inputValue && inputValue.length > 0 && (
                                 <ul className="file-list">
                                     {inputValue.map((file, index) => (

package/src/components/crm/Form.jsx

@@ -842,6 +842,8 @@ function Form({
     const fetchData = async () => {
         let _formData = { ...formData };
 
+        console.info('aaa', formType, columnId);
+
         if (formSettings.fields.length > 0) {
             formSettings.fields.forEach((item) => {
                 const { id, value, type, parent, urlParam } = item;
@@ -883,23 +885,25 @@ function Form({
                     method,
                     payload = {};
 
-                const getDataId = () => {
-                    for (const item of ajaxSetting.where) {
-                        if (
-                            item.hasOwnProperty('urlParam') &&
-                            item.urlParam === 'dataId'
-                        ) {
-                            return item.value;
+                if (ajaxSetting?.where) {
+                    const getDataId = () => {
+                        for (const item of ajaxSetting.where) {
+                            if (
+                                item.hasOwnProperty('urlParam') &&
+                                item.urlParam === 'dataId'
+                            ) {
+                                return item.value;
+                            }
                         }
-                    }
-                    return 0;
-                };
+                        return 0;
+                    };
+                }
 
                 if (
                     formSettings.hasOwnProperty('json') &&
                     formSettings.json === true
                 ) {
-                    let dataId = getDataId();
+                    let dataId = paramValue || getDataId();
 
                     urlSuffix = '/json/get';
                     method = 'POST';

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

@@ -18,6 +18,7 @@ import {
     EyeOpen,
     EyeSlashed,
     File,
+    Pencil,
     TrashCan,
 } from 'akar-icons';
 
@@ -76,8 +77,6 @@ function GenericDetail({
             if (activeTab) {
                 const activeTabConfig = tabs.find((t) => t.id === activeTab.id);
 
-                console.info(tabs);
-
                 if (type === 'view') {
                     setActiveStage(stage.id);
                 } else {
@@ -135,6 +134,14 @@ function GenericDetail({
         }
     };
 
+    const handleExport = (config) => {
+        if (config.url && config.key) {
+            window.open(`${config.url}/${data[config.key]}`);
+        } else {
+            toast.error('Export URL not found');
+        }
+    };
+
     const handleCheckboxUpdate = async () => {
         try {
             if (currentConfigRef.current.functions.checkboxUpdate) {
@@ -1068,6 +1075,21 @@ function GenericDetail({
                                             </button>
                                         </div>
                                     )}
+
+                                    {activeTabConfig.export && (
+                                        <div className={styles.polActions}>
+                                            <button
+                                                className={styles.btn}
+                                                onClick={() =>
+                                                    handleExport(
+                                                        activeTabConfig.export
+                                                    )
+                                                }
+                                            >
+                                                Export
+                                            </button>
+                                        </div>
+                                    )}
                                 </>
                             );
                         case 'qrCode':
@@ -1298,6 +1320,8 @@ function GenericDetail({
                             } else {
                                 return null;
                             }
+                        case 'scheduling':
+                            return renderSchedulingTable(activeTabConfig);
                         default:
                             return null;
                     }
@@ -1306,6 +1330,207 @@ function GenericDetail({
         }
     };
 
+    const renderSchedulingTable = (config) => {
+        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)
+        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 }
+        );
+
+        return (
+            <div className={styles.gridtxt}>
+                <div className={styles.gridtxt__header}>
+                    <span>{config.title || 'Project Scheduling'}</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>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {group.entries.map((category, idx) => (
+                                        <tr key={`row-${idx}`}>
+                                            {columns.map((column) => (
+                                                <td
+                                                    key={`column-${idx}-${column.id}`}
+                                                    style={
+                                                        column.type ===
+                                                        'currency'
+                                                            ? {
+                                                                  textAlign:
+                                                                      'right',
+                                                              }
+                                                            : {}
+                                                    }
+                                                >
+                                                    {column.type === 'currency'
+                                                        ? formatCurrency(
+                                                              category[
+                                                                  column.id
+                                                              ]
+                                                          )
+                                                        : category[column.id]
+                                                              ?.label ||
+                                                          category[column.id] ||
+                                                          ''}
+                                                </td>
+                                            ))}
+                                            <td>
+                                                <span
+                                                    data-tooltip-id="system-tooltip"
+                                                    data-tooltip-content="Edit"
+                                                    style={{
+                                                        cursor: 'pointer',
+                                                    }}
+                                                    onClick={() =>
+                                                        modalOpen(
+                                                            'update',
+                                                            category.id
+                                                        )
+                                                    }
+                                                >
+                                                    <Pencil
+                                                        size={18}
+                                                        strokeWidth={2}
+                                                    />
+                                                </span>
+                                            </td>
+                                        </tr>
+                                    ))}
+                                    <tr>
+                                        <td colSpan={nonTotal}>
+                                            <strong>Total Cost</strong>
+                                        </td>
+                                        {columns.map((c) =>
+                                            c.total ? (
+                                                <td
+                                                    key={c.id}
+                                                    style={{
+                                                        textAlign: 'right',
+                                                    }}
+                                                >
+                                                    {calculateTotalCost(
+                                                        group.entries,
+                                                        c.id
+                                                    )}
+                                                </td>
+                                            ) : null
+                                        )}
+                                        <td></td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    ))
+                ) : (
+                    <div className={styles.noDataMessage}>
+                        <p>No scheduling data has been added.</p>
+                    </div>
+                )}
+
+                {config.form && (
+                    <div className={styles.polActions}>
+                        <button
+                            className={styles.btn}
+                            onClick={() => modalOpen('create', 0)}
+                        >
+                            Add
+                        </button>
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    // Function to group categories by their type (e.g., Concrete Work, Miscellaneous, etc.)
+    const groupCategoriesByType = (data, rows) => {
+        const grouped = {};
+
+        if (data) {
+            data.forEach((category) => {
+                const categoryType =
+                    category[rows.categoryKey.id]?.[rows.categoryKey.label] ||
+                    'Miscellaneous'; // Default to 'Miscellaneous' if no category is found
+                if (!grouped[categoryType]) {
+                    grouped[categoryType] = {
+                        category: categoryType,
+                        entries: [],
+                    };
+                }
+                grouped[categoryType].entries.push(category);
+            });
+        }
+
+        return Object.values(grouped).sort((a, b) =>
+            a.category.localeCompare(b.category)
+        ); // Sort categories alphabetically
+    };
+
+    // Function to calculate the total cost for a group
+    const calculateTotalCost = (entries, id) => {
+        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;
+        });
+
+        // Format the total cost with commas and return it
+        return `$${total.toLocaleString('en-AU', {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        })}`;
+    };
+
+    // Function to format currency values with commas and a currency symbol
+    const formatCurrency = (value) => {
+        if (value) {
+            const cost = parseFloat(value.replace(/[^0-9.-]+/g, '')) || 0; // Remove any non-numeric characters
+            return `$${cost.toLocaleString('en-AU', {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+            })}`;
+        }
+        return ''; // Return empty if value is not provided
+    };
+
     /** General Hooks */
     useEffect(() => {
         const handleResize = () => {
@@ -1428,6 +1653,7 @@ function GenericDetail({
                                 });
                             }
                             break;
+                        case 'scheduling':
                         case 'overview':
                             setConfig({});
                             if (activeTabConfig.form) {
@@ -1618,6 +1844,9 @@ function GenericDetail({
                     style={userProfile?.settings?.style || {}}
                     updateForm={setFormData}
                     userProfile={userProfile}
+                    paramValue={
+                        routeParams[urlParam] ? routeParams[urlParam] : 0
+                    }
                 />
             </Popup>
         </>

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

@@ -620,3 +620,58 @@
         color: rgba(var(--primary-rgb), 0.65);
     }
 }
+
+.schedulingTable {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1em 0;
+}
+
+.schedulingTable th,
+.schedulingTable td {
+    padding: 0.75rem;
+    text-align: left;
+    border: 1px solid rgba(var(--primary-rgb), 0.1);
+}
+
+.schedulingTable th {
+    background-color: var(--secondary-color); /* Updated header color */
+    color: var(--background-color);
+    font-weight: bold;
+}
+
+.schedulingTable td {
+    background-color: rgba(var(--primary-rgb), 0.05);
+}
+
+.categoryGroup {
+    margin-top: 2rem;
+}
+
+h3 {
+    font-size: 1.5em;
+    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);
+}
+
+.noDataMessage {
+    text-align: center;
+    color: var(--secondary-color);
+    font-size: 1.25em;
+    padding: 1em;
+    margin-top: 2em;
+}