contentoh-components-library 21.5.34 → 21.5.36

package/src/components/pages/Dashboard/index.js

@@ -1,382 +1,382 @@
-import { Container } from "./styles";
-import { MetricCard } from "../../atoms/MetricCard";
-import { DashboardMetric } from "../../organisms/DashboardMetric";
-import { useEffect, useState } from "react";
-import { Loading } from "../../atoms/Loading";
-import { CustomSelect } from "../../molecules/CustomSelect";
-import { getProviders, getCategories, formatDate } from "./dashboardUtils";
-import axios from "axios";
-
-export const Dashboard = ({ jwt, user, company }) => {
-  const [metricsData, setMetricsData] = useState([]);
-  const [productsByStatus, setProductsByStatus] = useState({});
-  const [requiredProducts, setRequiredProducts] = useState([]);
-  const [orderByStatus, setOrderByStatus] = useState({
-    retailerId: null,
-    startDate: null,
-    endDate: null,
-  });
-  const [orderByRequired, setOrderByRequired] = useState({
-    retailerId: null,
-    startDate: null,
-    endDate: null,
-  });
-  const [retailers, setRetailers] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [providers, setProviders] = useState([]);
-  const [categories, setCategories] = useState([]);
-  const [retailerId, setRetailerId] = useState([]);
-  const [categoryId, setCategoryId] = useState([]);
-  const [companyId, setCompanyId] = useState([]);
-  const [datesRange, setDatesRange] = useState({
-    startDate: formatDate(new Date("1900-01-01")),
-    endDate: formatDate(new Date()),
-  });
-  const [dateOptions, setDateOptions] = useState([]);
-  const applicants = [
-    { id: "provider", name: "Proveedor" },
-    { id: "retailer", name: "Cadena" },
-  ];
-  const [applicantsFilter, setApplicantsFilter] = useState([]);
-  const [totalCount, setTotalCount] = useState(0);
-  const [isProviderFinanced] = useState(company?.financedRetailers?.length > 0);
-  const [trades, setTrades] = useState([]);
-  const [tradesSelected, setTradesSelected] = useState([]);
-
-  const loadProductVersions = async (queryObject) => {
-    const keys = Object.keys(queryObject);
-    let string = [];
-    keys.forEach((key) => string.push(`${key}=${queryObject[key]}`));
-    const query = string.join("&");
-    const endpoint = process.env.REACT_APP_READ_ORDERS_BY_STATUS;
-    try {
-      const response = await axios.get(`${endpoint}?${query}`, {
-        headers: {
-          Authorization: jwt,
-        },
-      });
-      return JSON.parse(response.data.body).data;
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  const getRetailers = async () => {
-    const isRetailer = user.is_retailer && company.retailers;
-    const retailersResponse = await axios.get(
-      `${process.env.REACT_APP_RETAILER_ENDPOINT}`,
-      {
-        headers: {
-          Authorization: jwt,
-        },
-      }
-    );
-    const parsed = JSON.parse(retailersResponse.data.body).data;
-    let retailers = Object.values(parsed);
-    if (isRetailer || isProviderFinanced) {
-      const retailersValid = company.retailers.map((e) => e.id);
-      retailers = retailers.filter((value) =>
-        retailersValid.includes(value.id)
-      );
-    }
-    setRetailers(retailers);
-  };
-
-  const loadProductsByStatus = async (orderByStatus) => {
-    const isRetailer = user.is_retailer && company.retailers;
-    const isProvider = !user.is_retailer && user.id_role === 0;
-    const isCollaborator = user.id_role > 0;
-    const { ordersBydate, ordersByStatus, ordersByActive, companyTrades } =
-      (await loadProductVersions(orderByStatus)) || {};
-
-    if (trades.length === 0) setTrades(companyTrades);
-    const { total = 0, R = 0, PA = 0, Ex = 0, ACA = 0 } = ordersByStatus;
-    let productsFinished = 0;
-    if (isRetailer) productsFinished = Ex;
-    if (isProvider) productsFinished = ACA;
-    if (isCollaborator) productsFinished = Ex + ACA;
-
-    const inProcess = Object.keys(ordersByStatus).reduce(
-      (prev, curr) =>
-        !["total", "PA", "R", "Ex", "ACA"].includes(curr)
-          ? prev + ordersByStatus[curr]
-          : prev,
-      0
-    );
-
-    const registeredProducts = ordersByActive.registered;
-    let metricsArray = [
-      metricsData[0]
-        ? metricsData[0]
-        : { label: "Productos totales", value: total },
-    ];
-
-    metricsArray.push(
-      { label: "Productos activos", value: registeredProducts },
-      { label: "Productos filtrados", value: total },
-      { label: "Productos sin asignar", value: PA + R },
-      { label: "Productos en proceso", value: inProcess },
-      { label: "Productos terminados", value: productsFinished }
-    );
-    setMetricsData(metricsArray);
-    setTotalCount(total);
-    delete ordersByStatus.total;
-    setRequiredProducts(ordersBydate);
-    setProductsByStatus(ordersByStatus);
-  };
-
-  const datesSelect = () => {
-    const today = new Date();
-    setDateOptions([
-      { id: 0, name: "Rango de fechas" },
-      {
-        id: 1,
-        name: "Todo el tiempo",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(new Date("1900-01-01")),
-            endDate: formatDate(new Date()),
-          }),
-      },
-      {
-        id: 2,
-        name: "Hoy",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(new Date()),
-            endDate: formatDate(new Date()),
-          }),
-      },
-      {
-        id: 3,
-        name: "Ayer",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(new Date(today.setDate(today.getDate() - 1))),
-            endDate: formatDate(new Date()),
-          }),
-      },
-      {
-        id: 4,
-        name: "Esta semana",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(
-              new Date(today.setDate(today.getDate() - today.getDay()))
-            ),
-            endDate: formatDate(new Date()),
-          }),
-      },
-      {
-        id: 5,
-        name: "La semana pasada",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(
-              new Date(today.setDate(today.getDate() - today.getDay() - 7))
-            ),
-            endDate: formatDate(
-              new Date(today.setDate(today.getDate() - today.getDay() + 7))
-            ),
-          }),
-      },
-      {
-        id: 6,
-        name: "Este mes",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(
-              new Date(`${today.getFullYear()}-${today.getMonth() + 1}-01`)
-            ),
-            endDate: formatDate(today),
-          }),
-      },
-      {
-        id: 7,
-        name: "El mes pasado",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(
-              new Date(`${today.getFullYear()}-${today.getMonth()}-01`)
-            ),
-            endDate: formatDate(
-              new Date(`${today.getFullYear()}-${today.getMonth() + 1}-01`)
-            ),
-          }),
-      },
-    ]);
-  };
-
-  useEffect(async () => {
-    setProviders(await getProviders(jwt, user));
-    setCategories(await getCategories(jwt, user, company));
-    await getRetailers();
-    datesSelect();
-    const today = new Date();
-    const startDate = formatDate("1900-01-01");
-    const endDate = formatDate(today);
-    const queryObject = { startDate, endDate };
-    setDatesRange({ startDate, endDate });
-    setOrderByStatus(queryObject);
-    setOrderByRequired(queryObject);
-    loadProductsByStatus(queryObject);
-  }, []);
-
-  useEffect(() => {
-    if (
-      orderByRequired?.startDate &&
-      orderByStatus?.endDate &&
-      metricsData.length > 0
-    ) {
-      setLoading(false);
-    }
-  }, [orderByRequired, orderByStatus, metricsData]);
-
-  useEffect(async () => {
-    const { startDate, endDate } = datesRange;
-    const queryObject = {
-      startDate: startDate,
-      endDate: endDate,
-    };
-    if (companyId.length > 0) queryObject["companyId"] = companyId.join(",");
-    if (retailerId.length > 0) queryObject["retailerId"] = retailerId.join(",");
-    if (categoryId.length > 0) queryObject["categoryId"] = categoryId.join(",");
-    if (tradesSelected.length > 0)
-      queryObject["trades"] = encodeURIComponent(tradesSelected.join(","));
-    applicantsFilter.length > 0 &&
-      (queryObject["requestedBy"] = applicantsFilter.join(","));
-
-    await loadProductsByStatus(queryObject, true);
-  }, [
-    companyId,
-    retailerId,
-    categoryId,
-    datesRange,
-    applicantsFilter,
-    tradesSelected,
-  ]);
-
-  return loading ? (
-    <Loading />
-  ) : (
-    <Container>
-      <div className="filters">
-        <CustomSelect
-          showFilterString={true}
-          options={dateOptions}
-          selectLabel="Todo el tiempo"
-          placeHolder="Buscar fecha"
-          customSelectId="dates-select"
-          parameterArray={datesRange}
-          setParameterArray={setDatesRange}
-          isSingleSelect
-        />
-        {!isProviderFinanced && providers?.length > 1 && (
-          <CustomSelect
-            showFilterString={true}
-            showSearchBar={true}
-            options={providers}
-            selectLabel="Todos los proveedores"
-            placeHolder="Buscar proveedor"
-            customSelectId="providers-select"
-            parameterArray={companyId}
-            setParameterArray={setCompanyId}
-            defaultOption="Todos los proveedores"
-          />
-        )}
-        <CustomSelect
-          showFilterString={true}
-          showSearchBar={true}
-          options={categories}
-          selectLabel="Todas las categorías"
-          placeHolder="Buscar categoría"
-          customSelectId="category-select"
-          parameterArray={categoryId}
-          setParameterArray={setCategoryId}
-          defaultOption="Todas las categorías"
-        />
-        {!isProviderFinanced && retailers?.length > 1 && (
-          <CustomSelect
-            showFilterString={true}
-            showSearchBar={true}
-            options={retailers}
-            selectLabel="Todas las cadenas"
-            placeHolder="Buscar cadena"
-            customSelectId="retailers-select"
-            parameterArray={retailerId}
-            setParameterArray={setRetailerId}
-            defaultOption="Todas las cadenas"
-          />
-        )}
-        {user.is_retailer === 1 && (
-          <CustomSelect
-            showFilterString={true}
-            options={applicants}
-            selectLabel="Todos los solicitantes"
-            customSelectId="applicants-select"
-            parameterArray={applicantsFilter}
-            setParameterArray={setApplicantsFilter}
-            defaultOption="Todos los solicitantes"
-          />
-        )}
-        {user.id_role === 0 && trades?.length > 0 && (
-          <CustomSelect
-            showSearchBar={true}
-            options={trades}
-            selectLabel="Todas las marcas"
-            placeHolder="Buscar marca"
-            customSelectId="trade-select"
-            parameterArray={tradesSelected}
-            setParameterArray={setTradesSelected}
-          />
-        )}
-      </div>
-      <div className="metric-cards">
-        {metricsData.map((metric, index) => (
-          <MetricCard
-            key={`${index}-${metric.value}`}
-            label={metric.label}
-            number={metric.value}
-          />
-        ))}
-      </div>
-      <div className="metrics-main-container">
-        <DashboardMetric
-          label={"Productos por estatus"}
-          description={
-            "Revisa el avance individual de cada estatus, utiliza los filtros para encontrar información precisa."
-          }
-          dataObject={productsByStatus}
-          retailerSelected={orderByStatus.retailerId}
-          queryObject={orderByStatus}
-          setQueryObject={(evt) => {
-            loadProductsByStatus(evt);
-            setOrderByStatus(evt);
-          }}
-          type="doughnut"
-          displayLegend={true}
-          showPercent={true}
-          displayScale={false}
-          totalFiltered={totalCount}
-          total={metricsData[0]?.value}
-        />
-        <DashboardMetric
-          label={"Productos solicitados"}
-          description={
-            "Filtra los productos solicitados por fecha y alcance para revisar rápidamente el flujo de trabajo."
-          }
-          dataObject={requiredProducts}
-          type="line"
-          indexAxis="x"
-          displayScale={true}
-          retailerSelected={orderByRequired.retailerId}
-          queryObject={orderByRequired}
-          setQueryObject={(evt) => {
-            setOrderByRequired(evt);
-          }}
-          borderColor={"#3B1366"}
-        />
-      </div>
-    </Container>
-  );
-};
+import { Container } from "./styles";
+import { MetricCard } from "../../atoms/MetricCard";
+import { DashboardMetric } from "../../organisms/DashboardMetric";
+import { useEffect, useState } from "react";
+import { Loading } from "../../atoms/Loading";
+import { CustomSelect } from "../../molecules/CustomSelect";
+import { getProviders, getCategories, formatDate } from "./dashboardUtils";
+import axios from "axios";
+
+export const Dashboard = ({ jwt, user, company }) => {
+  const [metricsData, setMetricsData] = useState([]);
+  const [productsByStatus, setProductsByStatus] = useState({});
+  const [requiredProducts, setRequiredProducts] = useState([]);
+  const [orderByStatus, setOrderByStatus] = useState({
+    retailerId: null,
+    startDate: null,
+    endDate: null,
+  });
+  const [orderByRequired, setOrderByRequired] = useState({
+    retailerId: null,
+    startDate: null,
+    endDate: null,
+  });
+  const [retailers, setRetailers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [providers, setProviders] = useState([]);
+  const [categories, setCategories] = useState([]);
+  const [retailerId, setRetailerId] = useState([]);
+  const [categoryId, setCategoryId] = useState([]);
+  const [companyId, setCompanyId] = useState([]);
+  const [datesRange, setDatesRange] = useState({
+    startDate: formatDate(new Date("1900-01-01")),
+    endDate: formatDate(new Date()),
+  });
+  const [dateOptions, setDateOptions] = useState([]);
+  const applicants = [
+    { id: "provider", name: "Proveedor" },
+    { id: "retailer", name: "Cadena" },
+  ];
+  const [applicantsFilter, setApplicantsFilter] = useState([]);
+  const [totalCount, setTotalCount] = useState(0);
+  const [isProviderFinanced] = useState(company?.financedRetailers?.length > 0);
+  const [trades, setTrades] = useState([]);
+  const [tradesSelected, setTradesSelected] = useState([]);
+
+  const loadProductVersions = async (queryObject) => {
+    const keys = Object.keys(queryObject);
+    let string = [];
+    keys.forEach((key) => string.push(`${key}=${queryObject[key]}`));
+    const query = string.join("&");
+    const endpoint = process.env.REACT_APP_READ_ORDERS_BY_STATUS;
+    try {
+      const response = await axios.get(`${endpoint}?${query}`, {
+        headers: {
+          Authorization: jwt,
+        },
+      });
+      return JSON.parse(response.data.body).data;
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const getRetailers = async () => {
+    const isRetailer = user.is_retailer && company.retailers;
+    const retailersResponse = await axios.get(
+      `${process.env.REACT_APP_RETAILER_ENDPOINT}`,
+      {
+        headers: {
+          Authorization: jwt,
+        },
+      }
+    );
+    const parsed = JSON.parse(retailersResponse.data.body).data;
+    let retailers = Object.values(parsed);
+    if (isRetailer || isProviderFinanced) {
+      const retailersValid = company.retailers.map((e) => e.id);
+      retailers = retailers.filter((value) =>
+        retailersValid.includes(value.id)
+      );
+    }
+    setRetailers(retailers);
+  };
+
+  const loadProductsByStatus = async (orderByStatus) => {
+    const isRetailer = user.is_retailer && company.retailers;
+    const isProvider = !user.is_retailer && user.id_role === 0;
+    const isCollaborator = user.id_role > 0;
+    const { ordersBydate, ordersByStatus, ordersByActive, companyTrades } =
+      (await loadProductVersions(orderByStatus)) || {};
+
+    if (trades.length === 0) setTrades(companyTrades);
+    const { total = 0, R = 0, PA = 0, Ex = 0, ACA = 0 } = ordersByStatus;
+    let productsFinished = 0;
+    if (isRetailer) productsFinished = Ex;
+    if (isProvider) productsFinished = ACA;
+    if (isCollaborator) productsFinished = Ex + ACA;
+
+    const inProcess = Object.keys(ordersByStatus).reduce(
+      (prev, curr) =>
+        !["total", "PA", "R", "Ex", "ACA"].includes(curr)
+          ? prev + ordersByStatus[curr]
+          : prev,
+      0
+    );
+
+    const registeredProducts = ordersByActive.registered;
+    let metricsArray = [
+      metricsData[0]
+        ? metricsData[0]
+        : { label: "Productos totales", value: total },
+    ];
+
+    metricsArray.push(
+      { label: "Productos activos", value: registeredProducts },
+      { label: "Productos filtrados", value: total },
+      { label: "Productos sin asignar", value: PA + R },
+      { label: "Productos en proceso", value: inProcess },
+      { label: "Productos terminados", value: productsFinished }
+    );
+    setMetricsData(metricsArray);
+    setTotalCount(total);
+    delete ordersByStatus.total;
+    setRequiredProducts(ordersBydate);
+    setProductsByStatus(ordersByStatus);
+  };
+
+  const datesSelect = () => {
+    const today = new Date();
+    setDateOptions([
+      { id: 0, name: "Rango de fechas" },
+      {
+        id: 1,
+        name: "Todo el tiempo",
+        function: () =>
+          setDatesRange({
+            startDate: formatDate(new Date("1900-01-01")),
+            endDate: formatDate(new Date()),
+          }),
+      },
+      {
+        id: 2,
+        name: "Hoy",
+        function: () =>
+          setDatesRange({
+            startDate: formatDate(new Date()),
+            endDate: formatDate(new Date()),
+          }),
+      },
+      {
+        id: 3,
+        name: "Ayer",
+        function: () =>
+          setDatesRange({
+            startDate: formatDate(new Date(today.setDate(today.getDate() - 1))),
+            endDate: formatDate(new Date()),
+          }),
+      },
+      {
+        id: 4,
+        name: "Esta semana",
+        function: () =>
+          setDatesRange({
+            startDate: formatDate(
+              new Date(today.setDate(today.getDate() - today.getDay()))
+            ),
+            endDate: formatDate(new Date()),
+          }),
+      },
+      {
+        id: 5,
+        name: "La semana pasada",
+        function: () =>
+          setDatesRange({
+            startDate: formatDate(
+              new Date(today.setDate(today.getDate() - today.getDay() - 7))
+            ),
+            endDate: formatDate(
+              new Date(today.setDate(today.getDate() - today.getDay() + 7))
+            ),
+          }),
+      },
+      {
+        id: 6,
+        name: "Este mes",
+        function: () =>
+          setDatesRange({
+            startDate: formatDate(
+              new Date(`${today.getFullYear()}-${today.getMonth() + 1}-01`)
+            ),
+            endDate: formatDate(today),
+          }),
+      },
+      {
+        id: 7,
+        name: "El mes pasado",
+        function: () =>
+          setDatesRange({
+            startDate: formatDate(
+              new Date(`${today.getFullYear()}-${today.getMonth()}-01`)
+            ),
+            endDate: formatDate(
+              new Date(`${today.getFullYear()}-${today.getMonth() + 1}-01`)
+            ),
+          }),
+      },
+    ]);
+  };
+
+  useEffect(async () => {
+    setProviders(await getProviders(jwt, user));
+    setCategories(await getCategories(jwt, user, company));
+    await getRetailers();
+    datesSelect();
+    const today = new Date();
+    const startDate = formatDate("1900-01-01");
+    const endDate = formatDate(today);
+    const queryObject = { startDate, endDate };
+    setDatesRange({ startDate, endDate });
+    setOrderByStatus(queryObject);
+    setOrderByRequired(queryObject);
+    loadProductsByStatus(queryObject);
+  }, []);
+
+  useEffect(() => {
+    if (
+      orderByRequired?.startDate &&
+      orderByStatus?.endDate &&
+      metricsData.length > 0
+    ) {
+      setLoading(false);
+    }
+  }, [orderByRequired, orderByStatus, metricsData]);
+
+  useEffect(async () => {
+    const { startDate, endDate } = datesRange;
+    const queryObject = {
+      startDate: startDate,
+      endDate: endDate,
+    };
+    if (companyId.length > 0) queryObject["companyId"] = companyId.join(",");
+    if (retailerId.length > 0) queryObject["retailerId"] = retailerId.join(",");
+    if (categoryId.length > 0) queryObject["categoryId"] = categoryId.join(",");
+    if (tradesSelected.length > 0)
+      queryObject["trades"] = encodeURIComponent(tradesSelected.join(","));
+    applicantsFilter.length > 0 &&
+      (queryObject["requestedBy"] = applicantsFilter.join(","));
+
+    await loadProductsByStatus(queryObject, true);
+  }, [
+    companyId,
+    retailerId,
+    categoryId,
+    datesRange,
+    applicantsFilter,
+    tradesSelected,
+  ]);
+
+  return loading ? (
+    <Loading />
+  ) : (
+    <Container>
+      <div className="filters">
+        <CustomSelect
+          showFilterString={true}
+          options={dateOptions}
+          selectLabel="Todo el tiempo"
+          placeHolder="Buscar fecha"
+          customSelectId="dates-select"
+          parameterArray={datesRange}
+          setParameterArray={setDatesRange}
+          isSingleSelect
+        />
+        {!isProviderFinanced && providers?.length > 1 && (
+          <CustomSelect
+            showFilterString={true}
+            showSearchBar={true}
+            options={providers}
+            selectLabel="Todos los proveedores"
+            placeHolder="Buscar proveedor"
+            customSelectId="providers-select"
+            parameterArray={companyId}
+            setParameterArray={setCompanyId}
+            defaultOption="Todos los proveedores"
+          />
+        )}
+        <CustomSelect
+          showFilterString={true}
+          showSearchBar={true}
+          options={categories}
+          selectLabel="Todas las categorías"
+          placeHolder="Buscar categoría"
+          customSelectId="category-select"
+          parameterArray={categoryId}
+          setParameterArray={setCategoryId}
+          defaultOption="Todas las categorías"
+        />
+        {!isProviderFinanced && retailers?.length > 1 && (
+          <CustomSelect
+            showFilterString={true}
+            showSearchBar={true}
+            options={retailers}
+            selectLabel="Todas las cadenas"
+            placeHolder="Buscar cadena"
+            customSelectId="retailers-select"
+            parameterArray={retailerId}
+            setParameterArray={setRetailerId}
+            defaultOption="Todas las cadenas"
+          />
+        )}
+        {user.is_retailer === 1 && (
+          <CustomSelect
+            showFilterString={true}
+            options={applicants}
+            selectLabel="Todos los solicitantes"
+            customSelectId="applicants-select"
+            parameterArray={applicantsFilter}
+            setParameterArray={setApplicantsFilter}
+            defaultOption="Todos los solicitantes"
+          />
+        )}
+        {user.id_role === 0 && trades?.length > 0 && (
+          <CustomSelect
+            showSearchBar={true}
+            options={trades}
+            selectLabel="Todas las marcas"
+            placeHolder="Buscar marca"
+            customSelectId="trade-select"
+            parameterArray={tradesSelected}
+            setParameterArray={setTradesSelected}
+          />
+        )}
+      </div>
+      <div className="metric-cards">
+        {metricsData.map((metric, index) => (
+          <MetricCard
+            key={`${index}-${metric.value}`}
+            label={metric.label}
+            number={metric.value}
+          />
+        ))}
+      </div>
+      <div className="metrics-main-container">
+        <DashboardMetric
+          label={"Productos por estatus"}
+          description={
+            "Revisa el avance individual de cada estatus, utiliza los filtros para encontrar información precisa."
+          }
+          dataObject={productsByStatus}
+          retailerSelected={orderByStatus.retailerId}
+          queryObject={orderByStatus}
+          setQueryObject={(evt) => {
+            loadProductsByStatus(evt);
+            setOrderByStatus(evt);
+          }}
+          type="doughnut"
+          displayLegend={true}
+          showPercent={true}
+          displayScale={false}
+          totalFiltered={totalCount}
+          total={metricsData[0]?.value}
+        />
+        <DashboardMetric
+          label={"Productos solicitados"}
+          description={
+            "Filtra los productos solicitados por fecha y alcance para revisar rápidamente el flujo de trabajo."
+          }
+          dataObject={requiredProducts}
+          type="line"
+          indexAxis="x"
+          displayScale={true}
+          retailerSelected={orderByRequired.retailerId}
+          queryObject={orderByRequired}
+          setQueryObject={(evt) => {
+            setOrderByRequired(evt);
+          }}
+          borderColor={"#3B1366"}
+        />
+      </div>
+    </Container>
+  );
+};