From 30108ab2c003f0dccee4a520c0110863209b6c0a Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Tue, 12 Nov 2024 00:14:41 +0930
Subject: [PATCH 01/29] feat: Support Markdown field

ref: #26 #27 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#388
---
 src/components/page/detail/DoubleColumn.jsx | 95 +++++++++++----------
 src/components/page/detail/Section.jsx      |  8 ++
 src/components/page/detail/SingleColumn.jsx |  6 +-
 src/functions/FieldData.js                  | 23 ++---
 src/layout/ModelForm.jsx                    | 13 ++-
 5 files changed, 82 insertions(+), 63 deletions(-)

diff --git a/src/components/page/detail/DoubleColumn.jsx b/src/components/page/detail/DoubleColumn.jsx
index 42b31909..b031bd4d 100644
--- a/src/components/page/detail/DoubleColumn.jsx
+++ b/src/components/page/detail/DoubleColumn.jsx
@@ -6,7 +6,8 @@ const DoubleColumn = ({
     data,
     metadata,
     left = [],
-    right = []
+    right = [],
+    textarea_fields = []
 }) => {
 
 
@@ -15,7 +16,7 @@ const DoubleColumn = ({
             <div className="column">
                 {left.map((field) => (
                     (
-                        field != "model_notes" ?
+                        ( ! textarea_fields.includes(String(metadata.fields[field].type).toLowerCase()) ) ?
                             <fieldset className="inline">
                                 <label>
                                     {
@@ -59,49 +60,53 @@ const DoubleColumn = ({
                 ))}
             </div>
             <div className="column">
-                {right.map((field) => (
-                    (
-                        field != "model_notes" ?
-                            <fieldset className="inline">
-                                <label>
-                                    {
-                                        (
-                                            field in metadata.fields
-                                        ) ?
-                                            metadata.fields[field].label
-                                            :
-                                            ""
-                                    }
-                                </label>
-                                <span className="text">
-                                    <FieldData
-                                        metadata={metadata}
-                                        field_name={field}
-                                        data={data}
-                                    />
-                                </span>
-                            </fieldset> :
-                            <fieldset className="textarea">
-                                <label>
-                                    {
-                                        (
-                                            field in metadata.fields
-                                        ) ?
-                                            metadata.fields[field].label
-                                            :
-                                            ""
-                                    }
-                                </label>
-                                <div className="markdown">
-                                    <FieldData
-                                        metadata={metadata}
-                                        field_name={field}
-                                        data={data}
-                                    />
-                                </div>
-                            </fieldset>
-                    )
-                ))}
+                {right.map((field) => {
+
+                    if( field in metadata.fields ) {
+                        return (
+
+                            ( ! textarea_fields.includes(String(metadata.fields[field].type).toLowerCase()) ) ?
+                                <fieldset className="inline">
+                                    <label>
+                                        {
+                                            (
+                                                field in metadata.fields
+                                            ) ?
+                                                metadata.fields[field].label
+                                                :
+                                                ""
+                                        }
+                                    </label>
+                                    <span className="text">
+                                        <FieldData
+                                            metadata={metadata}
+                                            field_name={field}
+                                            data={data}
+                                        />
+                                    </span>
+                                </fieldset> :
+                                <fieldset className="textarea">
+                                    <label>
+                                        {
+                                            (
+                                                field in metadata.fields
+                                            ) ?
+                                                metadata.fields[field].label
+                                                :
+                                                ""
+                                        }
+                                    </label>
+                                    <div className="markdown">
+                                        <FieldData
+                                            metadata={metadata}
+                                            field_name={field}
+                                            data={data}
+                                        />
+                                    </div>
+                                </fieldset>
+                        )
+                    }
+                })}
             </div>
         </div>
     );
diff --git a/src/components/page/detail/Section.jsx b/src/components/page/detail/Section.jsx
index a722ae79..b01d3c6d 100644
--- a/src/components/page/detail/Section.jsx
+++ b/src/components/page/detail/Section.jsx
@@ -24,6 +24,12 @@ const Section = ({
     
     let column
 
+
+    let textarea_fields = [
+        'json',
+        'markdown'
+    ]
+
     if( layout.layout === 'double' ) {
 
         column = (
@@ -32,6 +38,7 @@ const Section = ({
                 metadata={metadata}
                 left={layout.left}
                 right={layout.right}
+                textarea_fields = {textarea_fields}
             />
         )
 
@@ -42,6 +49,7 @@ const Section = ({
                 data={data}
                 metadata={metadata}
                 fields={layout.fields}
+                textarea_fields = {textarea_fields}
             />
         )
 
diff --git a/src/components/page/detail/SingleColumn.jsx b/src/components/page/detail/SingleColumn.jsx
index 968522da..b2141eff 100644
--- a/src/components/page/detail/SingleColumn.jsx
+++ b/src/components/page/detail/SingleColumn.jsx
@@ -5,7 +5,8 @@ import FieldData from "../../../functions/FieldData";
 const SingleColumn = ({
     data,
     metadata,
-    fields = []
+    fields = [],
+    textarea_fields = []
 }) => {
 
     let fieldClass = 'text'
@@ -16,8 +17,7 @@ const SingleColumn = ({
                 {fields.map((field) => {
 
                     if(
-                        field == "model_notes"
-                        || String(metadata.fields[field].type).toLowerCase() == "json"
+                        ( textarea_fields.includes(String(metadata.fields[field].type).toLowerCase()) )
                     ) {
 
                         return(
diff --git a/src/functions/FieldData.js b/src/functions/FieldData.js
index 19478a94..f80504fd 100644
--- a/src/functions/FieldData.js
+++ b/src/functions/FieldData.js
@@ -200,6 +200,15 @@ export default function FieldData({
 
                 break;
 
+            case 'Markdown':
+
+                field_data = (
+                    <RenderMarkdown>
+                        {data_field}
+                    </RenderMarkdown>
+                )
+
+                break;
             default:
 
                 if(
@@ -227,20 +236,6 @@ export default function FieldData({
 
     }
 
-    if(
-
-        field_name == 'description' || field_name == 'body' || field_name == 'model_notes'
-
-    ) {
-
-        field_data = (
-            <RenderMarkdown>
-                {field_data}
-            </RenderMarkdown>
-        )
-
-    }
-
     return field_data;
 }
 
diff --git a/src/layout/ModelForm.jsx b/src/layout/ModelForm.jsx
index 9e0d66d0..3f559673 100644
--- a/src/layout/ModelForm.jsx
+++ b/src/layout/ModelForm.jsx
@@ -198,7 +198,18 @@ const ModelForm = ({
                                 case 'JSON':
 
                                     return (<TextArea
-                                    field_type="json"
+                                        id = {field_key}
+                                        label = {metadata.fields[field_key].label}
+                                        helptext   = {metadata.fields[field_key].help_text}
+                                        error_text = {form_error && form_error[field_key]}
+                                        required   = {metadata.fields[field_key].required}
+                                        value={value}
+                                        onChange={handleChange}
+                                    />)
+
+                                case 'Markdown':
+
+                                    return (<TextArea
                                         id = {field_key}
                                         label = {metadata.fields[field_key].label}
                                         helptext   = {metadata.fields[field_key].help_text}

From 4159b2d95b77a2bfe576b0e26fa568401efadc5d Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Tue, 12 Nov 2024 00:16:54 +0930
Subject: [PATCH 02/29] feat(layout): On form field error, scroll to top of
 form

ref: #26 #27 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#388
---
 src/layout/ModelForm.jsx | 39 ++++++++++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/layout/ModelForm.jsx b/src/layout/ModelForm.jsx
index 3f559673..686923ce 100644
--- a/src/layout/ModelForm.jsx
+++ b/src/layout/ModelForm.jsx
@@ -132,6 +132,10 @@ const ModelForm = ({
 
                         navigate(url_builder.return_url)
 
+                    } else {
+
+                        window.scrollTo(0, 0)
+
                     }
                 }}>
                     { metadata && params.action == 'delete' && 
@@ -221,15 +225,32 @@ const ModelForm = ({
 
                                 default:
 
-                                    return (<TextField
-                                        id = {field_key}
-                                        label = {metadata.fields[field_key].label}
-                                        helptext   = {metadata.fields[field_key].help_text}
-                                        error_text = {form_error && form_error[field_key]}
-                                        required   = {metadata.fields[field_key].required}
-                                        value={value}
-                                        onChange={handleChange}
-                                    />)
+                                    if( 'multi_line' in metadata.fields[field_key] ) {
+
+
+                                        return (<TextArea
+                                            id = {field_key}
+                                            label = {metadata.fields[field_key].label}
+                                            helptext   = {metadata.fields[field_key].help_text}
+                                            error_text = {form_error && form_error[field_key]}
+                                            required   = {metadata.fields[field_key].required}
+                                            value={value}
+                                            onChange={handleChange}
+                                        />)
+
+                                    } else {
+
+                                        return (<TextField
+                                            id = {field_key}
+                                            label = {metadata.fields[field_key].label}
+                                            helptext   = {metadata.fields[field_key].help_text}
+                                            error_text = {form_error && form_error[field_key]}
+                                            required   = {metadata.fields[field_key].required}
+                                            value={value}
+                                            onChange={handleChange}
+                                        />)
+    
+                                    }
                             }
 
 

From 50bccf6ccc69a51c37b8110c8bc62875e0c9809e Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Tue, 12 Nov 2024 00:17:22 +0930
Subject: [PATCH 03/29] feat(layout): Form field error, set to be no larger
 than field

ref: #26 #27 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#388
---
 src/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.css b/src/index.css
index f2f2fe2d..f1dc8e5c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1462,6 +1462,7 @@ form fieldset span.error-text {
   display: block;
   color: var(--text-colour-error);
   font-size: 10pt;
+  max-width: 400px;
 }
 
 form fieldset span.help-text {

From 57784ca44d24ee4addd6bd0e4b7bec4c14c57050 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Tue, 12 Nov 2024 00:17:51 +0930
Subject: [PATCH 04/29] fix(layout): Ensure that Markdown code blocks do wrap
 text

ref: #26 #27 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#388
---
 src/index.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/index.css b/src/index.css
index f1dc8e5c..f675a5fb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1038,10 +1038,12 @@ span.badge span.badge-icon.ticket-status-icon-testing svg {
   color: var(--text-colour);
   padding: 5px;
   border: 1px solid var(--border-colour);
-  display: inline-block;
-  width: 95%;
+  display:block;
+  width: 99%;
   word-wrap: break-word;
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  margin: 0px auto;
 }
 
 .hljs-comment,

From 2684ad7d9c244f7e58e4f2dce4db4d9354bb865e Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Tue, 12 Nov 2024 00:38:46 +0930
Subject: [PATCH 05/29] feat(component): Add support for multi-select form
 field

ref: #26 #27 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#388
---
 src/components/form/Select.jsx | 4 +++-
 src/index.css                  | 4 ++++
 src/layout/ModelForm.jsx       | 1 +
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/form/Select.jsx b/src/components/form/Select.jsx
index aec64819..d5f6282f 100644
--- a/src/components/form/Select.jsx
+++ b/src/components/form/Select.jsx
@@ -7,7 +7,8 @@ const Select = ({
     required=false,
     error_text=null,
     value = '',
-    onChange = null
+    onChange = null,
+    field_data = null
 }) => {
 
     
@@ -27,6 +28,7 @@ const Select = ({
                 required={required}
                 className="common-field"
                 onChange={onChange}
+                multiple = {field_data.relationship_type == 'ManyToMany' ? true : false}
             >
                 <option value="">Please select an option</option>
                 {choices.map((choice) => {
diff --git a/src/index.css b/src/index.css
index f675a5fb..10608593 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1508,6 +1508,10 @@ form fieldset select {
   height: 30px;
 }
 
+form fieldset select[multiple] {
+  height: 200px;
+}
+
 div.align-center {
   text-align: center;
 }
diff --git a/src/layout/ModelForm.jsx b/src/layout/ModelForm.jsx
index 686923ce..ed84bc60 100644
--- a/src/layout/ModelForm.jsx
+++ b/src/layout/ModelForm.jsx
@@ -197,6 +197,7 @@ const ModelForm = ({
                                         required   = {metadata.fields[field_key].required}
                                         value={value}
                                         onChange={handleChange}
+                                        field_data={metadata.fields[field_key]}
                                     />)
 
                                 case 'JSON':

From 619ceda79677d1c8d12144fe1676fcf69e02f209 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Tue, 12 Nov 2024 00:40:34 +0930
Subject: [PATCH 06/29] refactor(component): Pass in the entire field meta and
 have the component figure out the values

ref: #26 #27 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#388
---
 src/components/form/Select.jsx | 12 ++++--------
 src/layout/ModelForm.jsx       |  4 ----
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/components/form/Select.jsx b/src/components/form/Select.jsx
index d5f6282f..2a80d75e 100644
--- a/src/components/form/Select.jsx
+++ b/src/components/form/Select.jsx
@@ -1,10 +1,6 @@
 
 const Select = ({
     id,
-    choices = [],
-    label,
-    helptext=null,
-    required=false,
     error_text=null,
     value = '',
     onChange = null,
@@ -22,16 +18,16 @@ const Select = ({
 
     return (
         <fieldset>
-            <label className="name" for={id}>{label}</label>
+            <label className="name" for={id}>{field_data.label}</label>
             <select
                 id={id}
-                required={required}
+                required={field_data.required}
                 className="common-field"
                 onChange={onChange}
                 multiple = {field_data.relationship_type == 'ManyToMany' ? true : false}
             >
                 <option value="">Please select an option</option>
-                {choices.map((choice) => {
+                {field_data.choices.map((choice) => {
 
                     let selected = false
 
@@ -54,7 +50,7 @@ const Select = ({
 
                 })}
             </select>
-            <span className="help-text">{helptext}</span>
+            <span className="help-text">{field_data.help_text}</span>
             <span className="error-text">{error_text}</span>
         </fieldset>
     );
diff --git a/src/layout/ModelForm.jsx b/src/layout/ModelForm.jsx
index ed84bc60..807fed54 100644
--- a/src/layout/ModelForm.jsx
+++ b/src/layout/ModelForm.jsx
@@ -189,12 +189,8 @@ const ModelForm = ({
                                 case 'Relationship':
 
                                     return (<Select
-                                        choices={metadata.fields[field_key].choices}
                                         id = {field_key}
-                                        label = {metadata.fields[field_key].label}
-                                        helptext   = {metadata.fields[field_key].help_text}
                                         error_text = {form_error && form_error[field_key]}
-                                        required   = {metadata.fields[field_key].required}
                                         value={value}
                                         onChange={handleChange}
                                         field_data={metadata.fields[field_key]}

From 5bd3fca72c8027159a568b6a1412cc34d91a8233 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Tue, 12 Nov 2024 01:40:02 +0930
Subject: [PATCH 07/29] fix(component): dont attempt to access field in double
 column if it doesnt exist

ref: #26 #27 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#388
---
 src/components/page/detail/DoubleColumn.jsx | 92 +++++++++++----------
 1 file changed, 49 insertions(+), 43 deletions(-)

diff --git a/src/components/page/detail/DoubleColumn.jsx b/src/components/page/detail/DoubleColumn.jsx
index b031bd4d..41dde76c 100644
--- a/src/components/page/detail/DoubleColumn.jsx
+++ b/src/components/page/detail/DoubleColumn.jsx
@@ -14,50 +14,56 @@ const DoubleColumn = ({
     return (
         <div className="double">
             <div className="column">
-                {left.map((field) => (
-                    (
-                        ( ! textarea_fields.includes(String(metadata.fields[field].type).toLowerCase()) ) ?
-                            <fieldset className="inline">
-                                <label>
-                                    {
-                                        (
-                                            field in metadata.fields
-                                        ) ?
-                                            metadata.fields[field].label
-                                            :
-                                            ""
-                                    }
-                                </label>
-                                <span className="text">
-                                    <FieldData
-                                        metadata={metadata}
-                                        field_name={field}
-                                        data={data}
-                                    />
-                                </span>
-                            </fieldset> :
+                {left.map((field) => {
 
-                            <fieldset className="textarea">
-                                <label>
-                                    {
-                                        (
-                                            field in metadata.fields
-                                        ) ?
-                                            metadata.fields[field].label
-                                            :
-                                            ""
-                                    }
-                                </label>
-                                <div className="markdown">
-                                    <FieldData
-                                        metadata={metadata}
-                                        field_name={field}
-                                        data={data}
-                                    />
-                                </div>
-                            </fieldset>
-                    )
-                ))}
+                    if( field in metadata.fields ) {
+
+                        return (
+                            (
+                                ( ! textarea_fields.includes(String(metadata.fields[field].type).toLowerCase()) ) ?
+                                    <fieldset className="inline">
+                                        <label>
+                                            {
+                                                (
+                                                    field in metadata.fields
+                                                ) ?
+                                                    metadata.fields[field].label
+                                                    :
+                                                    ""
+                                            }
+                                        </label>
+                                        <span className="text">
+                                            <FieldData
+                                                metadata={metadata}
+                                                field_name={field}
+                                                data={data}
+                                            />
+                                        </span>
+                                    </fieldset> :
+
+                                    <fieldset className="textarea">
+                                        <label>
+                                            {
+                                                (
+                                                    field in metadata.fields
+                                                ) ?
+                                                    metadata.fields[field].label
+                                                    :
+                                                    ""
+                                            }
+                                        </label>
+                                        <div className="markdown">
+                                            <FieldData
+                                                metadata={metadata}
+                                                field_name={field}
+                                                data={data}
+                                            />
+                                        </div>
+                                    </fieldset>
+                            )
+                        )
+                    }
+                })}
             </div>
             <div className="column">
                 {right.map((field) => {

From 9e89439ab25d386459f43899a8b4870777516f6c Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Tue, 12 Nov 2024 01:40:41 +0930
Subject: [PATCH 08/29] feat(layout): Cater for multi-select values

ref: #26 #27 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#388
---
 src/layout/ModelForm.jsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/layout/ModelForm.jsx b/src/layout/ModelForm.jsx
index 807fed54..28c9af18 100644
--- a/src/layout/ModelForm.jsx
+++ b/src/layout/ModelForm.jsx
@@ -106,7 +106,20 @@ const ModelForm = ({
 
         let field_value = e.target.value
 
-        if( e.target.type === 'checkbox' ) {
+
+        if( e.target.multiple ) {
+
+            field_value = []
+
+            for( let selected_option of e.target.selectedOptions ) {
+
+
+                field_value.push(selected_option.value)
+
+            }
+
+
+        } else if( e.target.type === 'checkbox' ) {
 
             field_value = e.target.checked
 

From aefcfd1efdd97ae8364ad1287ea04b803c1c7ac0 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Tue, 12 Nov 2024 02:24:24 +0930
Subject: [PATCH 09/29] feat(layout): display non-field errors at the top of
 the form

ref: #26 #27 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#388
---
 src/layout/ModelForm.jsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/layout/ModelForm.jsx b/src/layout/ModelForm.jsx
index 28c9af18..331d9f42 100644
--- a/src/layout/ModelForm.jsx
+++ b/src/layout/ModelForm.jsx
@@ -130,6 +130,18 @@ const ModelForm = ({
 
     return((page_data || ! edit ) &&
         <section>
+            {form_error && form_error['non_field_errors'] &&
+                <div>
+                    <ul>
+                    {form_error['non_field_errors'].map( (err) => {
+                        
+                        return (
+                            <li><span className="error-text">{err}</span></li>
+                        )
+                    })}
+                    </ul>
+                </div>
+            }
             <div className="content">
                 <form onSubmit={async e => {
                     e.preventDefault();

From 0bf19beee3e8d55da1b9e358025ccb3ffdbabef1 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Tue, 12 Nov 2024 02:24:55 +0930
Subject: [PATCH 10/29] feat(function): Add Delete mehod to urlBuilder

ref: #26 #27 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#388
---
 src/hooks/urlBuilder.js  | 6 ++++++
 src/layout/ModelForm.jsx | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/hooks/urlBuilder.js b/src/hooks/urlBuilder.js
index e92c6966..82c4516f 100644
--- a/src/hooks/urlBuilder.js
+++ b/src/hooks/urlBuilder.js
@@ -254,6 +254,12 @@ export default function urlBuilder(
 
         method = 'POST'
 
+    }else if( action ==  'delete' ) {
+
+        method = 'DELETE'
+
+        return_url = String( return_url ).replace( '/' + pk )
+
     }else if( action ==  'edit' ) {
 
         method = 'PATCH'
diff --git a/src/layout/ModelForm.jsx b/src/layout/ModelForm.jsx
index 331d9f42..ac66c92c 100644
--- a/src/layout/ModelForm.jsx
+++ b/src/layout/ModelForm.jsx
@@ -163,7 +163,7 @@ const ModelForm = ({
 
                     }
                 }}>
-                    { metadata && params.action == 'delete' && 
+                    { metadata && url_builder.params.action == 'delete' && 
                     <>
                     Are you sure you wish to delete this item?
                     </>}

From d106e7905a6e9ddccb49d6c1aaa9b5d4dea4f8ad Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Tue, 12 Nov 2024 06:19:51 +0930
Subject: [PATCH 11/29] feat(component): Support Timezoned DateTime fields

ref: #4 #26 #27 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#388
---
 src/components/form/Textfield.jsx             |  8 +++-
 .../page/ticket/TicketCommentForm.jsx         | 34 ++------------
 src/functions/FieldData.js                    | 46 +++++++++++++++++++
 src/index.css                                 |  2 +-
 src/layout/ModelForm.jsx                      | 13 ++++++
 5 files changed, 72 insertions(+), 31 deletions(-)

diff --git a/src/components/form/Textfield.jsx b/src/components/form/Textfield.jsx
index a8ae764f..fcb58ebd 100644
--- a/src/components/form/Textfield.jsx
+++ b/src/components/form/Textfield.jsx
@@ -30,6 +30,12 @@ const TextField = ({
     )
     if( type === 'datetime-local') {
 
+        if( String(value).includes('+') ) {
+
+            value = String(value).split('+')[0]
+
+        }
+
         field = (
             <input
                 className="common-field"
@@ -40,7 +46,7 @@ const TextField = ({
                 // placeholder={helptext}
                 required={required}
                 type={type}
-                // value={value}
+                value={value}
             />
         )
 
diff --git a/src/components/page/ticket/TicketCommentForm.jsx b/src/components/page/ticket/TicketCommentForm.jsx
index 4c80f01d..5e4c09a6 100644
--- a/src/components/page/ticket/TicketCommentForm.jsx
+++ b/src/components/page/ticket/TicketCommentForm.jsx
@@ -100,13 +100,8 @@ const TicketCommentForm = ({
                         <fieldset className={comment_class}>
                             <span>
                                 <Select
-                                        choices={metadata.fields['source'].choices}
                                         id = 'source'
-                                        label = {metadata.fields['source'].label}
-                                        helptext   = {metadata.fields['source'].help_text}
-                                        // error_text = {form_error && form_error[field_key]}
-                                        required   = {metadata.fields['source'].required}
-                                        // value={1}
+                                        field_data={metadata.fields['source']}
                                         onChange={handleChange}
                                     />
                             </span>
@@ -114,12 +109,8 @@ const TicketCommentForm = ({
                         {task_comment && <fieldset className={comment_class}>
                             <span>
                                 <Select
-                                    choices={metadata.fields['status'].choices}
                                     id = 'status'
-                                    label = {metadata.fields['status'].label}
-                                    helptext   = {metadata.fields['status'].help_text}
-                                    // error_text = {form_error && form_error[field_key]}
-                                    required   = {metadata.fields['status'].required}
+                                    field_data={metadata.fields['status']}
                                     value={1}
                                     onChange={handleChange}
                                 />
@@ -128,13 +119,8 @@ const TicketCommentForm = ({
                         {task_comment && <fieldset className={comment_class}>
                             <span>
                                 <Select
-                                    choices={metadata.fields['responsible_user'].choices}
                                     id = 'responsible_user'
-                                    label = {metadata.fields['responsible_user'].label}
-                                    helptext   = {metadata.fields['responsible_user'].help_text}
-                                    // error_text = {form_error && form_error[field_key]}
-                                    // required   = {metadata.fields['responsible_user'].required}
-                                    // value={1}
+                                    field_data={metadata.fields['responsible_user']}
                                     onChange={handleChange}
                                 />
                             </span>
@@ -142,13 +128,8 @@ const TicketCommentForm = ({
                         {task_comment && <fieldset className={comment_class}>
                             <span>
                                 <Select
-                                    choices={metadata.fields['responsible_team'].choices}
                                     id = 'responsible_team'
-                                    label = {metadata.fields['responsible_team'].label}
-                                    helptext   = {metadata.fields['responsible_team'].help_text}
-                                    // error_text = {form_error && form_error[field_key]}
-                                    // required   = {metadata.fields['responsible_user'].required}
-                                    // value={1}
+                                    field_data={metadata.fields['responsible_team']}
                                     onChange={handleChange}
                                 />
                             </span>
@@ -156,13 +137,8 @@ const TicketCommentForm = ({
                         { true && <fieldset className={comment_class}>
                             <span>
                                 <Select
-                                    choices={metadata.fields['category'].choices}
                                     id = 'category'
-                                    label = {metadata.fields['category'].label}
-                                    helptext   = {metadata.fields['category'].help_text}
-                                    // error_text = {form_error && form_error[field_key]}
-                                    // required   = {metadata.fields['responsible_user'].required}
-                                    // value={1}
+                                    field_data={metadata.fields['responsible_user']}
                                     onChange={handleChange}
                                 />
                                 <FieldData
diff --git a/src/functions/FieldData.js b/src/functions/FieldData.js
index f80504fd..48561da8 100644
--- a/src/functions/FieldData.js
+++ b/src/functions/FieldData.js
@@ -106,6 +106,52 @@ export default function FieldData({
 
                 break;
 
+            case 'DateTime':
+
+            Date.prototype.format = function(formatString) {
+                return Object.entries({
+                  YYYY: this.getFullYear(),
+                  YY: this.getFullYear().toString().substring(2),
+                  yyyy: this.getFullYear(),
+                  yy: this.getFullYear().toString().substring(2),
+                  MMMM: this.toLocaleString('default', { month: 'long'  }),
+                  MMM: this.toLocaleString('default',  { month: 'short' }),
+                  MM: (this.getMonth() + 1).toString().padStart(2, '0'),
+                  M: this.getMonth() + 1,
+                  DDDD: this.toLocaleDateString('default', { weekday: 'long'  }),
+                  DDD: this.toLocaleDateString('default',  { weekday: 'short' }),
+                  DD: this.getDate().toString().padStart(2, '0'),
+                  D: this.getDate(),
+                  dddd: this.toLocaleDateString('default', { weekday: 'long'  }),
+                  ddd: this.toLocaleDateString('default',  { weekday: 'short' }),
+                  dd: this.getDate().toString().padStart(2, '0'),
+                  d: this.getDate(),
+                  HH: this.getHours().toString().padStart(2, '0'), // military
+                  H: this.getHours().toString(), // military
+                  hh: (this.getHours() % 12).toString().padStart(2, '0'),
+                //   h: (this.getHours() % 12).toString(),
+                  mm: this.getMinutes().toString().padStart(2, '0'),
+                  m: this.getMinutes(),
+                  SS: this.getSeconds().toString().padStart(2, '0'),
+                  S: this.getSeconds(),
+                  ss: this.getSeconds().toString().padStart(2, '0'),
+                  s: this.getSeconds(),
+                  TTT: this.getMilliseconds().toString().padStart(3, '0'),
+                  ttt: this.getMilliseconds().toString().padStart(3, '0'),
+                  AMPM: this.getHours() < 13 ? 'AM' : 'PM',
+                  ampm: this.getHours() < 13 ? 'am' : 'pm',
+                }).reduce((acc, entry) => {
+                  return acc.replace(entry[0], entry[1].toString())
+                }, formatString)
+              }
+
+
+                let datetime = new Date(String(data_field))
+
+                field_data = datetime.format('HH:mm dd MMM YYYY')
+
+                break;
+
             case 'Icon':
 
                 field_data = (
diff --git a/src/index.css b/src/index.css
index 10608593..1fb0c100 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1460,7 +1460,7 @@ form fieldset label.name {
   padding-bottom: 5px;
 }
 
-form fieldset span.error-text {
+span.error-text {
   display: block;
   color: var(--text-colour-error);
   font-size: 10pt;
diff --git a/src/layout/ModelForm.jsx b/src/layout/ModelForm.jsx
index ac66c92c..bf578b52 100644
--- a/src/layout/ModelForm.jsx
+++ b/src/layout/ModelForm.jsx
@@ -221,6 +221,19 @@ const ModelForm = ({
                                         field_data={metadata.fields[field_key]}
                                     />)
 
+                                case 'DateTime':
+
+                                    return (<TextField
+                                        id = {field_key}
+                                        label = {metadata.fields[field_key].label}
+                                        helptext   = {metadata.fields[field_key].help_text}
+                                        error_text = {form_error && form_error[field_key]}
+                                        required   = {metadata.fields[field_key].required}
+                                        type = {'datetime-local'}
+                                        value={value}
+                                        onChange={handleChange}
+                                    />)
+
                                 case 'JSON':
 
                                     return (<TextArea

From 966645bcabbbefe3e7ac3b468862da3800d4bcfc Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Wed, 13 Nov 2024 14:43:24 +0930
Subject: [PATCH 12/29] feat(component): Correctly convert ISO8601 with TZ to
 display in browser local TZ

ref: #26 #27 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#388 closes #4
---
 src/layout/ModelForm.jsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/layout/ModelForm.jsx b/src/layout/ModelForm.jsx
index bf578b52..7e762724 100644
--- a/src/layout/ModelForm.jsx
+++ b/src/layout/ModelForm.jsx
@@ -123,6 +123,14 @@ const ModelForm = ({
 
             field_value = e.target.checked
 
+        } else if( e.target.type === 'datetime-local' ) {
+
+            if( e.target.value != '' ) {    // Convert to UTC
+
+                field_value = new Date(e.target.value).toISOString()
+
+            }
+
         }
         
         setFormData((prevState) => ({ ...prevState, [e.target.id]: field_value }))
@@ -223,6 +231,15 @@ const ModelForm = ({
 
                                 case 'DateTime':
 
+                                    if( value ) {    // Convert DateTime (UTC) to local Time
+
+                                        let datetime = new Date(value)
+                                        let local_datetime = new Date(datetime - datetime.getTimezoneOffset()*60*1000).toISOString();
+
+                                        value = String(local_datetime).split('.')[0]
+
+                                    }
+
                                     return (<TextField
                                         id = {field_key}
                                         label = {metadata.fields[field_key].label}

From a8b86c65e172d866593d32bd35880544ed6cb6ce Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Wed, 13 Nov 2024 16:58:39 +0930
Subject: [PATCH 13/29] feat(component): Auto-Expand Text area to content
 height

ref: #26 #27 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#388
---
 src/components/form/Textarea.jsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/form/Textarea.jsx b/src/components/form/Textarea.jsx
index 3b07e7ed..d732072f 100644
--- a/src/components/form/Textarea.jsx
+++ b/src/components/form/Textarea.jsx
@@ -22,6 +22,22 @@ const TextArea = ({
                 required={required}
                 className="common-field"
                 onChange={onChange}
+                onKeyUp={(e) =>{
+
+                    const currentScrollY = window.scrollY
+
+                    e.target.style.height = "1px";
+                    e.target.style.height = ( 25 + e.target.scrollHeight ) + "px";
+
+                    window.scrollTo(0, currentScrollY);    // Prevent window scrolling to y=0
+
+                }}
+                onClick={(e) =>{
+
+                    e.target.style.height = "1px";
+                    e.target.style.height = ( 25 + e.target.scrollHeight ) + "px";
+
+                }}
     
             >{value}</textarea>
             <span className="error-text">{error_text}</span>

From 6a4946862fdd63fb2786fb0f5f94dc6f784930ce Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Wed, 13 Nov 2024 17:07:55 +0930
Subject: [PATCH 14/29] refactor(component): Pass field object directly to
 textarea

pasing the whole object as the component is to do ALL logic for the field

ref: #26 #27 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#388
---
 src/components/form/Textarea.jsx | 48 ++++++++++++++++++++++++++++----
 src/layout/ModelForm.jsx         | 12 ++------
 2 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/src/components/form/Textarea.jsx b/src/components/form/Textarea.jsx
index d732072f..ad65f0f5 100644
--- a/src/components/form/Textarea.jsx
+++ b/src/components/form/Textarea.jsx
@@ -1,18 +1,56 @@
 const TextArea = ({
     id,
-    label,
-    helptext=null,
-    required=false,
     error_text=null,
     value= '',
     onChange = null,
-    class_name = null
+    class_name = null,
+    field_data = null
 }) => {
 
     if( value === null ) {
         value = ''
     }
 
+    let field_class_name = "common-field"
+    let helptext = null
+    let required = false
+    let label = ''
+
+    if( field_data ) {
+
+        field_data = Object(field_data)
+
+
+
+        if( 'help_text' in field_data) {
+
+            helptext = field_data['help_text']
+
+        }
+
+        if( 'label' in field_data ) {
+
+            label = field_data['label']
+
+        }
+
+        if( 'required' in field_data) {
+
+            required = field_data['required']
+
+        }
+
+        if( 'style' in field_data ) {
+
+            if( 'class' in field_data.style ) {
+
+                field_class_name += String( ' ' + field_data['style']['class'])
+
+            }
+        }
+    }
+
+
     return (
         <fieldset className={class_name}>
             <label className="name" for={id}>{label}</label>
@@ -20,7 +58,7 @@ const TextArea = ({
             <textarea
                 id={id}
                 required={required}
-                className="common-field"
+                className={field_class_name}
                 onChange={onChange}
                 onKeyUp={(e) =>{
 
diff --git a/src/layout/ModelForm.jsx b/src/layout/ModelForm.jsx
index 7e762724..9d5199f0 100644
--- a/src/layout/ModelForm.jsx
+++ b/src/layout/ModelForm.jsx
@@ -255,10 +255,8 @@ const ModelForm = ({
 
                                     return (<TextArea
                                         id = {field_key}
-                                        label = {metadata.fields[field_key].label}
-                                        helptext   = {metadata.fields[field_key].help_text}
                                         error_text = {form_error && form_error[field_key]}
-                                        required   = {metadata.fields[field_key].required}
+                                        field_data={metadata.fields[field_key]}
                                         value={value}
                                         onChange={handleChange}
                                     />)
@@ -267,10 +265,8 @@ const ModelForm = ({
 
                                     return (<TextArea
                                         id = {field_key}
-                                        label = {metadata.fields[field_key].label}
-                                        helptext   = {metadata.fields[field_key].help_text}
                                         error_text = {form_error && form_error[field_key]}
-                                        required   = {metadata.fields[field_key].required}
+                                        field_data={metadata.fields[field_key]}
                                         value={value}
                                         onChange={handleChange}
                                     />)
@@ -282,10 +278,8 @@ const ModelForm = ({
 
                                         return (<TextArea
                                             id = {field_key}
-                                            label = {metadata.fields[field_key].label}
-                                            helptext   = {metadata.fields[field_key].help_text}
                                             error_text = {form_error && form_error[field_key]}
-                                            required   = {metadata.fields[field_key].required}
+                                            field_data={metadata.fields[field_key]}
                                             value={value}
                                             onChange={handleChange}
                                         />)

From 8aadb62ca36917f33b4b3210d05994ee5fdc9aa9 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Wed, 13 Nov 2024 17:08:41 +0930
Subject: [PATCH 15/29] feat(component): Auto-Expand Text area to content
 height style

ref: #27 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#388 closes #26
---
 src/index.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/index.css b/src/index.css
index 1fb0c100..5821ac04 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1349,6 +1349,11 @@ textarea#model-note {
   margin: 0px auto;
 }
 
+textarea.large {
+  width: 900px;
+}
+
+
 section .model-note div.single-note {
   background-color: var(--background-colour-active);
   border: 1px solid var(--border-colour);

From 8e9d5cac2a5538263aadddf295b65ea4e6b294f5 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Wed, 13 Nov 2024 17:55:02 +0930
Subject: [PATCH 16/29] feat(component): Format a charfield as hyperlink is
 metadata has `autolink=true`

ref: #26 #27 nofusscomputing/centurion_erp#248
---
 src/components/Table.jsx   | 11 +++++++++++
 src/functions/FieldData.js | 19 +++++++++++++++----
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/Table.jsx b/src/components/Table.jsx
index 7d0cd335..11915dd2 100644
--- a/src/components/Table.jsx
+++ b/src/components/Table.jsx
@@ -230,12 +230,23 @@ const Table = ({
 
                                                 } else {
 
+                                                    let autolink = false
+
+                                                    if(
+                                                        key == 'name'
+                                                        || key == 'title'
+                                                        || Boolean(metadata.fields[key].autolink)
+                                                    ) {
+                                                        autolink = true
+                                                    }
+
                                                     return (
                                                         <td>
                                                             <FieldData
                                                                 metadata={metadata}
                                                                 field_name={key}
                                                                 data={data}
+                                                                autolink = {autolink}
                                                             />
                                                         </td>
                                                     )
diff --git a/src/functions/FieldData.js b/src/functions/FieldData.js
index 48561da8..ed87ae38 100644
--- a/src/functions/FieldData.js
+++ b/src/functions/FieldData.js
@@ -18,6 +18,7 @@ const API_SPLIT = String('api/v2')
  * @param {Object} metadata  Django API HTTP/OPTION request body
  * @param {String} field_name name of the field. Must match the API field key
  * @param {Object} data The API request body.
+ * @param {Boolean} autolink Format the Field as a URL using `data._urls._self` as the anchor
  * 
  * @returns {String} The value of the field
  */
@@ -25,7 +26,8 @@ export default function FieldData({
     full_width = false,
     metadata,
     field_name,
-    data = null
+    data = null,
+    autolink = false
 })  {
 
     let field_data = '';
@@ -259,10 +261,19 @@ export default function FieldData({
 
                 if(
                     (
-                        field_name === 'name'
-                        || field_name === 'title'
+                        (
+                            field_name === 'name'
+                            || field_name === 'title'
+                        )
+                        && autolink
+                    )
+                    || (
+                        '_urls' in data
+                        && (
+                            autolink
+                            && Boolean(metadata.fields[field_name].autolink)
+                        )
                     )
-                    && '_urls' in data
                 ) {
 
                     field_data = (

From aead474dbe8c942dca02266e2cc81d36d3325382 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Wed, 13 Nov 2024 20:55:40 +0930
Subject: [PATCH 17/29] fix(layout): within form handle JSON data correctly
 when an object

ref: #26 #27 nofusscomputing/centurion_erp#248
---
 src/layout/ModelForm.jsx | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/layout/ModelForm.jsx b/src/layout/ModelForm.jsx
index 9d5199f0..06b689be 100644
--- a/src/layout/ModelForm.jsx
+++ b/src/layout/ModelForm.jsx
@@ -33,6 +33,8 @@ const ModelForm = ({
 
     const [form_error, setFormError] = useState(null)
 
+    const [form_post, setFormPost] = useState(false)
+
     const edit = Boolean(params.pk ? true : false )
 
     const navigate = useNavigate();
@@ -131,6 +133,25 @@ const ModelForm = ({
 
             }
 
+        } else if(
+            (
+                String(field_value).startsWith('{')
+                || String(field_value).startsWith('[')
+            )
+            && (
+                String(field_value).endsWith('}')
+                || String(field_value).endsWith(']')
+            )
+        ) {
+
+            try { // While the json is being edited, it may be invalid.
+
+                field_value = JSON.parse(e.target.value)
+
+            } catch {
+                // Do Nothing
+            }
+            
         }
         
         setFormData((prevState) => ({ ...prevState, [e.target.id]: field_value }))
@@ -161,21 +182,24 @@ const ModelForm = ({
                         form_data
                     )
 
+                    setFormPost(true)
+
                     if ( response.ok ) {
 
                         navigate(url_builder.return_url)
 
                     } else {
 
+                        setFormPost(false)
                         window.scrollTo(0, 0)
 
                     }
                 }}>
-                    { metadata && url_builder.params.action == 'delete' && 
+                    { !form_post && metadata && url_builder.params.action == 'delete' && 
                     <>
                     Are you sure you wish to delete this item?
                     </>}
-                    { ( metadata && params.action != 'delete' ) &&
+                    { ( !form_post && metadata && params.action != 'delete' ) &&
                     Object.keys(metadata.fields).map((field_key) => {
 
                         if( ! metadata.fields[field_key].read_only ) {
@@ -253,6 +277,8 @@ const ModelForm = ({
 
                                 case 'JSON':
 
+                                    value = JSON.stringify(value, null, 4)
+
                                     return (<TextArea
                                         id = {field_key}
                                         error_text = {form_error && form_error[field_key]}

From 39cde5dacd734b98fe0620e17a7b0efca346ea0c Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Wed, 13 Nov 2024 21:52:36 +0930
Subject: [PATCH 18/29] fix(layout): if field is dict, ensure initial data is
 correctly set to val of `.id`

ref: #26 #27 nofusscomputing/centurion_erp#248
---
 src/layout/ModelForm.jsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/layout/ModelForm.jsx b/src/layout/ModelForm.jsx
index 06b689be..17574b2f 100644
--- a/src/layout/ModelForm.jsx
+++ b/src/layout/ModelForm.jsx
@@ -60,7 +60,16 @@ const ModelForm = ({
 
                         if( data.fields[field_key].required ) {
                             if( page_data ) {
-                                initial_form_data[field_key] = page_data[field_key]
+
+                                if( typeof(page_data[field_key]) == 'object' ) {
+
+                                    initial_form_data[field_key] = Number(page_data[field_key].id)
+
+                                } else {
+
+                                    initial_form_data[field_key] = page_data[field_key]
+
+                                }
 
                             } else if( 'initial' in data.fields[field_key] ) {
                                  initial_form_data[field_key] = data.fields[field_key].initial

From a3ca37742ae6d8c68a95b3d45c0067538bd723ad Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Wed, 13 Nov 2024 23:31:54 +0930
Subject: [PATCH 19/29] fix(hook): dont allow fields to be set to `undefined`
 within urlBuilder

ref: #26 #27 nofusscomputing/centurion_erp#248
---
 src/hooks/urlBuilder.js | 44 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/hooks/urlBuilder.js b/src/hooks/urlBuilder.js
index 82c4516f..5adf6a1e 100644
--- a/src/hooks/urlBuilder.js
+++ b/src/hooks/urlBuilder.js
@@ -31,21 +31,47 @@ export default function urlBuilder(
 
     let path_directories = String(document.location.pathname).substring(1).split('/')
 
-    let action = params.action
+    let action = null
 
-    let module = params.module
+    let module = null
 
-    let model = params.model
+    let model = null
 
-    let pk = params.pk
+    let pk = null
 
     let common_model = null
     let common_pk = null
 
 
+    if( params.action ) {
+
+        action = params.action
+    }
+
     if( params.module ) {
 
-        url += '/' + String(params.module)
+        module = params.module
+    }
+
+    if( params.model ) {
+
+        model = params.model
+    }
+
+    if( params.pk ) {
+
+        pk = params.pk
+    }
+
+    if( ! module && path_directories[0] == 'settings' ) {
+
+        module = 'settings'
+
+    }
+
+    if( module ) {
+
+        url += '/' + String(module)
 
     }
 
@@ -224,7 +250,7 @@ export default function urlBuilder(
         
             }
 
-        }else if( action == 'edit' ) {
+        }else if( model && action == 'edit' ) {
 
             url += '/' + String( model )
 
@@ -258,7 +284,11 @@ export default function urlBuilder(
 
         method = 'DELETE'
 
-        return_url = String( return_url ).replace( '/' + pk )
+        if( pk ) {
+
+            return_url = String( return_url ).replace( '/' + pk )
+
+        }
 
     }else if( action ==  'edit' ) {
 

From 8bd7e6fc107d0588189d53c555731808fd6b2b40 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Wed, 13 Nov 2024 23:32:27 +0930
Subject: [PATCH 20/29] feat(layout): Use the url's as provided by API for
 models

ref: #26 #27 nofusscomputing/centurion_erp#248
---
 src/layout/Settings.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layout/Settings.jsx b/src/layout/Settings.jsx
index c90c8909..f2a1fe9f 100644
--- a/src/layout/Settings.jsx
+++ b/src/layout/Settings.jsx
@@ -56,7 +56,7 @@ const Settings = ({
                             body={(
                                 <ul>
                                     {card.links.map((link) => {
-                                        return (<li><a href={"/settings/" + link.model}>{link.name}</a></li>)
+                                        return (<li><Link to={String(page_data[link.model]).split('api/v2')[1]}>{link.name}</Link></li>)
                                     })}
                                 </ul>
                             )}

From 0c97232d4d7bd56b5346ff991731656032bf3b0b Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Thu, 14 Nov 2024 00:01:13 +0930
Subject: [PATCH 21/29] feat: Add route for common model that contains PK

ref: #26 #27 nofusscomputing/centurion_erp#248
---
 src/App.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/App.js b/src/App.js
index 3012bed2..d9f7b02d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -159,6 +159,15 @@ function App() {
                         loader = {detailsLoader}
                     />
 
+                    <Route path="/:module/:common_model/:common_pk/:model/:pk"
+                        element={<Detail
+                            setContentHeading={setContentHeading}
+                            SetContentHeaderIcon={SetContentHeaderIcon}
+                        />}
+                        errorElement={<ErrorPage /> }
+                        loader = {detailsLoader}
+                    />
+
                 </Route>
             ));
 

From 11baa26f1fb4aa3abeaab4414132ac8fc7e2b752 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Thu, 14 Nov 2024 15:54:38 +0930
Subject: [PATCH 22/29] fix: correct logic for history route to work

ref: #26 #28 nofusscomputing/centurion_erp#248 fixes #25
---
 .vscode/extensions.json  |  1 -
 src/App.js               |  3 +--
 src/components/Table.jsx |  2 +-
 src/hooks/urlBuilder.js  | 15 +++++++++++----
 src/layout/history.jsx   |  2 +-
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 95f7911b..0abfc0ef 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,7 +1,6 @@
 {
     "recommendations": [
         "orta.vscode-jest",
-        "eg2.vscode-npm-script",
         "burkeholland.simple-react-snippets"
     ]
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index d9f7b02d..b5fbdad9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -51,13 +51,12 @@ function App() {
                 >
                     <Route path='/login' element={<Login/>}/>
 
-                    <Route path="/core/:model/:pk/:action"
+                    <Route path="/core/:model/:pk/history"
                         element={<History
                             setContentHeading={setContentHeading}
                             SetContentHeaderIcon={SetContentHeaderIcon}
                         />}
                         errorElement={<ErrorPage /> }
-                        loader = {detailsLoader}
                     />
 
                     <Route path="/settings"
diff --git a/src/components/Table.jsx b/src/components/Table.jsx
index 11915dd2..fa85096e 100644
--- a/src/components/Table.jsx
+++ b/src/components/Table.jsx
@@ -261,7 +261,7 @@ const Table = ({
                                     <td
                                         onClick={(e) => {
                                             let a = e
-                                            document.getElementById('expandable-' + e.currentTarget.parentElement.id).classList.toggle("hide-expandable-row")
+                                            document.getElementById('expandable-' + data.id).classList.toggle("hide-expandable-row")
                                         }}
                                     >
                                         <IconLoader
diff --git a/src/hooks/urlBuilder.js b/src/hooks/urlBuilder.js
index 5adf6a1e..d615dfb8 100644
--- a/src/hooks/urlBuilder.js
+++ b/src/hooks/urlBuilder.js
@@ -63,9 +63,9 @@ export default function urlBuilder(
         pk = params.pk
     }
 
-    if( ! module && path_directories[0] == 'settings' ) {
+    if( ! module ) {
 
-        module = 'settings'
+        module = path_directories[0]
 
     }
 
@@ -75,12 +75,10 @@ export default function urlBuilder(
 
     }
 
-
     const allowed_actions = [ 'add', 'delete', 'edit' ]
 
     if( ! allowed_actions.includes( action ) ) {
 
-        action = null
 
         for( let dir of path_directories ) {
 
@@ -90,6 +88,12 @@ export default function urlBuilder(
         }
     }
 
+    if( ! action && path_directories[path_directories.length-1] == 'history' ) {
+
+        action = 'history'
+    }
+
+
     const ticket_models = [
         'change',
         'incident',
@@ -294,6 +298,9 @@ export default function urlBuilder(
 
         method = 'PATCH'
 
+    } else if( action === 'history' ) {
+
+        url += '/history'
     }
 
     if(
diff --git a/src/layout/history.jsx b/src/layout/history.jsx
index 6c0d84a9..fe08fd09 100644
--- a/src/layout/history.jsx
+++ b/src/layout/history.jsx
@@ -22,7 +22,7 @@ const History = ({
             <div className="content">
                 <Table
                     callback={setContentHeading}
-                    data_url_path={'core/' + url_builder.model + '/' + url_builder.pk + '/history'}
+                    data_url_path={'core/' + url_builder.params.model + '/' + url_builder.params.pk + '/history'}
                 />
             </div>
         </section>

From 77dc49d3b0c8f839e9ca51605942799f3a6aec02 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Thu, 14 Nov 2024 16:05:23 +0930
Subject: [PATCH 23/29] chore: Remove reply to icons no longer used

ref: #26 #28 nofusscomputing/centurion_erp#248
---
 src/components/page/ticket/TicketComment.jsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/page/ticket/TicketComment.jsx b/src/components/page/ticket/TicketComment.jsx
index 57cca210..53cbb9df 100644
--- a/src/components/page/ticket/TicketComment.jsx
+++ b/src/components/page/ticket/TicketComment.jsx
@@ -127,12 +127,6 @@ const TicketComment = ({
             <IconLoader
                 name={'reply'}
             />
-            <IconLoader
-                name={'task'}
-            />
-            <IconLoader
-                name={'notification'}
-            />
             <IconLoader
                 name={'edit'}
             />

From 2968b62908a9a4c77d86e6f5a84265e9c327fedd Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Fri, 15 Nov 2024 13:54:35 +0930
Subject: [PATCH 24/29] feat(component): Check for table data, if none report
 so

ref: #26 #27 nofusscomputing/centurion_erp#248
---
 src/components/Table.jsx               |  7 ++++++-
 src/components/page/detail/Section.jsx | 15 ++++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/Table.jsx b/src/components/Table.jsx
index fa85096e..076b9b8c 100644
--- a/src/components/Table.jsx
+++ b/src/components/Table.jsx
@@ -5,6 +5,7 @@ import FieldData from "../functions/FieldData";
 import TextField from "./form/Textfield";
 import { Link, useParams } from "react-router-dom";
 import IconLoader from "./IconLoader";
+import urlBuilder from "../hooks/urlBuilder";
 
 
 /**
@@ -40,6 +41,10 @@ const Table = ({
 
     const params = useParams();
 
+    const url_builder = urlBuilder(
+        params
+    )
+
     if( ! String(data_url_path).startsWith('/') ) {
         data_url_path = '/' + data_url_path
     }
@@ -47,7 +52,7 @@ const Table = ({
 
     if( String(window.location.pathname).includes('/ticket/') ) {
         
-        data_url_path = '/' + params.module + '/ticket/' + params.model
+        data_url_path = '/' + url_builder.params.module + '/ticket/' + url_builder.params.model
 
     }
 
diff --git a/src/components/page/detail/Section.jsx b/src/components/page/detail/Section.jsx
index b01d3c6d..8d44baf4 100644
--- a/src/components/page/detail/Section.jsx
+++ b/src/components/page/detail/Section.jsx
@@ -55,11 +55,16 @@ const Section = ({
 
     } else if( layout.layout === 'table' ) {
 
-        column = (
-            <Table
-                data_url_path={String(data._urls[layout.field]).split('api/v2')[1]}
-            />
-        )
+        if( layout.field in data._urls ) {
+
+            column = (
+                <Table
+                    data_url_path={String(data._urls[layout.field]).split('api/v2')[1]}
+                />
+            )
+        } else {
+            column = 'column data missing'
+        }
 
     }
 

From 5729206170495259d741c61484a1512ec85cab18 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Fri, 15 Nov 2024 13:54:55 +0930
Subject: [PATCH 25/29] feat: add add route for ticket

ref: #26 #27 nofusscomputing/centurion_erp#248
---
 src/App.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/App.js b/src/App.js
index b5fbdad9..355f0831 100644
--- a/src/App.js
+++ b/src/App.js
@@ -87,6 +87,15 @@ function App() {
                         loader = {detailsLoader}
                     />
 
+                    <Route path="/:module/ticket/:model/add"
+                        element={<ModelForm
+                            setContentHeading={setContentHeading}
+                            SetContentHeaderIcon={SetContentHeaderIcon}
+                        />}
+                        errorElement={<ErrorPage /> }
+                        loader = {detailsLoader}
+                    />
+
                     <Route path="/:module/ticket/:model/:pk"
                         element={<Ticket
                             setContentHeading={setContentHeading}

From 54fdcffb2559a68185e98f175ef4f216f798e601 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Fri, 15 Nov 2024 16:43:32 +0930
Subject: [PATCH 26/29] fix: Add missing route for project task add

ref: #26 #27 nofusscomputing/centurion_erp#248
---
 src/App.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/App.js b/src/App.js
index 355f0831..e5817daf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -77,6 +77,16 @@ function App() {
                         loader = {detailsLoader}
                     />
 
+                    {/* project_management/project/2/project_task/41 */}
+                    <Route path="/:module/:common_model/:common_pk/project_task/add"
+                        element={<ModelForm
+                            setContentHeading={setContentHeading}
+                            SetContentHeaderIcon={SetContentHeaderIcon}
+                        />}
+                        errorElement={<ErrorPage /> }
+                        loader = {detailsLoader}
+                    />
+
                     {/* project_management/project/2/project_task/41 */}
                     <Route path="/:module/:common_model/:common_pk/project_task/:pk"
                         element={<Ticket

From cc58aa9f7f370ec11bdc284e486dfb3acc1dce6f Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Fri, 15 Nov 2024 17:52:22 +0930
Subject: [PATCH 27/29] feat(component): Add ticket comment inline editing

ref: #26 #27 nofusscomputing/centurion_erp#248
---
 src/components/page/ticket/TicketComment.jsx  |  31 ++++-
 .../page/ticket/TicketCommentForm.jsx         | 107 ++++++++++++++++--
 src/components/page/ticket/TicketComments.jsx |   3 +
 3 files changed, 132 insertions(+), 9 deletions(-)

diff --git a/src/components/page/ticket/TicketComment.jsx b/src/components/page/ticket/TicketComment.jsx
index 53cbb9df..dd259e04 100644
--- a/src/components/page/ticket/TicketComment.jsx
+++ b/src/components/page/ticket/TicketComment.jsx
@@ -11,7 +11,10 @@ const TicketComment = ({
     discussion = false,
     comment_data = {},
     metadata = null,
-    ticket_id = null
+    ticket_id = null,
+    post_url,
+    edit_callback = null,
+    callback_value = null
 }) => {
 
     let comment_header = ' wrote'
@@ -20,6 +23,8 @@ const TicketComment = ({
 
     let comment_type = ''
 
+    let [ editing, setIsEditing ] = useState(false)
+
     try {
 
         comment_type = String(metadata.fields.comment_type.choices[Number(comment_data.comment_type)-1].display_name).toLowerCase()
@@ -127,9 +132,15 @@ const TicketComment = ({
             <IconLoader
                 name={'reply'}
             />
+            <span style={{
+                cursor: 'pointer'
+            }} onClick={(e) => {
+                    setIsEditing( true )
+                }}>
             <IconLoader
                 name={'edit'}
             />
+            </span>
         </div>
     )
 
@@ -145,6 +156,23 @@ const TicketComment = ({
     return (
         metadata &&
         <div className={discussion_class}>
+            { editing &&
+            <TicketCommentForm
+                comment_data={comment_data}
+                metadata={metadata}
+                post_url = {post_url}
+                ticket_id={ticket_id}
+                is_edit = {true}
+                cancelbuttonOnSubmit={(e) => {
+                    setIsEditing(false)
+                }}
+                commentCallback={() => {
+                    setIsEditing(false)
+                    edit_callback( callback_value ? false : true )
+                }}
+            />
+            }
+            { ! editing &&
             <div className={comment_class}>
 
                 <h4 className={comment_class}>
@@ -272,6 +300,7 @@ const TicketComment = ({
                     </fieldset>
                 </div>
             </div>
+            }
             { threads &&
             <div className="replies">
                 <h3 className="replies">
diff --git a/src/components/page/ticket/TicketCommentForm.jsx b/src/components/page/ticket/TicketCommentForm.jsx
index 5e4c09a6..093bdf8d 100644
--- a/src/components/page/ticket/TicketCommentForm.jsx
+++ b/src/components/page/ticket/TicketCommentForm.jsx
@@ -16,15 +16,83 @@ const TicketCommentForm = ({
     post_url = null,
     parent_id = null,
     ticket_id = null,
-    commentCallback = null
+    commentCallback = null,
+    is_edit = false,
+    cancelbuttonOnSubmit = null,
 }) => {
 
-        console.log(post_url)
+    if( String(post_url).includes('?') ) {
+        console.log('url has qs')
+        post_url = String(post_url).split('?')[0]
+    }
+
+    let HTTP_METHOD = 'POST'
+
+    if( is_edit ) {
+
+        post_url += '/' + comment_data['id']
+        HTTP_METHOD = 'PATCH'
+    }
+
     let comment_class = 'comment-type-default comment-form'
 
-    const [task_comment, setTaskComment] = useState(false)
 
-    const [form_data, setFormData] = useState({})
+    let edit_form_data = {}
+
+    if( comment_data && is_edit ) {
+
+        edit_form_data = {
+            'body': comment_data['body'],
+            'source': comment_data['source'],
+        }
+
+    }
+
+
+    const comment_types = metadata.fields['comment_type'].choices
+    let comment_type = ''
+
+    console.log(`menu entry click value ${comment_type}`)
+
+    for( let meta_comment_type of comment_types) {
+
+        if( Number(comment_data['comment_type']) === Number(meta_comment_type.value) ) {
+            comment_type = String(meta_comment_type.display_name).toLowerCase()
+        }
+
+    }
+
+
+    comment_type = String(comment_type).toLowerCase()
+
+    let is_task_comment = false
+
+    let is_solution_comment = false
+
+    let is_notification_comment = false
+
+
+    console.log(`menu entry is ${comment_type}`)
+
+    if( comment_type === 'task' ) {
+
+        is_task_comment = true
+
+    }else if( comment_type === 'solution' ) {
+
+        is_solution_comment = true
+
+    }else if( comment_type === 'notification' ) {
+
+        is_notification_comment = true
+
+    }
+
+
+
+    const [task_comment, setTaskComment] = useState( is_task_comment )
+
+    const [form_data, setFormData] = useState(edit_form_data)
 
     const handleChange = (e) => {
 
@@ -38,7 +106,7 @@ const TicketCommentForm = ({
 
         }
 
-        if( ! form_data.comment_type ) {
+        if( ! form_data.comment_type && ! is_edit ) {
 
             for( let comment_type of metadata.fields['comment_type'].choices) {
 
@@ -81,11 +149,17 @@ const TicketCommentForm = ({
                             const response = await apiFetch(
                                 post_url,
                                 setFormError,
-                                'POST',
+                                HTTP_METHOD,
                                 form_data
                             )
 
-                            if( response.status === 201 ) {
+                            if(
+                                response.status === 201
+                                || (
+                                    response.status === 200
+                                    && is_edit
+                                )
+                            ) {
 
                                 commentCallback();
                                 setFormData({});
@@ -103,6 +177,7 @@ const TicketCommentForm = ({
                                         id = 'source'
                                         field_data={metadata.fields['source']}
                                         onChange={handleChange}
+                                        value = {form_data['source']}
                                     />
                             </span>
                         </fieldset>
@@ -111,7 +186,7 @@ const TicketCommentForm = ({
                                 <Select
                                     id = 'status'
                                     field_data={metadata.fields['status']}
-                                    value={1}
+                                    value={comment_data['status']}
                                     onChange={handleChange}
                                 />
                             </span>
@@ -225,6 +300,20 @@ const TicketCommentForm = ({
 
                     </div>
 
+                    <div>
+                    { is_edit &&
+                    <Button
+                        buttonClickCallback={cancelbuttonOnSubmit}
+                        button_text = 'Cancel'
+                    />
+                    }
+                    { is_edit &&
+                     <Button
+                        button_text="Comment"
+                    />
+
+                    }
+                    { ! is_edit &&
                     <Button
                         button_text="Comment"
                         menu_entries={metadata.fields['comment_type'].choices}
@@ -270,6 +359,8 @@ const TicketCommentForm = ({
                             console.log(`menu entry click was set to ${task_comment}`)
                         } }
                     />
+                    }
+                    </div>
 
                 </Form>
             </div>
diff --git a/src/components/page/ticket/TicketComments.jsx b/src/components/page/ticket/TicketComments.jsx
index 504ccc54..61158c26 100644
--- a/src/components/page/ticket/TicketComments.jsx
+++ b/src/components/page/ticket/TicketComments.jsx
@@ -44,8 +44,11 @@ const TicketComments = ({
                         <li>
                             <TicketComment
                                 comment_data={comment}
+                                post_url = {comments_url}
                                 metadata={comment_metadata}
                                 ticket_id={ticket_id}
+                                edit_callback = {setRelaod}
+                                callback_value = {reload}
                             />
                         </li>
                     )

From cf4db04fb957b32606861e7cc0144f453ac76fee Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Fri, 15 Nov 2024 18:17:04 +0930
Subject: [PATCH 28/29] fix(layout): ensure all metadata is loaded prior to
 rendering a ticket

ref: #26 #27 nofusscomputing/centurion_erp#248
---
 src/layout/Ticket.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layout/Ticket.jsx b/src/layout/Ticket.jsx
index 4ea2d737..654a37f2 100644
--- a/src/layout/Ticket.jsx
+++ b/src/layout/Ticket.jsx
@@ -81,7 +81,7 @@ const Ticket = ({
             'OPTIONS'
         )
 
-    }, [])
+    }, [ page_data ])
 
 
     useEffect(() => {
@@ -103,7 +103,7 @@ const Ticket = ({
 
 
     return (
-        metadata !== null && <div className="ticket">
+        metadata && comment_metadata && page_data && <div className="ticket">
 
             <div className="contents">
 

From 210e8c456602433fa8360425d5464680d7d2de8e Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Fri, 15 Nov 2024 20:25:56 +0930
Subject: [PATCH 29/29] feat(component): Add missing navbar icons

ref: #26 #27 nofusscomputing/centurion_erp#248
---
 src/components/IconLoader.jsx                 | 20 ++++++++++++++++++-
 src/components/icons/AccessIcon.jsx           | 14 +++++++++++++
 src/components/icons/AnsibleIcon.jsx          | 14 +++++++++++++
 src/components/icons/ClusterIcon.jsx          | 14 +++++++++++++
 src/components/icons/ConfigManagementIcon.jsx | 14 +++++++++++++
 src/components/icons/ITIMIcon.jsx             | 14 +++++++++++++
 src/components/icons/InformationIcon.jsx      | 14 +++++++++++++
 src/components/icons/OrganizationIcon.jsx     |  8 ++++----
 src/components/icons/ProjectIcon.jsx          | 14 +++++++++++++
 src/components/icons/ServiceIcon.jsx          | 14 +++++++++++++
 src/components/icons/SettingsIcon.jsx         | 14 +++++++++++++
 src/components/page/Navbar.jsx                |  4 ++--
 12 files changed, 151 insertions(+), 7 deletions(-)
 create mode 100644 src/components/icons/AccessIcon.jsx
 create mode 100644 src/components/icons/AnsibleIcon.jsx
 create mode 100644 src/components/icons/ClusterIcon.jsx
 create mode 100644 src/components/icons/ConfigManagementIcon.jsx
 create mode 100644 src/components/icons/ITIMIcon.jsx
 create mode 100644 src/components/icons/InformationIcon.jsx
 create mode 100644 src/components/icons/ProjectIcon.jsx
 create mode 100644 src/components/icons/ServiceIcon.jsx
 create mode 100644 src/components/icons/SettingsIcon.jsx

diff --git a/src/components/IconLoader.jsx b/src/components/IconLoader.jsx
index fd3ef3f7..979c81ec 100644
--- a/src/components/IconLoader.jsx
+++ b/src/components/IconLoader.jsx
@@ -5,7 +5,6 @@ import ItamIcon from "./icons/ItamIcon";
 import MenuIcon from "./icons/MenuIcon";
 import NavDownIcon from "./icons/NavDownIcon";
 import NavRightIcon from "./icons/NavRightIcon";
-import OrganizationIcon from "./icons/OrganizationIcon";
 import SoftwareIcon from "./icons/SoftwareIcon";
 import ReplyIcon from "./icons/ReplyIcon";
 import NotificationIcon from "./icons/ticket/NotificationIcon";
@@ -36,13 +35,27 @@ import RelatedTicketBlocked from "./icons/ticket/RelatedTicketBlocked";
 import HelpIcon from "./icons/HelpIcon";
 import DeleteIcon from "./icons/DeleteIcon";
 import HistoryIcon from "./icons/HistoryIcon";
+import AccessIcon from "./icons/AccessIcon";
+import AnsibleIcon from "./icons/AnsibleIcon";
+import ClusterIcon from "./icons/ClusterIcon";
+import ConfigManagementIcon from "./icons/ConfigManagementIcon";
+import InformationIcon from "./icons/InformationIcon";
+import ITIMIcon from "./icons/ITIMIcon";
+import ServiceIcon from "./icons/ServiceIcon";
+import SettingsIcon from "./icons/SettingsIcon";
+import ProjectIcon from "./icons/ProjectIcon";
+import OrganizationIcon from "./icons/OrganizationIcon";
 
 
 const icon_components = {
+    access: AccessIcon,
     action_add:ActionAddIcon,
     action_install: ActionInstallIcon,
     action_remove: ActionRemoveIcon,
+    ansible: AnsibleIcon,
     assistance: AssistanceIcon,
+    cluster: ClusterIcon,
+    config_management: ConfigManagementIcon,
     device_status_bad: InventoryStatusBadIcon,
     device_status_ok: InventoryStatusOkIcon,
     device_status_unk: InventoryStatusUknIcon,
@@ -53,7 +66,9 @@ const icon_components = {
     edit: EditIcon,
     help: HelpIcon,
     history: HistoryIcon,
+    information: InformationIcon,
     itam: ItamIcon,
+    itim: ITIMIcon,
     link: LinkIcon,
     menu: MenuIcon,
     navdown: NavDownIcon,
@@ -61,7 +76,10 @@ const icon_components = {
     navright: NavRightIcon,
     notification: NotificationIcon,
     organization: OrganizationIcon,
+    project: ProjectIcon,
+    service: ServiceIcon,
     software: SoftwareIcon,
+    settings: SettingsIcon,
     task: TaskIcon,
     ticket_related_blocks: RelatedTicketBlocks,
     ticket_related_blocked_by: RelatedTicketBlocked,
diff --git a/src/components/icons/AccessIcon.jsx b/src/components/icons/AccessIcon.jsx
new file mode 100644
index 00000000..0e14a3aa
--- /dev/null
+++ b/src/components/icons/AccessIcon.jsx
@@ -0,0 +1,14 @@
+const AccessIcon = ({
+    width = '20px',
+    height = '20px',
+    fill = '#FFF'
+}) => {
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width={ width } height={ height } fill={ fill }>
+            <path d="M96-144v-648h384v144h384v504H96Zm72-72h240v-72H168v72Zm0-144h240v-72H168v72Zm0-144h240v-72H168v72Zm0-144h240v-72H168v72Zm312 432h312v-360H480v360Zm72-216v-72h168v72H552Zm0 144v-72h168v72H552Z"/>
+        </svg>
+    );
+}
+
+export default AccessIcon
\ No newline at end of file
diff --git a/src/components/icons/AnsibleIcon.jsx b/src/components/icons/AnsibleIcon.jsx
new file mode 100644
index 00000000..7880120a
--- /dev/null
+++ b/src/components/icons/AnsibleIcon.jsx
@@ -0,0 +1,14 @@
+const AnsibleIcon = ({
+    width = '20px',
+    height = '20px',
+    fill = '#FFF'
+}) => {
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={ width } height={ height } fill={ fill }>
+            <path d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2M16.1 17C15.91 17 15.76 16.9 15.55 16.73L10.39 12.56L8.66 16.9H7.17L11.54 6.39C11.65 6.11 11.89 5.97 12.17 5.97C12.45 5.97 12.67 6.11 12.79 6.39L16.77 15.97C16.81 16.08 16.84 16.19 16.84 16.26C16.83 16.68 16.5 17 16.1 17M12.17 8.11L14.76 14.5L10.85 11.42L12.17 8.11Z" />
+        </svg>
+    );
+}
+
+export default AnsibleIcon
\ No newline at end of file
diff --git a/src/components/icons/ClusterIcon.jsx b/src/components/icons/ClusterIcon.jsx
new file mode 100644
index 00000000..277b0289
--- /dev/null
+++ b/src/components/icons/ClusterIcon.jsx
@@ -0,0 +1,14 @@
+const ClusterIcon = ({
+    width = '20px',
+    height = '20px',
+    fill = '#FFF'
+}) => {
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={ width } height={ height } fill={ fill }>
+            <path d="M4,1C2.89,1 2,1.89 2,3V7C2,8.11 2.89,9 4,9H1V11H13V9H10C11.11,9 12,8.11 12,7V3C12,1.89 11.11,1 10,1H4M4,3H10V7H4V3M3,12V14H5V12H3M14,13C12.89,13 12,13.89 12,15V19C12,20.11 12.89,21 14,21H11V23H23V21H20C21.11,21 22,20.11 22,19V15C22,13.89 21.11,13 20,13H14M3,15V17H5V15H3M14,15H20V19H14V15M3,18V20H5V18H3M6,18V20H8V18H6M9,18V20H11V18H9Z" />
+        </svg>
+    );
+}
+
+export default ClusterIcon
\ No newline at end of file
diff --git a/src/components/icons/ConfigManagementIcon.jsx b/src/components/icons/ConfigManagementIcon.jsx
new file mode 100644
index 00000000..ea100bad
--- /dev/null
+++ b/src/components/icons/ConfigManagementIcon.jsx
@@ -0,0 +1,14 @@
+const ConfigManagementIcon = ({
+    width = '20px',
+    height = '20px',
+    fill = '#FFF'
+}) => {
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={ width } height={ height } fill={ fill }>
+            <path d="M8 17L12 13H15.2C15.6 14.2 16.7 15 18 15C19.7 15 21 13.7 21 12S19.7 9 18 9C16.7 9 15.6 9.8 15.2 11H12L8 7V3H3V8H6L10.2 12L6 16H3V21H8V17Z" />
+        </svg>
+    );
+}
+
+export default ConfigManagementIcon
\ No newline at end of file
diff --git a/src/components/icons/ITIMIcon.jsx b/src/components/icons/ITIMIcon.jsx
new file mode 100644
index 00000000..6ab94e8e
--- /dev/null
+++ b/src/components/icons/ITIMIcon.jsx
@@ -0,0 +1,14 @@
+const ITIMIcon = ({
+    width = '20px',
+    height = '20px',
+    fill = '#FFF'
+}) => {
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={ width } height={ height } fill={ fill }>
+            <path d="M2 4.6V9.4C2 10.3 2.5 11 3.2 11H20.9C21.5 11 22.1 10.3 22.1 9.4V4.6C22 3.7 21.5 3 20.8 3H3.2C2.5 3 2 3.7 2 4.6M10 8V6H9V8H10M5 8H7V6H5V8M20 9H4V5H20V9M2 14.6V19.4C2 20.3 2.5 21 3.2 21H20.9C21.5 21 22.1 20.3 22.1 19.4V14.6C22.1 13.7 21.6 13 20.9 13H3.2C2.5 13 2 13.7 2 14.6M10 18V16H9V18H10M5 18H7V16H5V18M20 19H4V15H20V19Z" />
+        </svg>
+    );
+}
+
+export default ITIMIcon
\ No newline at end of file
diff --git a/src/components/icons/InformationIcon.jsx b/src/components/icons/InformationIcon.jsx
new file mode 100644
index 00000000..36302533
--- /dev/null
+++ b/src/components/icons/InformationIcon.jsx
@@ -0,0 +1,14 @@
+const InformationIcon = ({
+    width = '20px',
+    height = '20px',
+    fill = '#FFF'
+}) => {
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width={ width } height={ height } fill={ fill }>
+            <path d="M480-60q-72-68-165-104t-195-36v-440q101 0 194 36.5T480-498q73-69 166-105.5T840-640v440q-103 0-195.5 36T480-60Zm0-104q63-47 134-75t146-37v-276q-73 13-143.5 52.5T480-394q-66-66-136.5-105.5T200-552v276q75 9 146 37t134 75Zm0-436q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm0-80q33 0 56.5-23.5T560-760q0-33-23.5-56.5T480-840q-33 0-56.5 23.5T400-760q0 33 23.5 56.5T480-680Zm0-80Zm0 366Z"/>
+        </svg>
+    );
+}
+
+export default InformationIcon
\ No newline at end of file
diff --git a/src/components/icons/OrganizationIcon.jsx b/src/components/icons/OrganizationIcon.jsx
index 5bbd5c65..b4f4db05 100644
--- a/src/components/icons/OrganizationIcon.jsx
+++ b/src/components/icons/OrganizationIcon.jsx
@@ -5,10 +5,10 @@ const OrganizationIcon = ({
 }) => {
 
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width={ width } height={ height } fill={ fill }>
-            <path d="M96-144v-648h384v144h384v504H96Zm72-72h240v-72H168v72Zm0-144h240v-72H168v72Zm0-144h240v-72H168v72Zm0-144h240v-72H168v72Zm312 432h312v-360H480v360Zm72-216v-72h168v72H552Zm0 144v-72h168v72H552Z"/>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={ width } height={ height } fill={ fill }>
+            <path d="M17,16H15V22H12V17H8V22H5V16H3L10,10L17,16M6,2L10,6H9V9H7V6H5V9H3V6H2L6,2M18,3L23,8H22V12H19V9H17V12H15.34L14,10.87V8H13L18,3Z" />
         </svg>
     );
 }
- 
-export default OrganizationIcon;
+
+export default OrganizationIcon
\ No newline at end of file
diff --git a/src/components/icons/ProjectIcon.jsx b/src/components/icons/ProjectIcon.jsx
new file mode 100644
index 00000000..58f63ea1
--- /dev/null
+++ b/src/components/icons/ProjectIcon.jsx
@@ -0,0 +1,14 @@
+const ProjectIcon = ({
+    width = '20px',
+    height = '20px',
+    fill = '#FFF'
+}) => {
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={ width } height={ height } fill={ fill }>
+            <path d="M2,5H10V2H12V22H10V18H6V15H10V13H4V10H10V8H2V5M14,5H17V8H14V5M14,10H19V13H14V10M14,15H22V18H14V15Z" />
+        </svg>
+    );
+}
+
+export default ProjectIcon
\ No newline at end of file
diff --git a/src/components/icons/ServiceIcon.jsx b/src/components/icons/ServiceIcon.jsx
new file mode 100644
index 00000000..bc108839
--- /dev/null
+++ b/src/components/icons/ServiceIcon.jsx
@@ -0,0 +1,14 @@
+const ServiceIcon = ({
+    width = '20px',
+    height = '20px',
+    fill = '#FFF'
+}) => {
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={ width } height={ height } fill={ fill }>
+            <path d="M21.7 18.6V17.6L22.8 16.8C22.9 16.7 23 16.6 22.9 16.5L21.9 14.8C21.9 14.7 21.7 14.7 21.6 14.7L20.4 15.2C20.1 15 19.8 14.8 19.5 14.7L19.3 13.4C19.3 13.3 19.2 13.2 19.1 13.2H17.1C16.9 13.2 16.8 13.3 16.8 13.4L16.6 14.7C16.3 14.9 16.1 15 15.8 15.2L14.6 14.7C14.5 14.7 14.4 14.7 14.3 14.8L13.3 16.5C13.3 16.6 13.3 16.7 13.4 16.8L14.5 17.6V18.6L13.4 19.4C13.3 19.5 13.2 19.6 13.3 19.7L14.3 21.4C14.4 21.5 14.5 21.5 14.6 21.5L15.8 21C16 21.2 16.3 21.4 16.6 21.5L16.8 22.8C16.9 22.9 17 23 17.1 23H19.1C19.2 23 19.3 22.9 19.3 22.8L19.5 21.5C19.8 21.3 20 21.2 20.3 21L21.5 21.4C21.6 21.4 21.7 21.4 21.8 21.3L22.8 19.6C22.9 19.5 22.9 19.4 22.8 19.4L21.7 18.6M18 19.5C17.2 19.5 16.5 18.8 16.5 18S17.2 16.5 18 16.5 19.5 17.2 19.5 18 18.8 19.5 18 19.5M12.3 22H3C1.9 22 1 21.1 1 20V4C1 2.9 1.9 2 3 2H21C22.1 2 23 2.9 23 4V13.1C22.4 12.5 21.7 12 21 11.7V6H3V20H11.3C11.5 20.7 11.8 21.4 12.3 22Z" />
+        </svg>
+    );
+}
+
+export default ServiceIcon
\ No newline at end of file
diff --git a/src/components/icons/SettingsIcon.jsx b/src/components/icons/SettingsIcon.jsx
new file mode 100644
index 00000000..49d96477
--- /dev/null
+++ b/src/components/icons/SettingsIcon.jsx
@@ -0,0 +1,14 @@
+const SettingsIcon = ({
+    width = '20px',
+    height = '20px',
+    fill = '#FFF'
+}) => {
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width={ width } height={ height } fill={ fill }>
+            <path d="m403-96-22-114q-23-9-44.5-21T296-259l-110 37-77-133 87-76q-2-12-3-24t-1-25q0-13 1-25t3-24l-87-76 77-133 110 37q19-16 40.5-28t44.5-21l22-114h154l22 114q23 9 44.5 21t40.5 28l110-37 77 133-87 76q2 12 3 24t1 25q0 13-1 25t-3 24l87 76-77 133-110-37q-19 16-40.5 28T579-210L557-96H403Zm59-72h36l19-99q38-7 71-26t57-48l96 32 18-30-76-67q6-17 9.5-35.5T696-480q0-20-3.5-38.5T683-554l76-67-18-30-96 32q-24-29-57-48t-71-26l-19-99h-36l-19 99q-38 7-71 26t-57 48l-96-32-18 30 76 67q-6 17-9.5 35.5T264-480q0 20 3.5 38.5T277-406l-76 67 18 30 96-32q24 29 57 48t71 26l19 99Zm18-168q60 0 102-42t42-102q0-60-42-102t-102-42q-60 0-102 42t-42 102q0 60 42 102t102 42Zm0-144Z"/>
+        </svg>
+    );
+}
+
+export default SettingsIcon
\ No newline at end of file
diff --git a/src/components/page/Navbar.jsx b/src/components/page/Navbar.jsx
index 84a7865e..ca7d3361 100644
--- a/src/components/page/Navbar.jsx
+++ b/src/components/page/Navbar.jsx
@@ -86,7 +86,7 @@ const Navbar = ({
                                         />
                                         : 
                                         <IconLoader
-                                            name = {String(module.display_name)}
+                                            name = {String(module.name)}
                                         />
                                     }
                                 </span>
@@ -122,7 +122,7 @@ const Navbar = ({
                                                 />
                                                 : 
                                                 <IconLoader
-                                                    name = {String(page.display_name)}
+                                                    name = {String(page.name)}
                                                 />
                                             }
                                             </span>