lionsdev/btpxpress-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dahoud
2025-10-01 01:39:07 +00:00
commit b430bf3b96
826 changed files with 255287 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
app/(main)/pages/aboutus/page.tsx Normal file
View File

@@ -0,0 +1,140 @@
'use client';
import React, { useState } from 'react';
function AboutUs() {
const [visibleMember, setVisibleMember] = useState(null);
return (
<>
<div className="card px-4 py-8 md:px-6 lg:px-8">
<div className="flex flex-wrap mb-4">
<div className="w-full lg:w-6 pl-0 lg:pr-4">
<img src={`/demo/images/blocks/about/about-1.png`} alt="Image" className="w-full border-round" />
</div>
<div className="w-full lg:w-6 pr-0 lg:pl-4 mt-3 lg:mt-0">
<div className="font-bold text-4xl mb-4 text-900">About us</div>
<p className="line-height-3 mt-0 mb-3 p-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
<p className="line-height-3 mt-0 mb-3 p-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
<p className="line-height-3 my-0 p-0">
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
</div>
</div>
<div className="mt-3 md:mt-8">
<span className="block text-900 font-bold text-3xl mb-3 text-center">Our Team</span>
<div className="text-center text-lg line-height-3 mb-6">Faucibus ornare suspendisse sed nisi. Nisl rhoncus mattis rhoncus urna neque viverra justo nec.</div>
<div className="grid">
<div className="col-12 md:col-6 lg:col-3 p-3">
<div className="relative overflow-hidden" onMouseEnter={() => setVisibleMember(0)} onMouseLeave={() => setVisibleMember(-1)}>
<img src={`/demo/images/blocks/team/team-1.png`} className="w-full block" alt="Team 1" />
{visibleMember === 0 && (
<div className="absolute top-0 left-0 h-full w-full border-round fadein animation-duration-300 select-none" style={{ backgroundColor: 'rgba(0,0,0,0.7)' }}>
<div className="flex flex-column p-5 h-full">
<span className="block font-medium text-white text-xl mb-3">Jeff Davies</span>
<span className="font-medium text-400">Software Developer</span>
<div className="mt-auto">
<a tabIndex={0} className="cursor-pointer text-white">
<i className="pi pi-twitter text-600 text-xl mr-3"></i>
</a>
<a tabIndex={0} className="cursor-pointer text-white">
<i className="pi pi-github text-600 text-xl mr-3"></i>
</a>
<a tabIndex={0} className="cursor-pointer text-white">
<i className="pi pi-facebook text-600 text-xl"></i>
</a>
</div>
</div>
</div>
)}
</div>
</div>
<div className="col-12 md:col-6 lg:col-3 p-3">
<div className="relative overflow-hidden" onMouseEnter={() => setVisibleMember(1)} onMouseLeave={() => setVisibleMember(-1)}>
<img src={`/demo/images/blocks/team/team-2.png`} className="w-full block" alt="Team 2" />
{visibleMember === 1 && (
<div className="absolute top-0 left-0 h-full w-full border-round fadein animation-duration-300 select-none" style={{ backgroundColor: 'rgba(0,0,0,0.7)' }}>
<div className="flex flex-column p-5 h-full">
<span className="block font-medium text-white text-xl mb-3">Kristin Watson</span>
<span className="font-medium text-400">UI/UX Designer</span>
<div className="mt-auto">
<a tabIndex={0} className="cursor-pointer text-white">
<i className="pi pi-twitter text-600 text-xl mr-3"></i>
</a>
<a tabIndex={0} className="cursor-pointer text-white">
<i className="pi pi-github text-600 text-xl mr-3"></i>
</a>
<a tabIndex={0} className="cursor-pointer text-white">
<i className="pi pi-facebook text-600 text-xl"></i>
</a>
</div>
</div>
</div>
)}
</div>
</div>
<div className="col-12 md:col-6 lg:col-3 p-3">
<div className="relative overflow-hidden" onMouseEnter={() => setVisibleMember(2)} onMouseLeave={() => setVisibleMember(-1)}>
<img src={`/demo/images/blocks/team/team-3.png`} className="w-full block" alt="Team 3" />
{visibleMember === 2 && (
<div className="absolute top-0 left-0 h-full w-full border-round fadein animation-duration-300 select-none" style={{ backgroundColor: 'rgba(0,0,0,0.7)' }}>
<div className="flex flex-column p-5 h-full">
<span className="block font-medium text-white text-xl mb-3">Jenna Williams</span>
<span className="font-medium text-400">Marketing Specialist</span>
<div className="mt-auto">
<a tabIndex={0} className="cursor-pointer text-white">
<i className="pi pi-twitter text-600 text-xl mr-3"></i>
</a>
<a tabIndex={0} className="cursor-pointer text-white">
<i className="pi pi-github text-600 text-xl mr-3"></i>
</a>
<a tabIndex={0} className="cursor-pointer text-white">
<i className="pi pi-facebook text-600 text-xl"></i>
</a>
</div>
</div>
</div>
)}
</div>
</div>
<div className="col-12 md:col-6 lg:col-3 p-3">
<div className="relative overflow-hidden" onMouseEnter={() => setVisibleMember(3)} onMouseLeave={() => setVisibleMember(-1)}>
<img src={`/demo/images/blocks/team/team-4.png`} className="w-full block" alt="Team 4" />
{visibleMember === 3 && (
<div className="absolute top-0 left-0 h-full w-full border-round fadein animation-duration-300 select-none" style={{ backgroundColor: 'rgba(0,0,0,0.7)' }}>
<div className="flex flex-column p-5 h-full">
<span className="block font-medium text-white text-xl mb-3">Joe Clifford</span>
<span className="font-medium text-400">Customer Relations</span>
<div className="mt-auto">
<a tabIndex={0} className="cursor-pointer text-white">
<i className="pi pi-twitter text-600 text-xl mr-3"></i>
</a>
<a tabIndex={0} className="cursor-pointer text-white">
<i className="pi pi-github text-600 text-xl mr-3"></i>
</a>
<a tabIndex={0} className="cursor-pointer text-white">
<i className="pi pi-facebook text-600 text-xl"></i>
</a>
</div>
</div>
</div>
)}
</div>
</div>
</div>
</div>
</div>
</>
);
}
export default AboutUs;

