Skip to content

F
FMS_Project_Frontend
Commit 402b2b61 authored by ReemyHasan's avatar ReemyHasan
Browse files
Options

some fixing

parent 10df46a0
Show whitespace changes
Inline Side-by-side
Showing with 51 additions and 199 deletions
packages/admin/pages/_app.tsx
View file @ 402b2b61
...@@ -36,7 +36,7 @@ export default function App({ Component, pageProps }: AppProps) { ...@@ -36,7 +36,7 @@ export default function App({ Component, pageProps }: AppProps) {
removeCookie("role", { path: "/", sameSite: true }); removeCookie("role", { path: "/", sameSite: true });
removeCookie("token", { path: "/", sameSite: true }); removeCookie("token", { path: "/", sameSite: true });
removeCookie("username", { path: "/", sameSite: true }); removeCookie("username", { path: "/", sameSite: true });
if (cookies["fetch"]) removeCookie("fetch", { path: "/", sameSite: true }); removeCookie("fetch", { path: "/", sameSite: true });
window.location.href = "/sign-in"; window.location.href = "/sign-in";
}; };
...@@ -45,7 +45,7 @@ export default function App({ Component, pageProps }: AppProps) { ...@@ -45,7 +45,7 @@ export default function App({ Component, pageProps }: AppProps) {
() => { () => {
removeCookieAfterOneHour(); removeCookieAfterOneHour();
}, },
360000 //000 1800000 //000
); );
return () => { return () => {
clearTimeout(timeout); clearTimeout(timeout);
......
packages/admin/src/components/layout/index.tsx
View file @ 402b2b61
...@@ -15,8 +15,14 @@ const AppLayout = ({ children }: AppLayoutProps) => { ...@@ -15,8 +15,14 @@ const AppLayout = ({ children }: AppLayoutProps) => {
setIsCollapsed(!isCollapsed); setIsCollapsed(!isCollapsed);
}; };
const { data, setData } = useContext(DataContext); const { data, setData } = useContext(DataContext);
const [cookies, setCookie] = useCookies([]); const [cookies, setCookie, removeCookie] = useCookies([]);
useEffect(() => { useEffect(() => {
const handleBeforeUnload = () => {
removeCookie("fetch", { path: "/", sameSite: true }); // Delete the 'fetch' cookie
};
window.addEventListener("beforeunload", handleBeforeUnload);
if (!cookies["fetch"] ) { if (!cookies["fetch"] ) {
const fetchData1 = async () => { const fetchData1 = async () => {
try { try {
...@@ -65,6 +71,7 @@ const AppLayout = ({ children }: AppLayoutProps) => { ...@@ -65,6 +71,7 @@ const AppLayout = ({ children }: AppLayoutProps) => {
return () => { return () => {
source.close(); source.close();
window.removeEventListener("beforeunload", handleBeforeUnload); // Remove the event listener
console.log("SSE closed "); console.log("SSE closed ");
}; };
}, []); }, []);
......
packages/admin/src/features/dashboard/card-barChart.tsx
View file @ 402b2b61
import React, { Component } from "react"; import React, { Component } from "react";
import Chart from "chart.js/auto"; import Chart from "chart.js/auto";
export default function CardBarChart() { import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
interface Props {
errorTrapCount: number;
warnTrapCount: any;
infoTrapCount:number;
trapCount: number;
}
export default function CardBarChart({errorTrapCount, warnTrapCount, infoTrapCount, trapCount}:Props) {
const { t } = useTranslation(TranslationFiles.COMMON);
React.useEffect(() => { React.useEffect(() => {
if (window.myBar) {
window.myBar.destroy();
}
let config = { let config = {
type: "bar", type: "bar",
data: { data: {
labels: [ labels: [
"January", "ERROR",
"February", "WARNING",
"March", "INFO"
"April",
"May",
"June",
"July",
], ],
datasets: [ datasets: [
{ {
label: new Date().getFullYear(), label: `${new Date().getDay()}/${new Date().getMonth()}/${new Date().getFullYear()}`,
backgroundColor: "#000f24", backgroundColor: ["#EF4444", "#fadb14", "#10B981"],
borderColor: "#000f24", borderColor: "#000f24",
data: [30, 78, 56, 34, 100, 45, 13], data: [errorTrapCount/trapCount, warnTrapCount/trapCount, infoTrapCount/trapCount],
fill: false, fill: false,
barThickness: 8, barThickness: 30,
}, }
{
label: new Date().getFullYear() - 1,
fill: false,
backgroundColor: "#fadb14",
borderColor: "#fadb14",
data: [27, 68, 86, 74, 10, 4, 87],
barThickness: 8,
},
], ],
}, },
options: { options: {
...@@ -38,7 +39,7 @@ export default function CardBarChart() { ...@@ -38,7 +39,7 @@ export default function CardBarChart() {
responsive: true, responsive: true,
title: { title: {
display: false, display: false,
text: "Orders Chart", text: "Severity Chart",
}, },
tooltips: { tooltips: {
mode: "index", mode: "index",
...@@ -61,7 +62,7 @@ export default function CardBarChart() { ...@@ -61,7 +62,7 @@ export default function CardBarChart() {
display: false, display: false,
scaleLabel: { scaleLabel: {
display: true, display: true,
labelString: "Month", labelString: "Severity",
}, },
gridLines: { gridLines: {
borderDash: [2], borderDash: [2],
...@@ -96,7 +97,7 @@ export default function CardBarChart() { ...@@ -96,7 +97,7 @@ export default function CardBarChart() {
}; };
let ctx = document.getElementById("bar-chart").getContext("2d"); let ctx = document.getElementById("bar-chart").getContext("2d");
window.myBar = new Chart(ctx, config); window.myBar = new Chart(ctx, config);
}, []); }, [errorTrapCount, warnTrapCount, infoTrapCount, trapCount]);
return ( return (
<> <>
<div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded"> <div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
...@@ -104,10 +105,10 @@ export default function CardBarChart() { ...@@ -104,10 +105,10 @@ export default function CardBarChart() {
<div className="flex flex-wrap items-center"> <div className="flex flex-wrap items-center">
<div className="relative w-full max-w-full flex-grow flex-1"> <div className="relative w-full max-w-full flex-grow flex-1">
<h6 className="uppercase text-blueGray-400 mb-1 text-xs font-semibold"> <h6 className="uppercase text-blueGray-400 mb-1 text-xs font-semibold">
Performance {t("Performance")}
</h6> </h6>
<h2 className="text-blueGray-700 text-xl font-semibold"> <h2 className="text-blueGray-700 text-xl font-semibold">
Total orders {t("Severity")}
</h2> </h2>
</div> </div>
</div> </div>
...@@ -115,7 +116,7 @@ export default function CardBarChart() { ...@@ -115,7 +116,7 @@ export default function CardBarChart() {
<div className="p-4 flex-auto"> <div className="p-4 flex-auto">
{/* Chart */} {/* Chart */}
<div className="relative h-350-px"> <div className="relative h-350-px">
<canvas id="bar-chart"></canvas> <canvas id={"bar-chart"}></canvas>
</div> </div>
</div> </div>
</div> </div>
......
packages/admin/src/features/dashboard/card-lineChart.tsx
View file @ 402b2b61
...@@ -11,7 +11,7 @@ export default function CardLineChart() { ...@@ -11,7 +11,7 @@ export default function CardLineChart() {
const fetchData = async () => { const fetchData = async () => {
try { try {
const response = await getSeverityStatistics(cookies["token"]); const response = await getSeverityStatistics(cookies["token"]);
console.log(response); // console.log(response);
setData(response); setData(response);
} catch (error) { } catch (error) {
console.error("Error fetching data:", error); console.error("Error fetching data:", error);
......
packages/admin/src/features/dashboard/card-socialTraffics.tsx deleted 100644 → 0
View file @ 10df46a0
import React from "react";
import FmsButton from "../../../../shared-library/src/buttons/fms-button";
// components
export default function CardSocialTraffic() {
return (
<>
<div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
<div className="rounded-t mb-0 px-4 py-3 border-0">
<div className="flex flex-wrap items-center">
<div className="relative w-full px-4 max-w-full flex-grow flex-1">
<h3 className="font-semibold text-base text-blueGray-700">
Social traffic
</h3>
</div>
<div className="relative w-full px-4 max-w-full flex-grow flex-1 text-right">
<FmsButton
type="move"
size="small"
borderRadius="8"
>
{"See all".toUpperCase()}
</FmsButton>
</div>
</div>
</div>
<div className="block w-full overflow-x-auto">
<table className="items-center w-full bg-transparent border-collapse">
<thead className="thead-light">
<tr>
<th className="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
Referral
</th>
<th className="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
Visitors
</th>
<th className="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left min-w-140-px"></th>
</tr>
</thead>
<tbody>
<tr>
<th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
Facebook
</th>
<td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
1,480
</td>
<td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
<div className="flex items-center">
<span className="mr-2">60%</span>
<div className="relative w-full">
<div className="overflow-hidden h-2 text-xs flex rounded bg-red-200">
<div
style={{ width: "60%" }}
className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"
></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
Facebook
</th>
<td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
5,480
</td>
<td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
<div className="flex items-center">
<span className="mr-2">70%</span>
<div className="relative w-full">
<div className="overflow-hidden h-2 text-xs flex rounded bg-emerald-200">
<div
style={{ width: "70%" }}
className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500"
></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
Google
</th>
<td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
4,807
</td>
<td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
<div className="flex items-center">
<span className="mr-2">80%</span>
<div className="relative w-full">
<div className="overflow-hidden h-2 text-xs flex rounded bg-purple-200">
<div
style={{ width: "80%" }}
className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500"
></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
Instagram
</th>
<td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
3,678
</td>
<td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
<div className="flex items-center">
<span className="mr-2">75%</span>
<div className="relative w-full">
<div className="overflow-hidden h-2 text-xs flex rounded bg-lightBlue-200">
<div
style={{ width: "75%" }}
className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-500"
></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
twitter
</th>
<td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
2,645
</td>
<td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
<div className="flex items-center">
<span className="mr-2">30%</span>
<div className="relative w-full">
<div className="overflow-hidden h-2 text-xs flex rounded bg-orange-200">
<div
style={{ width: "30%" }}
className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500"
></div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</>
);
}
packages/admin/src/features/dashboard/index.tsx
View file @ 402b2b61
import React, {useEffect, useContext, useState} from "react"; import React, {useEffect, useState} from "react";
import { Card, Col } from "antd";
import styles from "./index.module.css";
import CardLineChart from "./card-lineChart"; import CardLineChart from "./card-lineChart";
import CardBarChart from "./card-barChart"; import CardBarChart from "./card-barChart";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core"; import { TranslationFiles } from "@/src/data/core";
import CardUsers from "./card-users"; import CardUsers from "./card-users";
import CardSocialTraffic from './card-socialTraffics'
import CardStats from './card-stats' import CardStats from './card-stats'
import { getAdminsCount, getUsersCount } from "@/src/services/user-service"; import { getAdminsCount, getUsersCount } from "@/src/services/user-service";
import {getTrapsCount, getErrorTrapCount, getWarningTrapCount, getInfoTrapCount} from "@/src/services/traps-service"; import {getTrapsCount, getErrorTrapCount, getWarningTrapCount, getInfoTrapCount} from "@/src/services/traps-service";
...@@ -131,13 +128,13 @@ const DashboardComponent = () => { ...@@ -131,13 +128,13 @@ const DashboardComponent = () => {
</div> </div>
<div className="w-full lg:w-6/12 xl:w-3/12 px-4"> <div className="w-full lg:w-6/12 xl:w-3/12 px-4">
<CardStats <CardStats
statSubtitle="PERFORMANCE" statSubtitle="MODEL PERFORMANCE"
statTitle="49,65%" statTitle="49,65%"
statArrow="up" statArrow="up"
statPercent="12" statPercent="12"
statPercentColor="text-emerald-500" statPercentColor="text-emerald-500"
// statDescripiron="Since last month" statDescripiron="Since last month"
statIconName="fas fa-percent" statIconName="Model"
statIconColor="bg-lightBlue-500" statIconColor="bg-lightBlue-500"
/> />
</div> </div>
...@@ -147,10 +144,15 @@ const DashboardComponent = () => { ...@@ -147,10 +144,15 @@ const DashboardComponent = () => {
<CardLineChart /> <CardLineChart />
</div> </div>
<div className="w-full xl:w-4/12 px-4 py-4"> <div className="w-full xl:w-4/12 px-4 py-4">
<CardBarChart /> <CardBarChart
errorTrapCount = {errorTrapCount}
warnTrapCount = {warnTrapCount}
infoTrapCount = {infoTrapCount}
trapCount = {trapCount}
/>
</div> </div>
</div> </div>
<div className="flex flex-wrap mt-4"> <div className="flex flex-wrap mt-4 shadow-2xl">
{/* <div className="w-full xl:w-8/12 mb-12 xl:mb-0 px-4"> */} {/* <div className="w-full xl:w-8/12 mb-12 xl:mb-0 px-4"> */}
<CardUsers /> <CardUsers />
{/* </div> */} {/* </div> */}
......
packages/admin/src/features/dashboard/user-dashborad.tsx
View file @ 402b2b61
import React from "react"; import React from "react";
import { Card, Col } from "antd";
import styles from "./index.module.css";
import CardLineChart from "./card-lineChart"; import CardLineChart from "./card-lineChart";
import CardBarChart from "./card-barChart"; import CardBarChart from "./card-barChart";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core"; import { TranslationFiles } from "@/src/data/core";
import CardUsers from "./card-users"; import CardUsers from "./card-users";
import CardSocialTraffic from './card-socialTraffics'
import CardStats from './card-stats' import CardStats from './card-stats'
const DashboardComponent = () => { const DashboardComponent = () => {
const { t } = useTranslation(TranslationFiles.COMMON); const { t } = useTranslation(TranslationFiles.COMMON);
...@@ -76,7 +73,6 @@ const DashboardComponent = () => { ...@@ -76,7 +73,6 @@ const DashboardComponent = () => {
<CardUsers /> <CardUsers />
</div> </div>
<div className="w-full xl:w-4/12 px-4"> <div className="w-full xl:w-4/12 px-4">
<CardSocialTraffic />
</div> </div>
</div> </div>
</> </>
......
packages/admin/src/features/login/index.tsx
View file @ 402b2b61
...@@ -53,7 +53,7 @@ const Login = () => { ...@@ -53,7 +53,7 @@ const Login = () => {
useEffect(() => { useEffect(() => {
const timeout = setTimeout(() => { const timeout = setTimeout(() => {
removeCookieAfterOneHour(); removeCookieAfterOneHour();
}, 360000 //000 }, 1800000 //000
); );
return () => { return () => {
clearTimeout(timeout); clearTimeout(timeout);
......
packages/shared-library/src/tables/fms-table.tsx
View file @ 402b2b61
...@@ -4,7 +4,6 @@ import { ...@@ -4,7 +4,6 @@ import {
Tag, Tag,
} from "antd"; } from "antd";
import classes from "./styles.module.css"; import classes from "./styles.module.css";
import FmsButton from "../buttons/fms-button";
interface fmsTableProps { interface fmsTableProps {
title: string; title: string;
columns: Array<any>; columns: Array<any>;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab