Feature/creatives table sectors page

src/app/pages/creative-intelligence-suite/components/header/header.widget.tsx

@@ -17,7 +17,7 @@ export const HeaderWidget: FC = () => {
       </Link>
 
       <div className="flex-1" />
-      <RouteHiderWidget route="/business-settings/account-and-brands">
+      <RouteHiderWidget routes={["/business-settings/account-and-brands", "/business-settings/sectors"]}>
         <BrandSelectorWidget />
       </RouteHiderWidget>
       <CredentialsPanelWidget />

src/app/pages/creative-intelligence-suite/pages/business-settings/business-settings.routes.ts

@@ -7,11 +7,22 @@ const AccountAndBrands = lazy(
       "src/app/pages/creative-intelligence-suite/pages/business-settings/pages/account-and-brands/account-and-brands.page"
     ),
 );
+const Sectors = lazy(
+  () =>
+    import(
+      "src/app/pages/creative-intelligence-suite/pages/business-settings/pages/sectors/sectors.page"
+    ),
+);
 
 export const BusinessSettingsRoutes: Route[] = [
   {
     path: "/business-settings/account-and-brands",
     element: AccountAndBrands,
     title: "Account & Brands",
   },
+  {
+    path: "/business-settings/sectors",
+    element: Sectors,
+    title: "Sectors",
+  },
 ];

src/app/pages/creative-intelligence-suite/pages/business-settings/pages/sectors/pages/sectors/sectors.tsx

@@ -0,0 +1,61 @@
+import { FC, Fragment, useEffect, useState } from "react";
+import { Descriptions, Card, Typography } from "antd";
+import { EmptyCreateUI } from "src/app/ui/empty/empty-create.ui";
+import { useSessionFeature } from "src/app/features/session/session.feature";
+import useSectorsCount from "./userSectorsCount";
+import useSectorsName from "./useSectorsName";
+import { completedSector, sectorNameItem } from "src/graphql/client";
+import { LoadingPage } from "src/app/features/operations/features/loadings/pages/loading.page";
+
+const cardStyle: React.CSSProperties  = {
+    minWidth: 150,
+    minHeight: 120,
+    background: "rgba(0, 0, 0, 0.06)",
+    borderRadius: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: 'center',
+    textAlign: 'center',
+    rowGap: 15,
+    padding: 0
+    }
+const Sectors: FC = () => {
+    const [data, setData] = useState<Array<completedSector>>([])
+   const { getSectorsCount, isLoading: isLoadingCount } = useSectorsCount();
+   const { getSectorsName, isLoading: isLoadingName } = useSectorsName();
+   const getData = async () => {
+    const result = await Promise.all([getSectorsName(), getSectorsCount()]);
+    const names: Array<sectorNameItem> = result[0];
+    const joinedData = names.map((nameItem: sectorNameItem) => {
+        const { id } = nameItem;
+        const itemInCount = result[1].find((countItem) => countItem.id === id);
+        if (itemInCount) {
+            return { ...itemInCount, ...nameItem }
+        }
+        return {...nameItem};
+    })
+    setData(joinedData);
+   }
+   useEffect(() => {
+    getData()
+   }, [])
+   if (isLoadingName || isLoadingCount) {
+    return (<LoadingPage />);
+   }
+  return (
+    <div className="mb-4 flex gap-8 flex-wrap justify-between">
+            {data.map((item: completedSector) => (
+                <Fragment key={`card-${item.id}`}>
+                    <Card
+                    bodyStyle={{ display: "flex", flexDirection: "column",gap: 10, padding: 0}}
+                    style={cardStyle}>
+                        <p style={{ fontWeight: 700, wordBreak: "break-all", wordSpacing: "100vw", maxWidth: "140px"}}>{item.name}</p>
+                        <p>{item.count}</p>
+                    </Card>
+                </Fragment>
+
+            ))}
+    </div>
+  );
+};
+export default Sectors;

