NoshonNetworks · fishonamos · Jun 6, 2025 · Jun 5, 2025 · Jun 5, 2025
diff --git a/app/client/app/components/sections/registerLandForm.tsx b/app/client/app/components/sections/registerLandForm.tsx
@@ -5,7 +5,7 @@ import { useContract, useAccount } from "@starknet-react/core";
 import { ABI } from "../../abis/landRegistry.abi";
 import { useAppContext } from "../../context/appContext";
 
-const RegisterLandForm = () => {
+const RegisterLandForm = ({ handleClose }: { handleClose?: () => void }) => {
   const { contactAddress } = useAppContext();
   const { account } = useAccount();
   const { contract } = useContract({
@@ -20,11 +20,14 @@ const RegisterLandForm = () => {
     landUse: "",
   });
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
 
-  const toBigNumberish = (value: string) => BigInt(value) * BigInt("1000000000000000000");
+  const toBigNumberish = (value: string) =>
+    BigInt(value) * BigInt("1000000000000000000");
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -67,7 +70,9 @@ const RegisterLandForm = () => {
           <span className="text-primary text-2xl">🛖</span>
         </div>
         <h2 className="text-xl font-semibold mt-2">Register New Land</h2>
-        <p className="text-gray-500 text-sm">Please enter all details to register your land</p>
+        <p className="text-gray-500 text-sm">
+          Please enter all details to register your land
+        </p>
       </div>
 
       <form onSubmit={handleSubmit} className="space-y-4">
@@ -122,18 +127,21 @@ const RegisterLandForm = () => {
             <option value="3">Agricultural</option>
           </select>
         </div>
-        
+
         <div className="flex justify-between mt-4">
           <button
             type="button"
+            onClick={handleClose}
             className="w-1/2 text-gray-600 font-medium border border-gray-300 py-2 rounded-md hover:bg-gray-200 transition"
           >
             Cancel
           </button>
           <button
             type="submit"
             className={`w-1/2 text-white font-medium py-2 rounded-md transition ${
-              isFormValid ? "bg-blue-600 hover:bg-blue-700" : "bg-gray-300 cursor-not-allowed"
+              isFormValid
+                ? "bg-blue-600 hover:bg-blue-700"
+                : "bg-gray-300 cursor-not-allowed"
             }`}
             disabled={!isFormValid}
           >

diff --git a/app/client/app/components/ui/InfoCard.tsx b/app/client/app/components/ui/InfoCard.tsx
@@ -0,0 +1,28 @@
+function InfoCard({
+  value,
+  description,
+  iconBg,
+  icon,
+}: {
+  value?: string;
+  description?: string;
+  iconBg?: string;
+  icon: React.ReactNode;
+}) {
+  return (
+    <div className="p-7 flex-1 rounded-xl bg-white flex items-center gap-x-3">
+      <div
+        style={{ backgroundColor: iconBg }}
+        className={`p-[13px] rounded-full`}
+      >
+        {icon}
+      </div>
+      <div>
+        <h3 className="text-[#090914] font-bold text-xl">{value}</h3>
+        <p className="text-[#7E8299] text-xs font-semibold">{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default InfoCard;
diff --git a/app/client/app/components/ui/SearchBar.tsx b/app/client/app/components/ui/SearchBar.tsx
@@ -0,0 +1,18 @@
+function SearchBar() {
+  return (
+    <div className="relative h-fit flex-1">
+      <img
+        src="/icons/searchIcon.svg"
+        className="absolute z-[5] top-[12px] left-3"
+        alt=""
+      />
+      <input
+        type="text"
+        placeholder="Search..."
+        className="bg-[#F9F9F9] py-3 pl-[43px] pr-6 rounded-xl text-black w-full"
+      />
+    </div>
+  );
+}
+
+export default SearchBar;
diff --git a/app/client/app/dashboard/owner/collections/components/CollectionsTable.tsx b/app/client/app/dashboard/owner/collections/components/CollectionsTable.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import CollectionsTableRow from "./CollectionsTableRow";
+import { Land } from "@/app/utils/types";
+
+const dummyLands: Land[] = [
+  {
+    num: 1,
+    id: "56037-XDER",
+    name: "Banana Island",
+    price: "0.2345",
+    date: "20/11/24",
+    status: "bought",
+  },
+  {
+    num: 2,
+    id: "56037-XDER",
+    name: "Banana Island",
+    price: "12.0145",
+    date: "12/10/24",
+    status: "unapproved",
+  },
+  {
+    num: 3,
+    id: "56037-XDER",
+    name: "Banana Island",
+    price: "1.8925",
+    date: "23/09/24",
+    status: "approved",
+  },
+];
+
+function CollectionsTable() {
+  return (
+    <div className="flex flex-col gap-y-6">
+      <div className="grid grid-cols-[auto_1.9fr_3.4fr_2.1fr_1.3fr_1.2fr_auto] gap-x-3 uppercase text-xs font-bold text-[#7E8299] pb-4 border-b-[#7E82994D] border-b-[1px] border-dashed">
+        <div>No</div>
+        <div>Land ID</div>
+        <div>Land Name</div>
+        <div>Price</div>
+        <div>Date</div>
+        <div>Status</div>
+        <div>Actions</div>
+      </div>
+      {dummyLands.map((land, id) => (
+        <CollectionsTableRow land={land} key={id} />
+      ))}
+    </div>
+  );
+}
+
+export default CollectionsTable;
diff --git a/app/client/app/dashboard/owner/collections/components/CollectionsTableRow.tsx b/app/client/app/dashboard/owner/collections/components/CollectionsTableRow.tsx
@@ -0,0 +1,45 @@
+import { Land } from "@/app/utils/types";
+
+function CollectionsTableRow({ land }: { land: Land }) {
+  const statusBadgeClasses = () => {
+    switch (land.status) {
+      case "approved":
+        return "bg-[#E8FFF3] text-[#50CD89]";
+      case "unapproved":
+        return "bg-[#F9F9F9] text-[#7E8299]";
+      case "bought":
+        return "bg-[#F1FAFF] text-[#00A3FF]";
+      default:
+        return "";
+    }
+  };
+  return (
+    <div className="grid grid-cols-[auto_1.9fr_3.4fr_2.1fr_1.3fr_1.2fr_auto] gap-x-3 text-sm font-bold text-[#3F4254] pb-4 border-b-[#7E82994D] border-b-[1px] border-dashed items-center">
+      <div>{land.num}</div>
+      <div>{land.id}</div>
+      <div className="flex gap-x-2 items-center">
+        <img src="/images/avatar.svg" className="w-6 rounded-full h-6" alt="" />
+        {land.name}
+      </div>
+      <div className="flex gap-x-2 items-center">
+        <img src="/icons/ethIcon.svg" className="w-6 rounded-full h-6" alt="" />
+        {land.price}
+      </div>
+      <div className="text-[#B5B5C3]">{land.date}</div>
+      <div>
+        <div
+          className={`${statusBadgeClasses()} w-[89px] py-[7px] px-[6px] rounded-lg text-center text-[13px] capitalize`}
+        >
+          {land.status}
+        </div>
+      </div>
+      <div>
+        <button className="w-[39px] bg-[#F9F9F9] py-2 flex justify-center rounded-lg">
+          <img src="/icons/moreVertIcon.svg" alt="" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default CollectionsTableRow;
diff --git a/app/client/app/dashboard/owner/collections/page.tsx b/app/client/app/dashboard/owner/collections/page.tsx
@@ -1,9 +1,90 @@
-import React from 'react'
-
+import React from "react";
+import CollectionsTable from "./components/CollectionsTable";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import LayersIcon from "@/app/svg/LayersIcon";
+import InfoCard from "@/app/components/ui/InfoCard";
+import SearchBar from "@/app/components/ui/SearchBar";
+import RegisterLandButton from "../components/registerLandButton";
 const page = () => {
   return (
-    <div>collections</div>
-  )
-}
+    <div>
+      <div className="flex justify-between items-center mb-[21px]">
+        <h2 className="text-[24px] leading-[26.4px] font-semibold text-[#090914]">
+          Collections
+        </h2>
+        <RegisterLandButton />
+      </div>
+      <div className="flex gap-x-6 items-center mb-6">
+        <InfoCard
+          icon={<LayersIcon fill="#5B93FF" />}
+          iconBg="#EFF5FF"
+          value="24"
+          description="Total Land Owned"
+        />
+        <InfoCard
+          icon={<LayersIcon fill="#FFC327" />}
+          iconBg="#FFF7E1"
+          value="10"
+          description="Total Land Registered"
+        />
+        <InfoCard
+          icon={<LayersIcon fill="#FF8F6B" />}
+          iconBg="#FFF4F1"
+          value="04"
+          description="Total Land Bought"
+        />
+        <InfoCard
+          icon={<LayersIcon fill="#605BFF" />}
+          iconBg="#F0EFFF"
+          value="02"
+          description="Total Land Unapproved"
+        />
+      </div>
+
+      <div className="bg-white p-6 rounded-xl">
+        <div className="flex items-center gap-x-[42px] mb-8">
+          <SearchBar />
+          <div className="flex items-center gap-x-4 text-sm text-[#7E8299] font-bold">
+            <div className="py-[11px] px-[26px] bg-[#F9F9F9] rounded-lg gap-x-2 flex items-center">
+              Status
+            </div>
+            <div className="py-[10px] px-3 bg-[#F9F9F9] rounded-lg gap-x-2 flex items-center">
+              <img src="/icons/calendarIcon.svg" alt="" />
+              Nov 11 - Nov 24
+            </div>
+          </div>
+        </div>
+
+        <CollectionsTable />
+
+        {/* Pagination */}
+        <div className="flex justify-end mt-[56px]">
+          <div className="flex gap-x-4 items-center">
+            <span>
+              <ChevronLeft size={24} />
+            </span>
+            <div className="flex gap-x-1 text-[13px] font-semibold text-white">
+              <div className="w-[25px] h-[25px] bg-[#6E62E5] rounded-full flex items-center justify-center text-center">
+                1
+              </div>
+              <div className="w-[25px] h-[25px] rounded-full text-[#7E8299] flex items-center justify-center text-center">
+                2
+              </div>
+              <div className="w-[25px] h-[25px] rounded-full text-[#7E8299] flex items-center justify-center text-center">
+                3
+              </div>
+              <div className="w-[25px] h-[25px] rounded-full text-[#7E8299] flex items-center justify-center text-center">
+                4
+              </div>
+            </div>
+            <span>
+              <ChevronRight size={24} />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-export default page
+export default page;