add follow single page header

src/i18n-en.js

@@ -29,5 +29,13 @@ export const messagesEn = {
     followInterviewer: "Follow an interviewer",
     followSurvey: 'Follow a survey',
     allSurveys: 'All surveys',
-    followOrganizationUnit: "Follow an organization unit"
+    followOrganizationUnit: "Follow an organization unit",
+    followCampaignBreacrumb: "Follow survey",
+    survey: "Survey",
+    progress: "Progress",
+    collect: "Collect",
+    reminders: "Reminders",
+    provisionalStatus: "Provisional status",
+    closedSU: "Closed SU",
+    terminatedSU: "Terminated SU"
 }

src/i18n-fr.js

@@ -29,5 +29,13 @@ export const messagesFr = {
     followInterviewer: "Suivre un enquêteur",
     followSurvey: "Suivre une enquête",
     allSurveys: "Ensemble des enquêtes",
-    followOrganizationUnit: "Suivre un site"
+    followOrganizationUnit: "Suivre un site",
+    followCampaignBreacrumb: "Suivre enquête",
+    survey: "Enquête",
+    progress: "Avancement",
+    collect: "Collecte",
+    reminders: "Relances",
+    provisionalStatus: "Statut provisoire",
+    closedSU: "UE cloturées",
+    terminatedSU: "UE terminées"
 }

src/pages/FollowCampaignPage.tsx

@@ -1,5 +1,59 @@
-import { Typography } from "@mui/material";
+import { useIntl } from "react-intl";
+import { FollowSinglePageHeader } from "../ui/follow/FollowSinglePageHeader";
+import { SyntheticEvent, useState } from "react";
+import Tabs from "@mui/material/Tabs";
+import Stack from "@mui/material/Stack";
+import { PageTab } from "../ui/PageTab";
+import { FollowCampaignProgress } from "../ui/follow/FollowCampaignProgress";
+
+// TODO remove
+const labelMock = "Logement";
+
+enum Tab {
+  progress = "progress",
+  collect = "collect",
+  reminders = "reminders",
+  provisionalStatus = "provisionalStatus",
+  closedSU = "closedSU",
+  terminatedSU = "terminatedSU",
+}
 
 export const FollowCampaignPage = () => {
-  return <Typography>page suivre enquête</Typography>;
+  const intl = useIntl();
+  const [currentTab, setCurrentTab] = useState(Tab.progress);
+  const handleChange = (_: SyntheticEvent, newValue: Tab) => {
+    setCurrentTab(newValue);
+  };
+
+  const breadcrumbs = [
+    { href: "/follow", title: "goToFollowPage" },
+    intl.formatMessage({ id: "followCampaignBreacrumb" }),
+    labelMock,
+  ];
+
+  return (
+    <>
+      <FollowSinglePageHeader category={"survey"} label={labelMock} breadcrumbs={breadcrumbs} />
+      <Tabs
+        value={currentTab}
+        onChange={handleChange}
+        sx={{
+          px: 3,
+          backgroundColor: "white",
+        }}
+      >
+        {Object.keys(Tab).map(k => (
+          <PageTab key={k} value={k} label={intl.formatMessage({ id: k })} />
+        ))}
+      </Tabs>
+      <Stack px={3} py={4}>
+        {currentTab === Tab.progress && <FollowCampaignProgress />}
+        {currentTab === Tab.collect && <>tab collecte</>}
+        {currentTab === Tab.reminders && <>tab relances</>}
+        {currentTab === Tab.provisionalStatus && <>tab statut provisoire</>}
+        {currentTab === Tab.closedSU && <>tab UE cloturées</>}
+        {currentTab === Tab.terminatedSU && <>tab UE terminées</>}
+      </Stack>
+    </>
+  );
 };

src/pages/FollowPage.tsx

@@ -1,7 +1,7 @@
 import { Row } from "../ui/Row";
