Billing and Invoice Hi Fi Update

ubclaunchpad · Jun 27, 2023 · 5ea7ecf · 5ea7ecf
1 parent 7799a4e
commit 5ea7ecf
Show file tree

Hide file tree

Showing 17 changed files with 364 additions and 297 deletions.
diff --git a/frontend/src/components/GenerateInvoice/InvoiceTemplate/index.js b/frontend/src/components/GenerateInvoice/InvoiceTemplate/index.js
@@ -158,7 +158,7 @@ function InvoiceDetails({ billingData }) {
                     {index + 1}. {invoiceItem.name}
                   </td>
                   <td>{invoiceItem.quantity}</td>
-                  <td>${invoiceItem.cost / invoiceItem.quantity}</td>
+                  <td>${(invoiceItem.cost / invoiceItem.quantity).toFixed(2)}</td>
                   <td>${invoiceItem.cost}</td>
                 </tr>
               );
@@ -176,11 +176,11 @@ function InvoiceDetails({ billingData }) {
             </tr>
             <tr className="item">
               <td>Total Tax:</td>
-              <td>${0.12 * subtotal}</td>
+              <td>${(0.12 * subtotal).toFixed(2)}</td>
             </tr>
             <tr className="item">
               <td>Total Due:</td>
-              <td className="last">${subtotal + 0.12 * subtotal}</td>
+              <td className="last">${(subtotal + 0.12 * subtotal).toFixed(2)}</td>
             </tr>
             <tr className="item total">
               <td>Amount Paid:</td>

diff --git a/frontend/src/components/GenerateInvoice/index.js b/frontend/src/components/GenerateInvoice/index.js
@@ -3,7 +3,7 @@ import { NavLink } from "react-router-dom";
 function GenerateInvoice() {
   return (
     <NavLink to="/pdf">
-      <div className="GeneratePdfButton">Generate Invoice</div>
+      <div className="GenerateInvoice">Generate Invoice</div>
     </NavLink>
   );
 }

diff --git a/frontend/src/components/GeneratePdf/index.css b/frontend/src/components/GeneratePdf/index.css
@@ -12,5 +12,29 @@
   margin-top: 30px;
   border-radius: 10px;
   cursor: pointer;
-  width:100%;
+  width: 180px;
+  align-self: center;
 }
+
+.GenerateInvoice {
+  display: flex;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 600;
+  background-color: #8A9DF8;
+  color: #ffffff;
+  padding: 10px;
+  padding-left: 20px;
+  padding-right: 20px;
+  margin-bottom: 20px;
+  margin-top: 30px;
+  border-radius: 10px;
+  cursor: pointer;
+  width: 100%;
+}
+
+.GeneratePDFView {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/frontend/src/components/GeneratePdf/index.js b/frontend/src/components/GeneratePdf/index.js
@@ -19,8 +19,10 @@ const GeneratePdf = ({ htmlElementRef }) => {
     });
   };
   return (
-    <div className="GeneratePdfButton" onClick={generatePdfHandler}>
-      Generate PDF
+    <div className="GeneratePDFView">
+      <div className="GeneratePdfButton" onClick={generatePdfHandler}>
+        Generate PDF
+      </div>
     </div>
   );
 };

diff --git a/frontend/src/components/InvoiceTable/index.css b/frontend/src/components/InvoiceTable/index.css
@@ -9,16 +9,31 @@
 
 .invoiceTable {
   margin-top: 30px;
+  margin-bottom: 80px;
 }
 
 .invoiceTable .editable-row-dark {
   background-color: #F6F6F6;
 }
 