18
app/(main)/pages/access/page.tsx Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react';
import Link from 'next/link';
function Access() {
return (
<div className="exception-body access">
<img src={`/images/logo-white.svg`} alt="diamond-layout" className="logo" />
<div className="exception-content">
<div className="exception-title">ACCESS DENIED</div>
<div className="exception-detail">You do not have the necessary permissions.</div>
<Link href="/">Go to Dashboard</Link>
</div>
</div>
);
}
export default Access;

87
app/(main)/pages/contact/page.tsx Normal file
View File

@@ -0,0 +1,87 @@
'use client';
import React, { useState, useContext } from 'react';
import { InputText } from 'primereact/inputtext';
import { InputTextarea } from 'primereact/inputtextarea';
import { Button } from 'primereact/button';
import { classNames } from 'primereact/utils';
import { LayoutContext } from '../../../../layout/context/layoutcontext';
function Contact() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const [content] = useState([
{ icon: 'pi pi-fw pi-phone', title: 'Phone', info: '1 (833) 597-7538' },
{
icon: 'pi pi-fw pi-map-marker',
title: 'Our Head Office',
info: 'Churchill-laan 16 II, 1052 CD, Amsterdam'
},
{ icon: 'pi pi-fw pi-print', title: 'Fax', info: '3 (833) 297-1548' }
]);
const { layoutConfig } = useContext(LayoutContext);
return (
<div className="grid card grid-nogutter" style={{ columnGap: '2rem', rowGap: '2rem' }}>
<div className="col-12">
<p className="text-900 font-bold">Contact Us</p>
</div>
<div
className="col-12 mt-3 h-20rem border-1 surface-border p-0 w-full bg-cover border-round"
style={{
backgroundImage: `url('/demo/images/contact/map-${layoutConfig.colorScheme === 'light' ? 'light' : 'dark'}.svg')`
}}
></div>
<div className="col-12 mt-5">
<div className="grid grid-nogutter px-2 flex-column md:flex-row" style={{ columnGap: '2rem', rowGap: '2rem' }}>
{content.map((item, i) => {
return (
<div key={i} className="col flex flex-column justify-content-center text-center align-items-center border-1 surface-border py-5 px-4 border-round">
<i className={classNames('pi pi-fw text-2xl text-primary', item.icon)}></i>
<span className="text-900 font-bold mt-4 mb-1">{item.title}</span>
<span className="text-500">{item.info}</span>
</div>
);
})}
</div>
</div>
<div className="col-12 mt-5">
<p className="text-900 font-bold">Send Us Email</p>
<div className="grid flex-column md:flex-row formgrid grid-nogutter mt-6" style={{ rowGap: '2rem', columnGap: '2rem' }}>
<div className="field col">
<label htmlFor="name" className="block text-indigo-300 font-bold">
Name
</label>
<span className="p-input-icon-left w-full" style={{ height: '3.5rem' }}>
<i className="pi pi-user" style={{ left: '1.5rem' }}></i>
<InputText id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name" className="w-full px-7 text-900 font-semibold" style={{ height: '3.5rem' }} />
</span>
</div>
<div className="field col">
<label htmlFor="email" className="block text-indigo-300 font-bold">
Email Address
</label>
<span className="p-input-icon-left w-full" style={{ height: '3.5rem' }}>
<i className="pi pi-envelope" style={{ left: '1.5rem' }}></i>
<InputText type="text" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" className="w-full px-7 text-900 font-semibold" style={{ height: '3.5rem' }} />
</span>
</div>
<div className="field col-12 flex flex-column">
<label htmlFor="message" className="block text-indigo-300 font-bold">
Message
</label>
<InputTextarea className="w-full surface-border p-4 text-900 font-semibold border-round" id="message" rows={5} cols={30} value={message} onChange={(event) => setMessage(event.target.value)} />
<Button className=" ml-auto mt-3 border-round" label="Send Message"></Button>
</div>
</div>
</div>
</div>
);
}
export default Contact;

