keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2024-11-16 22:29:24 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Separated recent transactions on dashboard into its own widget. Also added initial daily view page

Browse source
This commit is contained in:
keannu125 2023-03-12 00:09:32 +08:00
parent 1baf1ab5d2
commit a0a05e2df3
3 changed files with 55 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/Components/DashboardPage/RecentTransactionsWidget/RecentTransactionsWidget.tsx Normal file
View file

@ -0,0 +1,42 @@
import * as React from "react";
import { ProductLog, ProductLogList } from "../../../Interfaces/Interfaces";
import styles from "../../../styles";
import LogsIcon from "../../Icons/LogsIcon/LogsIcon";
import Moment from "react-moment";
export default function RecentTransactionsWidget(props: ProductLogList) {
return (
<div style={{ flex: 3 }}>
<div style={styles.widget}>
<div style={styles.content_row}>
<LogsIcon size={64} color="white" />
<div style={styles.wrapper_column}>
<p style={{ ...styles.text_white, ...styles.text_L }}>Recent</p>
<p style={{ ...styles.text_white, ...styles.text_L }}>
Transactions
</p>
</div>
</div>
{props.ProductLogs.slice(0, 5).map((log: ProductLog, index: number) => {
return (
<div key={index}>
<div style={{ marginBottom: "8px" }} />
<p style={{ ...styles.text_white, ...styles.text_M }}>
{log.name}
</p>
<p style={{ ...styles.text_white, ...styles.text_S }}>
Quantity: {log.quantity}
</p>
<p style={{ ...styles.text_white, ...styles.text_S }}>
{log.history_date}
</p>
<p style={{ ...styles.text_white, ...styles.text_XS }}>
Transaction ID: {log.history_id}
</p>
</div>
);
})}
</div>
</div>
);
}

11
src/Components/GetToday/GetToday.tsx Normal file
View file

@ -0,0 +1,11 @@
export default function GetToday() {
const current = new Date();
const date =
("0" + (current.getMonth() + 1)).slice(-2) +
"-" +
("0" + current.getDate()).slice(-2) +
"-" +
current.getFullYear();
console.log("Today is " + date);
return date;
}

34
src/Routes/Dashboard/Dashboard.tsx
View file

@ -25,6 +25,7 @@ import LowestStockWidget from "../../Components/DashboardPage/LowestStockWidget/
import RecentlyAddedWidget from "../../Components/DashboardPage/RecentlyAddedWidget/RecentlyAddedWidget";
import TotalProductsWidget from "../../Components/DashboardPage/TotalProductsWidget/TotalProductsWidget";
import SessionStatsWidget from "../../Components/DashboardPage/SessionStatsWidget/SessionStatsWidget";
import RecentTransactionsWidget from "../../Components/DashboardPage/RecentTransactionsWidget/RecentTransactionsWidget";
export default function Dashboard() {
const logs = useQuery("logs", GetLogs, { retry: 0 });
@ -107,38 +108,7 @@ export default function Dashboard() {
</div>
</div>
</div>
<div style={{ flex: 3 }}>
<div style={styles.widget}>
<div style={styles.content_row}>
<LogsIcon size={64} color="white" />
<div style={styles.wrapper_column}>
<p style={{ ...styles.text_white, ...styles.text_L }}>Recent</p>
<p style={{ ...styles.text_white, ...styles.text_L }}>
Transactions
</p>
</div>
</div>
{logs.data.slice(0, 5).map((log: ProductLog, index: number) => {
return (
<div key={index}>
<div style={{ marginBottom: "8px" }} />
<p style={{ ...styles.text_white, ...styles.text_M }}>
{log.name}
</p>
<p style={{ ...styles.text_white, ...styles.text_S }}>
Quantity: {log.quantity}
</p>
<p style={{ ...styles.text_white, ...styles.text_S }}>
Date: {log.history_date}
</p>
<p style={{ ...styles.text_white, ...styles.text_XS }}>
Transaction ID: {log.history_id}
</p>
</div>
);
})}
</div>
</div>
<RecentTransactionsWidget ProductLogs={logs.data} />
</div>
</div>
);