From a78e5ee94d92ac3615d54c21c28c425ccb4f5469 Mon Sep 17 00:00:00 2001
From: mariful-nyx <mariful@heliosinsider.com>
Date: Wed, 31 Jul 2024 17:55:31 +0600
Subject: [PATCH] fix console error

---
 src/components/images/field.tsx                    |  4 ++--
 src/components/images/modal.tsx                    |  2 +-
 src/components/seo/SEO.tsx                         | 14 +++++++++-----
 src/icons/NXEditPen.tsx                            |  2 +-
 src/icons/NXPen.tsx                                |  2 +-
 src/icons/NXUnfulfilled.tsx                        |  4 ++--
 ...il--change-edit-modify-pencil-write-writing.svg |  2 +-
 src/pages/collection/modal.tsx                     |  6 +++---
 src/pages/color/colorList.tsx                      |  2 +-
 src/pages/color/modal.tsx                          |  6 +++---
 src/pages/productType/modal.tsx                    | 10 +++++-----
 11 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/components/images/field.tsx b/src/components/images/field.tsx
index 7ffad7e..f1da6ba 100644
--- a/src/components/images/field.tsx
+++ b/src/components/images/field.tsx
@@ -127,7 +127,7 @@ const ImageField: React.FC<ImageFieldProps> = ({ label='', value,  name, onChang
                                         alt=""
                                         className="aspect-square w-full h-full object-cover rounded-md"
                                     />
-                                    <div className="absolute h-[200px] w-[200px] transition-all ease-linear rounded-md group-hover:bg-base-300 opacity-50 group-hover:z-20 hidden group-hover:block">
+                                    <div className="absolute h-full w-full transition-all ease-linear rounded-md group-hover:bg-base-300 opacity-50 group-hover:z-20 hidden group-hover:block">
                                         <div onClick={(e) => deleteImage(e, imgData.id)}>
                                             <NXDelete className="h-[30px] w-[30px] rounded-md border border-red-600 bg-white p-1 absolute left-2 bottom-3 cursor-pointer" />
                                         </div>
@@ -136,7 +136,7 @@ const ImageField: React.FC<ImageFieldProps> = ({ label='', value,  name, onChang
                             ))}
                             <label
                                 htmlFor="media"
-                                className="w-24 h-24 aspect-w-1 aspect-h-1 rounded-md border-dashed border border-base-300 flex justify-center items-center cursor-pointer hover:bg-base-100"
+                                className="w-full h-full aspect-w-1 aspect-h-1 rounded-md border-dashed border border-base-300 flex justify-center items-center cursor-pointer hover:bg-base-100"
                             >
                                 +
                             </label>
diff --git a/src/components/images/modal.tsx b/src/components/images/modal.tsx
index 91067bf..8b04afb 100644
--- a/src/components/images/modal.tsx
+++ b/src/components/images/modal.tsx
@@ -172,7 +172,7 @@ const ImageChooseModal: React.FC<ImageChooseModalProps> = ({ onClose, onSelected
                       </button>
                       <button
                         type="submit"
-                        className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                        className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
                         data-autofocus
                         onClick={onSaveImage}
                       >
diff --git a/src/components/seo/SEO.tsx b/src/components/seo/SEO.tsx
index 75de72a..995b0de 100644
--- a/src/components/seo/SEO.tsx
+++ b/src/components/seo/SEO.tsx
@@ -4,11 +4,15 @@ import  { RootState }  from '../../redux/rootReducer';
 
 
 interface SEOTypes {
-  seoData?: any;
+  seoData?: {
+    meta_title: string;
+    meta_description: string;
+    slug: string;
+  };
   onChange: (e: any) => void;
 }
 
-const SEO = ({ seoData, onChange }: SEOTypes) => {
+const SEO = ({ seoData = { meta_title: '', meta_description: '', slug: '' }, onChange }: SEOTypes) => {
   const me = useSelector((state: RootState) => state.auth.me);
 
   const onChangeValue = (e: ChangeEvent<any>) => {
@@ -43,7 +47,7 @@ const SEO = ({ seoData, onChange }: SEOTypes) => {
               type="text"
               name="meta_title"
               placeholder="Page Title"
-              value={seoData?.meta_title}
+              value={seoData?.meta_title || ''}
               onChange={onChangeValue}
               className="w-full px-5 py-3 placeholder:text-gray-400 bg-secondary-50 mt-3 rounded-xl font-nunito outline-[#0CAF60] border-[2px] border-dashed"
             />
@@ -55,7 +59,7 @@ const SEO = ({ seoData, onChange }: SEOTypes) => {
               type="text"
               name="meta_description"
               placeholder="Meta Description"
-              value={seoData?.meta_description}
+              value={seoData?.meta_description || ''}
               onChange={onChangeValue}
               className="w-full px-5 py-3 placeholder:text-gray-400 bg-secondary-50 mt-3 rounded-xl font-nunito outline-[#0CAF60] border-[2px] border-dashed"
             />
@@ -71,7 +75,7 @@ const SEO = ({ seoData, onChange }: SEOTypes) => {
                   id="url"
                   type="text"
                   name="slug"
-                  value={seoData?.slug}
+                  value={seoData?.slug || ''}
                   onChange={onChangeValue}
                   className="w-full ring-0 outline-none border-none focus:ring-0 focus:border-none focus:outline-none"
                 /> 
diff --git a/src/icons/NXEditPen.tsx b/src/icons/NXEditPen.tsx
index c9f6857..7dd0b5e 100644
--- a/src/icons/NXEditPen.tsx
+++ b/src/icons/NXEditPen.tsx
@@ -3,7 +3,7 @@ import React from "react";
 const NXEditPen = ({ className }: { className?: string }) => {
   return (
     <svg  className={className} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_4287_3309)">
+    <g clipPath="url(#clip0_4287_3309)">
     <path d="M0.719004 9.39099L4.609 13.281C4.74963 13.4214 4.94025 13.5003 5.139 13.5003C5.33775 13.5003 5.52838 13.4214 5.669 13.281L13.389 5.56099C13.4278 5.52391 13.4578 5.47862 13.4768 5.42844C13.4959 5.37827 13.5034 5.32447 13.499 5.27099L12.909 1.44099C12.9042 1.34972 12.8658 1.26347 12.8012 1.19885C12.7365 1.13422 12.6503 1.0958 12.559 1.09099L8.729 0.50099C8.67552 0.496551 8.62172 0.504124 8.57155 0.523157C8.52137 0.542189 8.47608 0.572199 8.439 0.61099L0.719004 8.33099C0.578554 8.47161 0.499664 8.66224 0.499664 8.86099C0.499664 9.05974 0.578554 9.25036 0.719004 9.39099Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
     <path d="M9.88904 4.61096C9.6129 4.61096 9.38904 4.3871 9.38904 4.11096C9.38904 3.83482 9.6129 3.61096 9.88904 3.61096C10.1652 3.61096 10.389 3.83482 10.389 4.11096C10.389 4.3871 10.1652 4.61096 9.88904 4.61096Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
     </g>
diff --git a/src/icons/NXPen.tsx b/src/icons/NXPen.tsx
index 7852e2d..bb2d78b 100644
--- a/src/icons/NXPen.tsx
+++ b/src/icons/NXPen.tsx
@@ -10,7 +10,7 @@ const NXPen = ({ className }: { className?: string }) => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clip-path="url(#clip0_4339_3828)">
+      <g clipPath="url(#clip0_4339_3828)">
         <path
           d="M5 12.3732L0.5 13.6332L1.76 9.1332L10 0.933199C10.0931 0.837953 10.2044 0.762274 10.3271 0.710607C10.4499 0.658939 10.5818 0.632324 10.715 0.632324C10.8482 0.632324 10.9801 0.658939 11.1029 0.710607C11.2256 0.762274 11.3369 0.837953 11.43 0.933199L13.2 2.7132C13.2937 2.80616 13.3681 2.91677 13.4189 3.03862C13.4697 3.16048 13.4958 3.29119 13.4958 3.4232C13.4958 3.55521 13.4697 3.68592 13.4189 3.80778C13.3681 3.92964 13.2937 4.04024 13.2 4.1332L5 12.3732Z"
           stroke="white"
diff --git a/src/icons/NXUnfulfilled.tsx b/src/icons/NXUnfulfilled.tsx
index c889789..1a429e2 100644
--- a/src/icons/NXUnfulfilled.tsx
+++ b/src/icons/NXUnfulfilled.tsx
@@ -26,13 +26,13 @@ function NXUnfulfilled({ className }: { className?: string }) {
       />
       <path
         d="M23.3333 19.9999C23.3333 20.7999 22.98 21.5133 22.4267 21.9999C21.9533 22.4133 21.34 22.6666 20.6667 22.6666C19.1933 22.6666 18 21.4733 18 19.9999C18 19.1599 18.3867 18.4066 19 17.9199C19.46 17.5533 20.04 17.3333 20.6667 17.3333C22.14 17.3333 23.3333 18.5266 23.3333 19.9999Z"
-        stroke-miterlimit="10"
+        strokeMiterlimit="10"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M20.8333 19.1665V20.1665L20 20.6665"
-        stroke-miterlimit="10"
+        strokeMiterlimit="10"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
diff --git a/src/icons/pencil--change-edit-modify-pencil-write-writing.svg b/src/icons/pencil--change-edit-modify-pencil-write-writing.svg
index ac48508..d51c3fd 100644
--- a/src/icons/pencil--change-edit-modify-pencil-write-writing.svg
+++ b/src/icons/pencil--change-edit-modify-pencil-write-writing.svg
@@ -1,5 +1,5 @@
 <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_4339_3828)">
+<g clipPath="url(#clip0_4339_3828)">
 <path d="M5 12.3732L0.5 13.6332L1.76 9.1332L10 0.933199C10.0931 0.837953 10.2044 0.762274 10.3271 0.710607C10.4499 0.658939 10.5818 0.632324 10.715 0.632324C10.8482 0.632324 10.9801 0.658939 11.1029 0.710607C11.2256 0.762274 11.3369 0.837953 11.43 0.933199L13.2 2.7132C13.2937 2.80616 13.3681 2.91677 13.4189 3.03862C13.4697 3.16048 13.4958 3.29119 13.4958 3.4232C13.4958 3.55521 13.4697 3.68592 13.4189 3.80778C13.3681 3.92964 13.2937 4.04024 13.2 4.1332L5 12.3732Z" stroke="white" strokeLinecap="round" strokeLinejoin="round"/>
 </g>
 <defs>
diff --git a/src/pages/collection/modal.tsx b/src/pages/collection/modal.tsx
index e14bfb3..7362f2e 100644
--- a/src/pages/collection/modal.tsx
+++ b/src/pages/collection/modal.tsx
@@ -87,7 +87,7 @@ function CollectionModal({ isOpen, onClose, onSubmit, edit }: CollectionModalPro
             id="name"
             name='name'
             errorData={errorData}
-            value={formData.name}
+            value={formData.name || ''}
             onChange={handleChange}
             className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
           />
@@ -99,7 +99,7 @@ function CollectionModal({ isOpen, onClose, onSubmit, edit }: CollectionModalPro
                     <span className="text-[12px] text-base-300">If a collection active or in-active</span>
                 </div>
                 <label className="inline-flex items-center me-5 cursor-pointer">
-                    <input  onChange={(e) => handleSingleChange(e.target.name, e.target.checked)} name="is_active" type="checkbox" checked={formData.is_active}  className="sr-only peer" />
+                    <input  onChange={(e) => handleSingleChange(e.target.name, e.target.checked)} name="is_active" type="checkbox" checked={formData.is_active || false}  className="sr-only peer" />
                     <div className="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-green-300  peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                 </label>
             </div>
@@ -113,7 +113,7 @@ function CollectionModal({ isOpen, onClose, onSubmit, edit }: CollectionModalPro
             id="name"
             name='description'
             errorData={errorData}
-            value={formData.description}
+            value={formData.description || ''}
             onChange={handleChange}
             className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
           />
diff --git a/src/pages/color/colorList.tsx b/src/pages/color/colorList.tsx
index e63f514..8a443ae 100644
--- a/src/pages/color/colorList.tsx
+++ b/src/pages/color/colorList.tsx
@@ -113,7 +113,7 @@ function Color() {
                             </tr>
                         </thead>
                         <tbody>
-                            {colors.map((row: any, index) => (
+                            {colors?.map((row: any, index) => (
                                 <tr className="border-b border-[#EEEFF2] font-semibold" key={index + 1}>
                                     <td className="text-center py-5">
                                         <input
diff --git a/src/pages/color/modal.tsx b/src/pages/color/modal.tsx
index 9c9c16b..bf87223 100644
--- a/src/pages/color/modal.tsx
+++ b/src/pages/color/modal.tsx
@@ -15,7 +15,7 @@ interface ColorModalProps {
 }
 
 function ColorModal({ isOpen, onClose, onSubmit, edit }: ColorModalProps) {
-  const [formData, setFormData] = useState<any>({});
+  const [formData, setFormData] = useState<any>({ name: '', code: '#000000' });
   const [errorData, setErrorData] = useState<any>({});
 
   const api = useApi();
@@ -80,7 +80,7 @@ function ColorModal({ isOpen, onClose, onSubmit, edit }: ColorModalProps) {
             id="name"
             name='name'
             errorData={errorData}
-            value={formData.name}
+            value={formData.name || ''}
             onChange={handleChange}
             className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
           />
@@ -93,7 +93,7 @@ function ColorModal({ isOpen, onClose, onSubmit, edit }: ColorModalProps) {
             <InputColor
               id="color"
               name='code'
-              value={formData.code}
+              value={formData.code || ''}
               errorData={errorData}
               onChange={handleChange}
             />
diff --git a/src/pages/productType/modal.tsx b/src/pages/productType/modal.tsx
index 466f45a..077fafd 100644
--- a/src/pages/productType/modal.tsx
+++ b/src/pages/productType/modal.tsx
@@ -87,7 +87,7 @@ function ProductTypeModal({ isOpen, onClose, onSubmit, edit }: ProductTypeModalP
             id="name"
             name='name'
             errorData={errorData}
-            value={formData.name}
+            value={formData.name || ''}
             onChange={handleChange}
             className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
           />
@@ -100,7 +100,7 @@ function ProductTypeModal({ isOpen, onClose, onSubmit, edit }: ProductTypeModalP
                   <span className="text-[12px] text-base-300">Indicates whether this product type is subject to taxation</span>
                 </div>
                 <label className="inline-flex items-center me-5 cursor-pointer">
-                  <input  onChange={handleCheckboxChange} name="taxable" type="checkbox" checked={formData.taxable}  className="sr-only peer" />
+                  <input  onChange={handleCheckboxChange} name="taxable" type="checkbox" checked={formData.taxable || false}  className="sr-only peer" />
                   <div className="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-green-300  peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                 </label>
               </div>
@@ -110,7 +110,7 @@ function ProductTypeModal({ isOpen, onClose, onSubmit, edit }: ProductTypeModalP
                   <span className="text-[12px] text-base-300">Select if this product type represents tangible, shippable items</span>
                 </div>
                 <label className="inline-flex items-center me-5 cursor-pointer">
-                  <input  onChange={handleCheckboxChange} name="physical_product" type="checkbox" checked={formData.physical_product}   className="sr-only peer" />
+                  <input  onChange={handleCheckboxChange} name="physical_product" type="checkbox" checked={formData.physical_product || false}   className="sr-only peer" />
                   <div className="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-green-300  peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                 </label>
               </div>
@@ -120,7 +120,7 @@ function ProductTypeModal({ isOpen, onClose, onSubmit, edit }: ProductTypeModalP
                   <span className="text-[12px] text-base-300">Enable inventory management for this product type</span>
                 </div>
                 <label className="inline-flex items-center me-5 cursor-pointer">
-                  <input  onChange={handleCheckboxChange} name="track_stock" type="checkbox" checked={formData.track_stock}   className="sr-only peer" />
+                  <input  onChange={handleCheckboxChange} name="track_stock" type="checkbox" checked={formData.track_stock || false}   className="sr-only peer" />
                   <div className="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-green-300  peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                 </label>
               </div>
@@ -130,7 +130,7 @@ function ProductTypeModal({ isOpen, onClose, onSubmit, edit }: ProductTypeModalP
                   <span className="text-[12px] text-base-300">Allow multiple variations of this product type (e.g., sizes, colors)</span>
                 </div>
                 <label className="inline-flex items-center me-5 cursor-pointer">
-                  <input  onChange={handleCheckboxChange} name="has_variant" type="checkbox" checked={formData.has_variant}  className="sr-only peer" />
+                  <input  onChange={handleCheckboxChange} name="has_variant" type="checkbox" checked={formData.has_variant || false}  className="sr-only peer" />
                   <div className="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-green-300  peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                 </label>
               </div>