429
app/(main)/pages/crud/page.tsx Normal file
View File

@@ -0,0 +1,429 @@
'use client';
import { Button } from 'primereact/button';
import { Column } from 'primereact/column';
import { DataTable } from 'primereact/datatable';
import { Dialog } from 'primereact/dialog';
import { FileUpload } from 'primereact/fileupload';
import { InputNumber } from 'primereact/inputnumber';
import { InputText } from 'primereact/inputtext';
import { InputTextarea } from 'primereact/inputtextarea';
import { RadioButton } from 'primereact/radiobutton';
import { Rating } from 'primereact/rating';
import { Toast } from 'primereact/toast';
import { Toolbar } from 'primereact/toolbar';
import { classNames } from 'primereact/utils';
import React, { useEffect, useRef, useState } from 'react';
import { ProductService } from '../../../../demo/service/ProductService';
import type { Demo } from '@/types';
const Crud = () => {
let emptyProduct: Demo.Product = {
id: null,
name: '',
image: null,
description: '',
category: null,
price: 0,
quantity: 0,
rating: 0,
inventoryStatus: 'INSTOCK'
};
const [products, setProducts] = useState(null);
const [productDialog, setProductDialog] = useState(false);
const [deleteProductDialog, setDeleteProductDialog] = useState(false);
const [deleteProductsDialog, setDeleteProductsDialog] = useState(false);
const [product, setProduct] = useState(emptyProduct);
const [selectedProducts, setSelectedProducts] = useState(null);
const [submitted, setSubmitted] = useState(false);
const [globalFilter, setGlobalFilter] = useState(null);
const toast = useRef(null);
const dt = useRef(null);
useEffect(() => {
ProductService.getProducts().then((data) => setProducts(data));
}, []);
const formatCurrency = (value) => {
return value.toLocaleString('en-US', {
style: 'currency',
currency: 'USD'
});
};
const openNew = () => {
setProduct(emptyProduct);
setSubmitted(false);
setProductDialog(true);
};
const hideDialog = () => {
setSubmitted(false);
setProductDialog(false);
};
const hideDeleteProductDialog = () => {
setDeleteProductDialog(false);
};
const hideDeleteProductsDialog = () => {
setDeleteProductsDialog(false);
};
const saveProduct = () => {
setSubmitted(true);
if (product.name.trim()) {
let _products = [...products];
let _product = { ...product };
if (product.id) {
const index = findIndexById(product.id);
_products[index] = _product;
toast.current.show({
severity: 'success',
summary: 'Successful',
detail: 'Product Updated',
life: 3000
});
} else {
_product.id = createId();
_product.code = createId();
_product.image = 'product-placeholder.svg';
_products.push(_product);
toast.current.show({
severity: 'success',
summary: 'Successful',
detail: 'Product Created',
life: 3000
});
}
setProducts(_products);
setProductDialog(false);
setProduct(emptyProduct);
}
};
const editProduct = (product) => {
setProduct({ ...product });
setProductDialog(true);
};
const confirmDeleteProduct = (product) => {
setProduct(product);
setDeleteProductDialog(true);
};
const deleteProduct = () => {
let _products = products.filter((val) => val.id !== product.id);
setProducts(_products);
setDeleteProductDialog(false);
setProduct(emptyProduct);
toast.current.show({
severity: 'success',
summary: 'Successful',
detail: 'Product Deleted',
life: 3000
});
};
const findIndexById = (id) => {
let index = -1;
for (let i = 0; i < products.length; i++) {
if (products[i].id === id) {
index = i;
break;
}
}
return index;
};
const createId = () => {
let id = '';
let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < 5; i++) {
id += chars.charAt(Math.floor(Math.random() * chars.length));
}
return id;
};
const exportCSV = () => {
dt.current.exportCSV();
};
const confirmDeleteSelected = () => {
setDeleteProductsDialog(true);
};
const deleteSelectedProducts = () => {
let _products = products.filter((val) => !selectedProducts.includes(val));
setProducts(_products);
setDeleteProductsDialog(false);
setSelectedProducts(null);
toast.current.show({
severity: 'success',
summary: 'Successful',
detail: 'Products Deleted',
life: 3000
});
};
const onCategoryChange = (e) => {
let _product = { ...product };
_product['category'] = e.value;
setProduct(_product);
};
const onInputChange = (e, name) => {
const val = (e.target && e.target.value) || '';
let _product = { ...product };
_product[`${name}`] = val;
setProduct(_product);
};
const onInputNumberChange = (e, name) => {
const val = e.value || 0;
let _product = { ...product };
_product[`${name}`] = val;
setProduct(_product);
};
const leftToolbarTemplate = () => {
return (
<React.Fragment>
<div className="my-2">
<Button severity="success" label="New" icon="pi pi-plus" className="mr-2" onClick={openNew} />
<Button severity="danger" label="Delete" icon="pi pi-trash" onClick={confirmDeleteSelected} disabled={!selectedProducts || !selectedProducts.length} />
</div>
</React.Fragment>
);
};
const rightToolbarTemplate = () => {
return (
<React.Fragment>
<FileUpload mode="basic" accept="image/*" maxFileSize={1000000} chooseLabel="Import" className="mr-2 inline-block" />
<Button severity="help" label="Export" icon="pi pi-upload" onClick={exportCSV} />
</React.Fragment>
);
};
const codeBodyTemplate = (rowData) => {
return (
<>
<span className="p-column-title">Code</span>
{rowData.code}
</>
);
};
const nameBodyTemplate = (rowData) => {
return (
<>
<span className="p-column-title">Name</span>
{rowData.name}
</>
);
};
const imageBodyTemplate = (rowData) => {
return (
<>
<span className="p-column-title">Image</span>
<img src={`/demo/images/product/${rowData.image}`} alt={rowData.image} className="shadow-2" width="100" />
</>
);
};
const priceBodyTemplate = (rowData) => {
return (
<>
<span className="p-column-title">Price</span>
{formatCurrency(rowData.price)}
</>
);
};
const categoryBodyTemplate = (rowData) => {
return (
<>
<span className="p-column-title">Category</span>
{rowData.category}
</>
);
};
const ratingBodyTemplate = (rowData) => {
return (
<>
<span className="p-column-title">Reviews</span>
<Rating value={rowData.rating} readOnly cancel={false} />
</>
);
};
const statusBodyTemplate = (rowData) => {
return (
<>
<span className="p-column-title">Status</span>
<span className={`product-badge status-${rowData.inventoryStatus.toLowerCase()}`}>{rowData.inventoryStatus}</span>
</>
);
};
const actionBodyTemplate = (rowData) => {
return (
<>
<Button icon="pi pi-pencil" rounded severity="success" className="mr-2" onClick={() => editProduct(rowData)} />
<Button icon="pi pi-trash" rounded severity="warning" onClick={() => confirmDeleteProduct(rowData)} />
</>
);
};
const header = (
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
<h5 className="m-0">Manage Products</h5>
<span className="block mt-2 md:mt-0 p-input-icon-left">
<i className="pi pi-search" />
<InputText type="search" onInput={(e) => setGlobalFilter((e.target as HTMLInputElement).value)} placeholder="Search..." />
</span>
</div>
);
const productDialogFooter = (
<>
<Button label="Cancel" icon="pi pi-times" text onClick={hideDialog} />
<Button label="Save" icon="pi pi-check" text onClick={saveProduct} />
</>
);
const deleteProductDialogFooter = (
<>
<Button label="No" icon="pi pi-times" text onClick={hideDeleteProductDialog} />
<Button label="Yes" icon="pi pi-check" text onClick={deleteProduct} />
</>
);
const deleteProductsDialogFooter = (
<>
<Button label="No" icon="pi pi-times" text onClick={hideDeleteProductsDialog} />
<Button label="Yes" icon="pi pi-check" text onClick={deleteSelectedProducts} />
</>
);
return (
<div className="grid crud-demo">
<div className="col-12">
<div className="card">
<Toast ref={toast} />
<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
<DataTable
ref={dt}
value={products}
selection={selectedProducts}
onSelectionChange={(e) => setSelectedProducts(e.value)}
paginator
rows={10}
rowsPerPageOptions={[5, 10, 25]}
className="datatable-responsive"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
globalFilter={globalFilter}
emptyMessage="No products found."
header={header}
responsiveLayout="scroll"
>
<Column selectionMode="multiple" headerStyle={{ width: '4rem' }}></Column>
<Column field="code" header="Code" sortable body={codeBodyTemplate} headerStyle={{ minWidth: '15rem' }}></Column>
<Column field="name" header="Name" sortable body={nameBodyTemplate} headerStyle={{ minWidth: '15rem' }}></Column>
<Column header="Image" body={imageBodyTemplate}></Column>
<Column field="price" header="Price" body={priceBodyTemplate} sortable></Column>
<Column field="category" header="Category" sortable body={categoryBodyTemplate} headerStyle={{ minWidth: '10rem' }}></Column>
<Column field="rating" header="Reviews" body={ratingBodyTemplate} sortable></Column>
<Column field="inventoryStatus" header="Status" body={statusBodyTemplate} sortable headerStyle={{ minWidth: '10rem' }}></Column>
<Column body={actionBodyTemplate} headerStyle={{ minWidth: '10rem' }}></Column>
</DataTable>
<Dialog visible={productDialog} style={{ width: '450px' }} header="Product Details" modal className="p-fluid" footer={productDialogFooter} onHide={hideDialog}>
{product.image && <img src={`/demo/images/product/${product.image}`} alt={product.image} width="150" className="mt-0 mx-auto mb-5 block shadow-2" />}
<div className="field">
<label htmlFor="name">Name</label>
<InputText
id="name"
value={product.name}
onChange={(e) => onInputChange(e, 'name')}
required
autoFocus
className={classNames({
'p-invalid': submitted && !product.name
})}
/>
{submitted && !product.name && <small className="p-invalid">Name is required.</small>}
</div>
<div className="field">
<label htmlFor="description">Description</label>
<InputTextarea id="description" value={product.description} onChange={(e) => onInputChange(e, 'description')} required rows={3} cols={20} />
</div>
<div className="field">
<label className="mb-3">Category</label>
<div className="formgrid grid">
<div className="field-radiobutton col-6">
<RadioButton inputId="category1" name="category" value="Accessories" onChange={onCategoryChange} checked={product.category === 'Accessories'} />
<label htmlFor="category1">Accessories</label>
</div>
<div className="field-radiobutton col-6">
<RadioButton inputId="category2" name="category" value="Clothing" onChange={onCategoryChange} checked={product.category === 'Clothing'} />
<label htmlFor="category2">Clothing</label>
</div>
<div className="field-radiobutton col-6">
<RadioButton inputId="category3" name="category" value="Electronics" onChange={onCategoryChange} checked={product.category === 'Electronics'} />
<label htmlFor="category3">Electronics</label>
</div>
<div className="field-radiobutton col-6">
<RadioButton inputId="category4" name="category" value="Fitness" onChange={onCategoryChange} checked={product.category === 'Fitness'} />
<label htmlFor="category4">Fitness</label>
</div>
</div>
</div>
<div className="formgrid grid">
<div className="field col">
<label htmlFor="price">Price</label>
<InputNumber id="price" value={product.price as number} onValueChange={(e) => onInputNumberChange(e, 'price')} mode="currency" currency="USD" locale="en-US" />
</div>
<div className="field col">
<label htmlFor="quantity">Quantity</label>
<InputNumber id="quantity" value={product.quantity} onValueChange={(e) => onInputNumberChange(e, 'quantity')} />
</div>
</div>
</Dialog>
<Dialog visible={deleteProductDialog} style={{ width: '450px' }} header="Confirm" modal footer={deleteProductDialogFooter} onHide={hideDeleteProductDialog}>
<div className="flex align-items-center justify-content-center">
<i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
{product && (
<span>
Are you sure you want to delete <b>{product.name}</b>?
</span>
)}
</div>
</Dialog>
<Dialog visible={deleteProductsDialog} style={{ width: '450px' }} header="Confirm" modal footer={deleteProductsDialogFooter} onHide={hideDeleteProductsDialog}>
<div className="flex align-items-center justify-content-center">
<i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
{product && <span>Are you sure you want to delete the selected products?</span>}
</div>
</Dialog>
</div>
</div>
</div>
);
};
export default Crud;

