Added formatting for jobs lists and jobs detail components

src/components/molecules/jobs-detail-description/jobs-detail-description.molecule.jsx

@@ -0,0 +1,31 @@
+import { Descriptions, Skeleton } from "antd";
+import React from "react";
+import CurrencyFormatterAtom from "../../atoms/currency-formatter/currency-formatter.atom";
+import ErrorResultAtom from "../../atoms/error-result/error-result.atom";
+
+export default function JobsDetailDescriptionMolecule({ loading, job }) {
+  if (loading) return <Skeleton active />;
+
+  if (!job) return <ErrorResultAtom title="Error displaying job data." />;
+
+  return (
+    <div>
+      <Descriptions
+        title={`${job.clm_no}${job.ins_co_nm ? ` | ${job.ins_co_nm}` : ""}`}
+        bordered
+        layout="vertical"
+        column={{ xxl: 5, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
+      >
+        <Descriptions.Item label="Claim No.">{job.clm_no}</Descriptions.Item>
+        <Descriptions.Item label="Ins Co. Nm.">
+          {job.ins_co_nm}
+        </Descriptions.Item>
+        <Descriptions.Item label="Owner">{`${job.ownr_fn} ${job.ownr_ln}`}</Descriptions.Item>
+        <Descriptions.Item label="Vehicle">{`${job.v_model_yr} ${job.v_makedesc} ${job.v_model}`}</Descriptions.Item>
+        <Descriptions.Item label="Claim Total.">
+          <CurrencyFormatterAtom>{job.clm_total}</CurrencyFormatterAtom>
+        </Descriptions.Item>
+      </Descriptions>
+    </div>
+  );
+}

src/components/molecules/jobs-lines-table/jobs-lines-table.molecule.jsx

@@ -0,0 +1,73 @@
+import { Table } from "antd";
+import React from "react";
+import CurrencyFormatterAtom from "../../atoms/currency-formatter/currency-formatter.atom";
+
+export default function JobLinesTableMolecule({ loading, jobLines }) {
+  const columns = [
+    {
+      title: "#",
+      dataIndex: "unq_seq",
+      key: "unq_seq",
+    },
+    {
+      title: "S#",
+      dataIndex: "line_ind",
+      key: "line_ind",
+    },
+    {
+      title: "Line Description",
+      dataIndex: "line_desc",
+      key: "line_desc",
+    },
+    {
+      title: "Part Type",
+      dataIndex: "part_type",
+      key: "part_type",
+    },
+    {
+      title: "Part Number",
+      dataIndex: "oem_partno",
+      key: "oem_partno",
+    },
+    {
+      title: "Database Price",
+      dataIndex: "db_price",
+      key: "db_price",
+
+      render: (text, record) => (
+        <CurrencyFormatterAtom>{record.db_price}</CurrencyFormatterAtom>
+      ),
+    },
+    {
+      title: "Actual Price",
+      dataIndex: "act_price",
+      key: "act_price",
+
+      render: (text, record) => (
+        <CurrencyFormatterAtom>{record.act_price}</CurrencyFormatterAtom>
+      ),
+    },
+    {
+      title: "Qty.",
+      dataIndex: "part_qty",
+      key: "part_qty",
+    },
+  ];
+
+  return (
+    <div>
+      <Table
+        columns={columns}
+        rowKey="id"
+        loading={loading}
+        size="small"
+        pagination={false}
+        dataSource={jobLines}
+        scroll={{
+          x: true,
+          //y: "40rem"
+        }}
+      />
+    </div>
+  );
+}