-import { FollowInterviewerCard } from "../ui/FollowInterviewerCard";
-import { FollowSurveyCard } from "../ui/FollowSurveyCard";
-import { FollowOrganizationUnitCard } from "../ui/FollowOrganizationUnitCard";
+import { FollowInterviewerCard } from "../ui/follow/FollowInterviewerCard";
+import { FollowSurveyCard } from "../ui/follow/FollowSurveyCard";
+import { FollowOrganizationUnitCard } from "../ui/follow/FollowOrganizationUnitCard";
 
 export const FollowPage = () => {
   // TODO use real condition

src/theme.tsx

@@ -119,6 +119,7 @@ declare module "@mui/material/Paper" {
 declare module "@mui/material/Tab" {
   interface TabPropsClassesOverrides {
     search: true;
+    cardTab: true;
   }
 }
 
@@ -148,6 +149,7 @@ const typography = {
   headlineLarge: {
     fontSize: 32,
     lineHeight: "40px",
+    fontWeight: 400,
   },
   headlineMedium: {
     fontSize: 28,
@@ -323,6 +325,42 @@ export const theme = createTheme({
             },
           },
         },
+        {
+          props: { classes: "cardTab" },
+          style: {
+            borderTopLeftRadius: "16px !important",
+            borderTopRightRadius: "16px !important",
+            paddingLeft: 40,
+            paddingRight: 40,
+            backgroundColor: "#EFEFEF",
+            border: "none",
+            ...typography.titleSmall,
+            textTransform: "none",
+            "&:hover": {
+              backgroundColor: "#EFEFEF",
+            },
+            ":nth-of-type(2)": {
+              left: -20,
+            },
+            ":nth-of-type(3)": {
+              left: -40,
+            },
+            ":nth-of-type(4)": {
+              left: -60,
+            },
+            ":nth-of-type(5)": {
+              left: -80,
+            },
+            "&.Mui-selected": {
+              position: "relative",
+              zIndex: 2,
+              background: "white",
+              "&:hover": {
+                background: "white",
+              },
+            },
+          },
+        },
       ],
     },
     MuiPaper: {

src/ui/Breadcrumbs.tsx

@@ -0,0 +1,53 @@
+import MuiBreadcrumbs from "@mui/material/Breadcrumbs";
+import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import { NavLink } from "react-router-dom";
+import { useIntl } from "react-intl";
+
+export type BreadcrumbsItem = { href: string; title: string } | string;
+
+type Props = {
+  items: BreadcrumbsItem[];
+};
+
+export function Breadcrumbs({ items }: Readonly<Props>) {
+  return (
+    <MuiBreadcrumbs
+      aria-label="breadcrumb"
+      sx={{
+        typography: "itemSmall",
+        ".MuiBreadcrumbs-separator": {
+          color: "text.tertiary",
+        },
+      }}
+    >
+      {items.map(item => (
+        <BreadcrumbsItem item={item} key={getKey(item)} />
+      ))}
+    </MuiBreadcrumbs>
+  );
+}
+
+function getKey(item: BreadcrumbsItem) {
+  if (typeof item === "string") {
+    return item;
+  }
+  return item.href;
+}
+
+function BreadcrumbsItem({ item }: Readonly<{ item: BreadcrumbsItem }>) {
+  const intl = useIntl();
+  if (typeof item === "string") {
+    return (
+      <Box component="span" color="text.tertiary">
+        {item}
+      </Box>
+    );
+  }
+
+  return (
+    <Link component={NavLink} underline="hover" color="text.tertiary" to={item.href}>
+      {intl.formatMessage({ id: item.title })}
+    </Link>
+  );
+}

src/ui/PageTab.tsx

@@ -0,0 +1,21 @@
+import Tab, { TabProps } from "@mui/material/Tab";
+
+type Props = {
+  label: string;
+} & TabProps;
+
+export const PageTab = ({ label, ...props }: Props) => {
+  return (
+    <Tab
+      label={label}
+      sx={{
+        px: 2,
+        mx: 0.5,
+        py: 2,
+        typography: "titleSmall",
+        letterSpacing: 0.4,
+      }}
+      {...props}
+    />
+  );
+};

src/ui/follow/FollowCampaignProgress.tsx

@@ -0,0 +1,46 @@
+import { useIntl } from "react-intl";
+import { SyntheticEvent, useState } from "react";
+import Tabs from "@mui/material/Tabs";
+import Stack from "@mui/material/Stack";
+import { SurveyGlobalFollow } from "./SurveyGlobalFollow";
+import { Tab as MuiTab } from "@mui/material";
+
+// TODO change tabs
+enum Tab {
+  progress = "progress",
+  collect = "collect",
+  reminders = "reminders",
+  provisionalStatus = "provisionalStatus",
+  closedSU = "closedSU",
+}
+
+export const FollowCampaignProgress = () => {
+  const intl = useIntl();
+  const [currentTab, setCurrentTab] = useState(Tab.progress);
+  const handleChange = (_: SyntheticEvent, newValue: Tab) => {
+    setCurrentTab(newValue);
+  };
+
+  return (
+    <>
+      <Tabs
+        value={currentTab}
+        onChange={handleChange}
+        sx={{ ml: 5, ".MuiTabs-indicator": { backgroundColor: "white" } }}
+      >
+        {Object.keys(Tab).map(k => (
+          <MuiTab classes={"cardTab"} label={intl.formatMessage({ id: k })} key={k} value={k} />
+        ))}
+      </Tabs>
+
+      <Stack>
+        {/* todo changes components and tabs  */}
+        {currentTab === Tab.progress && <SurveyGlobalFollow />}
+        {currentTab === Tab.collect && <SurveyGlobalFollow />}
+        {currentTab === Tab.reminders && <SurveyGlobalFollow />}
+        {currentTab === Tab.provisionalStatus && <SurveyGlobalFollow />}
+        {currentTab === Tab.closedSU && <SurveyGlobalFollow />}
+      </Stack>
+    </>
+  );
+};

src/ui/FollowCardHeader.tsx → src/ui/follow/FollowCardHeader.tsx

@@ -1,7 +1,7 @@
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { useIntl } from "react-intl";
-import { SearchField } from "./SearchField";
+import { SearchField } from "../SearchField";
 import { ChangeEvent } from "react";
 
 type Props = {

src/ui/FollowInterviewerCard.tsx → src/ui/follow/FollowInterviewerCard.tsx

@@ -1,15 +1,15 @@
 import { useIntl } from "react-intl";
-import { useDebouncedState } from "../hooks/useDebouncedState";
+import { useDebouncedState } from "../../hooks/useDebouncedState";
 import Card from "@mui/material/Card";
 import Stack from "@mui/material/Stack";
 import TableContainer from "@mui/material/TableContainer";
 import Table from "@mui/material/Table";
 import TableHead from "@mui/material/TableHead";
 import { TableBody, TableCell, TableRow } from "@mui/material";
 import { useState } from "react";
-import { APISchemas } from "../types/api";
+import { APISchemas } from "../../types/api";
 import { Link as RouterLink } from "react-router-dom";
-import { Link } from "./Link";
+import { Link } from "../Link";
 import { FollowCardHeader } from "./FollowCardHeader";
 
 const interviewersMock = [

src/ui/FollowOrganizationUnitCard.tsx → src/ui/follow/FollowOrganizationUnitCard.tsx

@@ -1,5 +1,5 @@
 import { useIntl } from "react-intl";
-import { useDebouncedState } from "../hooks/useDebouncedState";
+import { useDebouncedState } from "../../hooks/useDebouncedState";
 import Card from "@mui/material/Card";
 import Stack from "@mui/material/Stack";
 import TableContainer from "@mui/material/TableContainer";
@@ -8,7 +8,7 @@ import TableHead from "@mui/material/TableHead";
 import { TableBody, TableCell, TableRow } from "@mui/material";
 import { useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
-import { Link } from "./Link";
+import { Link } from "../Link";
 import { FollowCardHeader } from "./FollowCardHeader";
 
 const OUMock = [

src/ui/follow/FollowSinglePageHeader.tsx

@@ -0,0 +1,39 @@
+import { useNavigate } from "react-router-dom";
+import { Row } from "../Row";
+import Stack from "@mui/material/Stack";
+import { Box, Divider, IconButton, Typography } from "@mui/material";
+import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
+import { Breadcrumbs, BreadcrumbsItem } from "../Breadcrumbs";
+import { useIntl } from "react-intl";
+
+type Props = {
+  category: string;
+  label: string;
+  breadcrumbs: BreadcrumbsItem[];
+};
+
+export const FollowSinglePageHeader = ({ category, label, breadcrumbs }: Props) => {
+  const navigate = useNavigate();
+  const intl = useIntl();
+
+  return (
+    <Stack bgcolor={"white"}>
+      <Divider variant="fullWidth" />
+      <Row justifyContent={"space-between"} alignItems={"initial"} px={4} py={3}>
+        <Row gap={4}>
+          <IconButton sx={{ bgcolor: "background.default" }} onClick={() => navigate(-1)}>
+            <ArrowBackIosNewIcon sx={{ color: "black.main" }} />
+          </IconButton>
+          <Typography variant="headlineLarge">
+            <Box component={"span"}>{intl.formatMessage({ id: category })} - </Box>
+            <Box component={"span"} sx={{ color: "text.tertiary" }}>
+              {label}
+            </Box>
+          </Typography>
+        </Row>
+        <Breadcrumbs items={breadcrumbs} />
+      </Row>
+      <Divider variant="fullWidth" />
+    </Stack>
+  );
+};

src/ui/FollowSurveyCard.tsx → src/ui/follow/FollowSurveyCard.tsx

@@ -3,7 +3,7 @@ import Card from "@mui/material/Card";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
-import { Link } from "./Link";
+import { Link } from "../Link";
 import { Link as RouterLink } from "react-router-dom";
 
 const surveysMock = [

src/ui/follow/SurveyGlobalFollow.tsx

@@ -0,0 +1,11 @@
+import { Card, Typography } from "@mui/material";
+import { useIntl } from "react-intl";
+
+export const SurveyGlobalFollow = () => {
+  const intl = useIntl();
+  return (
+    <Card variant="general" sx={{ p: 4, zIndex: 3, boxShadow: "none" }}>
+      <Typography variant="titleSmall">{intl.formatMessage({ id: "followSurvey" })}</Typography>
+    </Card>
+  );
+};