+.invoiceTable .ant-table-tbody > tr.ant-table-row-selected td {
+  background-color: #CAD3FF !important;
+}
+
+.invoiceTable .ant-table-selection-column {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
 .invoiceTable .ant-table-container {
   border: none;
 }
 
+.subtaskInvoiceLabel {
+  font-size: 12px;
+  color: #627BF6;
+}
+
 .addService {
   display: flex;
   align-items: center;
@@ -97,5 +112,5 @@ So try and beat it with CSS specificity */
 }
 
 .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>thead>tr>th{
-border-right: none;
+  border-right: none;
 }
diff --git a/frontend/src/components/InvoiceTable/index.js b/frontend/src/components/InvoiceTable/index.js
@@ -19,7 +19,10 @@ const InvoiceTable = () => {
       editable: false,
       render: (_, record) =>
         dataSource.length >= 1 ? (
-          <div>SOW-{record.task_id ?? record.fk_task_id ?? record.task_uuid}</div>
+          <div>
+            <div>SOW-{record.task_id ?? record.fk_task_id ?? record.task_uuid}</div>
+            {record.subtask_id ? <span className="subtaskInvoiceLabel">Subtask-{record.subtask_id}</span> : null}
+          </div>
         ) : null,
       sorter: (a, b) => (a.task_id ?? a.fk_task_id ?? 0) - (b.task_id ?? b.fk_task_id ?? 0)
     },
@@ -31,8 +34,8 @@ const InvoiceTable = () => {
     },
     {
       title: "Project",
-      dataIndex: "billable_id",
-      key: "billable_id",
+      dataIndex: "fk_project_id",
+      key: "fk_project_id",
       editable: false,
     },
     {

diff --git a/frontend/src/components/InvoiceTotal/index.css b/frontend/src/components/InvoiceTotal/index.css
@@ -4,14 +4,15 @@
   align-items: center;
   background-color: #f5f5f5;
   border-radius: 10px;
-  height: 73px;
+  height: 70px;
   width: 100%;
   padding: 0 1rem;
 }
 
 .invoice-total-container {
   display: flex;
-  margin: 0 1rem;
+  align-items: center;
+  margin: 0 2rem;
   justify-content: space-between;
   align-items: center;
   width: 100%;
@@ -25,4 +26,11 @@
   font-size: 1.8em;
   font-weight: 700;
   font-style: bold;
+  margin-right: 5px;
+}
+
+.TotalStat {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/frontend/src/components/InvoiceTotal/index.js b/frontend/src/components/InvoiceTotal/index.js
@@ -22,40 +22,43 @@ const InvoiceTotal = () => {
   return (
     <div className="InvoiceTotal">
       <div className="invoice-total-container">
-        <div className="TotalServices"
-                onClick={() => {
-                  dispatch({ type: SET_ACTIVE_ANALYTICS });
-                  dispatch({
-                    type: UPDATE_CLICKS,
-                    payload: {
-                      component_name: "services_chart"
-                    },
-                  });
-               }}>
-          <span className="total-number" >{totalServices}</span> Total Services
+        <div className="TotalStat"
+          onClick={() => {
+            dispatch({ type: SET_ACTIVE_ANALYTICS });
+            dispatch({
+              type: UPDATE_CLICKS,
+              payload: {
+                component_name: "services_chart"
+              },
+            });
+          }}>
+          <span className="total-number">
+            {totalServices}
+          </span>
+          Total Services
         </div>
-        <div className="TotalSows"
-                onClick={() => {
-                  dispatch({ type: SET_ACTIVE_SOW_ANALYTICS });
-                  dispatch({
-                    type: UPDATE_CLICKS,
-                    payload: {
-                      component_name: "sow_chart"
-                    },
-                  });
-                }}>
+        <div className="TotalStat"
+          onClick={() => {
+            dispatch({ type: SET_ACTIVE_SOW_ANALYTICS });
+            dispatch({
+              type: UPDATE_CLICKS,
+              payload: {
+                component_name: "sow_chart"
+              },
+            });
+          }}>
           <span className="total-number">{Object.keys(sowMap).length}</span> Total SOWs
         </div>
-        <div className="TotalProjects"
-                onClick={() => {
-                  dispatch({ type: SET_ACTIVE_PROJECT_ANALYTICS });
-                  dispatch({
-                    type: UPDATE_CLICKS,
-                    payload: {
-                      component_name: "projects_chart"
-                    },
-                  });
-               }}>
+        <div className="TotalStat"
+          onClick={() => {
+            dispatch({ type: SET_ACTIVE_PROJECT_ANALYTICS });
+            dispatch({
+              type: UPDATE_CLICKS,
+              payload: {
+                component_name: "projects_chart"
+              },
+            });
+          }}>
           <span className="total-number">{Object.keys(projectMap).length}</span> Total Projects
         </div>
       </div>

diff --git a/frontend/src/components/ProjectTable/index.js b/frontend/src/components/ProjectTable/index.js
@@ -37,7 +37,7 @@ const ProjectTable = () => {
       render: (_, record) =>
         dataSource.length >= 1 ? (
           <Select
-            mode="multiple"
+            mode={null}
             allowClear
             style={{ width: "100%" }}
             placeholder="Please select"
@@ -48,7 +48,8 @@ const ProjectTable = () => {
                 value: costcenter.cost_center_id,
               };
             })}
-            onChange={(newList) => {
+            onChange={(selection) => {
+              const newList = [selection];
               dispatch({
                 type: UPDATE_PROJECT_ASSIGNMENT,
                 payload: {