diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index e37106b..c1a1c4e 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -1,166 +1,57 @@
-
-import React, { useEffect, useState } from 'react';
-import type { ReactElement } from 'react';
-import Head from 'next/head';
-import Link from 'next/link';
-import BaseButton from '../components/BaseButton';
-import CardBox from '../components/CardBox';
-import SectionFullScreen from '../components/SectionFullScreen';
+import React, { useEffect } from 'react';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import { fetch as fetchProducts } from '../stores/products/productsSlice';
import LayoutGuest from '../layouts/Guest';
-import BaseDivider from '../components/BaseDivider';
-import BaseButtons from '../components/BaseButtons';
+import CardBox from '../components/CardBox';
import { getPageTitle } from '../config';
-import { useAppSelector } from '../stores/hooks';
-import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
+import Head from 'next/head';
+import SectionMain from '../components/SectionMain';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import { mdiStorefrontOutline } from '@mdi/js';
+
+const IndexPage = () => {
+ const dispatch = useAppDispatch();
+ const { products, loading } = useAppSelector((state) => state.products);
+
+ useEffect(() => {
+ dispatch(fetchProducts({}));
+ }, [dispatch]);
-export default function Starter() {
- const [illustrationImage, setIllustrationImage] = useState({
- src: undefined,
- photographer: undefined,
- photographer_url: undefined,
- })
- const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
- const [contentType, setContentType] = useState('image');
- const [contentPosition, setContentPosition] = useState('left');
- const textColor = useAppSelector((state) => state.style.linkColor);
-
- const title = 'Store Operations Dashboard'
-
- // Fetch Pexels image/video
- useEffect(() => {
- async function fetchData() {
- const image = await getPexelsImage();
- const video = await getPexelsVideo();
- setIllustrationImage(image);
- setIllustrationVideo(video);
- }
- fetchData();
- }, []);
-
- const imageBlock = (image) => (
-
- );
-
- const videoBlock = (video) => {
- if (video?.video_files?.length > 0) {
- return (
-
-
-
-
)
- }
- };
return (
-
+
- {getPageTitle('Starter Page')}
+ {getPageTitle('Shop')}
+
+
+
-
-
- {contentType === 'image' && contentPosition !== 'background'
- ? imageBlock(illustrationImage)
- : null}
- {contentType === 'video' && contentPosition !== 'background'
- ? videoBlock(illustrationVideo)
- : null}
-
-
-
-
-
-
-
-
+ {loading && Loading...
}
-
-
-
-
-
© 2026 {title}. All rights reserved
-
- Privacy Policy
-
-
+ {!loading && products && (
+
+ {products.map((product) => (
+
+
+ {product.images && product.images.length > 0 ? (
+
+ ) : (
+
No Image
+ )}
+
+
{product.name}
+
${product.price}
+
+ ))}
+
+ )}
+
+
);
-}
-
-Starter.getLayout = function getLayout(page: ReactElement) {
- return
{page};
};
+export default IndexPage;
\ No newline at end of file
diff --git a/frontend/src/pages/products/products-list.tsx b/frontend/src/pages/products/products-list.tsx
index fcb456b..216c7b9 100644
--- a/frontend/src/pages/products/products-list.tsx
+++ b/frontend/src/pages/products/products-list.tsx
@@ -1,166 +1,18 @@
-import { mdiChartTimelineVariant } from '@mdi/js'
-import Head from 'next/head'
-import { uniqueId } from 'lodash';
-import React, { ReactElement, useState } from 'react'
-import CardBox from '../../components/CardBox'
-import LayoutAuthenticated from '../../layouts/Authenticated'
-import SectionMain from '../../components/SectionMain'
-import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
-import { getPageTitle } from '../../config'
-import TableProducts from '../../components/Products/TableProducts'
-import BaseButton from '../../components/BaseButton'
-import axios from "axios";
-import Link from "next/link";
-import {useAppDispatch, useAppSelector} from "../../stores/hooks";
-import CardBoxModal from "../../components/CardBoxModal";
-import DragDropFilePicker from "../../components/DragDropFilePicker";
-import {setRefetch, uploadCsv} from '../../stores/products/productsSlice';
+import { useSampleClients } from '../../hooks/sampleData';
+import { getPageTitle } from '../../config';
+import ProductsTable from '../../components/Products/TableProducts';
+import LayoutAuthenticated from '../../layouts/Authenticated';
-import {hasPermission} from "../../helpers/userPermissions";
-
-
-
-const ProductsTablesPage = () => {
- const [filterItems, setFilterItems] = useState([]);
- const [csvFile, setCsvFile] = useState
(null);
- const [isModalActive, setIsModalActive] = useState(false);
- const [showTableView, setShowTableView] = useState(false);
-
-
- const { currentUser } = useAppSelector((state) => state.auth);
-
-
- const dispatch = useAppDispatch();
-
-
- const [filters] = useState([{label: 'Name', title: 'name'},{label: 'SKU', title: 'sku'},{label: 'Description', title: 'description'},
- {label: 'Stock', title: 'stock', number: 'true'},
- {label: 'Price', title: 'price', number: 'true'},
-
-
-
- {label: 'Category', title: 'category'},
-
-
-
-
- ]);
-
- const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PRODUCTS');
-
-
- const addFilter = () => {
- const newItem = {
- id: uniqueId(),
- fields: {
- filterValue: '',
- filterValueFrom: '',
- filterValueTo: '',
- selectedField: '',
- },
- };
- newItem.fields.selectedField = filters[0].title;
- setFilterItems([...filterItems, newItem]);
- };
-
- const getProductsCSV = async () => {
- const response = await axios({url: '/products?filetype=csv', method: 'GET',responseType: 'blob'});
- const type = response.headers['content-type']
- const blob = new Blob([response.data], { type: type })
- const link = document.createElement('a')
- link.href = window.URL.createObjectURL(blob)
- link.download = 'productsCSV.csv'
- link.click()
- };
-
- const onModalConfirm = async () => {
- if (!csvFile) return;
- await dispatch(uploadCsv(csvFile));
- dispatch(setRefetch(true));
- setCsvFile(null);
- setIsModalActive(false);
- };
-
- const onModalCancel = () => {
- setCsvFile(null);
- setIsModalActive(false);
- };
+const ProductsPage = () => {
+ const { clients } = useSampleClients();
return (
- <>
-
- {getPageTitle('Products')}
-
-
-
- {''}
-
-
-
- {hasCreatePermission && }
-
-
-
-
- {hasCreatePermission && (
- setIsModalActive(true)}
- />
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
+
+ {getPageTitle('Products')}
+
+
+ );
+};
-ProductsTablesPage.getLayout = function getLayout(page: ReactElement) {
- return (
-
- {page}
-
- )
-}
-
-export default ProductsTablesPage
+export default ProductsPage;