mirror of
https://github.com/lemeow125/Ivy-Frontend.git
synced 2024-11-17 06:39:25 +08:00
Polished code. Reorganized text styling into separate sizes and colors. Also polished svg icons
This commit is contained in:
parent
c9b18608a1
commit
01c7c288c4
33 changed files with 478 additions and 165 deletions
29
package-lock.json
generated
29
package-lock.json
generated
|
|
@ -22,6 +22,7 @@
|
|||
"@types/node": "^16.18.12",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"axios": "^1.3.4",
|
||||
"localforage": "^1.10.0",
|
||||
"match-sorter": "^6.3.1",
|
||||
"react": "^18.2.0",
|
||||
|
|
@ -5258,6 +5259,29 @@
|
|||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
|
||||
"integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.0",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/axios/node_modules/form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/axobject-query": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
|
||||
|
|
@ -14349,6 +14373,11 @@
|
|||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/psl": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
"@types/node": "^16.18.12",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"axios": "^1.3.4",
|
||||
"localforage": "^1.10.0",
|
||||
"match-sorter": "^6.3.1",
|
||||
"react": "^18.2.0",
|
||||
|
|
|
|||
143
src/Components/Api/Api.tsx
Normal file
143
src/Components/Api/Api.tsx
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
import axios from "axios";
|
||||
import {
|
||||
ActivationParams,
|
||||
UpdateProductParams,
|
||||
AddProductParams,
|
||||
LoginParams,
|
||||
RegistrationParams,
|
||||
} from "../../Interfaces/Interfaces";
|
||||
|
||||
// Note APIs
|
||||
|
||||
export function GetProducts() {
|
||||
const token = JSON.parse(localStorage.getItem("token") || "{}");
|
||||
return axios
|
||||
.get("http://localhost:8000/api/v1/products/", {
|
||||
headers: {
|
||||
Authorization: "Token " + token,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
return response.data;
|
||||
});
|
||||
}
|
||||
|
||||
export function GetNote(id: number) {
|
||||
const token = JSON.parse(localStorage.getItem("token") || "{}");
|
||||
return axios
|
||||
.get("http://localhost:8000/api/v1/products/" + id + "/", {
|
||||
headers: {
|
||||
Authorization: "Token " + token,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
return response.data;
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateProduct(note: UpdateProductParams) {
|
||||
const token = JSON.parse(localStorage.getItem("token") || "{}");
|
||||
return axios
|
||||
.patch("http://localhost:8000/api/v1/products/" + note.id + "/", note, {
|
||||
headers: {
|
||||
Authorization: "Token " + token,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
return response.data;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Error updating product", error);
|
||||
return error;
|
||||
});
|
||||
}
|
||||
|
||||
export function AddProduct(note: AddProductParams) {
|
||||
const token = JSON.parse(localStorage.getItem("token") || "{}");
|
||||
return axios
|
||||
.post("http://localhost:8000/api/v1/products/", note, {
|
||||
headers: {
|
||||
Authorization: "Token " + token,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
return response.data;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Error adding product", error);
|
||||
return error;
|
||||
});
|
||||
}
|
||||
|
||||
export function DeleteProduct(id: number) {
|
||||
const token = JSON.parse(localStorage.getItem("token") || "{}");
|
||||
return axios
|
||||
.delete("http://localhost:8000/api/v1/products/" + id + "/", {
|
||||
headers: {
|
||||
Authorization: "Token " + token,
|
||||
},
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Error deleting product", error);
|
||||
return error;
|
||||
});
|
||||
}
|
||||
|
||||
// User APIs
|
||||
|
||||
export function UserRegister(register: RegistrationParams) {
|
||||
return axios
|
||||
.post("http://localhost:8000/api/v1/accounts/users/", register)
|
||||
.then(async (response) => {
|
||||
console.log(response.data);
|
||||
return true;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Registration failed: " + error);
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
export function UserLogin(user: LoginParams) {
|
||||
return axios
|
||||
.post("http://localhost:8000/api/v1/accounts/token/login/", user)
|
||||
.then(async (response) => {
|
||||
localStorage.setItem("token", JSON.stringify(response.data.auth_token));
|
||||
console.log(
|
||||
"Login Success! Stored Token: ",
|
||||
JSON.parse(localStorage.getItem("token") || "{}")
|
||||
);
|
||||
return true;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Login Failed: " + error);
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
export function UserInfo() {
|
||||
const token = JSON.parse(localStorage.getItem("token") || "{}");
|
||||
return axios
|
||||
.get("http://localhost:8000/api/v1/accounts/users/me/", {
|
||||
headers: {
|
||||
Authorization: "Token " + token,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response.data);
|
||||
return response.data;
|
||||
});
|
||||
}
|
||||
|
||||
export function UserActivate(activation: ActivationParams) {
|
||||
return axios
|
||||
.post("http://localhost:8000/api/v1/accounts/users/activation/", activation)
|
||||
.then(async (response) => {
|
||||
console.log("Activation Success");
|
||||
return true;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Activation failed: " + error);
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
|
@ -14,7 +14,10 @@ export default function Container(props: props) {
|
|||
<div style={{ width: "15%", position: "fixed" }}>
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div style={styles.route_wrapper}>{props.children}</div>
|
||||
<div style={styles.route_wrapper}>
|
||||
{props.children}
|
||||
<div style={{ padding: 64 }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export default function Header() {
|
|||
<div style={styles.header_wrapper}>
|
||||
<div style={styles.header_left}>
|
||||
<AppLogo size={64} color="#80b38b" />
|
||||
<p style={styles.logo_title}>Ivy</p>
|
||||
<p style={styles.logo_text}>Ivy</p>
|
||||
</div>
|
||||
<div style={styles.header_right}>
|
||||
<Login />
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function AppLogo(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-plant-2"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M2 9a10 10 0 1 0 20 0"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function HomeIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-home-2"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function InventoryIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-box-seam"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1"
|
||||
strokeWidth="1"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M12 3l8 4.5v9l-8 4.5l-8 -4.5v-9l8 -4.5"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function LogoutIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-logout"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1"
|
||||
strokeWidth="1"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function LogsIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-clipboard-data"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1"
|
||||
strokeWidth="1"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function LowStockIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-zoom-exclamation"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function NotFoundIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-error-404"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1"
|
||||
strokeWidth="1"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M3 7v4a1 1 0 0 0 1 1h3"></path>
|
||||
|
|
|
|||
|
|
@ -7,15 +7,14 @@ export interface props {
|
|||
export default function ProductIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M7.05 11.293l4.243 -4.243a2 2 0 0 1 2.828 0l2.829 2.83a2 2 0 0 1 0 2.828l-4.243 4.243a2 2 0 0 1 -2.828 0l-2.829 -2.831a2 2 0 0 1 0 -2.828z"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function ProductsIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-list-numbers"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1"
|
||||
strokeWidth="1"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M11 6h9"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function RecentlyAddedIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-book-upload"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1"
|
||||
strokeWidth="1"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M14 20h-8a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12v5"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function StatsIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-align-box-bottom-center"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1"
|
||||
strokeWidth="1"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@ export interface props {
|
|||
export default function TotalProductsIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon icon-tabler icon-tabler-packages"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1"
|
||||
strokeWidth="1"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M7 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,9 @@ export default function Login() {
|
|||
}
|
||||
|
||||
if (logged_in) {
|
||||
return <p style={styles.text}>Welcome Jophiel</p>;
|
||||
return (
|
||||
<p style={{ ...styles.text_white, ...styles.text_M }}>Welcome Jophiel</p>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -27,7 +29,7 @@ export default function Login() {
|
|||
variant="contained"
|
||||
style={styles.login_button}
|
||||
>
|
||||
<p style={styles.text}>Login</p>
|
||||
<p style={{ ...styles.text, ...styles.text_M }}>Login</p>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export default function Logout(props: props) {
|
|||
style={styles.logout_button}
|
||||
>
|
||||
{props.children}
|
||||
<p style={styles.text}>Log Out</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_S }}>Log Out</p>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -22,11 +22,13 @@ export default function BlobView({ Products }: ProductList) {
|
|||
>
|
||||
<div style={styles.content_row}>
|
||||
<ProductIcon size={4} color="white" />{" "}
|
||||
<p style={styles.text}>{row.name}</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_L }}>{row.name}</p>
|
||||
</div>
|
||||
|
||||
<p style={styles.text}>ID: {row.id}</p>
|
||||
<p style={styles.text_small}>Last Modified: {row.last_modified}</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_M }}>ID: {row.id}</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Last Modified: {row.last_modified}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
import * as React from "react";
|
||||
import {
|
||||
Button,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
|
|
@ -22,9 +21,15 @@ export default function TableView({ Products }: ProductList) {
|
|||
<Table sx={{ minWidth: 650 }} aria-label="simple table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell style={styles.text}>Product ID</TableCell>
|
||||
<TableCell style={styles.text}>Product</TableCell>
|
||||
<TableCell style={styles.text}>Last Modified</TableCell>
|
||||
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Product ID
|
||||
</TableCell>
|
||||
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Product
|
||||
</TableCell>
|
||||
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Last Modified
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
|
|
@ -33,9 +38,15 @@ export default function TableView({ Products }: ProductList) {
|
|||
key={row.id}
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell style={styles.text}>{row.id}</TableCell>
|
||||
<TableCell style={styles.text}>{row.name}</TableCell>
|
||||
<TableCell style={styles.text}>{row.last_modified}</TableCell>
|
||||
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
{row.id}
|
||||
</TableCell>
|
||||
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
{row.name}
|
||||
</TableCell>
|
||||
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
{row.last_modified}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
|
|
@ -20,7 +20,7 @@ export default function SidebarButton(props: props) {
|
|||
style={styles.sidebar_button}
|
||||
>
|
||||
{props.children}
|
||||
<p style={styles.text}>{props.name}</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_S }}>{props.name}</p>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -7,3 +7,54 @@ export interface Product {
|
|||
name: string;
|
||||
last_modified: string;
|
||||
}
|
||||
|
||||
// Redux Interfaces
|
||||
export interface LoginState {
|
||||
Login: { logged_in: boolean };
|
||||
}
|
||||
|
||||
export interface LoggedInUserState {
|
||||
LoggedInUser: {
|
||||
value: {
|
||||
email: string;
|
||||
id: number;
|
||||
username: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
// Component Props Interfaces
|
||||
|
||||
export interface IconProps {
|
||||
size: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
// API Interfaces
|
||||
|
||||
export interface RegistrationParams {
|
||||
email: string;
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export interface LoginParams {
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export interface ActivationParams {
|
||||
uid: string;
|
||||
token: string;
|
||||
}
|
||||
|
||||
export interface AddProductParams {
|
||||
name: string;
|
||||
quantity: string;
|
||||
}
|
||||
|
||||
export interface UpdateProductParams {
|
||||
id: number;
|
||||
name: string;
|
||||
quantity: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,41 +14,68 @@ export default function Dashboard() {
|
|||
<div style={{ margin: 32, height: "100%" }}>
|
||||
<div style={styles.flex_row}>
|
||||
<HomeIcon size={64} color="white" />
|
||||
<h1 style={styles.text_large}>Dashboard</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>Dashboard</h1>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "row" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 7 }}>
|
||||
<div style={styles.flex_column}>
|
||||
<div style={{ ...styles.widget, ...{ flex: 5 } }}>
|
||||
<div
|
||||
style={{
|
||||
...styles.widget,
|
||||
...{ flex: 5 },
|
||||
}}
|
||||
>
|
||||
<div style={styles.content_row}>
|
||||
<TotalProductsIcon size={64} color="white" />
|
||||
<h1 style={styles.text_extra_large}>Total Products</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
Total Products
|
||||
</h1>
|
||||
</div>
|
||||
<h1 style={styles.text_large}>2546 Unique Items</h1>
|
||||
<h1 style={styles.text_large}>In inventory</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
2546 Unique Items
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
In inventory
|
||||
</h1>
|
||||
</div>
|
||||
<div style={styles.flex_row}>
|
||||
<div style={{ ...styles.widget, ...{ flex: 6 } }}>
|
||||
<div
|
||||
style={{
|
||||
...styles.widget,
|
||||
...{ flex: 5 },
|
||||
}}
|
||||
>
|
||||
<div style={styles.content_row}>
|
||||
<StatsIcon size={64} color="white" />
|
||||
<h1 style={styles.text_large}>Current Session</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
Current Session
|
||||
</h1>
|
||||
</div>
|
||||
<div style={styles.content_row}>
|
||||
<ColoredCube size={32} color="#a48e41" />
|
||||
<h1 style={styles.text_large}>Added</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Added
|
||||
</h1>
|
||||
</div>
|
||||
<h1 style={styles.text_large}>254</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>254</h1>
|
||||
<div style={styles.content_row}>
|
||||
<ColoredCube size={32} color="#a44141" />
|
||||
<h1 style={styles.text_large}>Removed</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Removed
|
||||
</h1>
|
||||
</div>
|
||||
<h1 style={styles.text_large}>118</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>118</h1>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
flex: 4,
|
||||
flex: 5,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
|
@ -60,10 +87,16 @@ export default function Dashboard() {
|
|||
>
|
||||
<div style={styles.content_row}>
|
||||
<LowStockIcon size={64} color="white" />
|
||||
<h1 style={styles.text_medium}>Low Stock</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Low Stock
|
||||
</h1>
|
||||
</div>
|
||||
<h1 style={styles.text_medium}>Canned Pagmamahal</h1>
|
||||
<h1 style={styles.text_tiny}>In Stock: 3</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Canned Pagmamahal
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
In Stock: 3
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -73,10 +106,21 @@ export default function Dashboard() {
|
|||
>
|
||||
<div style={styles.content_row}>
|
||||
<RecentlyAddedIcon size={64} color="white" />
|
||||
<h1 style={styles.text_medium}>Recently Added</h1>
|
||||
<h1
|
||||
style={{
|
||||
...styles.text_white,
|
||||
...styles.text_L,
|
||||
}}
|
||||
>
|
||||
Recently Added
|
||||
</h1>
|
||||
</div>
|
||||
<h1 style={styles.text_medium}>Zidane's Water</h1>
|
||||
<h1 style={styles.text_tiny}>Added 02/17/2023</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Zidane's Water
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Added 02/17/2023
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -87,33 +131,66 @@ export default function Dashboard() {
|
|||
<div style={styles.content_row}>
|
||||
<LogsIcon size={64} color="white" />
|
||||
<div style={styles.wrapper_column}>
|
||||
<h1 style={styles.text_medium}>Recent</h1>
|
||||
<h1 style={styles.text_medium}>Transactions</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Recent
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
|
||||
Transactions
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginBottom: "8px" }} />
|
||||
<h1 style={styles.text}>Kopiko Blanca</h1>
|
||||
<h1 style={styles.text_small}>Added: 96</h1>
|
||||
<h1 style={styles.text_small}>Removed: 105</h1>
|
||||
<h1 style={styles.text_tiny}>02/17/2023</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Kopiko Blanca
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Added: 96
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Removed: 105
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XS }}>
|
||||
02/17/2023
|
||||
</h1>
|
||||
<div style={{ marginBottom: "8px" }} />
|
||||
<h1 style={styles.text}>Zidane's Water</h1>
|
||||
<h1 style={styles.text_small}>Added: 49</h1>
|
||||
<h1 style={styles.text_small}>Removed: 24</h1>
|
||||
<h1 style={styles.text_tiny}>02/17/2023</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Zidane's Water
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Added: 49
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Removed: 24
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XS }}>
|
||||
02/17/2023
|
||||
</h1>
|
||||
<div style={{ marginBottom: "8px" }} />
|
||||
<h1 style={styles.text}>Dan's Beefed Corn</h1>
|
||||
<h1 style={styles.text_small}>Added: 32</h1>
|
||||
<h1 style={styles.text_small}>Removed: 64</h1>
|
||||
<h1 style={styles.text_tiny}>02/17/2023</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Dan's Beefed Corn
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Added: 32
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Removed: 64
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XS }}>
|
||||
02/17/2023
|
||||
</h1>
|
||||
<div style={{ marginBottom: "8px" }} />
|
||||
<div style={styles.content_column}>
|
||||
<h1 style={styles.text}>Canned</h1>
|
||||
<h1 style={styles.text}>Pagmamahal</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Canned Pagmamahal
|
||||
</h1>
|
||||
</div>
|
||||
<h1 style={styles.text_small}>Added: 0</h1>
|
||||
<h1 style={styles.text_small}>Removed: 60</h1>
|
||||
<h1 style={styles.text_tiny}>02/17/2023</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>Added: 0</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
Removed: 60
|
||||
</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XS }}>
|
||||
02/17/2023
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export default function Error() {
|
|||
<div style={styles.content_center}>
|
||||
<div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
|
||||
<NotFoundIcon size={256} color="#a44141" />
|
||||
<p style={styles.text}>Could not find the requested page</p>
|
||||
<p style={{ ...styles.text_red, ...styles.text_L }}>Page Not Found</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
12
src/Routes/Login/Login.tsx
Normal file
12
src/Routes/Login/Login.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import * as React from "react";
|
||||
import styles from "../../styles";
|
||||
|
||||
export default function Login() {
|
||||
return (
|
||||
<div style={{ margin: 32, height: "100%" }}>
|
||||
<div style={styles.flex_row}>
|
||||
<h1 style={styles.text_large}>Login</h1>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -5,8 +5,8 @@ import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
|
|||
import AddIcon from "../../Components/Icons/AddIcon/AddIcon";
|
||||
import { Button, Switch } from "@mui/material";
|
||||
import { SampleProducts } from "../../Components/SampleData/SampleData";
|
||||
import TableView from "../../Components/Products/TableView/TableView";
|
||||
import BlobView from "../../Components/Products/BlobView/BlobView";
|
||||
import TableView from "../../Components/ProductsPage/TableView/TableView";
|
||||
import BlobView from "../../Components/ProductsPage/BlobView/BlobView";
|
||||
|
||||
export default function Products() {
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -24,7 +24,9 @@ export default function Products() {
|
|||
<div style={{ ...styles.content_row, ...{ flex: 1 } }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
|
||||
<ProductsIcon size={64} color="white" />
|
||||
<h1 style={styles.text_large}>Products</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
|
||||
Products
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -32,20 +34,20 @@ export default function Products() {
|
|||
...{ flex: 1, justifyContent: "flex-end" },
|
||||
}}
|
||||
>
|
||||
<Switch onClick={() => toggleTableView(!tableView)} />
|
||||
<Button
|
||||
onClick={() => navigate("/Products/AddProduct")}
|
||||
style={styles.button_add_product}
|
||||
>
|
||||
<AddIcon size={32} color="white" />
|
||||
<p style={styles.text_medium}>Add Product</p>
|
||||
<p style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Add Product
|
||||
</p>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={styles.content_row}>
|
||||
<Switch onClick={() => toggleTableView(!tableView)} />
|
||||
<p style={styles.text_small}>View Type</p>
|
||||
</div>
|
||||
|
||||
{view()}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ export interface props {
|
|||
export default function AddIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ export interface props {
|
|||
export default function CancelIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ export interface props {
|
|||
export default function DeleteIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ export interface props {
|
|||
export default function EditIcon(props: props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={props.size + "px"}
|
||||
height={props.size + "px"}
|
||||
viewBox="0 0 24 24"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import React, { useState } from "react";
|
|||
import styles from "../../styles";
|
||||
import InventoryIcon from "../../Components/Icons/InventoryIcon/InventoryIcon";
|
||||
import {
|
||||
Button,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
|
|
@ -30,6 +29,7 @@ export default function Inventory() {
|
|||
style={{
|
||||
...styles.text_red,
|
||||
...{ border: "none", background: "none" },
|
||||
...styles.text_S,
|
||||
}}
|
||||
value={stock}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
|
|
@ -47,6 +47,7 @@ export default function Inventory() {
|
|||
style={{
|
||||
...styles.text_orange,
|
||||
...{ border: "none", background: "none" },
|
||||
...styles.text_S,
|
||||
}}
|
||||
value={stock}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
|
|
@ -64,6 +65,7 @@ export default function Inventory() {
|
|||
style={{
|
||||
...styles.text_green,
|
||||
...{ border: "none", background: "none" },
|
||||
...styles.text_S,
|
||||
}}
|
||||
value={stock}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
|
|
@ -80,7 +82,7 @@ export default function Inventory() {
|
|||
<div style={{ margin: 32, height: "100%" }}>
|
||||
<div style={styles.content_row}>
|
||||
<InventoryIcon size={64} color="white" />
|
||||
<h1 style={styles.text_large}>Inventory</h1>
|
||||
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>Inventory</h1>
|
||||
</div>
|
||||
<TableContainer
|
||||
style={{
|
||||
|
|
@ -91,9 +93,15 @@ export default function Inventory() {
|
|||
<Table sx={{ minWidth: 650 }} aria-label="simple table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell style={styles.text}>Product ID</TableCell>
|
||||
<TableCell style={styles.text}>Product</TableCell>
|
||||
<TableCell style={styles.text}>In Stock</TableCell>
|
||||
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Product ID
|
||||
</TableCell>
|
||||
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
Product
|
||||
</TableCell>
|
||||
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
|
||||
In Stock
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
|
|
@ -102,8 +110,12 @@ export default function Inventory() {
|
|||
key={row.id}
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell style={styles.text}>{row.id}</TableCell>
|
||||
<TableCell style={styles.text}>{row.name}</TableCell>
|
||||
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
{row.id}
|
||||
</TableCell>
|
||||
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
|
||||
{row.name}
|
||||
</TableCell>
|
||||
{StockRender(row.in_stock)}
|
||||
</TableRow>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -7,54 +7,48 @@ const styles: { [key: string]: React.CSSProperties } = {
|
|||
height: "100%",
|
||||
backgroundColor: "#0b2322",
|
||||
},
|
||||
text_tiny: {
|
||||
fontSize: "0.6vw",
|
||||
color: "white",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
text_small: {
|
||||
fontSize: "0.8vw",
|
||||
color: "white",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
text: {
|
||||
fontSize: "1.3vw",
|
||||
color: "white",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
text_medium: {
|
||||
fontSize: "1.2vw",
|
||||
color: "white",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
text_large: {
|
||||
fontSize: "2.2vw",
|
||||
color: "white",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
text_extra_large: {
|
||||
fontSize: "3.2vw",
|
||||
/*
|
||||
Font Sizes
|
||||
Extra-Large: 2rem
|
||||
Large: 1.6rem
|
||||
Medium: 1.2rem
|
||||
Small: 1rem
|
||||
Tiny: 0.8rem
|
||||
*/
|
||||
text_white: {
|
||||
color: "white",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
text_red: {
|
||||
fontSize: "1.3vw",
|
||||
color: "#a44141",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
text_orange: {
|
||||
fontSize: "1.3vw",
|
||||
color: "#c57331",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
text_green: {
|
||||
fontSize: "1.3vw",
|
||||
color: "#80b28a",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
logo_title: {
|
||||
text_XL: {
|
||||
fontSize: "2rem",
|
||||
},
|
||||
text_L: {
|
||||
fontSize: "1.6rem",
|
||||
},
|
||||
text_M: {
|
||||
fontSize: "1.2rem",
|
||||
},
|
||||
text_S: {
|
||||
fontSize: "1rem",
|
||||
},
|
||||
text_XS: {
|
||||
fontSize: "0.8rem",
|
||||
},
|
||||
logo_text: {
|
||||
color: "#80b38b",
|
||||
fontSize: 26,
|
||||
fontSize: "2rem",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
header_wrapper: {
|
||||
|
|
@ -130,6 +124,7 @@ const styles: { [key: string]: React.CSSProperties } = {
|
|||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: "#1d3b33",
|
||||
alignSelf: "stretch",
|
||||
borderRadius: 8,
|
||||
paddingLeft: 16,
|
||||
paddingRight: 16,
|
||||
|
|
|
|||
Loading…
Reference in a new issue