Add a new 'Sectors' page

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,52 @@
+import { FC, useEffect, useState } from "react";
+import CardPageUI from "src/app/ui/cards/card-page.ui";
+import SectorsGridWidget from "./widgets/sectors.grid.widget";
+import { sectorsNames, transformedArray } from "./temp-data";
+import { SectorDataItem } from "src/graphql/client";
+
+const SectorsPage: FC = () => {
+  const [sectorData, setSectorData] = useState<SectorDataItem[]>([]);
+
+  const fakeSectorRequest = (respData: SectorDataItem[], delay: number) => {
+    return new Promise<SectorDataItem[]>((resolve, reject) => {
+      setTimeout(() => {
+        resolve(respData);
+      }, delay);
+    });
+  };
+
+  // Make fake requests to each endpoint on mount and set the sectorData
+  useEffect(() => {
+    fakeSectorRequest(sectorsNames, 100).then((resp) => {
+      setSectorData((prev) =>
+        !prev.length
+          ? resp
+          : prev.map((item) => ({
+              ...item,
+              name: resp.find((i) => i.id === item.id)?.name,
+            })),
+      );
+    });
+
+    fakeSectorRequest(transformedArray, 1100).then((resp) => {
+      setSectorData((prev) =>
+        !prev.length
+          ? resp
+          : prev.map((item) => ({
+              ...item,
+              count: resp.find((i) => i.id === item.id)?.count,
+            })),
+      );
+    });
+  }, []);
+
+  return (
+    <CardPageUI>
+      <div className="p-4">
+        <h1 className="text-2xl font-bold">Sectors</h1>
+        <SectorsGridWidget data={sectorData} />
+      </div>
+    </CardPageUI>
+  );
+};
+export default SectorsPage;

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

@@ -0,0 +1,65 @@
+export 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" },
+];
+
+export const transformedArray = [
+  { 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/pages/sectors/ui/sector-card.ui.tsx

@@ -0,0 +1,13 @@
+import { FC } from "react";
+import { SectorDataItem } from "src/graphql/client";
+
+export const SectorCardUI: FC<{ sectorData: SectorDataItem }> = ({
+  sectorData,
+}) => {
+  return (
+    <div className="text-bold flex flex-col items-center justify-center gap-4 bg-[#ececec] p-6">
+      <p className="text-md text-center font-bold">{sectorData?.name}</p>
+      <p className="text-lg">{sectorData?.count}</p>
+    </div>
+  );
+};

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

@@ -0,0 +1,17 @@
+import { FC } from "react";
+import { SectorCardUI } from "../ui/sector-card.ui";
+import { SectorDataItem } from "src/graphql/client";
+import { Spin } from "antd";
+
+const SectorsGridWidget: FC<any> = ({ data = [] }) => {
+  return data.length && data[0]?.name && data[0]?.count ? (
+    <div className="mt-6 grid grid-cols-2 gap-6 md:grid-cols-3 lg:mt-10 lg:grid-cols-5 xl:grid-cols-6 xl:gap-x-10">
+      {data.map((sector: SectorDataItem) => {
+        return <SectorCardUI sectorData={sector} />;
+      })}
+    </div>
+  ) : (
+    <Spin size="large" className="mt-6" />
+  );
+};
+export default SectorsGridWidget;

src/graphql/client/schema.ts

@@ -546,6 +546,12 @@ export interface Brand {
   __typename: "Brand";
 }
 
+export interface SectorDataItem {
+  id: number;
+  name?: string;
+  count?: number;
+}
+
 export type Sector =
   | "ApparelAndAccessories"
   | "BeautyAndPersonalCare"
@@ -5100,9 +5106,7 @@ export interface BrandObservableChain {
 
 export interface MutationPromiseChain {
   /** Creates a business Account for the provided business admin */
-  createBrand: (args: {
-    input: CreateBrandInput;
-  }) => BrandPromiseChain & {
+  createBrand: (args: { input: CreateBrandInput }) => BrandPromiseChain & {
     get: <R extends BrandRequest>(
       request: R,
       defaultValue?: FieldsSelection<Brand, R>,
@@ -5238,9 +5242,7 @@ export interface MutationPromiseChain {
   };
 
   /** Log in user */
-  logIn: (args: {
-    input: AuthenticationInput;
-  }) => LoggedInUserPromiseChain & {
+  logIn: (args: { input: AuthenticationInput }) => LoggedInUserPromiseChain & {
     get: <R extends LoggedInUserRequest>(
       request: R,
       defaultValue?: FieldsSelection<LoggedInUser, R>,
@@ -5256,9 +5258,7 @@ export interface MutationPromiseChain {
   };
 
   /** Update user profile. If setting new password and current password is invalid, BAD_REQUEST is thrown */
-  updateUserProfile: (args: {
-    input: UserProfileInput;
-  }) => UserPromiseChain & {
+  updateUserProfile: (args: { input: UserProfileInput }) => UserPromiseChain & {
     get: <R extends UserRequest>(
       request: R,
       defaultValue?: FieldsSelection<User, R>,
@@ -5295,9 +5295,7 @@ export interface MutationPromiseChain {
 
 export interface MutationObservableChain {
   /** Creates a business Account for the provided business admin */
-  createBrand: (args: {
-    input: CreateBrandInput;
-  }) => BrandObservableChain & {
+  createBrand: (args: { input: CreateBrandInput }) => BrandObservableChain & {
     get: <R extends BrandRequest>(
       request: R,
       defaultValue?: FieldsSelection<Brand, R>,