Progress

client/src/components/header/header.component.jsx

@@ -30,7 +30,13 @@ import { Layout, Menu, Switch, Tooltip } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BsKanban } from 'react-icons/bs';
-import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar } from 'react-icons/fa';
+import {
+  FaCalendarAlt,
+  FaCarCrash,
+  FaCreditCard,
+  FaFileInvoiceDollar,
+  FaTasks
+} from 'react-icons/fa';
 import { GiPayMoney, GiPlayerTime, GiSettingsKnobs } from 'react-icons/gi';
 import { IoBusinessOutline } from 'react-icons/io5';
 import { RiSurveyLine } from 'react-icons/ri';
@@ -329,9 +335,6 @@ function Header({
           icon: <FileAddOutlined />,
           label: <Link to="/manage/jobs/new">{t('menus.header.newjob')}</Link>,
         },
-        {
-          type: 'divider',
-        },
         {
           key: 'alljobs',
           icon: <UnorderedListOutlined />,
@@ -463,6 +466,12 @@ function Header({
           },
         ]
       : []),
+    {
+      key: 'tasks',
+      id: 'tasks',
+      icon: <FaTasks />,
+      label: <Link to="/manage/tasks">{t('menus.header.tasks')}</Link>,
+    },
     {
       key: 'shopsubmenu',
       icon: <SettingOutlined />,

client/src/components/task-list/task-list.component.jsx

@@ -0,0 +1,133 @@
+import {SyncOutlined} from "@ant-design/icons";
+import {Button, Card, Input, Space, Table, Typography} from "antd";
+import queryString from "query-string";
+import React, {useState} from "react";
+import {useTranslation} from "react-i18next";
+import {useLocation, useNavigate} from "react-router-dom";
+import {pageLimit} from "../../utils/config";
+
+export default function TaskListComponent({
+                                            loading,
+                                            tasks,
+                                            total,
+                                            refetch,
+                                          }) {
+  const search = queryString.parse(useLocation().search);
+  const {
+    page,
+    // sortcolumn, sortorder
+  } = search;
+  const history = useNavigate();
+
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: {text: ""},
+  });
+
+  const {t} = useTranslation();
+
+  const columns = [
+    {
+      title: t("tasks.fields.title"),
+      dataIndex: "title",
+      key: "title",
+    },
+    {
+      title: t("tasks.fields.description"),
+      dataIndex: "description",
+      key: "description",
+    },
+    {
+      title: t("tasks.fields.due_date"),
+      dataIndex: "due_date",
+      key: "due_date",
+    },
+    {
+      title: t("tasks.fields.assigned_to"),
+      dataIndex: "assigned_to",
+      key: "assigned_to",
+    },
+    {
+      title: t("tasks.fields.completed"),
+      dataIndex: "completed",
+      key: "completed",
+    },
+    {
+      title: t("tasks.fields.completed_at"),
+      dataIndex: "completed_at",
+      key: "completed_at",
+    },
+    {
+      title: t("tasks.fields.remind_at"),
+      dataIndex: "remind_at",
+      key: "remind_at",
+    },
+    {
+      title: t("tasks.fields.priority"),
+      dataIndex: "priority",
+      key: "priority",
+    },
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({...state, filteredInfo: filters, sortedInfo: sorter});
+    search.page = pagination.current;
+    search.sortcolumn = sorter.columnKey;
+    search.sortorder = sorter.order;
+    history({search: queryString.stringify(search)});
+  };
+  return (
+    <Card
+      title={t("menus.header.tasks")}
+      extra={
+        <Space wrap>
+          {search.search && (
+            <>
+              <Typography.Title level={4}>
+                {t("general.labels.searchresults", {search: search.search})}
+              </Typography.Title>
+              <Button
+                onClick={() => {
+                  delete search.search;
+                  history({search: queryString.stringify(search)});
+                }}
+              >
+                {t("general.actions.clear")}
+              </Button>
+            </>
+          )}
+          <Button onClick={() => refetch()}>
+            <SyncOutlined/>
+          </Button>
+          <Input.Search
+            placeholder={search.search || t("general.labels.search")}
+            onSearch={(value) => {
+              if (value?.length >= 3) {
+                search.search = value;
+              } else {
+                delete search.search;
+              }
+              history({search: queryString.stringify(search)});
+            }}
+            enterButton
+          />
+        </Space>
+      }
+    >
+      <Table
+        loading={loading}
+        pagination={{
+          position: "top",
+          pageSize: pageLimit,
+          current: parseInt(page || 1),
+          total: total,
+        }}
+        columns={columns}
+        rowKey="id"
+        scroll={{x: true}}
+        dataSource={tasks}
+        onChange={handleTableChange}
+      />
+    </Card>
+  );
+}

