diff --git a/app/client/app/components/sections/registerLandForm.tsx b/app/client/app/components/sections/registerLandForm.tsx index 22d05a5f..dd57bf4a 100644 --- 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) => { + const handleChange = ( + e: React.ChangeEvent + ) => { 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 = () => { 🛖

Register New Land

-

Please enter all details to register your land

+

+ Please enter all details to register your land +

@@ -122,10 +127,11 @@ const RegisterLandForm = () => { - +
+
+ + ); +} + +export default CollectionsTableRow; diff --git a/app/client/app/dashboard/owner/collections/page.tsx b/app/client/app/dashboard/owner/collections/page.tsx index e7a35dbe..8802acf9 100644 --- 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 ( -
collections
- ) -} +
+
+

+ Collections +

+ +
+
+ } + iconBg="#EFF5FF" + value="24" + description="Total Land Owned" + /> + } + iconBg="#FFF7E1" + value="10" + description="Total Land Registered" + /> + } + iconBg="#FFF4F1" + value="04" + description="Total Land Bought" + /> + } + iconBg="#F0EFFF" + value="02" + description="Total Land Unapproved" + /> +
+ +
+
+ +
+
+ Status +
+
+ + Nov 11 - Nov 24 +
+
+
+ + + + {/* Pagination */} +
+
+ + + +
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ + + +
+
+
+
+ ); +}; -export default page \ No newline at end of file +export default page; diff --git a/app/client/app/dashboard/owner/components/bestSeller.tsx b/app/client/app/dashboard/owner/components/bestSeller.tsx index e55ed95a..3980e955 100644 --- a/app/client/app/dashboard/owner/components/bestSeller.tsx +++ b/app/client/app/dashboard/owner/components/bestSeller.tsx @@ -1,15 +1,15 @@ -'use client' -import React from 'react' -import { ChevronRight } from 'lucide-react' +"use client"; +import React from "react"; +import { ChevronRight } from "lucide-react"; // Types export type BestSellerItem = { - id: number - landId: string - buyer: string - price: number - date: string -} + id: number; + landId: string; + buyer: string; + price: number; + date: string; +}; // Shared "View all" button with chevron export const ViewAllButton = () => { @@ -18,20 +18,21 @@ export const ViewAllButton = () => { View all - ) -} + ); +}; // Reusable Table Component export const Table = ({ headers, rows, title, - actionButton + actionButton, }: { - headers: { key: string; label: string }[] - rows: Record[] - title?: string - actionButton?: React.ReactNode + headers: { key: string; label: string }[]; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + rows: Record[]; + title?: string; + actionButton?: React.ReactNode; }) => { return (
@@ -41,7 +42,7 @@ export const Table = ({ {actionButton}
)} - +
@@ -55,7 +56,10 @@ export const Table = ({ {rows.map((row, rowIndex) => ( - + {headers.map((header) => (
{row[header.key]} @@ -67,20 +71,20 @@ export const Table = ({
- ) -} + ); +}; // Best Seller Table Component using the reusable Table export const BestSellerTable = ({ items }: { items: BestSellerItem[] }) => { const headers = [ - { key: 'id', label: 'NO' }, - { key: 'landId', label: 'LAND ID' }, - { key: 'buyer', label: 'BUYER/ LAND NAME' }, - { key: 'price', label: 'PRICE' }, - { key: 'date', label: 'DATE' } - ] + { key: "id", label: "NO" }, + { key: "landId", label: "LAND ID" }, + { key: "buyer", label: "BUYER/ LAND NAME" }, + { key: "price", label: "PRICE" }, + { key: "date", label: "DATE" }, + ]; - const rows = items.map(item => ({ + const rows = items.map((item) => ({ ...item, buyer: (
@@ -97,8 +101,8 @@ export const BestSellerTable = ({ items }: { items: BestSellerItem[] }) => {
{item.price} - ) - })) + ), + })); return ( { title="Best Seller" actionButton={} /> - ) -} + ); +}; export const generateBestSellerData = (): BestSellerItem[] => { return [ - { id: 1, landId: '56037-XDER', buyer: 'Tress1234', price: 0.2345, date: '20/11/24' }, - { id: 2, landId: '56037-XDER', buyer: 'Tress1234', price: 0.2345, date: '20/11/24' }, - { id: 3, landId: '56037-XDER', buyer: 'Tress1234', price: 0.2345, date: '20/11/24' }, - { id: 4, landId: '56037-XDER', buyer: 'Tress1234', price: 0.2345, date: '20/11/24' }, - ] -} \ No newline at end of file + { + id: 1, + landId: "56037-XDER", + buyer: "Tress1234", + price: 0.2345, + date: "20/11/24", + }, + { + id: 2, + landId: "56037-XDER", + buyer: "Tress1234", + price: 0.2345, + date: "20/11/24", + }, + { + id: 3, + landId: "56037-XDER", + buyer: "Tress1234", + price: 0.2345, + date: "20/11/24", + }, + { + id: 4, + landId: "56037-XDER", + buyer: "Tress1234", + price: 0.2345, + date: "20/11/24", + }, + ]; +}; diff --git a/app/client/app/dashboard/owner/components/registerLandButton.tsx b/app/client/app/dashboard/owner/components/registerLandButton.tsx new file mode 100644 index 00000000..55f785a6 --- /dev/null +++ b/app/client/app/dashboard/owner/components/registerLandButton.tsx @@ -0,0 +1,45 @@ +"use client"; + +import React, { useState } from "react"; +import { createPortal } from "react-dom"; +import { X } from "lucide-react"; +import RegisterLandForm from "@/app/components/sections/registerLandForm"; +import Button from "@/app/components/ui/button"; + +const RegisterLandButton = () => { + const [isOpen, setIsOpen] = useState(false); + + const toggleModal = () => setIsOpen((prev) => !prev); + + const modal = ( +
+
e.stopPropagation()} + > + +

+ Register New Land +

+ +
+
+ ); + + return ( + <> + + {isOpen && createPortal(modal, document.body)} + + ); +}; + +export default RegisterLandButton; diff --git a/app/client/app/dashboard/owner/page.tsx b/app/client/app/dashboard/owner/page.tsx index 4fdb6763..abf9eed1 100644 --- a/app/client/app/dashboard/owner/page.tsx +++ b/app/client/app/dashboard/owner/page.tsx @@ -1,59 +1,36 @@ -'use client' +"use client"; import React from "react"; -import RegisterLandForm from "@/app/components/sections/registerLandForm"; import Overview from "./components/overview"; -import Button from "@/app/components/ui/button"; -import { X } from "lucide-react"; -import { RecentActivities, generateRecentActivitiesData} from "./components/recentActivity"; -import { BestSellerTable, generateBestSellerData} from "./components/bestSeller"; - +import { + RecentActivities, + generateRecentActivitiesData, +} from "./components/recentActivity"; +import { + BestSellerTable, + generateBestSellerData, +} from "./components/bestSeller"; +import RegisterLandButton from "./components/registerLandButton"; const OwnerDashboard = () => { const recentActivities = generateRecentActivitiesData(); - const bestSellerData = generateBestSellerData() - - const [isRegisterModalOpen, setIsRegisterModalOpen] = - React.useState(false); - async function handleRegisterButtonCLick() { - - setIsRegisterModalOpen(!isRegisterModalOpen); - } - -if (isRegisterModalOpen) - return ( -
-
- -

- Register New Land -

- -
-
- ); - + const bestSellerData = generateBestSellerData(); return (

Overview

- +
-
- -
-
- +
+ +
+
+ +
-
); diff --git a/app/client/app/globals.css b/app/client/app/globals.css index 375e47da..8b2171e2 100644 --- a/app/client/app/globals.css +++ b/app/client/app/globals.css @@ -16,13 +16,20 @@ body { color: var(--foreground); + position: relative; background: var(--background); font-family: Arial, Helvetica, sans-serif; } @keyframes dotPulse { - 0% { opacity: 1; } - 50% { opacity: 0.3; } - 100% { opacity: 1; } + 0% { + opacity: 1; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 1; + } } .dot-pulse { diff --git a/app/client/app/svg/LayersIcon.tsx b/app/client/app/svg/LayersIcon.tsx new file mode 100644 index 00000000..76850c61 --- /dev/null +++ b/app/client/app/svg/LayersIcon.tsx @@ -0,0 +1,25 @@ +import React from "react"; + +function LayersIcon({ fill }: { fill: string }) { + return ( + + + + + ); +} + +export default LayersIcon; diff --git a/app/client/app/utils/types.ts b/app/client/app/utils/types.ts new file mode 100644 index 00000000..4967ae1f --- /dev/null +++ b/app/client/app/utils/types.ts @@ -0,0 +1,8 @@ +export type Land = { + num: number; + id: string; + name: string; + price: string; + date: string; + status: "approved" | "unapproved" | "bought"; +}; diff --git a/app/client/public/icons/calendarIcon.svg b/app/client/public/icons/calendarIcon.svg new file mode 100644 index 00000000..c2cac742 --- /dev/null +++ b/app/client/public/icons/calendarIcon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/app/client/public/icons/ethIcon.svg b/app/client/public/icons/ethIcon.svg new file mode 100644 index 00000000..f003346d --- /dev/null +++ b/app/client/public/icons/ethIcon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/app/client/public/icons/moreVertIcon.svg b/app/client/public/icons/moreVertIcon.svg new file mode 100644 index 00000000..eb1bd4c5 --- /dev/null +++ b/app/client/public/icons/moreVertIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/public/icons/searchIcon.svg b/app/client/public/icons/searchIcon.svg new file mode 100644 index 00000000..ea2b9da0 --- /dev/null +++ b/app/client/public/icons/searchIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/public/images/avatar.svg b/app/client/public/images/avatar.svg new file mode 100644 index 00000000..89f40b71 --- /dev/null +++ b/app/client/public/images/avatar.svg @@ -0,0 +1,9 @@ + + + + + + + + +