Updated UI and added tech elements.

client/src/components/time-ticket-task-modal/time-ticket-task-modal.component.jsx

@@ -34,7 +34,12 @@ export function TimeTicketTaskModalComponent({
   form,
   loading,
   completedTasks,
+  unassignedHours,
 }) {
+  console.log(
+    "🚀 ~ file: time-ticket-task-modal.component.jsx:39 ~ unassignedHours:",
+    unassignedHours
+  );
   const { t } = useTranslation();
 
   return (
@@ -80,7 +85,7 @@ export function TimeTicketTaskModalComponent({
 
                 if (!task) return null;
                 return (
-                  <table className="bill-inventory-table">
+                  <table className="task-tickets-table">
                     <tbody>
                       <tr>
                         <td>{t("bodyshop.fields.md_tasks_presets.percent")}</td>
@@ -116,7 +121,7 @@ export function TimeTicketTaskModalComponent({
                     <Typography.Title level={4}>
                       {t("timetickets.labels.claimtaskpreview")}
                     </Typography.Title>
-                    <table className="bill-cm-returns-table">
+                    <table className="task-tickets-table">
                       <thead>
                         <tr>
                           <th>{t("timetickets.fields.employee")}</th>
@@ -173,6 +178,14 @@ export function TimeTicketTaskModalComponent({
               }}
             </Form.List>
           )}
+          {unassignedHours > 0 && (
+            <Alert
+              type="error"
+              message={t("timetickets.validation.unassignedlines", {
+                unassignedHours: unassignedHours,
+              })}
+            />
+          )}
         </Col>
       </Row>
 

client/src/components/time-ticket-task-modal/time-ticket-task-modal.container.jsx

@@ -11,6 +11,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import TimeTicketTaskModalComponent from "./time-ticket-task-modal.component";
 import { useApolloClient } from "@apollo/client";
 import { QUERY_COMPLETED_TASKS } from "../../graphql/jobs.queries";
+import "./time-ticket-task-modal.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   timeTicketTasksModal: selectTimeTicketTasks,
@@ -32,6 +33,7 @@ export function TimeTickeTaskModalContainer({
   const [form] = Form.useForm();
   const { context, visible } = timeTicketTasksModal;
   const [completedTasks, setCompletedTasks] = useState([]);
+  const [unassignedHours, setUnassignedHours] = useState(0);
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const client = useApolloClient();
@@ -83,7 +85,8 @@ export function TimeTickeTaskModalContainer({
         //Close the modal
         toggleModalVisible();
       } else if (handleFinish === false) {
-        form.setFieldsValue({ timetickets: data });
+        form.setFieldsValue({ timetickets: data.ticketsToInsert });
+        setUnassignedHours(data.unassignedHours);
       } else {
         notification.open({
           type: "error",
@@ -125,6 +128,7 @@ export function TimeTickeTaskModalContainer({
           form={form}
           loading={loading}
           completedTasks={completedTasks}
+          unassignedHours={unassignedHours}
         />
       </Form>
     </Modal>

client/src/components/time-ticket-task-modal/time-ticket-task-modal.styles.scss

@@ -0,0 +1,19 @@
+.task-tickets-table {
+  table-layout: fixed;
+  width: 100%;
+
+  th,
+  td {
+    padding: 8px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+
+    .ant-form-item {
+      margin-bottom: 0px !important;
+    }
+  }
+
+  tr:hover {
+    background-color: #f5f5f5;
+  }
+}