client/src/components/task-list/task-list.container.jsx

@@ -0,0 +1,44 @@
+import queryString from "query-string";
+import {useLocation} from "react-router-dom";
+import {useQuery} from "@apollo/client";
+import {QUERY_ALL_TASKS_PAGINATED} from "../../graphql/tasks.queries.js";
+import {pageLimit} from "../../utils/config.js";
+import AlertComponent from "../alert/alert.component.jsx";
+import React from "react";
+import TaskListComponent from "./task-list.component.jsx";
+
+export default function TaskListContainer() {
+  const searchParams = queryString.parse(useLocation().search);
+  const {page, sortcolumn, sortorder, search} = searchParams;
+  const {loading, error, data, refetch} = useQuery(
+    QUERY_ALL_TASKS_PAGINATED,
+    {
+      fetchPolicy: "network-only",
+      nextFetchPolicy: "network-only",
+      variables: {
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
+        order: [
+          {
+            [sortcolumn || "created_at"]: sortorder
+              ? sortorder === "descend"
+                ? "desc"
+                : "asc"
+              : "desc",
+          },
+        ],
+      },
+    }
+  );
+
+  if (error) return <AlertComponent message={error.message} type="error"/>;
+  
+  return (
+    <TaskListComponent
+      loading={loading}
+      tasks={data ? data.tasks : null}
+      total={data ? data.tasks_aggregate.aggregate.count : 0}
+      refetch={refetch}
+    />
+  );
+}

client/src/graphql/bodyshop.queries.js

@@ -160,6 +160,25 @@ export const QUERY_BODYSHOP = gql`
                 external_id
                 flat_rate
             }
+          tasks {
+            id
+            created_at
+            updated_at
+            title
+            description
+            deleted
+            deleted_at
+            due_date
+            created_by
+            assigned_to
+            completed
+            completed_at
+            remind_at
+            priority
+            jobid
+            joblineid
+            partsorderid
+          }
         }
     }
 `;

client/src/graphql/tasks.queries.js

@@ -0,0 +1,39 @@
+import {gql} from "@apollo/client";
+
+export const QUERY_ALL_TASKS_PAGINATED = gql`
+  query QUERY_ALL_TASKS_PAGINATED(
+    $offset: Int
+    $limit: Int
+    $order: [tasks_order_by!]!
+  ) {
+    tasks(
+      offset: $offset
+      limit: $limit
+      order_by: $order
+    ) {
+      id
+      created_at
+      updated_at
+      title
+      description
+      deleted
+      deleted_at
+      due_date
+      created_by
+      assigned_to
+      completed
+      completed_at
+      remind_at
+      priority
+      jobid
+      joblineid
+      partsorderid
+      billid
+    }
+    tasks_aggregate(args: {}) {
+      aggregate {
+        count(distinct: true)
+      }
+    }
+  }
+`;

client/src/pages/manage/manage.page.component.jsx

@@ -1,10 +1,10 @@
-import { FloatButton, Layout, Spin } from "antd";
+import {FloatButton, Layout, Spin} from "antd";
 // import preval from "preval.macro";
