Added daily view page

package-lock.json

@@ -28,6 +28,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-fast-marquee": "^1.3.5",
+        "react-moment": "^1.1.3",
         "react-query": "^3.39.3",
         "react-redux": "^8.0.5",
         "react-router-dom": "^6.8.1",
@@ -12592,6 +12593,15 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -14881,6 +14891,16 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-moment": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-1.1.3.tgz",
+      "integrity": "sha512-8EPvlUL8u6EknPp1ISF5MQ3wx2OHJVXIP/iZc4wRh3iV3XozftZERDv9ANZeAtMlhNNQHdFoqcZHFUkBSTONfA==",
+      "peerDependencies": {
+        "moment": "^2.29.0",
+        "prop-types": "^15.7.0",
+        "react": "^16.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-query": {
       "version": "3.39.3",
       "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",

package.json

@@ -24,6 +24,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.3.5",
+    "react-moment": "^1.1.3",
     "react-query": "^3.39.3",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.8.1",

src/Components/Api/Api.tsx

@@ -8,11 +8,14 @@ import {
 } from "../../Interfaces/Interfaces";
 
 // Product APIs
+const instance = axios.create({
+  baseURL: "https://keannu125.pythonanywhere.com",
+});
 
 export function GetProducts() {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
-  return axios
-    .get("https://keannu125.pythonanywhere.com/api/v1/products/", {
+  return instance
+    .get("api/v1/products/", {
       headers: {
         Authorization: "Token " + token,
       },
@@ -24,8 +27,8 @@ export function GetProducts() {
 
 export function GetProduct(id: number) {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
-  return axios
-    .get("https://keannu125.pythonanywhere.com/api/v1/products/" + id + "/", {
+  return instance
+    .get("api/v1/products/" + id + "/", {
       headers: {
         Authorization: "Token " + token,
       },
@@ -37,18 +40,12 @@ export function GetProduct(id: number) {
 
 export function UpdateProduct(product: UpdateProductParams) {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
-  return axios
-    .patch(
-      "https://keannu125.pythonanywhere.com/api/v1/products/" +
-        product.id +
-        "/",
-      product,
-      {
-        headers: {
-          Authorization: "Token " + token,
-        },
-      }
-    )
+  return instance
+    .patch("api/v1/products/" + product.id + "/", product, {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
     .then((response) => {
       console.log("Product update successful");
       return response.data;
@@ -61,8 +58,8 @@ export function UpdateProduct(product: UpdateProductParams) {
 
 export function GetLowestStockedProduct() {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
-  return axios
-    .get("https://keannu125.pythonanywhere.com/api/v1/lowest_stock_product/", {
+  return instance
+    .get("api/v1/lowest_stock_product/", {
       headers: {
         Authorization: "Token " + token,
       },
@@ -74,8 +71,8 @@ export function GetLowestStockedProduct() {
 
 export function GetLogs() {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
-  return axios
-    .get("https://keannu125.pythonanywhere.com/api/v1/logs/", {
+  return instance
+    .get("api/v1/logs/", {
       headers: {
         Authorization: "Token " + token,
       },
@@ -87,8 +84,8 @@ export function GetLogs() {
 
 export function AddProduct(note: AddProductParams) {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
-  return axios
-    .post("https://keannu125.pythonanywhere.com/api/v1/products/", note, {
+  return instance
+    .post("api/v1/products/", note, {
       headers: {
         Authorization: "Token " + token,
       },
@@ -104,15 +101,12 @@ export function AddProduct(note: AddProductParams) {
 
 export function DeleteProduct(id: number) {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
-  return axios
-    .delete(
-      "https://keannu125.pythonanywhere.com/api/v1/products/" + id + "/",
-      {
-        headers: {
-          Authorization: "Token " + token,
-        },
-      }
-    )
+  return instance
+    .delete("api/v1/products/" + id + "/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
     .catch((error) => {
       console.log("Error deleting product");
       return error;
@@ -122,11 +116,8 @@ export function DeleteProduct(id: number) {
 // User APIs
 
 export function UserRegister(register: RegistrationParams) {
-  return axios
-    .post(
-      "https://keannu125.pythonanywhere.com/api/v1/accounts/users/",
-      register
-    )
+  return instance
+    .post("api/v1/accounts/users/", register)
     .then(async (response) => {
       console.log(response.data);
       return true;
@@ -138,11 +129,8 @@ export function UserRegister(register: RegistrationParams) {
 }
 
 export function UserLogin(user: LoginParams) {
-  return axios
-    .post(
-      "https://keannu125.pythonanywhere.com/api/v1/accounts/token/login/",
-      user
-    )
+  return instance
+    .post("api/v1/accounts/token/login/", user)
     .then(async (response) => {
       localStorage.setItem("token", JSON.stringify(response.data.auth_token));
       console.log("Login Success ");
@@ -156,8 +144,8 @@ export function UserLogin(user: LoginParams) {
 
 export function UserInfo() {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
-  return axios
-    .get("https://keannu125.pythonanywhere.com/api/v1/accounts/users/me/", {
+  return instance
+    .get("api/v1/accounts/users/me/", {
       headers: {
         Authorization: "Token " + token,
       },
@@ -174,8 +162,8 @@ export function UserInfo() {
 
 export function QueryUser(id: number) {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
-  return axios
-    .get("https://keannu125.pythonanywhere.com/api/v1/user_list/" + id, {
+  return instance
+    .get("api/v1/user_list/" + id, {
       headers: {
         Authorization: "Token " + token,
       },
@@ -191,11 +179,8 @@ export function QueryUser(id: number) {
 }
 
 export function UserActivate(activation: ActivationParams) {
-  return axios
-    .post(
-      "https://keannu125.pythonanywhere.com/api/v1/accounts/users/activation/",
-      activation
-    )
+  return instance
+    .post("api/v1/accounts/users/activation/", activation)
     .then(async (response) => {
       console.log("Activation Success");
       return true;

src/Interfaces/Interfaces.tsx

@@ -7,6 +7,12 @@ export interface Product {
   name: string;
   date_added: string;
   quantity: number;
+  history: ProductHistoryEntry[];
+}
+
+export interface ProductHistoryEntry {
+  quantity: number;
+  history_date: string;
 }
 
 export interface ProductLogList {

src/Routes/DailyView/DailyView.tsx

@@ -1,13 +1,6 @@
-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";
-import LogsIcon from "../../Components/Icons/LogsIcon/LogsIcon";
+import React from "react";
 import "../../index.css";
 import styles from "../../styles";
-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 {
@@ -15,17 +8,14 @@ import {
   GetLowestStockedProduct,
   GetProducts,
 } from "../../Components/Api/Api";
-import {
-  OldSessionState,
-  ProductLog,
-  SessionTransactions,
-} from "../../Interfaces/Interfaces";
+import { OldSessionState, Product } from "../../Interfaces/Interfaces";
 import { useSelector } from "react-redux";
-import LowestStockWidget from "../../Components/DashboardPage/LowestStockWidget/LowestStockWidget";
-import RecentlyAddedWidget from "../../Components/DashboardPage/RecentlyAddedWidget/RecentlyAddedWidget";
-import TotalProductsWidget from "../../Components/DashboardPage/TotalProductsWidget/TotalProductsWidget";
-import SessionStatsWidget from "../../Components/DashboardPage/SessionStatsWidget/SessionStatsWidget";
 import TodayIcon from "../../Components/Icons/TodayIcon/TodayIcon";
+import moment from "moment";
+import GetToday from "../../Components/GetToday/GetToday";
+import Moment from "react-moment";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@mui/material";
 
 export default function DailyView() {
   const logs = useQuery("logs", GetLogs, { retry: 0 });
@@ -40,6 +30,7 @@ export default function DailyView() {
   const old_session_checked = useSelector(
     (state: OldSessionState) => state.old_session_checked.value
   );
+  const navigate = useNavigate();
   if (
     logs.isLoading ||
     products.isLoading ||
@@ -80,10 +71,34 @@ export default function DailyView() {
       <LoginChecker />
       <div style={styles.flex_row}>
         <TodayIcon size={64} color="white" />
-        <p style={{ ...styles.text_white, ...styles.text_XL }}>Daily View</p>
+        <p style={{ ...styles.text_white, ...styles.text_XL }}>
+          Products Modified Today
+        </p>
       </div>
-      <div style={styles.content_row}>
-        <p style={{ ...styles.text_white, ...styles.text_XL }}>Heh</p>
+      <div style={styles.content_column}>
+        {products.data
+          .filter(
+            (Product: Product) =>
+              moment(Product.history[0].history_date).format("MM-DD-YYYY") ===
+              GetToday()
+          )
+          .map((Product: Product) => (
+            <button
+              style={{ ...styles.widget, ...{ border: "None" } }}
+              onClick={() => navigate("/Product/" + Product.id)}
+            >
+              <p style={{ ...styles.text_white, ...styles.text_XL }}>
+                Product: {Product.name}
+              </p>
+              <p style={{ ...styles.text_white, ...styles.text_XL }}>
+                Last Modified:{" "}
+                <Moment date={Product.history[0].history_date} fromNow />
+              </p>
+              <p style={{ ...styles.text_white, ...styles.text_XL }}>
+                Current Stock: {Product.history[0].quantity}
+              </p>
+            </button>
+          ))}
       </div>
     </div>
   );