feat: added adaptivity in crm dashboard header and filters panel

Author: MaximSamorukov

public/crm_filter_icon.svg

@@ -13,7 +13,7 @@
   &Container {
     max-width: 800px;
     width: 90%;
-    height: 98%;
+    flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;

src/app/(crm)/crm/dashboard/layout.module.scss

@@ -1,4 +1,3 @@
 export default function Home() {
   return <></>;
 }
-// export const runtime = 'nodejs';

src/app/(website)/page.tsx

@@ -0,0 +1,45 @@
+'use client';
+import Drawer from '@mui/material/Drawer';
+import React, { useState } from 'react';
+import { useSession } from 'next-auth/react';
+import { userState } from '@/shared/state/user/state';
+import { observer } from 'mobx-react-lite';
+import s from './style.module.scss';
+import { DrawerCloseButton } from './ui/CloseButton';
+import { crmDraweFilterState } from '../../shared/state/crmDrawerFilterComponent/CRMDrawerFilterComponentState';
+
+type CRMDrawerFilterComponentProps = {
+  children: React.ReactElement;
+};
+export const CRMDrawerFilterComponent: React.FC<CRMDrawerFilterComponentProps> =
+  observer(({ children }) => {
+    const session = useSession();
+
+    const handleCloseModal = () => {
+      crmDraweFilterState.handleClose();
+    };
+
+    if (!session.data?.user) {
+      return <></>;
+    }
+    return (
+      <Drawer
+        slotProps={{
+          paper: {
+            style: {
+              backgroundColor: 'black',
+            },
+          },
+        }}
+        anchor="top"
+        open={crmDraweFilterState.open}
+      >
+        <div className={s.drawerContainer}>
+          <div className={s.drawerControlsContainer}>
+            <DrawerCloseButton handleCloseDrawer={handleCloseModal} />
+          </div>
+          <div className={s.drawerFiltersContainer}>{children}</div>
+        </div>
+      </Drawer>
+    );
+  });

src/features/CRMDrawerFilterComponent/index.tsx

@@ -0,0 +1,39 @@
+$WIDTH: 100%;
+
+.drawer {
+  &ControlsContainer {
+    width: 100%;
+    height: 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 15px 20px;
+    border: 1px solid rgba(white, 0.1);
+  }
+  &FiltersContainer {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    row-gap: 25px;
+    box-sizing: border-box;
+    padding: 15px;
+    padding-top: 30px;
+    color: white;
+    border-bottom: 1px solid rgba(white, 0.1);
+    border-right: 1px solid rgba(white, 0.1);
+    border-left: 1px solid rgba(white, 0.1);
+
+    @media (max-width: 590px) {
+      height: fit-content;
+    }
+  }
+  &Container {
+    background-color: black;
+    width: $WIDTH;
+    height: auto;
+  }
+}

src/features/CRMDrawerFilterComponent/style.module.scss

@@ -0,0 +1,14 @@
+import React from 'react';
+import s from './style.module.scss';
+type DrawerCloseButtonProps = {
+  handleCloseDrawer: () => void;
+};
+export function DrawerCloseButton({
+  handleCloseDrawer,
+}: DrawerCloseButtonProps) {
+  return (
+    <button className={s.btnContainer} onClick={handleCloseDrawer}>
+      <div className={s.btnCross} />
+    </button>
+  );
+}

src/features/CRMDrawerFilterComponent/ui/CloseButton/index.tsx

@@ -0,0 +1,41 @@
+.btn {
+  &Container {
+    all: unset;
+    height: auto;
+    width: auto;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    padding: 3px;
+    cursor: pointer;
+  }
+  &Cross {
+    color: white;
+    width: 15px;
+    height: 15px;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      width: 1px;
+      height: 15px;
+      top: 0px;
+      left: 7px;
+      background-color: white;
+      transform: rotate(45deg);
+    }
+    &::before {
+      content: '';
+      position: absolute;
+      width: 1px;
+      height: 15px;
+      top: 0px;
+      left: 7px;
+      background-color: white;
+      transform: rotate(-45deg);
+    }
+  }
+}

src/features/CRMDrawerFilterComponent/ui/CloseButton/style.module.scss

@@ -0,0 +1,11 @@
+.container {
+  height: 68vh;
+  width: 100%;
+  overflow-y: scroll;
+  @media (max-width: 590px) {
+    height: 57vh;
+  }
+  @media (max-width: 400px) {
+    flex: 1;
+  }
+}

src/pages_layer/Dashboard/Container/style.module.scss

@@ -0,0 +1,24 @@
+import { action, makeObservable, observable } from 'mobx';
+
+export class CRMDrawerFilterState {
+  open = false;
+
+  constructor() {
+    makeObservable(this, {
+      open: observable,
+      handleOpen: action,
+      handleClose: action,
+    });
+  }
+  handleOpen() {
+    this.open = true;
+  }
+  handleClose() {
+    this.open = false;
+  }
+  toggle() {
+    this.open = !this.open;
+  }
+}
+
+export const crmDraweFilterState = new CRMDrawerFilterState();

src/shared/state/crmDrawerFilterComponent/CRMDrawerFilterComponentState.ts

@@ -11,8 +11,8 @@ import { getOrderDataSource } from '@/shared/db/orders';
 import { getConsultationDataSource } from '@/shared/db/consultations';
 import { PrintOrderEntity } from '@/entities/order';
 import { ConsultationEntity } from '@/entities/consultation';
-import { SubmitButton } from './ui/SubmitButton';
 import { ResetFiltersButton } from './ui/ResetFiltersButton';
+import { FilterLayout } from './ui/FilterLayout';
 
 type OrderFilterTypes = {
   createdAt: Date[];
@@ -52,18 +52,24 @@ export async function Filters() {
     <div className={s.container}>
       <div className={s.border}>
         <div className={s.borderLabel}>Фильтры</div>
-        <DateFilter
-          orderData={result?.createdAt}
-          consData={consData?.createdAt}
-        />
-        <EmailFilter orderData={result?.email} consData={consData?.email} />
-        <PhoneFilter orderData={result?.phone} consData={consData?.contact} />
-        <MaterialFilter data={result?.plasticType} />
-        <TypeFilter />
-        <StatusFilter />
-        <PaymentStatusFilter />
-        <SubmitButton />
-        <ResetFiltersButton />
+        <FilterLayout>
+          <>
+            <DateFilter
+              orderData={result?.createdAt}
+              consData={consData?.createdAt}
+            />
+            <EmailFilter orderData={result?.email} consData={consData?.email} />
+            <PhoneFilter
+              orderData={result?.phone}
+              consData={consData?.contact}
+            />
+            <MaterialFilter data={result?.plasticType} />
+            <TypeFilter />
+            <StatusFilter />
+            <PaymentStatusFilter />
+            <ResetFiltersButton />
+          </>
+        </FilterLayout>
       </div>
     </div>
   );