-import React, { lazy, Suspense, useEffect, useState } from "react";
+import React, {lazy, Suspense, useEffect, useState} from "react";
-import { useTranslation } from "react-i18next";
+import {useTranslation} from "react-i18next";
-import { connect } from "react-redux";
+import {connect} from "react-redux";
-import { Link, Route, Routes } from "react-router-dom";
+import {Link, Route, Routes} from "react-router-dom";
-import { createStructuredSelector } from "reselect";
+import {createStructuredSelector} from "reselect";
 import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component";
 import ChatAffixContainer from "../../components/chat-affix/chat-affix.container";
 import ConflictComponent from "../../components/conflict/conflict.component";
@@ -17,14 +17,18 @@ import TestComponent from "../../components/_test/test.page";
 import HeaderContainer from "../../components/header/header.container";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import PartnerPingComponent from "../../components/partner-ping/partner-ping.component";
-import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
+import PrintCenterModalContainer
+  from "../../components/print-center-modal/print-center-modal.container";
 import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
-import { requestForToken } from "../../firebase/firebase.utils";
+import {requestForToken} from "../../firebase/firebase.utils";
-import { selectBodyshop, selectInstanceConflict, } from "../../redux/user/user.selectors";
+import {selectBodyshop, selectInstanceConflict,} from "../../redux/user/user.selectors";
 
 import UpdateAlert from "../../components/update-alert/update-alert.component";
-import { setJoyRideFinished } from "../../redux/application/application.actions.js";
+import {setJoyRideFinished} from "../../redux/application/application.actions.js";
-import { selectEnableJoyRide, selectJoyRideSteps } from "../../redux/application/application.selectors.js";
+import {
+  selectEnableJoyRide,
+  selectJoyRideSteps
+} from "../../redux/application/application.selectors.js";
 import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
 import "./manage.page.styles.scss";
 
@@ -180,6 +184,10 @@ const TtApprovals = lazy(() =>
     import("../tt-approvals/tt-approvals.page.container")
 );
 
+const TasksPage = lazy(() =>
+  import("../tasks/tasks.page.container")
+);
+
 const {Content, Footer} = Layout;
 
 
@@ -286,7 +294,15 @@ export function Manage({conflict, bodyshop,enableJoyRide,joyRideSteps,setJoyRide
                 <Route path='/temporarydocs/' element={<Suspense fallback={<Spin/>}>
                  <TempDocs/>
                 </Suspense>}/>
+                {/*Start Task Routes */}
                 <Route
+                  path='/tasks'
+                  element={   <Suspense fallback={<Spin/>}>
+                    <TasksPage/>
+                  </Suspense>}
+                />
+              {/*End Task Routes */}
+              <Route
                     path='/inventory/'
                     element={<Suspense fallback={<Spin/>}>
                  <InventoryListPage/>

client/src/pages/tasks/tasks.page.component.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import TaskListContainer from "../../components/task-list/task-list.container.jsx";
+
+export default function TasksPageComponent({bodyshop, currentUser}) {
+
+  return (
+    <div>
+      <TaskListContainer />
+    </div>
+  );
+}

client/src/pages/tasks/tasks.page.container.jsx

@@ -0,0 +1,47 @@
+import React, {useEffect} from "react";
+import {useTranslation} from "react-i18next";
+import TasksPageComponent from "./tasks.page.component";
+
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {setBreadcrumbs, setSelectedHeader} from "../../redux/application/application.actions";
+import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
+import {selectBodyshop, selectCurrentUser} from "../../redux/user/user.selectors.js";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
+});
+
+export function TasksPageContainer({bodyshop, currentUser,  setBreadcrumbs, setSelectedHeader}) {
+  const {t} = useTranslation();
+  useEffect(() => {
+    document.title = t("titles.tasks", {
+      app: InstanceRenderManager({
+        imex: '$t(titles.imexonline)',
+        rome: '$t(titles.romeonline)',
+        promanager: '$t(titles.promanager)'
+      })
+    });
+    setSelectedHeader("tasks");
+    setBreadcrumbs([
+      {
+        link: "/manage/tasks",
+        label: t("titles.bc.tasks"),
+      },]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
+
+  return (
+    <TasksPageComponent currentUser={currentUser} bodyshop={bodyshop}/>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TasksPageContainer);