16
app/(main)/pages/empty/page.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
const EmptyPage = () => {
return (
<div className="grid">
<div className="col-12">
<div className="card">
<h4>Empty Page</h4>
<p>Use this page to start from scratch and place your custom content.</p>
</div>
</div>
</div>
);
};
export default EmptyPage;

73
app/(main)/pages/faq/page.tsx Normal file
View File

@@ -0,0 +1,73 @@
'use client';
import React, { useState } from 'react';
import { Accordion, AccordionTab } from 'primereact/accordion';
function Faq() {
const [activeIndex, setActiveIndex] = useState(0);
const items = [
{
label: 'General',
icon: 'pi pi-fw pi-info-circle',
questions: ['Is there a trial period?', 'Do I need to sign up with credit card?', 'Is the subscription monthly or annual?', 'How many tiers are there?']
},
{
label: 'Mailing',
icon: 'pi pi-fw pi-envelope',
questions: ['How do I setup my account?', 'Is there a limit on mails to send?', 'What is my inbox size?', 'How can I add attachements?']
},
{
label: 'Support',
icon: 'pi pi-fw pi-question-circle',
questions: ['How can I get support?', 'What is the response time?', 'Is there a community forum?', 'Is live chat available?']
},
{
label: 'Billing',
icon: 'pi pi-fw pi-credit-card',
questions: ['Will I receive an invoice?', 'How to provide my billing information?', 'Is VAT included?', 'Can I receive PDF invoices?']
}
];
const changeItem = (i) => {
setActiveIndex(i);
};
return (
<div>
<div className="card">
<div className="text-900 font-bold text-xl mb-3">Frequently Asked Questions</div>
<p className="text-600 line-height-3">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
</div>
<div className="flex flex-column md:flex-row gap-5">
<div className="card mb-0 md:w-20rem">
<div className="text-900 block font-bold mb-3">Categories</div>
<ul className="list-none m-0 p-0">
{items.map((item, i) => (
<li key={i} onClick={() => changeItem(i)} className="mb-2 ">
<a className={`flex align-items-center cursor-pointer select-none p-3 transition-colors transition-duration-150 border-round ${activeIndex === i ? 'bg-primary' : 'hover:surface-hover'}`}>
<i className={item.icon + ' mr-2 text-lg'}></i>
<span>{item.label}</span>
</a>
</li>
))}
</ul>
</div>
<div className="card flex-1">
<Accordion activeIndex={0}>
{items[activeIndex].questions.map((question, i) => (
<AccordionTab key={i} header={question}>
<p className="line-height-3 m-0 p-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</p>
</AccordionTab>
))}
</Accordion>
</div>
</div>
</div>
);
}
export default Faq;

