Challenge front end tech test Developer Pablo Stolarczuk

src/app/features/repositories/catalog/folders.repository.ts

@@ -0,0 +1,17 @@
+import { client } from "../clients/graphql.client";
+import { CreativeLibraryFolder } from "src/graphql/client";
+import { FolderRepository } from "src/domain/folders/folders.domain";
+
+export class FolderBackendRepository implements FolderRepository {
+
+  async getFolders(brandId:string) {
+    try {
+      const folder = await client.chain.query.listFolder({input : {brandId:brandId}})
+      .get({creatives:{name:true,fileType:true,createdAt:true,clipEmbeddingUrl:true,url:true}});
+      return (folder as CreativeLibraryFolder) ?? null;
+    } catch (err: any) {
+      throw new Error(`Error retrieving folder: ${err.message}`);
+    }
+  }
+}
+

src/app/features/repositories/catalog/index.ts

@@ -3,6 +3,8 @@ import { UsersBackendRepository } from "./users.repository";
 import { AssetsBackendRepository } from "./assets.repository";
 import { BusinessBackendRepository } from "./business.repository";
 import { EarlyAccessBackendRepository } from "./early-access.repository";
+import { FolderBackendRepository } from "./folders.repository";
+import { SectorsBackendRepository } from "./sectors.repository";
 
 export const repository = new Map();
 
@@ -11,3 +13,5 @@ repository.set("UsersRepository", UsersBackendRepository);
 repository.set("AssetsRepository", AssetsBackendRepository);
 repository.set("EarlyAccessRepository", EarlyAccessBackendRepository);
 repository.set("BusinessRepository", BusinessBackendRepository);
+repository.set("FolderBackendRepository", FolderBackendRepository);
+repository.set("SectorsBackendRepository", SectorsBackendRepository);

src/app/features/repositories/catalog/sectors.repository.ts

@@ -0,0 +1,87 @@
+import { SectorsRepository,SectorsCounts,SectorsNames } from "src/domain/sectors/sectors.domain";
+
+export class SectorsBackendRepository implements SectorsRepository {
+
+async getSectorsCount(): Promise<SectorsCounts[]> {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve(sectorsCounts as SectorsCounts[])
+        }, 2000);
+    });
+  }
+
+  async getSectorsName(): Promise<SectorsNames[]> {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve(sectorsNames as SectorsNames[])
+        }, 2000);
+    });
+  }
+
+}
+
+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 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 }
+  ];

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

@@ -8,10 +8,22 @@ const AccountAndBrands = lazy(
     ),
 );
 
+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/sectors.page.tsx

@@ -0,0 +1,50 @@
+import { FC } from "react";
+import { useSectorsDomain,SectorsCounts,SectorsNames } from "src/domain/sectors/sectors.domain";
+import CardPageUI from "src/app/ui/cards/card-page.ui";
+import { SpinnerUI } from "src/app/features/operations/ui/spinner.ui";
+import { useState, useEffect } from 'react'
+
+const SectorsPage: FC = () => {
+  const { getSectorsCount,getSectorsName } = useSectorsDomain();
+  const [sectorsNames,setSectorsNames] = useState<SectorsNames[]>();
+  const [sectorsCounts,setSectorsCounts] = useState<SectorsCounts[]>();
+
+  useEffect(()=>{
+    getCounts();
+    getNames();
+  },[])
+
+  const getNames = async ()=>{
+    try{
+        const data = await getSectorsName();
+        setSectorsNames(data)
+    }catch(err){
+        console.log(err)
+    }
+}
+
+const getCounts = async ()=>{
+    try{
+        const data = await getSectorsCount();
+        setSectorsCounts(data)
+    }catch(err){
+        console.log(err)
+    }
+}
+
+  return (
+    <CardPageUI>
+        <h1>Sectors</h1>
+        {(!sectorsCounts || !sectorsNames) && <div className="flex justify-center">
+            <SpinnerUI/>
+        </div>}
+        <div className="flex flex-wrap">
+            {sectorsNames?.map(recordName=><div className="flex flex-col justify-between items-center text-center m-6 h-20 w-40">
+                    <p className="sector">{recordName.name}</p>
+                    <p>{sectorsCounts?.filter(recordCount=>recordCount.id===recordName.id)[0].count}</p>
+            </div>)}
+        </div>
+   </CardPageUI>
+  );
+};
+export default SectorsPage;

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

