Merge branch 'feature/follow_up_page_design' into 'develop'

Feature/follow up page design

See merge request witel3/loan-facilities-user!7

public/locales/fa/app.json

@@ -10,6 +10,7 @@
   "register_welfare_services": "ثبت نام اعضای خدمات رفاهی",
   "pending": "درحال اجرا...",
   "user_navy": "ناوگان",
+  "page_not_found": "صفحه مورد نظر یافت نشد",
   "header": {
     "open_profile": "پروفایل",
     "edit_profile": "ویرایش پروفایل",
@@ -28,7 +29,8 @@
     "title_login_navy_page": "ورود اعضای ناوگان",
     "title_login_welfare_services_page": "ورود اعضای خدمات رفاهی",
     "title_register_navy_page": "ثبت نام اعضای ناوگان",
-    "title_register_welfare_services_page": "ثبت نام اعضای خدمات رفاهی"
+    "title_register_welfare_services_page": "ثبت نام اعضای خدمات رفاهی",
+    "title_not_found": "یافت نشد"
   },
   "sidebar": {
     "dashboard": "داشبورد",

src/components/dashboard/loan-follow-up/index.jsx

@@ -1,16 +1,177 @@
 import CenterLayout from "@/layouts/CenterLayout";
 import DashboardLayouts from "@/layouts/dashboardLayouts";
 import useUser from "@/lib/app/hooks/useUser";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import {
+  Avatar,
+  Box,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  Collapse,
+  Grid,
+  IconButton,
+  Stack,
+  Typography,
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
 import { useTranslations } from "next-intl";
-import React from "react";
+import { useState } from "react";
+
+const ExpandMore = styled((props) => {
+  const { expand, ...other } = props;
+  return <IconButton {...other} />;
+})(({ theme, expand }) => ({
+  transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
+  marginLeft: "auto",
+  transition: theme.transitions.create("transform", {
+    duration: theme.transitions.duration.shortest,
+  }),
+}));
 
 const DashboardLoanFollowUpComponent = () => {
   const t = useTranslations();
   const { token } = useUser();
+
+  const [expanded, setExpanded] = useState(false);
+
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+
   return (
     <DashboardLayouts>
       <CenterLayout>
-        <p>چه کشکی چه پشمی</p>
+        <Stack
+          spacing={2}
+          sx={{
+            p: 4,
+            width: "100%",
+          }}
+        >
+          <Grid
+            container
+            columnSpacing={2}
+            rowSpacing={2}
+            sx={{ alignItems: "center", justifyContent: "center" }}
+          >
+            <Grid item xs={12} md={6} lg={4}>
+              <Card sx={{ width: "100%" }}>
+                <CardHeader
+                  avatar={
+                    <Avatar
+                      sx={{ bgcolor: "primary.main" }}
+                      aria-label="recipe"
+                    ></Avatar>
+                  }
+                  title="اسم اقاهه"
+                  subheader="تاریخ اگه خواستیم"
+                />
+                <CardContent>
+                  <Typography variant="body2" color="text.secondary">
+                    متن تست
+                  </Typography>
+                </CardContent>
+                <CardActions disableSpacing>
+                  <ExpandMore
+                    expand={expanded}
+                    onClick={handleExpandClick}
+                    aria-expanded={expanded}
+                    aria-label="show more"
+                  >
+                    <ExpandMoreIcon />
+                  </ExpandMore>
+                </CardActions>
+                <Collapse in={expanded} timeout="auto" unmountOnExit>
+                  <CardContent>
+                    <Typography paragraph>اطلاعات تکمیلی:</Typography>
+                    <Typography paragraph>پارت دوم متن تست</Typography>
+                    <Typography paragraph>پارت سه همون قبلی</Typography>
+                    <Typography paragraph>در ادامه باید بگم که...</Typography>
+                    <Typography>درپایان همینه که هست</Typography>
+                  </CardContent>
+                </Collapse>
+              </Card>
+            </Grid>
+            <Grid item xs={12} md={6} lg={4}>
+              <Card sx={{ width: "100%" }}>
+                <CardHeader
+                  avatar={
+                    <Avatar
+                      sx={{ bgcolor: "primary.main" }}
+                      aria-label="recipe"
+                    ></Avatar>
+                  }
+                  title="اسم اقاهه"
+                  subheader="تاریخ اگه خواستیم"
+                />
+                <CardContent>
+                  <Typography variant="body2" color="text.secondary">
+                    متن تست
+                  </Typography>
+                </CardContent>
+                <CardActions disableSpacing>
+                  <ExpandMore
+                    expand={expanded}
+                    onClick={handleExpandClick}
+                    aria-expanded={expanded}
+                    aria-label="show more"
+                  >
+                    <ExpandMoreIcon />
+                  </ExpandMore>
+                </CardActions>
+                <Collapse in={expanded} timeout="auto" unmountOnExit>
+                  <CardContent>
+                    <Typography paragraph>اطلاعات تکمیلی:</Typography>
+                    <Typography paragraph>پارت دوم متن تست</Typography>
+                    <Typography paragraph>پارت سه همون قبلی</Typography>
+                    <Typography paragraph>در ادامه باید بگم که...</Typography>
+                    <Typography>درپایان همینه که هست</Typography>
+                  </CardContent>
+                </Collapse>
+              </Card>
+            </Grid>
+            <Grid item xs={12} md={6} lg={4}>
+              <Card sx={{ width: "100%" }}>
+                <CardHeader
+                  avatar={
+                    <Avatar
+                      sx={{ bgcolor: "primary.main" }}
+                      aria-label="recipe"
+                    ></Avatar>
+                  }
+                  title="اسم اقاهه"
+                  subheader="تاریخ اگه خواستیم"
+                />
+                <CardContent>
+                  <Typography variant="body2" color="text.secondary">
+                    متن تست
+                  </Typography>
+                </CardContent>
+                <CardActions disableSpacing>
+                  <ExpandMore
+                    expand={expanded}
+                    onClick={handleExpandClick}
+                    aria-expanded={expanded}
+                    aria-label="show more"
+                  >
+                    <ExpandMoreIcon />
+                  </ExpandMore>
+                </CardActions>
+                <Collapse in={expanded} timeout="auto" unmountOnExit>
+                  <CardContent>
+                    <Typography paragraph>اطلاعات تکمیلی:</Typography>
+                    <Typography paragraph>پارت دوم متن تست</Typography>
+                    <Typography paragraph>پارت سه همون قبلی</Typography>
+                    <Typography paragraph>در ادامه باید بگم که...</Typography>
+                    <Typography>درپایان همینه که هست</Typography>
+                  </CardContent>
+                </Collapse>
+              </Card>
+            </Grid>
+          </Grid>
+        </Stack>
       </CenterLayout>
     </DashboardLayouts>
   );

src/components/not-found.jsx

@@ -0,0 +1,38 @@
+import CenterLayout from "@/layouts/CenterLayout";
+import FullPageLayout from "@/layouts/FullPageLayout";
+import { Box, Button, Typography } from "@mui/material";
+import { NextLinkComposed } from "@/core/components/LinkRouting";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+
+const NotFoundComponent = () => {
+    const t = useTranslations();
+  return (
+    <FullPageLayout sx={{ p: 1 }}>
+      <CenterLayout>
+        <Box sx={{ position: "relative", width: "100%", height: 250 }}>
+          <Image
+            fill
+            src="/images/not-found.svg"
+            alt="not found image"
+            priority
+          />
+        </Box>
+        <Typography margin={2} variant="h6" textAlign="center">
+          صفحه ای با این عنوان یافت نشد
+        </Typography>
+        <Button
+          variant="contained"
+          component={NextLinkComposed}
+          to={{
+            pathname: "/dashboard",
+          }}
+        >
+          رفتن به داشبورد
+        </Button>
+      </CenterLayout>
+    </FullPageLayout>
+  );
+};
+
+export default NotFoundComponent;

src/pages/404.jsx

@@ -0,0 +1,13 @@
+import NotFoundComponent from "@/components/not-found";
+import Head from "next/head";
+
+export default function NotFound() {
+  return (
+    <>
+      <Head>
+        <title>یافت نشد</title>
+      </Head>
+      <NotFoundComponent />
+    </>
+  );
+}