164
app/(main)/pages/help/page.tsx Normal file
View File

@@ -0,0 +1,164 @@
'use client';
import React from 'react';
import { InputText } from 'primereact/inputtext';
function Help() {
return (
<div>
<div className="card">
<div className="relative overflow-hidden h-20rem bg-primary flex flex-column align-items-center justify-content-center border-round mb-8">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" className="absolute w-full top-0 left-0">
<path
fill="var(--primary-600)"
fillOpacity="1"
d="M0,64L48,90.7C96,117,192,171,288,208C384,245,480,267,576,256C672,245,768,203,864,165.3C960,128,1056,96,1152,74.7C1248,53,1344,43,1392,37.3L1440,32L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
></path>
</svg>
<div className="font-bold mb-5 text-4xl z-1">How can we help?</div>
<span className="p-input-icon-left w-9 md:w-6">
<i className="pi pi-search"></i>
<InputText id="name" type="text" placeholder="Search" style={{ borderRadius: '2rem' }} className={'w-full'} />
</span>
</div>
<div className="grid mb-5">
<div className="col-12 md:col-4 mb-5">
<div className="flex flex-column align-items-center">
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
<i className="pi pi-power-off text-4xl text-primary-700"></i>
</span>
<div className="text-2xl mb-3 font-medium">Getting Started</div>
<ul className="list-none m-0 p-0 text-center">
<li className="line-height-3 mb-1">
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
</li>
<li className="line-height-3 mb-1">
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
</li>
<li className="line-height-3 mb-3">
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
</li>
<li>
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
</li>
</ul>
</div>
</div>
<div className="col-12 md:col-4 mb-5">
<div className="flex flex-column align-items-center">
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
<i className="pi pi-arrows-h text-4xl text-primary-700"></i>
</span>
<div className="text-2xl mb-3 font-medium">Transactions</div>
<ul className="list-none m-0 p-0 text-center">
<li className="line-height-3 mb-1">
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
</li>
<li className="line-height-3 mb-1">
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
</li>
<li className="line-height-3 mb-3">
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
</li>
<li>
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
</li>
</ul>
</div>
</div>
<div className="col-12 md:col-4 mb-5">
<div className="flex flex-column align-items-center">
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
<i className="pi pi-user text-4xl text-primary-700"></i>
</span>
<div className="text-2xl mb-3 font-medium">Profile</div>
<ul className="list-none m-0 p-0 text-center">
<li className="line-height-3 mb-1">
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
</li>
<li className="line-height-3 mb-1">
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
</li>
<li className="line-height-3 mb-3">
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
</li>
<li>
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
</li>
</ul>
</div>
</div>
<div className="col-12 md:col-4 mb-5">
<div className="flex flex-column align-items-center">
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
<i className="pi pi-money-bill text-4xl text-primary-700"></i>
</span>
<div className="text-2xl mb-3 font-medium">Billing</div>
<ul className="list-none m-0 p-0 text-center">
<li className="line-height-3 mb-1">
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
</li>
<li className="line-height-3 mb-1">
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
</li>
<li className="line-height-3 mb-3">
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
</li>
<li>
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
</li>
</ul>
</div>
</div>
<div className="col-12 md:col-4 mb-5">
<div className="flex flex-column align-items-center">
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
<i className="pi pi-database text-4xl text-primary-700"></i>
</span>
<div className="text-2xl mb-3 font-medium">Integrations</div>
<ul className="list-none m-0 p-0 text-center">
<li className="line-height-3 mb-1">
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
</li>
<li className="line-height-3 mb-1">
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
</li>
<li className="line-height-3 mb-3">
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
</li>
<li>
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
</li>
</ul>
</div>
</div>
<div className="col-12 md:col-4 mb-5">
<div className="flex flex-column align-items-center">
<span className="inline-flex align-items-center justify-content-center border-circle w-5rem h-5rem bg-primary-100 mb-5">
<i className="pi pi-lock text-4xl text-primary-700"></i>
</span>
<div className="text-2xl mb-3 font-medium">Security</div>
<ul className="list-none m-0 p-0 text-center">
<li className="line-height-3 mb-1">
<a className="text-color-secondary hover:text-primary cursor-pointer">Lorem ipsum dolor</a>
</li>
<li className="line-height-3 mb-1">
<a className="text-color-secondary hover:text-primary cursor-pointer">Consectetur adipiscing elit</a>
</li>
<li className="line-height-3 mb-3">
<a className="text-color-secondary hover:text-primary cursor-pointer">Sed do eiusmod tempor</a>
</li>
<li>
<a className="text-primary hover:underline cursor-pointer font-medium">View all</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
);
}
export default Help;

