(0);
+
+ return (
+
+
+
+
+
+ handleRequestSort(x)}
+ rowCount={rows.length}
+ />
+
+ {visibleRows.map((row, index) => {
+ const labelId = `enhanced-table-checkbox-${index}`;
+
+ return (
+
+
+ {row.description}
+ }
+ sx={{ fontSize: "20px" }}
+ placement="bottom-start"
+ >
+ {row.description}
+
+
+
+ {row.sender}
+ }
+ sx={{ fontSize: "20px" }}
+ placement="bottom-start"
+ >
+ {row.sender}
+
+
+
+ {row.receiver}
+ }
+ sx={{ fontSize: "20px" }}
+ placement="bottom-start"
+ >
+ {row.receiver}
+
+
+
+
+ {row.coreValue}
+ }
+ sx={{ fontSize: "20px" }}
+ placement="bottom-start"
+ >
+ {row.coreValue}
+
+
+
+
+ {row.rewardPoints}
+ }
+ sx={{ fontSize: "20px" }}
+ placement="bottom-start"
+ >
+ {row.rewardPoints}
+
+
+
+
+ {row.reportedBy}
+ }
+ sx={{ fontSize: "20px" }}
+ placement="bottom-start"
+ >
+ {row.reportedBy}
+
+
+
+
+ {row.reportingComment}
+ }
+ sx={{ fontSize: "20px" }}
+ placement="bottom-start"
+ >
+ {row.reportingComment}
+
+
+
+
+ {row.reportedAt == undefined
+ ? row.reportedAt
+ : new Date(row.reportedAt).toLocaleString()}
+ }
+ sx={{ fontSize: "20px" }}
+ placement="bottom-start"
+ >
+ {row.reportedAt == undefined
+ ? row.reportedAt
+ : new Date(row.reportedAt).toLocaleString()}
+
+
+
+
+ {" "}
+ {row.moderatedBy}
+ }
+ sx={{ fontSize: "20px" }}
+ placement="bottom-start"
+ >
+ {row.moderatedBy}
+
+
+
+
+ {row.moderatorComment}
+ }
+ sx={{ fontSize: "20px" }}
+ placement="bottom-start"
+ >
+ {row.moderatorComment}
+
+
+
+ {row.status}
+ {row.status === "reported" ? (
+
+ handleClickOpenDelete(row.id)}
+ >
+
+
+
+ ) : (
+ <>
+
+
+ )}
+ {row.status === "reported" ? (
+
+ handleClickOpenResolve(row.id)}
+ >
+
+
+
+ ) : (
+ <>
+
+
+ )}
+
+ );
+ })}
+ {emptyRows > 0 && (
+
+
+
+ )}
+
+
+
+ handleChangePage(newPage)}
+ onRowsPerPageChange={handleChangeRowsPerPage}
+ />
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/appreciations/components/resolveDialogueBox.tsx b/src/appreciations/components/resolveDialogueBox.tsx
new file mode 100644
index 0000000..3b35001
--- /dev/null
+++ b/src/appreciations/components/resolveDialogueBox.tsx
@@ -0,0 +1,80 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import TextField from '@mui/material/TextField';
+import { useResolveAppreciationMutation } from '../apiSlice';
+import { moderationReq } from '../types';
+import { toast } from 'react-toastify';
+import { RootState } from '../../store';
+import { useSelector } from 'react-redux';
+
+interface IProps {
+ open: boolean;
+ setOpen: (value: boolean | ((prevVar: boolean) => boolean)) => void;
+ id: number;
+}
+export default function ResolveDialog(props: IProps) {
+
+ const authToken = useSelector((state: RootState) => state.loginStore.authToken);
+
+ const handleClose = () => {
+ props.setOpen(false);
+ };
+
+ const [resolveAppreciation] = useResolveAppreciationMutation();
+
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/appreciations/index.tsx b/src/appreciations/index.tsx
new file mode 100644
index 0000000..4ccf542
--- /dev/null
+++ b/src/appreciations/index.tsx
@@ -0,0 +1,116 @@
+import {
+ useGetAppreciationsQuery,
+ useGetReportedAppreciationsQuery,
+} from "./apiSlice";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../store";
+import { useNavigate } from "react-router-dom";
+import PermanentDrawerLeft from "../permanentSidebar";
+import * as React from "react";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Box from "@mui/material/Box";
+import "./appreciations.css"
+import AppreciationTable from "./components/appreciationTable";
+import ReportedAppreciationTable from "./components/reportedAppreciationTable";
+
+interface TabPanelProps {
+ children?: React.ReactNode;
+ index: number;
+ value: number;
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && {children}}
+
+ );
+}
+
+function a11yProps(index: number) {
+ return {
+ id: `simple-tab-${index}`,
+ "aria-controls": `simple-tabpanel-${index}`,
+ };
+}
+
+export function AppTabs() {
+ const [value, setValue] = useState(0);
+
+ const handleChange = (newValue: number) => {
+ setValue(newValue);
+ };
+
+ const navigate = useNavigate();
+ const authToken = useSelector(
+ (state: RootState) => state.loginStore.authToken
+ );
+ const { data: appreciations, isError: listAppreciationsError } =
+ useGetAppreciationsQuery({
+ page: 1,
+ page_size: 1000,
+ authToken: authToken,
+ });
+ const {
+ data: reportedAppreciations,
+ isError: listReportedAppreciationsError,
+ } = useGetReportedAppreciationsQuery({ authToken: authToken });
+
+ useEffect(() => {
+ console.log("authtoken -> ", authToken);
+ if (authToken === "") {
+ navigate("/login");
+ } else {
+ navigate("/appreciations");
+ }
+ }, [authToken]);
+
+ return (
+
+
+ handleChange(number)}
+ aria-label="basic tabs example"
+ >
+
+
+
+
+
+ {listAppreciationsError || listReportedAppreciationsError ? (
+ Error
+ ) : (
+
+ )}
+
+
+ {!listReportedAppreciationsError ? (
+
+ ) : (
+ <>
+ )}
+
+
+ );
+}
+
+const Appreciations = () => {
+ return } />;
+};
+
+export default Appreciations;
\ No newline at end of file
diff --git a/src/appreciations/types.tsx b/src/appreciations/types.tsx
new file mode 100644
index 0000000..82873ef
--- /dev/null
+++ b/src/appreciations/types.tsx
@@ -0,0 +1,72 @@
+
+export interface appreciation {
+ id: number;
+ core_value_name: string;
+ core_value_description: string;
+ description: string;
+ total_reward_points: number;
+ quarter: number;
+ sender_first_name: string;
+ sender_last_name: string;
+ sender_image_url: string;
+ sender_designation: string;
+ receiver_first_name:string;
+ receiver_last_name: string;
+ receiver_image_url: string;
+ receiver_designation: string;
+ total_rewards: number;
+ given_reward_point: number;
+ created_at: number;
+ updated_at: number;
+ is_valid: boolean;
+ reported_by_first_name: string | undefined ;
+ reported_by_last_name: string | undefined;
+ reporting_comment: string;
+ reported_at: number;
+ moderated_by_first_name: string;
+ moderated_by_last_name: string;
+ moderator_comment: string;
+ moderated_at: number;
+ status: string;
+ }
+
+ interface metadata{
+ page: number;
+ total_page: number;
+ page_size: number;
+ total_records: number;
+ }
+
+ interface data{
+ appreciations: appreciation[]
+ metadata: metadata
+ }
+
+ export interface response {
+ success: boolean;
+ message: string;
+ status_code: number;
+ data: data;
+ }
+
+ export interface IPropsTable {
+ response: appreciation[] | undefined
+ }
+
+ export interface IPropsButtons{
+ setFilter: (value: string | ((prevVar: string) => string)) => void;
+ setPage: (value: number | ((prevVar: number) => number)) => void;
+ }
+
+ export interface moderationReq{
+ moderator_comment: string
+ id: number
+ authToken: string
+ }
+
+ export interface moderationResponse {
+ success: boolean;
+ message: string;
+ status_code: number;
+ data: object;
+ }
diff --git a/src/assets/loginImage.webp b/src/assets/loginImage.webp
new file mode 100644
index 0000000..2c3228c
Binary files /dev/null and b/src/assets/loginImage.webp differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..51e3923
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/assets/react.svg b/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/badges/apiSlice.tsx b/src/badges/apiSlice.tsx
new file mode 100644
index 0000000..1c6069c
--- /dev/null
+++ b/src/badges/apiSlice.tsx
@@ -0,0 +1,41 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { badgesResponse, editBadgeReq, editBadgeResp } from "./types";
+
+export const badgesSlice = createApi({
+ reducerPath: "badgesSlice",
+ baseQuery: fetchBaseQuery({
+ baseUrl: import.meta.env.VITE_BASE_URL,
+ }),
+ tagTypes: ["badges"],
+ endpoints: (builder) => ({
+ getBadges: builder.query({
+ query: ({ authToken }) => ({
+ url: "/badges",
+ method: "GET",
+ headers: {
+ "Accept-Version": "application/vnd.peerly.v1",
+ Authorization: `Bearer ${authToken}`,
+ },
+ }),
+ providesTags: ["badges"],
+ }),
+ editBadge: builder.mutation>({
+ query: (payload) => ({
+ url: `/badges/${payload.id}`,
+ method: "PATCH",
+ body: { reward_points: payload.reward_points},
+ headers: {
+ "Content-type": "application/json; charset=UTF-8",
+ "Accept-Version": "application/vnd.peerly.v1",
+ Authorization: `Bearer ${payload.authToken}`,
+ },
+ }),
+ invalidatesTags: () => [{ type: "badges" }],
+ }),
+ }),
+});
+
+export const {
+ useGetBadgesQuery,
+ useEditBadgeMutation
+} = badgesSlice;
\ No newline at end of file
diff --git a/src/badges/components/dialogueBox.tsx b/src/badges/components/dialogueBox.tsx
new file mode 100644
index 0000000..c7379bb
--- /dev/null
+++ b/src/badges/components/dialogueBox.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import TextField from '@mui/material/TextField';
+import { toast } from 'react-toastify';
+import { RootState } from '../../store';
+import { useSelector } from 'react-redux';
+import { useEditBadgeMutation } from '../apiSlice';
+import { editBadgeReq } from '../types';
+
+interface IProps {
+ open: boolean;
+ setOpen: (value: boolean | ((prevVar: boolean) => boolean)) => void;
+ id: number;
+}
+export default function EditBadgeDialog(props: IProps) {
+
+ const authToken = useSelector((state: RootState) => state.loginStore.authToken);
+
+ const handleClose = () => {
+ props.setOpen(false);
+ };
+
+ const [editBadge] = useEditBadgeMutation();
+
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/badges/components/table.tsx b/src/badges/components/table.tsx
new file mode 100644
index 0000000..6ae9f45
--- /dev/null
+++ b/src/badges/components/table.tsx
@@ -0,0 +1,77 @@
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+import { useEffect, useState } from "react";
+import BorderColorIcon from "@mui/icons-material/BorderColor";
+import { badge } from "../types";
+
+function createData(id: number, name: string, reward_points: number, updated_by: string) {
+ return { id, name, reward_points, updated_by };
+}
+
+interface IProps {
+ badgeList: badge[] | undefined;
+ setOpen: (value: boolean | ((prevVar: boolean) => boolean)) => void;
+ id: number;
+ setId: (value: number | ((prevVar: number) => number)) => void;
+}
+
+export default function BadgesTable(props: IProps) {
+ const handleClickOpen = (id: number) => {
+ props.setId(id);
+ props.setOpen(true);
+ };
+ const [rows, setRows] = useState([]);
+ useEffect(() => {
+ setRows([]);
+ props.badgeList?.map((badge) => {
+ setRows((prevData) => [
+ ...prevData,
+ createData(badge.id, badge.name, badge.reward_points, badge.updated_by),
+ ]);
+ });
+ }, [props.badgeList]);
+ return (
+
+
+
+
+ Sr No
+ Badge
+ Reward Points
+ Updated By
+
+
+
+
+ {rows.map((row) => (
+
+
+ {row.id}
+
+ {row.name}
+ {row.reward_points}
+ {row.updated_by}
+ {
+ handleClickOpen(row.id);
+ }}
+ sx={{cursor:"pointer"}}
+ >
+
+
+
+ ))}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/badges/index.tsx b/src/badges/index.tsx
new file mode 100644
index 0000000..0d91515
--- /dev/null
+++ b/src/badges/index.tsx
@@ -0,0 +1,43 @@
+import { Box, Typography } from "@mui/material";
+import { useSelector } from "react-redux";
+import { RootState } from "../store";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useGetBadgesQuery } from "./apiSlice";
+import BadgesTable from "./components/table";
+import EditBadgeDialog from "./components/dialogueBox";
+import PermanentDrawerLeft from "../permanentSidebar";
+
+const BadgesComponent = () => {
+ const navigate = useNavigate()
+ const authToken = useSelector((state: RootState) => state.loginStore.authToken);
+ const {data: badgesResp, isError: listBadgesError} = useGetBadgesQuery({
+ authToken: authToken
+ });
+ const [open, setOpen] = useState(false);
+ const [id,setId] = useState(0);
+ useEffect(()=>{
+ console.log("authtoken -> ",authToken)
+ if(authToken === ""){
+ navigate("/login")
+ }else{
+ navigate("/badges")
+ }
+ },[authToken])
+ return (
+
+ Badges
+ {!listBadgesError ? : <>}
+
+
+
+ );
+};
+
+const Badges = () => {
+ return(
+ } />
+ )
+}
+
+export default Badges;
\ No newline at end of file
diff --git a/src/badges/types.tsx b/src/badges/types.tsx
new file mode 100644
index 0000000..1803bd1
--- /dev/null
+++ b/src/badges/types.tsx
@@ -0,0 +1,25 @@
+export interface badge {
+ id: number;
+ name: string;
+ reward_points: number;
+ updated_by: string;
+}
+
+export interface badgesResponse {
+ success: boolean;
+ message: string;
+ status_code: number;
+ data: badge[];
+}
+
+export interface editBadgeReq {
+ id: number;
+ reward_points: number;
+ authToken: string;
+}
+
+export interface editBadgeResp {
+ success: string;
+ message: string;
+ status_code: number;
+}
diff --git a/src/config/apiSlice.tsx b/src/config/apiSlice.tsx
new file mode 100644
index 0000000..3ea9a42
--- /dev/null
+++ b/src/config/apiSlice.tsx
@@ -0,0 +1,67 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { editGradeReq, editGradeResp, editRenewalFrequencyReq, editRenewalFrequencyResp, gradesResponse, orgConfigResponse } from "./types";
+
+export const configSlice = createApi({
+ reducerPath: "configSlice",
+ baseQuery: fetchBaseQuery({
+ baseUrl: import.meta.env.VITE_BASE_URL,
+ }),
+ tagTypes: ["gradesConfig","orgConfig"],
+ endpoints: (builder) => ({
+ getGrades: builder.query({
+ query: ({ authToken }) => ({
+ url: "/grades",
+ method: "GET",
+ headers: {
+ "Accept-Version": "application/vnd.peerly.v1",
+ Authorization: `Bearer ${authToken}`,
+ },
+ }),
+ providesTags: ["gradesConfig"],
+ }),
+ getOrgConfig: builder.query({
+ query: ({ authToken }) => ({
+ url: "/organizationconfig",
+ method: "GET",
+ headers: {
+ "Accept-Version": "application/vnd.peerly.v1",
+ Authorization: `Bearer ${authToken}`,
+ },
+ }),
+ providesTags: ["orgConfig"],
+ }),
+ editRenewalFrequency: builder.mutation>({
+ query: (payload) => ({
+ url: "/organizationconfig",
+ method: "PUT",
+ body: { reward_quota_renewal_frequency: payload.reward_quota_renewal_frequency},
+ headers: {
+ "Content-type": "application/json; charset=UTF-8",
+ "Accept-Version": "application/vnd.peerly.v1",
+ Authorization: `Bearer ${payload.authToken}`,
+ },
+ }),
+ invalidatesTags: () => [{ type: "orgConfig" }],
+ }),
+ editGrade: builder.mutation>({
+ query: (payload) => ({
+ url: `/grades/${payload.id}`,
+ method: "PATCH",
+ body: { points: payload.points},
+ headers: {
+ "Content-type": "application/json; charset=UTF-8",
+ "Accept-Version": "application/vnd.peerly.v1",
+ Authorization: `Bearer ${payload.authToken}`,
+ },
+ }),
+ invalidatesTags: () => [{ type: "gradesConfig" }],
+ }),
+ }),
+});
+
+export const {
+ useGetGradesQuery,
+ useGetOrgConfigQuery,
+ useEditRenewalFrequencyMutation,
+ useEditGradeMutation
+} = configSlice;
\ No newline at end of file
diff --git a/src/config/components/editGradeDialogue.tsx b/src/config/components/editGradeDialogue.tsx
new file mode 100644
index 0000000..366d2bb
--- /dev/null
+++ b/src/config/components/editGradeDialogue.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import TextField from '@mui/material/TextField';
+import { toast } from 'react-toastify';
+import { RootState } from '../../store';
+import { useSelector } from 'react-redux';
+import { useEditGradeMutation } from '../apiSlice';
+import { editGradeReq } from '../types';
+
+interface IProps {
+ open: boolean;
+ setOpen: (value: boolean | ((prevVar: boolean) => boolean)) => void;
+ id: number;
+}
+export default function EditGradeDialog(props: IProps) {
+
+ const authToken = useSelector((state: RootState) => state.loginStore.authToken);
+
+ const handleClose = () => {
+ props.setOpen(false);
+ };
+
+ const [editGrade] = useEditGradeMutation();
+
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/config/components/editRenewalFreqDialog.tsx b/src/config/components/editRenewalFreqDialog.tsx
new file mode 100644
index 0000000..23696b0
--- /dev/null
+++ b/src/config/components/editRenewalFreqDialog.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import TextField from '@mui/material/TextField';
+import { toast } from 'react-toastify';
+import { RootState } from '../../store';
+import { useSelector } from 'react-redux';
+import { useEditRenewalFrequencyMutation } from '../apiSlice';
+import { editRenewalFrequencyReq } from '../types';
+
+interface IProps {
+ open: boolean;
+ setOpen: (value: boolean | ((prevVar: boolean) => boolean)) => void;
+}
+export default function EditRenewalFreqDialog(props: IProps) {
+
+ const authToken = useSelector((state: RootState) => state.loginStore.authToken);
+
+ const handleClose = () => {
+ props.setOpen(false);
+ };
+
+ const [editRenewalFrequency] = useEditRenewalFrequencyMutation();
+
+
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/config/components/grades.tsx b/src/config/components/grades.tsx
new file mode 100644
index 0000000..c00d6b4
--- /dev/null
+++ b/src/config/components/grades.tsx
@@ -0,0 +1,77 @@
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+import { grade } from "../types";
+import { useEffect, useState } from "react";
+import BorderColorIcon from "@mui/icons-material/BorderColor";
+
+function createData(id: number, name: string, points: number, updated_by: string) {
+ return { id, name, points, updated_by };
+}
+
+interface IProps {
+ gradesList: grade[] | undefined;
+ setOpen: (value: boolean | ((prevVar: boolean) => boolean)) => void;
+ id: number;
+ setId: (value: number | ((prevVar: number) => number)) => void;
+}
+
+export default function GradesTable(props: IProps) {
+ const handleClickOpen = (id: number) => {
+ props.setId(id);
+ props.setOpen(true);
+ };
+ const [rows, setRows] = useState([]);
+ useEffect(() => {
+ setRows([]);
+ props.gradesList?.map((grade) => {
+ setRows((prevData) => [
+ ...prevData,
+ createData(grade.id, grade.name, grade.points, grade.updated_by),
+ ]);
+ });
+ }, [props.gradesList]);
+ return (
+
+
+
+
+ Sr No
+ Grade
+ Points
+ Updated By
+
+
+
+
+ {rows.map((row) => (
+
+
+ {row.id}
+
+ {row.name}
+ {row.points}
+ {row.updated_by}
+ {
+ handleClickOpen(row.id);
+ }}
+ sx={{cursor:"pointer"}}
+ >
+
+
+
+ ))}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/config/components/orgConfig.tsx b/src/config/components/orgConfig.tsx
new file mode 100644
index 0000000..edb7b21
--- /dev/null
+++ b/src/config/components/orgConfig.tsx
@@ -0,0 +1,54 @@
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+import { orgConfig } from "../types";
+import { useEffect, useState } from "react";
+
+function createData(
+ id: number | undefined,
+ reward_quota_renewal_frequency: number | undefined,
+ updated_by: string | undefined
+) {
+ return { id, reward_quota_renewal_frequency, updated_by };
+}
+
+interface IProps {
+ orgConfig: orgConfig | undefined;
+ setOpen: (value: boolean | ((prevVar: boolean) => boolean)) => void;
+}
+
+export default function OrgConfigTable(props: IProps) {
+ const [row, setRow] = useState();
+ useEffect(() => {
+ setRow(
+ createData(
+ props.orgConfig?.id,
+ props.orgConfig?.reward_quota_renewal_frequency,
+ props.orgConfig?.updated_by,
+ )
+ );
+ }, [props.orgConfig]);
+ return (
+
+
+
+
+
+ Reward quota renewal frequency
+
+
+ {row != undefined &&
+ row.reward_quota_renewal_frequency != undefined &&
+ row?.reward_quota_renewal_frequency <= 1
+ ? `${row?.reward_quota_renewal_frequency} month`
+ : `${row?.reward_quota_renewal_frequency} months`}
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/config/components/quater.tsx b/src/config/components/quater.tsx
new file mode 100644
index 0000000..739c980
--- /dev/null
+++ b/src/config/components/quater.tsx
@@ -0,0 +1,53 @@
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+
+function createData(
+ quaterNo: number,
+ startDate: Date,
+ endDate: Date,
+) {
+ return { quaterNo, startDate, endDate};
+}
+
+const rows = [
+ createData(1,new Date(new Date().getFullYear(), 3, 1),new Date(new Date().getFullYear(), 5, 30)),
+ createData(2,new Date(new Date().getFullYear(), 6, 1),new Date(new Date().getFullYear(), 8, 31)),
+ createData(3,new Date(new Date().getFullYear(), 9, 1),new Date(new Date().getFullYear(), 11, 31)),
+ createData(4,new Date(new Date().getFullYear(), 0, 1),new Date(new Date().getFullYear(), 2, 31)),
+];
+
+export default function QuaterTable() {
+ // console.log("Base url -> ", process.env )
+ return (
+
+
+
+
+ Quarter No
+ Start Date
+ End Date
+
+
+
+ {rows.map((row) => (
+
+
+ {row.quaterNo}
+
+ {row.startDate.toLocaleDateString()}
+ {row.endDate.toLocaleDateString()}
+
+ ))}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/config/index.tsx b/src/config/index.tsx
new file mode 100644
index 0000000..34d4583
--- /dev/null
+++ b/src/config/index.tsx
@@ -0,0 +1,131 @@
+import QuaterTable from "./components/quater";
+import { useGetGradesQuery, useGetOrgConfigQuery } from "./apiSlice";
+import { useSelector } from "react-redux";
+import { RootState } from "../store";
+import GradesTable from "./components/grades";
+import OrgConfigTable from "./components/orgConfig";
+import EditRenewalFreqDialog from "./components/editRenewalFreqDialog";
+import { useEffect, useState } from "react";
+import EditGradeDialog from "./components/editGradeDialogue";
+import { useNavigate } from "react-router-dom";
+import PermanentDrawerLeft from "../permanentSidebar";
+import * as React from "react";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Box from "@mui/material/Box";
+
+interface TabPanelProps {
+ children?: React.ReactNode;
+ index: number;
+ value: number;
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && {children}}
+
+ );
+}
+
+function a11yProps(index: number) {
+ return {
+ id: `simple-tab-${index}`,
+ "aria-controls": `simple-tabpanel-${index}`,
+ };
+}
+
+export function ConfigTabs() {
+ const [value, setValue] = useState(0);
+
+ const handleChange = (newValue: number) => {
+ setValue(newValue);
+ };
+
+ const navigate = useNavigate();
+ const authToken = useSelector(
+ (state: RootState) => state.loginStore.authToken
+ );
+ const { data: gradesResp, isError: listGradesError } = useGetGradesQuery({
+ authToken: authToken,
+ });
+ const { data: orgConfigResp, isError: getOrgConfigError } =
+ useGetOrgConfigQuery({
+ authToken: authToken,
+ });
+ const [openEditFrequency, setOpenEditFrequency] = useState(false);
+ const [openEditGrade, setOpenEditGrade] = useState(false);
+ const [id, setId] = useState(0);
+ useEffect(() => {
+ console.log("authtoken -> ", authToken);
+ if (authToken === "") {
+ navigate("/login");
+ } else {
+ navigate("/config");
+ }
+ }, [authToken]);
+
+ return (
+
+
+ handleChange(newValue)}
+ aria-label="basic tabs example"
+ >
+
+
+
+
+
+
+
+
+
+ {!listGradesError ? (
+
+ ) : (
+ <>
+ )}
+
+
+ {!getOrgConfigError ? (
+
+ ) : (
+ <>
+ )}
+
+
+
+
+ );
+}
+
+const Config = () => {
+ return } />;
+};
+
+export default Config;
diff --git a/src/config/types.tsx b/src/config/types.tsx
new file mode 100644
index 0000000..5734606
--- /dev/null
+++ b/src/config/types.tsx
@@ -0,0 +1,50 @@
+export interface grade {
+ id: number;
+ name: string;
+ points: number;
+ updated_by: string;
+}
+
+export interface gradesResponse {
+ success: boolean;
+ message: string;
+ status_code: number;
+ data: grade[];
+}
+
+export interface orgConfig {
+ id: number | undefined;
+ reward_quota_renewal_frequency: number | undefined;
+ updated_by : string |undefined;
+}
+
+export interface orgConfigResponse {
+ success: boolean;
+ message: string;
+ status_code: number;
+ data: orgConfig;
+}
+
+export interface editRenewalFrequencyReq {
+ reward_quota_renewal_frequency: number;
+ authToken: string;
+}
+
+export interface editRenewalFrequencyResp {
+ success: string;
+ message: string;
+ status_code: number;
+ data: orgConfig;
+}
+
+export interface editGradeReq {
+ id: number;
+ points: number;
+ authToken: string;
+}
+
+export interface editGradeResp {
+ success: string;
+ message: string;
+ status_code: number;
+}
\ No newline at end of file
diff --git a/src/coreValues/apiSlice.tsx b/src/coreValues/apiSlice.tsx
new file mode 100644
index 0000000..6c2ad9c
--- /dev/null
+++ b/src/coreValues/apiSlice.tsx
@@ -0,0 +1,27 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { coreValuesResp } from "./types";
+
+export const coreValueSlice = createApi({
+ reducerPath: "coreValueSlice",
+ baseQuery: fetchBaseQuery({
+ baseUrl: import.meta.env.VITE_BASE_URL,
+ }),
+ tagTypes: ["coreValues"],
+ endpoints: (builder) => ({
+ getCoreValues: builder.query({
+ query: ({ authToken }) => ({
+ url: "/core_values",
+ method: "GET",
+ headers: {
+ "Accept-Version": "application/vnd.peerly.v1",
+ Authorization: `Bearer ${authToken}`,
+ },
+ }),
+ providesTags: ["coreValues"],
+ }),
+ }),
+});
+
+export const {
+ useGetCoreValuesQuery
+} = coreValueSlice;
\ No newline at end of file
diff --git a/src/coreValues/components/table.tsx b/src/coreValues/components/table.tsx
new file mode 100644
index 0000000..921bcf7
--- /dev/null
+++ b/src/coreValues/components/table.tsx
@@ -0,0 +1,58 @@
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+import { useEffect, useState } from "react";
+import { coreValue } from "../types";
+
+function createData(id: number, name: string, description: string, parent_id: number) {
+ return { id, name, description, parent_id };
+}
+
+interface IProps {
+ coreValueList: coreValue[] | undefined;
+}
+
+export default function CoreValuesTable(props: IProps) {
+ const [rows, setRows] = useState([]);
+ useEffect(() => {
+ console.log("corevaluelist -> ",props.coreValueList)
+ setRows([]);
+ props.coreValueList?.map((coreValue) => {
+ setRows((prevData) => [
+ ...prevData,
+ createData(coreValue.id, coreValue.name, coreValue.description, coreValue.parent_id),
+ ]);
+ });
+ }, [props.coreValueList]);
+ return (
+
+
+
+
+ Sr No
+ CoreValue
+ Description
+
+
+
+ {rows.map((row) => (
+
+
+ {row.id}
+
+ {row.name}
+ {row.description}
+
+ ))}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/coreValues/index.tsx b/src/coreValues/index.tsx
new file mode 100644
index 0000000..c3dfe33
--- /dev/null
+++ b/src/coreValues/index.tsx
@@ -0,0 +1,38 @@
+import { Box, Typography } from "@mui/material";
+import { useSelector } from "react-redux";
+import { RootState } from "../store";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import PermanentDrawerLeft from "../permanentSidebar";
+import CoreValuesTable from "./components/table";
+import { useGetCoreValuesQuery } from "./apiSlice";
+
+const CoreValuesComponent = () => {
+ const navigate = useNavigate()
+ const authToken = useSelector((state: RootState) => state.loginStore.authToken);
+ const {data: coreValueResp, isError: listCoreValuesError} = useGetCoreValuesQuery({
+ authToken: authToken
+ });
+ useEffect(()=>{
+ console.log("authtoken -> ",authToken)
+ if(authToken === ""){
+ navigate("/login")
+ }else{
+ navigate("/core_values")
+ }
+ },[authToken])
+ return (
+
+ Core Values
+ {!listCoreValuesError ? : <>}
+
+ );
+};
+
+const CoreValues = () => {
+ return(
+ } />
+ )
+}
+
+export default CoreValues;
\ No newline at end of file
diff --git a/src/coreValues/types.tsx b/src/coreValues/types.tsx
new file mode 100644
index 0000000..78954f5
--- /dev/null
+++ b/src/coreValues/types.tsx
@@ -0,0 +1,13 @@
+export interface coreValue {
+ id: number;
+ name: string;
+ description: string;
+ parent_id: number;
+ }
+
+ export interface coreValuesResp {
+ success: boolean;
+ message: string;
+ status_code: number;
+ data: coreValue[];
+ }
\ No newline at end of file
diff --git a/src/header/index.tsx b/src/header/index.tsx
new file mode 100644
index 0000000..c172cd3
--- /dev/null
+++ b/src/header/index.tsx
@@ -0,0 +1,42 @@
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import Button from "@mui/material/Button";
+import peerlyLogo from "../assets/logo.png";
+import { useNavigate } from "react-router-dom";
+
+export default function Header() {
+ const navigate = useNavigate();
+ const logout = () => {
+ localStorage.removeItem("token");
+ navigate("/login");
+ };
+ return (
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/home/apiSlice.tsx b/src/home/apiSlice.tsx
new file mode 100644
index 0000000..cf54368
--- /dev/null
+++ b/src/home/apiSlice.tsx
@@ -0,0 +1,63 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { listUsersResp, sendNotificationReq, sendNotificationResponse } from "./types";
+
+export const homeSlice = createApi({
+ reducerPath: "homeSlice",
+ baseQuery: fetchBaseQuery({
+ baseUrl: import.meta.env.VITE_BASE_URL,
+ }),
+ tagTypes: ["downloadReport", "users"],
+ endpoints: (builder) => ({
+ // downloadReport: builder.query({
+ // query: ({ authToken }) => ({
+ // url: "/admin/appreciation_report",
+ // method: "GET",
+ // headers: {
+ // Authorization: `Bearer ${authToken}`,
+ // },
+ // responseHandler: (response) => response.arrayBuffer(),
+ // }),
+ // }),
+
+ getUsers: builder.query({
+ query: ({ page, page_size, authToken }) => ({
+ url: `/users?page=${page}&page_size=${page_size}`,
+ method: "GET",
+ headers: {
+ "Accept-Version": "application/vnd.peerly.v1",
+ Authorization: `Bearer ${authToken}`,
+ },
+ }),
+ providesTags: ["users"],
+ }),
+
+ sendNotification: builder.mutation<
+ sendNotificationResponse,
+ Partial
+ >({
+ query: (payload) => ({
+ url: "/admin/notification",
+ method: "POST",
+ body: {
+ message: {
+ title: payload.message?.title,
+ body: payload.message?.body,
+ },
+ all: payload.all,
+ id: payload.id,
+ },
+ headers: {
+ "Content-type": "application/json; charset=UTF-8",
+ "Accept-Version": "application/vnd.peerly.v1",
+ Authorization: `Bearer ${payload.authToken}`,
+ },
+ }),
+ }),
+ }),
+});
+
+export const {
+ // useDownloadReportQuery,
+ useSendNotificationMutation,
+ useGetUsersQuery
+ } = homeSlice;
\ No newline at end of file
diff --git a/src/home/components/appreciationCountCard.tsx b/src/home/components/appreciationCountCard.tsx
new file mode 100644
index 0000000..76e5c99
--- /dev/null
+++ b/src/home/components/appreciationCountCard.tsx
@@ -0,0 +1,31 @@
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Typography from "@mui/material/Typography";
+
+interface IProps {
+ count: number | undefined;
+}
+
+export default function AppreciationCountCard(props: IProps) {
+ return (
+
+
+
+ {props.count}
+
+
+ Appreciation count for the quater
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/home/components/notifyAllDilogBox.tsx b/src/home/components/notifyAllDilogBox.tsx
new file mode 100644
index 0000000..2da0659
--- /dev/null
+++ b/src/home/components/notifyAllDilogBox.tsx
@@ -0,0 +1,98 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import { useSendNotificationMutation } from '../apiSlice';
+import { sendNotificationReq } from '../types';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../store';
+import { toast } from 'react-toastify';
+
+interface IProps{
+ open: boolean
+ setOpen: (value: boolean | ((prevVar: boolean) => boolean)) => void;
+ }
+
+export default function NotifiyAllDialog(props: IProps) {
+
+ const authToken = useSelector((state: RootState) => state.loginStore.authToken);
+
+ const handleClose = () => {
+ props.setOpen(false);
+ };
+
+ const [sendNotification] = useSendNotificationMutation()
+
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/home/components/notifyUserDialogBox.tsx b/src/home/components/notifyUserDialogBox.tsx
new file mode 100644
index 0000000..f8430b4
--- /dev/null
+++ b/src/home/components/notifyUserDialogBox.tsx
@@ -0,0 +1,139 @@
+import * as React from "react";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import { useGetUsersQuery, useSendNotificationMutation } from "../apiSlice";
+import { sendNotificationReq, userDropdown } from "../types";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store";
+import { toast } from "react-toastify";
+import { Autocomplete } from "@mui/material";
+
+interface IProps {
+ open: boolean;
+ setOpen: (value: boolean | ((prevVar: boolean) => boolean)) => void;
+}
+
+export default function NotifiyUserDialog(props: IProps) {
+ const handleClose = () => {
+ props.setOpen(false);
+ };
+
+ const [sendNotification] = useSendNotificationMutation();
+ const authToken = useSelector(
+ (state: RootState) => state.loginStore.authToken
+ );
+
+ const [selectedUser, setSelectedUser] = React.useState();
+
+
+ const { data } = useGetUsersQuery({
+ page: 1,
+ page_size: 400,
+ authToken: authToken
+ });
+
+ const [users, setUsers] = React.useState([])
+
+
+ React.useEffect(()=>{
+ setUsers([])
+ if (data != undefined){
+ data.data.user_list.map((user)=>{
+ return setUsers((prevData)=>[...prevData,{
+ label: user.first_name + " "+ user.last_name,
+ id: user.id,
+ }])
+ })
+ }
+ console.log(users)
+ },[data])
+
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/home/components/sendNotificationCard.tsx b/src/home/components/sendNotificationCard.tsx
new file mode 100644
index 0000000..18cb017
--- /dev/null
+++ b/src/home/components/sendNotificationCard.tsx
@@ -0,0 +1,51 @@
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import CardActions from "@mui/material/CardActions";
+import CardContent from "@mui/material/CardContent";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+
+interface IProps {
+ setOpenNotifyUser: (value: boolean | ((prevVar: boolean) => boolean)) => void;
+ setOpenNotifyAll: (value: boolean | ((prevVar: boolean) => boolean)) => void;
+}
+
+export default function NotificationCard(props: IProps) {
+ const handleClickOpenNotifyAll = () => {
+ props.setOpenNotifyAll(true);
+ };
+
+ const handleClickOpenNotifyUser = () => {
+ props.setOpenNotifyUser(true);
+ };
+
+ return (
+
+
+
+ Send a notification
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/home/index.tsx b/src/home/index.tsx
new file mode 100644
index 0000000..87178d8
--- /dev/null
+++ b/src/home/index.tsx
@@ -0,0 +1,66 @@
+import { useSelector } from "react-redux";
+import { useGetAppreciationsQuery } from "../appreciations/apiSlice";
+import PermanentDrawerLeft from "../permanentSidebar";
+import AppreciationCountCard from "./components/appreciationCountCard";
+import { RootState } from "../store";
+import NotificationCard from "./components/sendNotificationCard";
+// import DownloadExcelCard from "./components/downloadExcel";
+import { useEffect, useState } from "react";
+import NotifiyAllDialog from "./components/notifyAllDilogBox";
+import NotifiyUserDialog from "./components/notifyUserDialogBox";
+import { Box } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+
+const HomeComponent = () => {
+ const [openNotifyAll, setOpenNotifyAll] = useState(false);
+ const [openNotifyUser, setOpenNotifyUser] = useState(false);
+
+ const authToken = useSelector(
+ (state: RootState) => state.loginStore.authToken
+ );
+ const { data: appreciations, isError: listAppreciationsError } =
+ useGetAppreciationsQuery({
+ page: 1,
+ page_size: 10,
+ authToken: authToken,
+ });
+ const navigate = useNavigate();
+ useEffect(() => {
+ console.log("authtoken -> ", authToken);
+ if (authToken === "") {
+ navigate("/login");
+ } else {
+ navigate("/");
+ }
+ }, [authToken]);
+ return (
+ <>
+
+ {!listAppreciationsError ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ );
+};
+
+const Home = () => {
+ return } />;
+};
+
+export default Home;
\ No newline at end of file
diff --git a/src/home/types.tsx b/src/home/types.tsx
new file mode 100644
index 0000000..0c57c11
--- /dev/null
+++ b/src/home/types.tsx
@@ -0,0 +1,60 @@
+export interface downloadReportResponse {
+ success: boolean;
+ message: string;
+ status_code: number;
+ data: object;
+}
+
+export interface downloadReportReq {
+ authToken: string;
+}
+
+export interface sendNotificationResponse {
+ success: boolean;
+ message: string;
+ status_code: number;
+ data: object;
+}
+
+export interface message {
+ title: string;
+ body: string;
+}
+
+export interface sendNotificationReq {
+ message: message;
+ all: boolean;
+ id: number | undefined;
+ authToken: string;
+}
+
+export interface user {
+ id: number;
+ email: string;
+ first_name: string;
+ last_name: string;
+}
+
+export interface metadata {
+ page: number;
+ total_page: number;
+ page_size: number;
+ total_records: number;
+}
+
+export interface data{
+ user_list: user[];
+ metadata: metadata
+}
+
+export interface listUsersResp {
+ success: boolean;
+ message: string;
+ status_code: number;
+ data: data;
+}
+
+export interface userDropdown {
+ label: string;
+ id: number;
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/login/apiSlice.tsx b/src/login/apiSlice.tsx
new file mode 100644
index 0000000..eef1ca9
--- /dev/null
+++ b/src/login/apiSlice.tsx
@@ -0,0 +1,26 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { userLoginBody, userLoginResp } from "./types";
+
+export const loginApiSlice = createApi({
+ reducerPath: "loginSlice",
+ baseQuery: fetchBaseQuery({
+ baseUrl: import.meta.env.VITE_BASE_URL,
+ }),
+ tagTypes: ["Login"],
+ endpoints: (builder) => ({
+ adminLogin: builder.mutation>({
+ query: (payload) => ({
+ url: "/admin/login",
+ method: "POST",
+ body: payload,
+ headers: {
+ "Content-type": "application/json; charset=UTF-8",
+ "Accept-Version": "application/vnd.peerly.v1",
+ },
+ }),
+ invalidatesTags: ["Login"],
+ }),
+ }),
+});
+
+export const { useAdminLoginMutation } = loginApiSlice;
diff --git a/src/login/components/loginForm.tsx b/src/login/components/loginForm.tsx
new file mode 100644
index 0000000..08fa8cc
--- /dev/null
+++ b/src/login/components/loginForm.tsx
@@ -0,0 +1,90 @@
+import { Button, TextField } from "@mui/material";
+import { userLoginBody } from "../types";
+import * as Yup from "yup";
+import { useFormik } from "formik";
+import { useAdminLoginMutation } from "../apiSlice";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { useDispatch } from "react-redux";
+import { getAuthToken } from "../slice";
+
+const LoginForm = () => {
+ const navigate = useNavigate();
+ const initialValues: userLoginBody = {
+ email: "",
+ password: "",
+ };
+ const loginSchema = Yup.object().shape({
+ email: Yup.string().email("Invalid Email!").required("Required!"),
+ password: Yup.string().required("Required!"),
+ });
+ const [loginAdmin] = useAdminLoginMutation();
+ const dispatch = useDispatch();
+ const formik = useFormik({
+ initialValues: initialValues,
+ validationSchema: loginSchema,
+ onSubmit: (values) => {
+ loginAdmin(values)
+ .unwrap()
+ .then((resp) => {
+ console.log("response -> ", resp);
+ toast.success(resp.message);
+ localStorage.setItem("token", resp.data.AuthToken);
+ dispatch(getAuthToken(resp.data.AuthToken));
+ navigate("/");
+ })
+ .catch((resp) => {
+ console.log("response -> ", resp);
+ toast.error(resp.data.message);
+ });
+ },
+ });
+ return (
+
+ );
+};
+
+export default LoginForm;
\ No newline at end of file
diff --git a/src/login/index.tsx b/src/login/index.tsx
new file mode 100644
index 0000000..3d667df
--- /dev/null
+++ b/src/login/index.tsx
@@ -0,0 +1,25 @@
+import { Box, Divider } from "@mui/material";
+import loginImage from "../assets/loginImage.webp";
+import LoginForm from "./components/loginForm";
+
+const Login = () => {
+ return (
+
+ 
+
+
+
+ );
+};
+
+export default Login;
\ No newline at end of file
diff --git a/src/login/slice.tsx b/src/login/slice.tsx
new file mode 100644
index 0000000..97cdaf2
--- /dev/null
+++ b/src/login/slice.tsx
@@ -0,0 +1,23 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export interface TheStoreState {
+ authToken: string;
+}
+
+const initialStateValue: TheStoreState = {
+ authToken: "",
+};
+
+export const loginSlice = createSlice({
+ name: "loginStore",
+ initialState: initialStateValue,
+ reducers: {
+ getAuthToken: (state, action: PayloadAction) => {
+ state.authToken = action.payload;
+ },
+ },
+});
+
+export const { getAuthToken } = loginSlice.actions;
+
+export default loginSlice.reducer;
diff --git a/src/login/types.tsx b/src/login/types.tsx
new file mode 100644
index 0000000..2399d90
--- /dev/null
+++ b/src/login/types.tsx
@@ -0,0 +1,31 @@
+interface data {
+ User: user;
+ AuthToken: string;
+ NewUserCreated: boolean;
+}
+
+interface user {
+ created_at: Int16Array;
+ designation: string;
+ email: string;
+ employee_id: string;
+ first_name: string;
+ grade_id: Int16Array;
+ id: Int16Array;
+ last_name: string;
+ profile_image_url: string;
+ reward_quota_balance: Int16Array;
+ role_id: Int16Array;
+}
+
+export interface userLoginBody {
+ email: string;
+ password: string;
+}
+
+export interface userLoginResp {
+ message: string;
+ status_code: Int16Array;
+ success: boolean;
+ data: data;
+}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..9dcb351
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+import { Provider } from 'react-redux'
+import { store } from './store.tsx'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+
+ ,
+)
diff --git a/src/permanentSidebar/index.tsx b/src/permanentSidebar/index.tsx
new file mode 100644
index 0000000..92efc68
--- /dev/null
+++ b/src/permanentSidebar/index.tsx
@@ -0,0 +1,79 @@
+import Box from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import PostAddIcon from '@mui/icons-material/PostAdd';
+import LocalPoliceIcon from '@mui/icons-material/LocalPolice';
+import DiamondIcon from '@mui/icons-material/Diamond';
+import AssuredWorkloadIcon from '@mui/icons-material/AssuredWorkload';
+import { useDispatch } from "react-redux";
+import { getRoute } from "./slice";
+import { useNavigate } from "react-router-dom";
+import Header from "../header";
+
+const drawerWidth = 200;
+
+interface IProps {
+ component: any
+}
+
+export default function PermanentDrawerLeft(props: IProps) {
+ const iconList = [
+ ,
+ ,
+ ,
+ ,
+ ,
+ ];
+ const routeList = ["/", "/appreciations", "/badges", "/core_values", "/config"];
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+ const setRoute = (index: number) => () => {
+ dispatch(getRoute(routeList[index]));
+ navigate(routeList[index]);
+ };
+ return (
+ <>
+
+
+
+
+ {["Dashboard", "Appreciations", "Badges", "Corevalues", "Config"].map(
+ (text, index) => (
+
+
+ {iconList[index]}
+
+
+
+ )
+ )}
+
+
+
+
+ {props.component}
+
+
+
+ );
+}
diff --git a/src/permanentSidebar/slice.tsx b/src/permanentSidebar/slice.tsx
new file mode 100644
index 0000000..2a91647
--- /dev/null
+++ b/src/permanentSidebar/slice.tsx
@@ -0,0 +1,23 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export interface SidebarStoreState {
+ route: string;
+}
+
+const initialStateValue: SidebarStoreState = {
+ route: "/",
+};
+
+export const sidebarSlice = createSlice({
+ name: "sidebarStore",
+ initialState: initialStateValue,
+ reducers: {
+ getRoute: (state, action: PayloadAction) => {
+ state.route = action.payload;
+ },
+ },
+});
+
+export const { getRoute } = sidebarSlice.actions;
+
+export default sidebarSlice.reducer;
\ No newline at end of file
diff --git a/src/store.tsx b/src/store.tsx
new file mode 100644
index 0000000..6a5ca1e
--- /dev/null
+++ b/src/store.tsx
@@ -0,0 +1,33 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { loginApiSlice } from './login/apiSlice.tsx';
+import loginReducer from './login/slice';
+import sidebarReducer from './permanentSidebar/slice.tsx';
+import { appreciationSlice } from './appreciations/apiSlice';
+import { configSlice } from './config/apiSlice.tsx';
+import { badgesSlice } from './badges/apiSlice.tsx';
+import { coreValueSlice } from './coreValues/apiSlice.tsx';
+import { homeSlice } from './home/apiSlice.tsx';
+
+
+export const store = configureStore({
+
+ reducer: {
+
+ loginStore: loginReducer,
+ sidebarStore: sidebarReducer,
+ [loginApiSlice.reducerPath]: loginApiSlice.reducer,
+ [appreciationSlice.reducerPath]: appreciationSlice.reducer,
+ [configSlice.reducerPath]: configSlice.reducer,
+ [badgesSlice.reducerPath]: badgesSlice.reducer,
+ [coreValueSlice.reducerPath]: coreValueSlice.reducer,
+ [homeSlice.reducerPath]: homeSlice.reducer
+ },
+
+ middleware: (getDefaultMiddleware) =>
+
+ getDefaultMiddleware().concat(loginApiSlice.middleware).concat(appreciationSlice.middleware).concat(configSlice.middleware).concat(badgesSlice.middleware).concat(coreValueSlice.middleware).concat(homeSlice.middleware),
+
+});
+
+export type RootState = ReturnType;
+export type AppDispatch = typeof store.dispatch;
\ No newline at end of file
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..400be45
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,11 @@
+///
+
+interface ImportMetaEnv {
+ readonly VITE_BASE_URL: string;
+ // add other environment variables here
+ }
+
+ interface ImportMeta {
+ readonly env: ImportMetaEnv;
+ }
+
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..d739292
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,27 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..ea9d0cd
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,11 @@
+{
+ "files": [],
+ "references": [
+ {
+ "path": "./tsconfig.app.json"
+ },
+ {
+ "path": "./tsconfig.node.json"
+ }
+ ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..3afdd6e
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,13 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "noEmit": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..17cf56d
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ base: '/peerly-admin/',
+})