diff --git a/src/components/Admin/Components/sections/products/index.jsx b/src/components/Admin/Components/sections/products/index.jsx index e69de29b..d6d1dad2 100644 --- a/src/components/Admin/Components/sections/products/index.jsx +++ b/src/components/Admin/Components/sections/products/index.jsx @@ -0,0 +1,199 @@ +import { Fragment, useState, useEffect } from 'react' +import { Dialog, Transition } from '@headlessui/react' +import { Cog6ToothIcon, XMarkIcon } from '@heroicons/react/24/solid' +import TextField from '@/components/UI/Forms/TextField' + +export default function Products() { + const [formOpen, setFormOpen] = useState(false) + const [products, setProducts] = useState([]) + const [page, setPage] = useState(1) + const [pageSize, setPageSize] = useState(25) + const [productCount, setProductCount] = useState(0) + + const totalPages = productCount > 0 ? Math.ceil(productCount / pageSize) : 1 + + useEffect(() => { + const fetchProducts = async () => { + try { + const response = await fetch( + `/api/v1/admin/products?page=${page}&pageSize=${pageSize}` + ) + if (!response.ok) { + throw new Error('Network response was not ok') + } + const data = await response.json() + setProducts(data.products) + setProductCount(data.totalProducts) + } catch (error) { + console.error('Failed to fetch products:', error) + } + } + + fetchProducts() + }, [page, pageSize]) + + const toggleFormOpen = () => { + setFormOpen(prevState => !prevState) + } + + return ( +
+
+

Products

+

{productCount} products found

+
+
+ +
+ + {formOpen && ( + + )} + +
+ + + + + + + + + + {products.map(product => ( + + + + + + ))} + +
+ ID + + Product Name + + Manufactured By +
{product._id}{product.name} + {product.manufactured_by.owner_name} +
+
+
+ + + Page {page} of {totalPages} + + +
+
+ ) +} + +function ProductForm({ + formOpen, + setFormOpen, + setProducts, + setPage, + setProductCount, +}) { + const [submitted, setSubmitted] = useState(false) + const [formProduct, setFormProduct] = useState({ + name: '', + // Initialize other fields as needed + }) + + const handleFormChange = e => { + const { name, value } = e.target + setFormProduct(prev => ({ + ...prev, + [name]: value, + })) + } + + const SubmitForm = async e => { + e.preventDefault() + setSubmitted(true) + + if (!formProduct.name) { + return + } + try { + const response = await fetch('/api/v1/products', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(formProduct), + }) + + if (!response.ok) { + throw new Error('Network response was not ok') + } + + const data = await response.json() + setFormOpen(false) + // Optionally, refresh the products list or update state to include the new product + } catch (error) { + console.error('Submit failed:', error) + } + } + + return ( + + setFormOpen(false)} + > + {/* Dialog and form content */} +
+ {/* Form fields and submit button */} + + {/* Add more fields as needed */} + + +
+
+ ) +} diff --git a/src/components/Admin/Layout/AdminLayout.jsx b/src/components/Admin/Layout/AdminLayout.jsx index 0d1d1ebc..2830e7c7 100644 --- a/src/components/Admin/Layout/AdminLayout.jsx +++ b/src/components/Admin/Layout/AdminLayout.jsx @@ -16,6 +16,7 @@ import Image from 'next/image' import Dashboard from '../Components/sections/dashboard' import Users from '../Components/sections/users' import Roles from '../Components/sections/roles' +import Products from '../Components/sections/products' const teams = [ { id: 1, name: 'Heroicons', href: '#', initial: 'H', current: false }, @@ -45,8 +46,6 @@ export default function AdminLayout() { return case 'Products': return - case 'Logs': - return // Add cases for other sections as needed default: return

Selected Section: {selectedSection}

@@ -82,13 +81,6 @@ export default function AdminLayout() { current: selectedSection === 'Products', onClick: e => handleNavigationClick('Products', e), }, - { - name: 'Logs', - href: '#', - icon: DocumentTextIcon, - current: selectedSection === 'Logs', - onClick: e => handleNavigationClick('Logs', e), - }, ] return ( diff --git a/src/components/Global/NavbarGlobal.jsx b/src/components/Global/NavbarGlobal.jsx index f1da0a91..44aaa541 100644 --- a/src/components/Global/NavbarGlobal.jsx +++ b/src/components/Global/NavbarGlobal.jsx @@ -5,22 +5,32 @@ import { Container } from '../utils/Container' import { HomeIcon } from '@heroicons/react/24/outline' import Example from '../UI/Forms/UserDropdown' import SearchBar from './SearchBar' +import Link from 'next/link' -export function Header(props) { +export function NavbarGlobal({ searchBar = true, navClassName }) { const router = useRouter() const [isElementVisible, setElementVisibility] = useState(false) return ( -
+