contentoh-components-library 21.1.98 → 21.2.1

package/src/components/organisms/DashboardMetric/DashboardMetric.stories.js

@@ -0,0 +1,28 @@
+import { DashboardMetric } from "./index";
+
+export default {
+  title: "Components/organisms/DashboardMetric",
+  component: DashboardMetric,
+};
+
+const Template = (args) => <DashboardMetric {...args} />;
+export const DashboardMetricDefault = Template.bind({});
+DashboardMetricDefault.args = {
+  label: "Productos por estatus",
+  description:
+    "Revisa el avance individual de cada estatus, utiliza los filtros para encontrar información precisa.",
+  dataObject: {
+    AA: 89,
+    ACA: 11,
+    AC: 100,
+    AP: 60,
+    AS: 300,
+    CA: 50,
+    PA: 100,
+    IE: 700,
+    RA: 50,
+    RCA: 90,
+    RC: 11,
+    RP: 49,
+  },
+};

package/src/components/organisms/DashboardMetric/index.js

@@ -0,0 +1,128 @@
+import { Container } from "./styles";
+import { MetricSelect } from "../../atoms/MetricSelect";
+import { Graphic } from "../../atoms/Graphic";
+import { Calendar } from "../Calendar";
+import { useEffect, useState } from "react";
+
+export const DashboardMetric = ({
+  label,
+  description,
+  retailerSelected,
+  dataObject = { AA: 89 },
+  indexAxis = "y",
+  type = "bar",
+  scale = "x",
+  displayScale = false,
+  retailers = [],
+  setQueryObject,
+}) => {
+  const onChangeRetailer = (e) => {
+    setQueryObject((current) => ({ ...current, retailerId: e.target.value }));
+  };
+
+  const [startDate, setStartDate] = useState(new Date());
+  const [endDate, setEndDate] = useState(new Date());
+
+  useEffect(() => {
+    const today = new Date();
+    const firstWeekDay = today.getDate() - today.getDay();
+    const start = `${today.getFullYear()}-${
+      today.getMonth() + 1
+    }-${firstWeekDay}`;
+    const end = new Date();
+    setStartDate(new Date(start));
+    setEndDate(end);
+  }, []);
+
+  const onChange = (dates) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+    if (end)
+      setQueryObject((current) => ({
+        ...current,
+        startDate: `${start.getFullYear()}-${start.getDate()}-${
+          start.getMonth() + 1
+        }`,
+        endDate: `${end?.getFullYear()}-${end?.getDate()}-${
+          end?.getMonth() + 1
+        }`,
+      }));
+  };
+
+  const labels = Object.keys(dataObject);
+  const values = Object.values(dataObject);
+  const retailersArray = Object.values(retailers).sort((a, b) => {
+    if (a.name > b.name) {
+      return 1;
+    }
+    if (a.name < b.name) {
+      return -1;
+    }
+    // a must be equal to b
+    return 0;
+  });
+  const colorsArray = values.map(
+    () => `#${Math.floor(Math.random() * 16777215).toString(16)}`
+  );
+
+  const data = {
+    labels,
+    datasets: [
+      {
+        data: values,
+        backgroundColor: colorsArray,
+      },
+    ],
+  };
+
+  const options = {
+    indexAxis,
+    elements: {
+      bar: {
+        borderWidth: 2,
+      },
+    },
+    responsive: true,
+    maintainAspectRatio: false,
+    aspectRatio: 1,
+    plugins: {
+      legend: {
+        position: "right",
+        display: false,
+      },
+      title: {
+        display: false,
+      },
+    },
+    scales: {
+      [scale]: {
+        ticks: {
+          display: displayScale,
+        },
+      },
+    },
+  };
+
+  return (
+    <Container>
+      <div className="text-container">
+        <p>{label}</p>
+        <p>{description}</p>
+      </div>
+      <div className="select-container">
+        <Calendar onChange={onChange} startDate={startDate} endDate={endDate} />
+        <MetricSelect
+          className={"select"}
+          label={"Cadena comercial"}
+          optionSelected={retailerSelected}
+          options={retailersArray}
+          onChange={onChangeRetailer}
+        />
+      </div>
+      <div className="graphic-cotainer">
+        <Graphic data={data} options={options} type={type} />
+      </div>
+    </Container>
+  );
+};

package/src/components/organisms/DashboardMetric/styles.js

