Updated UI and added tech elements.

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>