IO-1706 Payroll Table

client/src/pages/time-tickets/time-tickets.container.jsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Col, Row } from "antd";
+import { Col, Row, Space } from "antd";
 import moment from "moment";
 import queryString from "query-string";
 import React, { useEffect } from "react";
@@ -11,6 +11,7 @@ import AlertComponent from "../../components/alert/alert.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import TimeTicketsDatesSelector from "../../components/ticket-tickets-dates-selector/time-tickets-dates-selector.component";
 import TimeTicketList from "../../components/time-ticket-list/time-ticket-list.component";
+import TimeTicketsPayrollTable from "../../components/time-tickets-payroll-table/time-tickets-payroll-table.component";
 import TimeTicketsSummaryEmployees from "../../components/time-tickets-summary-employees/time-tickets-summary-employees.component";
 import { QUERY_TIME_TICKETS_IN_RANGE } from "../../graphql/timetickets.queries";
 import {
@@ -68,7 +69,12 @@ export function TimeTicketsContainer({
           <TimeTicketList
             loading={loading}
             timetickets={data ? data.timetickets : []}
-            extra={<TimeTicketsDatesSelector />}
+            extra={
+              <Space wrap>
+                <TimeTicketsPayrollTable />
+                <TimeTicketsDatesSelector />
+              </Space>
+            }
           />
         </Col>
         <Col span={24}>