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>