Skip to content

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

Add User Pages and some fixing

parent 048ae270
Hide whitespace changes
Inline Side-by-side
Showing with 652 additions and 11 deletions
packages/admin/pages/dashboard/index.tsx
View file @ fee3154a
...@@ -2,14 +2,11 @@ import * as React from "react"; ...@@ -2,14 +2,11 @@ import * as React from "react";
import Head from "next/head"; import Head from "next/head";
import AppLayout from "@/src/components/layout"; import AppLayout from "@/src/components/layout";
import DashboardComponent from "@/src/features/dashboard"; import DashboardComponent from "@/src/features/dashboard";
import ChartComponent from "@/src/features/dashboard/chart";
import { Fragment } from "react"; import { Fragment } from "react";
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 { Row } from "antd";
export default function Dashboard() { export default function Dashboard() {
const { t } = useTranslation(TranslationFiles.COMMON); const { t } = useTranslation(TranslationFiles.COMMON);
const userNumber = 10; // Replace with your user number data
return ( return (
<Fragment> <Fragment>
......
packages/admin/pages/traps/index.tsx
View file @ fee3154a
...@@ -6,7 +6,7 @@ import { Fragment } from "react"; ...@@ -6,7 +6,7 @@ import { Fragment } from "react";
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 ShowTraps from "@/src/features/show-traps"; import ShowTraps from "@/src/features/show-traps";
export default function Users() { export default function Traps() {
const { t } = useTranslation(TranslationFiles.COMMON); const { t } = useTranslation(TranslationFiles.COMMON);
return ( return (
......
packages/admin/pages/user/dashboard/index.tsx 0 → 100644
View file @ fee3154a
import * as React from "react";
import Head from "next/head";
import UserLayout from "../../../src/components/user-layout";
import DashboardComponent from "@/src/features/dashboard";
import { Fragment } from "react";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
export default function Dashboard() {
const { t } = useTranslation(TranslationFiles.COMMON);
return (
<Fragment>
<Head>
<title>{t("dashboard")}</title>
</Head>
<UserLayout>
<main className={`app-main-container`}>
<div className={"page-header"}>{t("")}</div>
<DashboardComponent />
</main>
</UserLayout>
</Fragment>
);
}
packages/admin/pages/user/landing/index.tsx 0 → 100644
View file @ fee3154a
import * as React from "react";
import Head from "next/head";
import { Fragment } from "react";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import AboutContent from "@/src/features/about"
import UserLayout from "../../../src/components/user-layout";
export default function landing() {
const { t } = useTranslation(TranslationFiles.COMMON);
return (
<Fragment>
<Head>
<title>{t("landing")}</title>
</Head>
<UserLayout >
<AboutContent />
</UserLayout>
</Fragment>
);
}
packages/admin/pages/user/profile/index.tsx 0 → 100644
View file @ fee3154a
import * as React from "react";
import Head from "next/head";
import UserLayout from "../../../src/components/user-layout";
import { Fragment } from "react";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import ProfileForm from "@/src/features/profile";
export default function Profile() {
const { t } = useTranslation(TranslationFiles.COMMON);
return (
<Fragment>
<Head>
<title>{t("profile")}</title>
</Head>
<UserLayout >
<ProfileForm />
</UserLayout>
</Fragment>
);
}
packages/admin/pages/user/traps/index.tsx 0 → 100644
View file @ fee3154a
import * as React from "react";
import { useState } from "react";
import Head from "next/head";
import { Fragment } from "react";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import ShowTraps from "@/src/features/show-traps";
import UserLayout from "../../../src/components/user-layout";
export default function Traps() {
const { t } = useTranslation(TranslationFiles.COMMON);
return (
<Fragment>
<Head>
<title>{t("traps")}</title>
</Head>
<UserLayout>
<main className={`app-main-container`}>
<div className={"page-header"}>{t("new-traps")}</div>
<div>
<ShowTraps />
</div>
</main>
</UserLayout>
</Fragment>
);
}
packages/admin/src/components/user-layout/components/app-logo-mark/index.tsx 0 → 100644
View file @ fee3154a
import React from "react";
import Image from "next/image";
const AppLogoMaark = () => {
return (
<div className="app-logo">
<Image
src="/images/logoSider.png"
alt="fms-logo"
width={100}
height={80}
/>
</div>
);
};
export default AppLogoMaark;
packages/admin/src/components/user-layout/components/app-logo/index.tsx 0 → 100644
View file @ fee3154a
import React from "react";
import Image from "next/image";
type AppLogoProps = {
darkMode?: boolean;
};
const AppLogo = ({ darkMode = false }: AppLogoProps) => {
return (
<div className="app-logo">
{darkMode ? (
<Image
src="/images/logoSider.png"
alt="fms-logo"
width={120}
height={120}
/>
) : (
<Image
src="/images/logoSider.png"
alt="fms-logo"
width={120}
height={120}
/>
)}
</div>
);
};
export default AppLogo;
packages/admin/src/components/user-layout/components/content-view/index.tsx 0 → 100644
View file @ fee3154a
import React, { ReactNode } from "react";
import { Layout } from "antd";
import AppFooter from "@/src/components/layout/components/footer";
const { Content } = Layout;
type AppContentViewProps = {
children?: ReactNode;
};
const AppContentView = ({ children }: AppContentViewProps) => {
return (
<Content className="main-content-view">
{children}
<AppFooter />
</Content>
);
};
export default AppContentView;
packages/admin/src/components/user-layout/components/footer/index.tsx 0 → 100644
View file @ fee3154a
import React from "react";
import { Layout, Row, Col } from "antd";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
const { Footer } = Layout;
const AppFooter = () => {
let year: any = new Date().getFullYear();
const { t } = useTranslation(TranslationFiles.COMMON);
return (
<Footer className="app-main-footer">
<Row className={"row"} justify={"center"} align={"middle"}>
{/* <Col>
{"© " + year + " "}
<a href="#" target="_blank" rel="noopener noreferrer">
{t("rights-reserved")}
</a>
</Col> */}
</Row>
</Footer>
);
};
export default AppFooter;
packages/admin/src/components/user-layout/components/header/app-language-switcher/data.ts 0 → 100644
View file @ fee3154a
const languageData = [
{
languageId: "english",
code: "en",
name: "English",
icon: "us",
},
{
languageId: "arabic",
code: "ar",
name: "Arabic",
icon: "sy",
},
];
export default languageData;
packages/admin/src/components/user-layout/components/header/app-language-switcher/index.tsx 0 → 100644
View file @ fee3154a
import React, { Fragment } from "react";
import { Dropdown, Menu } from "antd";
import languageData from "./data";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
const AppLanguageSwitcher = () => {
const router = useRouter();
const { lang } = useTranslation();
const changeLanguage = async (locale: string) => {
router.push(router.asPath, router.asPath, { locale: locale });
};
const menu = (
<Menu id="language-switcher" className="ant-dropdown-menu">
{languageData.map((language, index: any) => (
<Menu.Item key={index} onClick={() => changeLanguage(language?.code)}>
<div className="langItem">
<i className={`flag flag-24 flag-${language.icon}`} />
<span>
<h4>{language.name}</h4>
</span>
</div>
</Menu.Item>
))}
</Menu>
);
return (
<Fragment>
<Dropdown
overlay={menu}
trigger={["click"]}
overlayStyle={{ zIndex: 1052 }}
>
<a
className="ant-dropdown-link langBtn"
onClick={(e) => e.preventDefault()}
>
<span className="lang-icon">
<i
className={`flag flag-24 flag-${
languageData?.find((language) => language.code === lang)?.icon
}`}
/>
</span>
</a>
</Dropdown>
</Fragment>
);
};
export default AppLanguageSwitcher;
packages/admin/src/components/user-layout/components/header/app-notifications/index.tsx 0 → 100644
View file @ fee3154a
import React from "react";
import { List, Dropdown, Menu, Row, Col, Badge } from "antd";
import BellIcon from "@/src/components/assets/custom-ant-icons/bell-icon";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import { useRouter } from "next/router";
import FmsButton from "../../../../../../../shared-library/src/buttons/fms-button";
type AppNotificationsProps = {
data: Array<any>;
setData: Function;
};
const AppNotifications = ({ data, setData }: AppNotificationsProps) => {
const { t } = useTranslation(TranslationFiles.COMMON);
const router = useRouter();
const menu = (
<Menu className="notify-header-message">
<Menu.Item className="header">
<Row align="middle" justify={"space-between"}>
<Col>
<span className="Name-notifications">{t("notifications")}</span>
<span className="count-notifications"></span>
</Col>
</Row>
</Menu.Item>
<List
className="notify-list scrollRow"
dataSource={data.slice(-3)}
renderItem={(item: any) => (
<List.Item>
<div className={`severity-${item.severity}`}>{item.severity}</div>
<div>{item.agentAddress}</div>
{/* Add more properties as required */}
</List.Item>
)}
/>
<Row gutter={24}>
{" "}
<Col span={12}>
<FmsButton
// className="seeNotifications"
size={"small"}
type = "traity"
onClick={() => {
setData([]);
router.push("/traps");
}}
>
{t("see-more")}
</FmsButton>
</Col>
<Col span={12}>
<FmsButton size={"small"} type = "traity" onClick={() => setData([])}>
{t("confirm")}
</FmsButton>
</Col>
</Row>
</Menu>
);
return (
<Dropdown
onVisibleChange={(open: boolean) => {}}
overlay={menu}
placement={"bottomRight"}
trigger={["click"]}
>
<a className="notify-link" onClick={(e) => e.preventDefault()}>
<Badge
count={data.length}
size="small"
style={{ backgroundColor: "red" }}
>
<span className="notify-icon">
<BellIcon />
</span>
</Badge>
</a>
</Dropdown>
);
};
export default AppNotifications;
packages/admin/src/components/user-layout/components/header/index.tsx 0 → 100644
View file @ fee3154a
import React, { useEffect, useContext,useRef } from "react";
import { Layout, Row, Col } from "antd";
import AppLanguageSwitcher from "./app-language-switcher";
import AppNotifications from "./app-notifications";
import NavBar from "./nav-bar";
import UserInfo from "./user-info";
import DataContext from "../../../../context/trap-context";
const { Header } = Layout;
export default function AppHeader() {
const { data, setData, websocket, setNewVal } = useContext(DataContext);
useEffect(() => {
if (!websocket) {
return;
}
websocket.onmessage = function (event:any) {
const message = JSON.parse(event.data);
console.log(message);
if (message.new_val != null) {
const newData = message.new_val;
const transformedData = {
flag:'0',
id: newData.id,
timestamp: newData.timestamp,
agentAddress: newData.agentAddress,
severity: newData.severity,
specificTrap: newData.specificTrap,
genericTrap: newData.genericTrap,
variableBindings: newData.variableBindings,
};
setNewVal(transformedData);
setData((prevData: any) => [...prevData, newData]);
}
else{
setNewVal({id:message.old_val.id,flag:-1,});
}
};
return () => {
// if (websocket) {
// websocket.close();
// }
};
}, []);
return (
<Header className="app-header-mini-sidebar">
<Row justify={"space-between"} align={"middle"} className={"fullContent"}>
<Col span={12}>
<Row align={"middle"}>
<Col span={2}>
<NavBar />
</Col>
</Row>
</Col>
<Col span={12}>
<Row gutter={8} align={"middle"} justify={"end"}>
<Col className={"app-language-switcher"}>
<AppLanguageSwitcher />
</Col>
<Col className={"app-notifications"}>
<AppNotifications data={data} setData={setData} />
</Col>
<Col className={"app-user-info"}>
<UserInfo />
</Col>
</Row>
</Col>
</Row>
</Header>
);
}
// export default AppHeader;
packages/admin/src/components/user-layout/components/header/nav-bar/index.tsx 0 → 100644
View file @ fee3154a
import React, { Fragment } from "react";
import { Menu } from "antd";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import { ExceptionOutlined, ExclamationCircleOutlined, FundOutlined, MenuOutlined, UserOutlined } from "@ant-design/icons";
const NavBar = () => {
const router = useRouter();
const { t } = useTranslation(TranslationFiles.COMMON);
return (
<Fragment>
<Menu
mode="horizontal"
onSelect={(selectedItem:any) => {
console.log(selectedItem.key)
router.push(`/user/${selectedItem.key}`);
}}
overflowedIndicator={<MenuOutlined style={{ fontSize: "20px", color: "#000" }}
className={"ExclamationCircleOutlined "}/>} >
<Menu.Item key="landing" icon={<ExclamationCircleOutlined
style={{ fontSize: "20px", color: "#000" }}
className={"ExclamationCircleOutlined "}/>}>
{t("about")}
</Menu.Item>
<Menu.Item key="dashboard" icon={<FundOutlined
style={{ fontSize: "20px", color: "#000" }}
className={"ExclamationCircleOutlined "}/>}>
{t("dashborad")}
</Menu.Item>
<Menu.Item key="traps" icon={<ExceptionOutlined
style={{ fontSize: "20px", color: "#000" }}
className={"ExclamationCircleOutlined "}/>}>
{("trap-data")}
</Menu.Item>
<Menu.Item key="profile" icon={<UserOutlined
style={{ fontSize: "20px", color: "#000" }}
className={"ExclamationCircleOutlined "}/>}
>
{t("profile")}
</Menu.Item>
</Menu>
</Fragment>
);
};
export default NavBar;
packages/admin/src/components/user-layout/components/header/user-info/confirm-popup.tsx 0 → 100644
View file @ fee3154a
import React, { useContext } from "react";
import { Button, Modal, Space } from "antd";
import { AuthContext } from "@/src/context/auth-context";
import { ExclamationCircleFilled } from "@ant-design/icons";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
const ConfirmPopup: React.FC = () => {
const { t } = useTranslation(TranslationFiles.COMMON);
const { confirm } = Modal;
const showConfirm = () => {
confirm({
title: t("confirm-logout"),
icon: <ExclamationCircleFilled />,
onOk() {
logout();
},
onCancel() {
console.log("Cancel");
},
});
};
const { logout }: any = useContext(AuthContext);
return (
<Space wrap>
<div className="popup-li" onClick={showConfirm}>
<h4>{t("logout")}</h4>
</div>
</Space>
);
};
export default ConfirmPopup;
packages/admin/src/components/user-layout/components/header/user-info/index.tsx 0 → 100644
View file @ fee3154a
import React, { Fragment } from "react";
import { Avatar } from "antd";
import { UserOutlined } from "@ant-design/icons";
import { Menu, Dropdown } from "antd";
import ConfirmPopup from "./confirm-popup";
const UserInfo = () => {
const menu = (
<Menu>
<Menu.Item>
<ConfirmPopup />
</Menu.Item>
</Menu>
);
return (
<Fragment>
<Dropdown
overlay={menu}
trigger={["click"]}
overlayStyle={{ zIndex: 1052 }}
>
<Avatar
className="user-info-avatar"
size={40}
icon={<UserOutlined />}
/>
</Dropdown>
</Fragment>
);
};
export default UserInfo;
packages/admin/src/components/user-layout/index.tsx 0 → 100644
View file @ fee3154a
import React, { ReactNode, useState } from "react";
import { Layout } from "antd";
import AppContentView from "./components/content-view";
import AppHeader from "./components/header";
type AppLayoutProps = {
children: ReactNode;
};
const UserLayout = ({ children }: AppLayoutProps) => {
return (
<div className={"app-layout"}>
<Layout className={"app-layout-mini-sidebar"}>
<Layout className="app-layout-mini-sidebar-main">
<AppHeader />
<AppContentView>{children}</AppContentView>
</Layout>
</Layout>
</div>
);
};
export default React.memo(UserLayout);
packages/admin/src/features/about/index.tsx
View file @ fee3154a
...@@ -9,6 +9,7 @@ import { ...@@ -9,6 +9,7 @@ import {
fetchAboutSettingData, fetchAboutSettingData,
sendEmailMessage, sendEmailMessage,
} from "@/src/services/setting-service"; } from "@/src/services/setting-service";
import MainUtils from "@/src/utils/main";
export default function AboutContent() { export default function AboutContent() {
const { t } = useTranslation(TranslationFiles.COMMON); const { t } = useTranslation(TranslationFiles.COMMON);
...@@ -38,9 +39,11 @@ export default function AboutContent() { ...@@ -38,9 +39,11 @@ export default function AboutContent() {
setSendingStatus("error"); setSendingStatus("error");
} }
} }
const getTextValueByKey = (key) => { const getTextValueByKey = (key:any) => {
const item = data.find((item) => item.key === key); if(!MainUtils.isEmptyValue(data)){
const item = data.find((item:any) => item.key === key);
return item ? item.value : ""; return item ? item.value : "";
}
}; };
return ( return (
<> <>
......
packages/admin/src/features/dashboard/user-dashborad.tsx 0 → 100644
View file @ fee3154a
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);
return (
<>
<div className="flex flex-wrap">
<div className="w-full lg:w-6/12 xl:w-3/12 px-4">
<CardStats
statSubtitle="TRAFFIC"
statTitle="350,897"
statArrow="up"
statPercent="3.48"
statPercentColor="text-emerald-500"
statDescripiron="Since last month"
statIconName="far fa-chart-bar"
statIconColor="bg-red-500"
/>
</div>
<div className="w-full lg:w-6/12 xl:w-3/12 px-4">
<CardStats
statSubtitle="USERS"
statTitle="2,356"
statArrow="down"
statPercent="3.48"
statPercentColor="text-red-500"
statDescripiron="Since last month"
statIconName="group"
statIconColor="primary-blue-600"
/>
</div>
<div className="w-full lg:w-6/12 xl:w-3/12 px-4">
<CardStats
statSubtitle="ADMINS"
statTitle="924"
statArrow="down"
statPercent="1.10"
statPercentColor="text-orange-500"
statDescripiron="Since last month"
statIconName="admin"
statIconColor="secondary-color-yellow"
/>
</div>
<div className="w-full lg:w-6/12 xl:w-3/12 px-4">
<CardStats
statSubtitle="PERFORMANCE"
statTitle="49,65%"
statArrow="up"
statPercent="12"
statPercentColor="text-emerald-500"
statDescripiron="Since last month"
statIconName="fas fa-percent"
statIconColor="bg-lightBlue-500"
/>
</div>
</div>
<div className="flex flex-wrap">
<div className="w-full xl:w-8/12 mb-12 xl:mb-0 px-4 py-4">
<CardLineChart />
</div>
<div className="w-full xl:w-4/12 px-4 py-4">
<CardBarChart />
</div>
</div>
<div className="flex flex-wrap mt-4">
<div className="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
<CardUsers />
</div>
<div className="w-full xl:w-4/12 px-4">
<CardSocialTraffic />
</div>
</div>
</>
);
};
export default DashboardComponent;
packages/admin/src/features/login/index.tsx
View file @ fee3154a
import React, { useEffect } from "react";
import { Button, Checkbox, Col, Form, Input, Row } from "antd"; import { Button, Checkbox, Col, Form, Input, Row } from "antd";
import Image from "next/image"; import Image from "next/image";
import AuthWrapper from "./auth-wrapper"; import AuthWrapper from "./auth-wrapper";
...@@ -10,18 +11,32 @@ import router from "next/router"; ...@@ -10,18 +11,32 @@ import router from "next/router";
const Login = () => { const Login = () => {
const { t } = useTranslation(TranslationFiles.COMMON); const { t } = useTranslation(TranslationFiles.COMMON);
const [cookies, setCookies] = useCookies([AUTH_TOKEN]); const [cookies, setCookie, removeCookie] = useCookies([AUTH_TOKEN]);
const onFinishSend = (values: any) => { const onFinishSend = (values: any) => {
if(values.email=="admin@f.com"){ if(values.email=="admin@f.com"){
setCookies(AUTH_TOKEN, values.email); setCookie(AUTH_TOKEN, values.email, { maxAge: 60 });
router.push("/"); router.push("/");
} }
else if(values.email=="user@f.com"){ else if(values.email=="user@f.com"){
setCookies(AUTH_TOKEN, values.email); setCookie(AUTH_TOKEN, values.email, { maxAge: 60 });
router.push("/user"); router.push("/user/landing");
} }
}; };
const removeCookieAfterOneHour = () => {
removeCookie(AUTH_TOKEN);
};
// call the removeCookieAfterOneHour function after one hour (3600000 milliseconds)
useEffect(() => {
const timeout = setTimeout(() => {
removeCookieAfterOneHour();
}, 60000);
return () => {
clearTimeout(timeout);
};
}, []);
return ( return (
<div data-testid="login-component"> <div data-testid="login-component">
<AuthWrapper> <AuthWrapper>
......
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