Update Product type and enhance ProductItem component

Modified the `Product` type to make `status` and `coverUrl` optional, and added a new `version` property for improved flexibility. Updated the `getProducts` function to reflect these changes. In the `ProductItem` component, added a new `Label` to display the product's version and ensured a default image is used if `coverUrl` is not provided. Updated rendering logic to conditionally show both status and version.

src/client/dd-hub-react/src/api/product-service.ts

@@ -1,11 +1,12 @@
 export type Product = {
-  id: string;
+    id: string;
-  name: string;
+    name: string;
-  price?: number;
+    price?: number;
-  status: string;
+    status?: string;
-  coverUrl: string;
+    version?: string;
-  colors?: string[];
+    coverUrl?: string;
-  priceSale?: number;
+    colors?: string[];
+    priceSale?: number;
 };
 
 /**
@@ -18,14 +19,12 @@ export function getProducts(): Promise<Product[]> {
         {
             id: '1',
             name: "User Manager",
-            coverUrl: "/assets/images/product/product-default.webp",
+            version: "1.0.0"
-            status: "1.0.0"
         },
         {
             id: '2',
             name: "Envelope Generator",
-            coverUrl: "/assets/images/product/product-default.webp",
+            version: "1.0.0"
-            status: "1.0.0"
         }
     ]);
 }

src/client/dd-hub-react/src/sections/product/product-item.tsx

@@ -33,7 +33,23 @@ export function ProductItem({ product }: { product: Product }) {
     </Label>
   );
 
-  const [imgSrc, setImgSrc] = useState(product.coverUrl);
+  const renderVersion = (
+    <Label
+      variant="inverted"
+      color='info'
+      sx={{
+        zIndex: 9,
+        top: 16,
+        right: 16,
+        position: 'absolute',
+        textTransform: 'uppercase',
+      }}
+    >
+      {product.version}
+    </Label>
+  );
+
+  const [imgSrc, setImgSrc] = useState(product.coverUrl ?? "/assets/images/product/product-default.webp");
 
   const renderImg = (
     <Box
@@ -72,6 +88,7 @@ export function ProductItem({ product }: { product: Product }) {
     <Card>
       <Box sx={{ pt: '100%', position: 'relative' }}>
         {product.status && renderStatus}
+        {product.version && renderVersion}
         {renderImg}
       </Box>