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

Recent transactions and total products now functional in dashboard

Browse source
This commit is contained in:
keannu125 2023-03-07 18:25:38 +08:00
parent 3344ec1510
commit 3b565cfd34
4 changed files with 55 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/Components/Api/Api.tsx
View file

@ -57,6 +57,19 @@ export function UpdateProduct(product: UpdateProductParams) {
});
}
export function GetLogs() {
const token = JSON.parse(localStorage.getItem("token") || "{}");
return axios
.get("http://localhost:8000/api/v1/logs/", {
headers: {
Authorization: "Token " + token,
},
})
.then((response) => {
return response.data;
});
}
export function AddProduct(note: AddProductParams) {
const token = JSON.parse(localStorage.getItem("token") || "{}");
return axios

8
src/Components/Container/Container.tsx
View file

@ -1,13 +1,7 @@
import React, { useEffect } from "react";
import React from "react";
import Sidebar from "../Sidebar/Sidebar";
import Header from "../Header/Header";
import styles from "../../styles";
import { CheckSavedSession, UserInfo } from "../Api/Api";
import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice";
import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
import { useDispatch, useSelector } from "react-redux";
import { LoginState } from "../../Interfaces/Interfaces";
import { useNavigate } from "react-router-dom";
import PreviousSessionChecker from "../PreviousSessionChecker/PreviousSessionChecker";
export interface props {

11
src/Interfaces/Interfaces.tsx
View file

@ -9,6 +9,17 @@ export interface Product {
quantity: number;
}
export interface ProductLogList {
ProductLogs: ProductLog[];
}
export interface ProductLog {
history_id: number;
name: string;
quantity: string;
history_date: string;
}
// Redux Interfaces
export interface LoginState {
logged_in: {

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

@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import TotalProductsIcon from "../../Components/Icons/TotalProductsIcon/TotalProductsIcon";
import LowStockIcon from "../../Components/Icons/LowStockIcon/LowStockIcon";
import StatsIcon from "../../Components/Icons/StatsIcon/StatsIcon";
@ -9,8 +9,16 @@ import HomeIcon from "../../Components/Icons/HomeIcon/HomeIcon";
import ColoredCube from "../../Components/ColoredCube/ColoredCube";
import RecentlyAddedIcon from "../../Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon";
import LoginChecker from "../../Components/LoginChecker/LoginChecker";
import { useQuery } from "react-query";
import { GetLogs, GetProducts } from "../../Components/Api/Api";
import { ProductLog } from "../../Interfaces/Interfaces";
export default function Dashboard() {
const logs = useQuery("logs", GetLogs, { retry: 0 });
const products = useQuery("products", GetProducts, { retry: 0 });
if (logs.isLoading && products.isLoading) {
return <div>heh</div>;
}
return (
<div>
<LoginChecker />
@ -39,7 +47,7 @@ export default function Dashboard() {
</p>
</div>
<p style={{ ...styles.text_white, ...styles.text_L }}>
2546 Unique Items
{products.data.length} Unique Item/s
</p>
<p style={{ ...styles.text_white, ...styles.text_L }}>
In inventory
@ -139,52 +147,26 @@ export default function Dashboard() {
</p>
</div>
</div>
<div style={{ marginBottom: "8px" }} />
<p style={{ ...styles.text_white, ...styles.text_M }}>
Kopiko Blanca
</p>
<p style={{ ...styles.text_white, ...styles.text_S }}>Added: 96</p>
<p style={{ ...styles.text_white, ...styles.text_S }}>
Removed: 105
</p>
<p style={{ ...styles.text_white, ...styles.text_XS }}>
02/17/2023
</p>
<div style={{ marginBottom: "8px" }} />
<p style={{ ...styles.text_white, ...styles.text_M }}>
Zidane's Water
</p>
<p style={{ ...styles.text_white, ...styles.text_S }}>Added: 49</p>
<p style={{ ...styles.text_white, ...styles.text_S }}>
Removed: 24
</p>
<p style={{ ...styles.text_white, ...styles.text_XS }}>
02/17/2023
</p>
<div style={{ marginBottom: "8px" }} />
<p style={{ ...styles.text_white, ...styles.text_M }}>
Dan's Beefed Corn
</p>
<p style={{ ...styles.text_white, ...styles.text_S }}>Added: 32</p>
<p style={{ ...styles.text_white, ...styles.text_S }}>
Removed: 64
</p>
<p style={{ ...styles.text_white, ...styles.text_XS }}>
02/17/2023
</p>
<div style={{ marginBottom: "8px" }} />
<div style={styles.content_column}>
<p style={{ ...styles.text_white, ...styles.text_M }}>
Canned Pagmamahal
</p>
</div>
<p style={{ ...styles.text_white, ...styles.text_S }}>Added: 0</p>
<p style={{ ...styles.text_white, ...styles.text_S }}>
Removed: 60
</p>
<p style={{ ...styles.text_white, ...styles.text_XS }}>
02/17/2023
</p>
{logs.data.slice(0, 5).map((log: ProductLog, index: number) => {
console.log(log);
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>
</div>