migrate kanban page

Author: LuizFNJ

src/components/Kanban/EmptyKanbanCol.tsx src/components/Kanban/EmptyKanbanGrid.tsxsrc/components/Kanban/EmptyKanbanCol.tsx renamed to src/components/Kanban/EmptyKanbanGrid.tsx

@@ -1,8 +1,8 @@
-import { Divider } from "antd";
+import { Divider } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import React from "react";
 
-const EmptyKanbanCol = ({ title }) => {
+const EmptyKanbanGrid = ({ title }) => {
     const { t } = useTranslation();
     return (
         <div
@@ -16,9 +16,9 @@ const EmptyKanbanCol = ({ title }) => {
             <span style={{ fontSize: 24 }}>{title}</span>
 
             <span>{t("list:totalItems", { total: 0 })}</span>
-            <Divider style={{ marginTop: 12 }} />
+            <Divider flexItem variant="middle" style={{ marginTop: 12 }} />
         </div>
     );
 };
 
-export default EmptyKanbanCol;
+export default EmptyKanbanGrid;

src/components/Kanban/KanbanCol.tsx src/components/Kanban/KanbanGrid.tsxsrc/components/Kanban/KanbanCol.tsx renamed to src/components/Kanban/KanbanGrid.tsx

@@ -6,7 +6,7 @@ import { ReviewTaskStates } from "../../machines/reviewTask/enums";
 import KanbanSkeleton from "../Skeleton/KanbanSkeleton";
 import colors from "../../styles/colors";
 import BaseList from "../List/BaseList";
-import EmptyKanbanCol from "./EmptyKanbanCol";
+import EmptyKanbanGrid from "./EmptyKanbanGrid";
 import KanbanCard from "./KanbanCard";
 import styled from "styled-components";
 
@@ -32,7 +32,7 @@ interface KanbanColProps {
     };
 }
 
-const KanbanCol = ({
+const KanbanGrid = ({
     nameSpace,
     state,
     filterUser,
@@ -58,7 +58,7 @@ const KanbanCol = ({
                     />
                 )}
                 emptyFallback={
-                    <EmptyKanbanCol title={t(`reviewTask:${state}`)} />
+                    <EmptyKanbanGrid title={t(`reviewTask:${state}`)} />
                 }
                 showDividers={false}
                 skeleton={<KanbanSkeleton />}
@@ -68,4 +68,4 @@ const KanbanCol = ({
     );
 };
 
-export default KanbanCol;
+export default KanbanGrid;

src/components/Kanban/KanbanToolbar.tsx

@@ -1,4 +1,4 @@
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import React from "react";
 import { useTranslation } from "next-i18next";
 
@@ -18,7 +18,7 @@ const KanbanToolbar = ({ filterUserTasks, setFilterUserTasks }) => {
     };
 
     return (
-        <Col span={24} className="kanban-toolbar">
+        <Grid item xs={12} className="kanban-toolbar">
             {Object.keys(filterUserTasks).map((task) => (
                 <FormControlLabel
                     key={task}
@@ -35,7 +35,7 @@ const KanbanToolbar = ({ filterUserTasks, setFilterUserTasks }) => {
                     )}
                 />
             ))}
-        </Col>
+        </Grid>
     );
 };
 

src/components/Kanban/KanbanView.tsx

@@ -1,5 +1,5 @@
-import { Col } from "antd";
-import React, { useMemo, useState } from "react";
+import { Grid } from "@mui/material";
+import React, { useState } from "react";
 
 import {
     KanbanClaimState,
@@ -8,7 +8,7 @@ import {
     ReviewTaskStates,
     ReviewTaskTypeEnum,
 } from "../../machines/reviewTask/enums";
-import KanbanCol from "./KanbanCol";
+import KanbanGrid from "./KanbanGrid";
 import { useAtom } from "jotai";
 import { currentNameSpace } from "../../atoms/namespace";
 import KanbanViewStyled from "./KanbanView.style";
@@ -36,17 +36,17 @@ const KanbanView = ({ reviewTaskType }) => {
                 filterUserTasks={filterUserTasks}
                 setFilterUserTasks={setFilterUserTasks}
             />
-            <Col span={23} className="kanban-board">
+            <Grid container xs={11.5} justifyContent="center" className="kanban-board">
                 {states.map((state) => (
-                    <KanbanCol
+                    <KanbanGrid
                         key={state}
                         nameSpace={nameSpace}
                         state={ReviewTaskStates[state]}
                         filterUser={filterUserTasks}
                         reviewTaskType={reviewTaskType}
                     />
                 ))}
-            </Col>
+            </Grid>
         </KanbanViewStyled>
     );
 };