@@ -1,6 +1,7 @@
 import { FC } 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 "./creative-library.table.widget";
 
 const CreativeLibraryPage: FC = () => {
   return (
@@ -17,8 +18,12 @@ const CreativeLibraryPage: FC = () => {
       >
         <SearchInputUI />
       </header>
-      <pre>Insert Table here</pre>
+      <pre>
+        <CreativesTableWidget/>
+      </pre>
     </CardPageUI>
   );
 };
 export default CreativeLibraryPage;
+
+

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

@@ -0,0 +1,65 @@
+import { Avatar } from "antd";
+import { FC } from "react";
+import { useSessionFeature } from "src/app/features/session/session.feature" ;
+import { useFoldersDomain } from "src/domain/folders/folders.domain";
+import { useState, useEffect } from 'react'
+import { CreativeLibraryFolder } from "src/graphql/client";
+
+export const CreativesTableWidget: FC<any> = () => {
+
+    const { currentBrand } = useSessionFeature();
+    const { getFolders } =  useFoldersDomain();
+
+    const [folders,setFolders] = useState<CreativeLibraryFolder>();
+
+    useEffect(()=>{
+        getCreatives()
+    },[currentBrand])
+
+    const getCreatives = async ()=>{
+        try{
+            const data = await getFolders(currentBrand?.id || '');
+            setFolders(data)
+        }catch(err){
+            console.log(err)
+        }
+    }
+
+if (!folders || !folders.creatives){
+    return null
+}
+
+return <div>
+    <table id="library-page-creatives-table">
+        <thead>
+            <tr>
+                <th className="">Name</th>
+                <th>Uploaded Date</th>
+                <th>File Type</th>
+            </tr>
+        </thead>
+        <tbody>
+            {folders?.creatives.map(creative=>{
+                return <tr>
+                    <td>
+                        <Avatar
+                            src={creative.url}
+                            style={{
+                                backgroundColor: "rgb(230 244 255)",
+                                color: "#1677ff",
+                                fontWeight: "bold",
+                                marginRight:'10px'
+                            }}
+                            >
+                            {creative.url ? "" : name[0]}
+                        </Avatar>
+                        {creative.name}
+                    </td>
+                    <td>{creative.createdAt.slice(0,10)}</td>
+                    <td>{creative.fileType}</td>
+                </tr>
+            })}
+        </tbody>
+    </table>
+</div>
+};

src/domain/folders/folders.domain.ts

@@ -0,0 +1,18 @@
+import { useRepositoryFeature } from "src/app/features/repositories/repositories.feature";
+import { CreativeLibraryFolder } from "src/graphql/client";
+
+export interface FolderRepository {
+  getFolders(brandId:string): Promise<CreativeLibraryFolder>;
+}
+
+export const useFoldersDomain = (repoId = "FolderBackendRepository") => {
+  const { repository } = useRepositoryFeature<FolderRepository>(repoId);
+
+  const getFolders = (brandId:string) => {
+    return repository.getFolders(brandId);
+  };
+
+  return {
+    getFolders
+  };
+};

src/domain/sectors/sectors.domain.ts

@@ -0,0 +1,33 @@
+import { useRepositoryFeature } from "src/app/features/repositories/repositories.feature";
+
+export interface SectorsCounts{
+    id: number;
+    count:number;
+}
+
+export interface SectorsNames{
+    id: number;
+    name:string;
+}
+
+export interface SectorsRepository {
+    getSectorsName(): Promise<SectorsNames[]>;
+    getSectorsCount(): Promise<SectorsCounts[]>;
+}
+
+export const useSectorsDomain = (repoId = "SectorsBackendRepository") => {
+  const { repository } = useRepositoryFeature<SectorsRepository>(repoId);
+
+  const getSectorsName = () => {
+    return repository.getSectorsName();
+  };
+
+  const getSectorsCount = () => {
+    return repository.getSectorsCount();
+  };
+
+  return {
+    getSectorsName,
+    getSectorsCount
+  };
+};

src/main.css

@@ -41,4 +41,24 @@ input:focus {
   border-color: #0366d6;
   outline: none;
   box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
+}
+
+table#library-page-creatives-table {
+  width: 100%;
+  table-layout: fixed;
+}
+
+table#library-page-creatives-table thead tr th {
+    text-align: left;
+    padding: 5px;
+}
+
+table#library-page-creatives-table tbody tr td {
+  padding: 5px;
+}
+
+.sector{
+    font-size: small;
+    font-weight: 700;
+    color:rgb(70, 69, 69)
 }