Skip to content

T
thecybernanny-webapp
Commit b078e025 by asranov0003
Options

feat: initialise routes, browser history, messangers, calls and recording pages content

parent 43363d22
Showing with 436 additions and 9 deletions
src/locales/en/en.json
......@@ -113,6 +113,10 @@
"createTitle": "Create your PIN Code",
"confirmTitle": "Confirm your PIN Code"
},
"device": {
"deleteDevice": "Delete device",
"deleteDeviceDesc": "Are you sure you want to delete this device?"
},
"logout": {
"title": "Logout",
"desc": "Are you sure you want to continue?"
......@@ -124,7 +128,8 @@
"continue": "Continue",
"resetPassword": "Reset Password",
"logout": "Logout",
"cancel": "Cancel"
"cancel": "Cancel",
"delete": "Delete"
},
"notFound": {
"code": "404",
......
src/pages/BrowserHistory/BrowserHistory.css
.browserhistory {
padding-top: 60px;
}
.browserhistory__content {
min-height: calc(100vh - 75px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.browserhistory__content__header {
display: flex;
align-items: center;
justify-content: space-between;
}
.browserhistory__content__header__icon {
font-size: 1.5rem;
cursor: pointer;
}
.browserhistory__filter {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.browserhistory__filter__title {
font-weight: bold;
}
.browserhistory__filter__dates {
display: flex;
justify-content: space-between;
align-items: center;
}
.browserhistory__filter__date label {
margin-right: 0.5rem;
font-weight: bold;
}
\ No newline at end of file
src/pages/BrowserHistory/BrowserHistory.tsx
import React from "react";
import "./BrowserHistory.css";
import SectionHeader from "../../layouts/SectionHeader";
import { MdInfoOutline } from "react-icons/md";
import CButton from "../../components/CButton";
const BrowserHistory: React.FC = () => {
return <div>BrowserHistory</div>;
return (
<div className="browserhistory wrapper">
<SectionHeader to="/home" />
<div className="browserhistory__content">
<div>
<div className="browserhistory__content__header">
<h3>Browser History</h3>
<MdInfoOutline className="browserhistory__content__header__icon" />
</div>
<p className="browserhistory__content__empty">No data</p>
</div>
<div className="browserhistory__filter">
<p className="browserhistory__filter__title">Select Dates</p>
<div className="browserhistory__filter__dates">
<div className="browserhistory__filter__date">
<label htmlFor="from">From</label>
<input type="date" id="from" />
</div>
<div className="browserhistory__filter__date">
<label htmlFor="to">To</label>
<input type="date" id="to" />
</div>
</div>
<CButton title="Search" />
</div>
</div>
</div>
);
};
export default BrowserHistory;
src/pages/Calls/Calls.css
.calls {
padding-top: 60px;
}
.calls__content {
min-height: calc(100vh - 75px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.calls__content__header {
display: flex;
align-items: center;
justify-content: space-between;
}
.calls__content__header__icon {
font-size: 1.5rem;
cursor: pointer;
}
.calls__filter {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.calls__filter__title {
font-weight: bold;
}
.calls__filter__dates {
display: flex;
justify-content: space-between;
align-items: center;
}
.calls__filter__date label {
margin-right: 0.5rem;
font-weight: bold;
}
\ No newline at end of file
src/pages/Calls/Calls.tsx
import React from "react";
import "./Calls.css";
import SectionHeader from "../../layouts/SectionHeader";
import { MdInfoOutline } from "react-icons/md";
import CButton from "../../components/CButton";
const Calls: React.FC = () => {
return <div>Calls</div>;
return (
<div className="calls wrapper">
<SectionHeader to="/home" />
<div className="calls__content">
<div>
<div className="calls__content__header">
<h3>Calls</h3>
<MdInfoOutline className="calls__content__header__icon" />
</div>
<p className="calls__content__empty">No data</p>
</div>
<div className="calls__filter">
<p className="calls__filter__title">Select Dates</p>
<div className="calls__filter__dates">
<div className="calls__filter__date">
<label htmlFor="from">From</label>
<input type="date" id="from" />
</div>
<div className="calls__filter__date">
<label htmlFor="to">To</label>
<input type="date" id="to" />
</div>
</div>
<CButton title="Search" />
</div>
</div>
</div>
);
};
export default Calls;
src/pages/Home/Home.css
......@@ -56,6 +56,7 @@
border-radius: 10px;
color: var(--text-color);
font-size: 0.8rem;
cursor: pointer;
}
.home__menu__icon {
......
src/pages/Home/Home.tsx
......@@ -25,8 +25,11 @@ import {
import { fetchDeviceData } from "../../stores/slices/deviceSlice";
import GoogleMapReact from "google-map-react";
import CMarker from "../../components/CMarker/CMarker";
import CModal from "../../components/CModal";
import CButton from "../../components/CButton";
const Home: React.FC = () => {
const [isOpenRemoveDeviceModal, setIsOpenRemoveDeviceModal] = useState(false);
const [mapCenter, setMapCenter] = useState({
lat: 37.33,
lng: -122,
......@@ -54,6 +57,10 @@ const Home: React.FC = () => {
}
}, [deviceData]);
const toggleRemoveDeviceModal = () => {
setIsOpenRemoveDeviceModal((prev) => !prev);
};
return (
<>
<div className="home">
......@@ -150,7 +157,10 @@ const Home: React.FC = () => {
<p>{t("menu.recordingEnvironment")}</p>
</Link>
<div className="home__menu__link">
<div
className="home__menu__link"
onClick={toggleRemoveDeviceModal}
>
<RiDeleteBinLine className="home__menu__icon" />
<p>{t("menu.removeDevice")}</p>
</div>
......@@ -158,6 +168,24 @@ const Home: React.FC = () => {
</Sheet.Content>
</Sheet.Container>
</Sheet>
<CModal
isOpen={isOpenRemoveDeviceModal}
onToggle={toggleRemoveDeviceModal}
content={
<div className="modal__box">
<h3 className="modal__box__title">{t("device.deleteDevice")}</h3>
<p>{t("device.deleteDeviceDesc")}</p>
<div className="modal__box__actions">
<CButton
title={t("button.cancel")}
onClick={toggleRemoveDeviceModal}
/>
<CButton title={t("button.delete")} variant="danger" />
</div>
</div>
}
/>
</>
);
};
......
src/pages/Messengers/Messengers.css
.messengers {
padding-top: 60px;
}
.messengers__content {
min-height: calc(100vh - 75px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.messengers__content__header {
display: flex;
align-items: center;
justify-content: space-between;
}
.messengers__content__header__icon {
font-size: 1.5rem;
cursor: pointer;
}
.messengers__filter {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.messengers__filter__title {
font-weight: bold;
}
.messengers__filter__dates {
display: flex;
justify-content: space-between;
align-items: center;
}
.messengers__filter__date label {
margin-right: 0.5rem;
font-weight: bold;
}
\ No newline at end of file
src/pages/Messengers/Messengers.tsx
import React from "react";
import "./Messengers.css";
import SectionHeader from "../../layouts/SectionHeader";
import { MdInfoOutline } from "react-icons/md";
import CButton from "../../components/CButton";
const Messengers: React.FC = () => {
return <div>Messengers</div>;
return (
<div className="messengers wrapper">
<SectionHeader to="/home" />
<div className="messengers__content">
<div>
<div className="messengers__content__header">
<h3>Messengers</h3>
<MdInfoOutline className="messengers__content__header__icon" />
</div>
<p className="messengers__content__empty">No data</p>
</div>
<div className="messengers__filter">
<p className="messengers__filter__title">Select Dates</p>
<div className="messengers__filter__dates">
<div className="messengers__filter__date">
<label htmlFor="from">From</label>
<input type="date" id="from" />
</div>
<div className="messengers__filter__date">
<label htmlFor="to">To</label>
<input type="date" id="to" />
</div>
</div>
<CButton title="Search" />
</div>
</div>
</div>
);
};
export default Messengers;
src/pages/Recording/Recording.css
.recording {
padding-top: 60px;
}
.recording__content {
min-height: calc(100vh - 75px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.recording__content__header {
display: flex;
align-items: center;
justify-content: space-between;
}
.recording__content__header__icon {
font-size: 1.5rem;
cursor: pointer;
}
.recording__filter {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.recording__filter__title {
font-weight: bold;
}
.recording__filter__dates {
display: flex;
justify-content: space-between;
align-items: center;
}
.recording__filter__date label {
margin-right: 0.5rem;
font-weight: bold;
}
\ No newline at end of file
src/pages/Recording/Recording.tsx
import React from "react";
import "./Recording.css";
import SectionHeader from "../../layouts/SectionHeader";
import { MdInfoOutline } from "react-icons/md";
import CButton from "../../components/CButton";
const Recording: React.FC = () => {
return <div>Recording</div>;
return (
<div className="recording wrapper">
<SectionHeader to="/home" />
<div className="recording__content">
<div>
<div className="recording__content__header">
<h3>Recording</h3>
<MdInfoOutline className="recording__content__header__icon" />
</div>
<p className="recording__content__empty">No data</p>
</div>
<div className="recording__filter">
<p className="recording__filter__title">Select Dates</p>
<div className="recording__filter__dates">
<div className="recording__filter__date">
<label htmlFor="from">From</label>
<input type="date" id="from" />
</div>
<div className="recording__filter__date">
<label htmlFor="to">To</label>
<input type="date" id="to" />
</div>
</div>
<CButton title="Search" />
</div>
</div>
</div>
);
};
export default Recording;
src/pages/Routes/Routes.css
.routes {
padding-top: 60px;
}
.routes__content {
min-height: calc(100vh - 75px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.routes__content__header {
display: flex;
align-items: center;
justify-content: space-between;
}
.routes__content__header__icon {
font-size: 1.5rem;
cursor: pointer;
}
.routes__filter {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.routes__filter__title {
font-weight: bold;
}
.routes__filter__dates {
display: flex;
justify-content: space-between;
align-items: center;
}
.routes__filter__date label {
margin-right: 0.5rem;
font-weight: bold;
}
\ No newline at end of file
src/pages/Routes/Routes.tsx
import React from "react";
import "./Routes.css";
import SectionHeader from "../../layouts/SectionHeader";
import CButton from "../../components/CButton";
import { MdInfoOutline } from "react-icons/md";
const Routes: React.FC = () => {
return <div>Routes</div>;
return (
<div className="routes wrapper">
<SectionHeader to="/home" />
<div className="routes__content">
<div>
<div className="routes__content__header">
<h3>Routes</h3>
<MdInfoOutline className="routes__content__header__icon" />
</div>
<p className="routes__content__empty">No data</p>
</div>
<div className="routes__filter">
<p className="routes__filter__title">Select Dates</p>
<div className="routes__filter__dates">
<div className="routes__filter__date">
<label htmlFor="from">From</label>
<input type="date" id="from" />
</div>
<div className="routes__filter__date">
<label htmlFor="to">To</label>
<input type="date" id="to" />
</div>
</div>
<CButton title="Search" />
</div>
</div>
</div>
);
};
export default Routes;
src/stores/slices/appsSlice.ts
......@@ -36,8 +36,6 @@ export const fetchAppList = createAsyncThunk(
wIcons: true,
});
console.log("All Apps Response: ", response.list);
return response.list;
} catch (error) {
if (typeof error === "object" && error !== null && "message" in error) {
......
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