\n
\n \n \n
\n \n \n );\n}\n\nexport default Contact;"
},
{
"path": "ecom-frontend/src/components/PrivateRoute.jsx",
"content": "import React from 'react'\nimport { useSelector } from 'react-redux'\nimport { Navigate, Outlet, useLocation } from 'react-router-dom';\n\nconst PrivateRoute = ({ publicPage = false, adminOnly = false }) => {\n const { user } = useSelector((state) => state.auth);\n const isAdmin = user && user?.roles?.includes(\"ROLE_ADMIN\");\n const isSeller = user && user?.roles.includes(\"ROLE_SELLER\");\n const location = useLocation();\n\n if (publicPage) {\n return user ? Contact us
\n\n We would love to hear from you! Please fill out the form below or contact us directly\n
\n\n \n\n\n
\n Contact Information
\n\n
\n \n
\n\n \n
\n\n \n
\n \n \n
\n \n \n\n\n\n\n
\n )\n}\n\nexport default AdminLayout"
},
{
"path": "ecom-frontend/src/components/admin/categories/AddCategoryForm.jsx",
"content": "import React, { useEffect } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { useDispatch } from \"react-redux\";\nimport toast from \"react-hot-toast\";\n\nimport {\n createCategoryDashboardAction,\n updateCategoryDashboardAction,\n} from \"../../../store/actions\";\nimport InputField from \"../../shared/InputField\";\n\nconst AddCategoryForm = ({ setOpen, open, category, update = false }) => {\n const dispatch = useDispatch();\n\n const {\n register,\n handleSubmit,\n reset,\n setValue,\n formState: { errors },\n } = useForm({\n mode: \"onTouched\",\n });\n\n const addNewCategoryHandler = (data) => {\n if (!update) {\n //dispatch createCategoryDashboardAction\n dispatch(createCategoryDashboardAction(data, setOpen, reset, toast));\n } else {\n //dispatch updateCategoryDashboardAction\n dispatch(\n updateCategoryDashboardAction(data, setOpen, category.id, reset, toast)\n );\n }\n };\n useEffect(() => {\n if (update && category) {\n setValue(\"categoryName\", category?.categoryName);\n }\n }, [update, category]);\n\n return (\n \n
\n\n \n setSidebarOpen(true)}\n className='-m-2.5 text-gray-700 xl:hidden p-4'>\n Open Sidebar\n \n \n
\n \n \n
\n );\n};\n\nexport default AddCategoryForm;"
},
{
"path": "ecom-frontend/src/components/admin/categories/Category.jsx",
"content": "import React, { useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { useLocation, useNavigate, useSearchParams } from \"react-router-dom\";\nimport { DataGrid } from \"@mui/x-data-grid\";\nimport { FaFolderOpen, FaThList } from \"react-icons/fa\";\nimport toast from \"react-hot-toast\";\n\nimport Modal from \"../../shared/Modal\";\nimport AddCategoryForm from \"./AddCategoryForm\";\nimport Loader from \"../../shared/Loader\";\nimport { DeleteModal } from \"../../../components/shared/DeleteModal\";\nimport useCategoryFilter from \"../../../hooks/useCategoryFilter\";\nimport ErrorPage from \"../../shared/ErrorPage\";\nimport { deleteCategoryDashboardAction } from \"../../../store/actions\";\nimport { categoryTableColumns } from \"../../helper/tableColumn\";\n\nconst Category = () => {\n const [searchParams] = useSearchParams();\n const pathname = useLocation().pathname;\n const params = new URLSearchParams(searchParams);\n const navigate = useNavigate();\n\n const dispatch = useDispatch();\n const [openModal, setOpenModal] = useState(false);\n const [openUpdateModal, setOpenUpdateModal] = useState(false);\n const [openDeleteModal, setOpenDeleteModal] = useState(false);\n const [selectedCategory, setSelectedCategory] = useState(null);\n\n const { categoryLoader, errorMessage } = useSelector((state) => state.errors);\n const { categories, pagination } = useSelector((state) => state.products);\n const [currentPage, setCurrentPage] = useState(\n pagination?.pageNumber + 1 || 1\n );\n\n // Calling the `useCategoryFilter` custom hook to handle category fetching and pagination based on the current URL parameters.\n useCategoryFilter();\n\n const tableRecords = categories?.map((item) => ({\n id: item.categoryId,\n categoryName: item.categoryName,\n version: item.version,\n }));\n\n const handleEdit = (category) => {\n setOpenUpdateModal(true);\n setSelectedCategory(category);\n };\n\n const handleDelete = (category) => {\n setSelectedCategory(category);\n setOpenDeleteModal(true);\n };\n\n const onDeleteHandler = () => {\n dispatch(\n deleteCategoryDashboardAction(setOpenDeleteModal, selectedCategory?.id, toast)\n );\n };\n\n const handlePaginationChange = (paginationModel) => {\n const page = paginationModel.page + 1; // Adjust to 1-based index\n setCurrentPage(page);\n\n params.set(\"page\", page.toString());\n navigate(`${pathname}?${params}`);\n };\n\n const emptyCategories = !categories || categories?.length === 0;\n\n if (errorMessage) return \n
\n\n \n setOpen(false)}\n type=\"button\"\n className={`border border-borderColor rounded-[5px] font-metropolis text-textColor py-[10px] px-4 text-sm font-medium`}\n >\n Cancel\n \n \n {open ? \"Loading..\" : update ? \"Update\" : \"Save\"}\n \n
\n \n \n \n
\n );\n};\n\nexport default Category;"
},
{
"path": "ecom-frontend/src/components/admin/dashboard/Dashboard.jsx",
"content": "import React, { useEffect } from 'react'\nimport DashboardOverview from './DashboardOverview'\nimport { FaBoxOpen, FaDollarSign, FaShoppingCart } from 'react-icons/fa';\nimport { MdAttachMoney } from 'react-icons/md';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { analyticsAction } from '../../../store/actions';\nimport Loader from '../../shared/Loader';\nimport ErrorPage from '../../shared/ErrorPage';\n\nconst Dashboard = () => {\n const dispatch = useDispatch();\n const {isLoading, errorMessage} = useSelector((state) => state.errors);\n const { \n analytics: { productCount, totalRevenue, totalOrders },\n } = useSelector((state) => state.admin);\n\n useEffect(() => {\n dispatch(analyticsAction());\n }, [dispatch]);\n\n if (isLoading) {\n return \n setOpenModal(true)}\n className=\"bg-custom-blue hover:bg-blue-800 text-white font-semibold py-2 px-4 flex items-center gap-2 rounded-md shadow-md transition-colors hover:text-slate-300 duration-300\"\n >\n
\n {!emptyCategories && (\n \n All Categories\n
\n )}\n\n {categoryLoader ? (\n\n
\n ) : (\n \n No Categories Created Yet\n
\n\n
\n )}\n \n )}\n\n \n
\n )\n}\n\nexport default Dashboard"
},
{
"path": "ecom-frontend/src/components/admin/dashboard/DashboardOverview.jsx",
"content": "import { Icon } from '@mui/material';\nimport React from 'react'\nimport { formatRevenue } from '../../../utils/formatPrice';\n\nconst DashboardOverview = ({ title, amount, Icon, revenue = false }) => {\n \n const convertedAmount = revenue ? Number(amount).toFixed(2) : amount;\n\n return (\n <>\n \n
\n \n
\n \n )\n}\n\nexport default DashboardOverview"
},
{
"path": "ecom-frontend/src/components/admin/orders/OrderTable.jsx",
"content": "import { DataGrid } from '@mui/x-data-grid'\nimport { adminOrderTableColumn } from '../../helper/tableColumn';\nimport { useState } from 'react';\nimport { useLocation, useNavigate, useSearchParams } from 'react-router-dom';\nimport Modal from '../../shared/Modal';\nimport UpdateOrderForm from './UpdateOrderForm';\n\nconst OrderTable = ({ adminOrder, pagination}) => {\n const [updateOpenModal, setUpdateOpenModal] = useState(false);\n const [selectedItem, setSelectedItem] = useState(\"\");\n const [loader, setLoader] = useState(false);\n const navigate = useNavigate();\n const [currentPage, setCurrentPage] = useState(\n pagination?.pageNumber + 1 || 1\n );\n\n const [searchParams] = useSearchParams();\n const params = new URLSearchParams(searchParams);\n const pathname = useLocation().pathname;\n\nconst tableRecords = adminOrder?.map((item) => {\n return {\n id: item.orderId,\n email: item.email,\n totalAmount: item.totalAmount,\n status: item.orderStatus,\n date: item.orderDate,\n }\n});\n\nconst handlePaginationChange = (paginationModel) => {\n const page = paginationModel.page + 1;\n setCurrentPage(page);\n params.set(\"page\", page.toString());\n navigate(`${pathname}?${params}`)\n}\n\nconst handleEdit = (order) => {\n setSelectedItem(order);\n setUpdateOpenModal(true);\n}\n\n return (\n \n
\n\n {title}
\n\n {revenue ? \"$\" : null}\n {revenue ? formatRevenue(convertedAmount) : convertedAmount}\n
\n\n \n
\n )\n}\n\nexport default OrderTable"
},
{
"path": "ecom-frontend/src/components/admin/orders/Orders.jsx",
"content": "import React from 'react'\nimport { FaShoppingCart } from 'react-icons/fa';\nimport OrderTable from './OrderTable';\nimport { useSelector } from 'react-redux';\nimport useOrderFilter from '../../../hooks/useOrderFilter';\n\nconst Orders = () => {\n // const adminOrder = [ { \"orderId\": 17, \"email\": \"user1@example.com\", \"orderItems\": [ { \"orderItemId\": 7, \"product\": { \"productId\": 153, \"productName\": \"Running Shoes\", \"image\": \"0abca637-0c4e-4054-ae03-bdfc51cb3396.png\", \"description\": \"Comfortable and lightweight running shoes for daily fitness\", \"quantity\": 49, \"price\": 80, \"discount\": 10, \"specialPrice\": 72 }, \"quantity\": 1, \"discount\": 10, \"orderedProductPrice\": 72 } ], \"orderDate\": \"2025-02-15\", \"payment\": { \"paymentId\": 17, \"paymentMethod\": \"online\", \"pgPaymentId\": \"pi_3QsfCYLK9jOar8Y81NsK7PXG\", \"pgStatus\": \"succeeded\", \"pgResponseMessage\": \"Payment successful\", \"pgName\": \"Stripe\" }, \"totalAmount\": 72, \"orderStatus\": \"Order Accepted !\", \"addressId\": 1 }, { \"orderId\": 18, \"email\": \"user1@example.com\", \"orderItems\": [ { \"orderItemId\": 8, \"product\": { \"productId\": 102, \"productName\": \"Blender\", \"image\": \"39356dd0-6682-4821-adc8-b198ee85b358.png\", \"description\": \"High-performance Blender having powerful features for modern family\", \"quantity\": 28, \"price\": 500, \"discount\": 19, \"specialPrice\": 405 }, \"quantity\": 1, \"discount\": 19, \"orderedProductPrice\": 405 } ], \"orderDate\": \"2025-07-18\", \"payment\": { \"paymentId\": 18, \"paymentMethod\": \"online\", \"pgPaymentId\": \"pi_3Rm6zYLK9jOar8Y81iyMdnMg\", \"pgStatus\": \"succeeded\", \"pgResponseMessage\": \"Payment successful\", \"pgName\": \"Stripe\" }, \"totalAmount\": 405, \"orderStatus\": \"Order Accepted !\", \"addressId\": 5 } ];\n // const pagination = { pageNumber: 0, pageSize: 50, totalElements: 11, totalPages: 1, lastPage: true };\n \n const {adminOrder, pagination} = useSelector((state) => state.order);\n\n useOrderFilter();\n\n const emptyOrder = !adminOrder || adminOrder?.length ===0;\n return (\n \n All Orders\n
\n\n\n
\n\n \n {emptyOrder ? (\n \n )}\n
\n )\n}\n\nexport default Orders"
},
{
"path": "ecom-frontend/src/components/admin/orders/UpdateOrderForm.jsx",
"content": "import { Button, FormControl, FormHelperText, InputLabel, MenuItem, Select } from '@mui/material'\nimport React, { useState } from 'react'\nimport { FaSpinner } from 'react-icons/fa';\nimport Spinners from '../../shared/Spinners';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { updateOrderStatusFromDashboard } from '../../../store/actions';\nimport toast from 'react-hot-toast';\n\nconst ORDER_STATUSES = [\n \"Pending\",\n \"Processing\",\n \"Shipped\",\n \"Delivered\",\n \"Cancelled\",\n \"Accepted\",\n];\n\nconst UpdateOrderForm = ({ setOpen, selectedId, selectedItem, loader, setLoader}) => {\n const [orderStatus, setOrderStatus] = useState(selectedItem?.status || 'Accepted');\n const [error, setError] = useState(\"\");\n const dispatch = useDispatch();\n\n const { user } = useSelector((state) => state.auth);\n const isAdmin = user && user?.roles?.includes(\"ROLE_ADMIN\");\n\n const updateOrderStatus = (e) => {\n e.preventDefault();\n if (!orderStatus) {\n setError(\"Order status is required\");\n return;\n }\n dispatch(updateOrderStatusFromDashboard(\n selectedId,\n orderStatus,\n toast,\n setLoader,\n isAdmin\n ));\n };\n\n return (\n \n
\n ) : (\n No Orders Placed Yet
\n\n \n\n
\n )\n}\n\nexport default UpdateOrderForm"
},
{
"path": "ecom-frontend/src/components/admin/products/AddProductForm.jsx",
"content": "import React, { useEffect, useState } from 'react'\nimport { useForm } from 'react-hook-form'\nimport InputField from '../../shared/InputField';\nimport { Button } from '@mui/material';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { addNewProductFromDashboard, fetchCategories, updateProductFromDashboard } from '../../../store/actions';\nimport toast from 'react-hot-toast';\nimport Spinners from '../../shared/Spinners';\nimport SelectTextField from '../../shared/SelectTextField';\nimport Skeleton from '../../shared/Skeleton';\nimport ErrorPage from '../../shared/ErrorPage';\n\nconst AddProductForm = ({ setOpen, product, update=false}) => {\nconst [loader, setLoader] = useState(false);\nconst [selectedCategory, setSelectedCategory] = useState();\nconst { categories } = useSelector((state) => state.products);\nconst { categoryLoader, errorMessage } = useSelector((state) => state.errors);\nconst { user } = useSelector((state) => state.auth);\nconst isAdmin = user && user?.roles?.includes(\"ROLE_ADMIN\");\n\nconst dispatch = useDispatch();\n const {\n register,\n handleSubmit,\n reset,\n setValue,\n formState: { errors }\n } = useForm({\n mode: \"onTouched\"\n });\n\n const saveProductHandler = (data) => {\n if(!update) {\n // create new product logic\n const sendData = {\n ...data,\n categoryId: selectedCategory.categoryId,\n };\n dispatch(addNewProductFromDashboard(\n sendData, toast, reset, setLoader, setOpen, isAdmin\n ));\n } else {\n const sendData = {\n ...data,\n id: product.id,\n };\n dispatch(updateProductFromDashboard(sendData, toast, reset, setLoader, setOpen, isAdmin));\n }\n };\n\n\n useEffect(() => {\n if (update && product) {\n setValue(\"productName\", product?.productName);\n setValue(\"price\", product?.price);\n setValue(\"quantity\", product?.quantity);\n setValue(\"discount\", product?.discount);\n setValue(\"specialPrice\", product?.specialPrice);\n setValue(\"description\", product?.description);\n }\n }, [update, product]);\n\n\n useEffect(() => {\n if (!update) {\n dispatch(fetchCategories());\n }\n }, [dispatch, update]);\n\n useEffect(() => {\n if (!categoryLoader && categories) {\n setSelectedCategory(categories[0]);\n }\n }, [categories, categoryLoader]);\n\n if (categoryLoader) return \n \n
\n )\n}\n\nexport default AddProductForm"
},
{
"path": "ecom-frontend/src/components/admin/products/AdminProducts.jsx",
"content": "import React, { useState } from 'react'\nimport { MdAddShoppingCart } from 'react-icons/md';\nimport { useDispatch, useSelector } from 'react-redux';\nimport Loader from '../../shared/Loader';\nimport { FaBoxOpen } from 'react-icons/fa';\nimport { DataGrid } from '@mui/x-data-grid';\nimport { adminProductTableColumn } from '../../helper/tableColumn';\nimport { useDashboardProductFilter } from '../../../hooks/useProductFilter';\nimport Modal from '../../shared/Modal';\nimport AddProductForm from './AddProductForm';\nimport DeleteModal from '../../shared/DeleteModal';\nimport { deleteProduct } from '../../../store/actions';\nimport toast from 'react-hot-toast';\nimport ImageUploadForm from './ImageUploadForm';\nimport ProductViewModal from '../../shared/ProductViewModal';\nimport { useLocation, useNavigate, useSearchParams } from 'react-router-dom';\n\nconst AdminProducts = () => {\n // const products = [{ \"productId\": 52, \"productName\": \"iPad Pro\", \"image\": \"http://localhost:8080/images/7a7b38c4-2342-4d10-89e9-2c5b3c4fdb44.png\", \"description\": \"High-performance Tablet with a 4K display and powerful camera\", \"quantity\": 30, \"price\": 1800.0, \"discount\": 43.0, \"specialPrice\": 1026.0 }, { \"productId\": 2, \"productName\": \"iPhone 16 Pro Max\", \"image\": \"http://localhost:8080/images/22185fd1-024a-4708-9a10-832b8a50bfde.png\", \"description\": \"High-performance phone with a 4K display and powerful camera\", \"quantity\": 19, \"price\": 1400.0, \"discount\": 23.0, \"specialPrice\": 1078.0 }];\n // const pagination = { pageNumber: 0, pageSize: 50, totalElements: 11, totalPages: 1, lastPage: true };\n \n const {products, pagination} = useSelector((state) => state.products);\n const { isLoading, errorMessage } = useSelector((state) => state.errors);\n const [currentPage, setCurrentPage] = useState(\n pagination?.pageNumber + 1 || 1\n );\n\n const dispatch = useDispatch();\n \n const [selectedProduct, setSelectedProduct] = useState('');\n const [openUpdateModal, setOpenUpdateModal] = useState(false);\n const [openAddModal, setOpenAddModal] = useState(false);\n const [openDeleteModal, setOpenDeleteModal] = useState(false);\n const [openProductViewModal, setOpenProductViewModal] = useState(false);\n const [openImageUploadModal, setOpenImageUploadModal] = useState(false);\n\n const [loader, setLoader] = useState(false);\n\n const navigate = useNavigate();\n const [searchParams] = useSearchParams();\n const params = new URLSearchParams(searchParams);\n const pathname = useLocation().pathname;\n\n const { user } = useSelector((state) => state.auth);\n const isAdmin = user && user?.roles?.includes(\"ROLE_ADMIN\");\n\n useDashboardProductFilter();\n\n const tableRecords = products?.map((item) => {\n return {\n id: item.productId,\n productName: item.productName,\n description: item.description,\n discount: item.discount,\n image: item.image,\n price: item.price,\n quantity: item.quantity,\n specialPrice: item.specialPrice,\n }\n});\n\nconst handleEdit = (product) => {\n setSelectedProduct(product);\n setOpenUpdateModal(true);\n};\n\nconst handleDelete = (product) => {\n setSelectedProduct(product);\n setOpenDeleteModal(true);\n};\n\nconst handleImageUpload = (product) => {\n setSelectedProduct(product);\n setOpenImageUploadModal(true);\n};\n\nconst handleProductView = (product) => {\n setSelectedProduct(product);\n setOpenProductViewModal(true);\n};\n\n\nconst handlePaginationChange = (paginationModel) => {\n const page = paginationModel.page + 1;\n setCurrentPage(page);\n params.set(\"page\", page.toString());\n navigate(`${pathname}?${params}`)\n};\n\n\nconst onDeleteHandler = () => {\n dispatch(deleteProduct(setLoader, selectedProduct?.id, toast, setOpenDeleteModal, isAdmin));\n};\n\n const emptyProduct = !products || products?.length ===0;\n return (\n \n \n \n
\n )\n}\n\nexport default AdminProducts"
},
{
"path": "ecom-frontend/src/components/admin/products/ImageUploadForm.jsx",
"content": "import React, { useRef, useState } from 'react'\nimport { FaCloudUploadAlt } from 'react-icons/fa'\nimport Spinners from '../../shared/Spinners';\nimport { Button } from '@mui/material';\nimport toast from 'react-hot-toast';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { updateProductImageFromDashboard } from '../../../store/actions';\n\nconst ImageUploadForm = ({ setOpen, product }) => {\n const [loader, setLoader] = useState(false);\n const fileInputRef = useRef();\n const [previewImage, setPreviewImage] = useState(null);\n const [selectedFile, setSelectedFile] = useState(null);\n const dispatch = useDispatch();\n\n const { user } = useSelector((state) => state.auth);\n const isAdmin = user && user?.roles?.includes(\"ROLE_ADMIN\");\n\n const onHandleImageChange = (e) => {\n const file = e.target.files[0];\n if (file && [\"image/jpeg\", \"image/jpg\", \"image/png\"].includes(file.type)) {\n const reader = new FileReader();\n reader.onloadend = () => {\n setPreviewImage(reader.result);\n };\n reader.readAsDataURL(file);\n setSelectedFile(file);\n } else {\n toast.error(\"Please select a valid image file (.jpeg, .jpg, .png)\");\n setPreviewImage(null);\n setSelectedFile(null);\n }\n\n };\n\n const addNewImageHandler = async (event) => {\n event.preventDefault();\n if (!selectedFile) {\n toast.error(\"Please select an image before saving.\");\n return;\n }\n\n const formData = new FormData();\n formData.append(\"image\", selectedFile);\n\n dispatch(updateProductImageFromDashboard(formData, product.id, toast, setLoader, setOpen, isAdmin));\n };\n\n const handleClearImage = () => {\n setPreviewImage(null);\n setSelectedFile(null);\n fileInputRef.current.value = null;\n };\n\n return (\n \n setOpenAddModal(true)}\n className='bg-custom-blue hover:bg-blue-800 text-white font-semibold py-2 px-4 flex items-center gap-2 rounded-md shadow-md transition-colors hover:text-slate-300 duration-300'>\n
\n\n\n {!emptyProduct && (\n \n All Products
\n )}\n {isLoading ? (\n\n
\n ) : (\n \n No products created yet \n
\n\n
\n )}\n \n )}\n\n \n \n
\n )\n}\n\nexport default ImageUploadForm"
},
{
"path": "ecom-frontend/src/components/admin/sellers/AddSellerForm.jsx",
"content": "import React, { useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { useForm } from \"react-hook-form\";\nimport toast from \"react-hot-toast\";\nimport { addNewDashboardSeller } from \"../../../store/actions\";\nimport InputField from \"../../shared/InputField\";\nimport Spinners from \"../../shared/Spinners\";\n\nconst AddSellerForm = ({ setOpen }) => {\n const dispatch = useDispatch();\n const [loader, setLoader] = useState(false);\n\n const {\n register,\n handleSubmit,\n reset,\n formState: { errors },\n } = useForm({\n mode: \"onTouched\",\n });\n\n const addSellerHandler = (data) => {\n const sendData = {\n ...data,\n role: [\"seller\"],\n };\n\n dispatch(addNewDashboardSeller(sendData, toast, reset, setOpen, setLoader));\n };\n\n return (\n \n \n
\n );\n};\n\nexport default AddSellerForm;"
},
{
"path": "ecom-frontend/src/components/admin/sellers/SellerTable.jsx",
"content": "import React, { useState } from \"react\";\nimport { useLocation, useNavigate, useSearchParams } from \"react-router-dom\";\nimport { DataGrid } from \"@mui/x-data-grid\";\nimport { sellerTableColumns } from \"../../helper/tableColumn\";\n\nconst SellerTable = ({ sellers, pagination }) => {\n const navigate = useNavigate();\n const [searchParams] = useSearchParams();\n const pathname = useLocation().pathname;\n const params = new URLSearchParams(searchParams);\n const [currentPage, setCurrentPage] = useState(pagination?.pageNumber || 1);\n\n const tableRecords = sellers?.map((item) => {\n return {\n id: item.userId,\n username: item.username,\n email: item.email,\n };\n });\n\n const handlePaginationChange = (paginationModel) => {\n const page = paginationModel.page + 1;\n setCurrentPage(page);\n\n params.set(\"page\", page.toString());\n navigate(`${pathname}?${params}`);\n };\n\n return (\n \n
\n );\n};\n\nexport default SellerTable;"
},
{
"path": "ecom-frontend/src/components/admin/sellers/Sellers.jsx",
"content": "import React, { useState } from \"react\";\nimport { useSelector } from \"react-redux\";\nimport { MdPersonAdd } from \"react-icons/md\";\n\nimport SellerTable from \"./SellerTable\";\nimport ErrorPage from \"../../shared/ErrorPage\";\nimport Loader from \"../../shared/Loader\";\nimport Modal from \"../../shared/Modal\";\nimport AddSellerForm from \"./AddSellerForm\";\nimport useSellerFilter from \"./useSellerFilter\";\n\nconst Sellers = () => {\n const [openModal, setOpenModal] = useState(false);\n const { sellers, pagination } = useSelector((state) => state.seller);\n const { isLoading, errorMessage } = useSelector((state) => state.errors);\n\n // Calling the `useSellerFilter` custom hook to fetch sellers and pagination based on the current URL parameters.\n useSellerFilter();\n\n const emptySellers = !sellers || sellers?.length === 0;\n\n if (errorMessage) {\n return \n
\n \n setOpenModal(true)}\n className=\"bg-custom-blue hover:bg-blue-800 text-white font-semibold py-2 px-4 flex items-center gap-2 rounded-md shadow-md transition-colors hover:text-slate-300 duration-300\"\n >\n
\n\n {!emptySellers && (\n \n All Sellers\n
\n )}\n\n {isLoading ? (\n\n
\n \n ) : (\n \n No Seller Created Yet\n
\n\n \n
\n\n {loader ? (\n <>\n
\n );\n}\n\nexport default LogIn;"
},
{
"path": "ecom-frontend/src/components/auth/Register.jsx",
"content": "import React, { useState } from 'react'\nimport { useForm } from 'react-hook-form';\nimport { FaUserPlus } from 'react-icons/fa';\nimport { Link, useNavigate } from 'react-router-dom';\nimport InputField from '../shared/InputField';\nimport { useDispatch } from 'react-redux';\nimport { registerNewUser } from '../../store/actions';\nimport toast from 'react-hot-toast';\nimport Spinners from '../shared/Spinners';\n\nconst Register = () => {\n const navigate = useNavigate();\n const dispatch = useDispatch();\n const [loader, setLoader] = useState(false);\n\n const {\n register,\n handleSubmit,\n reset,\n formState: {errors},\n } = useForm({\n mode: \"onTouched\",\n });\n\n const registerHandler = async (data) => {\n console.log(\"Register Click\");\n dispatch(registerNewUser(data, toast, reset, navigate, setLoader));\n };\n\n return (\n \n
\n \n Login Here\n
\n\n
\n
\n\n \n Don't have an account?\n
\n \n
\n\n {loader ? (\n <>\n
\n );\n}\n\nexport default Register"
},
{
"path": "ecom-frontend/src/components/cart/Cart.jsx",
"content": "import { MdArrowBack, MdShoppingCart } from \"react-icons/md\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport ItemContent from \"./ItemContent\";\nimport CartEmpty from \"./CartEmpty\";\nimport { formatPrice } from \"../../utils/formatPrice\";\n\nconst Cart = () => {\n const dispatch = useDispatch();\n const { cart } = useSelector((state) => state.carts);\n const newCart = { ...cart };\n\n newCart.totalPrice = cart?.reduce(\n (acc, cur) => acc + Number(cur?.specialPrice) * Number(cur?.quantity), 0\n );\n\n if (!cart || cart.length === 0) return \n
\n \n Register Here\n
\n\n
\n
\n\n \n Already have an account?\n
\n
\n );\n};\n\nexport default Cart;"
},
{
"path": "ecom-frontend/src/components/cart/CartEmpty.jsx",
"content": "import { MdArrowBack, MdShoppingCart } from \"react-icons/md\";\nimport { Link } from \"react-router-dom\";\n\nconst CartEmpty = () => {\n return (\n \n \n
\n
\n\n \n
\n All your selected items
\n\n
\n\n \n Product\n
\n\n \n Price\n
\n\n \n Quantity\n
\n\n \n Total\n
\n \n {cart && cart.length > 0 &&\n cart.map((item, i) =>
\n\n \n \n
\n \n {}}\n className=\"font-semibold w-[300px] py-2 px-4 rounded-xs bg-custom-blue text-white flex items-center justify-center gap-2 hover:text-gray-300 transition duration-500\">\n
\n \n Subtotal\n {formatPrice(newCart?.totalPrice)}\n
\n\n \n Taxes and shipping calculated at checkout\n
\n\n \n\n
\n ) \n}\n\nexport default CartEmpty;"
},
{
"path": "ecom-frontend/src/components/cart/ItemContent.jsx",
"content": "import { useState } from \"react\";\nimport { HiOutlineTrash } from \"react-icons/hi\";\nimport SetQuantity from \"./SetQuantity\";\nimport { useDispatch } from \"react-redux\";\nimport { decreaseCartQuantity, increaseCartQuantity, removeFromCart } from \"../../store/actions\";\nimport toast from \"react-hot-toast\";\nimport { formatPrice } from \"../../utils/formatPrice\";\nimport truncateText from \"../../utils/truncateText\";\n\nconst ItemContent = ({\n productId,\n productName,\n image,\n description,\n quantity,\n price,\n discount,\n specialPrice,\n cartId,\n }) => {\n const [currentQuantity, setCurrentQuantity] = useState(quantity);\n const dispatch = useDispatch();\n\n const handleQtyIncrease = (cartItems) => {\n dispatch(increaseCartQuantity(\n cartItems,\n toast,\n currentQuantity,\n setCurrentQuantity\n ));\n };\n\n const handleQtyDecrease = (cartItems) => {\n if (currentQuantity > 1) {\n const newQuantity = currentQuantity - 1;\n setCurrentQuantity(newQuantity);\n dispatch(decreaseCartQuantity(cartItems, newQuantity));\n }\n };\n\n const removeItemFromCart = (cartItems) => {\n dispatch(removeFromCart(cartItems, toast));\n };\n \n return (\n \n
\n \n Your cart is empty\n
\n \n Add some products to get started\n
\n \n \n
\n \n
\n )\n};\n\nexport default ItemContent;"
},
{
"path": "ecom-frontend/src/components/cart/SetQuantity.jsx",
"content": "\nconst btnStyles = \"border-[1.2px] border-slate-800 px-3 py-1 rounded-sm\";\nconst SetQuantity = ({\n quantity,\n cardCounter,\n handeQtyIncrease,\n handleQtyDecrease,\n}) => {\n return (\n \n
\n\n \n
\n\n \n {truncateText(productName)}\n
\n\n 
\n \n\n
\n \n \n\n \n removeItemFromCart({\n image,\n productName,\n description,\n specialPrice,\n price,\n productId,\n quantity,\n })}\n className=\"flex items-center font-semibold space-x-2 px-4 py-1 text-xs border border-rose-600 text-rose-600 rounded-md hover:bg-red-50 transition-colors duration-200\">\n \n Remove\n \n
\n \n {formatPrice(Number(specialPrice))}\n
\n\n \n handleQtyIncrease({\n image,\n productName,\n description,\n specialPrice,\n price,\n productId,\n quantity,\n })}\n handleQtyDecrease={() => {handleQtyDecrease({\n image,\n productName,\n description,\n specialPrice,\n price,\n productId,\n quantity,\n })}}/>\n
\n\n \n {formatPrice(Number(currentQuantity) * Number(specialPrice))}\n
\n \n {cardCounter ? null :
\n );\n};\n\nexport default SetQuantity;"
},
{
"path": "ecom-frontend/src/components/checkout/AddAddressForm.jsx",
"content": "import React, { useEffect } from 'react'\nimport InputField from '../shared/InputField'\nimport { useForm } from 'react-hook-form';\nimport { FaAddressCard } from 'react-icons/fa';\nimport { useDispatch, useSelector } from 'react-redux';\nimport Spinners from '../shared/Spinners';\nimport toast from 'react-hot-toast';\nimport { addUpdateUserAddress } from '../../store/actions';\n\nconst AddAddressForm = ({ address, setOpenAddressModal }) => {\n const dispatch = useDispatch();\n const { btnLoader } = useSelector((state) => state.errors);\n const {\n register,\n handleSubmit,\n reset,\n setValue,\n formState: {errors},\n } = useForm({\n mode: \"onTouched\",\n });\n\n const onSaveAddressHandler = async (data) => {\n dispatch(addUpdateUserAddress(\n data,\n toast,\n address?.addressId,\n setOpenAddressModal\n ));\n };\n\n\n useEffect(() => {\n if (address?.addressId) {\n setValue(\"buildingName\", address?.buildingName);\n setValue(\"city\", address?.city);\n setValue(\"street\", address?.street);\n setValue(\"state\", address?.state);\n setValue(\"pincode\", address?.pincode);\n setValue(\"country\", address?.country);\n }\n }, [address]);\n\n return (\n QUANTITY
}\n \n \n -\n \n \n +\n \n
\n {quantity}
\n \n \n \n {btnLoader ? (\n <>\n
\n )\n}\n\nexport default AddAddressForm"
},
{
"path": "ecom-frontend/src/components/checkout/AddressInfo.jsx",
"content": "\nimport React, { useState } from 'react'\nimport Skeleton from '../shared/Skeleton';\nimport { FaAddressBook } from 'react-icons/fa';\nimport AddressInfoModal from './AddressInfoModal';\nimport AddAddressForm from './AddAddressForm';\nimport { useDispatch, useSelector } from 'react-redux';\nimport AddressList from './AddressList';\nimport { DeleteModal } from './DeleteModal';\nimport toast from 'react-hot-toast';\nimport { deleteUserAddress } from '../../store/actions';\n\nconst AddressInfo = ({ address }) => {\n const [openAddressModal, setOpenAddressModal] = useState(false);\n const [openDeleteModal, setOpenDeleteModal] = useState(false);\n const [selectedAddress, setSelectedAddress] = useState(\"\");\n const addNewAddressHandler = () => {\n setSelectedAddress(\"\");\n setOpenAddressModal(true);\n };\n\n const dispatch = useDispatch();\n\n const deleteAddressHandler = () => {\n dispatch(deleteUserAddress(\n toast,\n selectedAddress?.addressId,\n setOpenDeleteModal\n ))\n };\n\n const noAddressExist = !address || address.length === 0;\n const { isLoading, btnLoader } = useSelector((state) => state.errors);\n return (\n \n
\n \n
\n\n \n {noAddressExist ? (\n \n \n \n\n
\n )\n}\n\nexport default AddressInfo"
},
{
"path": "ecom-frontend/src/components/checkout/AddressInfoModal.jsx",
"content": "import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react';\nimport React from 'react'\nimport { FaTimes } from 'react-icons/fa';\n\nconst AddressInfoModal = ({ open, setOpen, children }) => {\n return (\n \n );\n}\n\nexport default AddressInfoModal"
},
{
"path": "ecom-frontend/src/components/checkout/AddressList.jsx",
"content": "import React from 'react'\nimport { FaBuilding, FaCheckCircle, FaEdit, FaStreetView, FaTrash } from 'react-icons/fa';\nimport { MdLocationCity, MdPinDrop, MdPublic } from \"react-icons/md\";\nimport { useDispatch, useSelector } from 'react-redux'\nimport { selectUserCheckoutAddress } from '../../store/actions';\n\nconst AddressList = ({ addresses, setSelectedAddress, setOpenAddressModal, setOpenDeleteModal }) => {\n const dispatch = useDispatch();\n const { selectedUserCheckoutAddress } = useSelector((state) => state.auth);\n\n const onEditButtonHandler = (addresses) => {\n setSelectedAddress(addresses);\n setOpenAddressModal(true);\n };\n\n const onDeleteButtonHandler = (addresses) => {\n setSelectedAddress(addresses);\n setOpenDeleteModal(true);\n };\n\n const handleAddressSelection = (addresses) => {\n dispatch(selectUserCheckoutAddress(addresses));\n };\n\n return (\n \n \n Add Address\n \n
\n ) : (\n \n No Address Added Yet\n
\n\n Please add your address to complete purchase\n
\n\n\n
\n )}\n\n\n \n Select Address\n
\n \n {isLoading ? (\n\n
\n ) : (\n <>\n \n
\n\n {address.length > 0 && (\n \n \n
\n )}\n \n )}\n \n {addresses.map((address) => (\n handleAddressSelection(address)}\n className={`p-4 border rounded-md cursor-pointer relative ${\n selectedUserCheckoutAddress?.addressId === address.addressId\n ? \"bg-green-100\"\n : \"bg-white\"\n }`}>\n
\n ))}\n \n )\n}\n\nexport default AddressList"
},
{
"path": "ecom-frontend/src/components/checkout/Checkout.jsx",
"content": "import { Button, Step, StepLabel, Stepper } from '@mui/material';\nimport React, { useEffect, useState } from 'react'\nimport AddressInfo from './AddressInfo';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { getUserAddresses } from '../../store/actions';\nimport toast from 'react-hot-toast';\nimport Skeleton from '../shared/Skeleton';\nimport ErrorPage from '../shared/ErrorPage';\nimport PaymentMethod from './PaymentMethod';\nimport OrderSummary from './OrderSummary';\nimport StripePayment from './StripePayment';\nimport PaypalPayment from './PaypalPayment';\n\nconst Checkout = () => {\n const [activeStep, setActiveStep] = useState(0);\n const dispatch = useDispatch();\n const { isLoading, errorMessage } = useSelector((state) => state.errors);\n const { cart, totalPrice } = useSelector((state) => state.carts);\n const { address, selectedUserCheckoutAddress } = useSelector(\n (state) => state.auth\n )\n const { paymentMethod } = useSelector((state) => state.payment);\n\n const handleBack = () => {\n setActiveStep((prevStep) => prevStep - 1);\n };\n\n const handleNext = () => {\n if(activeStep === 0 && !selectedUserCheckoutAddress) {\n toast.error(\"Please select checkout address before proceeding.\");\n return;\n }\n\n if(activeStep === 1 && (!selectedUserCheckoutAddress || !paymentMethod)) {\n toast.error(\"Please select payment address before proceeding.\");\n return;\n }\n \n setActiveStep((prevStep) => prevStep + 1);\n };\n\n const steps = [\n \"Address\",\n \"Payment Method\",\n \"Order Summary\",\n \"Payment\",\n ];\n \n useEffect(() => {\n dispatch(getUserAddresses());\n }, [dispatch]);\n\n return (\n \n
\n\n\n \n
\n \n
\n\n {address.buildingName}
\n {selectedUserCheckoutAddress?.addressId === address.addressId && (\n\n
\n\n {address.street}
\n\n
\n\n {address.city}, {address.state}
\n\n
\n\n {address.pincode}
\n\n
\n {address.country}
\n\n \n \n
\n \n \n {steps.map((label, index) => (\n \n {label} \n \n ))}\n \n\n {isLoading ? (\n \n \n Back\n \n\n {activeStep !== steps.length - 1 && (\n \n Proceed\n \n )} \n
\n \n {errorMessage && \n
\n ) : (\n \n {activeStep === 0 && }\n {activeStep === 3 && \n <>\n {paymentMethod === \"Stripe\" ? (\n
\n )}\n \n\n \n
\n )\n}\n\nexport default OrderSummary"
},
{
"path": "ecom-frontend/src/components/checkout/PaymentConfirmation.jsx",
"content": "import React, { useEffect, useState } from 'react'\nimport { FaCheckCircle } from 'react-icons/fa';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useLocation } from 'react-router-dom'\nimport { stripePaymentConfirmation } from '../../store/actions';\nimport toast from 'react-hot-toast';\n\nconst PaymentConfirmation = () => {\n const location = useLocation();\n const searchParams = new URLSearchParams(location.search);\n const dispatch = useDispatch();\n const [errorMessage, setErrorMessage ] = useState(\"\");\n const { cart } = useSelector((state) => state.carts);\n const [ loading, setLoading] = useState(false);\n\n const paymentIntent = searchParams.get(\"payment_intent\");\n const clientSecret = searchParams.get(\"payment_intent_client_secret\");\n const redirectStatus = searchParams.get(\"redirect_status\");\n const selectedUserCheckoutAddress = localStorage.getItem(\"CHECKOUT_ADDRESS\")\n ? JSON.parse(localStorage.getItem(\"CHECKOUT_ADDRESS\"))\n : [];\n\n useEffect(() => {\n if (paymentIntent &&\n clientSecret &&\n redirectStatus &&\n cart &&\n cart?.length > 0\n ) { \n console.log(selectedUserCheckoutAddress);\n const sendData = {\n addressId: selectedUserCheckoutAddress.addressId,\n pgName: \"Stripe\",\n pgPaymentId: paymentIntent,\n pgStatus: \"succeeded\",\n pgResponseMessage: \"Payment successful\"\n };\n console.log(sendData);\n dispatch(stripePaymentConfirmation(sendData, setErrorMessage, setLoading, toast));\n }\n }, [paymentIntent, clientSecret, redirectStatus, cart]);\n\n return (\n \n
\n\n \n
\n\n\n \n
\n \n
\n Billing Address
\n\n Building Name: \n {address?.buildingName}\n
\n\n City: \n {address?.city}\n
\n\n Street: \n {address?.street}\n
\n\n State: \n {address?.state}\n
\n\n Pincode: \n {address?.pincode}\n
\n\n Country: \n {address?.country}\n
\n\n
\n\n \n Payment Method\n
\n\n Method: \n {paymentMethod}\n
\n\n
\n Order Items
\n\n {cart?.map((item) => (\n
\n \n 
\n
\n ))}\n \n \n
\n {item?.productName}
\n\n {item?.quantity} x ${item?.specialPrice} = ${\n formatPriceCalculation(item?.quantity, item?.specialPrice)\n }\n
\n\n
\n \n
\n Order Summary
\n\n\n
\n \n Products\n ${formatPriceCalculation(totalPrice, 1)}\n
\n \n Tax (0%)\n $0.00\n
\n \n SubTotal\n ${formatPriceCalculation(totalPrice, 1)}\n
\n \n {loading ? (\n
\n )\n}\n\nexport default PaymentConfirmation"
},
{
"path": "ecom-frontend/src/components/checkout/PaymentForm.jsx",
"content": "import { Skeleton } from '@mui/material';\nimport { PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js'\nimport React from 'react'\nimport { useState } from 'react';\n\nconst PaymentForm = ({ clientSecret, totalPrice }) => {\n const stripe = useStripe();\n const elements = useElements();\n const [errorMessage, setErrorMessage] = useState(\"\");\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!stripe || !elements) {\n return;\n }\n\n const { error: submitError } = await elements.submit();\n\n const { error } = await stripe.confirmPayment({\n elements,\n clientSecret,\n confirmParams: {\n return_url: `${import.meta.env.VITE_FRONTEND_URL}/order-confirm`,\n },\n });\n\n if (error) {\n setErrorMessage(error.message);\n return false;\n }\n };\n\n const paymentElementOptions = {\n layout: \"tabs\",\n }\n\n const isLoading = !clientSecret || !stripe || !elements;\n\n return (\n \n )\n}\n\nexport default PaymentForm"
},
{
"path": "ecom-frontend/src/components/checkout/PaymentMethod.jsx",
"content": "import { FormControl, FormControlLabel, Radio, RadioGroup } from '@mui/material'\nimport React, { useEffect } from 'react'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { addPaymentMethod, createUserCart } from '../../store/actions';\n\nconst PaymentMethod = () => {\n const dispatch = useDispatch();\n const { paymentMethod } = useSelector((state) => state.payment);\n const { cart, cartId } = useSelector((state) => state.carts);\n const { isLoading, errorMessage } = useSelector((state) => state.errors);\n\n useEffect(() => {\n if (cart.length > 0 && !cartId && !errorMessage) {\n const sendCartItems = cart.map((item) => {\n return {\n productId: item.productId,\n quantity: item.quantity,\n };\n });\n \n dispatch(createUserCart(sendCartItems));\n }\n }, [dispatch, cartId]);\n\n const paymentMethodHandler = (method) => {\n dispatch(addPaymentMethod(method));\n }\n return (\n \n
\n ) : (\n \n
\n )}\n \n
\n Payment Successful!
\n\n Thank you for your purchase! Your payment was successful, and weβre\n processing your order.\n
\n\n \n paymentMethodHandler(e.target.value)}\n >\n \n
\n )\n}\n\nexport default PaymentMethod"
},
{
"path": "ecom-frontend/src/components/checkout/PaypalPayment.jsx",
"content": "import { Alert, AlertTitle } from '@mui/material'\nimport React from 'react'\n\nconst PaypalPayment = () => {\n return (\n Select Payment Method
\n\n \n Paypal Unavailable \n Paypal payment is unavailable. Please use another payment method.\n \n
\n )\n}\n\nexport default PaypalPayment"
},
{
"path": "ecom-frontend/src/components/checkout/StripePayment.jsx",
"content": "import { Alert, AlertTitle, Skeleton } from '@mui/material'\nimport { Elements } from '@stripe/react-stripe-js';\nimport { loadStripe } from '@stripe/stripe-js';\nimport React, { useEffect } from 'react'\nimport { useDispatch, useSelector } from 'react-redux'\nimport PaymentForm from './PaymentForm';\nimport { createStripePaymentSecret } from '../../store/actions';\n\nconst stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY);\n\nconst StripePayment = () => {\n const dispatch = useDispatch();\n const { clientSecret } = useSelector((state) => state.auth);\n const { totalPrice } = useSelector((state) => state.carts);\n const { isLoading, errorMessage } = useSelector((state) => state.errors);\n const { user, selectedUserCheckoutAddress } = useSelector((state) => state.auth);\n\n useEffect(() => {\n if (!clientSecret) {\n const sendData = {\n amount: Number(totalPrice) * 100,\n currency: \"usd\",\n email: user.email,\n name: `${user.username}`,\n address: selectedUserCheckoutAddress,\n description: `Order for ${user.email}`,\n metadata: {\n test: \"1\"\n }\n };\n dispatch(createStripePaymentSecret(sendData));\n }\n }, [clientSecret]);\n\n if (isLoading) {\n return (\n \n
\n )\n }\n\n\n return (\n <>\n {clientSecret && (\n \n handleImageUpload(params.row)}\n className=\"flex items-center bg-green-500 hover:bg-green-600 text-white px-4 h-9 rounded-md\"\n >\n handleEdit(params.row)}\n className=\"flex items-center bg-blue-500 text-white px-4 h-9 rounded-md \"\n >\n handleDelete(params.row)}\n className=\"flex items-center bg-red-500 text-white px-4 h-9 rounded-md\"\n >\n handleProductView(params.row)}\n className=\"flex items-center bg-slate-800 text-white px-4 h-9 rounded-md\"\n >\n
\n );\n },\n },\n];\n\n\nexport const adminOrderTableColumn = (handleEdit) => [\n { \n sortable: false,\n disableColumnMenu: true,\n field: \"id\",\n headerName: \"orderId\",\n minWidth: 180,\n headerAlign: \"center\",\n editable: false,\n headerClassName: \"text-black font-semibold border\",\n cellClassName: \"text-slate-700 font-normal border\",\n renderHeader: (params) => Order ID\n },\n {\n // Column for customer email.\n disableColumnMenu: true,\n field: \"email\",\n headerName: \"Email\",\n align: \"center\",\n width: 250,\n editable: false,\n sortable: false,\n headerAlign: \"center\",\n headerClassName: \"text-black font-semibold text-center border \",\n cellClassName: \"text-slate-700 font-normal border text-center\",\n renderHeader: (params) => Email,\n },\n {\n // Column for showing total amount of the order.\n disableColumnMenu: true,\n field: \"totalAmount\",\n headerName: \"Total Amount\",\n align: \"center\",\n width: 200,\n editable: false,\n sortable: true,\n headerAlign: \"center\",\n headerClassName: \"text-black font-semibold text-center border \",\n cellClassName: \"text-slate-700 font-normal border text-center\",\n renderHeader: (params) => Total Amount,\n },\n {\n // Column to display order status (e.g., Pending, Shipped).\n disableColumnMenu: true,\n field: \"status\",\n headerName: \"Status\",\n align: \"center\",\n width: 200,\n editable: false,\n sortable: false,\n headerAlign: \"center\",\n headerClassName: \"text-black font-semibold text-center border \",\n cellClassName: \"text-slate-700 font-normal border text-center\",\n renderHeader: (params) => Status,\n },\n {\n // Column for order creation date.\n disableColumnMenu: true,\n field: \"date\",\n headerName: \"Order Date\",\n align: \"center\",\n width: 200,\n editable: false,\n sortable: false,\n headerAlign: \"center\",\n headerClassName: \"text-black font-semibold text-center border \",\n cellClassName: \"text-slate-700 font-normal border text-center\",\n renderHeader: (params) => Order Date,\n },\n {\n // Custom action column with an \"Edit\" button.\n field: \"action\",\n headerName: \"Action\",\n headerAlign: \"center\",\n editable: false,\n headerClassName: \"text-black font-semibold text-center\",\n cellClassName: \"text-slate-700 font-normal\",\n sortable: false,\n width: 250,\n renderHeader: (params) => Action,\n renderCell: (params) => {\n return (\n \n handleEdit(params.row)}\n className='flex items-center bg-blue-500 text-white px-4 h-9 rounded-md'>\n
\n );\n },\n },\n];\n\n\n//table column for categories in admin panel\nexport const categoryTableColumns = (handleEdit, handleDelete) => [\n {\n sortable: false,\n disableColumnMenu: true,\n field: \"id\",\n headerName: \"CategoryId\",\n minWidth: 300,\n headerAlign: \"center\",\n align: \"center\",\n editable: false,\n headerClassName: \"text-black font-semibold border\",\n cellClassName: \"text-slate-700 font-normal border\",\n renderHeader: (params) => CategoryId,\n },\n {\n disableColumnMenu: true,\n field: \"categoryName\",\n headerName: \"Category Name\",\n align: \"center\",\n width: 400,\n editable: false,\n sortable: false,\n headerAlign: \"center\",\n headerClassName: \"text-black font-semibold text-center border \",\n cellClassName: \"text-slate-700 font-normal border text-center\",\n renderHeader: (params) => Category Name,\n },\n\n {\n field: \"action\",\n headerName: \"Action\",\n headerAlign: \"center\",\n editable: false,\n headerClassName: \"text-black font-semibold text-center\",\n cellClassName: \"text-slate-700 font-normal\",\n sortable: false,\n width: 400,\n renderHeader: (params) => Action,\n renderCell: (params) => {\n return (\n \n handleEdit(params.row)}\n className=\"flex items-center bg-blue-500 text-white px-4 h-9 rounded-md \"\n >\n handleDelete(params.row)}\n className=\"flex items-center bg-red-500 text-white px-4 h-9 rounded-md\"\n >\n
\n );\n },\n },\n];\n\n\n//table column for seller in admin panel\nexport const sellerTableColumns = [\n {\n disableColumnMenu: true,\n field: \"id\",\n headerName: \"ID\",\n minWidth: 400,\n headerAlign: \"center\",\n align: \"center\",\n editable: false,\n\n headerClassName: \"text-black font-semibold border\",\n cellClassName: \"text-slate-700 font-normal border\",\n renderHeader: (params) => SellerID,\n },\n {\n disableColumnMenu: true,\n field: \"username\",\n headerName: \"UserName\",\n minWidth: 400,\n headerAlign: \"center\",\n align: \"center\",\n editable: false,\n sortable: false,\n headerClassName: \"text-black font-semibold border\",\n cellClassName: \"text-slate-700 font-normal border\",\n renderHeader: (params) => UserName,\n },\n {\n disableColumnMenu: true,\n field: \"email\",\n headerName: \"Email\",\n align: \"center\",\n width: 400,\n editable: false,\n sortable: false,\n headerAlign: \"center\",\n headerClassName: \"text-black font-semibold text-center border \",\n cellClassName: \"text-slate-700 font-normal border text-center\",\n renderHeader: (params) => Email,\n renderCell: (params) => {\n return (\n \n \n
\n );\n },\n },\n];"
},
{
"path": "ecom-frontend/src/components/home/HeroBanner.jsx",
"content": "// Import Swiper React components\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport 'swiper/css/navigation';\nimport 'swiper/css/pagination';\nimport 'swiper/css/scrollbar';\nimport 'swiper/css/effect-fade';\nimport 'swiper/css/autoplay';\n\n// Import Swiper styles\nimport 'swiper/css';\nimport { Autoplay, Pagination, EffectFade, Navigation } from 'swiper/modules';\n\nimport { bannerLists } from '../../utils';\nimport { Link } from 'react-router-dom';\n\nconst colors = [\"bg-banner-color1\", \"bg-banner-color2\", \"bg-banner-color3\"];\n\nconst HeroBanner = () => {\n return (\n \n \n\n {bannerLists.map((item, i) => (\n \n \n ))}\n \n
\n );\n}\n\n\nexport default HeroBanner;"
},
{
"path": "ecom-frontend/src/components/home/Home.jsx",
"content": "import { useDispatch, useSelector } from \"react-redux\";\nimport HeroBanner from \"./HeroBanner\";\nimport { useEffect } from \"react\";\nimport { fetchProducts } from \"../../store/actions\";\nimport ProductCard from \"../shared/ProductCard\";\nimport Loader from \"../shared/Loader\";\nimport { FaExclamationTriangle } from \"react-icons/fa\";\n\nconst Home = () => {\n const dispatch = useDispatch();\n const {products} = useSelector((state) => state.products);\n const { isLoading, errorMessage } = useSelector(\n (state) => state.errors\n );\n useEffect(() => {\n dispatch(fetchProducts());\n }, [dispatch]);\n return (\n \n
\n \n
\n \n
\n \n
\n \n {item.title}\n
\n\n {item.subtitle}\n
\n\n {item.description}\n
\n \n Shop\n \n\n 
\n
\n \n
\n )\n}\n\nexport default Home;"
},
{
"path": "ecom-frontend/src/components/products/Filter.jsx",
"content": "import { Button, FormControl, InputLabel, MenuItem, Select, Tooltip } from \"@mui/material\";\nimport { useEffect, useState } from \"react\";\nimport { FiArrowDown, FiArrowUp, FiRefreshCw, FiSearch } from \"react-icons/fi\";\nimport { useLocation, useNavigate, useSearchParams } from \"react-router-dom\";\n\nconst Filter = ({ categories }) => {\n const [searchParams] = useSearchParams();\n const params = new URLSearchParams(searchParams);\n const pathname = useLocation().pathname;\n const navigate = useNavigate();\n \n const [category, setCategory] = useState(\"all\");\n const [sortOrder, setSortOrder] = useState(\"asc\");\n const [searchTerm, setSearchTerm] = useState(\"\");\n\n useEffect(() => {\n const currentCategory = searchParams.get(\"category\") || \"all\";\n const currentSortOrder = searchParams.get(\"sortby\") || \"asc\";\n const currentSearchTerm = searchParams.get(\"keyword\") || \"\";\n\n setCategory(currentCategory);\n setSortOrder(currentSortOrder);\n setSearchTerm(currentSearchTerm);\n }, [searchParams]);\n\n useEffect(() => { \n const handler = setTimeout(() => {\n if (searchTerm) {\n searchParams.set(\"keyword\", searchTerm);\n } else {\n searchParams.delete(\"keyword\");\n }\n navigate(`${pathname}?${searchParams.toString()}`);\n }, 700);\n\n return () => {\n clearTimeout(handler);\n };\n }, [searchParams, searchTerm, navigate, pathname]);\n\n const handleCategoryChange = (event) => {\n const selectedCategory = event.target.value;\n\n if (selectedCategory === \"all\") {\n params.delete(\"category\");\n } else {\n params.set(\"category\", selectedCategory);\n }\n navigate(`${pathname}?${params}`);\n setCategory(event.target.value);\n };\n\n const toggleSortOrder = () => {\n setSortOrder((prevOrder) => {\n const newOrder = (prevOrder === \"asc\") ? \"desc\" : \"asc\";\n params.set(\"sortby\", newOrder);\n navigate(`${pathname}?${params}`);\n return newOrder;\n })\n };\n\n const handleClearFilters = () => {\n navigate({ pathname : window.location.pathname });\n };\n\n return (\n \n
\n \n \n
\n \n
\n\n {isLoading ? (\n Products
\n \n Discover our handpicked selection of top-rated items just for you!\n \n \n\n
\n ) : (\n \n {products && \n products?.slice(0,4)\n .map((item, i) =>
\n )}\n \n {/* SEARCH BAR */}\n
\n );\n}\n\nexport default Filter;"
},
{
"path": "ecom-frontend/src/components/products/Products.jsx",
"content": "import { FaExclamationTriangle } from \"react-icons/fa\";\nimport ProductCard from \"../shared/ProductCard\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { useEffect } from \"react\";\nimport { fetchCategories } from \"../../store/actions\";\nimport Filter from \"./Filter\";\nimport useProductFilter from \"../../hooks/useProductFilter\";\nimport Loader from \"../shared/Loader\";\nimport Paginations from \"../shared/Paginations\";\n\nconst Products = () => {\n const { isLoading, errorMessage } = useSelector(\n (state) => state.errors\n );\n const {products, categories, pagination} = useSelector(\n (state) => state.products\n )\n const dispatch = useDispatch();\n useProductFilter();\n\n useEffect(() => {\n dispatch(fetchCategories());\n }, [dispatch]);\n\n return (\n \n setSearchTerm(e.target.value)}\n className=\"border border-gray-400 text-slate-800 rounded-md py-2 pl-10 pr-4 w-full focus:outline-hidden focus:ring-2 focus:ring-[#1976d2]\"/>\n \n
\n\n {/* CATEGORY SELECTION */}\n \n \n Category \n \n \n {categories.map((item) => (\n \n ))}\n \n \n\n {/* SORT BUTTON & CLEAR FILTER */}\n \n \n \n \n
\n \n
\n )\n}\n\nexport default Products;"
},
{
"path": "ecom-frontend/src/components/shared/DeleteModal.jsx",
"content": "import React from \"react\";\nimport { FaExclamationTriangle } from \"react-icons/fa\";\nimport { FaTimes } from \"react-icons/fa\";\nimport {\n Dialog,\n DialogBackdrop,\n DialogPanel,\n DialogTitle,\n} from \"@headlessui/react\";\n\nexport const DeleteModal = ({\n open,\n setOpen,\n title,\n onDeleteHandler,\n loader,\n}) => {\n return (\n \n );\n};\n\nexport default DeleteModal;"
},
{
"path": "ecom-frontend/src/components/shared/ErrorPage.jsx",
"content": "import React from 'react'\nimport { FaExclamationTriangle } from 'react-icons/fa'\n\nconst ErrorPage = ({ message}) => {\n return (\n \n
\n ) : (\n \n
\n )}\n \n {products && \n products.map((item, i) =>
\n \n \n
\n \n
\n \n )\n}\n\nexport default ErrorPage"
},
{
"path": "ecom-frontend/src/components/shared/InputField.jsx",
"content": "const InputField = ({\n label,\n id,\n type,\n errors,\n register,\n required,\n message,\n className,\n min,\n value,\n placeholder,\n}) => {\n return (\n \n {message ? message : \"An unexpected error has occured\"}\n
\n\n \n {label}\n \n
\n );\n};\n\nexport default InputField;"
},
{
"path": "ecom-frontend/src/components/shared/Loader.jsx",
"content": "import { RotatingLines } from \"react-loader-spinner\";\n\nconst Loader = ({ text }) => {\n return (\n \n {errors[id]?.message}\n
\n )}\n\n
\n );\n}\n\nexport default Loader;"
},
{
"path": "ecom-frontend/src/components/shared/Modal.jsx",
"content": "import { Description, Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react'\nimport { RxCross1 } from 'react-icons/rx';\n\nfunction Modal({ open, setOpen, children, title = \"\"}) {\n return (\n <>\n \n \n )\n}\n\n\nexport default Modal;"
},
{
"path": "ecom-frontend/src/components/shared/Navbar.jsx",
"content": "import { Badge } from \"@mui/material\";\nimport { useState } from \"react\";\nimport { FaShoppingCart, FaSignInAlt, FaStore } from \"react-icons/fa\";\nimport { IoIosMenu } from \"react-icons/io\";\nimport { RxCross2 } from \"react-icons/rx\";\nimport { useSelector } from \"react-redux\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport UserMenu from \"../UserMenu\";\n\nconst Navbar = () => {\n const path = useLocation().pathname;\n const [navbarOpen, setNavbarOpen] = useState(false);\n const { cart } = useSelector((state) => state.carts);\n const { user } = useSelector((state) => state.auth);\n \n return (\n \n
\n \n {text ? text : \"Please wait....\" }\n
\n\n
\n )\n}\n\nexport default Navbar;"
},
{
"path": "ecom-frontend/src/components/shared/Paginations.jsx",
"content": "import { Pagination } from \"@mui/material\";\nimport { useLocation, useNavigate, useSearchParams } from \"react-router-dom\";\n\nconst Paginations = ({ numberOfPage, totalProducts }) => {\n const [searchParams] = useSearchParams();\n const pathname = useLocation().pathname;\n const params = new URLSearchParams(searchParams);\n const navigate = useNavigate();\n const paramValue = searchParams.get(\"page\")\n ? Number(searchParams.get(\"page\"))\n : 1;\n\n const onChangeHandler = (event, value) => {\n params.set(\"page\", value.toString());\n navigate(`${pathname}?${params}`);\n };\n\n return(\n \n \n setNavbarOpen(!navbarOpen)}\n className=\"sm:hidden flex items-center sm:mt-0 mt-2\">\n {navbarOpen ? (\n
\n - \n
- \n \n Home\n \n \n\n
- \n \n Products\n \n \n\n\n
- \n \n About\n \n \n\n
- \n \n Contact\n \n \n\n
- \n \n
\n \n \n \n\n {(user && user.id) ? (\n - \n
\n \n ) : (\n - \n \n
\n Login\n \n \n )}\n
\n
\n )\n}\n\nexport default ProductCard;"
},
{
"path": "ecom-frontend/src/components/shared/ProductViewModal.jsx",
"content": "import { Button, Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react'\nimport { Divider } from '@mui/material';\nimport { useState } from 'react'\nimport Status from './Status';\nimport { MdClose, MdDone } from 'react-icons/md';\n\nfunction ProductViewModal({open, setOpen, product, isAvailable}) {\n \n const {id, productName, image, description, quantity, price, discount, specialPrice} = product;\n const handleClickOpen = () => {\n setOpen(true);\n }\n\n return (\n <>\n \n \n )\n}\n\nexport default ProductViewModal;"
},
{
"path": "ecom-frontend/src/components/shared/SelectTextField.jsx",
"content": "import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from \"@headlessui/react\";\nimport { FaCheck } from \"react-icons/fa\";\n\nconst SelectTextField = ({\n label,\n select,\n setSelect,\n lists\n}) => {\n return (\n {\n handleProductView({\n id: productId,\n productName,\n image,\n description,\n quantity,\n price,\n discount,\n specialPrice,\n })\n }} \n className=\"w-full overflow-hidden aspect-3/2\">\n 
\n \n
\n \n
\n {\n handleProductView({\n id: productId,\n productName,\n image,\n description,\n quantity,\n price,\n discount,\n specialPrice,\n })\n }}\n className=\"text-lg font-semibold mb-2 cursor-pointer\">\n {truncateText(productName, 50)}\n
\n \n\n
\n\n { !about && (\n \n {truncateText(description, 80)}\n
\n\n {specialPrice ? (\n addToCartHandler({\n image,\n productName,\n description,\n specialPrice,\n price,\n productId,\n quantity,\n })}\n className={`bg-blue-500 ${isAvailable ? \"opacity-100 hover:bg-blue-600\" : \"opacity-70\"}\n text-white py-2 px-3 rounded-lg items-center transition-colors duration-300 w-36 flex justify-center`}>\n \n {isAvailable ? \"Add to Cart\" : \"Stock Out\"}\n \n
\n )}\n \n \n \n ${Number(price).toFixed(2)}\n \n \n ${Number(specialPrice).toFixed(2)}\n \n
\n ) : (\n \n {\" \"}\n ${Number(price).toFixed(2)}\n \n )}\n\n \n \n {label}\n \n \n
\n \n \n {select?.categoryName}\n \n \n {lists?.map((category) => (\n \n \n {category.categoryName}\n \n\n \n \n \n \n \n ))}\n \n
\n \n
\n )\n}\n\nexport default Sidebar"
},
{
"path": "ecom-frontend/src/components/shared/Skeleton.jsx",
"content": "import React from \"react\";\n\nconst Skeleton = () => {\n return (\n \n
\n \n \n {isAdmin ? \"Admin Panel\" : \"Seller Panel\"}\n
\n\n
\n );\n};\n\nexport default Skeleton;"
},
{
"path": "ecom-frontend/src/components/shared/Spinners.jsx",
"content": "import React from 'react'\n\nconst Spinners = () => {\n return (\n\n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n \n
\n\n )\n}\n\nexport default Spinners;"
},
{
"path": "ecom-frontend/src/components/shared/Status.jsx",
"content": "const Status = ({text, icon:Icon, bg, color}) => {\n return (\n