Merge pull request 'ui' (#7) from ui into main

Reviewed-on: http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev/pulls/7
2025-03-26 11:42:44 +00:00 · 2025-03-26 11:42:44 +00:00 · cc4d9d069b
parent fea55b7f15 5ffb952637
commit cc4d9d069b
9 changed files with 541 additions and 68 deletions
--- a/app/src/components/icons/marketPlaceIcons.tsx
+++ b/app/src/components/icons/marketPlaceIcons.tsx
@ -130,3 +130,24 @@ export function StarsIconSmall() {
    </svg>
  );
 }
+
+export function FiileedStarsIconSmall() {
+  return (
+    <svg
+      width="11"
+      height="12"
+      viewBox="0 0 11 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.07372 1.61354C5.20877 1.31056 5.27632 1.15908 5.37035 1.11243C5.45202 1.0719 5.54791 1.0719 5.62958 1.11243C5.72362 1.15908 5.79117 1.31056 5.92621 1.61354L7.00187 4.02675C7.04183 4.11631 7.06178 4.16109 7.0927 4.19539C7.12 4.22573 7.15342 4.25 7.1907 4.26662C7.23287 4.2854 7.28164 4.29055 7.37917 4.30084L10.0067 4.57816C10.3366 4.61297 10.5015 4.63038 10.5749 4.70539C10.6387 4.77054 10.6683 4.86177 10.655 4.95198C10.6397 5.05581 10.5165 5.16682 10.2701 5.3889L8.30737 7.15768C8.23457 7.22331 8.19811 7.25615 8.17507 7.29611C8.15466 7.33152 8.14188 7.37077 8.13762 7.41137C8.13278 7.45728 8.14293 7.50523 8.16329 7.60119L8.71151 10.1858C8.78034 10.5103 8.81476 10.6725 8.76611 10.7655C8.72381 10.8463 8.64623 10.9027 8.55634 10.9179C8.45286 10.9354 8.30918 10.8526 8.02183 10.6868L5.73312 9.36677C5.64819 9.31777 5.60572 9.29332 5.56057 9.2837C5.52062 9.27524 5.47931 9.27524 5.43936 9.2837C5.39421 9.29332 5.35174 9.31777 5.26681 9.36677L2.97811 10.6868C2.69077 10.8526 2.5471 10.9354 2.44361 10.9179C2.35372 10.9027 2.27611 10.8463 2.23385 10.7655C2.18521 10.6725 2.21962 10.5103 2.28845 10.1858L2.83664 7.60119C2.85699 7.50523 2.86716 7.45728 2.86233 7.41137C2.85805 7.37077 2.8453 7.33152 2.82488 7.29611C2.80181 7.25615 2.76539 7.22331 2.69254 7.15768L0.72985 5.3889C0.483444 5.16682 0.360238 5.05581 0.34492 4.95198C0.33162 4.86177 0.361259 4.77054 0.425041 4.70539C0.498471 4.63038 0.663408 4.61297 0.993283 4.57816L3.62079 4.30084C3.71831 4.29055 3.76706 4.2854 3.80923 4.26662C3.84653 4.25 3.87993 4.22573 3.90727 4.19539C3.93815 4.16109 3.95812 4.11631 3.99804 4.02675L5.07372 1.61354Z"
+        fill="#F3A50C"
+        stroke="#F3A50C"
+        stroke-width="0.7"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
--- a/app/src/components/ui/componets/Panel.tsx
+++ b/app/src/components/ui/componets/Panel.tsx
@ -65,7 +65,7 @@ const Panel: React.FC<PanelProps> = ({
          return {
            width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
              }px)`,
-            height: `${panelSize - 5}px`,
+            height: `${panelSize - 2}px`,
            left: leftActive ? `${panelSize}px` : "0",
            right: rightActive ? `${panelSize}px` : "0",
            [side]: "0",
@ -73,7 +73,7 @@ const Panel: React.FC<PanelProps> = ({
        case "left":
        case "right":
          return {
-            width: `${panelSize - 5}px`,
+            width: `${panelSize - 2}px`,
            height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
              }px)`,
            top: topActive ? `${panelSize}px` : "0",
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@ -44,56 +44,56 @@ const RealTimeVisulization: React.FC = () => {
  const [zonesData, setZonesData] = useState<FormattedZoneData>({});
  const { selectedZone, setSelectedZone } = useSelectedZoneStore();

-  useEffect(() => {
-    async function GetZoneData() {
-      try {
-        const response: { data: Zone[] } | undefined = await getZonesApi(
-          "hexrfactory"
-        );
+  // useEffect(() => {
+  //   async function GetZoneData() {
+  //     try {
+  //       const response: { data: Zone[] } | undefined = await getZonesApi(
+  //         "hexrfactory"
+  //       );

-        if (!response || !response.data) {
-          return;
-        }
-        const formattedData = response?.data?.reduce<FormattedZoneData>(
-          (acc, zone) => {
-            acc[zone.zoneName] = {
-              activeSides: [],
-              panelOrder: [],
-              lockedPanels: [],
-              zoneCentrePoint: [],
-              widgets: [],
-            };
-            return acc;
-          },
-          {}
-        );
-        setZonesData(formattedData);
-      } catch (error) { }
-    }
-    GetZoneData();
-  }, []);
+  //       if (!response || !response.data) {
+  //         return;
+  //       }
+  //       const formattedData = response?.data?.reduce<FormattedZoneData>(
+  //         (acc, zone) => {
+  //           acc[zone.zoneName] = {
+  //             activeSides: [],
+  //             panelOrder: [],
+  //             lockedPanels: [],
+  //             zoneCentrePoint: [],
+  //             widgets: [],
+  //           };
+  //           return acc;
+  //         },
+  //         {}
+  //       );
+  //       setZonesData(formattedData);
+  //     } catch (error) { }
+  //   }
+  //   GetZoneData();
+  // }, []);

  useEffect(() => {

    console.log('zonesData: ', zonesData);
  }, [zonesData]);

-  useEffect(() => {
-    setZonesData((prev) => {
-      if (!selectedZone) return prev;
+  // useEffect(() => {
+  //   setZonesData((prev) => {
+  //     if (!selectedZone) return prev;

-      return {
-        ...prev,
-        [selectedZone.zoneName]: {
-          ...prev[selectedZone.zoneName], // Keep existing properties
-          activeSides: selectedZone.activeSides || [],
-          panelOrder: selectedZone.panelOrder || [],
-          lockedPanels: selectedZone.lockedPanels || [],
-          widgets: selectedZone.widgets || [],
-        },
-      };
-    });
-  }, [selectedZone]);
+  //     return {
+  //       ...prev,
+  //       [selectedZone.zoneName]: {
+  //         ...prev[selectedZone.zoneName], // Keep existing properties
+  //         activeSides: selectedZone.activeSides || [],
+  //         panelOrder: selectedZone.panelOrder || [],
+  //         lockedPanels: selectedZone.lockedPanels || [],
+  //         widgets: selectedZone.widgets || [],
+  //       },
+  //     };
+  //   });
+  // }, [selectedZone]);

  return (
    <div
--- a/app/src/components/ui/inputs/Search.tsx
+++ b/app/src/components/ui/inputs/Search.tsx
@ -36,7 +36,7 @@ const Search: React.FC<SearchProps> = ({
  };

  return (
-    <div className="search-wrapper">
+    <div className="asset-search-wrapper">
      <div
        className={`search-container ${
          isFocused || inputValue ? "active" : ""
--- a/app/src/modules/market/AssetPreview.tsx
+++ b/app/src/modules/market/AssetPreview.tsx
@ -0,0 +1,95 @@
+import React from "react";
+import assetImage from "../../assets/image/image.png";
+import { FiileedStarsIconSmall } from "../../components/icons/marketPlaceIcons";
+
+// Define the shape of the selected card
+interface SelectedCard {
+  assetName: string;
+  uploadedOn: string;
+  price: number;
+  rating: number;
+  views: number;
+}
+
+// Define the props type for AssetPreview
+interface AssetPreviewProps {
+  selectedCard: SelectedCard;
+  setSelectedCard: React.Dispatch<React.SetStateAction<SelectedCard | null>>; // Type for setter function
+}
+
+const AssetPreview: React.FC<AssetPreviewProps> = ({
+  selectedCard,
+  setSelectedCard,
+}) => {
+  // Ensure rating is a valid number between 0 and 5
+  const rating = Math.max(
+    0,
+    Math.min(5, isNaN(selectedCard.rating) ? 0 : selectedCard.rating)
+  );
+
+  console.log("selectedCard: ", selectedCard);
+
+  // Ensure that the rating is a valid positive integer for array length
+  const starsArray = Array.from({ length: rating }, (_, index) => index);
+
+  return (
+    <div className="assetPreview-wrapper">
+      <div className="assetPreview">
+        <div className="image-preview">
+          <img src={assetImage} alt="" />
+        </div>
+
+        <div className="asset-details-preview">
+          <div className="organization">
+            <div className="image">H</div>
+            <div className="organization-details">
+              <div className="organization-name">HERX FACTORY</div>
+              <div className="follow">Follow +</div>
+            </div>
+          </div>
+
+          {/* asset details */}
+          <div className="asset-details">
+            <div className="asset-name">{selectedCard.assetName}</div>
+            <div className="asset-description">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Doloremque nisi beatae facilis architecto quaerat delectus velit
+              aliquid assumenda cumque vitae! Tempore quibusdam ab natus in
+              minima voluptates, aliquid corrupti excepturi consectetur
+              distinctio sequi beatae odit autem? Distinctio ab, voluptatem
+              omnis quibusdam, incidunt eum ipsa aliquid enim eaque eveniet nisi
+              autem, accusantium vel! Laborum in iste voluptates ad! Harum eum
+              amet pariatur fugit laudantium dolorem maxime voluptates atque
+              molestiae modi inventore quidem maiores dolore numquam, natus
+              quisquam optio distinctio eveniet aliquam, aut eligendi laboriosam
+              eaque! Porro cumque cum distinctio ullam debitis, dolorum
+              similique! Harum cupiditate perferendis voluptatum molestiae,
+              fugiat quisquam assumenda!
+            </div>
+            <div className="asset-review">
+              <div className="asset-rating">
+                <FiileedStarsIconSmall />
+                {selectedCard.rating}
+              </div>
+              <div className="asset-view">{selectedCard.views} views</div>
+            </div>
+            <div className="asset-price">₹ {selectedCard.price}</div>
+          </div>
+
+          {/* buttons */}
+          <div className="button-container">
+            <div className="button">Add to cart</div>
+            <div className="button">Buy now</div>
+          </div>
+
+          {/* close button */}
+          <div className="closeButton" onClick={() => setSelectedCard(null)}>
+            {`<-back`}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AssetPreview;
--- a/app/src/modules/market/Card.tsx
+++ b/app/src/modules/market/Card.tsx
@ -1,3 +1,4 @@
+// Card.tsx
 import React from "react";
 import {
  CommentsIcon,
@ -8,24 +9,51 @@ import {
 } from "../../components/icons/marketPlaceIcons";

 import assetImage from "../../assets/image/image.png";
-const Card: React.FC = () => {
+
+interface CardProps {
+  assetName: string;
+  uploadedOn: string;
+  price: number;
+  rating: number;
+  views: number;
+  onSelectCard: (cardData: {
+    assetName: string;
+    uploadedOn: string;
+    price: number;
+    rating: number;
+    views: number;
+  }) => void;
+}
+
+const Card: React.FC<CardProps> = ({
+  assetName,
+  uploadedOn,
+  price,
+  rating,
+  views,
+  onSelectCard,
+}) => {
+  const handleCardSelect = () => {
+    onSelectCard({ assetName, uploadedOn, price, rating, views });
+  };
+
  return (
    <div className="card-container">
      <div className="icon">
        <DownloadIcon />
      </div>
      <div className="image-container">
-        <img src={assetImage} alt="" />
+        <img src={assetImage} alt={assetName} />
      </div>
      <div className="assets-container">
        <div className="name-container">
-          <div className="asstes-container">Asset name</div>
-          <div className="assets-date">Uploaded on-12 Jan 23</div>
+          <div className="assets-name">{assetName}</div>
+          <div className="assets-date">{uploadedOn}</div>
        </div>
        <div className="details">
          <div className="content">
            <EyeIconBig />
-            1.5k
+            {views}
          </div>
          <div className="content">
            <CommentsIcon />
@ -39,17 +67,17 @@ const Card: React.FC = () => {
      </div>
      <div className="stars-container">
        <div className="stars-wrapper">
-          <StarsIconSmall />
-          <StarsIconSmall />
-          <StarsIconSmall />
-          <StarsIconSmall />
-          <StarsIconSmall />
+          {[...Array(5)].map((_, index) => (
+            <StarsIconSmall key={index} />
+          ))}
        </div>
        <div className="units">
-          ₹ 36,500/<span>unit</span>
+          ₹ {price}/<span>unit</span>
        </div>
      </div>
-      <div className="buy-now-button">Buy now</div>
+      <div className="buy-now-button" onClick={handleCardSelect}>
+        Buy now
+      </div>
    </div>
  );
 };
--- a/app/src/modules/market/CardsContainer.tsx
+++ b/app/src/modules/market/CardsContainer.tsx
@ -1,18 +1,152 @@
-import React from "react";
+import React, { useState } from "react";
 import Card from "./Card";
+import AssetPreview from "./AssetPreview";
+import RenderOverlay from "../../components/templates/Overlay";

 const CardsContainer: React.FC = () => {
-  const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+  const array = [
+    {
+      id: 1,
+      name: "Asset 1",
+      uploadedOn: "12 Jan 23",
+      price: 36500,
+      rating: 4.5,
+      views: 500,
+    },
+    {
+      id: 2,
+      name: "Asset 2",
+      uploadedOn: "14 Jan 23",
+      price: 45000,
+      rating: 4.0,
+      views: 500,
+    },
+    {
+      id: 3,
+      name: "Asset 3",
+      uploadedOn: "15 Jan 23",
+      price: 52000,
+      rating: 4.8,
+      views: 500,
+    },
+    {
+      id: 4,
+      name: "Asset 4",
+      uploadedOn: "18 Jan 23",
+      price: 37000,
+      rating: 3.9,
+      views: 500,
+    },
+    {
+      id: 5,
+      name: "Asset 5",
+      uploadedOn: "20 Jan 23",
+      price: 60000,
+      rating: 5.0,
+      views: 500,
+    },
+    {
+      id: 6,
+      name: "Asset 6",
+      uploadedOn: "22 Jan 23",
+      price: 46000,
+      rating: 4.2,
+      views: 500,
+    },
+    {
+      id: 7,
+      name: "Asset 7",
+      uploadedOn: "25 Jan 23",
+      price: 38000,
+      rating: 4.3,
+      views: 500,
+    },
+    {
+      id: 8,
+      name: "Asset 8",
+      uploadedOn: "27 Jan 23",
+      price: 41000,
+      rating: 4.1,
+      views: 500,
+    },
+    {
+      id: 9,
+      name: "Asset 9",
+      uploadedOn: "30 Jan 23",
+      price: 55000,
+      rating: 4.6,
+      views: 500,
+    },
+    {
+      id: 10,
+      name: "Asset 10",
+      uploadedOn: "2 Feb 23",
+      price: 49000,
+      rating: 4.4,
+      views: 500,
+    },
+    {
+      id: 11,
+      name: "Asset 11",
+      uploadedOn: "5 Feb 23",
+      price: 62000,
+      rating: 5.0,
+      views: 500,
+    },
+    {
+      id: 12,
+      name: "Asset 12",
+      uploadedOn: "7 Feb 23",
+      price: 53000,
+      rating: 4.7,
+      views: 500,
+    },
+  ];
+
+  const [selectedCard, setSelectedCard] = useState<{
+    assetName: string;
+    uploadedOn: string;
+    price: number;
+    rating: number;
+    views: number;
+  } | null>(null);
+
+  const handleCardSelect = (cardData: {
+    assetName: string;
+    uploadedOn: string;
+    price: number;
+    rating: number;
+    views: number;
+  }) => {
+    setSelectedCard(cardData);
+  };
+
  return (
    <div className="cards-container-container">
      <div className="header">Products You May Like</div>
      <div className="cards-wrapper-container">
-        {array.map((index) => (
-          <Card key={index} />
+        {array.map((asset) => (
+          <Card
+            key={asset.id}
+            assetName={asset.name}
+            uploadedOn={asset.uploadedOn}
+            price={asset.price}
+            rating={asset.rating}
+            views={asset.views}
+            onSelectCard={handleCardSelect}
+          />
        ))}
+        {/* <RenderOverlay> */}
+          {selectedCard && (
+            <AssetPreview
+              selectedCard={selectedCard}
+              setSelectedCard={setSelectedCard}
+            />
+          )}
+        {/* </RenderOverlay> */}
      </div>
    </div>
  );
 };

-export default CardsContainer;
+export default CardsContainer;
--- a/app/src/modules/market/FilterSearch.tsx
+++ b/app/src/modules/market/FilterSearch.tsx
@ -16,7 +16,7 @@ const FilterSearch: React.FC = () => {
      <Search onChange={() => {}} />
      <RegularDropDown
        header={activeOption}
-        options={["Alphabet ascending", "Alphabet descending", ""]}
+        options={["Alphabet ascending", "Alphabet descending"]}
        onSelect={handleSelect}
        search={false}
      />
--- a/app/src/styles/components/marketPlace/marketPlace.scss
+++ b/app/src/styles/components/marketPlace/marketPlace.scss
@ -8,14 +8,18 @@
    background-color: var(--background-color-secondary);
    position: absolute;
    left: 0;
-    padding: 100px 50px;
+    padding: 95px 8px;
+    padding-bottom: 32px;

    .marketplace-container {
        padding: 20px 2px;
-        height: calc(100vh - 120px);
+        // height: calc(100vh - 120px);
+        height: 100%;
        background-color: var(--background-color);
        box-shadow: #{$box-shadow-medium};
        border-radius: #{$border-radius-extra-large};
+        position: relative;
+
    }

    .marketPlace {
@ -34,18 +38,23 @@
            width: 100%;
            display: flex;
            align-items: center;
-            gap: 12px;
+            gap: 20px;

-            .search-wrapper {
+            .asset-search-wrapper {
                min-width: 60%;
                max-width: 684px;
                padding: 0;
                border-radius: $border-radius-large ;

                .search-container {
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
                    border: none !important;
                    box-shadow: $box-shadow-medium;
-                    border-radius: $border-radius-large ;
+                    border-radius: $border-radius-large;
+                    overflow: hidden;
+                    padding: 4px 12px;

                    input {
                        border: none !important;
@ -57,12 +66,18 @@

            .regularDropdown-container {
                max-width: 159px;
+                height: 100%;
+
+                .dropdown-header {
+                    align-items: center;
+                }
            }

            .button {
                padding: 5px 20px;
                border: 1px solid var(--accent-color);
                border-radius: 14px;
+                color: var(--accent-color);
            }

            .rating-container {
@ -88,6 +103,7 @@
                color: var(--text-color);
                font-weight: $medium-weight;
                font-size: $xlarge;
+                margin: 10px 0;
            }

            .cards-wrapper-container {
@ -116,6 +132,7 @@
                        border-radius: 10px;
                        padding: 5px;
                        background-color: var(--accent-color);
+                        cursor: pointer;
                    }

                    .image-container {
@ -184,4 +201,182 @@
            }
        }
    }
+}
+
+.assetPreview-wrapper {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    .assetPreview {
+        width: 100%;
+        height: 100%;
+        background-color: var(--background-color);
+        display: flex;
+        gap: 12px;
+        z-index: 100;
+        border-radius: 20px;
+    }
+
+    // Image Preview Section
+    .image-preview {
+        width: 50%;
+        height: 100%;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+    }
+
+    // Asset Details Section
+    .asset-details-preview {
+        width: 50%;
+        padding: 50px 20px;
+        overflow-y: auto;
+
+    }
+
+    // Organization Section (Top part with image and details)
+    .organization {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+        gap: 10px;
+
+        .image {
+            @include flex-center;
+            height: 30px;
+            width: 30px;
+            min-height: 26px;
+            min-width: 26px;
+            border-radius: 50%;
+            font-weight: var(--font-weight-bold);
+            color: var(--background-color);
+            background-color: var(--accent-color);
+        }
+
+        .organization-details {
+            display: flex;
+            flex-direction: column;
+
+            .organization-name {
+                font-weight: bold;
+                margin-bottom: 5px;
+
+                font-weight: #{$bold-weight};
+                font-size: $regular ;
+            }
+
+            .follow {
+                color: var(--accent-color);
+                cursor: pointer;
+            }
+        }
+    }
+
+    // Asset Details
+    .asset-details {
+        margin-top: 20px;
+
+        .asset-name {
+            font-size: 1.5em;
+            font-weight: bold;
+            margin-bottom: 10px;
+            font-weight: #{$bold-weight};
+            font-size: $large;
+        }
+
+        .asset-description {
+            margin-bottom: 20px;
+            color: #666;
+        }
+
+        .asset-review {
+            width: fit-content;
+            padding: 5px 10px;
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+            outline: 1px solid #909090CC;
+            border-radius: 6px;
+
+            .asset-rating {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+                margin-right: 10px;
+                font-weight: bold;
+                position: relative;
+
+                font-weight: #{$bold-weight};
+                font-size: $regular ;
+
+                &::after {
+                    margin-left: 5px;
+                    content: "";
+                    display: block;
+                    width: 2px;
+                    height: 12px;
+                    background-color: #ccc;
+
+
+                }
+            }
+
+            .asset-view {
+
+                font-weight: #{$bold-weight};
+                font-size: $regular ;
+            }
+        }
+
+        .asset-price {
+            font-size: $xxlarge;
+            font-weight: bold;
+            margin-bottom: 20px;
+        }
+    }
+
+    // Button Container and Button Styles
+    .button-container {
+        display: flex;
+        gap: 10px;
+    }
+
+    .button {
+
+
+        color: white;
+        padding: 10px 20px;
+        border-radius: 5px;
+        cursor: pointer;
+        text-align: center;
+
+        &:first-child {
+            outline: 1px solid var(--accent-color);
+            color: var(--accent-color);
+        }
+
+        &:last-child {
+            background-color: var(--accent-color);
+            color: var(--background-color);
+        }
+
+
+
+    }
+
+    .closeButton {
+        color: var(--accent-color);
+        position: absolute;
+        top: 18px;
+        left: 18px;
+        @include flex-center;
+        cursor: pointer;
+        font-size: var(--font-size-large);
+    }
 }