Skip to content

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

some fixing

parent 10df46a0
Hide 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) {
removeCookie("role", { path: "/", sameSite: true });
removeCookie("token", { 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";
};
......@@ -45,7 +45,7 @@ export default function App({ Component, pageProps }: AppProps) {
() => {
removeCookieAfterOneHour();
},
360000 //000
1800000 //000
);
return () => {
clearTimeout(timeout);
......
packages/admin/src/components/layout/index.tsx
View file @ 402b2b61
......@@ -15,8 +15,14 @@ const AppLayout = ({ children }: AppLayoutProps) => {
setIsCollapsed(!isCollapsed);
};
const { data, setData } = useContext(DataContext);
const [cookies, setCookie] = useCookies([]);
const [cookies, setCookie, removeCookie] = useCookies([]);
useEffect(() => {
const handleBeforeUnload = () => {
removeCookie("fetch", { path: "/", sameSite: true }); // Delete the 'fetch' cookie
};
window.addEventListener("beforeunload", handleBeforeUnload);
if (!cookies["fetch"] ) {
const fetchData1 = async () => {
try {
......@@ -65,6 +71,7 @@ const AppLayout = ({ children }: AppLayoutProps) => {
return () => {
source.close();
window.removeEventListener("beforeunload", handleBeforeUnload); // Remove the event listener
console.log("SSE closed ");
};
}, []);
......
packages/admin/src/features/dashboard/card-barChart.tsx
View file @ 402b2b61
import React, { Component } from "react";
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(() => {
if (window.myBar) {
window.myBar.destroy();
}
let config = {
type: "bar",
data: {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"ERROR",
"WARNING",
"INFO"
],
datasets: [
{
label: new Date().getFullYear(),
backgroundColor: "#000f24",
label: `${new Date().getDay()}/${new Date().getMonth()}/${new Date().getFullYear()}`,
backgroundColor: ["#EF4444", "#fadb14", "#10B981"],
borderColor: "#000f24",
data: [30, 78, 56, 34, 100, 45, 13],
data: [errorTrapCount/trapCount, warnTrapCount/trapCount, infoTrapCount/trapCount],
fill: false,
barThickness: 8,
},
{
label: new Date().getFullYear() - 1,
fill: false,
backgroundColor: "#fadb14",
borderColor: "#fadb14",
data: [27, 68, 86, 74, 10, 4, 87],
barThickness: 8,
},
barThickness: 30,
}
],
},
options: {
......@@ -38,7 +39,7 @@ export default function CardBarChart() {
responsive: true,
title: {
display: false,
text: "Orders Chart",
text: "Severity Chart",
},
tooltips: {
mode: "index",
......@@ -61,7 +62,7 @@ export default function CardBarChart() {
display: false,
scaleLabel: {
display: true,
labelString: "Month",
labelString: "Severity",
},
gridLines: {
borderDash: [2],
......@@ -96,7 +97,7 @@ export default function CardBarChart() {
};
let ctx = document.getElementById("bar-chart").getContext("2d");
window.myBar = new Chart(ctx, config);
}, []);
}, [errorTrapCount, warnTrapCount, infoTrapCount, trapCount]);
return (
<>
<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() {
<div className="flex flex-wrap items-center">
<div className="relative w-full max-w-full flex-grow flex-1">
<h6 className="uppercase text-blueGray-400 mb-1 text-xs font-semibold">
Performance
{t("Performance")}
</h6>
<h2 className="text-blueGray-700 text-xl font-semibold">
Total orders
{t("Severity")}
</h2>
</div>
</div>
......@@ -115,7 +116,7 @@ export default function CardBarChart() {
<div className="p-4 flex-auto">
{/* Chart */}
<div className="relative h-350-px">
<canvas id="bar-chart"></canvas>
<canvas id={"bar-chart"}></canvas>
</div>
</div>
</div>
......
packages/admin/src/features/dashboard/card-lineChart.tsx
View file @ 402b2b61
......@@ -11,7 +11,7 @@ export default function CardLineChart() {
const fetchData = async () => {
try {
const response = await getSeverityStatistics(cookies["token"]);
console.log(response);
// console.log(response);
setData(response);
} catch (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 { Card, Col } from "antd";
import styles from "./index.module.css";
import React, {useEffect, useState} from "react";
import CardLineChart from "./card-lineChart";
import CardBarChart from "./card-barChart";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import CardUsers from "./card-users";
import CardSocialTraffic from './card-socialTraffics'
import CardStats from './card-stats'
import { getAdminsCount, getUsersCount } from "@/src/services/user-service";
import {getTrapsCount, getErrorTrapCount, getWarningTrapCount, getInfoTrapCount} from "@/src/services/traps-service";
......@@ -131,13 +128,13 @@ const DashboardComponent = () => {
</div>
<div className="w-full lg:w-6/12 xl:w-3/12 px-4">
<CardStats
statSubtitle="PERFORMANCE"
statSubtitle="MODEL PERFORMANCE"
statTitle="49,65%"
statArrow="up"
statPercent="12"
statPercentColor="text-emerald-500"
// statDescripiron="Since last month"
statIconName="fas fa-percent"
statDescripiron="Since last month"
statIconName="Model"
statIconColor="bg-lightBlue-500"
/>
</div>
......@@ -147,10 +144,15 @@ const DashboardComponent = () => {
<CardLineChart />
</div>
<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 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"> */}
<CardUsers />
{/* </div> */}
......
packages/admin/src/features/dashboard/user-dashborad.tsx
View file @ 402b2b61
import React from "react";
import { Card, Col } from "antd";
import styles from "./index.module.css";
import CardLineChart from "./card-lineChart";
import CardBarChart from "./card-barChart";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import CardUsers from "./card-users";
import CardSocialTraffic from './card-socialTraffics'
import CardStats from './card-stats'
const DashboardComponent = () => {
const { t } = useTranslation(TranslationFiles.COMMON);
......@@ -76,7 +73,6 @@ const DashboardComponent = () => {
<CardUsers />
</div>
<div className="w-full xl:w-4/12 px-4">
<CardSocialTraffic />
</div>
</div>
</>
......
packages/admin/src/features/login/index.tsx
View file @ 402b2b61
......@@ -53,7 +53,7 @@ const Login = () => {
useEffect(() => {
const timeout = setTimeout(() => {
removeCookieAfterOneHour();
}, 360000 //000
}, 1800000 //000
);
return () => {
clearTimeout(timeout);
......
packages/shared-library/src/tables/fms-table.tsx
View file @ 402b2b61
......@@ -4,7 +4,6 @@ import {
Tag,
} from "antd";
import classes from "./styles.module.css";
import FmsButton from "../buttons/fms-button";
interface fmsTableProps {
title: string;
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