keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2025-05-11 09:01:06 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Separated all the widgets in the dashboard into their own components

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-03-07 21:17:22 +08:00
parent 6619163abe
commit 3b5fb87099
12 changed files with 405 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/Components/DashboardPage/LowestStockWidget/LowestStockWidget.tsx Normal file
View file

@ -0,0 +1,49 @@
import * as React from "react";
import styles from "../../../styles";
import LowStockIcon from "../../Icons/LowStockIcon/LowStockIcon";
import { ProductList } from "../../../Interfaces/Interfaces";
export interface props {}
export default function LowestStockWidget(props: ProductList) {
if (!props.Products[0]) {
return (
<div
style={{
...styles.widget,
...{ flex: 1 },
}}
>
<div style={styles.content_row}>
<LowStockIcon size={64} color="white" />
<p style={{ ...styles.text_white, ...styles.text_L }}>Lowest Stock</p>
</div>
<p style={{ ...styles.text_white, ...styles.text_S }}>
There are no products yet...
</p>
<p style={{ ...styles.text_white, ...styles.text_S }}>
No worries on running out!
</p>
</div>
);
}
return (
<div
style={{
...styles.widget,
...{ flex: 1 },
}}
>
<div style={styles.content_row}>
<LowStockIcon size={64} color="white" />
<p style={{ ...styles.text_white, ...styles.text_L }}>Lowest Stock</p>
</div>
<p style={{ ...styles.text_white, ...styles.text_S }}>
{props.Products[0].name}
</p>
<p style={{ ...styles.text_white, ...styles.text_S }}>
In Stock: {props.Products[0].quantity}
</p>
</div>
);
}

58
src/Components/DashboardPage/RecentlyAddedWidget/RecentlyAddedWidget.tsx Normal file
View file

@ -0,0 +1,58 @@
import * as React from "react";
import styles from "../../../styles";
import { ProductList } from "../../../Interfaces/Interfaces";
import RecentlyAddedIcon from "../../Icons/RecentlyAddedIcon/RecentlyAddedIcon";
export default function RecentlyAddedWidget(props: ProductList) {
if (!props.Products[0]) {
return (
<div
style={{
...styles.widget,
...{ flex: 1 },
}}
>
<div style={styles.content_row}>
<RecentlyAddedIcon size={64} color="white" />
<p
style={{
...styles.text_white,
...styles.text_L,
}}
>
Recently Added
</p>
</div>
<p style={{ ...styles.text_white, ...styles.text_M }}>
Nothing recently added...
</p>
</div>
);
}
return (
<div
style={{
...styles.widget,
...{ flex: 1 },
}}
>
<div style={styles.content_row}>
<RecentlyAddedIcon size={64} color="white" />
<p
style={{
...styles.text_white,
...styles.text_L,
}}
>
Recently Added
</p>
</div>
<p style={{ ...styles.text_white, ...styles.text_M }}>
{props.Products[0].name}
</p>
<p style={{ ...styles.text_white, ...styles.text_S }}>
{props.Products[0].date_added}
</p>
</div>
);
}

44
src/Components/DashboardPage/SessionStatsWidget/SessionStatsWidget.tsx Normal file
View file

@ -0,0 +1,44 @@
import * as React from "react";
import styles from "../../../styles";
import ColoredCube from "../../ColoredCube/ColoredCube";
import StatsIcon from "../../Icons/StatsIcon/StatsIcon";
import { useSelector } from "react-redux";
import { SessionTransactions } from "../../../Interfaces/Interfaces";
export interface props {}
export default function SessionStatsWidget() {
const session_added = useSelector(
(state: SessionTransactions) => state.session_transactions.added
);
const session_removed = useSelector(
(state: SessionTransactions) => state.session_transactions.removed
);
return (
<div
style={{
...styles.widget,
...{ flex: 5 },
}}
>
<div style={styles.content_row}>
<StatsIcon size={64} color="white" />
<p style={{ ...styles.text_white, ...styles.text_XL }}>
Current Session
</p>
</div>
<div style={styles.content_row}>
<ColoredCube size={32} color="#a48e41" />
<p style={{ ...styles.text_white, ...styles.text_L }}>Added</p>
</div>
<p style={{ ...styles.text_white, ...styles.text_L }}>{session_added}</p>
<div style={styles.content_row}>
<ColoredCube size={32} color="#a44141" />
<p style={{ ...styles.text_white, ...styles.text_L }}>Removed</p>
</div>
<p style={{ ...styles.text_white, ...styles.text_XL }}>
{session_removed}
</p>
</div>
);
}

37
src/Components/DashboardPage/TotalProductsWidget/TotalProductsWidget.tsx Normal file
View file

@ -0,0 +1,37 @@
import * as React from "react";
import styles from "../../../styles";
import TotalProductsIcon from "../../Icons/TotalProductsIcon/TotalProductsIcon";
import { Product, ProductList } from "../../../Interfaces/Interfaces";
import { useEffect, useState } from "react";
export interface props {}
export default function TotalProductsWidget(props: ProductList) {
const [items, setItems] = useState("Loading...");
useEffect(() => {
if (props.Products.length === 0) {
setItems("No products");
} else if (props.Products.length === 1) {
setItems("1 product");
} else {
setItems(props.Products.length + " Unique Items");
}
}, []);
return (
<div
style={{
...styles.widget,
...{ flex: 5 },
}}
>
<div style={styles.content_row}>
<TotalProductsIcon size={64} color="white" />
<p style={{ ...styles.text_white, ...styles.text_XL }}>
Total Products
</p>
</div>
<p style={{ ...styles.text_white, ...styles.text_L }}>{items}</p>
<p style={{ ...styles.text_white, ...styles.text_L }}>In inventory</p>
</div>
);
}