99
app/(main)/pages/invoice/page.tsx Normal file
View File

@@ -0,0 +1,99 @@
import React from 'react';
function Invoice() {
return (
<div className="card py-8 px-6 md:px-8 overflow-auto">
<div className="flex flex-column align-items-start md:flex-row md:align-items-center md:justify-content-between border-bottom-1 surface-border pb-5 min-w-max">
<div className="flex flex-column">
<svg width="48" height="50" viewBox="0 0 48 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M33.1548 9.65956L23.9913 4.86169L5.54723 14.5106L0.924465 12.0851L23.9913 0L37.801 7.23403L33.1548 9.65956ZM23.9931 19.3085L42.4255 9.65955L47.0717 12.0851L23.9931 24.1595L10.1952 16.9361L14.8297 14.5106L23.9931 19.3085ZM4.6345 25.8937L0 23.4681V37.9149L23.0669 50V45.1489L4.6345 35.4894V25.8937ZM18.4324 28.2658L0 18.6169V13.7658L23.0669 25.8403V40.2977L18.4324 37.8615V28.2658ZM38.7301 23.468V18.6169L24.9205 25.8403V49.9999L29.555 47.5743V28.2659L38.7301 23.468ZM43.3546 35.4892V16.1914L48.0008 13.7659V37.9148L34.1912 45.1488V40.2977L43.3546 35.4892Z"
fill="var(--primary-color)"
/>
</svg>
<div className="my-3 text-4xl font-bold text-900">YOUR COMPANY</div>
<span className="mb-2">9137 3rd Lane California City</span>
<span>CA 93504, U.S.A.</span>
</div>
<div className="flex flex-column mt-5 md:mt-0">
<div className="text-2xl font-semibold text-left md:text-right mb-3">INVOICE</div>
<div className="flex flex-column">
<div className="flex justify-content-between align-items-center mb-2">
<span className="font-semibold mr-6">DATE</span>
<span>30/08/2019</span>
</div>
<div className="flex justify-content-between align-items-center mb-2">
<span className="font-semibold mr-6">INVOICE #</span>
<span>8523</span>
</div>
<div className="flex justify-content-between align-items-center">
<span className="font-semibold mr-6">CUSTOMER ID</span>
<span>C1613</span>
</div>
</div>
</div>
</div>
<div className="mt-5 mb-8 flex flex-column">
<div className="mb-3 text-2xl font-medium">BILL TO</div>
<span className="mb-2">Claire Williams, 148 Hope Lane</span>
<span>Palo Alto, CA 94304.</span>
</div>
<div className="overflow-x-auto">
<table className="w-full" style={{ borderCollapse: 'collapse', tableLayout: 'auto' }}>
<thead>
<tr>
<th className="text-left font-semibold py-3 border-bottom-1 surface-border white-space-nowrap">Description</th>
<th className="text-right font-semibold py-3 border-bottom-1 surface-border white-space-nowrap px-3">Quantity</th>
<th className="text-right font-semibold py-3 border-bottom-1 surface-border white-space-nowrap px-3">Unit Price</th>
<th className="text-right font-semibold py-3 border-bottom-1 surface-border white-space-nowrap">Line Total</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-left py-3 border-bottom-1 surface-border white-space-nowrap">Green T-Shirt</td>
<td className="text-right py-3 border-bottom-1 surface-border px-3">1</td>
<td className="text-right py-3 border-bottom-1 surface-border px-3">$49.00</td>
<td className="text-right py-3 border-bottom-1 surface-border">$49.00</td>
</tr>
<tr>
<td className="text-left py-3 border-bottom-1 surface-border white-space-nowrap">Game Controller</td>
<td className="text-right py-3 border-bottom-1 surface-border px-3">2</td>
<td className="text-right py-3 border-bottom-1 surface-border px-3">$99.00</td>
<td className="text-right py-3 border-bottom-1 surface-border">$198.00</td>
</tr>
<tr>
<td className="text-left py-3 border-bottom-1 surface-border white-space-nowrap">Mini Speakers</td>
<td className="text-right py-3 border-bottom-1 surface-border px-3">1</td>
<td className="text-right py-3 border-bottom-1 surface-border px-3">$85.00</td>
<td className="text-right py-3 border-bottom-1 surface-border">$85.00</td>
</tr>
</tbody>
</table>
</div>
<div className="flex flex-column md:flex-row md:align-items-start md:justify-content-between mt-8">
<div className="font-semibold mb-3 md:mb-0">NOTES</div>
<div className="flex flex-column">
<div className="flex justify-content-between align-items-center mb-2">
<span className="font-semibold mr-6">SUBTOTAL</span>
<span>$332.00</span>
</div>
<div className="flex justify-content-between align-items-center mb-2">
<span className="font-semibold mr-6">VAT #</span>
<span>0</span>
</div>
<div className="flex justify-content-between align-items-center">
<span className="font-semibold mr-6">TOTAL</span>
<span>$332.00</span>
</div>
</div>
</div>
</div>
);
}
export default Invoice;

