From 3d49f321757ee66d6023d573ceb355f512edaae2 Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Wed, 2 Jul 2025 16:11:55 +0200
Subject: [PATCH] Make Product properties optional and improve safety

Updated the `Product` type in `product-service.ts` to make `price`, `colors`, and `priceSale` optional. Removed hardcoded values from the `getProducts` function, allowing for more flexible product creation. Enhanced the `ProductItem` component to safely access the `colors` property using optional chaining, defaulting to an empty array if undefined.
---
 .../dd-hub-react/src/api/product-service.ts      | 16 +++++-----------
 .../src/sections/product/product-item.tsx        |  3 ++-
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/client/dd-hub-react/src/api/product-service.ts b/src/client/dd-hub-react/src/api/product-service.ts
index 966a39a..f55d3aa 100644
--- a/src/client/dd-hub-react/src/api/product-service.ts
+++ b/src/client/dd-hub-react/src/api/product-service.ts
@@ -1,11 +1,11 @@
 export type Product = {
   id: string;
   name: string;
-  price: number;
+  price?: number;
   status: string;
   coverUrl: string;
-  colors: string[];
-  priceSale: number | null;
+  colors?: string[];
+  priceSale?: number;
 };
 
 /**
@@ -18,20 +18,14 @@ export function getProducts(): Promise<Product[]> {
         {
             id: '1',
             name: "User Manager",
-            price: 0,
             coverUrl: "/assets/images/product/product-default.webp",
-            status: "1.0.0",
-            colors: [],
-            priceSale: null
+            status: "1.0.0"
         },
         {
             id: '2',
             name: "Envelope Generator",
-            price: 0,
             coverUrl: "/assets/images/product/product-default.webp",
-            status: "1.0.0",
-            colors: [],
-            priceSale: null
+            status: "1.0.0"
         }
     ]);
 }
\ No newline at end of file
diff --git a/src/client/dd-hub-react/src/sections/product/product-item.tsx b/src/client/dd-hub-react/src/sections/product/product-item.tsx
index 982bc1d..492d724 100644
--- a/src/client/dd-hub-react/src/sections/product/product-item.tsx
+++ b/src/client/dd-hub-react/src/sections/product/product-item.tsx
@@ -15,6 +15,7 @@ import { ColorPreview } from 'src/components/color-utils';
 
 // ----------------------------------------------------------------------
 
+// TODO: Add explanation part
 export function ProductItem({ product }: { product: Product }) {
   const renderStatus = (
     <Label
@@ -86,7 +87,7 @@ export function ProductItem({ product }: { product: Product }) {
             justifyContent: 'space-between',
           }}
         >
-          <ColorPreview colors={product.colors} />
+          <ColorPreview colors={product?.colors ?? []} />
           {renderPrice}
         </Box>
       </Stack>