- Rough in front end / backend

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/job-lifecycle/job-lifecycle.component.jsx

@@ -0,0 +1,77 @@
+import {createStructuredSelector} from "reselect";
+import {selectBodyshop} from "../../redux/user/user.selectors";
+import {connect} from "react-redux";
+import {useEffect, useState} from "react";
+import axios from "axios";
+import {Card, Space, Table, Timeline} from "antd";
+
+const mapStateToProps = createStructuredSelector({
+    bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+    //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function JobLifecycleComponent({bodyshop, job, ...rest}) {
+    const [loading, setLoading] = useState(false);
+    const [lifecycleData, setLifecycleData] = useState(null);
+
+
+    useEffect(() => {
+        async function getLifecycleData() {
+            if (job && job.id) {
+                setLoading(true);
+                const response = await axios.post("/job/lifecycle", {
+                    jobids: job.id,
+                });
+                console.dir(response.data.data.transitions, {depth: null});
+                setLifecycleData(response.data.data.transitions);
+                setLoading(false);
+            }
+        }
+
+        getLifecycleData().catch((err) => {
+            console.log(`Something went wrong getting Job Lifecycle Data: ${err.message}`);
+            setLoading(false);
+        });
+    }, [job]);
+
+    const columnKeys = [
+        'start',
+        'end',
+        'value',
+        'prev_value',
+        'next_value',
+        'duration',
+        'type',
+        'created_at',
+        'updated_at'
+    ];
+
+    const columns = columnKeys.map(key => ({
+        title: key.charAt(0).toUpperCase() + key.slice(1), // Capitalize the first letter for the title
+        dataIndex: key,
+        key: key,
+    }));
+
+    return (
+        <Card loading={loading} title='Job Lifecycle Component'>
+            <Space direction='vertical' style={{width: '100%'}}>
+                <Card type='inner' title='Table Format'>
+                    <Table loading={loading} columns={columns} dataSource={lifecycleData} />
+                </Card>
+                <Card type='inner' title='Timeline Format'>
+                    <Timeline loading={loading}>
+                        {lifecycleData.map((item, index) => (
+                            <Timeline.Item key={index} color={item.value === 'Open' ? 'green' : item.value === 'Scheduled' ? 'yellow' : 'red'}>
+                                {item.value} - {new Date(item.start).toLocaleString()}
+                            </Timeline.Item>
+                        ))}
+                    </Timeline>
+                </Card>
+            </Space>
+        </Card>
+    );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(JobLifecycleComponent);