@@ -0,0 +1,60 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  border: 1px solid ${GlobalColors.s3};
+  border-radius: 5px;
+  padding: 24px;
+
+  .text-container {
+    p {
+      font-family: ${FontFamily.Raleway};
+      color: ${GlobalColors.s5};
+      font-size: 17px;
+
+      &:last-of-type {
+        font-size: 12px;
+        color: ${GlobalColors.s4};
+      }
+
+      & + * {
+        margin-top: 5px;
+      }
+    }
+
+    & + * {
+      margin-top: 15px;
+    }
+  }
+
+  .select-container {
+    display: flex;
+
+    .select {
+      flex: 0.1 1 30%;
+
+      select {
+        width: 100%;
+      }
+
+      & + * {
+        margin-left: 10px;
+      }
+    }
+
+    & + * {
+      margin-top: 10px;
+    }
+  }
+
+  .graphic-cotainer {
+    height: 300px;
+    border: 1px solid ${GlobalColors.s3};
+    padding: 10px;
+    border-radius: 5px;
+
+    div {
+      height: fill-available;
+    }
+  }
+`;

package/src/components/organisms/FullProductNameHeader/index.js

@@ -60,7 +60,7 @@ export const FullProductNameHeader = ({
               value: headerData?.article?.company_name,
             },
             {
-              feature: "UPC",
+              feature: "SKU",
               value: headerData?.article?.upc || headerData?.upc,
             },
           ]}

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

@@ -0,0 +1,10 @@
+import { Dashboard } from ".";
+
+export default {
+  title: "Components/pages/Dashboard",
+  component: Dashboard,
+};
+
+const Template = (args) => <Dashboard {...args} />;
+export const DashboardDeafult = Template.bind({});
+DashboardDeafult.args = {};

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

@@ -0,0 +1,126 @@
+import { Container } from "./styles";
+import { MetricCard } from "../../atoms/MetricCard";
+import { DashboardMetric } from "../../organisms/DashboardMetric";
+import { useEffect, useState } from "react";
+import axios from "axios";
+
+export const Dashboard = () => {
+  const [metricsData, setMetricsData] = useState([]);
+  const [productsByStatus, setProductsByStatus] = useState({});
+  const [requiredProducts, setRequiredProducts] = useState([]);
+  const [orderByStatus, setOrderByStatus] = useState({});
+  const [orderByRequired, setOrderByRequired] = useState({});
+  const [retailers, setRetailers] = useState({});
+
+  const loadProductVersions = async (byStatus, queryObject) => {
+    const { retailerId, startDate, endDate, fullData } = queryObject;
+    const query = fullData
+      ? `fullData=true`
+      : `retailerId=${retailerId}&startDate=${startDate}&endDate=${endDate}`;
+    try {
+      const response = await axios.get(
+        byStatus
+          ? `${process.env.REACT_APP_READ_ORDERS_BY_STATUS}?${query}`
+          : `${process.env.REACT_APP_READ_REQUIRED_ORDERS}?retailerId=${retailerId}&startDate=${startDate}&endDate=${endDate}`
+      );
+
+      const versionList = JSON.parse(response.data.body);
+      return versionList;
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const getRetailers = async () => {
+    const retailersResponse = await axios.get(
+      `${process.env.REACT_APP_RETAILER_ENDPOINT}`,
+      {
+        headers: {
+          Authorization: sessionStorage.getItem("jwt"),
+        },
+      }
+    );
+    setRetailers(JSON.parse(retailersResponse.data.body).data);
+  };
+
+  const loadProductsByStatus = async (orderByStatus) => {
+    const { orders, fullData } = await loadProductVersions(true, orderByStatus);
+    setMetricsData([
+      { label: "Productos totales", value: fullData?.total },
+      { label: "Productos sin asignar", value: fullData?.PA },
+      { label: "Productos en proceso", value: fullData?.CA },
+      { label: "Productos terminados", value: fullData?.AP },
+    ]);
+    setProductsByStatus(orders);
+  };
+
+  const loadRequiredProducts = async (orderByRequired) => {
+    const { dates } = await loadProductVersions(false, orderByRequired);
+    setRequiredProducts(dates);
+  };
+
+  useEffect(() => {
+    const today = new Date();
+    const firstWeekDay = today.getDate() - today.getDay();
+    const startDate = `${today.getFullYear()}-${firstWeekDay}-${
+      today.getMonth() + 1
+    }`;
+    const endDate = `${today.getFullYear()}-${today.getDate()}-${
+      today.getMonth() + 1
+    }`;
+    const queryObject = { retailerId: "58", startDate, endDate };
+    setOrderByStatus(queryObject);
+    setOrderByRequired(queryObject);
+    getRetailers();
+  }, []);
+
+  useEffect(() => {
+    loadProductsByStatus(orderByStatus);
+  }, [orderByStatus]);
+
+  useEffect(() => {
+    loadRequiredProducts(orderByRequired);
+  }, [orderByRequired]);
+
+  return (
+    <Container>
+      <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}
+          retailers={retailers}
+          queryObject={orderByStatus}
+          setQueryObject={setOrderByStatus}
+        />
+        <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"
+          scale="x"
+          displayScale={true}
+          retailers={retailers}
+          retailerSelected={orderByRequired.retailerId}
+          queryObject={orderByRequired}
+          setQueryObject={setOrderByRequired}
+        />
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  padding: 30px;
+  .metric-cards {
+    display: flex;
+
+    > * + * {
+      margin-left: 10px;
+    }
+
+    & + * {
+      margin-top: 10px;
+    }
+  }
+
+  .metrics-main-container {
+    display: flex;
+
+    > * + * {
+      margin-left: 10px;
+    }
+  }
+`;