src/app/pages/creative-intelligence-suite/pages/business-settings/pages/sectors/pages/sectors/useSectorsName.ts

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+  import { sectorNameItem } from 'src/graphql/client';
+const sectorsNames = [
+  { id: 1, name: "Apparel and Accessories" },
+  { id: 2, name: "Beauty and Personal Care" },
+  { id: 3, name: "Food and Beverage" },
+  { id: 4, name: "Home and Garden" },
+  { id: 5, name: "Sports and Fitness" },
+  { id: 6, name: "Home Appliances" },
+  { id: 7, name: "Home Improvement" },
+  { id: 8, name: "Household Supplies" },
+  { id: 9, name: "Pet Care" },
+  { id: 10, name: "Tobacco and Smoking Accessories" },
+  { id: 11, name: "Toys and Games" },
+  { id: 12, name: "Oil and Gas" },
+  { id: 13, name: "Renewable Energy" },
+  { id: 14, name: "Utilities" },
+  { id: 15, name: "Banking and Lending" },
+  { id: 16, name: "Insurance" },
+  { id: 17, name: "Investment and Wealth Management" },
+  { id: 18, name: "Pharmaceuticals and Biotechnology" },
+  { id: 19, name: "Medical Devices" },
+  { id: 20, name: "Healthcare Services" },
+  { id: 21, name: "Construction and Engineering" },
+  { id: 22, name: "Aerospace and Defense" },
+  { id: 23, name: "Transportation Equipment" },
+  { id: 24, name: "Software and IT Services" },
+  { id: 25, name: "Hardware and Electronics" },
+  { id: 26, name: "Internet Services" },
+  { id: 27, name: "Telecommunications Equipment" },
+  { id: 28, name: "Telecommunications Services" },
+  { id: 29, name: "Networking Equipment" },
+  { id: 30, name: "Airlines and air transportation" }
+];
+const useSectorsName = () => {
+  const [ isLoading, setLoading ] = useState<boolean>(false)
+  const getSectorsName = async (): Promise<Array<sectorNameItem>> => {
+    setLoading(true);
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          setLoading(false);
+          resolve(sectorsNames);
+        }, 200);
+      });
+  }
+  return (
+    { getSectorsName, isLoading }
+  )
+}
+
+export default useSectorsName

src/app/pages/creative-intelligence-suite/pages/business-settings/pages/sectors/pages/sectors/userSectorsCount.ts

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import { sectorCountItem } from 'src/graphql/client';
+const sectorsCounts = [
+    { id: 1, count: 457 },
+    { id: 2, count: 512 },
+    { id: 3, count: 79 },
+    { id: 4, count: 687 },
+    { id: 5, count: 234 },
+    { id: 6, count: 820 },
+    { id: 7, count: 112 },
+    { id: 8, count: 400 },
+    { id: 9, count: 517 },
+    { id: 10, count: 300 },
+    { id: 11, count: 700 },
+    { id: 12, count: 120 },
+    { id: 13, count: 350 },
+    { id: 14, count: 600 },
+    { id: 15, count: 450 },
+    { id: 16, count: 250 },
+    { id: 17, count: 500 },
+    { id: 18, count: 100 },
+    { id: 19, count: 550 },
+    { id: 20, count: 200 },
+    { id: 21, count: 650 },
+    { id: 22, count: 150 },
+    { id: 23, count: 700 },
+    { id: 24, count: 50 },
+    { id: 25, count: 750 },
+    { id: 26, count: 400 },
+    { id: 27, count: 800 },
+    { id: 28, count: 350 },
+    { id: 29, count: 750 },
+    { id: 30, count: 300 }
+  ];
+  const useSectorsCount = () => {
+    const [ isLoading, setLoading ] = useState<boolean>(false)
+    const getSectorsCount = async (): Promise<Array<sectorCountItem>> => {
+      setLoading(true);
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            setLoading(false);
+            resolve(sectorsCounts);
+          }, 400);
+        });
+    }
+    return (
+      { getSectorsCount, isLoading }
+    )
+  }
+
+  export default useSectorsCount

src/app/pages/creative-intelligence-suite/pages/business-settings/pages/sectors/sectors.page.tsx

@@ -0,0 +1,18 @@
+import { Avatar, Descriptions, Divider, List, Typography  } from "antd";
+import { FC } from "react";
+import CardPageUI from "src/app/ui/cards/card-page.ui";
+import Sectors from "./pages/sectors/sectors"
+// import AccountPage from "./pages/account/account.page";
+// import BrandPage from "./pages/brands/brands.page";
+
+const SectorsPage: FC = () => {
+    const { Title } = Typography;
+  return (
+    <CardPageUI>
+        <Title level={2}>Sectors</Title>
+        <Divider />
+        <Sectors />
+    </CardPageUI>
+  );
+};
+export default SectorsPage;

src/app/pages/creative-intelligence-suite/pages/creative-lab/pages/creative-library/creative-library.page.tsx

@@ -1,8 +1,31 @@
-import { FC } from "react";
+import { FC, useEffect, useState } from "react";
 import CardPageUI from "src/app/ui/cards/card-page.ui";
 import { SearchInputUI } from "src/app/ui/inputs/search-input.ui";
