From c7fb21e2be5f0969b14bf4ca5b30d531d3acc197 Mon Sep 17 00:00:00 2001
From: Chung Zhi Xuan <zhixuanchung03@gmail.com>
Date: Fri, 2 Feb 2024 16:37:41 +0800
Subject: [PATCH] Make stock count display tidier

---
 .../cms/src/admin/utils/RenderCellFactory.tsx | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/apps/cms/src/admin/utils/RenderCellFactory.tsx b/apps/cms/src/admin/utils/RenderCellFactory.tsx
index 1216fcc9..9000c172 100644
--- a/apps/cms/src/admin/utils/RenderCellFactory.tsx
+++ b/apps/cms/src/admin/utils/RenderCellFactory.tsx
@@ -72,25 +72,37 @@ export class RenderCellFactory {
       );
       return ImageComponentCell;
     }
+
     if (key === "stock") {
-      const ObjectComponent: React.FC<{ data: string }> = ({ data }) => (
-        <div>
-          {Object.entries(data).map(([subKey, value], index) => (
-            <div key={index}>
-              <strong>{subKey}:</strong>{" "}
-              <span>
-                {typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value)}
-              </span>
+      const StockTableComponent: React.FC<{ data: StockData }> = ({ data }) => (
+        <div className="stock-container">
+          {Object.entries(data).map(([color, sizes], index) => (
+            <div key={index} className="stock-item">
+              <strong>{color}</strong>
+              <div>
+                {Object.entries(sizes).map(([size, quantity], sizeIndex) => (
+                  <span key={sizeIndex}>
+                    {size}: {quantity} {sizeIndex % 2 !== 0 && <br />}{" "}
+                    {/* Add line break after every two sizes */}
+                  </span>
+                ))}
+              </div>
             </div>
           ))}
         </div>
       );
-      const ObjectComponentCell = (row, data: string) => (
-        <ObjectComponent data={data} />
+      const StockTableComponentCell = (row, data: StockData) => (
+        <StockTableComponent data={data} />
       );
-      return ObjectComponentCell;
-      
+      return StockTableComponentCell;
     }
+
+    interface StockData {
+      [color: string]: {
+        [size: string]: number;
+      };
+    }
+
     if (typeof element[key] == "object") {
       const DateComponent: React.FC<{ children?: React.ReactNode }> = ({
         children,