package/src/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js

@@ -21,170 +21,102 @@ ProviderProductEditionDefault.args = {
   category: 846,
   version: 2,
   productSelected: {
-    articleStatus: "ACA",
-    version: 5,
-    missing: {},
+    orderId: 2446,
+    article_status: "AP",
+    datasheet_status: "AP",
+    description_status: "AP",
+    images_status: "ACA",
+    prio: "none",
+    version: 2,
+    brand: null,
     article: {
       category:
-        "Materiales de Construcción|Impermeabilizantes y Recubrimientos|Selladores",
-      company_name: "SIKA MEXICANA S.A. DE C.V.",
-      company_id: 383,
-      id_category: "2249",
-      id_article: 29457,
-      name: "SIKA TECHO FRESCO SUPER 15",
-      upc: "111187",
+        "Organizadores y Closets|Accesorios de Lavandería|Organizadores de Lavandería",
+      company_name: "WOMEX SA DE CV",
+      id_company: 424,
+      country: null,
+      id_category: "2522",
+      id_article: 78773,
+      name: "RACK PARA ROPA DOBLE NEGRO",
+      upc: "168462",
     },
-    asignations: [],
     retailers: [
       {
         id: 58,
         name: "The Home Depot Golden",
-        country: "México",
-        id_region: 1,
-        active: 1,
-      },
-      {
-        id: 59,
-        name: "The Home Depot Platinum",
-        country: "México",
-        id_region: 1,
-        active: 1,
-      },
-      {
-        id: 61,
-        name: "Home Depot TAB",
-        country: "México",
-        id_region: 1,
-        active: 1,
       },
     ],
-    percentage: 33.35,
+    services: {
+      datasheets: 1,
+      descriptions: 1,
+      images: 1,
+    },
+    statusByRetailer: {
+      58: {
+        datasheet: "AP",
+        description: "AP",
+        images: "ACA",
+      },
+    },
+    retailersWithService: ["58"],
+    id_article: 78773,
     retailersAvailable: [
       {
         id: 58,
         name: "The Home Depot Golden",
-        country: "México",
-        id_region: 1,
-        active: 1,
-      },
-      {
-        id: 59,
-        name: "The Home Depot Platinum",
-        country: "México",
-        id_region: 1,
-        active: 1,
-      },
-      {
-        id: 61,
-        name: "Home Depot TAB",
-        country: "México",
-        id_region: 1,
-        active: 1,
-      },
-    ],
-    upc: "111187",
-    name: "SIKA TECHO FRESCO SUPER 15",
-    categoryName:
-      "Materiales de Construcción|Impermeabilizantes y Recubrimientos|Selladores",
-    id_category: "2249",
-    id_article: 29457,
-    services: [
-      {
-        id_article: 29457,
-        service: "datasheet",
-        quantity: 1,
-        price: 0,
-        id_user: 1237,
-        datasheet_common: null,
-        discount: null,
       },
     ],
   },
   productToEdit: {
-    idCategory: "2249",
-    ArticleId: 29457,
-    product: [
-      {
-        articleStatus: "ACA",
-        version: 5,
-        missing: {},
-        article: {
-          category:
-            "Materiales de Construcción|Impermeabilizantes y Recubrimientos|Selladores",
-          company_name: "SIKA MEXICANA S.A. DE C.V.",
-          company_id: 383,
-          id_category: "2249",
-          id_article: 29457,
-          name: "SIKA TECHO FRESCO SUPER 15",
-          upc: "111187",
+    ArticleId: 78773,
+    idCategory: "2522",
+    product: {
+      orderId: 2446,
+      article_status: "AP",
+      datasheet_status: "AP",
+      description_status: "AP",
+      images_status: "ACA",
+      prio: "none",
+      version: 2,
+      brand: null,
+      article: {
+        category:
+          "Organizadores y Closets|Accesorios de Lavandería|Organizadores de Lavandería",
+        company_name: "WOMEX SA DE CV",
+        id_company: 424,
+        country: null,
+        id_category: "2522",
+        id_article: 78773,
+        name: "RACK PARA ROPA DOBLE NEGRO",
+        upc: "168462",
+      },
+      retailers: [
+        {
+          id: 58,
+          name: "The Home Depot Golden",
         },
-        asignations: [],
-        retailers: [
-          {
-            id: 58,
-            name: "The Home Depot Golden",
-            country: "México",
-            id_region: 1,
-            active: 1,
-          },
-          {
-            id: 59,
-            name: "The Home Depot Platinum",
-            country: "México",
-            id_region: 1,
-            active: 1,
-          },
-          {
-            id: 61,
-            name: "Home Depot TAB",
-            country: "México",
-            id_region: 1,
-            active: 1,
-          },
-        ],
-        percentage: 33.35,
-        retailersAvailable: [
-          {
-            id: 58,
-            name: "The Home Depot Golden",
-            country: "México",
-            id_region: 1,
-            active: 1,
-          },
-          {
-            id: 59,
-            name: "The Home Depot Platinum",
-            country: "México",
-            id_region: 1,
-            active: 1,
-          },
-          {
-            id: 61,
-            name: "Home Depot TAB",
-            country: "México",
-            id_region: 1,
-            active: 1,
-          },
-        ],
-        upc: "111187",
-        name: "SIKA TECHO FRESCO SUPER 15",
-        categoryName:
-          "Materiales de Construcción|Impermeabilizantes y Recubrimientos|Selladores",
-        id_category: "2249",
-        id_article: 29457,
-        services: [
-          {
-            id_article: 29457,
-            service: "datasheet",
-            quantity: 1,
-            price: 0,
-            id_user: 1237,
-            datasheet_common: null,
-            discount: null,
-          },
-        ],
+      ],
+      services: {
+        datasheets: 1,
+        descriptions: 1,
+        images: 1,
       },
-    ],
+      statusByRetailer: {
+        58: {
+          datasheet: "AP",
+          description: "AP",
+          images: "ACA",
+        },
+      },
+      retailersWithService: ["58"],
+      id_article: 78773,
+      retailersAvailable: [
+        {
+          id: 58,
+          name: "The Home Depot Golden",
+        },
+      ],
+    },
   },
   location: {
     state: { origin: "Contentoh" },

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

@@ -271,13 +271,13 @@ export const ProviderProductEdition = ({
     setServices(services);
     await getServices();
 
-    if (!originProp) {
-      setActiveRetailer(
-        product?.retailers
-          ? product?.retailers[0]
-          : product?.retailersAvailable[0]
-      );
-    }
+    // if (!originProp) {
+    //   setActiveRetailer(
+    //     product?.retailers
+    //       ? product?.retailers[0]
+    //       : product?.retailersAvailable[0]
+    //   );
+    // }
 
     // setActiveRetailer(product?.retailers[0]);
     setImages({ action: "init", init: services[2] });

package/src/index.js

@@ -63,6 +63,7 @@ export * from "./components/organisms/ProductImageModal/index";
 export * from "./components/pages/ChangePasswordLogin";
 export * from "./components/pages/CustomerLogin";
 export * from "./components/pages/CustomerType";
+export * from "./components/pages/Dashboard";
 export * from "./components/pages/EmailResetPassword";
 export * from "./components/pages/OnboardPlan";
 export * from "./components/pages/RegistrationLoginSecondStep";