+import { CreativesTableWidget } from "./creatives.table.widget"
+import { useSessionFeature } from "src/app/features/session/session.feature";
+import { CreativeLibraryFilter, CreativeLibraryItem } from "src/graphql/client";
+import { LoadingPage } from "src/app/features/operations/features/loadings/pages/loading.page";
+import useListFolder from "./useListFolder";
+
 
 const CreativeLibraryPage: FC = () => {
+  const [ data, setData ] = useState<Array<CreativeLibraryItem>>([]);
+  const { currentBrand } = useSessionFeature();
+  const request: CreativeLibraryFilter = { brandId: currentBrand?.id || ""}
+  const { isLoading, getCreatives } =  useListFolder();
+
+  const getData = async () => {
+    const creatives = await getCreatives(request);
+    setData(creatives as Array<CreativeLibraryItem>);
+  }
+  useEffect(() => {
+    getData();
+  }, [currentBrand])
+
+  if (isLoading) {
+    return (<LoadingPage />);
+  }
+
   return (
     <CardPageUI>
       <header
@@ -15,9 +38,9 @@ const CreativeLibraryPage: FC = () => {
           padding: "13px 0",
         }}
       >
-        <SearchInputUI />
+      <SearchInputUI />
       </header>
-      <pre>Insert Table here</pre>
+      <CreativesTableWidget data={data} />
     </CardPageUI>
   );
 };

src/app/pages/creative-intelligence-suite/pages/creative-lab/pages/creative-library/creatives.table.widget.tsx

@@ -0,0 +1,64 @@
+import { Avatar } from "antd";
+import { ColumnsType } from "antd/es/table";
+import { FC } from "react";
+import { TableUI } from "src/app/ui/tables/table.ui";
+import { Brand, CreativeLibraryItem } from "src/graphql/client";
+const dateFormatter = (date: string): string => {
+  const currentDate = new Date(date);
+  const yyyy = currentDate.getFullYear();
+  let mm : string | number = currentDate.getMonth() + 1; // Months start at 0!
+  let dd: string | number = currentDate.getDate();
+
+  if (dd < 10) dd = '0' + dd;
+  if (mm < 10) mm = '0' + mm;
+
+const result = dd + '/' + mm + '/' + yyyy;
+return result;
+}
+export const CreativesTableWidget: FC<any> = ({ data = [] }) => {
+  const generateCreativeKey = (creative: CreativeLibraryItem) => ({ ...creative, key: creative.creativeId });
+  const columns: ColumnsType<CreativeLibraryItem> = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      render: (name, { url }) => {
+        return (
+          <div style={{ display: "flex", gap: "8px" }}>
+            <img width={32} src={url} alt={url} />
+            <div className="flex items-center">
+              <div>{name}</div>
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      title: "Uploaded Date",
+      dataIndex: "createdAt",
+      render: (createdAt) => {
+        return (
+          <div style={{ display: "flex", gap: "8px" }}>
+            <div className="flex items-center">
+              <div>{dateFormatter(createdAt)}</div>
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      title: "File Type",
+      dataIndex: "fileType",
+      render: (fileType) => {
+        return (
+          <div style={{ display: "flex", gap: "8px" }}>
+            <div className="flex items-center">
+              <div style={{ textTransform: "capitalize"}}>{fileType?.toLowerCase()}</div>
+            </div>
+          </div>
+        );
+      },
+    },
+  ];
+
+  return <TableUI columns={columns} data={data.map(generateCreativeKey)} />;
+};

src/app/pages/creative-intelligence-suite/pages/creative-lab/pages/creative-library/useListFolder.ts

@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import { client } from "src/app/features/repositories/clients/graphql.client";
+import { CreativeLibraryFilter, CreativeLibraryItem } from 'src/graphql/client';
+
+const useListFolder = () => {
+  const [ isLoading, setLoading ] = useState<boolean>(false)
+  const getCreatives = async (request: CreativeLibraryFilter) => {
+    setLoading(true)
+    try {
+      const result = client.chain.query.listFolder({ input: request });
+      const creatives = await result.creatives.get({
+        id: false,
+        parentId: false,
+        path:false,
+        folders: false,
+        creatives:false,
+        updatedAt:true,
+        __typename:true,
+        __scalar:true,
+      })
+      setLoading(false)
+      return creatives;
+    } catch (err: any) {
+      setLoading(false)
+      console.log(`Error retrieving business account: ${err.message}`);
+      return []
+    }
+  }
+  return (
+    { getCreatives, isLoading }
+  )
+}
+
+export default useListFolder

src/app/widgets/hider/route-hider.widget.tsx

@@ -2,13 +2,17 @@ import { FC } from "react";
 import { useNavigationFeature } from "src/app/features/navigation/navigation.feature";
 
 interface RouteHiderProps {
-  route: string;
+  routes: Array<string>;
+
 }
+const checkRoute = (currentPathName: string, routes: Array<string>) => {
+  return routes.some((r) => r === currentPathName)
 
-export const RouteHiderWidget: FC<RouteHiderProps> = ({ children, route }) => {
+}
+export const RouteHiderWidget: FC<RouteHiderProps> = ({ children, routes }) => {
   const { getPathName } = useNavigationFeature();
 
-  if (getPathName() === route) return <></>;
+  if (checkRoute(getPathName(), routes)) return <></>;
 
   return <div className="animFadeIn">{children}</div>;
 };