[ADD] filtering feature on the dashboard

src/features/global/cards/UserCard.tsx

@@ -43,6 +43,8 @@ const UserCard: React.FC<Props> = ({ card, refetch, edition, mode }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [statusResult])
 
+    console.log(card.status)
+
     return (
         <Card withBorder radius="sm" className={classes.card} shadow={"md"} mih={300}>
             <Card.Section className={classes.header}>

src/features/global/navigation/NavBar.tsx

@@ -6,12 +6,12 @@ import { Navbar, UnstyledButton, ScrollArea, Group } from '@mantine/core';
 import { useAppSelector, useAppDispatch } from 'store/hooks/hooks';
 import { useGetUserInfos } from 'hooks/api/useGetUserInfos';
 
-import UserButton from './components/fullNavBar/UserButton';
+import UserButton from './components/UserButton';
 
 import { logoutHandling } from './utils/logoutHandling';
 import { SlLogout } from "react-icons/sl";
 
-import Navigationtabs from './components/fullNavBar/NavigationTabs';
+import Navigationtabs from './components/NavigationTabs';
 import { useNavBarStyles } from './styles/useNavBarStyles';
 
 

src/features/global/navigation/NavigationDrawer.tsx

@@ -1,25 +1,34 @@
-import { Container, Drawer, Group, Stack, Text, UnstyledButton } from "@mantine/core";
+import { Drawer, Group, Stack, UnstyledButton } from "@mantine/core";
+
 import { useGetUserInfos } from "hooks/api/useGetUserInfos";
+
 import { useRouter } from "next/router";
+
 import { SlLogout } from "react-icons/sl";
+
 import { useAppDispatch, useAppSelector } from "store/hooks/hooks";
-import Navigationtabs from "./components/fullNavBar/NavigationTabs";
-import UserButton from "./components/fullNavBar/UserButton";
-import { useNavBarStyles } from "./styles/useNavBarStyles";
+
+import Navigationtabs from "./components/NavigationTabs";
+import UserButton from "./components/UserButton";
 import { logoutHandling } from "./utils/logoutHandling";
 
+import { useNavBarStyles } from "./styles/useNavBarStyles";
+
 interface Props {
     opened: boolean;
     onClose: () => void;
 }
 
 const NavigationDrawer: React.FC<Props> = ({ opened, onClose }) => {
     const { data: user } = useGetUserInfos();
-    const { classes } = useNavBarStyles();
     const router = useRouter();
+
+    const { classes } = useNavBarStyles();
     const dispatch = useAppDispatch();
     const userRole = useAppSelector((state) => state.user.auth.accessToken?.charAt(0));
+
     const { pathname } = useRouter();
+
     let page = pathname;
 
     if (page === "/home/pld/generator" || page === "/home/pld/images" || page === "/home/pld/changes")

src/features/global/navigation/components/fullNavBar/NavigationTabs.tsx → src/features/global/navigation/components/NavigationTabs.tsx

@@ -2,10 +2,9 @@ import Link from "next/link";
 
 import { Divider, Group } from "@mantine/core";
 
-import { useNavBarStyles } from "../../styles/useNavBarStyles";
+import { useNavBarStyles } from "../styles/useNavBarStyles";
 
 import { userTabs, editorTabs, adminTabs } from "features/global/navigation/utils/links";
-import CustomLoader from "components/loader/CustomLoader";
 
 interface Props {
     active: string;

src/features/global/navigation/components/fullNavBar/UserButton.tsx → src/features/global/navigation/components/UserButton.tsx

@@ -1,6 +1,6 @@
 import { Group, Text, UnstyledButton, createStyles, useMantineTheme } from '@mantine/core';
 
-import style from "../../styles/userButton.module.css";
+import style from "../styles/userButton.module.css";
 
 import LittleColorScheme from 'components/littleColorScheme/LittleColorScheme';
 import { MdOutlineChevronRight } from 'react-icons/md';

src/features/home/editor/CardsApprovalAndEdition/components/CardsTabs/ApprovedCardsEditable.tsx

@@ -18,7 +18,9 @@ const ApprovedCardsEditable: React.FC<Props> = ({ data, refetch }) => {
                         mt={20}
                         breakpoints={[
                             { minWidth: 'xs', cols: 1 },
-                            { minWidth: 900, cols: 2 },
+                            { minWidth: 650, cols: 2 },
+                            { minWidth: 800, cols: 1 },
+                            { minWidth: 910, cols: 2 },
                             { minWidth: 1200, cols: 3 },
                             { minWidth: 1700, cols: 4 },
                             { minWidth: 2200, cols: 5 },

src/features/home/editor/CardsApprovalAndEdition/components/CardsTabs/RejectedCardsEditable.tsx

@@ -18,7 +18,9 @@ const RejectedCardsEditable: React.FC<Props> = ({ data, refetch }) => {
                         mt={20}
                         breakpoints={[
                             { minWidth: 'xs', cols: 1 },
-                            { minWidth: 900, cols: 2 },
+                            { minWidth: 650, cols: 2 },
+                            { minWidth: 800, cols: 1 },
+                            { minWidth: 910, cols: 2 },
                             { minWidth: 1200, cols: 3 },
                             { minWidth: 1700, cols: 4 },
                             { minWidth: 2200, cols: 5 },

src/features/home/editor/CardsApprovalAndEdition/components/CardsTabs/WaitingCardsEditable.tsx

@@ -18,7 +18,9 @@ const WaitingCardsEditable: React.FC<Props> = ({ data, refetch }) => {
                         mt={20}
                         breakpoints={[
                             { minWidth: 'xs', cols: 1 },
-                            { minWidth: 900, cols: 2 },
+                            { minWidth: 650, cols: 2 },
+                            { minWidth: 800, cols: 1 },
+                            { minWidth: 910, cols: 2 },
                             { minWidth: 1200, cols: 3 },
                             { minWidth: 1700, cols: 4 },
                             { minWidth: 2200, cols: 5 },

src/features/home/editor/CardsApprovalAndEdition/components/Filters.tsx

@@ -17,9 +17,9 @@ const Filters: React.FC<Props> = ({parts, partFilter, setPartFilter, search, set
 
     return (
         <Group mt={40} ml={30} mr={30} position={width <= 800 ? "center" : "apart"} align={"center"}>
-            <TextInput style={{width: 300}} icon={<RiSearchLine />} placeholder="Search..." value={search} onChange={(event) => setSearch(event.currentTarget.value)} />
+            <TextInput variant="filled" style={{width: 300}} icon={<RiSearchLine />} placeholder="Search..." value={search} onChange={(event) => setSearch(event.currentTarget.value)} />
             <Group>
-                <Select style={{width: 300}} clearable placeholder={"Part"} size={"sm"} value={partFilter} onChange={setPartFilter} data={parts.map(part => part.name)} />
+                <Select variant="filled" style={{width: 300}} clearable placeholder={"Part"} size={"sm"} value={partFilter} onChange={setPartFilter} data={parts.map(part => part.name)} />
             </Group>
         </Group>
     );

src/features/home/user/cardTabs/ApprovedCards.tsx

@@ -1,4 +1,4 @@
-import { Tabs, Grid, Center, Title, SimpleGrid } from "@mantine/core";
+import { Tabs, Center, Title, SimpleGrid } from "@mantine/core";
 
 import { Card } from "types/apiTypes";
 
@@ -20,7 +20,9 @@ const ApprovedCards: React.FC<Props> = ({ data, refetch }) => {
                         mt={20}
                         breakpoints={[
                             { minWidth: 'xs', cols: 1 },
-                            { minWidth: 900, cols: 2 },
+                            { minWidth: 650, cols: 2 },
+                            { minWidth: 800, cols: 1 },
+                            { minWidth: 910, cols: 2 },
                             { minWidth: 1200, cols: 3 },
                             { minWidth: 1700, cols: 4 },
                             { minWidth: 2200, cols: 5 },

src/features/home/user/cardTabs/RejectedCards.tsx

@@ -20,7 +20,9 @@ const RejectedCards: React.FC<Props> = ({ data, refetch }) => {
                         mt={20}
                         breakpoints={[
                             { minWidth: 'xs', cols: 1 },
-                            { minWidth: 900, cols: 2 },
+                            { minWidth: 650, cols: 2 },
+                            { minWidth: 800, cols: 1 },
+                            { minWidth: 910, cols: 2 },
                             { minWidth: 1200, cols: 3 },
                             { minWidth: 1700, cols: 4 },
                             { minWidth: 2200, cols: 5 },

src/features/home/user/cardTabs/WaitingCards.tsx

@@ -20,7 +20,9 @@ const WaitingCards: React.FC<Props> = ({ data, refetch }) => {
                         mt={20}
                         breakpoints={[
                             { minWidth: 'xs', cols: 1 },
-                            { minWidth: 900, cols: 2 },
+                            { minWidth: 650, cols: 2 },
+                            { minWidth: 800, cols: 1 },
+                            { minWidth: 910, cols: 2 },
                             { minWidth: 1200, cols: 3 },
                             { minWidth: 1700, cols: 4 },
                             { minWidth: 2200, cols: 5 },

src/features/home/user/dashboard/DashboardCards.tsx

@@ -1,23 +1,61 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
-import { Center, Divider, Grid, SimpleGrid, Title } from "@mantine/core";
-import UserCard from "features/global/cards/UserCard";
+import { Center, Divider, Grid, Group, Select, TextInput } from "@mantine/core";
+import { useViewportSize } from "@mantine/hooks";
 
 import { Card, Sprint, UserCards } from "types/apiTypes";
+
 import JoursAlert from "./components/JoursAlert";
 import Stats from "./components/Stats";
+import CardsGrid from "./components/CardsGrid";
+
+import { RiSearchLine } from "react-icons/ri";
+
+import { TbCircleDotted, TbCircleCheck, TbClock, TbCircleX } from "react-icons/tb";
+
+import StatusSelectItem from "./components/StatusSelectItem";
+import { StatusIcon } from "./utils/statusIcon";
 
 interface Props {
     user: UserCards;
     sprint: Sprint;
     refetch: any;
 }
 
+const data = [
+    { value: 'FINISHED', label: 'Finished', icon: TbCircleCheck },
+    { value: 'STARTED', label: 'In progress', icon: TbClock },
+    { value: 'NOT_STARTED', label: 'Not started', icon: TbCircleX }
+]
+
 const DashboardCards: React.FC<Props> = ({user, sprint, refetch}) => {
+    const { width } = useViewportSize();
+    const [search, setSearch] = useState<string>("");
+    const [status, setStatus] = useState<string | null>(null);
+
     const cards = user.cards.filter((card: Card) =>
         (card.status !== "REJECTED"&& card.status !== "WAITING_APPROVAL") && card.sprintId === sprint.id
     );
 
+    const [filteredCards, setFilteredCards] = useState(cards);
+
+    useEffect(() => {
+        let newCards = user.cards.filter((card: Card) =>
+            (card.status !== "REJECTED"&& card.status !== "WAITING_APPROVAL") && card.sprintId === sprint.id
+        );
+
+        if (status !== null) {
+            newCards = newCards.filter((card: Card) => card.status === status);
+        }
+
+        if (search !== "") {
+            newCards = newCards.filter((card: Card) => card.name.toLowerCase().includes(search.toLowerCase()));
+        }
+
+        setFilteredCards(newCards);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [search, status]);
+
     return (
         <div>
             <h1 style={{textAlign: "center"}}>Welcome back !</h1>
@@ -48,28 +86,21 @@ const DashboardCards: React.FC<Props> = ({user, sprint, refetch}) => {
                 </Grid.Col>
             </Grid>
             <Divider mt={30} />
-            {cards.length === 0
-                ?   <Center mt={100}><Title size={"h3"}>No approved card(s)</Title></Center>
-                :   <React.Fragment key={user.id}>
-                        <SimpleGrid
-                            mt={20}
-                            w={"100%"}
-                            breakpoints={[
-                                { minWidth: 'xs', cols: 1 },
-                                { minWidth: 900, cols: 2 },
-                                { minWidth: 1200, cols: 3 },
-                                { minWidth: 1700, cols: 4 },
-                                { minWidth: 2200, cols: 5 },
-                            ]}
-                        >
-                            {cards.map((card: Card, index: number) => (
-                                <Center key={index} pt={30}>
-                                    <UserCard card={card} refetch={refetch} edition={false} mode={"status"} />
-                                </Center>
-                            ))}
-                        </SimpleGrid>
-                    </React.Fragment>
-            }
+            <Group mt={30} pl={"2%"} pr={"2%"} position={width <= 899 ? "center" : "apart"} spacing={"lg"}>
+                <Select
+                    clearable
+                    icon={StatusIcon(status)}
+                    variant="filled"
+                    placeholder="Status..."
+                    transitionProps={{ transition: "scale-y", duration: 100, timingFunction: 'ease' }}
+                    itemComponent={StatusSelectItem}
+                    onChange={(value) => setStatus(value)}
+                    value={status}
+                    data={data}
+                />
+                <TextInput variant="filled" style={{width: 300}} icon={<RiSearchLine />} placeholder="Search..." value={search} onChange={(event) => setSearch(event.currentTarget.value)} />
+            </Group>
+            <CardsGrid cards={filteredCards} refetch={refetch} />
         </div>
     );
 }

src/features/home/user/dashboard/components/AdminWelcome/Setup.tsx

@@ -5,7 +5,6 @@ import { useSetupStyle } from "../../styles/useSetupStyle";
 import { HiOutlineCog6Tooth } from "react-icons/hi2"
 import { FiUsers, FiCheckSquare } from "react-icons/fi";
 import { BsCalendar2Week } from "react-icons/bs"
-import { useState } from "react";
 
 interface Props {
     configSetup: boolean;
@@ -19,8 +18,6 @@ const Setup: React.FC<Props> = ({ configSetup, userSetup, partSetup, sprintsSetu
 
     const active = (sprintsSetup ? 4 : partSetup ? 3 : userSetup ? 2 : configSetup ? 1 : 0);
 
-    console.log(userSetup)
-
     return (
         <div style={{display: "flex", flexDirection: "column", alignItems: "center"}}>
         <Title className={classes.title}>Setup <span className={classes.span}>Roadmap</span></Title>

src/features/home/user/dashboard/components/CardsGrid.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import { Center, SimpleGrid, Title } from "@mantine/core";
+
+import UserCard from "features/global/cards/UserCard";
+
+import { Card } from "types/apiTypes";
+
+interface Props {
+    cards: Card[];
+    refetch: any;
+}
+
+const CardsGrid: React.FC<Props> = ({ cards, refetch }) => {
+    return (
+        <>
+            {cards.length === 0
+                ?   <Center mt={100}><Title size={"h3"}>No approved card(s)</Title></Center>
+                :   <React.Fragment>
+                        <SimpleGrid
+                            w={"100%"}
+                            breakpoints={[
+                                { minWidth: 'xs', cols: 1 },
+                                { minWidth: 650, cols: 2 },
+                                { minWidth: 800, cols: 1 },
+                                { minWidth: 910, cols: 2 },
+                                { minWidth: 1200, cols: 3 },
+                                { minWidth: 1700, cols: 4 },
+                                { minWidth: 2200, cols: 5 },
+                            ]}
+                        >
+                            {cards.map((card: Card, index: number) => (
+                                <Center key={index} pt={30}>
+                                    <UserCard card={card} refetch={refetch} edition={false} mode={"status"} />
+                                </Center>
+                            ))}
+                        </SimpleGrid>
+                    </React.Fragment>
+            }
+        </>
+    );
+}
+
+export default CardsGrid;

src/features/home/user/dashboard/components/StatusSelectItem.tsx

@@ -0,0 +1,25 @@
+import { Group, Text } from "@mantine/core";
+import { ReactNode, forwardRef } from "react";
+
+import { IconType } from "react-icons";
+
+interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
+    icon: IconType;
+    label: string;
+    description: string;
+}
+
+const StatusSelectItem = forwardRef<HTMLDivElement, ItemProps>(
+    ({ icon: Icon, label, description, ...others }: ItemProps, ref) => (
+        <div ref={ref} {...others}>
+            <Group noWrap>
+                <Icon size={18} />
+                <div>
+                    <Text size="sm">{label}</Text>
+                </div>
+            </Group>
+        </div>
+    )
+);
+
+export default StatusSelectItem;

src/features/home/user/dashboard/utils/StatusIcon.tsx

@@ -0,0 +1,14 @@
+import { TbCircleDotted, TbCircleCheck, TbClock, TbCircleX } from "react-icons/tb";
+
+export function StatusIcon(status: string | null) {
+    switch (status) {
+        case "finished":
+            return <TbCircleCheck color="dimgray" />;
+        case "in-progress":
+            return <TbClock color="dimgray" />;
+        case "not-started":
+            return <TbCircleX color="dimgray" />;
+        default:
+            return <TbCircleDotted color="dimgray" />;
+    }
+}

src/pages/home/index.tsx

@@ -12,7 +12,6 @@ import CustomLoader from "components/loader/CustomLoader";
 import DashboardCards from "features/home/user/dashboard/DashboardCards";
 
 import { useGetUserCards } from "hooks/api/useGetUserCards";
-import { useListSprints } from "hooks/api/useListSprints";
 
 import AdminWelcome from "features/home/user/dashboard/AdminWelcome";
 
@@ -25,8 +24,6 @@ const Dashboard = () => {
     const userRole = useAppSelector((state) => state.user.auth.accessToken?.charAt(0));
 
     const [openAdd, setOpenAdd] = useState<boolean>(false);
-
-    console.log(sprint)
 
     return sprint !== undefined ? (
         <div>