feat: sector & create table added

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

@@ -3,6 +3,8 @@ import { BusinessRepository } from "src/domain/business/business.domain";
 import {
   BusinessAccount,
   CreateBusinessAccountInput,
+  CreativeLibraryFilter,
+  CreativeLibraryItemRequest,
 } from "src/graphql/client";
 
 export class BusinessBackendRepository implements BusinessRepository {
@@ -40,4 +42,27 @@ export class BusinessBackendRepository implements BusinessRepository {
       throw new Error(`Error retrieving business account: ${err.message}`);
     }
   }
+
+  async getListFolder(brandId: string): Promise<any> {
+    try {
+      const cretive: CreativeLibraryFilter = {
+        brandId: brandId,
+      };
+      const creative: CreativeLibraryItemRequest = {
+        fileType: 1,
+        updatedAt: 1,
+        name: 1,
+        url: 1,
+      };
+
+      const user = await client.chain.query.listFolder({ input: cretive }).get({
+        __typename: 1,
+        updatedAt: 1,
+        creatives: creative,
+      });
+      return (user && user.creatives) || null;
+    } catch (err: any) {
+      throw new Error(`Error retrieving business account: ${err.message}`);
+    }
+  }
 }

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 Sector = lazy(
+  () =>
+    import(
+      "src/app/pages/creative-intelligence-suite/pages/business-settings/pages/Selector/pages/Select"
+    ),
+);
 
 export const BusinessSettingsRoutes: Route[] = [
   {
     path: "/business-settings/account-and-brands",
     element: AccountAndBrands,
     title: "Account & Brands",
   },
+  {
+    path: "/business-settings/sectors",
+    element: Sector,
+    title: "Sectors",
+  },
 ];

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

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import CardPageUI from "src/app/ui/cards/card-page.ui";
+import Card from "./SelectCard";
+import { SpinnerUI } from "src/app/features/operations/ui/spinner.ui";
+const Select = () => {
+  const [load, setLoad] = useState(true);
+  setTimeout(() => {
+    setLoad(false);
+  }, 1300);
+  return (
+    <CardPageUI>
+      {load ? (
+        <div className="flex h-[100vh] items-center justify-center">
+          <SpinnerUI />
+        </div>
+      ) : (
+        <>
+          <h3 className="mb-8 mt-8 text-3xl font-bold">Selectors</h3>
+          <div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
+            <Card />
+            <Card />
+            <Card />
+            <Card />
+            <Card />
+            <Card />
+            <Card />
+            <Card />
+            <Card />
+            <Card />
+            <Card />
+            <Card />
+          </div>
+        </>
+      )}
+    </CardPageUI>
+  );
+};
+export default Select;

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

@@ -0,0 +1,13 @@
+const SelectCard = () => {
+    return (
+      <div
+        className="flex h-52 w-full flex-col items-center justify-center text-xl"
+        style={{ background: "rgba(0, 0, 0, 0.05)" }}
+      >
+        <div className="h-auto w-20 text-center font-bold"> Sector Name</div>
+        <div className="mt-4">430</div>
+      </div>
+    );
+  };
+  export default SelectCard;
+

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

@@ -1,8 +1,58 @@
 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 { useSessionFeature } from "src/app/features/session/session.feature";
+import { Avatar } from "antd";
+import { ColumnsType } from "antd/es/table";
+import { TableUI } from "src/app/ui/tables/table.ui";
+import { useBusinessDomain } from "src/domain/business/business.domain";
+import useSWR from "swr";
 
 const CreativeLibraryPage: FC = () => {
+  const { user, currentBrand } = useSessionFeature();
+
+  const { getListFolder } = useBusinessDomain();
+
+  const { data: listFolder, error } = useSWR(
+    "CreativeLibraryFilter",
+    () => currentBrand && getListFolder(currentBrand?.id),
+  );
+
+  const columns: ColumnsType<any> = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      render: (name, record) => {
+        return (
+          <div style={{ display: "flex", gap: "8px" }}>
+            <Avatar
+              src={record.logoUrl}
+              style={{
+                backgroundColor: "rgb(230 244 255)",
+                color: "#1677ff",
+                fontWeight: "bold",
+              }}
+            >
+              {record.logoUrl ? "" : name[0]}
+            </Avatar>
+            <div className="flex items-center">
+              <div>{name}</div>
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      title: "Uploaded Date",
+      dataIndex: "updatedAt",
+      render: (date) => <div>{new Date(date).toLocaleDateString()}</div>,
+    },
+    {
+      title: "File Type",
+      dataIndex: "fileType", // Replace with the appropriate property from your folder object
+      render: (fileType) => <div>{fileType}</div>,
+    },
+  ];
   return (
     <CardPageUI>
       <header
@@ -17,7 +67,7 @@ const CreativeLibraryPage: FC = () => {
       >
         <SearchInputUI />
       </header>
-      <pre>Insert Table here</pre>
+      {listFolder && <TableUI columns={columns} data={listFolder} />}
     </CardPageUI>
   );
 };

src/domain/business/business.domain.ts

@@ -11,6 +11,7 @@ export interface BusinessRepository {
   ): Promise<BusinessAccount>;
 
   getBusinessAccount(): Promise<BusinessAccount | null>;
+  getListFolder(brandId: string): Promise<any[]>;
 }
 
 export const useBusinessDomain = (repoId = "BusinessRepository") => {
@@ -28,9 +29,14 @@ export const useBusinessDomain = (repoId = "BusinessRepository") => {
     return repository.getBusinessAccount();
   };
 
+  const getListFolder = (brandId: string) => {
+    return repository.getListFolder(brandId);
+  };
+
   return {
     updateBusiness,
     createBusiness,
     getBusinessAccount,
+    getListFolder,
   };
 };