115
app/(main)/pages/timeline/page.tsx Normal file
View File

@@ -0,0 +1,115 @@
'use client';
import { Button } from 'primereact/button';
import { Card } from 'primereact/card';
import { Timeline } from 'primereact/timeline';
import React from 'react';
import type { CustomEvent } from '@/types';
const TimelineDemo = () => {
const customEvents: CustomEvent[] = [
{
status: 'Ordered',
date: '15/09/2022 10:30',
icon: 'pi pi-shopping-cart',
color: '#9C27B0',
image: 'game-controller.jpg'
},
{
status: 'Processing',
date: '15/09/2022 14:00',
icon: 'pi pi-cog',
color: '#673AB7'
},
{
status: 'Shipped',
date: '15/09/2022 16:15',
icon: 'pi pi-envelope',
color: '#FF9800'
},
{
status: 'Delivered',
date: '16/09/2022 10:00',
icon: 'pi pi-check',
color: '#607D8B'
}
];
const horizontalEvents = ['2023', '2024', '2025', '2026'];
const customizedContent = (item: CustomEvent) => {
return (
<Card title={item.status} subTitle={item.date}>
{item.image && (
<img src={`/demo/images/product/${item.image}`} onError={(e) => ((e.target as HTMLImageElement).src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={item.name} width={200} className="shadow-2" />
)}
<p className="line-height-3 my-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
quas!
</p>
<Button label="Read more" className="mb-5" outlined></Button>
</Card>
);
};
const customizedMarker = (item: CustomEvent) => {
return (
<span className="flex z-1 w-2rem h-2rem align-items-center justify-content-center text-white border-circle shadow-2" style={{ backgroundColor: item.color }}>
<i className={item.icon}></i>
</span>
);
};
return (
<div>
<div className="grid">
<div className="col-12 md:col-6">
<div className="card">
<h5>Left Align</h5>
<Timeline value={customEvents} content={(item) => item.status} />
</div>
</div>
<div className="col-12 md:col-6">
<div className="card">
<h5>Right Align</h5>
<Timeline value={customEvents} align="right" content={(item) => item.status} />
</div>
</div>
<div className="col-12 md:col-6">
<div className="card">
<h5>Alternate Align</h5>
<Timeline value={customEvents} align="alternate" content={(item) => item.status} />
</div>
</div>
<div className="col-12 md:col-6">
<div className="card">
<h5>Opposite Content</h5>
<Timeline value={customEvents} opposite={(item) => item.status} content={(item) => <small className="p-text-secondary">{item.date}</small>} />
</div>
</div>
<div className="col-12">
<div className="card timeline-demo">
<h5>Customized</h5>
<Timeline value={customEvents} align="alternate" className="customized-timeline" marker={customizedMarker} content={customizedContent} />
</div>
</div>
<div className="col-12">
<div className="card">
<h5>Horizontal</h5>
<h6>Top Align</h6>
<Timeline value={horizontalEvents} layout="horizontal" align="top" content={(item) => item} />
<h6>Bottom Align</h6>
<Timeline value={horizontalEvents} layout="horizontal" align="bottom" content={(item) => item} />
<h6>Alternate Align</h6>
<Timeline value={horizontalEvents} layout="horizontal" align="alternate" content={(item) => item} opposite={<span>&nbsp;</span>} />
</div>
</div>
</div>
</div>
);
};
export default TimelineDemo;