product View

src/RouteLinks.js

@@ -11,6 +11,7 @@ const RouteLinks = {
     transactionsPage: '/transactions',
     countrySettings: '/country',
     products: '/products',
+    productView: '/product-view/*',
     usersAdmin: '/users-admin',
     productTemplates: '/products-template',
     customTemplates: '/custom-template',

src/SiteRoutes.jsx

@@ -21,7 +21,8 @@ import AccountDetailsPage from "./pages/AccountDetailsPage";
 import ProductTemplatePage from "./pages/ProductTemplatePage";
 import CustomTemplatePage from "./pages/CustomTemplatePage";
 import SubscriptionDetailsPage from "./pages/SubscriptionDetailsPage";
-import CountrySettingsPage from "./pages/CountrySettingsPage"; // TRANSACTION DETAILS PAGE
+import CountrySettingsPage from "./pages/CountrySettingsPage";
+import ProductViewPage from "./pages/ProductViewPage"; // TRANSACTION DETAILS PAGE
 
 
 // const Home = lazy(() => import('./pages/Home'));
@@ -39,6 +40,7 @@ export default function SiteRoutes() {
                 <Route path={RouteLinks.accountDetails} element={<AccountDetailsPage/>}/> {`*/CUSTOMER PAGE*/`}
                 <Route path={RouteLinks.billings} element={<BillingsPage/>}/> {`*/BILLINGS PAGE*/`}
                 <Route path={RouteLinks.products} element={<ProductsPage/>}/> {`*/PRODUCTS PAGE*/`}
+                <Route path={RouteLinks.productView} element={<ProductViewPage/>}/> {`*/PRODUCTS VIEW PAGE*/`}
                 <Route path={RouteLinks.usersAdmin} element={<UsersAdminPage/>}/> {`*/ADMIN USERS PAGE*/`}
 
                 <Route path={RouteLinks.countrySettings} element={<CountrySettingsPage/>}/> {`*/PRODUCTS TEMPLATE PAGE*/`}

src/components/products/ProductView.jsx

@@ -0,0 +1,69 @@
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
+export default function ProductView() {
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Product View [ProductID]' paths={['Dashboard', 'Product View']}/>
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+
+                <table className="py-2 w-full text-sm">
+                    <thead className="py-2 text-sm text-slate-500 text-left">
+                    <tr>
+                        <th scope="col" className="px-2 py-2">
+                            Added
+                        </th>
+                        <th scope="col" className="px-2">
+                            Name
+                        </th>
+                        <th scope="col" className="px-2">
+                            Product ID
+                        </th>
+                        <th scope="col" className="px-2 text-right">
+                            Status
+                        </th>
+                        <th scope="col" className="px-2 text-right">
+                            Action
+                        </th>
+                    </tr>
+                    </thead>
+                    <tbody>
+
+                    <tr className="py-2 border-t border-dashed border-slate-300">
+                        <td className="px-2 py-2">
+                            <div
+                                className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                <div className="text-left">
+
+                                </div>
+                            </div>
+                        </td>
+                        <td className="px-2">
+                            <div className="text-left">
+
+                            </div>
+                        </td>
+                        <td className="px-2">
+                            <div className="text-left">
+
+                            </div>
+                        </td>
+                        <td className="px-2">
+                            <div className="text-right">
+
+                            </div>
+                        </td>
+                        <td className="px-2">
+
+
+                        </td>
+                    </tr>
+
+                    </tbody>
+                </table>
+
+            </div>
+        </div>
+    )
+}

src/components/products/ProductsCom.jsx

@@ -1,7 +1,7 @@
 import {useState} from 'react'
 import {useQuery} from '@tanstack/react-query'
 import queryKeys from '../../services/queryKeys'
-
+import {Link} from 'react-router-dom'
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
@@ -135,9 +135,17 @@ export default function ProductsCom() {
                                                         </div>
                                                     </td>
                                                     <td className="px-2">
-                                                        <div className="text-right">
-                                                            <div className="text-base font-semibold">[---]</div>
+
+                                                        <div
+                                                            className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                            <Link to={`/product-view/${item?.product_id}`}>
+                                                                <Icons name='eye'/>
+                                                            </Link>
                                                         </div>
+
+                                                        {/*<div className="text-right">*/}
+                                                        {/*    <div className="text-base font-semibold">[---]</div>*/}
+                                                        {/*</div>*/}
                                                     </td>
                                                 </tr>
                                             ))

src/pages/ProductViewPage.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import ProductView from "../components/products/ProductView";
+
+export default function ProductViewPage() {
+    return (
+        <ProductView />
+    )
+}