Skip to content

Commit

Permalink
Merge pull request #96 from SmartDev0910/dev
Browse files Browse the repository at this point in the history 
Implemented invoices page initially
  • Loading branch information
@Stardev1127
Stardev1127 committed Apr 16, 2023
2 parents bc3f1d7 + 6756928 commit 73accb5
Show file tree
Hide file tree
Showing 6 changed files with 90 additions and 104 deletions.
2 changes: 1 addition & 1 deletion sera_frontend_pro/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function TokyoApp(props: TokyoAppProps) {
return (
<CacheProvider value={emotionCache}>
<Head>
<title>Tokyo Free Black NextJS Typescript Admin Dashboard</title>
<title>SERA Admin Dashboard</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
Expand Down
2 changes: 1 addition & 1 deletion sera_frontend_pro/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function Overview() {
return (
<OverviewWrapper>
<Head>
<title>Tokyo Free Black NextJS Typescript Admin Dashboard</title>
<title>SERA Admin Dashboard</title>
</Head>
<HeaderWrapper>
<Container maxWidth="lg">
Expand Down
156 changes: 67 additions & 89 deletions sera_frontend_pro/src/content/Applications/Invoices/InvoicesTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { ChangeEvent, useState, useEffect, useContext } from 'react';
import {
Box,
Card,
Table,
TableBody,
TableCell,
Expand All @@ -14,50 +15,63 @@ import {
Tooltip,
Divider
} from '@mui/material';
import { BusinessPartner } from '@/models/business_partner';
import Label from '@/components/Label';
import { Invoice, InvoiceStatus } from '@/models/invoices';
import { SeraContext } from '@/contexts/SeraContext';

const busPartner: BusinessPartner[] = [
const invoicesData: Invoice[] = [
{
id: '1',
t_name: 'Trade 3DC',
l_name: 'Legal 3DC',
country: 'Canada',
state_town: 'Toronto',
b_number: 'BDS332',
email: 'testman3dc@gmail.com',
phone: '(+1) 392 493 2933',
w_address: '0x3dC4696671ca3cb6C34674A0c1729bbFcC29EDdc',
reputation: 2
bus_parter: 'Trade',
delivery_term: null,
payment_term: '12341231',
due_date: '2023/1/15',
status: 'pending'
},
{
id: '2',
t_name: 'Trade 166',
l_name: 'Legal 166',
country: 'Canada',
state_town: 'Toronto',
b_number: 'TR 166',
email: 'testman166@gmail.com',
phone: '(+1) 392 493 2933',
w_address: '0x1663CE5485ef8c7b8C390F1132e716d84fC357E8',
reputation: 2
bus_parter: 'Trade',
delivery_term: null,
payment_term: '12341231',
due_date: '2023/1/15',
status: 'pending'
}
];

const getStatusLabel = (invoiceStatus: InvoiceStatus): JSX.Element => {
const map = {
failed: {
text: 'Failed',
color: 'error'
},
completed: {
text: 'Completed',
color: 'success'
},
pending: {
text: 'Pending',
color: 'warning'
}
};

const { text, color }: any = map[invoiceStatus];

return <Label color={color}>{text}</Label>;
};
const applyPagination = (
busPartners: BusinessPartner[],
invoices: Invoice[],
page: number,
limit: number
): BusinessPartner[] => {
return busPartners.slice(page * limit, page * limit + limit);
): Invoice[] => {
return invoices.slice(page * limit, page * limit + limit);
};

const InvoicesTable = () => {
const [page, setPage] = useState<number>(0);
const [limit, setLimit] = useState<number>(5);
const [searchText, setSearchText] = useState<string>('');
const { busPartners, SetBusPartners } = useContext(SeraContext);
const [filteredPartner, setFilteredPartner] = useState<BusinessPartner[]>([]);
const { invoices, SetInvoices } = useContext(SeraContext);
const [filteredPartner, setFilteredPartner] = useState<Invoice[]>([]);

const handlePageChange = (_event: any, newPage: number): void => {
setPage(newPage);
Expand All @@ -70,7 +84,7 @@ const InvoicesTable = () => {
const handleSearch = (event: ChangeEvent<HTMLInputElement>): void => {
setSearchText(event.target.value);
setFilteredPartner(
busPartners.filter((item) => item.w_address.includes(event.target.value))
invoices.filter((item) => item.bus_parter.includes(event.target.value))
);
};

Expand All @@ -81,12 +95,12 @@ const InvoicesTable = () => {
);

useEffect(() => {
SetBusPartners(busPartner);
setFilteredPartner(busPartner);
SetInvoices(invoicesData);
setFilteredPartner(invoicesData);
}, []);

return (
<>
<Card>
<Box
component="form"
sx={{
Expand All @@ -107,41 +121,27 @@ const InvoicesTable = () => {
<Table>
<TableHead>
<TableRow>
<TableCell>Trade Name</TableCell>
<TableCell>Legal Name</TableCell>
<TableCell>Country</TableCell>
<TableCell>State/Town</TableCell>
<TableCell>Building Number</TableCell>
<TableCell>Email</TableCell>
<TableCell>Phone Number</TableCell>
<TableCell>Wallet Address</TableCell>
<TableCell>Reputation</TableCell>
<TableCell align="center">Invoice ID</TableCell>
<TableCell>Business Partner</TableCell>
<TableCell>Delivery Term</TableCell>
<TableCell>Payment Term</TableCell>
<TableCell>Due Date</TableCell>
<TableCell>Status</TableCell>
</TableRow>
</TableHead>
<TableBody>
{paginatedBusinessPartner.map((busPartner) => {
{paginatedBusinessPartner.map((invoices, index) => {
return (
<TableRow hover key={busPartner.id}>
<TableCell>
<Typography
variant="body1"
fontWeight="bold"
color="text.primary"
gutterBottom
noWrap
>
{busPartner.t_name}
</Typography>
</TableCell>
<TableCell>
<TableRow hover key={index}>
<TableCell align="center">
<Typography
variant="body1"
fontWeight="bold"
color="text.primary"
gutterBottom
noWrap
>
{busPartner.l_name}
{invoices.id}
</Typography>
</TableCell>
<TableCell>
Expand All @@ -152,19 +152,16 @@ const InvoicesTable = () => {
gutterBottom
noWrap
>
{busPartner.country}
{invoices.bus_parter}
</Typography>
</TableCell>
<TableCell>
<Typography
variant="body1"
fontWeight="bold"
color="text.primary"
gutterBottom
noWrap
<Tooltip
title={'0x3dC4696671ca3cb6C34674A0c1729bbFcC29EDdc'}
placement="top-start"
>
{busPartner.state_town}
</Typography>
<Typography variant="body2" color="text.secondary" noWrap>
0x3dC ... Ddc
</Typography>
</Tooltip>
</TableCell>
<TableCell>
<Typography
Expand All @@ -174,7 +171,7 @@ const InvoicesTable = () => {
gutterBottom
noWrap
>
{busPartner.b_number}
{invoices.delivery_term}
</Typography>
</TableCell>
<TableCell>
Expand All @@ -185,7 +182,7 @@ const InvoicesTable = () => {
gutterBottom
noWrap
>
{busPartner.email}
{invoices.payment_term}
</Typography>
</TableCell>
<TableCell>
Expand All @@ -196,24 +193,9 @@ const InvoicesTable = () => {
gutterBottom
noWrap
>
{busPartner.phone}
{invoices.due_date}
</Typography>
</TableCell>
<TableCell>
<Tooltip title={busPartner.w_address} placement="top-start">
<Typography
variant="body1"
fontWeight="bold"
color="text.primary"
gutterBottom
noWrap
>
{busPartner.w_address.substring(0, 5) +
' ... ' +
busPartner.w_address.substring(38)}
</Typography>
</Tooltip>
</TableCell>
<TableCell>
<Typography
variant="body1"
Expand All @@ -222,11 +204,7 @@ const InvoicesTable = () => {
gutterBottom
noWrap
>
<Rating
name="read-only"
value={busPartner.reputation}
readOnly
/>
{getStatusLabel(invoices.status)}
</Typography>
</TableCell>
</TableRow>
Expand All @@ -238,15 +216,15 @@ const InvoicesTable = () => {
<Box p={2}>
<TablePagination
component="div"
count={busPartners.length}
count={invoices.length}
onPageChange={handlePageChange}
onRowsPerPageChange={handleLimitChange}
page={page}
rowsPerPage={limit}
rowsPerPageOptions={[5, 10, 25, 30]}
/>
</Box>
</>
</Card>
);
};

Expand Down
8 changes: 4 additions & 4 deletions sera_frontend_pro/src/content/Applications/Invoices/PageHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useContext } from 'react';
import { Typography, Button, Grid } from '@mui/material';

import AddTwoToneIcon from '@mui/icons-material/AddTwoTone';
import AddPartnerDialog from './AddPartnerDialog';
import IssueInvoiceDialog from './IssueInvoiceDialog';
import { SeraContext } from '@/contexts/SeraContext';

function PageHeader() {
Expand All @@ -17,7 +17,7 @@ function PageHeader() {
<Grid container justifyContent="space-between" alignItems="center">
<Grid item>
<Typography variant="h3" component="h3" gutterBottom>
Business Ecosystem
Invoices
</Typography>
<Typography variant="subtitle2">
{user.name}, these are your recent transactions
Expand All @@ -30,11 +30,11 @@ function PageHeader() {
startIcon={<AddTwoToneIcon fontSize="small" />}
onClick={() => handleOpenAPDialog()}
>
Add Business Partner
Issue Invoice
</Button>
</Grid>
</Grid>
<AddPartnerDialog />
<IssueInvoiceDialog />
</>
);
}
Expand Down
10 changes: 10 additions & 0 deletions sera_frontend_pro/src/contexts/SeraContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { AuthParty } from '@/models/auth_parties';
import { Proposals, RFQ } from '@/models/contracts';
import { Materials } from '@/models/materials';
import { PurhcaseOrder } from '@/models/purhcase_orders';
import { Invoice } from '@/models/invoices';

type SeraContext = {
openAPDialog: any;
Expand All @@ -13,12 +14,14 @@ type SeraContext = {
rfqs: RFQ[];
materials: Materials[];
purchaseOrders: PurhcaseOrder[];
invoices: Invoice[];
SetBusPartners: (data: BusinessPartner[]) => void;
SetAuthParties: (data: AuthParty[]) => void;
SetProposals: (data: Proposals[]) => void;
SetRFQs: (data: RFQ[]) => void;
SetMaterials: (data: Materials[]) => void;
SetPurchaseOrders: (data: PurhcaseOrder[]) => void;
SetInvoices: (data: Invoice[]) => void;
handleOpenAPDialog: () => void;
handleCloseAPDialog: () => void;
};
Expand All @@ -38,6 +41,11 @@ export function SeraContextProvider({ children }: Props) {
const [rfqs, setRFQs] = useState<RFQ[]>([]);
const [materials, setMaterials] = useState<Materials[]>([]);
const [purchaseOrders, setPurchaseOrders] = useState<PurhcaseOrder[]>([]);
const [invoices, setInvoices] = useState<Invoice[]>([]);

const SetInvoices = (data: Invoice[]) => {
setInvoices(data);
};

const SetPurchaseOrders = (data: PurhcaseOrder[]) => {
setPurchaseOrders(data);
Expand Down Expand Up @@ -81,11 +89,13 @@ export function SeraContextProvider({ children }: Props) {
rfqs,
materials,
purchaseOrders,
invoices,
SetAuthParties,
SetBusPartners,
SetProposals,
SetRFQs,
SetMaterials,
SetInvoices,
SetPurchaseOrders,
handleOpenAPDialog,
handleCloseAPDialog
Expand Down
16 changes: 7 additions & 9 deletions sera_frontend_pro/src/models/invoices.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
export type InvoiceStatus = 'completed' | 'pending' | 'failed';

export interface Invoice {
id: string;
t_name: string;
l_name: string;
country: string;
state_town: string;
b_number: string;
email: string;
phone: string;
w_address: string;
reputation: number;
bus_parter: string;
delivery_term: object;
payment_term: string;
due_date: string;
status: InvoiceStatus;
}

0 comments on commit 73accb5

Please sign in to comment.