Fix button layout

apps/cms/src/admin/views/MerchPromotion.tsx

@@ -111,22 +111,18 @@ const MerchPromotion: AdminView = ({ user, canAccessAdmin }) => {
       keywords=""
       title="Merchandise Promotion"
     >
-      <div style={{ position: "relative" }}>
+
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
         <Button el="link" to={"/admin"} buttonStyle="primary">
           Go to Main Admin View
         </Button>
-        <div
-          style={{
-            position: "relative",
-          }}
-        >
-          <Button onClick={handleCreatePromotion} buttonStyle="primary">
-            Create Promotion
-          </Button>
-        </div>
+        <Button onClick={handleCreatePromotion} buttonStyle="primary">
+          Create Promotion
+        </Button>
       </div>
 
       <Table data={data} columns={tableCols} />
+
     </ViewTemplate>
   );
 };

apps/cms/src/admin/views/MerchSales.tsx

@@ -3,19 +3,18 @@ import { Button } from "payload/components/elements";
 import { AdminView } from "payload/config";
 import ViewTemplate from "./ViewTemplate";
 import { Column } from "payload/dist/admin/components/elements/Table/types";
-import { Order } from "../../@types/Order";
-import OrdersApi from "../../apis/orders.api";
-import { IOrder } from "../../@types/IOrder";
 import { RenderCellFactory } from "../utils/RenderCellFactory";
 import SortedColumn from "../utils/SortedColumn";
 import { Table } from "payload/dist/admin/components/elements/Table";
+import { Promotion } from "types";
+import PromotionsApi from "../../apis/promotions.api";
 
-const MerchSales: AdminView = ({ user, canAccessAdmin }) => {
+const MerchPromotion: AdminView = ({ user, canAccessAdmin }) => {
   // Get data from API
-  const [data, setData] = useState<IOrder[]>(null);
+  const [data, setData] = useState<Promotion[]>(null);
   useEffect(() => {
-    OrdersApi.getOrders()
-      .then((res: IOrder[]) => setData(res))
+    PromotionsApi.getPromotions()
+      .then((res: Promotion[]) => setData(res))
       .catch((error) => console.log(error));
   }, []);
 
@@ -30,34 +29,34 @@ const MerchSales: AdminView = ({ user, canAccessAdmin }) => {
 
   // Do not load table until we receive the data
   if (data == null) {
-    return <div> Loading... </div>;
+    return <div>Loading...</div>;
   }
 
   const tableCols = new Array<Column>();
-  for (const key of Object.keys(new Order())) {
-    const renderCellComponent = RenderCellFactory.get(data[0], key);
-    const renderCell: React.FC<{ children?: React.ReactNode }> =
-      renderCellComponent instanceof Promise
-        ? renderCellComponent
-        : renderCellComponent;
-
-    const col: Column = {
-      accessor: key,
-      components: {
-        Heading: (
-          <SortedColumn
-            label={prettifyKey(key)}
-            name={key}
-            data={data as never[]}
-          />
-        ),
-        renderCell: renderCell,
-      },
-      label: "",
-      name: "",
-      active: true,
-    };
-    tableCols.push(col);
+  if (data && data.length > 0) {
+    const sampleProduct = data[0];
+    const keys = Object.keys(sampleProduct);
+    for (const key of keys) {
+      const renderCell: React.FC<{ children?: React.ReactNode }> =
+        RenderCellFactory.get(sampleProduct, key);
+      const col: Column = {
+        accessor: key,
+        components: {
+          Heading: (
+            <SortedColumn
+              label={prettifyKey(key)}
+              name={key}
+              data={data as never[]}
+            />
+          ),
+          renderCell: renderCell,
+        },
+        label: "",
+        name: "",
+        active: true,
+      };
+      tableCols.push(col);
+    }
   }
 
   const editColumn: Column = {
@@ -90,31 +89,43 @@ const MerchSales: AdminView = ({ user, canAccessAdmin }) => {
 
   tableCols.push(deleteColumn);
 
-  const handleEdit = (orderId: string) => {
-    console.log(`Dummy. Order ID: ${orderId}`);
+  const handleEdit = (promotionID: string) => {
+    console.log(`Dummy. Promotion ID: ${promotionID}`);
   };
 
-  const handleDelete = (orderId: string) => {
-    console.log(`Dummy. Order ID: ${orderId}`);
+  const handleDelete = (promotionID: string) => {
+    console.log(`Dummy. Promotion ID: ${promotionID}`);
   };
 
-  console.log(tableCols);
+  const handleCreatePromotion = () => {
+    console.log("Creating a new promotion...");
+  };
 
   return (
     <ViewTemplate
       user={user}
       canAccessAdmin={canAccessAdmin}
       description=""
       keywords=""
-      title="Merchandise Sales"
+      title="Merchandise Promotion"
     >
-      <Button el="link" to={"/admin"} buttonStyle="primary">
-        Go to Main Admin View
-      </Button>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }}>
+        <Button el="link" to={"/admin"} buttonStyle="primary">
+          Go to Main Admin View
+        </Button>
+        <Button onClick={handleCreatePromotion} buttonStyle="primary">
+          Create Promotion
+        </Button>
+      </div>
 
-      <Table data={data} columns={tableCols} />
+      {/* Wrapper div with flexbox */}
+      <div style={{ width: "100%" }}>
+        <div style={{ display: "flex", flexGrow: 1 }}>
+          <Table data={data} columns={tableCols} />
+        </div>
+      </div>
     </ViewTemplate>
   );
 };
 
-export default MerchSales;
+export default MerchPromotion;