1] ondc\Admin-portal-frontend\bpp_admin\src\assets\location_man_green.

svg
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"[Link]

<!-- Uploaded to: SVG Repo, [Link], Transformed by: SVG Repo Mixer
Tools -->
<svg width="96px" height="96px" viewBox="0 0 100 100"
xmlns="[Link] xmlns:xlink="[Link]
aria-hidden="true" role="img" class="iconify iconify--gis"
preserveAspectRatio="xMidYMid meet" fill="#000000">

<g id="SVGRepo_bgCarrier" stroke-width="0"/>

<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

<g id="SVGRepo_iconCarrier">

<path d="M49.798 23.592c-7.834.001-15.596 3.368-14.78 10.096l2 14.624c.351 2.573

2.09 6.688 4.687 6.688h.185l2.127 24.531c.092 1.104.892 2 2 2h8c1.108 0
1.908-.896 2-2L58.144 55h.186c2.597 0 4.335-4.115 4.687-6.688l2-14.624c.524-
6.734-7.384-10.098-15.219-10.096z" fill="#008000"/>

<path d="M50.024 50.908l-.048.126c.016-.038.027-.077.043-.115l.005-.011z"

fill="#008000"/>

<circle cx="50" cy="10.5" r="10.5" fill="#008000"/>

<path d="M60.922 69.092c-.085.972-.175 1.942-.26 2.914C69.614 73.27 76.25 76.138

77 79.686c1.117 5.276-16.142 7.65-27.26 7.539c-11.118-.112-28.059-2.263-26.578-
7.54c.972-3.463 7.512-6.274 16.23-7.583c-.087-.975-.186-1.95-.27-2.924c-11.206
1.236-20.542 4.279-24.272 8.246H2.229L0 82.047h13.166c1.023 5.44 12.427 10.136
28.734 11.322L41.342 100h16.14l-.162-6.63c16.39-1.187 28.117-5.883 29.514-
11.323H100l-1.91-4.623H85.469c-3.543-4.067-13.048-7.16-24.547-8.332z"
fill="#008000"/>

</g>

</svg>

2] ondc\Admin-portal-frontend\bpp_admin\src\assets\location_man_red.svg
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"[Link]

<!-- Uploaded to: SVG Repo, [Link], Transformed by: SVG Repo Mixer
Tools -->
<svg width="64px" height="64px" viewBox="0 0 100 100"
xmlns="[Link] xmlns:xlink="[Link]
aria-hidden="true" role="img" class="iconify iconify--gis"
preserveAspectRatio="xMidYMid meet" fill="#000000">

<g id="SVGRepo_bgCarrier" stroke-width="0"/>

<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

<g id="SVGRepo_iconCarrier">

<path d="M49.781 23.592C41.947 23.593 34.184 26.96 35 33.688l2 14.624C37.352

50.886 39.09 55 41.688 55h.185L44 80.53c.092 1.103.892 2 2 2h8c1.108 0
1.908-.897 2-2L58.127 55h.185c2.597 0 4.336-4.115 4.688-6.688l2-14.624c.523-
6.734-7.384-10.098-15.219-10.096z" fill="#FF0000"/>

<path d="M50.024 50.908l-.048.126c.016-.038.027-.077.043-.115l.005-.011z"

fill="#FF0000"/>
<path d="M34.006 69.057C19.88 71.053 10 75.828 10 82.857C10 92.325 26.508 100 50
100s40-7.675 40-17.143c0-7.029-9.879-11.804-24.004-13.8l-1.957 3.332C74.685
73.866 82 76.97 82 80.572c0 5.05-14.327 9.143-32 9.143c-17.673 0-32-4.093-32-
9.143c-.001-3.59 7.266-6.691 17.945-8.174c-.645-1.114-1.294-2.226-1.94-3.341z"
fill="#FF0000"/>

<circle r="10.5" cy="10.5" cx="50" fill="#FF0000"/>

</g>

</svg>

3] ondc\Admin-portal-frontend\bpp_admin\src\assets\location_man.svg
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"[Link]

<!-- Uploaded to: SVG Repo, [Link], Transformed by: SVG Repo Mixer
Tools -->
<svg width="64px" height="64px" viewBox="0 0 100 100"
xmlns="[Link] xmlns:xlink="[Link]
aria-hidden="true" role="img" class="iconify iconify--gis"
preserveAspectRatio="xMidYMid meet" fill="#000000">

<g id="SVGRepo_bgCarrier" stroke-width="0"/>

<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

<g id="SVGRepo_iconCarrier">

<path d="M49.781 23.592C41.947 23.593 34.184 26.96 35 33.688l2 14.624C37.352

50.886 39.09 55 41.688 55h.185L44 80.53c.092 1.103.892 2 2 2h8c1.108 0
1.908-.897 2-2L58.127 55h.185c2.597 0 4.336-4.115 4.688-6.688l2-14.624c.523-
6.734-7.384-10.098-15.219-10.096z" fill="#FF0000"/>

<path d="M50.024 50.908l-.048.126c.016-.038.027-.077.043-.115l.005-.011z"

fill="#FF0000"/>

<path d="M34.006 69.057C19.88 71.053 10 75.828 10 82.857C10 92.325 26.508 100 50

100s40-7.675 40-17.143c0-7.029-9.879-11.804-24.004-13.8l-1.957 3.332C74.685
73.866 82 76.97 82 80.572c0 5.05-14.327 9.143-32 9.143c-17.673 0-32-4.093-32-
9.143c-.001-3.59 7.266-6.691 17.945-8.174c-.645-1.114-1.294-2.226-1.94-3.341z"
fill="#FF0000"/>

<circle r="10.5" cy="10.5" cx="50" fill="#FF0000"/>

</g>

</svg>

4] ondc\Admin-portal-frontend\bpp_admin\src\assets\[Link]
<svg width="14" height="23" viewBox="0 0 14 23" fill="none"
xmlns="[Link]
<line x1="6.15234" y1="11.7412" x2="6.15234" y2="21.6" stroke="black" stroke-
width="2" stroke-linecap="round"/>
<circle cx="6.58824" cy="6.78825" r="4.08824" stroke="black" stroke-width="5"/>
<rect x="4.30762" y="4.50771" width="4.30769" height="4.30769" fill="white"/>
</svg>

5] ondc\Admin-portal-frontend\bpp_admin\src\Components\ApiServices\
[Link]
import env from "../../config/env";

export const SERVER_URL = env.API_BASE_URL;

export const BASE_URL = `${SERVER_URL}/api/`;
export const ADMIN_LOGIN = "admin-login";

export const EDIT_DRIVER = "edit-driver";

export const UPDATE_DRIVER_DOCUMENTS_BY_ID = "update-driver-documents-by-id";

export const UPDATE_VEHICLE_DOCUMENTS_BY_ID = "update-vehicle-documents-by-id";
export const GET_DRIVERS_LIST = "get-drivers-list";
export const GET_DRIVER_DOCUMENT = "admin-download-driver-doc";
export const GET_DASHBOARD_DRIVERS_DETAILS = "get-dashboard-drivers-details";
export const GET_REPORTS_DETAILS = "get-reports-details";
export const GET_DRIVER_DETAILS_BY_ID = "get-driver-details-by-id";
export const CHANGE_DRIVER_STATUS_BY_ADMIN = "change-driver-status-by-admin";

export const CHANGE_DOCUMENT_STATUS = "change-document-status";

export const GET_VEHICLE_LIST = "get-vehicles-list";

export const EDIT_VEHICLE_DETAILS = "edit-vehicle-details";
export const GET_VEHICLE_DOCUMENT = "admin-download-vehicle-doc";
export const GET_VEHICLES_DETAILS_BY_ID = "get-vehicles-details-by-id";
export const CHANGE_VEHICLE_STATUS_BY_ADMIN = "change-vehicle-status-by-admin";

export const ISSUE = "issue";

export const GET_ISSUE_CATEGORIES = "get-issue-categories";

export const TRACK_CURRENT_RIDE = "track-current-ride";

export const TRACK_COMPLETED_RIDE = "track-completed-ride";
export const TRACK_CANCELLED_RIDE = "track-cancelled-ride";
export const CURRENT_RIDE_DETAILS = "current-ride-details";
export const COMPLETED_RIDE_DETAILS = "completed-ride-details";
export const TRACK_PENDING_RIDES = "track-pending-rides";

export const GET_ISSUE_LIST = "get-issue-list";

export const GET_ISSUE_DETAILS = "get-issue-details";
export const ISSUE_RESOLUTION = "issue-resolution";

export const GET_GRIEVANCE_LIST = "get-grievance-list";

export const GET_BROADCAST_DETAILS_BY_TRANSACTION_ID =

"get-broadcast-details-by-transaction-id";

export const DELETE_DRIVER_ACCOUNT = "delete-driver-account";

export const GET_ONLINE_DRIVER_LOCATIONS = "get-online-driver-locations";
export const GET_SEARCH_LOCATIONS = "get-search-locations";

export const GET_DRIVER_AND_RIDE_LIST = "get-driver-and-ride-count";

export const DOWNLOAD_EVENT_REPORT = "download-event-report";

export const DOWNLOAD_NOTIFICATION_HISTORY_REPORT =
"download-notification-history-report";

6] ondc\Admin-portal-frontend\bpp_admin\src\Components\ApiServices\
[Link]
import axios from "axios";
import Cookies from "js-cookie";
import { BASE_URL } from "./ApiConstants";
import { removeCookies, setCookies } from "../../CustomUtils/CookiesUtils";
import { error } from "console";
import fileDownload from "js-file-download";

class ApiHandler {
getToken() {
let token = [Link]("bpp_portal_ONDCAdminToken");
return token;
 }

getPublicInstance() {
const publicInstance = [Link]({
baseURL: BASE_URL,
headers: {
"Content-Type": "application/json",
context: ["admin_portal"],
},
transformRequest: [
(data) => {
return [Link](data);
},
],
transformResponse: [
(data) => {
let isValidJSON = true;
try {
[Link](data);
} catch {
isValidJSON = false;
}
return isValidJSON ? [Link](data) : data;
},
],
});
return publicInstance;
}

getPrivateInstance() {
const instance = [Link]({
baseURL: BASE_URL,
headers: {
"Content-Type": "application/json",
"Cache-Control": "no-cache",
context: ["bpp_portal"],
Authorization: [Link](),
},
transformRequest: [
(data) => {
return [Link](data);
},
],
transformResponse: [
(data) => {
try {
const parseData = [Link](data);
if (
parseData?.message?.message ===
"Unauthorized, token not
available." ||
parseData?.message?.message ===
"Unauthorized, Invalid Verified
Token."
) {

removeCookies("bpp_portal_ONDCAdminToken");
removeCookies("bpp_portal_UserName");

removeCookies("bpp_portal_ClientInfo");
}
return parseData;
} catch (e) {
return data;
 }
},
],
});
return instance;
}

post(url: string, payload: any, params?: any) {

return [Link]().post(url, payload, params);
}

get(url: string, payload?: any) {

return [Link]().get(url, payload);
}
}

export const apiHandler = new ApiHandler();

7] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import * as React from "react";
import Box from "@mui/material/Box";
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 TablePagination from "@mui/material/TablePagination";
import TableRow from "@mui/material/TableRow";
import TableSortLabel from "@mui/material/TableSortLabel";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";
import { Grid, IconButton, useTheme } from "@mui/material";
import {
FirstPage,
KeyboardArrowLeft,
KeyboardArrowRight,
LastPage,
North,
South,
} from "@mui/icons-material";
import { formatDateTime } from "../../CustomUtils/DateTimeUtils";

function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {

if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}

type Order = "asc" | "desc";

function getComparator<Key extends keyof any>(

order: Order,
orderBy: Key
): (
a: { [key in Key]: number | string },
b: { [key in Key]: number | string }
) => number {
return order === "desc"
? (a, b) => descendingComparator(a, b, orderBy)
 : (a, b) => -descendingComparator(a, b, orderBy);
}

// Since 2020 all major browsers ensure sort stability with

[Link]().
// stableSort() brings sort stability to non-modern browsers (notably IE11). If
you
// only support modern browsers you can replace stableSort(exampleArray,
exampleComparator)
// with [Link]().sort(exampleComparator)
function stableSort<T>(
array: readonly T[],
comparator: (a: T, b: T) => number
) {
const stabilizedThis = [Link]((el, index) => [el, index] as [T,
number]);
[Link]((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) {
return order;
}
return a[1] - b[1];
});
return [Link]((el) => el[0]);
}

interface EnhancedTableMainProps {
headers: any[];
tableData: any;
rowProps?: any;
navigate?: any;
count?: any;
refreshPage?: any;
}

const EnhancedTable = [Link](

(
props: EnhancedTableMainProps,
ref: [Link]<{
handleChangePage: (event: unknown, newPage: number) => void;
}>
) => {
const { headers, tableData, count, refreshPage } = props;
//[Link]("props in table", props);

const [order, setOrder] = [Link]<Order>("asc");

const [orderBy, setOrderBy] = [Link]<string>("");
const [tableDataList, setTableDataList] = [Link]<any>([]);
const [selected, setSelected] = [Link]<readonly
number[]>([]);
const [page, setPage] = [Link](0);
const [dense, setDense] = [Link](true);
const [rowsPerPage, setRowsPerPage] = [Link](25);

[Link](ref, () => ({
handleChangePage,
}));

const handleRequestSortNew = (
event: [Link]<unknown>,
property: string
) => {
const isAsc = orderBy === property && order === "asc";
setOrder(isAsc ? "desc" : "asc");
 setOrderBy(property);

let newTableDataList = [Link]((a: any, b: any) =>

!isAsc
? a[property] > b[property]
? 1
: b[property] > a[property]
? -1
: 0
: b[property] > a[property]
? 1
: a[property] > b[property]
? -1
: 0
);
setTableDataList(newTableDataList);
};

const handleRequestSort = (
event: [Link]<unknown>,
property: string
) => {
const isAsc = orderBy === property && order === "asc";
setOrder(isAsc ? "desc" : "asc");
setOrderBy(property);

let newTableDataList = [Link]((a: any, b: any) =>

!isAsc
? a[property] > b[property]
? 1
: b[property] > a[property]
? -1
: 0
: b[property] > a[property]
? 1
: a[property] > b[property]
? -1
: 0
);
setTableDataList(newTableDataList);
};

const handleSelectAllClick = (
event: [Link]<HTMLInputElement>
) => {
// if ([Link]) {
// const newSelected = [Link]((n) => [Link]);
// setSelected(newSelected);
// return;
// }
// setSelected([]);
};

// const handleClick = (
// event: [Link]<unknown>,
// id: string | number
// ) => {
// const selectedIndex = [Link](id);
// let newSelected: readonly number[] = [];

// if (selectedIndex === -1) {

// newSelected = [Link](selected, id);
// } else if (selectedIndex === 0) {
// newSelected = [Link]([Link](1));
 // } else if (selectedIndex === [Link] - 1) {
// newSelected = [Link]([Link](0, -1));
// } else if (selectedIndex > 0) {
// newSelected = [Link](
// [Link](0, selectedIndex),
// [Link](selectedIndex + 1)
// );
// }
// setSelected(newSelected);
// };

const handleChangePage = (event: unknown, newPage: number) => {

refreshPage({ page: newPage });
setPage(newPage);
};

const handleChangeRowsPerPage = (
event: [Link]<HTMLInputElement>
) => {
refreshPage({ rowsPerPage: [Link], page: 0 });
setRowsPerPage(Number([Link]));
setPage(0);
};

[Link](() => {
setTableDataList(tableData);
}, [tableData]);

const handleChangeDense = (event:

[Link]<HTMLInputElement>) => {
setDense([Link]);
};

const isSelected = (id: number) => [Link](id) !== -1;

// Avoid a layout jump when reaching the last page with empty rows.
const emptyRows =
page > 0
? [Link](0, (1 + page) * rowsPerPage -
[Link])
: 0;

const visibleRows = [Link](

() =>
stableSort([Link], getComparator(order,
orderBy)).slice(
page * rowsPerPage,
page * rowsPerPage + rowsPerPage
),
[order, orderBy, page, rowsPerPage, [Link]]
);

const ArrowIcon = (id: any) => {

// [Link]("199 orderBy", orderBy);
// [Link]("200 id", id);
// [Link]("201 order", order);
const column = orderBy === id;
//[Link]("203 column", column);
const isAsc = orderBy === id && order === "asc";
//[Link]("205 isAsc", isAsc);
let northColor = "gray",
southColor = "gray";

if (orderBy === id) {

 if (order === "asc") {
northColor = "black";
southColor = "gray";
} else if (order === "desc") {
northColor = "gray";
southColor = "black";
}
} else {
northColor = southColor = "gray";
}

return (
<Grid
style={{
display: "flex",
flexDirection: "row",
justifyContent: "Center",
alignItems: "Center",
marginLeft: "4px",
}}
>
<IconButton
size="small"
sx={{ color: northColor }}
onClick={(event) => {
handleRequestSortNew(event, id);
}}
>
<North fontSize="inherit" />
</IconButton>
<IconButton
size="small"
sx={{ marginLeft: -1.5, color: southColor }}
onClick={(event) => {
handleRequestSortNew(event, id);
}}
>
<South fontSize="inherit" />
</IconButton>
</Grid>
);
};

return (
<Box sx={{ width: "100%" }}>
<Paper sx={{ width: "100%" }}>
<TableContainer>
<Table
stickyHeader
sx={{ minWidth: 500 }}
aria-labelledby="tableTitle"
>
<TableHead>
<TableRow>
{[Link]((header,
index) => (
<TableCell
style={{
padding:
10,

backgroundColor: "#eaeaea",
width:
 [Link] === "Documents"

? "10px"

: [Link] === "Actions"

? "10px"

: [Link] === "viewDetails"

? "10px"

: [Link] === "total"

? "10px"

: "auto",

textAlign: [Link] ? "center" : "left",

maxWidth:
"400px",

//minWidth: "10px",
}}
key={index}
//
align={[Link] ? "right" : "left"}
//
padding={[Link] ? "none" : "normal"}
//
sortDirection={orderBy === [Link] ? order : false}
>
{

[Link] ? (

<Typography style={{ fontWeight: 600 }}>

{[Link]}

</Typography>
) : (

<TableSortLabel

IconComponent={() => ArrowIcon(header?.id)}

//active={true}

//direction={order}

// onClick={(event) =>

// handleRequestSort(event, [Link])

// }
>

<Typography style={{ fontWeight: 600 }}>

{[Link]}

</Typography>
 </TableSortLabel>
) //:
//
<TableSortLabel
//
active={orderBy === [Link]}
//
direction={orderBy === [Link] ? order : "asc"}
//
onClick={(event) =>
//
handleRequestSort(event, [Link])
// }
// >
//
<Typography style={{ fontWeight: 600 }}>
//
{[Link]}
//
</Typography>
//
</TableSortLabel>
}
</TableCell>
))}
</TableRow>
</TableHead>

<TableBody>
{[Link]((row: any,
index: any) => (
<TableRow key={index}
sx={{}}>
{[Link]((header,
headerIndex) => (
<TableCell
style={{

padding: 10,

width:

[Link] === "Documents"

? "10px"

: [Link] === "Actions"

? "10px"

: [Link] === "viewDetails"

? "10px"

: [Link] === "total"

? "10px"

: "auto",

textAlign: [Link] ? "center" : "left",

maxWidth: "400px",
 color:

[Link] === "driverName"

? row["driverNameColor"]

: [Link] === "passengerName"

? row["passengerNameColor"]

: "black",
//
whiteSpace: "nowrap",
//
textOverflow: "ellipsis",

//width: "300px",

//display: "block",

//overflow: "hidden",

//minWidth: "10px",
//
whiteSpace: "normal",
//
wordWrap: "break-word",
}}

width={[Link] ? [Link] : "auto"}

key={headerIndex}

align={[Link] ? "right" : "left"}

>
{/*
{row["driverNameColor"]} */}

{[Link] === "dateAndTime" ||

[Link]
=== "modifiedDateTime" ||
[Link]
=== "currentLocationDateTime"
?
row[[Link]] !== "NA"

? formatDateTime(

new Date(row[[Link]]).toString(),

true

: row[[Link]]
:
row[[Link]]}
</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
 {props?.refreshPage && (
<TablePagination
rowsPerPageOptions={[25, 100, 250]}
component="div"
count={count || [Link]}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}

onRowsPerPageChange={handleChangeRowsPerPage}

ActionsComponent={TablePaginationActions}
/>
)}
</Paper>
</Box>
);
}
);

export default EnhancedTable;

interface TablePaginationActionsProps {
count: number;
page: number;
rowsPerPage: number;
onPageChange: (
event: [Link]<HTMLButtonElement>,
newPage: number
) => void;
}

function TablePaginationActions(props: TablePaginationActionsProps) {

const theme = useTheme();
const { count, page, rowsPerPage, onPageChange } = props;

const handleFirstPageButtonClick = (
event: [Link]<HTMLButtonElement>
) => {
onPageChange(event, 0);
//[Link]("406 handleFirstPageButtonClick", 0);
};

const handleBackButtonClick = (
event: [Link]<HTMLButtonElement>
) => {
onPageChange(event, page - 1);
//[Link]("414 handleBackButtonClick", page + " " + (page - 1));
};

const handleNextButtonClick = (
event: [Link]<HTMLButtonElement>
) => {
onPageChange(event, page + 1);
//[Link]("421 handleNextButtonClick", page + " " + (page + 1));
};

const handleLastPageButtonClick = (
event: [Link]<HTMLButtonElement>
) => {
onPageChange(event, [Link](0, [Link](count / rowsPerPage) -
1));
// [Link](
// "429 handleLastPageButtonClick",
 // page + " " + [Link](0, [Link](count / rowsPerPage) - 1)
// );
};

return (
<Box sx={{ flexShrink: 0, ml: 2.5 }}>
<IconButton
onClick={handleFirstPageButtonClick}
disabled={page === 0}
aria-label="first page"
>
{[Link] === "rtl" ? <LastPage /> :
<FirstPage />}
</IconButton>
<IconButton
onClick={handleBackButtonClick}
disabled={page === 0}
aria-label="previous page"
>
{[Link] === "rtl" ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
</IconButton>
<IconButton
onClick={handleNextButtonClick}
disabled={page >= [Link](count / rowsPerPage) - 1}
aria-label="next page"
>
{[Link] === "rtl" ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</IconButton>
<IconButton
onClick={handleLastPageButtonClick}
disabled={page >= [Link](count / rowsPerPage) - 1}
aria-label="last page"
>
{[Link] === "rtl" ? <FirstPage /> :
<LastPage />}
</IconButton>
</Box>
);
}

8] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import { FC, ReactElement } from "react";
import { Paper, Typography } from "@mui/material";

const Footer: FC = (): ReactElement => {

return (
<Paper
sx={{
height: "20px",
position: "fixed",
bottom: "0px",
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
 }}
>
<Typography sx={{ fontSize: "13px", textAlign: "center" }}>
Suma Soft Pvt. Ltd.
</Typography>
</Paper>
);
};

export default Footer;

9] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import * as React from "react";
import {
Dialog,
DialogContent,
DialogTitle,
Grid,
FormControl,
InputLabel,
MenuItem,
Select,
TextareaAutosize,
TextField,
IconButton,
} from "@mui/material";
import { useNavigate } from "react-router-dom";
import { AppContext } from "../Context/AppContext";
import { ShowSnackbarFailure, ShowSnackbarSuccess } from "./MobilitySnackBar";
import { Close } from "@mui/icons-material";
import MobilityButton from "./MobilityButton";
import { apiHandler } from "../ApiServices/ApiHandler";
import { ISSUE_RESOLUTION } from "../ApiServices/ApiConstants";
interface issueFormProps {
issueData: any;
open: boolean;
setOpen: any;
}
// interface ValidationErrors {
// complainantAction: string;
// shortDesc: string;
// }
interface issueDetails {
respondentAction: string;
shortDesc: string;
longDesc: string;
refundAmount: string;
actionTriggered: string;
}
interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}
const submitButtonStyle = {
marginTop: "40px",
display: "flex",
justifyContent: "center",
};
const textAreaStyle = {
width: "100%",
};
const IssueForm: [Link]<issueFormProps> = ({ issueData, open, setOpen }) => {
const navigate = useNavigate();
let myContext = [Link](AppContext);

const dropdownOptions = [
"PROCESSING",
"CASCADED",
"RESOLVED",
"NEED_MORE_INFO",
];
const actionTypes = ["RESOLVE", "REJECT"];
const [issueDetails, setIssueDetails] = [Link]<issueDetails>({
respondentAction: "",
shortDesc: "",
longDesc: "",
refundAmount: "",
actionTriggered: "",
});
const [actionType, setActionType] = [Link]<any>(null);
const actionTriggeredOption = [
"REFUND",
"REPLACEMENT",
"RETURN",
"CANCEL",
"NO_ACTION",
];
// const [validationErrors, setValidationErrors] =
// [Link]<ValidationErrors>({
// complainantAction: "",
// shortDesc: "",
// });

async function handleSubmit(event: [Link]) {

[Link]();
try {
[Link]({
isLoading: true,
message: "Issue Resolved...",
});
const requestBody = {
...issueDetails,
...issueData,
action: actionType,
resolutionType: "IssueResolution",
issueResolutionKey: "IssueResolution",
};

// const res: Iresponse = await [Link](

// `/api/issue-resolution`,
// requestBody
// );
const res: Iresponse = await [Link](
ISSUE_RESOLUTION,
requestBody
);
if ([Link] === 200) {
ShowSnackbarSuccess("Issue Resolved", myContext);
navigate(-1);

setIssueDetails({
respondentAction: "",
shortDesc: "",
longDesc: "",
refundAmount: "",
 actionTriggered: "",
});
setOpen(false);
} else {
ShowSnackbarFailure(res, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);

} finally {
[Link]({
isLoading: false,
});
}
}
const handleClose = () => {
setOpen(false);
};
return (
<Dialog
open={open}
onClose={handleClose}
PaperProps={{
style: {
minWidth: "30vw",
// width: "40%",
// height: "85vh",
// maxWidth: "none",
},
}}
>
<DialogTitle
sx={{ backgroundColor: "#eaeaea" }}
// style={{
// backgroundColor: "#e2e2e2",
// textAlign: "center",
// marginBottom: "10px",
// }}
>
Issue Resolved
</DialogTitle>
<IconButton
aria-label="close"
onClick={handleClose}
sx={{
position: "absolute",
right: 8,
top: 16,
}}
>
<Close />
</IconButton>
<DialogContent>
{/* <form onSubmit={handleSubmit}> */}
<Grid container spacing={4}>
<Grid item xs={12}>
<FormControl fullWidth variant="outlined">
<InputLabel id="select-label">Action
type</InputLabel>
<Select
labelId="select-label"
id="select2"
variant="outlined"
fullWidth
 value={actionType}
onChange={(e) =>
setActionType([Link])}
label="Action type"
>
{[Link]((option) => (
<MenuItem key={option}
value={option}>
{option}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
</Grid>

<Grid container spacing={4}>

<Grid
item
xs={12}
sx={{
marginTop: 2,
}}
>
<FormControl fullWidth variant="outlined">
<InputLabel id="select-
label">Respondent Action</InputLabel>
<Select
labelId="select-label"
id="select"
variant="outlined"
fullWidth

value={[Link]}
onChange={(e) =>
setIssueDetails({
...issueDetails,
respondentAction:
[Link],
})
}
label="Complainant Action"
>
{[Link]((option) =>
(
<MenuItem key={option}
value={option}>
{option}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
</Grid>

<Grid container spacing={4}>

<Grid
item
xs={12}
sx={{
marginTop: 2,
}}
>
<TextareaAutosize
 aria-label="minimum height"
minRows={3}
placeholder="Enter short issue
description here"
style={textAreaStyle}
value={[Link]}
onChange={(e) =>
setIssueDetails({
...issueDetails,
shortDesc: [Link],
})
}
/>
</Grid>
</Grid>

<Grid container spacing={4}>

<Grid
item
xs={12}
sx={{
marginTop: 2,
}}
>
<TextareaAutosize
aria-label="minimum height"
minRows={3}
placeholder="Enter long issue
description here"
style={textAreaStyle}
value={[Link]}
onChange={(e) =>
setIssueDetails({
...issueDetails,
longDesc: [Link],
})
}
/>
</Grid>
</Grid>

<Grid container spacing={4}>

<Grid
item
xs={8}
sx={{
marginTop: 2,
}}
>
<FormControl fullWidth variant="outlined">
<InputLabel id="select-label">Action
triggered</InputLabel>
<Select
labelId="select-label"
id="select"
variant="outlined"
fullWidth

value={[Link]}
onChange={(e) =>
setIssueDetails({
...issueDetails,
actionTriggered:
[Link],
 })
}
label="Action triggered"
>

{[Link]((option) => (
<MenuItem key={option}
value={option}>
{option}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
{/* </Grid> */}

{/* <Grid container spacing={4}> */}

{issueDetails?.actionTriggered === "REFUND" && (
<Grid
item
xs={4}
sx={{
marginTop: 2,
}}
>
<TextField
id="outlined-basic"
label="Refund"
variant="outlined"
value={[Link]}
type="number"
onChange={(e) =>
setIssueDetails({
...issueDetails,
refundAmount:
[Link],
})
}
/>
</Grid>
)}
</Grid>
{/* <Grid container spacing={4}>
<Grid item lg={12} sx={submitButtonStyle}>
<Button
type="submit"
variant="contained"
color="primary"
disabled={
![Link] || ![Link]
}
>
Submit
</Button>
</Grid>
</Grid> */}
<Grid
container
spacing={4}
sx={{ marginTop: 1, justifyContent: "center" }}
>
<MobilityButton
label="Submit"
disabled={![Link] || !
[Link]}
onClick={handleSubmit}
/>
</Grid>
{/* </form> */}
</DialogContent>
</Dialog>
);
};

export default IssueForm;

10] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import React, { FC, ReactElement, useState } from "react";
import { Card, Grid, Typography, useMediaQuery } from "@mui/material";
import { useUserDispatch } from "../../CustomUtils/usercontext";
import { apiHandler } from "../ApiServices/ApiHandler";
import { setCookies } from "../../CustomUtils/CookiesUtils";
import MobilityButton from "./MobilityButton";
import MobilityTextField from "./MobilityTextField";
import { AppContext } from "../Context/AppContext";
import { ADMIN_LOGIN } from "../ApiServices/ApiConstants";
import { ShowSnackbarFailure, ShowSnackbarSuccess } from "./MobilitySnackBar";
import env from "../../config/env";

export const Login: FC = (): ReactElement => {

const [phone, setPhone] = useState<string>("");
const [password, setPassword] = useState<string>("");
const [showPassword, setShowPassword] = useState(false);
const disptch: Function = useUserDispatch();
const isMobile = useMediaQuery("(max-width:600px)");
let myContext = [Link](AppContext);

const handleClickShowPassword = (): void => setShowPassword(!

showPassword);

const checkValidCredentials = (): boolean => {

if (phone && password) {
return true;
} else {
return false;
}
};

const OnSubmit: Function = async () => {

try {
if (checkValidCredentials()) {
[Link]({
isLoading: true,
message: "Authenticating...",
});
let payload = { phone, password };
let publicInstance = [Link]();
const loginResponse = await
[Link](ADMIN_LOGIN, payload);

const {
clientsInfo = {},
userInfo = {},
token = {},
} = loginResponse?.data?.data || {};

if (
 ([Link](clientsInfo) && [Link]
> 0) ||
[Link] === 200
) {
let userRedirct = [Link](
(el: { clientName: string }): any =>
[Link] ===
userInfo?.defaultPortal
);

if (userRedirct === undefined) {

disptch("LOGIN_FAILURE");
}

if ([Link] === "bpp_portal") {

disptch("LOGIN_SUCCESS");
setCookies("bpp_portal_ONDCAdminToken",
token);
setCookies("bpp_portal_UserName",
[Link]);
setCookies("bpp_portal_ClientInfo",
[Link](clientsInfo));
ShowSnackbarSuccess("Logged in
Successfully", myContext);
} else {
ShowSnackbarFailure("Please enter valid
Credentials", myContext);
disptch("LOGIN_FAILURE");
}
} else {
disptch("LOGIN_FAILURE");
}
}
} catch (error) {
ShowSnackbarFailure(error, myContext);
} finally {
[Link]({
isLoading: false,
});
}
};

const setUserDetails = (event: any): void => {

[Link]();
if ([Link] === "phone") {
if (!isNaN(event?.target?.value)) {
setPhone([Link]);
}
} else if ([Link] === "password") {
setPassword([Link]);
}
};

function detectPlatform() {
return
[Link]().toLowerCase().includes("android");
}

return (
<Grid
style={{
height: "100vh",
justifyContent: "center",
display: "flex",
 }}
>
<Card
sx={{
alignSelf: "center",
margin: "20px",
padding: "20px",
width: isMobile ? "auto" : "400px",
borderRadius: "20px",
}}
>
<Grid container spacing={2} alignItems="center"
justifyContent="center">
<Grid item>
<img

src={require("../../assets/Logo_digital.png")}
height="100px"
/>
</Grid>
<Grid item>
<Typography style={{ fontWeight: 800,
fontSize: 20 }}>
BPP (Driver) Admin Login Portal
</Typography>
</Grid>

<Grid item md={12} xs={12} sx={{ marginTop: 2 }}>

<MobilityTextField
label="Phone"
type="text"
name="phone"
required={true}
value={phone}
maxLength={10}
onChange={(event:
[Link]<HTMLInputElement>) => {
setUserDetails(event);
}}
/>
</Grid>
<Grid item md={12} xs={12}>
<MobilityTextField
type={showPassword ? "text" :
"password"}
name="password"
label="Password"
value={password}
showPassword={showPassword}
onChange={(event:
[Link]<HTMLInputElement>) => {
setUserDetails(event);
}}
onIconClick={(event:
[Link]<HTMLButtonElement>) => {
handleClickShowPassword();
}}
/>
</Grid>
<Grid item>
<MobilityButton
label="Login"
onClick={(event:
[Link]<HTMLButtonElement>) => {
 OnSubmit();

//[Link]("orickshaw://[Link]/anystring");
}}
/>
</Grid>

{/* <a
href="myapp://open"
onClick={() => {
[Link] =

"[Link]
id=[Link]";
return false;
}}
>
Download App
</a> */}

{/* {detectPlatform() === true ? (

<a
href="myapp://open/screen1"
onClick={() => {
[Link] =

"[Link]
id=[Link]";
return false;
}}
>
Download Mobile App
</a>
) : (
<a
href="[Link]
id=[Link]">
Download App
</a>
)} */}
</Grid>
<Grid container justifyContent="end">
<Typography style={{ fontSize: 12 }}>
Version : {[Link]}
</Typography>
</Grid>
</Card>
</Grid>
);
};
11] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import styled from "@emotion/styled";
import { ExpandMore } from "@mui/icons-material";
import { AccordionSummary, Grid } from "@mui/material";
import MuiAccordionDetails from "@mui/material/AccordionDetails";
import MuiAccordion, { AccordionProps } from "@mui/material/Accordion";

export interface MobilityAccordionprops {

title: any;
summary?: any;
details: any;
isExpanded: boolean;
docType?: string;
 editableFields?: any;
}

function MobilityAccordion(props: MobilityAccordionprops) {

const Accordion = styled((props: AccordionProps) => (
<MuiAccordion disableGutters {...props} />
))(({ theme }) => ({}));

const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({

borderTop: "1px solid rgba(0, 0, 0, .125)",
}));
return (
<div>
<Accordion defaultExpanded={[Link]}
sx={{ marginBottom: 2 }}>
<AccordionSummary
expandIcon={<ExpandMore color={"primary"}
fontSize="large" />}
>
<Grid
container
item
sx={{
alignItems: "center",
}}
>
<Grid
container
flex={1}
sx={{
alignItems: "center",
}}
>
{props?.title}
</Grid>

{props?.summary}
</Grid>
</AccordionSummary>
<AccordionDetails>{props?.details}</AccordionDetails>
</Accordion>
</div>
);
}

export default MobilityAccordion;

12] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import * as React from "react";
import Box from "@mui/material/Box";
import Menu from "@mui/material/Menu";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import { MoreVert } from "@mui/icons-material";

export interface MobilityLongProps {

label?: string;
items: any[];
}

export default function MobilityActionMenu(props: MobilityLongProps) {

const [anchorEl, setAnchorEl] = [Link]<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleClick = (event: [Link]<HTMLElement>) => {
 setAnchorEl([Link]);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<[Link]>
<Box sx={{ display: "flex", alignItems: "center", textAlign:
"center" }}>
<Tooltip title="View Options">
<IconButton
onClick={handleClick}
size="small"
sx={{ ml: 2 }}
aria-controls={open ? "account-menu" :
undefined}
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
>
<MoreVert />
</IconButton>
</Tooltip>
</Box>
<Menu
anchorEl={anchorEl}
id="account-menu"
open={open}
onClose={handleClose}
onClick={handleClose}
PaperProps={{
elevation: 0,
sx: {
overflow: "visible",
filter: "drop-shadow(0px 2px 8px
rgba(0,0,0,0.32))",
"& .MuiAvatar-root": {
width: 32,
height: 32,
ml: -0.5,
mr: 1,
},
"&:before": {
content: '""',
display: "block",
position: "absolute",
top: 0,
right: 14,
width: 10,
height: 10,
bgcolor: "[Link]",
transform: "translateY(-50%)
rotate(45deg)",
zIndex: 0,
},
},
}}
transformOrigin={{ horizontal: "right", vertical:
"top" }}
anchorOrigin={{ horizontal: "right", vertical:
"bottom" }}
>
{props?.items &&
props?.[Link]((item: any, index: any) => {
return <div key={index}>{item}</div>;
 })}
</Menu>
</[Link]>
);
}

13]ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import { Card, Grid } from "@mui/material";
import { MobilityButtonIconBack } from "./MobilityButtonIcon";

export interface MobilityAppBarProps {

title?: string;
description?: [Link];
clickable?: boolean;
icon?: any;
menus?: any;
onBackClick: (event: [Link]<HTMLButtonElement>) => void;
}

export function MobilityAppBar(props: MobilityAppBarProps) {

return (
<Card sx={{ display: "flex", justifyContent: "flex-between" }}>
<Grid container>
<Grid item sx={{ padding: 1 }}>
<MobilityButtonIconBack
onClick={props?.onBackClick} />
</Grid>
<Grid item sx={{ alignItems: "center", display:
"flex" }}>
{props?.title}
</Grid>

<Grid
sx={{
alignItems: "center",
display: "flex",
}}
>
{props?.description}
</Grid>
</Grid>
{props?.menus && (
<Grid
container
sx={{
alignItems: "center",
justifyContent: "end",
marginRight: 1,
}}
>
{props?.menus}
</Grid>
)}
</Card>
);
}

14] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import Tooltip from "@mui/material/Tooltip";
import { Badge } from "@mui/material";

export interface MobilityBadgeProps {

 title?: string;
badgeContent?: any;
icon?: any;
color?: any;
}

export default function MobilityBadge(props: MobilityBadgeProps) {

return (
<Tooltip title={props?.title}>
<Badge
badgeContent={props?.badgeContent}
color={props?.color}
sx={{ marginRight: 3 }}
showZero={true}
max={9999}
>
{props?.icon}
</Badge>
</Tooltip>
);
}

15] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import React from "react";
import { Button } from "@mui/material";

interface MobilityButtonProps {
label: string;
disabled?: boolean;
fullWidth?: boolean;
variant?: any;
style?: [Link];
onClick: (event: [Link]<HTMLButtonElement>) => void;
}

function MobilityButton(props: MobilityButtonProps) {

return (
<Button
variant={props?.variant ? props?.variant : "contained"}
disabled={props?.disabled ? props?.disabled : false}
//fullWidth={props?.fullWidth === false ? false : true}
fullWidth
style={
props?.style !== undefined
? props?.style
: {
height: 35,
borderRadius: 5,
textTransform: "initial",
fontSize: 16,
minWidth: 90,
}
}
onClick={(event: [Link]<HTMLButtonElement>) => {
[Link](event);
}}
>
{[Link]}
</Button>
);
}

export default MobilityButton;

17] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import React from "react";
import { Avatar, Box, Fab, IconButton, Tooltip } from "@mui/material";
import {
ArrowBack,
BorderColorOutlined,
CancelOutlined,
GpsFixed,
MoreVert,
TaskAlt,
Visibility,
} from "@mui/icons-material";
import _ from "lodash";

export interface MobilityButtonIconProps {

color?: any;
label?: string;
disabled?: boolean;
icon?: any;
tooltipTitle?: string;
onClick: (event: [Link]<HTMLButtonElement>) => void;
}

function stringAvatar(name: any) {

return {
sx: {
bgcolor: "red",
},
children: `${_.capitalize(name?.slice(0, 1))}`,
};
}

export function MobilityButtonIcon(props: MobilityButtonIconProps) {

return (
<Tooltip title={[Link]}>
{props?.icon ? (
<IconButton color={[Link]} size="small"
onClick={[Link]}>
{props?.icon}
</IconButton>
) : (
<IconButton color={[Link]} onClick={[Link]}>
<Avatar
{...stringAvatar(props?.label?.toString())}></Avatar>
</IconButton>
)}
</Tooltip>
);
}

export function MobilityButtonIconView(props: MobilityButtonIconProps) {

return (
<MobilityButtonIcon
color={"primary"}
icon={<Visibility />}
tooltipTitle={[Link]}
onClick={[Link]}
/>
);
}

export function MobilityButtonIconApprove(props: MobilityButtonIconProps) {

return (
 <MobilityButtonIcon
color={"success"}
onClick={[Link]}
icon={<TaskAlt />}
tooltipTitle={[Link]}
/>
);
}

export function MobilityButtonIconReject(props: MobilityButtonIconProps) {

return (
<MobilityButtonIcon
color={"error"}
onClick={[Link]}
icon={<CancelOutlined />}
tooltipTitle={[Link]}
/>
);
}

export function MobilityButtonIconEdit(props: MobilityButtonIconProps) {

return (
<MobilityButtonIcon
color={"primary"}
onClick={[Link]}
icon={<BorderColorOutlined />}
tooltipTitle={[Link]}
/>
);
}

export function MobilityButtonIconReCenter(props: MobilityButtonIconProps) {

return (
<Fab color="default" size="medium" aria-label="add">
<MobilityButtonIcon
color={"primary"}
onClick={[Link]}
icon={<GpsFixed />}
tooltipTitle={[Link]}
/>
</Fab>
);
}

export function MobilityButtonIconViewMore(props: MobilityButtonIconProps) {

return (
<MobilityButtonIcon
color="default"
onClick={[Link]}
icon={<MoreVert />}
tooltipTitle={[Link]}
/>
);
}

export function MobilityButtonIconBack(props: MobilityButtonIconProps) {

return (
<MobilityButtonIcon
color="default"
onClick={[Link]}
icon={<ArrowBack />}
tooltipTitle={[Link]}
/>
);
}

18] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import {
Card,
Grid,
CardContent,
Typography,
CardActionArea,
CardActions,
CardHeader,
CardMedia,
} from "@mui/material";
import { GRAY_200 } from "../Constants/CommonConstants";
import { CheckCircle } from "@mui/icons-material";

export interface MobilityCardProps {

gridstyle?: {
size: any;
margin: any;
};
title: string;
titleStyle: {
fontSize: any;
color: any;
fontWeight: any;
};
description: any;
descriptionStyle: {
fontSize: any;
color: any;
fontWeight: any;
};
icon?: any;
backgroundColor?: any;
}

export function MobilityCard(props: MobilityCardProps) {

return (
<Grid item xs={props?.gridstyle?.size}
margin={props?.gridstyle?.margin}>
<Card
elevation={1}
sx={{ padding: 1.25, backgroundColor:
props?.backgroundColor }}
>
<Grid
item
sx={{
display: "flex",
justifyContent: "space-between",
}}
>
<Typography
fontSize={[Link]}
color={[Link]}
fontWeight={[Link]}
>
{[Link]}
</Typography>
{props?.icon}
</Grid>
 <Typography
fontSize={[Link]}
color={[Link]}
fontWeight={[Link]}
>
{[Link]}
</Typography>
</Card>
</Grid>
);
}

19] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import { Chip } from "@mui/material";
import { text } from "stream/consumers";
import {
BLUE_A200,
GRAY_200,
GRAY_800,
GRAY_900,
GREEN_200,
RED_A200,
} from "../Constants/CommonConstants";

export interface MobilityChipProps {

label?: any;
clickable?: boolean;
disabled?: boolean;
icon?: any;
color?: any;
size?: any;
type?: any;
onClick?: (event: [Link]<HTMLDivElement>) => void;
}

export function MobilityChip(props: MobilityChipProps) {

let textColor: any = "primary";
switch (props?.label?.toLowerCase()) {
case "pending":
case "offline":
textColor = "warning";
break;
case "approved":
case "approve":
case "active":
case "completed":
case "available":
textColor = "success";
break;
case "rejected":
case "reject":
case "inactive":
case "nodriverfound":
case "busy":
textColor = "error";
break;
case "ongoing":
textColor = "info";
break;
default:
break;
}
 return props?.clickable ? (
<Chip
size={"small"}
color={props?.color ? props?.color : textColor}
label={props?.label}
onClick={props?.onClick}
icon={props?.icon}
disabled={props?.disabled}
/>
) : (
<Chip
size={props?.size ? props?.size : "small"}
color={props?.color ? props?.color : textColor}
label={props?.label}
disabled={props?.disabled}
sx={
props?.size === "medium"
? { fontSize: 16, marginRight: 1, fontWeight:
600 }
: {
fontSize: 14,
margin: 0.25,
padding: 0.5,
color:
props?.type === "broadcast"
? GRAY_900
: props?.type ===
"transaction"
? GRAY_900
: props?.label === "init"
? GRAY_900
: textColor,
backgroundColor:
props?.type === "broadcast"
? GRAY_200
: props?.type ===
"broadcastReceivedBy"
? GRAY_800
: props?.type ===
"acceptedBy"
? BLUE_A200
: props?.type ===
"assigned"
? RED_A200
: props?.type ===
"transaction"
? GREEN_200
: props?.label === "init"
? GRAY_200
: props?.label ===
"confirm"
? GRAY_800
: textColor,
}
}
/>
);
}

20] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import * as React from "react";
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 { AppContext } from "../Context/AppContext";
import { styled } from "@mui/material/styles";
import { IconButton, Typography } from "@mui/material";
import { Close } from "@mui/icons-material";
import MobilityButton from "./MobilityButton";
import MobilityTextField from "./MobilityTextField";
import { useState } from "react";

export interface MobilityConfirmDialogProps {

dialog?: MobilityConfirmDialogProp;
}

export interface MobilityConfirmDialogProp {

showButton?: boolean | true;
action?: string;
open?: boolean;
title?: string;
message?: string;
onYesClick?: (
event: [Link]<HTMLButtonElement>,
param?: string
) => void;
onNoClick?: (event: [Link]<HTMLButtonElement>) => void;
}

const BootstrapDialog = styled(Dialog)(({ theme }) => ({

"& .MuiDialogContent-root": {
padding: [Link](2),
},
"& .MuiDialogActions-root": {
padding: [Link](1),
},
}));

export default function MobilityConfirmDialog(

props: MobilityConfirmDialogProps
) {
const [rejectReason, setRejectReason] = useState<string>("");
let myContext = [Link](AppContext);
const { dialog } = props;

function handleOnClose() {
[Link]({ open: false });
setRejectReason("");
}

function handleOnYes(event: any) {

if (dialog?.onYesClick) {
dialog?.onYesClick(event, rejectReason);
}
handleOnClose();
}
if (dialog && (dialog?.showButton == undefined)) {
[Link] = true
}

return (
<[Link]>
<BootstrapDialog open={dialog?.open ? dialog?.open : false}>
<DialogTitle sx={{ m: 0, p: 2 }} style={{ fontWeight:
600 }}>
 {dialog?.title}
</DialogTitle>
<IconButton
onClick={handleOnClose}
sx={{
position: "absolute",
right: 8,
top: 8,
color: (theme) => [Link][500],
}}
>
<Close />
</IconButton>
<DialogContent>
<Typography>{dialog?.message}</Typography>
{dialog?.action === "Rejected" && (
<>
<Typography sx={{ marginBottom: 3 }}>
If yes, please enter reject
reason
</Typography>
<MobilityTextField
label={"Reject Reason"}
type={"text"}
name={"rejectReason"}
value={rejectReason}
onChange={function (
event:
[Link]<HTMLInputElement>
): void {

setRejectReason([Link]);
}}
/>
</>
)}
</DialogContent>
{dialog?.showButton ?
<[Link]><DialogActions
sx={{
marginRight: 1,
marginBottom: 1,
}}
>
<MobilityButton
label="No"
variant="outlined"
onClick={handleOnClose}
/>
<MobilityButton label="Yes"
onClick={handleOnYes} />
</DialogActions></[Link]> :
<[Link]><DialogActions sx={{
marginRight: 1,
marginBottom: 1,
}}>
<MobilityButton
label="Close"
variant="outlined"
onClick={handleOnClose}
/></DialogActions></[Link]>}
</BootstrapDialog>
</[Link]>
);
}

21] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import {
DateValidationError,
PickerChangeHandlerContext,
} from "@mui/x-date-pickers";
import dayjs, { Dayjs } from "dayjs";

interface MobilityDatePickerProps {
label: string;
value?: any;
minDate?: any;
maxDate?: any;
onChange?: (
value: Dayjs | null,
context: PickerChangeHandlerContext<DateValidationError>
) => void;
}
function MobilityDatePicker(props: MobilityDatePickerProps) {
const shouldDisableDate = (date: Dayjs) => {
// Disable all days except Mondays
[Link]("21 [Link]()", [Link]());
return [Link]() !== 2; // Monday is 1, Sunday is 0, Saturday is 6
};
return (
<DatePicker
//shouldDisableDate={shouldDisableDate}
closeOnSelect={true}
label={[Link]}
minDate={props?.minDate}
maxDate={props?.maxDate || dayjs(new Date())}
onChange={props?.onChange}
views={["year", "month", "day"]}
format={"DD/MM/YYYY"}
defaultValue={props?.value ? props?.value : dayjs(new
Date().toString())}
/>
);
}

export default MobilityDatePicker;

22] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import dayjs, { Dayjs } from "dayjs";
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
import {
DateTimeValidationError,
PickerChangeHandlerContext,
} from "@mui/x-date-pickers";

interface MobilityDateTimePickerProps {
label: string;
value?: any;
defaultDate?: any;
onChange?: (
value: Dayjs | null,
context: PickerChangeHandlerContext<DateTimeValidationError>
) => void;
}
export default function MobilityDateTimePicker(
props: MobilityDateTimePickerProps
) {
//[Link]("21", props?.defaultDate);
return (
<DateTimePicker
closeOnSelect={true}
label={[Link]}
defaultValue={
props?.defaultDate
? dayjs(props?.defaultDate)
: dayjs(new Date().toString())
}
onChange={props?.onChange}
/>
);
}
23] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import { Grid, Typography } from "@mui/material";

export interface MobilityEmptyMsg {

message: string;
}
function MobilityEmptyMsg(props: MobilityEmptyMsg) {
return (
<Grid style={{ marginTop: 20, height: 50, textAlign: "center" }}>
<Typography>{[Link]}</Typography>
</Grid>
);
}

export default MobilityEmptyMsg;

24] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
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";

const TAX_RATE = 0.07;

function ccyFormat(num: number) {

return `${[Link](2)}`;
}

function priceRow(qty: number, unit: number) {

return qty * unit;
}

function createRow(desc: string, qty: number, unit: number) {

const price = priceRow(qty, unit);
return { desc, qty, unit, price };
}

interface Row {
desc: string;
qty: number;
unit: number;
price: number;
}

function subtotal(items: readonly Row[]) {

return [Link](({ price }) => price).reduce((sum, i) => sum + i, 0);
}

const rows = [
createRow("Paperclips (Box)", 100, 1.15),
createRow("Paper (Case)", 10, 405.99),
createRow("Waste Basket", 2, 17.99),
];

const invoiceSubtotal = subtotal(rows);

const invoiceTaxes = TAX_RATE * invoiceSubtotal;
const invoiceTotal = invoiceTaxes + invoiceSubtotal;

export default function MobilityFairTable() {

return (
<TableContainer component={Paper}>
<Table aria-label="spanning table">
<TableHead>
<TableRow>
<TableCell
align="center">Details</TableCell>
<TableCell align="right">Price</TableCell>
</TableRow>
</TableHead>
<TableBody>
{[Link]((row) => (
<TableRow key={[Link]}>
<TableCell>{[Link]}</TableCell>
{/* <TableCell
align="right">{[Link]}</TableCell>*/}
{/* <TableCell>{[Link]}</TableCell>
*/}
<TableCell
align="right">{ccyFormat([Link])}</TableCell>
</TableRow>
))}
<TableRow>
{/* <TableCell rowSpan={3} /> */}
<TableCell>Subtotal</TableCell>
<TableCell
align="right">{ccyFormat(invoiceSubtotal)}</TableCell>
</TableRow>
<TableRow>
<TableCell>Tax (5 %)</TableCell>
<TableCell
align="right">{ccyFormat(invoiceTaxes)}</TableCell>
</TableRow>
<TableRow>
<TableCell>Total</TableCell>
<TableCell
align="right">{ccyFormat(invoiceTotal)}</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
);
}

25] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import { Button, Grid, Link, Tooltip, Typography } from "@mui/material";
import React, { useEffect } from "react";
import MobilityImg from "./MobilityImg";
import { formatDate } from "../../CustomUtils/DateTimeUtils";
import _, { isEmpty } from "lodash";
import { useNavigate } from "react-router-dom";
import MobilityTextField from "./MobilityTextField";
import MobilityButton from "./MobilityButton";
import dayjs, { Dayjs } from "dayjs";
import {
DateValidationError,
PickerChangeHandlerContext,
} from "@mui/x-date-pickers";
import MobilityDatePicker from "./MobilityDatePicker";
import { GET_DRIVER_DOCUMENT } from "../ApiServices/ApiConstants";
import { apiHandler } from "../ApiServices/ApiHandler";
import { AppContext } from "../Context/AppContext";
import { ShowSnackbarFailure } from "./MobilitySnackBar";

export interface MobilityHeadingValueProps {

heading: any;
value?: any;
linkUrl?: any;
imgUrl?: any;
docType?: any;
onDataSave?: any;
}
export function MobilityFareHeadingValue(props: MobilityHeadingValueProps) {
const FareHeadingValuePair: [Link]<{
heading: string;
value: string;
}> = ({ heading, value }) => (
<Grid container xs={12}>
<Grid textAlign={"left"} xs={6}>
<Typography variant="body2" component="div">
{heading}
</Typography>
</Grid>
<Grid textAlign={"left"} xs={6}>
<Typography variant="body2" component="div">
{" : " + value}
</Typography>
</Grid>
</Grid>
);
return (
<div>
<FareHeadingValuePair heading={[Link]}
value={[Link]} />
</div>
);
}

export function MobilityHeadingValue(props: MobilityHeadingValueProps) {

const navigate = useNavigate();
return (
<div>
<Grid container xs={12}>
<Grid textAlign={"left"} xs={3}>
<Typography variant="body2" component="div">
{props?.heading}
</Typography>
</Grid>

<Grid textAlign={"left"} xs={9}>

 {props?.linkUrl ? (
<Typography variant="body2" component="div">
{" : "}
<Tooltip title="Click to View
Details">
<Button
color="primary"
sx={{
height: 20,
fontSize: 14,
padding: 0,
margin: 0,
textTransform:
"initial",
}}
onClick={() => {

navigate(props?.linkUrl);
}}
>
{props?.value}
</Button>
</Tooltip>
</Typography>
) : (
<Typography variant="body2" component="div">
{" : " + props?.value}
</Typography>
)}
</Grid>

{/* {props?.docType?.toString() === "DL" && (

<Grid textAlign={"right"} xs={9}>
<Grid textAlign={"left"} xs={9}
sx={{ paddingBottom: 1 }}>
{props?.heading?.toString() ===
"Status" && (
<Typography variant="body2"
component="div">
{" : " + props?.value}
</Typography>
)}
{props?.heading?.toString() ===
"Rejected Reason" && (
<Typography variant="body2"
component="div">
{" : " + props?.value}
</Typography>
)}
</Grid>

{props?.heading?.toString() === "Doc.

Number" && (
<MobilityTextField
key={props?.heading}
label={""}
name={"address"}
value={docNumber}
size={"small"}
type={""}
maxLength={20}
onChange={function (
event:
[Link]<HTMLInputElement>
 ): void {

setDocNumber([Link] as string);
}}
></MobilityTextField>
)}

{props?.heading?.toString() === "Doc. Expiry

Date" && (
<MobilityTextField
key={props?.heading}
label={""}
name={"number"}
value={docNumber}
size={"small"}
type={""}
maxLength={10}
onChange={function (
event:
[Link]<HTMLInputElement>
): void {

setDocNumber([Link] as string);
}}
></MobilityTextField>
)}

{props?.heading?.toString() === "Date of

Birth" && (
<MobilityTextField
key={props?.heading}
label={""}
name={"number"}
value={docNumber}
size={"small"}
type={""}
maxLength={10}
onChange={function (
event:
[Link]<HTMLInputElement>
): void {

setDocNumber([Link] as string);
}}
></MobilityTextField>
)}
</Grid>
)} */}
</Grid>
</div>
);
}

export function MobilityImgHeading(props: MobilityHeadingValueProps) {

let myContext = [Link](AppContext);
const [imgBase64, setImageBase64] = [Link]("");
const [docNumber, setDocNumber] = [Link]<string>(
props?.heading?.docNumber
);
const [expiryDate, setExpiryDate] = [Link]<string | undefined>(
props?.heading?.expiryDate
);
const [dob, setDob] = [Link]<string | undefined>(
props?.heading?.dateOfBirth
);

//[Link]("178 url", props?.imgUrl);

useEffect(() => {
fetchData();
}, []);

const fetchData = async (inputValue?: any, isDownload = false) => {

try {
// [Link]({
// isLoading: true,
// message: "Getting Driver Images...",
// });

//[Link]("183 url", props?.imgUrl);

const response = await [Link](props?.imgUrl);

if (!isEmpty(response)) {
const image = response?.data?.data;
[Link]("196 image", image);
setImageBase64(image);
} else {
//ShowSnackbarFailure(response, myContext);
}
} catch (error) {
//ShowSnackbarFailure(error, myContext);
} finally {
// [Link]({
// isLoading: false,
// });
}
};

return (
<Grid container>
{props?.heading?.docType?.toString() !== "DL" &&
props?.heading?.docType?.toString() !== "RC" && (
<Grid xs={12} sx={{ marginTop: 1 }}>
<MobilityHeadingValue
heading={"Status"}
value={props?.[Link]}
docType={props?.heading?.docType}
/>
{props?.[Link] && (
<MobilityHeadingValue
heading={"Rejected Reason"}

value={props?.[Link]}
docType={props?.heading?.docType}
/>
)}
{props?.heading?.docNumber && (
<MobilityHeadingValue
heading={"Doc. Number"}
value={props?.heading?.docNumber}
docType={props?.heading?.docType}
/>
)}
{props?.heading?.expiryDate && (
<MobilityHeadingValue
heading={"Doc. Expiry Date"}

value={formatDate(props?.heading?.expiryDate)}
 docType={props?.heading?.docType}
/>
)}
{props?.heading?.dateOfBirth && (
<MobilityHeadingValue
heading={"Date of Birth"}

value={formatDate(props?.heading?.dateOfBirth)}
docType={props?.heading?.docType}
/>
)}
</Grid>
)}

{props?.heading?.docType?.toString() === "DL" && (

<Grid xs={12} sx={{ marginTop: 1 }}>
{props?.[Link] && (
<Grid container xs={12}>
<Grid textAlign={"left"} xs={3}>
<Typography variant="body2"
component="div">
{"Status"}
</Typography>
</Grid>
<Grid textAlign={"left"} xs={9}>
<Typography variant="body2"
component="div">
{" : " +
props?.heading?.status?.toString()}
</Typography>
</Grid>
</Grid>
)}

{props?.[Link] && (
<Grid container xs={12}>
<Grid textAlign={"left"} xs={3}>
<Typography variant="body2"
component="div">
{"Reject Reason"}
</Typography>
</Grid>
<Grid textAlign={"left"} xs={9}>
<Typography variant="body2"
component="div">
{" : " +
props?.heading?.rejectReason?.toString()}
</Typography>
</Grid>
</Grid>
)}

{props?.heading?.docNumber && (
<Grid container xs={12} marginTop={1}>
<Grid textAlign={"left"} xs={3}>
<Typography variant="body2"
component="div">
{"DL Number"}
</Typography>
</Grid>
{": "}
<Grid textAlign={"left"} width={235}
marginLeft={0.5}>
<MobilityTextField
 key={props?.heading}
label={""}
name={"number"}
value={docNumber}
size={"small"}
type={""}
maxLength={16}
onChange={function (
event:
[Link]<HTMLInputElement>
): void {

setDocNumber(([Link] as string).toUpperCase());
}}
></MobilityTextField>
</Grid>
</Grid>
)}

{props?.heading?.expiryDate && (
<Grid container xs={12} marginTop={1}>
<Grid textAlign={"left"} xs={3}>
<Typography variant="body2"
component="div">
{"Doc. Expiry Date"}
</Typography>
<Typography component="div" sx={{
fontSize: 12 }}>
{"(DD/MM/YYYY)"}
</Typography>
</Grid>
{": "}
<Grid textAlign={"left"} xs={8}
marginLeft={0.5}>
<Grid item>
<MobilityDatePicker
label=""
minDate={dayjs(new
Date())}

value={dayjs(expiryDate)}
onChange={(
value: Dayjs |
null,
context:
PickerChangeHandlerContext<DateValidationError>
) => {

setExpiryDate(value?.toString());
}}
/>
</Grid>
</Grid>
</Grid>
)}

{props?.heading?.dateOfBirth && (
<Grid container xs={12} marginTop={1}>
<Grid textAlign={"left"} xs={3}>
<Typography variant="body2"
component="div">
{"Date of Birth"}
</Typography>
<Typography component="div" sx={{
fontSize: 12 }}>
{"(DD/MM/YYYY)"}
</Typography>
</Grid>
{": "}
<Grid textAlign={"left"} xs={8}
marginLeft={0.5}>
<MobilityDatePicker
label=""
value={dayjs(dob)}
maxDate={dayjs(new Date())}
onChange={(
value: Dayjs | null,
context:
PickerChangeHandlerContext<DateValidationError>
) => {

setDob(value?.toString());
}}
/>
</Grid>
</Grid>
)}

<Grid container xs={12} marginTop={1}

marginLeft={0.5}>
<Grid textAlign={"left"} xs={3}>
<Typography variant="body2"
component="div"></Typography>
</Grid>
<Grid textAlign={"left"} xs={9}>
<MobilityButton
label={"Save Driving License
Data"}
onClick={function (
event:
[Link]<HTMLButtonElement, MouseEvent>
): void {
let docId =
props?.heading?.docId;
let docType =
props?.heading?.docType;
props?.onDataSave(event, {
docId,
docType,
docNumber,
expiryDate,
dob,
});
}}
/>
</Grid>
</Grid>
</Grid>
)}

{props?.heading?.docType?.toString() === "RC" && (

<Grid xs={12} sx={{ marginTop: 1 }}>
{props?.[Link] && (
<Grid container xs={12}>
<Grid textAlign={"left"} xs={3}>
<Typography variant="body2"
component="div">
{"Status"}
 </Typography>
</Grid>
<Grid textAlign={"left"} xs={9}>
<Typography variant="body2"
component="div">
{" : " +
props?.heading?.status?.toString()}
</Typography>
</Grid>
</Grid>
)}

{props?.[Link] && (
<Grid container xs={12}>
<Grid textAlign={"left"} xs={3}>
<Typography variant="body2"
component="div">
{"Reject Reason"}
</Typography>
</Grid>
<Grid textAlign={"left"} xs={9}>
<Typography variant="body2"
component="div">
{" : " +
props?.heading?.rejectReason?.toString()}
</Typography>
</Grid>
</Grid>
)}

{props?.heading?.docNumber && (
<Grid container xs={12} marginTop={1}>
<Grid textAlign={"left"} xs={3}>
<Typography variant="body2"
component="div">
{"Reg. Number"}
</Typography>
</Grid>
{/* <Grid textAlign={"left"} xs={9}>
<Typography variant="body2"
component="div">
{" : " +
props?.heading?.docNumber?.toString()}
</Typography>
</Grid> */}
{": "}
<Grid textAlign={"left"} width={230}
marginLeft={0.5}>
<MobilityTextField
key={props?.heading}
label={""}
name={"number"}
value={docNumber}
size={"small"}
type={""}
maxLength={13}
onChange={function (
event:
[Link]<HTMLInputElement>
): void {

setDocNumber([Link] as string);
}}
></MobilityTextField>
 </Grid>
</Grid>
)}

{props?.heading?.expiryDate && (
<Grid container xs={12} marginTop={1}>
<Grid textAlign={"left"} xs={3}>
<Typography variant="body2"
component="div">
{"RC Expiry Date"}
</Typography>
<Typography component="div" sx={{
fontSize: 12 }}>
{"(DD/MM/YYYY)"}
</Typography>
</Grid>
{": "}
<Grid textAlign={"left"} xs={8}
marginLeft={0.5}>
<Grid item>
<MobilityDatePicker
label=""
minDate={dayjs(new
Date())}

value={dayjs(expiryDate)}
onChange={(
value: Dayjs |
null,
context:
PickerChangeHandlerContext<DateValidationError>
) => {

setExpiryDate(value?.toString());
}}
/>
</Grid>
</Grid>
</Grid>
)}

<Grid container xs={12} marginTop={1}

marginLeft={0.5}>
<Grid textAlign={"left"} xs={3}>
<Typography variant="body2"
component="div"></Typography>
</Grid>
<Grid textAlign={"left"} xs={9}>
<MobilityButton
label={"Save RC Data"}
onClick={function (event: any):
void {
let docId =
props?.heading?.docId;
let docType =
props?.heading?.docType;
props?.onDataSave(event, {
docId,
docType,
docNumber,
});
}}
/>
</Grid>
 </Grid>
</Grid>
)}

<Grid
xs={12}
container
sx={{ marginTop: 1, marginLeft: 5 }}
justifyContent="center"
alignItems="center"
>
<MobilityImg imgUrl={imgBase64} />
</Grid>
</Grid>
);
}

26] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import {
Close,
RotateLeft,
RotateRight,
ZoomIn,
ZoomOut,
} from "@mui/icons-material";
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
IconButton,
} from "@mui/material";
import Paper, { PaperProps } from "@mui/material/Paper";
import Draggable from "react-draggable";
import React, { useState } from "react";
import { MobilityChip } from "./MobilityChip";
import env from "../../config/env";
import { AppContext } from "../Context/AppContext";
import { apiHandler } from "../ApiServices/ApiHandler";
import {
GET_DRIVERS_LIST,
GET_DRIVER_DOCUMENT,
} from "../ApiServices/ApiConstants";
import { isEmpty } from "lodash";
import { ShowSnackbarFailure } from "./MobilitySnackBar";
const BASE_URL: string = env.API_BASE_URL;

export interface MobilityImgProps {

imgUrl: string;
}

function MobilityImg(props: MobilityImgProps) {

const [open, setOpen] = [Link](false);
const [selectedValue, setSelectedValue] = [Link](emails[1]);

const handleClose = (value: string) => {

setOpen(false);
setSelectedValue(value);
};

//[Link]("47", props?.imgUrl);
 function base64ToBlob(base64String: string, contentType = "") {
const byteCharacters = atob(base64String);
const byteArrays = [];

for (let i = 0; i < [Link]; i++) {

[Link]([Link](i));
}

const byteArray = new Uint8Array(byteArrays);

return new Blob([byteArray], { type: contentType });
}

return (
<div>
<div>
<img
//src={`${BASE_URL}/${[Link]}`}
//crossOrigin="anonymous"
src={`data:image/jpeg;base64,${props?.imgUrl}`}
height={200}
width={300}
></img>
</div>

<ImageDialog
imageUrl={`${BASE_URL}/${[Link]}`}
selectedValue={selectedValue}
open={open}
onClose={handleClose}
/>

<div
style={{
display: "flex",
flex: 1,
alignItems: "flex-end",
}}
>
<MobilityChip
icon={<ZoomIn />}
clickable={true}
label="Zoom Image"
onClick={(e: any) => {
let blob = base64ToBlob(props?.imgUrl,
"image/jpeg");
var fileURL =
[Link](blob);
let tab = [Link]("", "_blank",
"width=600,height=600");
if (tab) {
[Link] = fileURL;
}
}}
/>
</div>
</div>
);
}

export default MobilityImg;

const emails = ["username@[Link]", "user02@[Link]"];

export interface ImageDialogProps {

 open: boolean;
imageUrl: string;
selectedValue?: any;
onClose: (value: any) => void;
}

function ImageDialog(props: ImageDialogProps) {

const { onClose, selectedValue, open } = props;
const [rotate, setRotate] = useState(0);
const [zoom, setZoom] = useState(1);

const handleClose = () => {

onClose(selectedValue);
};

function PaperComponent(props: PaperProps) {

return (
<Draggable
handle="#draggable-dialog-title"
cancel={'[class*="MuiDialogContent-root"]'}
>
<Paper {...props} />
</Draggable>
);
}

return (
<Dialog
open={open}
onClose={handleClose}
PaperComponent={PaperComponent}
aria-labelledby="draggable-dialog-title"
>
<DialogTitle
style={{ cursor: "move" }}
id="draggable-dialog-title"
sx={{ backgroundColor: "#eaeaea" }}
>
Subscribe
</DialogTitle>
<IconButton
aria-label="close"
onClick={handleClose}
sx={{
position: "absolute",
right: 8,
top: 16,
}}
>
<Close />
</IconButton>
<DialogContent>
{/* <DialogContentText>
To subscribe to this website, please enter your
email address here. We
will send updates occasionally.
</DialogContentText> */}
<div>
<img
src={props?.imageUrl}
crossOrigin="anonymous"
//
src={require("../../assets/Logo_digital.png")}
style={{
 transform: `rotate(${rotate}deg)
scale(${zoom})`,
maxHeight: "80vh",
}}
/>
</div>
</DialogContent>
<DialogActions
sx={{ backgroundColor: "#eaeaea", justifyContent:
"center" }}
>
<IconButton
onClick={() => {
setRotate(rotate - 90);
}}
>
<RotateLeft />
</IconButton>
<IconButton
onClick={() => {
setRotate(rotate + 90);
}}
>
<RotateRight />
</IconButton>

<IconButton
onClick={() => {
setZoom(zoom === 2 ? zoom : zoom + 0.25);
}}
>
<ZoomIn />
</IconButton>
<IconButton
onClick={() => {
setZoom(zoom === 0.25 ? zoom : zoom - 0.25);
}}
>
<ZoomOut />
</IconButton>
</DialogActions>
</Dialog>
// <Dialog onClose={handleClose} open={open}
PaperComponent={PaperComponent}>
// <DialogTitle sx={{ backgroundColor: "#eaeaea" }}>
// Image Viewer
// </DialogTitle>
// <IconButton
// aria-label="close"
// onClick={handleClose}
// sx={{
// position: "absolute",
// right: 8,
// top: 16,
// }}
// >
// <Close />
// </IconButton>
// <DialogContent>
// <div>
// <img
// //src={props?.imageUrl}
//
src={require("../../assets/Logo_digital.png")}
 // style={{
// transform: `rotate(${rotate}deg)
scale(${zoom})`,
// maxHeight: "80vh",
// }}
// />
// </div>
// </DialogContent>
// <DialogActions
// sx={{ backgroundColor: "#eaeaea", justifyContent:
"center" }}
// >
// <IconButton
// onClick={() => {
// setRotate(rotate - 90);
// }}
// >
// <RotateLeft />
// </IconButton>
// <IconButton
// onClick={() => {
// setRotate(rotate + 90);
// }}
// >
// <RotateRight />
// </IconButton>

// <IconButton
// onClick={() => {
// setZoom(zoom === 2 ? zoom : zoom + 0.25);
// }}
// >
// <ZoomIn />
// </IconButton>
// <IconButton
// onClick={() => {
// setZoom(zoom === 0.25 ? zoom : zoom - 0.25);
// }}
// >
// <ZoomOut />
// </IconButton>
// </DialogActions>
// </Dialog>
);
}

27] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import React from "react";
import {
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
Tooltip,
} from "@mui/material";
import { MenuItemProps } from "./NavigationDrawerNew";

export interface MobilityListProps {

items: MenuItemProps[];
}

function MobilityList(props: MobilityListProps) {

 const [selectedIndex, setSelectedIndex] = [Link](1);

let itemsList = [Link]((item: MenuItemProps) => {

return (
<ListItem
key={[Link]}
disablePadding
sx={{
display: "block",
color: selectedIndex === [Link] ? "#1976d2" : "",
}}
>
<ListItemButton
selected={selectedIndex === [Link]}
onClick={(event: [Link]<HTMLDivElement>)
=> {
setSelectedIndex([Link]);
[Link](event);
}}
sx={{
minHeight: 48,
justifyContent: "initial",
px: 2.5,
}}
>
<Tooltip title={[Link]}>
<ListItemIcon
sx={{
minWidth: 0,
mr: 3,
justifyContent: "center",
color: selectedIndex ===
[Link] ? "#1976d2" : "",
}}
>
{[Link]}
</ListItemIcon>
</Tooltip>

<ListItemText>
<div
style={{
fontWeight: selectedIndex ===
[Link] ? "bolder" : "normal",
}}
>
{[Link]}
</div>
</ListItemText>
</ListItemButton>
</ListItem>
);
});
return <List>{itemsList}</List>;
}

export default MobilityList;

28] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import React from "react";
import { ListItemIcon, MenuItem, Typography } from "@mui/material";
import {
Assignment,
 BorderColorOutlined,
CancelOutlined,
CarRental,
Delete,
DocumentScanner,
DriveEta,
TaskAlt,
Visibility,
} from "@mui/icons-material";

interface MobilityListItemProps {
label?: any;
icon?: any;
color?: any;
disabled?: boolean;
onClick?: (event: [Link]<HTMLLIElement>) => void;
}

function MobilityListItem(props: MobilityListItemProps) {

return (
<MenuItem onClick={props?.onClick}>
<ListItemIcon>{[Link]}</ListItemIcon>
{[Link]}
</MenuItem>
);
}

export default MobilityListItem;

export function MobilityListItemEdit(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<BorderColorOutlined fontSize="small" color="primary"
/>}
/>
);
}

export function MobilityListItemReject(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<CancelOutlined fontSize="small" color="error" />}
/>
);
}

export function MobilityListItemView(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<Visibility fontSize="small" color="info" />}
/>
);
}

export function MobilityListItemApprove(props: MobilityListItemProps) {

 return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<TaskAlt fontSize="small" color="success" />}
/>
);
}

export function MobilityListItemVehicle(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<DriveEta fontSize="small" color="primary" />}
/>
);
}

export function MobilityListItemDocuments(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<Assignment fontSize="small" color="primary" />}
/>
);
}

export function MobilityListItemDelete(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<Delete fontSize="small" color="error" />}
/>
);
}

29] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import { Backdrop, CircularProgress, Grid, Typography } from "@mui/material";
export interface MobilityLoaderProps {
loader?: MobilityLoaderProp;
}

export interface MobilityLoaderProp {

isLoading?: boolean;
message?: string;
}

function MobilityLoader(props: MobilityLoaderProps) {

return (
<Backdrop
sx={{ color: "white", zIndex: (theme) => [Link] +
1 }}
open={props?.loader?.isLoading ? props?.loader?.isLoading :
false}
>
<Grid
 sx={{
backgroundColor: "#D7DBDD",
padding: 2,
}}
>
<Grid
container
direction={"column"}
alignItems={"center"}
rowGap={1}
justifyContent={"center"}
>
<CircularProgress color="primary" />
<Typography
color="primary"
fontWeight={600}
marginTop={1}
fontSize={18}
>
{props?.loader?.message ?
props?.loader?.message : "Please wait..."}
</Typography>
</Grid>
</Grid>
</Backdrop>
);
}

export default MobilityLoader;

30] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import React, { PureComponent } from "react";
import { PieChart, Pie, Sector, Cell, ResponsiveContainer } from "recharts";

const data = [
{ name: "Group A", value: 400 },
{ name: "Group B", value: 300 },
{ name: "Group C", value: 300 },
{ name: "Group D", value: 200 },
];

const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];

const RADIAN = [Link] / 180;

const renderCustomizedLabel = ({
cx,
cy,
midAngle,
innerRadius,
outerRadius,
percent,
index,
}) => {
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
const x = cx + radius * [Link](-midAngle * RADIAN);
const y = cy + radius * [Link](-midAngle * RADIAN);

return (
<text
x={x}
y={y}
fill="white"
textAnchor={x > cx ? "start" : "end"}
 dominantBaseline="central"
>
{`${(percent * 100).toFixed(0)}%`}
</text>
);
};

export default class Example extends PureComponent {

static demoUrl =
"[Link]

render() {
return (
<ResponsiveContainer width="100%" height="100%">
<PieChart width={400} height={400}>
<Pie
data={data}
cx="50%"
cy="50%"
labelLine={false}
label={renderCustomizedLabel}
outerRadius={80}
fill="#8884d8"
dataKey="value"
>
{[Link]((entry, index) => (
<Cell
key={`cell-${index}`}
fill={COLORS[index %
[Link]]}
/>
))}
</Pie>
</PieChart>
</ResponsiveContainer>
);
}
}

31] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import {
FormControl,
InputLabel,
MenuItem,
Select,
SelectChangeEvent,
} from "@mui/material";

interface MobilitySelectProps {
label: string;
value: HTMLSelectElement;
disabled?: boolean;
statusOptions: string[];
size?: any;
onChange: (event: SelectChangeEvent<HTMLSelectElement>) => void;
}

function MobilitySelect(props: MobilitySelectProps) {

return (
<FormControl
fullWidth
variant="outlined"
disabled={props?.disabled}
 size={props?.size ? props?.size : "medium"}
>
<InputLabel>{[Link]}</InputLabel>
<Select
style={{ textAlign: "start" }}
label={[Link]}
value={[Link]}
onChange={[Link]}
>
{[Link]((status) => (
<MenuItem key={status} value={status}>
{status}
</MenuItem>
))}
</Select>
</FormControl>
);
}

export default MobilitySelect;

32] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import * as React from "react";
import Stack from "@mui/material/Stack";
import Snackbar from "@mui/material/Snackbar";
import MuiAlert, { AlertColor, AlertProps } from "@mui/material/Alert";
import { AppContext, AppContextPropTypes } from "../Context/AppContext";
import env from "../../config/env";
import { useUserDispatch } from "../../CustomUtils/usercontext";
import { setCommentRange } from "typescript";

export interface MobilitySnackbarProps {

snackbar: MobilitySnackbarProp;
}

export interface MobilitySnackbarProp {

open?: boolean;
message?: string;
severity?: AlertColor;
handleOnClose?: (event: [Link] | Event) => void;
}

const Alert = [Link]<HTMLDivElement, AlertProps>(function Alert(

props,
ref
) {
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});

function MobilitySnackbar(props: MobilitySnackbarProps) {

let myContext = [Link](AppContext);
function handleOnClose() {
[Link]({ open: false });
}
return (
<Stack spacing={2} sx={{ width: "100%" }}>
{props?.[Link] && (
<Snackbar
open={props?.[Link] ?
props?.[Link] : false}
autoHideDuration={2000}
onClose={handleOnClose}
anchorOrigin={{ vertical: "top", horizontal:
"center" }}
>
<Alert
onClose={handleOnClose}
severity={props?.snackbar?.severity}
sx={{ width: "100%" }}
>
{props?.snackbar?.message}
</Alert>
</Snackbar>
)}
</Stack>
);
}

export function ShowSnackbarSuccess(

response: any,
myContext: AppContextPropTypes
) {
let message = "";
if (response?.data?.data?.message) {
message = [Link](response?.data?.data?.message);
} else if (response?.data?.message) {
message = [Link](response?.data?.message);
} else if (response?.data) {
message = [Link](response?.data);
} else {
message = response;
}

[Link]({
open: true,
severity: "success",
message: message,
});
}

export function ShowSnackbarFailure(err: any, myContext: AppContextPropTypes) {

let message = "";
// const dispatch = useUserDispatch();
if (err?.response?.data?.error) {
message = [Link](err?.response?.data?.error);
//[Link]("81", message);
} else if (err?.response?.data?.message?.message) {
message = [Link](err?.response?.data?.message?.message);
//[Link]("84", message);
} else if (err?.response?.data) {
message = [Link](err?.response?.data);
} else if (err?.data) {
message = [Link](err?.data);
//[Link]("87", message);
} else if (err?.message) {
message = [Link](err?.message);
//[Link]("90", message);
} else {
message = err;
}

if (err?.response?.status === 410 || err?.response?.status === 401) {

message = [Link]('"', "") + " Please relogin to
continue.";
}

myContext?.setSnackbar({
 open: true,
severity: "error",
message: message,
});

if (err?.response?.status === 410 || err?.response?.status === 401) {

setTimeout(() => {
[Link] = env.LOGIN_REDIRECTION;
}, 2000);
}
}

export default MobilitySnackbar;

33] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import React, { useState } from "react";
import { IconButton, InputAdornment, TextField } from "@mui/material";
import VisibilityIcon from "@mui/icons-material/Visibility";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
import {
ValidateAccountNumber,
ValidateAddress,
ValidateEmail,
ValidateIfscCode,
ValidateMicrCode,
ValidateMobile,
ValidatePincode,
ValidateVehicleRegistrationNumber,
} from "../../CustomUtils/ValidationUtils";
import { Search } from "@mui/icons-material";

interface MobilityTextFieldProps {
label: string;
type: string;
name: string;
value: string;
required?: boolean;
disabled?: boolean;
maxLength?: number;
helperText?: string;
showPassword?: boolean;
fullWidth?: boolean;
multiline?: true;
size?: any;
onChange: (event: [Link]<HTMLInputElement>) => void;
onIconClick?: (event: [Link]<HTMLButtonElement>) => void;
}

function MobilityTextField(props: MobilityTextFieldProps) {

const [helperText, setHelperText] = useState<string>("");
const [error, setError] = useState<boolean>(false);

function validate(target: HTMLInputElement | HTMLTextAreaElement) {

switch ([Link]) {
case "phone":
if (ValidateMobile([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText("Please Enter Valid Mobile Number");
setError(true);
}
break;
 case "PinCode":
if (ValidatePincode([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText("Please Enter Valid Pin Code");
setError(true);
}
break;
case "IfscCode":
if (ValidateIfscCode([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText("Please Enter Valid Ifsc Code");
setError(true);
}
break;
case "MicrCode":
if (ValidateMicrCode([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText("Please Enter Valid Micr Code");
setError(true);
}
break;
case "email":
if (ValidateEmail([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText("Please Enter Valid Email Address");
setError(true);
}
break;
case "address":
if (ValidateAddress([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText("Please Enter Valid Address");
setError(true);
}
break;
case "accountNumber":
if (ValidateAccountNumber([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText("Please Enter Valid Account
Number");
setError(true);
}
break;
case "vehicleRegistrationNumber":
if (ValidateVehicleRegistrationNumber([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText("Please Enter Valid Registration
Number");
setError(true);
}
 break;
case "search":
break;
case "alphaNumeric":
break;
case "password":
break;
case "number":
break;
default:
// if (target?.value?.length > 0) {
// setHelperText("");
// setError(false);
// } else {
// setHelperText(`Please Enter Valid Value`);
// setError(true);
// }
break;
}
}
return (
<TextField
fullWidth={props?.fullWidth === false ? false : true}
variant="outlined"
name={[Link]}
type={[Link]}
label={[Link]}
value={[Link]}
required={[Link]}
helperText={helperText}
error={error}
disabled={[Link] ? [Link] : false}
size={
props?.size
? props?.size
: props?.name === "search"
? "small"
: "medium"
}
onChange={(event: [Link]<HTMLInputElement>) => {
validate([Link]);
[Link](event);
}}
multiline={props?.multiline ? props?.multiline : false}
inputProps={
[Link]
? {
maxLength: [Link],
}
: { maxLength: 100 }
}
InputProps={
props?.name === "password"
? {
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="Toggle
Password Visibility"

onClick={props?.onIconClick}
>

{props?.showPassword ? (
 <VisibilityIcon
/>
) : (

<VisibilityOffIcon />
)}
</IconButton>
</InputAdornment>
),
}
: props?.name === "search"
? {
endAdornment: (
<InputAdornment position="end">
<IconButton
onClick={props?.onIconClick}>
<Search />
</IconButton>
</InputAdornment>
),
}
: {}
}
/>
);
}

export default MobilityTextField;

34] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import * as React from "react";
import { styled, useTheme, Theme, CSSObject } from "@mui/material/styles";
import Box from "@mui/material/Box";
import MuiDrawer from "@mui/material/Drawer";
import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import List from "@mui/material/List";
import CssBaseline from "@mui/material/CssBaseline";
import Divider from "@mui/material/Divider";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import { useNavigate } from "react-router";
import MobilityList from "./MobilityList";
import {
AirlineSeatReclineNormal,
BugReport,
ElectricCar,
DriveEta,
Logout,
NoCrash,
ReportProblem,
Dashboard,
Assessment,
CarCrash,
Map,
MapsHomeWork,
LocalActivity,
LocationCity,
BroadcastOnHome,
Pending,
 TaxiAlert,
MinorCrash,
} from "@mui/icons-material";
import { Card, Typography } from "@mui/material";
import Cookies from "js-cookie";
import { useUserDispatch } from "../../CustomUtils/usercontext";
import env from "../../config/env";
import { MobilityButtonIcon } from "./MobilityButtonIcon";
import logo from "../../assets/Logo_digital.png";
import {
getCookies,
removeCookies,
setCookies,
} from "../../CustomUtils/CookiesUtils";
import { AppContext } from "../Context/AppContext";

const drawerWidth = 240;

const openedMixin = (theme: Theme): CSSObject => ({

width: drawerWidth,
transition: [Link]("width", {
easing: [Link],
duration: [Link],
}),
overflowX: "hidden",
});

const closedMixin = (theme: Theme): CSSObject => ({

transition: [Link]("width", {
easing: [Link],
duration: [Link],
}),
overflowX: "hidden",
width: `calc(${[Link](7)} + 1px)`,
[[Link]("sm")]: {
width: `calc(${[Link](8)} + 1px)`,
},
});

export const DrawerHeader = styled("div")(({ theme }) => ({

display: "flex",
alignItems: "center",
justifyContent: "center",
padding: [Link](0, 1),
// necessary for content to be below app bar
...[Link],
}));

export const DrawerHeaderIcon = styled("div")(({ theme }) => ({

display: "flex",
alignItems: "center",
justifyContent: "center",
padding: [Link](0, 1),
// necessary for content to be below app bar
...[Link],
}));

interface AppBarProps extends MuiAppBarProps {

open?: boolean;
}

const AppBar = styled(MuiAppBar, {

shouldForwardProp: (prop) => prop !== "open",
})<AppBarProps>(({ theme, open }) => ({
 zIndex: [Link] + 1,
transition: [Link](["width", "margin"], {
easing: [Link],
duration: [Link],
}),
...(open && {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: [Link](["width", "margin"], {
easing: [Link],
duration: [Link],
}),
}),
}));

const Drawer = styled(MuiDrawer, {

shouldForwardProp: (prop) => prop !== "open",
})(({ theme, open }) => ({
width: drawerWidth,
flexShrink: 0,
whiteSpace: "nowrap",
boxSizing: "border-box",
...(open && {
...openedMixin(theme),
"& .MuiDrawer-paper": openedMixin(theme),
}),
...(!open && {
...closedMixin(theme),
"& .MuiDrawer-paper": closedMixin(theme),
}),
}));

export interface MenuItemProps {

id: number;
lable: string;
icon: any;
isSelected: boolean;
onClick: (event: [Link]<HTMLDivElement>) => void;
}

export default function NavigationDrawerNew() {

let myContext = [Link](AppContext);

const statMenuItemsList: MenuItemProps[] = [

{
id: 1,
lable: "Dashboard",
isSelected: false,
icon: <Dashboard />,
onClick: (event: [Link]<HTMLDivElement>) => {
navigate("/dashboard");
},
},
{
id: 13,
lable: "Driver-Ride Stats",
isSelected: false,
icon: <Assessment />,
onClick: (event: [Link]<HTMLDivElement>) => {
navigate("/driver-ride-count");
},
},
];
const basicMenuItemsList: MenuItemProps[] = [
{
id: 1,
lable: "Dashboard",
isSelected: false,
icon: <Dashboard />,
onClick: (event: [Link]<HTMLDivElement>) => {
navigate("/dashboard");
},
},
{
id: 2,
lable: "Map View",
isSelected: false,
icon: <LocationCity />,
onClick: (event: [Link]<HTMLDivElement>) => {
navigate("/driver-search-map-view");
},
},
{
id: 4,
lable: "Drivers",
isSelected: false,
icon: <AirlineSeatReclineNormal />,
onClick: (event: [Link]<HTMLDivElement>) => {
navigate("/driver");
},
},
{
id: 5,
lable: "Vehicles",
icon: <DriveEta />,
isSelected: false,
onClick: (event: [Link]<HTMLDivElement>) => {
navigate("/vehicle");
},
},
{
id: 10,
lable: "Issues",
icon: <BugReport />,
isSelected: false,
onClick: (event: [Link]<HTMLDivElement>) => {
navigate("/issue");
},
},
];

const GrievanceMenuItemsList: MenuItemProps[] = [

{
id: 11,
lable: "Grievances",
icon: <ReportProblem />,
isSelected: false,
onClick: (event: [Link]<HTMLDivElement>) => {
navigate("/grievances");
},
},
];

const menuItemsList: MenuItemProps[] = [

{
id: 1,
lable: "Dashboard",
 isSelected: false,
icon: <Dashboard />,
onClick: (event: [Link]<HTMLDivElement>) => {
navigate("/dashboard");
},
},
{
id: 2,
lable: "Map View",
isSelected: false,
icon: <LocationCity />,
onClick: (event: [Link]<HTMLDivElement>) => {
navigate("/driver-search-map-view");
},
},
{
id: 3,
lable: "Broadcasts",
// lable: "Broadcast to Driver Assign",
icon: <BroadcastOnHome />,
isSelected: false,
onClick: (event: [Link]<HTMLDivElement>) => {
[Link]({});
navigate("/broadcast-to-drivers");
},
},
{
id: 4,
lable: "Drivers",
isSelected: false,
icon: <AirlineSeatReclineNormal />,
onClick: (event: [Link]<HTMLDivElement>) => {
navigate("/driver");
},
},
{
id: 5,
lable: "Vehicles",
icon: <DriveEta />,
isSelected: false,
onClick: (event: [Link]<HTMLDivElement>) => {
navigate("/vehicle");
},
},
{
id: 12,
lable: "Reports",
isSelected: false,
icon: <Assessment />,
onClick: (event: [Link]<HTMLDivElement>) => {
[Link]({});
navigate("/reports");
},
},
{
id: 13,
lable: "Driver-Ride Stats",
isSelected: false,
icon: <Assessment />,
onClick: (event: [Link]<HTMLDivElement>) => {
[Link]({});
navigate("/driver-ride-count");
},
},
 {
id: 6,
lable: "On Going Rides",
icon: <ElectricCar />,
isSelected: false,
onClick: (event: [Link]<HTMLDivElement>) => {
[Link]({});
navigate("/current-rides");
},
},
{
id: 7,
lable: "Cancelled Rides",
icon: <CarCrash />,
isSelected: false,
onClick: (event: [Link]<HTMLDivElement>) => {
[Link]({});
navigate("/cancelled-rides");
},
},
{
id: 8,
lable: "Completed Rides",
icon: <NoCrash />,
isSelected: false,
onClick: (event: [Link]<HTMLDivElement>) => {
[Link]({});
navigate("/completed-rides");
},
},
{
id: 9,
lable: "Unassigned Rides",
icon: <MinorCrash />,
isSelected: false,
onClick: (event: [Link]<HTMLDivElement>) => {
[Link]({});
navigate("/pending-rides");
},
},
{
id: 10,
lable: "Issues",
icon: <BugReport />,
isSelected: false,
onClick: (event: [Link]<HTMLDivElement>) => {
navigate("/issue");
},
},
];

const theme = useTheme();

const [open, setOpen] = [Link](true);
const navigate = useNavigate();
const [menus, setMenus] = [Link]<any>([]);
const [toolbarOpen, setToolbarOpen] = [Link](false);
const dispatch = useUserDispatch();
const [username, setUsername] = [Link]("");
const [assignedRoles, setAssignedRoles] = [Link]("");

const handleDrawerOpen = () => {

setOpen(true);
};
 const handleDrawerClose = () => {
setOpen(false);
};

const LogOut = () => {

//[Link]("ONDCAdminToken");
setCookies("bpp_portal_ONDCAdminToken", "");
setCookies("bpp_portal_UserName", "");
setCookies("bpp_portal_ClientInfo", "");
// removeCookies("bpp_portal_ONDCAdminToken");
// removeCookies("bpp_portal_UserName");
// removeCookies("bpp_portal_ClientInfo");
dispatch("SIGN_OUT");
[Link] = env.LOGIN_REDIRECTION;
};

function getUsername() {
//const temp: any = [Link]("bpp_portal_UserName")?.toString();
const temp: any = getCookies("bpp_portal_UserName")?.toString();

setUsername(temp);
}

function getAndSetMenus() {
const clientInfo: any =
getCookies("bpp_portal_ClientInfo")?.toString();

let menuList: MenuItemProps[] = [];

let roles: string = "";
[Link](clientInfo).map((client: any) => {
switch (client?.roleName) {
case "bpp_stats":
menuList = statMenuItemsList;
roles = client?.roleName?.toString().toUpperCase()
+ " ";
break;
case "bpp_basic":
menuList = basicMenuItemsList;
roles = client?.roleName?.toString().toUpperCase()
+ " ";
break;
case "bpp_admin":
menuList = menuItemsList;
roles = client?.roleName?.toString().toUpperCase()
+ " ";
break;
case "grievance_manager":
menuList =
[Link](GrievanceMenuItemsList);
roles = roles +
client?.roleName?.toString().toUpperCase();
break;
}
setMenus(menuList);
setAssignedRoles([Link](" ", ", "));
});
}

[Link](() => {
getUsername();
getAndSetMenus();
}, []);

return (
 <Box sx={{ display: "flex" }}>
<CssBaseline />
<AppBar position="fixed" open={open}>
<Toolbar style={{ backgroundColor: "white" }}>
<IconButton
color="primary"
aria-label="open drawer"
onClick={open ? handleDrawerClose :
handleDrawerOpen}
edge="start"
sx={{
marginRight: 5,
//...(open && { display: "none" }),
}}
>
{<MenuIcon />}
{/* {!open && <MenuIcon />}
{open && <ChevronLeftIcon />} */}
</IconButton>
<Typography
//variant=""
component="div"
sx={{ flexGrow: 1 }}
color={"InfoText"}
>
{assignedRoles}
</Typography>
<MobilityButtonIcon
label={username}
onClick={(event:
[Link]<HTMLButtonElement>) => {
setToolbarOpen(!toolbarOpen);
}}
></MobilityButtonIcon>

{/* <img
style={{
cursor: "pointer",
}}

src={require("../../assets/Logo_digital.png")}
alt="logo"
height="55px"
/>*/}
{/* <IconButton
onClick={() => {
setToolbarOpen(!toolbarOpen);
}}
sx={{ position: "absolute", right: "10px" }}
>
{username}
</IconButton> */}
</Toolbar>
{toolbarOpen && (
<Card
sx={{
//width: 200,
//height: 200,
position: "absolute",
right: "30px",
top: "40px",
}}
>
<List>
 <ListItem
disablePadding={true}
onClick={LogOut}
onMouseOver={() =>
setToolbarOpen(true)}
onMouseOut={() =>
setToolbarOpen(false)}
>
<ListItemButton>
<Logout />
<ListItemText
primary="Logout" style={{ marginLeft: 10 }} />
</ListItemButton>
</ListItem>
</List>
</Card>
)}
</AppBar>
<Drawer variant="permanent" open={open}>
{/* <DrawerHeaderIcon>
<img
style={{
cursor: "pointer",
}}

src={require("../../assets/Logo_digital.png")}
alt="logo"
height="55px"
/> */}

<DrawerHeader>
<img
src={logo}
//src={""}
height="60px"
style={{ cursor: "pointer" }}
onClick={() => navigate("/")}
/>
{/* <IconButton onClick={handleDrawerClose}>
{[Link] === "rtl" ? (
<ChevronRightIcon color="primary" />
) : (
<ChevronLeftIcon color="primary" />
)}
</IconButton> */}
</DrawerHeader>
{/* </DrawerHeaderIcon> */}

<Divider />
<MobilityList items={menus} />
{/* <List>
{["Inbox", "Starred", "Send email",
"Drafts"].map((text, index) => (
<ListItem key={text} disablePadding
sx={{ display: "block" }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ?
"initial" : "center",
px: 2.5,
}}
>
<ListItemIcon
 sx={{
minWidth: 0,
mr: open ? 3 :
"auto",
justifyContent:
"center",
}}
>
{index % 2 === 0 ?
<InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text}
sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
))}
</List> */}
{/* <Divider /> */}
{/* <List>
{["All mail", "Trash", "Spam"].map((text, index)
=> (
<ListItem key={text} disablePadding
sx={{ display: "block" }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ?
"initial" : "center",
px: 2.5,
}}
>
<ListItemIcon
sx={{
minWidth: 0,
mr: open ? 3 :
"auto",
justifyContent:
"center",
}}
>
{index % 2 === 0 ?
<InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text}
sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
))}
</List> */}
</Drawer>
{/* <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<DrawerHeader />
</Box> */}
</Box>
);
}

35] ondc\Admin-portal-frontend\bpp_admin\src\Components\CommonComponents\
[Link]
import { Box } from "@mui/material";
import { FC, ReactElement } from "react";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
const PublicHeader: FC = (): ReactElement => {
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="fixed">
<Toolbar
sx={{
backgroundColor: "#FFFF",
}}
>
<img

src="[Link]
9 "
alt=""
width="50px"
height="50px"
/>
</Toolbar>
</AppBar>
</Box>
);
};

export default PublicHeader;

36] ondc\Admin-portal-frontend\bpp_admin\src\Components\Constants\
[Link]
export const GRAY_200 = "#eeeeee";
export const GRAY_800 = "#37474F";
export const GRAY_900 = "#212121";
export const BLUE_A200 = "#448AFF";
export const RED_A200 = "#FF5252";
export const GREEN_200 = "#A5D6A7";

37] ondc\Admin-portal-frontend\bpp_admin\src\Components\Context\[Link]
import { createContext } from "react";
import { MobilityLoaderProp } from "../CommonComponents/MobilityLoader";
import { MobilitySnackbarProp } from "../CommonComponents/MobilitySnackBar";
import { MobilityConfirmDialogProp } from
"../CommonComponents/MobilityConfirmDialog";

export interface RidesFilterProps {

startDate?: any;
endDate?: any;
driverBroadcastedCoordinatesVisible?: any;
driverBroadcastReceivedCoordinatesVisible?: any;
driverAssignedCoordinatesVisible?: any;
driverAcceptedCoordinatesVisible?: any;
}

export interface AppContextPropTypes {

loader: MobilityLoaderProp;
setLoader: [Link]<[Link]<MobilityLoaderProp>>;
snackbar: MobilitySnackbarProp;
setSnackbar: [Link]<[Link]<MobilitySnackbarProp>>;
confirmDialog: MobilityConfirmDialogProp;
setConfirmDialog: [Link]<
[Link]<MobilityConfirmDialogProp>
>;
cancelledRidesFilter: RidesFilterProps;
setCancelledRidesFilter: [Link]<
[Link]<RidesFilterProps>
>;
 currentRidesFilter: RidesFilterProps;
setCurrentRidesFilter:
[Link]<[Link]<RidesFilterProps>>;
completedRidesFilter: RidesFilterProps;
setCompletedRidesFilter: [Link]<
[Link]<RidesFilterProps>
>;
unassignedRidesFilter: RidesFilterProps;
setUnassignedRidesFilter: [Link]<
[Link]<RidesFilterProps>
>;
driverRideStatsFilter: RidesFilterProps;
setDriverRideStatsFilter: [Link]<
[Link]<RidesFilterProps>
>;
reportsFilter: RidesFilterProps;
setReportsFilter: [Link]<[Link]<RidesFilterProps>>;
broadcastFilter: RidesFilterProps;
setBroadcastFilter:
[Link]<[Link]<RidesFilterProps>>;
}
export const AppContext = createContext<AppContextPropTypes>({
loader: {},
setLoader: () => {},
snackbar: {},
setSnackbar: () => {},
confirmDialog: {},
setConfirmDialog: () => {},
cancelledRidesFilter: {},
setCancelledRidesFilter: () => {},
currentRidesFilter: {},
setCurrentRidesFilter: () => {},
completedRidesFilter: {},
setCompletedRidesFilter: () => {},
unassignedRidesFilter: {},
setUnassignedRidesFilter: () => {},
driverRideStatsFilter: {},
setDriverRideStatsFilter: () => {},
reportsFilter: {},
setReportsFilter: () => {},
broadcastFilter: {},
setBroadcastFilter: () => {},
});

38] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
CancelledRides\[Link]
import React, { FC, ReactElement } from "react";
import { Card, Grid, Paper, CardContent } from "@mui/material";
import { useLocation, useParams } from "react-router-dom";
import { useSearchParams, useNavigate } from "react-router-dom";
import { useUserDispatch } from "../../../CustomUtils/usercontext";
import { isEmpty, replace } from "lodash";
import styled from "@emotion/styled";
import {
formatAmount,
formatDateTime,
} from "../../../CustomUtils/DateTimeUtils";
import MapTemp from "../CurrentRides/map";
import { AppContext } from "../../Context/AppContext";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../../CommonComponents/MobilitySnackBar";
import MobilityAccordion from "../../CommonComponents/MobilityAccordion";
import MobilityButton from "../../CommonComponents/MobilityButton";
import {
MobilityFareHeadingValue,
MobilityHeadingValue,
} from "../../CommonComponents/MobilityHeadingValue";
import { MobilityAppBar } from "../../CommonComponents/MobilityAppBar";
import { apiHandler } from "../../ApiServices/ApiHandler";
import { COMPLETED_RIDE_DETAILS } from "../../ApiServices/ApiConstants";

const CancelledRideDetails: FC = (): ReactElement => {

const location = useLocation();
const dispatch: any = useUserDispatch();
const navigate = useNavigate();
const RaiseIssuePath: string = "/raiseIssue";
const driverDetailsPath: string = "/driverDetails";

const [queryParameters] = useSearchParams();

//
const id = [Link]("id");
const entityId = [Link]("entityId");
//
const [isMapVisible, setIsMapVisible] = [Link](false);

const statusOptions = ["Approved", "Pending", "Rejected"];

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

const [rideDetails, setRideDetails] = [Link]<any>({});

let myContext = [Link](AppContext);

async function apiCall() {

try {
[Link]({
isLoading: true,
message: "Getting cancelled ride details...",
});
const response: Iresponse = await [Link](
`${COMPLETED_RIDE_DETAILS}?id=${id}`
);

if (!isEmpty(response)) {
const { data } = [Link];
[Link]("70", data);
let baseFare = "",
cgst = "",
sgst = "",
distanceFare = "",
buyerFinderFees = "";
[Link]?.data?.quote?.[Link]((element:
any) => {
switch ([Link]()) {
case "BASE_FARE":
baseFare =
[Link]?.[Link]();
break;
case "CGST":
cgst =
[Link]?.[Link]();
break;
 case "SGST":
sgst =
[Link]?.[Link]();
break;
case "BUYER_FINDER_FEES":
buyerFinderFees =
[Link]?.[Link]();
break;
case "DISTANCE_FARE":
distanceFare =
[Link]?.[Link]();
break;
}
});

let rideAsigned = "",

rideEnroutePickup = "",
rideArrivedPickup = "",
rideStarted = "";
[Link]?.data?.[Link]((element:
any) => {
switch
(element.fulfillment_state?.[Link]()) {
case "RIDE_ASSIGNED":
rideAsigned =
element.cancellation_fee?.amount?.[Link]();
break;
case "RIDE_ENROUTE_PICKUP":
rideEnroutePickup =

element?.cancellation_fee?.amount?.[Link]();
break;
case "RIDE_ARRIVED_PICKUP":
rideArrivedPickup =

element?.cancellation_fee?.amount?.[Link]();
break;
case "RIDE_STARTED":
rideStarted =
element?.cancellation_fee?.amount?.[Link]();
break;
}
});

// const locationArray =
[Link]?.data?.locationArray?.map(
// (item: any) => {
// return item?.location;
// }
// );
setRideDetails({
transactionId: [Link]?.data?.transactionId
|| "NA",
driverName: [Link]?.data?.agent?.name ||
"NA",
driverId: [Link]?.data?.agent?.driverId ||
"NA",
passegngerName:
[Link]?.data?.customer?.name || "NA",
estimatedCost:
formatAmount([Link]?.data?.quote?.price?.value),
estimatedTime: [Link]?.data?.eta || "NA",
startDateAndTime: formatDateTime(
[Link]?.data?.pickUpDateTime,
 true
),
endDateAndTime: formatDateTime(
[Link]?.data?.dropUpDateTime,
true
),
destinationLocation:

[Link]?.data?.endTipLocationDetails?.address ||

[Link]?.data?.destinationLocation?.address,
sourceLocation:
[Link]?.data?.sourceLocation?.address || "NA",
destinationLocationGps:

[Link]?.data?.endTipLocationDetails?.location ||

[Link]?.data?.destinationLocation?.gps,
sourceLocationGps:
[Link]?.data?.sourceLocation?.gps,
tripPolyline:
[Link]?.data?.routeDetails?.tripPolyline,
locationArray: [Link]?.data?.locationArray,
vehicleCategory:
[Link]?.data?.vehicle?.category || "NA",
vehicleMake: [Link]?.data?.vehicle?.make ||
"NA",
vehicleModel: [Link]?.data?.vehicle?.model
|| "NA",
vehicleRegistration:

[Link]?.data?.vehicle?.registrationNumber || "NA",
beforeStartTripLocationArray:

[Link]?.data?.beforeStartTripLocationArray,
afterStartTripLocationArray:

[Link]?.data?.afterStartTripLocationArray,

//fair
totalFare:
formatAmount([Link]?.data?.quote?.price?.value),
baseFare: formatAmount(baseFare),
cgst: formatAmount(cgst),
sgst: formatAmount(sgst),
distanceFare: formatAmount(distanceFare),
buyerFinderFees: formatAmount(buyerFinderFees),

rideAsigned: formatAmount(rideAsigned),
rideEnroutePickup:
formatAmount(rideEnroutePickup),
rideArrivedPickup:
formatAmount(rideArrivedPickup),
rideStarted: formatAmount(rideStarted),

paymentCollectedBy:
[Link]?.data?.payment?.collected_by
|| "NA",
paymentStatus:
[Link]?.data?.payment?.status || "NA",
paymentType: [Link]?.data?.payment?.type ||
"NA",

waitingCharges: formatAmount(
 [Link]?.data?.waitingCharges?.amount
),
extraTimeCharges: formatAmount(

[Link]?.data?.extraTimeCharges?.amount
),

providerName: [Link]?.data?.providerName,
listName: [Link]?.data?.listOfItems?.
[0].[Link],
listCode: [Link]?.data?.listOfItems?.
[0].[Link],

tripStatus: [Link]?.data?.status,

cancellationReason:
[Link]?.data?.status === "Cancelled"
?
response?.data?.data?.tripStatus?.name
: "No reason available",

cancellationBy:
[Link]?.data?.status === "Cancelled"
?
response?.data?.data?.transactionStepName?.isCanceledByPassenger
? "Passenger"
: "Driver"
: "No data available",
});
} else {
ShowSnackbarFailure(response, myContext);
// [Link]("error.", response);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}

// async function handleSubmit(event: [Link]) {

// [Link]();
// try {
// [Link]({
// isLoading: true,
// message: "Updating driver details...",
// });
// const requestBody = {};
// // const res: Iresponse = await [Link](
// // `/api/edit-driver`,
// // requestBody,
// // { params: { entityId } }
// // );
// const res: Iresponse = await [Link](
// `${edit}`,
// requestBody,
// { params: { entityId } }
// );
// if (isEmpty(res)) {
// apiCall();
// }
// if ([Link] === 200) {
 // ShowSnackbarSuccess("Driver details updated
successfully", myContext);
// navigate(-1);
// } else {
// ShowSnackbarFailure(res, myContext);
// }
// } catch (err: any) {
// ShowSnackbarFailure(err, myContext);
//
// } finally {
// [Link]({
// isLoading: false,
// });
// }
// }

[Link](() => {
apiCall();

setTimeout(() => {
setIsMapVisible(true);
}, 1000);
}, []);

const cardStyle = {
boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
marginTop: "10px",
padding: 2,
};

const titleStyle = {
fontSize: "28px",
fontWeight: "bold",
};

const formControlStyle = {
width: "100%",
marginBottom: "16px",
};

const buttonStyle = {
marginTop: "25px",
};

const labelStyle = {
fontSize: "18px",
};

const labelValueStyle = {
fontSize: "18px",
fontWeight: "bold",
};
const Img = styled("img")({
margin: "auto",
display: "block",
maxWidth: "100%",
maxHeight: "100%",
});

return (
<Grid style={{ padding: 5 }}>
<Grid item>
<MobilityAppBar
title="Cancelled Ride Details"
 onBackClick={() => {
navigate(-1);
}}
menus={<></>}
/>
</Grid>

<Paper component={Card} variant="outlined" sx={cardStyle}>

<Grid container spacing={1}>
<Grid item xs={12} md={6}>
<MobilityAccordion
isExpanded={true}
title={"Ride Details"}
details={
<>
<MobilityHeadingValue
heading="Transaction
ID"

value={rideDetails?.transactionId}
/>
<MobilityHeadingValue
heading="Trip Status"

value={rideDetails?.tripStatus}
/>

{rideDetails?.cancellationReason && (
<MobilityHeadingValue

heading="Cancellation Reason"

value={rideDetails?.cancellationReason}
/>
)}

{rideDetails?.cancellationBy && (
<MobilityHeadingValue

heading="Cancellation By"

value={rideDetails?.cancellationBy}
/>
)}

<MobilityHeadingValue
heading={"Driver
Name"}

value={rideDetails?.driverName}
linkUrl={`$
{driverDetailsPath}?id=$
{rideDetails?.driverId}&isEdit=false&selectedTab=details`}
/>

<MobilityHeadingValue
heading="Passenger
Name"

value={rideDetails?.passegngerName}
/>
<MobilityHeadingValue
heading="Cost"
 value={rideDetails?.estimatedCost}
/>
{/* <MobilityHeadingValue
heading="Trip
Duration"
value={`$
{rideDetails?.estimatedTime}`}
/> */}
{/* <MobilityHeadingValue
heading="Start Date &
Time"

value={rideDetails?.startDateAndTime}
/> */}
{/* <MobilityHeadingValue
heading="End Date &
Time"

value={rideDetails?.endDateAndTime}
/> */}
<MobilityHeadingValue
heading="Source"

value={rideDetails?.sourceLocation}
/>
<MobilityHeadingValue
heading="Destination"

value={rideDetails?.destinationLocation}
/>
</>
}
/>

<Grid container xs={12} md={12} spacing={1}

sx={{ marginTop: 0 }}>
<Grid item xs={6} md={6}>
<MobilityAccordion
isExpanded={true}
title={"Vehicle Details"}
details={
<>

<MobilityFareHeadingValue

heading="Category"

value={rideDetails?.vehicleCategory}
/>

<MobilityFareHeadingValue

heading="Make"

value={rideDetails?.vehicleMake}
/>

<MobilityFareHeadingValue

heading="Model"

value={rideDetails?.vehicleModel}
/>
 <MobilityFareHeadingValue

heading="Reg. Number"

value={rideDetails?.vehicleRegistration}
/>
</>
}
/>
</Grid>

<Grid item xs={6} md={6}>

<MobilityAccordion
isExpanded={true}
title={"Provider Details"}
details={
<>

<MobilityFareHeadingValue

heading="Provider Name"

value={rideDetails?.providerName}
/>

<MobilityFareHeadingValue

heading="List Name"

value={rideDetails?.listName}
/>

<MobilityFareHeadingValue

heading="List Code"

value={rideDetails?.listCode}
/>
</>
}
/>
</Grid>
</Grid>
</Grid>
<Grid container item xs={12} md={6}>
<Card style={{ display: "flex", flex: 1 }}>
<CardContent style={{ display: "flex",
flex: 1, padding: 8 }}>
{isMapVisible && (
<MapTemp
rideType="cancelled"

sourceLocation={rideDetails?.sourceLocationGps}

destinationLocation={rideDetails?.destinationLocationGps}

tripPolyline={rideDetails?.tripPolyline}

currentLocation={rideDetails?.destinationLocationGps}

locationArray={[Link]}

startDateAndTime={rideDetails?.startDateAndTime}
 endDateAndTime={rideDetails?.endDateAndTime}

beforeStartTripLocationArray={

rideDetails?.beforeStartTripLocationArray
}

afterStartTripLocationArray={

rideDetails?.afterStartTripLocationArray
}
/>
)}
</CardContent>
</Card>
</Grid>

<Grid item xs={6} md={3}>

<MobilityAccordion
isExpanded={true}
title={"Fare Details :"}
details={
<>
<MobilityFareHeadingValue
heading="Basic Fare"

value={rideDetails?.baseFare}
/>
<MobilityFareHeadingValue
heading="Distance
Fare"

value={rideDetails?.distanceFare}
/>
<MobilityFareHeadingValue
heading="Buyer Finder
Fare"

value={rideDetails?.buyerFinderFees}
/>
<MobilityFareHeadingValue
heading="CGST (2.5
%)"

value={rideDetails?.cgst}
/>
<MobilityFareHeadingValue
heading="SGST (2.5
%)"

value={rideDetails?.sgst}
/>
<MobilityFareHeadingValue
heading="Total Fare"

value={rideDetails?.totalFare}
/>
</>
}
/>
</Grid>

<Grid item xs={6} md={3}>

 <MobilityAccordion
isExpanded={true}
title={"Cancellation Charges :"}
details={
<>
<MobilityFareHeadingValue
heading="Ride
Assigned"

value={rideDetails?.rideAsigned}
/>
<MobilityFareHeadingValue
heading="Ride Enroute
Pickup"

value={rideDetails?.rideEnroutePickup}
/>
<MobilityFareHeadingValue
heading="Ride Arrived
Pickup"

value={rideDetails?.rideArrivedPickup}
/>
<MobilityFareHeadingValue
heading="Ride
Started"

value={rideDetails?.rideStarted}
/>
</>
}
/>
</Grid>

<Grid item xs={6} md={3}>

<MobilityAccordion
isExpanded={true}
title={"Payment Details:"}
details={
<>
<MobilityFareHeadingValue
heading="Collected
By"

value={rideDetails?.paymentCollectedBy}
/>
<MobilityFareHeadingValue
heading="Status"

value={rideDetails?.paymentStatus}
/>
<MobilityFareHeadingValue
heading="Type"

value={rideDetails?.paymentType}
/>
</>
}
/>
</Grid>

<Grid item xs={6} md={3}>

<MobilityAccordion
isExpanded={true}
 title={"Waiting Charges"}
details={
<>
<MobilityFareHeadingValue
heading="Waiting
Charges"

value={rideDetails?.waitingCharges}
/>
<MobilityFareHeadingValue
heading="Extra Time
Charges"

value={rideDetails?.extraTimeCharges}
/>
</>
}
/>
</Grid>
</Grid>
</Paper>
</Grid>
);
};

export default CancelledRideDetails;

39] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
CancelledRides\[Link]
import { Card, Grid, Paper } from "@mui/material";
import * as React from "react";
import _, { isEmpty } from "lodash";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import EnhancedTable from "../../CommonComponents/EnhancedTable";
import { formatDate, formatDateTime } from "../../../CustomUtils/DateTimeUtils";
import { MobilityButtonIconView } from
"../../CommonComponents/MobilityButtonIcon";
import {
DateValidationError,
PickerChangeHandlerContext,
} from "@mui/x-date-pickers";
import MobilityDatePicker from "../../CommonComponents/MobilityDatePicker";
import MobilityButton from "../../CommonComponents/MobilityButton";
import { AppContext } from "../../Context/AppContext";
import { ShowSnackbarFailure } from "../../CommonComponents/MobilitySnackBar";
import MobilityEmptyMsg from "../../CommonComponents/MobilityEmptyMsg";
import { apiHandler } from "../../ApiServices/ApiHandler";
import {
TRACK_COMPLETED_RIDE,
TRACK_CANCELLED_RIDE,
} from "../../ApiServices/ApiConstants";
import moment from "moment";
import dayjs, { Dayjs } from "dayjs";

const cancelledRideDetailsPath: string = "/cancelled-ride-details";

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

interface driverState {
 id: string;
firstName: string;
phone: string;
city: string;
status: string;
documents: string;
actions: any;
driverName: any;
passengerName: any;
estimatedCost: any;
estimatedTime: any;
source: any;
destination: any;
dateAndTime: any;
}

const CancelledRidesList: [Link] = (): [Link] => {

const location = useLocation();
const navigate = useNavigate();
let myContext = [Link](AppContext);
const tableRef = [Link]<any>();

const [cancelledRides, setCancelledRides] =

[Link]<driverState[]>([]);
const [searchText, setSearchText] = [Link]<string>("");
const [filteredCancelledRides, setFilteredCancelledRides] =
[Link]<
driverState[]
>([]);
const [startDate, setStartDate] = [Link]<Dayjs | null>(
myContext?.cancelledRidesFilter?.startDate
? dayjs(myContext?.cancelledRidesFilter?.startDate)
: dayjs(new Date())
);
const [endDate, setEndDate] = [Link]<Dayjs | null>(
myContext?.cancelledRidesFilter?.endDate
? dayjs(myContext?.cancelledRidesFilter?.endDate)
: dayjs(new Date())
);
//const [startDate, setStartDate] = [Link]<string | undefined>();
//const [endDate, setEndDate] = [Link]<string | undefined>();
const [rowsPerPage, setRowsPerPage] = [Link]<number>(
// myContext?.ridesFilter?.rowsPerPage
// ? myContext?.ridesFilter?.rowsPerPage :
25
);
const [count, setCount] = [Link]<number>(0);
const [page, setPage] = [Link]<number>(0);

[Link](() => {
if (page || rowsPerPage) {
getCancelledRidesList();
}
}, [page, rowsPerPage]);

//async function getCancelledRidesList(sDate: any) {

async function getCancelledRidesList() {
//[Link]("87 sDate", sDate);
try {
[Link]({
isLoading: true,
message: "Getting Rides List...",
});
[Link]({ startDate, endDate });
 const payload = {
rowsPerPage,
pageNo: page,
searchBy: "date",
startDate: startDate?.format("DD/MM/YYYY"),
endDate: endDate?.format("DD/MM/YYYY"),
};

//[Link]("123 payload", payload);

const response: Iresponse = await [Link](
TRACK_CANCELLED_RIDE,
payload
);

if (!isEmpty(response)) {
const data = response?.data?.[Link];

const _data = data?.map((ride: any) => {

//[Link]("106", ride);
return {
id: ride?.id,
driverName: ride?.driverName,
passengerName: ride?.customerName,
source: ride?.sourceLocation,
destination: ride?.destinationLocation,
estimatedCost: ride?.cost,
estimatedTime: ride?.eta,
total: ride?.total,
buyerFee: ride?.buyerFee?.toString(),
price: ride?.price,
paymentCollected: ride?.paymentCollected,
//dateAndTime:
formatDateTime(ride?.modifiedDate, true),
dateAndTime: new
Date(ride?.modifiedDate).getTime(),
viewDetails: (
<MobilityButtonIconView
tooltipTitle="View Ride Details"
onClick={(e) => {
[Link]();
navigate(`$
{cancelledRideDetailsPath}?id=${ride?.id}`);
}}
/>
),
driverNameColor:
ride?.transactionStepName?.isCanceledByPassenger
? "black"
: "red",
passengerNameColor:
ride?.transactionStepName?.isCanceledByPassenger
? "red"
: "black",
};
});
setCancelledRides(_data);
setFilteredCancelledRides(_data);
setCount(response?.data?.data?.totalCount);
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
 [Link]({
isLoading: false,
});
}
}

const EnhancedTableConfig = {
headers: [
{
id: "driverName",
numeric: false,
disablePadding: true,
label: "Driver Name",
disableSort: false,
},
{
id: "passengerName",
numeric: false,
disablePadding: true,
label: "Passenger Name",
disableSort: false,
},
{
id: "source",
numeric: false,
disablePadding: true,
label: "Source",
disableSort: true,
},
{
id: "destination",
numeric: false,
disablePadding: true,
label: "Destination",
disableSort: true,
},
// {
// id: "buyerFee",
// numeric: false,
// disablePadding: true,
// label: "Buyer Fee",
// disableSort: true,
// },
// {
// id: "price",
// numeric: false,
// disablePadding: true,
// label: "Price",
// disableSort: true,
// },
// {
// id: "total",
// numeric: false,
// disablePadding: true,
// label: "Total",
// disableSort: true,
// },
// {
// id: "paymentCollected",
// numeric: false,
// disablePadding: true,
// label: "Payment Collected",
// disableSort: true,
// },
 {
id: "dateAndTime",
numeric: false,
disablePadding: true,
label: "Date Time",
disableSort: false,
},
{
id: "viewDetails",
numeric: true,
disablePadding: true,
label: "View Details",
disableSort: true,
},
],
};

const handleInputChange = (event: [Link]<HTMLInputElement>) =>

{
const inputValue = [Link]();

setSearchText(inputValue);
if ([Link] > 2) {
const filteredRows = [Link]((row) => {
return
[Link]().includes(inputValue);
//[Link]().includes(inputValue)
});
setFilteredCancelledRides(filteredRows);
} else {
setFilteredCancelledRides(cancelledRides);
}
};

const refreshPage = async (pagination: any) => {

if ([Link]) {
setRowsPerPage([Link]);
// [Link]({
// rowsPerPage: [Link],
// });
}
if (pagination?.page?.toString().length > 0) {
setPage([Link]);
}
};

return (
<Grid style={{ padding: 5 }}>
<Paper component={Card} variant="outlined">
<Grid
container
sx={{
paddingLeft: 2,
paddingTop: 2,
backgroundColor: "white",
}}
>
<Grid container spacing={2} alignItems="center">
<Grid item>
<MobilityDatePicker
label="Start Date"
value={startDate}
onChange={(
value: Dayjs | null,
 context:
PickerChangeHandlerContext<DateValidationError>
) => {
setStartDate(value);
}}
/>
</Grid>
<Grid item>
<MobilityDatePicker
label="End Date"
value={endDate}
onChange={(
value: Dayjs | null,
context:
PickerChangeHandlerContext<DateValidationError>
) => {
setEndDate(value);
}}
/>
</Grid>
<Grid item>
<MobilityButton
label="Search"
onClick={(
event:
[Link]<HTMLButtonElement, MouseEvent>
) => {
if
(startDate?.isAfter(endDate, "dates")) {
ShowSnackbarFailure(
"Start Date
should be same or before End Date",
myContext
);
} else {

getCancelledRidesList();
}
}}
/>
</Grid>
</Grid>
</Grid>
<Grid padding={2}>
{[Link] > 0 ? (
<EnhancedTable
ref={tableRef}
headers={[Link]}
tableData={filteredCancelledRides}
count={count}
refreshPage={refreshPage}
/>
) : (
<MobilityEmptyMsg message={"No Ride History
Found"} />
)}
</Grid>
</Paper>
</Grid>
);
};

export default CancelledRidesList;

40]ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
CompletedRides\[Link]
import React, { FC, ReactElement } from "react";
import { Card, Grid, Paper, CardContent } from "@mui/material";
import { useLocation } from "react-router-dom";
import { useSearchParams, useNavigate } from "react-router-dom";
import { useUserDispatch } from "../../../CustomUtils/usercontext";
import { isEmpty } from "lodash";
import styled from "@emotion/styled";
import {
formatAmount,
formatDateTime,
} from "../../../CustomUtils/DateTimeUtils";
import MapTemp from "../CurrentRides/map";
import { AppContext } from "../../Context/AppContext";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../../CommonComponents/MobilitySnackBar";
import MobilityAccordion from "../../CommonComponents/MobilityAccordion";
import MobilityButton from "../../CommonComponents/MobilityButton";
import {
MobilityFareHeadingValue,
MobilityHeadingValue,
} from "../../CommonComponents/MobilityHeadingValue";
import { MobilityAppBar } from "../../CommonComponents/MobilityAppBar";
import { apiHandler } from "../../ApiServices/ApiHandler";
import { COMPLETED_RIDE_DETAILS } from "../../ApiServices/ApiConstants";

const CompletedRideDetails: FC = (): ReactElement => {

const location = useLocation();
const dispatch: any = useUserDispatch();
const navigate = useNavigate();
const RaiseIssuePath: string = "/raiseIssue";
const driverDetailsPath: string = "/driverDetails";

const [queryParameters] = useSearchParams();

//
const id = [Link]("id");
const entityId = [Link]("entityId");
//
const [isMapVisible, setIsMapVisible] = [Link](false);

const statusOptions = ["Approved", "Pending", "Rejected"];

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

const [rideDetails, setRideDetails] = [Link]<any>({});

let myContext = [Link](AppContext);

async function apiCall() {

try {
[Link]({
isLoading: true,
message: "Getting Current ride details...",
});
// const response: Iresponse = await [Link](
// `/api/completed-ride-details?id=${id}`
// );
 const response: Iresponse = await [Link](
`${COMPLETED_RIDE_DETAILS}?id=${id}`
);

//[Link]("67", [Link]);
if (!isEmpty(response)) {
const { data } = [Link];

let baseFare = "",

cgst = "",
sgst = "",
distanceFare = "",
buyerFinderFees = "";
[Link]?.data?.quote?.[Link]((element:
any) => {
switch ([Link]()) {
case "BASE_FARE":
baseFare =
[Link]?.[Link]();
break;
case "CGST":
cgst =
[Link]?.[Link]();
break;
case "SGST":
sgst =
[Link]?.[Link]();
break;
case "BUYER_FINDER_FEES":
buyerFinderFees =
[Link]?.[Link]();
break;
case "DISTANCE_FARE":
distanceFare =
[Link]?.[Link]();
break;
}
});

let rideAsigned = "",

rideEnroutePickup = "",
rideArrivedPickup = "",
rideStarted = "";
[Link]?.data?.[Link]((element:
any) => {
switch
(element.fulfillment_state?.[Link]()) {
case "RIDE_ASSIGNED":
rideAsigned =
element.cancellation_fee?.amount?.[Link]();
break;
case "RIDE_ENROUTE_PICKUP":
rideEnroutePickup =

element?.cancellation_fee?.amount?.[Link]();
break;
case "RIDE_ARRIVED_PICKUP":
rideArrivedPickup =

element?.cancellation_fee?.amount?.[Link]();
break;
case "RIDE_STARTED":
rideStarted =
element?.cancellation_fee?.amount?.[Link]();
 break;
}
});

// const locationArray =
[Link]?.data?.locationArray?.map(
// (item: any) => {
// return item?.location;
// }
// );
setRideDetails({
transactionId: [Link]?.data?.transactionId
|| "NA",
driverName: [Link]?.data?.agent?.name ||
"NA",
driverId: [Link]?.data?.agent?.driverId ||
"NA",
passegngerName:
[Link]?.data?.customer?.name || "NA",
estimatedCost:
formatAmount([Link]?.data?.quote?.price?.value),
estimatedTime: [Link]?.data?.eta || "NA",
startDateAndTime: formatDateTime(
[Link]?.data?.pickUpDateTime,
true
),
endDateAndTime: formatDateTime(
[Link]?.data?.dropUpDateTime,
true
),
destinationLocation:

[Link]?.data?.endTipLocationDetails?.address ||

[Link]?.data?.destinationLocation?.address,
sourceLocation:
[Link]?.data?.sourceLocation?.address || "NA",
destinationLocationGps:

[Link]?.data?.endTipLocationDetails?.location ||

[Link]?.data?.destinationLocation?.gps,
sourceLocationGps:
[Link]?.data?.sourceLocation?.gps,
tripPolyline:
[Link]?.data?.routeDetails?.tripPolyline,
locationArray: [Link]?.data?.locationArray,
beforeStartTripLocationArray:

[Link]?.data?.beforeStartTripLocationArray,
afterStartTripLocationArray:

[Link]?.data?.afterStartTripLocationArray,
vehicleCategory:
[Link]?.data?.vehicle?.category || "NA",
vehicleMake: [Link]?.data?.vehicle?.make ||
"NA",
vehicleModel: [Link]?.data?.vehicle?.model
|| "NA",
vehicleRegistration:

[Link]?.data?.vehicle?.registrationNumber || "NA",

//fair
 totalFare:
formatAmount([Link]?.data?.quote?.price?.value),
baseFare: formatAmount(baseFare),
cgst: formatAmount(cgst),
sgst: formatAmount(sgst),
distanceFare: formatAmount(distanceFare),
buyerFinderFees: formatAmount(buyerFinderFees),

rideAsigned: formatAmount(rideAsigned),
rideEnroutePickup:
formatAmount(rideEnroutePickup),
rideArrivedPickup:
formatAmount(rideArrivedPickup),
rideStarted: formatAmount(rideStarted),

paymentCollectedBy:
[Link]?.data?.payment?.collected_by
|| "NA",
paymentStatus:
[Link]?.data?.payment?.status || "NA",
paymentType: [Link]?.data?.payment?.type ||
"NA",

waitingCharges: formatAmount(
[Link]?.data?.waitingCharges?.amount
),
extraTimeCharges: formatAmount(

[Link]?.data?.extraTimeCharges?.amount
),

providerName: [Link]?.data?.providerName,
listName: [Link]?.data?.listOfItems?.
[0].[Link],
listCode: [Link]?.data?.listOfItems?.
[0].[Link],

tripStatus: [Link]?.data?.status,
});
} else {
ShowSnackbarFailure(response, myContext);
// [Link]("error.", response);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}

// async function handleSubmit(event: [Link]) {

// [Link]();
// try {
// [Link]({
// isLoading: true,
// message: "Updating driver details...",
// });
// const requestBody = {};
// // const res: Iresponse = await [Link](
// // `/api/edit-driver`,
// // requestBody,
// // { params: { entityId } }
 // // );
// const res: Iresponse = await [Link](
// `${edit}`,
// requestBody,
// { params: { entityId } }
// );
// if (isEmpty(res)) {
// apiCall();
// }
// if ([Link] === 200) {
// ShowSnackbarSuccess("Driver details updated
successfully", myContext);
// navigate(-1);
// } else {
// ShowSnackbarFailure(res, myContext);
// }
// } catch (err: any) {
// ShowSnackbarFailure(err, myContext);
//
// } finally {
// [Link]({
// isLoading: false,
// });
// }
// }

[Link](() => {
apiCall();

setTimeout(() => {
setIsMapVisible(true);
}, 1000);
}, []);

const cardStyle = {
boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
marginTop: "10px",
padding: 2,
};

const titleStyle = {
fontSize: "28px",
fontWeight: "bold",
};

const formControlStyle = {
width: "100%",
marginBottom: "16px",
};

const buttonStyle = {
marginTop: "25px",
};

const labelStyle = {
fontSize: "18px",
};

const labelValueStyle = {
fontSize: "18px",
fontWeight: "bold",
};
const Img = styled("img")({
margin: "auto",
 display: "block",
maxWidth: "100%",
maxHeight: "100%",
});

return (
<Grid style={{ padding: 5 }}>
<Grid item>
<MobilityAppBar
title="Completed Ride Details"
onBackClick={() => {
navigate(-1);
}}
menus={
<MobilityButton
label="Raise an Issue"
onClick={(event:
[Link]<HTMLButtonElement>) => {
navigate(
`${RaiseIssuePath}?
transactionId=${rideDetails?.transactionId}`
);
}}
/>
}
/>
</Grid>

<Paper component={Card} variant="outlined" sx={cardStyle}>

<Grid container spacing={1}>
<Grid item xs={12} md={6}>
<MobilityAccordion
isExpanded={true}
title={"Ride Details"}
details={
<>
<MobilityHeadingValue
heading="Transaction
ID"

value={rideDetails?.transactionId}
/>
<MobilityHeadingValue
heading="Trip Status"

value={rideDetails?.tripStatus}
/>

<MobilityHeadingValue
heading={"Driver
Name"}

value={rideDetails?.driverName}
linkUrl={`$
{driverDetailsPath}?id=$
{rideDetails?.driverId}&isEdit=false&selectedTab=details`}
/>

<MobilityHeadingValue
heading="Passenger
Name"

value={rideDetails?.passegngerName}
/>
 <MobilityHeadingValue
heading="Cost"

value={rideDetails?.estimatedCost}
/>
<MobilityHeadingValue
heading="Trip
Duration"
value={`$
{rideDetails?.estimatedTime}`}
/>
<MobilityHeadingValue
heading="Start Date &
Time"

value={rideDetails?.startDateAndTime}
/>
<MobilityHeadingValue
heading="End Date &
Time"

value={rideDetails?.endDateAndTime}
/>
<MobilityHeadingValue
heading="Source"

value={rideDetails?.sourceLocation}
/>
<MobilityHeadingValue
heading="Destination"

value={rideDetails?.destinationLocation}
/>
</>
}
/>

<Grid container xs={12} md={12} spacing={1}

sx={{ marginTop: 0 }}>
<Grid item xs={6} md={6}>
<MobilityAccordion
isExpanded={true}
title={"Vehicle Details"}
details={
<>

<MobilityFareHeadingValue

heading="Category"

value={rideDetails?.vehicleCategory}
/>

<MobilityFareHeadingValue

heading="Make"

value={rideDetails?.vehicleMake}
/>

<MobilityFareHeadingValue

heading="Model"
 value={rideDetails?.vehicleModel}
/>

<MobilityFareHeadingValue

heading="Reg. Number"

value={rideDetails?.vehicleRegistration}
/>
</>
}
/>
</Grid>

<Grid item xs={6} md={6}>

<MobilityAccordion
isExpanded={true}
title={"Provider Details"}
details={
<>

<MobilityFareHeadingValue

heading="Provider Name"

value={rideDetails?.providerName}
/>

<MobilityFareHeadingValue

heading="List Name"

value={rideDetails?.listName}
/>

<MobilityFareHeadingValue

heading="List Code"

value={rideDetails?.listCode}
/>
</>
}
/>
</Grid>
</Grid>
</Grid>
<Grid container item xs={12} md={6}>
<Card style={{ display: "flex", flex: 1 }}>
<CardContent style={{ display: "flex",
flex: 1, padding: 8 }}>
{isMapVisible && (
<MapTemp
rideType="completed"

sourceLocation={rideDetails?.sourceLocationGps}

destinationLocation={rideDetails?.destinationLocationGps}

tripPolyline={rideDetails?.tripPolyline}

currentLocation={rideDetails?.destinationLocationGps}

locationArray={[Link]}
 startDateAndTime={rideDetails?.startDateAndTime}

endDateAndTime={rideDetails?.endDateAndTime}

beforeStartTripLocationArray={

rideDetails?.beforeStartTripLocationArray
}

afterStartTripLocationArray={

rideDetails?.afterStartTripLocationArray
}
/>
)}
</CardContent>
</Card>
</Grid>

<Grid item xs={6} md={3}>

<MobilityAccordion
isExpanded={true}
title={"Fare Details :"}
details={
<>
<MobilityFareHeadingValue
heading="Basic Fare"

value={rideDetails?.baseFare}
/>
<MobilityFareHeadingValue
heading="Distance
Fare"

value={rideDetails?.distanceFare}
/>
<MobilityFareHeadingValue
heading="Buyer Finder
Fare"

value={rideDetails?.buyerFinderFees}
/>
<MobilityFareHeadingValue
heading="CGST (2.5
%)"

value={rideDetails?.cgst}
/>
<MobilityFareHeadingValue
heading="SGST (2.5
%)"

value={rideDetails?.sgst}
/>
<MobilityFareHeadingValue
heading="Total Fare"

value={rideDetails?.totalFare}
/>
</>
}
/>
</Grid>
 <Grid item xs={6} md={3}>
<MobilityAccordion
isExpanded={true}
title={"Cancellation Charges :"}
details={
<>
<MobilityFareHeadingValue
heading="Ride
Assigned"

value={rideDetails?.rideAsigned}
/>
<MobilityFareHeadingValue
heading="Ride Enroute
Pickup"

value={rideDetails?.rideEnroutePickup}
/>
<MobilityFareHeadingValue
heading="Ride Arrived
Pickup"

value={rideDetails?.rideArrivedPickup}
/>
<MobilityFareHeadingValue
heading="Ride
Started"

value={rideDetails?.rideStarted}
/>
</>
}
/>
</Grid>

<Grid item xs={6} md={3}>

<MobilityAccordion
isExpanded={true}
title={"Payment Details:"}
details={
<>
<MobilityFareHeadingValue
heading="Collected
By"

value={rideDetails?.paymentCollectedBy}
/>
<MobilityFareHeadingValue
heading="Status"

value={rideDetails?.paymentStatus}
/>
<MobilityFareHeadingValue
heading="Type"

value={rideDetails?.paymentType}
/>
</>
}
/>
</Grid>

<Grid item xs={6} md={3}>

 <MobilityAccordion
isExpanded={true}
title={"Waiting Charges"}
details={
<>
<MobilityFareHeadingValue
heading="Waiting
Charges"

value={rideDetails?.waitingCharges}
/>
<MobilityFareHeadingValue
heading="Extra Time
Charges"

value={rideDetails?.extraTimeCharges}
/>
</>
}
/>
</Grid>
</Grid>
</Paper>
</Grid>
);
};

export default CompletedRideDetails;

41] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
CompletedRides\[Link]
import { Card, Grid, Paper } from "@mui/material";
import * as React from "react";
import _, { isEmpty } from "lodash";
import { useNavigate } from "react-router-dom";
import EnhancedTable from "../../CommonComponents/EnhancedTable";
import { formatDate, formatDateTime } from "../../../CustomUtils/DateTimeUtils";
import { MobilityButtonIconView } from
"../../CommonComponents/MobilityButtonIcon";
import {
DateValidationError,
PickerChangeHandlerContext,
} from "@mui/x-date-pickers";
import MobilityDatePicker from "../../CommonComponents/MobilityDatePicker";
import MobilityButton from "../../CommonComponents/MobilityButton";
import { AppContext } from "../../Context/AppContext";
import { ShowSnackbarFailure } from "../../CommonComponents/MobilitySnackBar";
import MobilityEmptyMsg from "../../CommonComponents/MobilityEmptyMsg";
import { apiHandler } from "../../ApiServices/ApiHandler";
import {
TRACK_CANCELLED_RIDE,
TRACK_COMPLETED_RIDE,
} from "../../ApiServices/ApiConstants";
import moment from "moment";
import dayjs, { Dayjs } from "dayjs";

const completedRideDetailsPath: string = "/completed-ride-details";

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}
interface driverState {
id: string;
firstName: string;
phone: string;
city: string;
status: string;
documents: string;
actions: any;
driverName: any;
passengerName: any;
estimatedCost: any;
estimatedTime: any;
source: any;
destination: any;
dateAndTime: any;
}

const CompletedRidesList: [Link] = (): [Link] => {

const navigate = useNavigate();
let myContext = [Link](AppContext);
const tableRef = [Link]<any>();
const [completedRides, setCompletedRides] =
[Link]<driverState[]>([]);
const [searchText, setSearchText] = [Link]<string>("");
const [filteredCompletedRides, setFilteredCompletedRides] =
[Link]<
driverState[]
>([]);
const [startDate, setStartDate] = [Link]<Dayjs | null>(
myContext?.completedRidesFilter?.startDate
? dayjs(myContext?.completedRidesFilter?.startDate)
: dayjs(new Date())
);
const [endDate, setEndDate] = [Link]<Dayjs | null>(
myContext?.completedRidesFilter?.endDate
? dayjs(myContext?.completedRidesFilter?.endDate)
: dayjs(new Date())
);
// const [startDate, setStartDate] = [Link]<string | undefined>(
// new Date().toString()
// );
// const [endDate, setEndDate] = [Link]<string | undefined>();
// let myContext = [Link](AppContext);
const [rowsPerPage, setRowsPerPage] = [Link]<number>(25);
const [count, setCount] = [Link]<number>(0);
const [page, setPage] = [Link]<number>(0);

[Link](() => {
if (page || rowsPerPage) {
getCompletedRidesList();
}
}, [page, rowsPerPage]);

async function getCompletedRidesList() {

try {
[Link]({
isLoading: true,
message: "Getting Rides List...",
});
[Link]({ startDate, endDate });
const payload = {
rowsPerPage,
pageNo: page,
 // searchBy: "name",
searchBy: "date",
startDate: startDate?.format("DD/MM/YYYY"),
endDate: endDate?.format("DD/MM/YYYY"),
// startDate: startDate
// ? formatDate(startDate)?.toString()
// : formatDate(new Date().toString()),
// endDate: endDate
// ? formatDate(endDate)?.toString()
// : formatDate(new Date().toString()),
};

// const response: Iresponse = await [Link](

// "/api/track-completed-ride",
// payload
// );
const response: Iresponse = await [Link](
TRACK_COMPLETED_RIDE,
payload
);

if (!isEmpty(response)) {
const data = response?.data?.[Link];

const _data = data?.map((ride: any) => {

return {
id: ride?.id,
driverName: ride?.driverName,
passengerName: ride?.passengerName,
source: ride?.sourceLocation,
destination: ride?.destinationLocation,
estimatedCost: ride?.cost,
estimatedTime: ride?.eta,
total: ride?.total,
buyerFee: ride?.buyerFee?.toString(),
price: ride?.price,
paymentCollected: ride?.paymentCollected,
// dateAndTime:
formatDateTime(ride?.modifiedDate, true),
dateAndTime: new
Date(ride?.modifiedDate).getTime(),
viewDetails: (
<MobilityButtonIconView
tooltipTitle="View Ride Details"
onClick={(e) => {
[Link]();
navigate(`$
{completedRideDetailsPath}?id=${ride?.id}`);
}}
/>
),
};
});
setCompletedRides(_data);
setFilteredCompletedRides(_data);
setCount(response?.data?.data?.totalCount);
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
 });
}
}

const EnhancedTableConfig = {
headers: [
{
id: "driverName",
numeric: false,
disablePadding: true,
label: "Driver Name",
disableSort: false,
},
{
id: "passengerName",
numeric: false,
disablePadding: true,
label: "Passenger Name",
disableSort: false,
},
{
id: "source",
numeric: false,
disablePadding: true,
label: "Source",
disableSort: true,
},
{
id: "destination",
numeric: false,
disablePadding: true,
label: "Destination",
disableSort: true,
},
// {
// id: "buyerFee",
// numeric: false,
// disablePadding: true,
// label: "Buyer Fee",
// disableSort: true,
// },
// {
// id: "price",
// numeric: false,
// disablePadding: true,
// label: "Price",
// disableSort: true,
// },
{
id: "total",
numeric: true,
disablePadding: true,
label: "Actual Fare",
disableSort: true,
},
// {
// id: "paymentCollected",
// numeric: false,
// disablePadding: true,
// label: "Payment Collected",
// disableSort: true,
// },
{
id: "dateAndTime",
 numeric: false,
disablePadding: true,
label: "Date Time",
disableSort: false,
},
{
id: "viewDetails",
numeric: true,
disablePadding: true,
label: "View Details",
disableSort: true,
},
],
};

const handleInputChange = (event: [Link]<HTMLInputElement>) =>

{
const inputValue = [Link]();

setSearchText(inputValue);
if ([Link] > 2) {
const filteredRows = [Link]((row) => {
return
[Link]().includes(inputValue);
//[Link]().includes(inputValue)
});
setFilteredCompletedRides(filteredRows);
} else {
setFilteredCompletedRides(completedRides);
}
};

const refreshPage = async (pagination: any) => {

if ([Link]) {
setRowsPerPage([Link]);
}
if (pagination?.page?.toString().length > 0) {
setPage([Link]);
}
};

return (
<Grid style={{ padding: 5 }}>
<Paper component={Card} variant="outlined">
<Grid
container
sx={{
paddingLeft: 2,
paddingTop: 2,
backgroundColor: "white",
}}
>
<Grid container spacing={2} alignItems="center">
<Grid item>
<MobilityDatePicker
label="Start Date"
value={startDate}
onChange={(
value: Dayjs | null,
context:
PickerChangeHandlerContext<DateValidationError>
) => {
setStartDate(value);
}}
 />
</Grid>
<Grid item>
<MobilityDatePicker
label="End Date"
value={endDate}
onChange={(
value: Dayjs | null,
context:
PickerChangeHandlerContext<DateValidationError>
) => {
setEndDate(value);
}}
/>
</Grid>
<Grid item>
<MobilityButton
label="Search"
onClick={(
event:
[Link]<HTMLButtonElement, MouseEvent>
) => {
if
(startDate?.isAfter(endDate, "dates")) {
ShowSnackbarFailure(
"Start Date
should be same or before End Date",
myContext
);
} else {

getCompletedRidesList();
}
}}
/>
</Grid>
</Grid>
</Grid>
<Grid padding={2}>
{[Link] > 0 ? (
<EnhancedTable
ref={tableRef}
headers={[Link]}
tableData={filteredCompletedRides}
count={count}
refreshPage={refreshPage}
/>
) : (
<MobilityEmptyMsg message={"No Ride History
Found"} />
)}
</Grid>
</Paper>
</Grid>
);
};

export default CompletedRidesList;

42] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
CurrentRides\[Link]
import React, { FC, ReactElement } from "react";
import { Card, Grid, Paper, CardContent } from "@mui/material";
import { useSearchParams, useNavigate } from "react-router-dom";
import { isEmpty } from "lodash";
import MobilityButton from "../../CommonComponents/MobilityButton";
import MapTemp from "./map";
import {
formatAmount,
formatDateTime,
} from "../../../CustomUtils/DateTimeUtils";
import { AppContext } from "../../Context/AppContext";
import { ShowSnackbarFailure } from "../../CommonComponents/MobilitySnackBar";
import _ from "lodash";
import MobilityAccordion from "../../CommonComponents/MobilityAccordion";
import {
MobilityFareHeadingValue,
MobilityHeadingValue,
} from "../../CommonComponents/MobilityHeadingValue";
import { MobilityAppBar } from "../../CommonComponents/MobilityAppBar";
import { apiHandler } from "../../ApiServices/ApiHandler";
import { CURRENT_RIDE_DETAILS } from "../../ApiServices/ApiConstants";

const RaiseIssuePath: string = "/raiseIssue";

const driverDetailsPath: string = "/driverDetails";

const CurrentRideDetails: FC = (): ReactElement => {

const navigate = useNavigate();
const [queryParameters] = useSearchParams();
const id = [Link]("id");
const [isMapVisible, setIsMapVisible] = [Link](false);

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

const [rideDetails, setRideDetails] = [Link]<any>({});

let myContext = [Link](AppContext);

async function apiCall() {

try {
[Link]({
isLoading: true,
message: "Getting Current Ride details...",
});

const response: Iresponse = await [Link](

`${CURRENT_RIDE_DETAILS}?id=${id}`
);

if (!isEmpty(response)) {
let baseFare = "",
cgst = "",
sgst = "",
distanceFare = "",
buyerFinderFees = "";
[Link]?.data?.quote?.[Link]((element:
any) => {
switch ([Link]()) {
case "BASE_FARE":
baseFare =
[Link]?.[Link]();
break;
case "CGST":
cgst =
[Link]?.[Link]();
break;
case "SGST":
sgst =
[Link]?.[Link]();
break;
case "BUYER_FINDER_FEES":
buyerFinderFees =
[Link]?.[Link]();
break;
case "DISTANCE_FARE":
distanceFare =
[Link]?.[Link]();
break;
}
});

let rideAsigned = "",

rideEnroutePickup = "",
rideArrivedPickup = "",
rideStarted = "";
[Link]?.data?.[Link]((element:
any) => {
switch
(element.fulfillment_state?.[Link]()) {
case "RIDE_ASSIGNED":
rideAsigned =
element.cancellation_fee?.amount?.[Link]();
break;
case "RIDE_ENROUTE_PICKUP":
rideEnroutePickup =

element?.cancellation_fee?.amount?.[Link]();
break;
case "RIDE_ARRIVED_PICKUP":
rideArrivedPickup =

element?.cancellation_fee?.amount?.[Link]();
break;
case "RIDE_STARTED":
rideStarted =
element?.cancellation_fee?.amount?.[Link]();
break;
}
});

setRideDetails({
transactionId: [Link]?.data?.transactionId
|| "NA",
driverName: [Link]?.data?.agent?.name ||
"NA",
driverId: [Link]?.data?.agent?.id || "NA",
passegngerName:
[Link]?.data?.customer?.name || "NA",
estimatedCost:
formatAmount([Link]?.data?.quote?.price?.value),
estimatedTime: [Link]?.data?.eta || "NA",
startDateAndTime: formatDateTime(
[Link]?.data?.createdDate,
true
),

destinationLocation:
 [Link]?.data?.destinationLocation?.address || "NA",
sourceLocation:
[Link]?.data?.sourceLocation?.address || "NA",
destinationLocationGps:
[Link]?.data?.destinationLocation?.gps,
sourceLocationGps:
[Link]?.data?.sourceLocation?.gps,
//tripPolyline:
[Link]?.data?.routeDetails?.tripPolyline,
beforeStartTripLocationArray:

[Link]?.data?.beforeStartTripLocationArray,
afterStartTripLocationArray:

[Link]?.data?.afterStartTripLocationArray,
locationArray: [Link]?.data?.locationArray,
vehicleCategory:
[Link]?.data?.vehicle?.category || "NA",
vehicleMake: [Link]?.data?.vehicle?.make ||
"NA",
vehicleModel: [Link]?.data?.vehicle?.model
|| "NA",
vehicleRegistration:

[Link]?.data?.vehicle?.registrationNumber || "NA",

//fair
totalFare:
formatAmount([Link]?.data?.quote?.price?.value),
baseFare: formatAmount(baseFare),
cgst: formatAmount(cgst),
sgst: formatAmount(sgst),
distanceFare: formatAmount(distanceFare),
buyerFinderFees: formatAmount(buyerFinderFees),

rideAsigned: formatAmount(rideAsigned),
rideEnroutePickup:
formatAmount(rideEnroutePickup),
rideArrivedPickup:
formatAmount(rideArrivedPickup),
rideStarted: formatAmount(rideStarted),

paymentCollectedBy:
[Link]?.data?.payment?.collected_by
|| "NA",
paymentStatus:
[Link]?.data?.payment?.status || "NA",
paymentType: [Link]?.data?.payment?.type ||
"NA",

waitingCharges: formatAmount(
[Link]?.data?.waitingCharges?.amount
),
extraTimeCharges: formatAmount(

[Link]?.data?.extraTimeCharges?.amount
),

providerName: [Link]?.data?.providerName,
listName: [Link]?.data?.listOfItems?.
[0].[Link],
listCode: [Link]?.data?.listOfItems?.
[0].[Link],
 tripStatus: [Link]?.data?.status,
});
} else {
ShowSnackbarFailure(response, myContext);
[Link]("error.", response);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}

[Link](() => {
apiCall();

setTimeout(() => {
setIsMapVisible(true);
}, 1000);
}, []);

const cardStyle = {
boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
marginTop: "10px",
padding: 2,
};

return (
<Grid style={{ padding: 5 }}>
<Grid item>
<MobilityAppBar
title="Current Ride Details"
onBackClick={() => {
navigate(-1);
}}
menus={
<MobilityButton
label="Raise an Issue"
onClick={(event:
[Link]<HTMLButtonElement>) => {
navigate(
`${RaiseIssuePath}?
transactionId=${rideDetails?.transactionId}`
);
}}
/>
}
/>
</Grid>

<Paper component={Card} variant="outlined" sx={cardStyle}>

<Grid container spacing={1}>
<Grid item xs={12} md={6}>
<MobilityAccordion
isExpanded={true}
title={"Ride Details"}
details={
<>
<MobilityHeadingValue
heading="Transaction
ID"
 value={rideDetails?.transactionId}
/>
<MobilityHeadingValue
heading="Trip Status"

value={rideDetails?.tripStatus}
/>

<MobilityHeadingValue
heading={"Driver
Name"}

value={rideDetails?.driverName}
linkUrl={`$
{driverDetailsPath}?id=$
{rideDetails?.driverId}&isEdit=false&selectedTab=details`}
/>

<MobilityHeadingValue
heading="Passenger
Name"

value={rideDetails?.passegngerName}
/>
<MobilityHeadingValue
heading="Estimated
Cost"

value={rideDetails?.estimatedCost}
/>
<MobilityHeadingValue
heading="Estimated
Time"
value={`$
{rideDetails?.estimatedTime} mins`}
/>
<MobilityHeadingValue
heading="Start Date &
Time"

value={rideDetails?.startDateAndTime}
/>
<MobilityHeadingValue
heading="Source"

value={rideDetails?.sourceLocation}
/>
<MobilityHeadingValue
heading="Destination"

value={rideDetails?.destinationLocation}
/>
</>
}
/>

<Grid container xs={12} md={12} spacing={1}

sx={{ marginTop: 0 }}>
<Grid item xs={6} md={6}>
<MobilityAccordion
isExpanded={true}
title={"Vehicle Details"}
details={
<>
<MobilityFareHeadingValue

heading="Category"

value={rideDetails?.vehicleCategory}
/>

<MobilityFareHeadingValue

heading="Make"

value={rideDetails?.vehicleMake}
/>

<MobilityFareHeadingValue

heading="Model"

value={rideDetails?.vehicleModel}
/>

<MobilityFareHeadingValue

heading="Reg. Number"

value={rideDetails?.vehicleRegistration}
/>
</>
}
/>
</Grid>

<Grid item xs={6} md={6}>

<MobilityAccordion
isExpanded={true}
title={"Provider Details"}
details={
<>

<MobilityFareHeadingValue

heading="Provider Name"

value={rideDetails?.providerName}
/>

<MobilityFareHeadingValue

heading="List Name"

value={rideDetails?.listName}
/>

<MobilityFareHeadingValue

heading="List Code"

value={rideDetails?.listCode}
/>
</>
}
/>
</Grid>
 </Grid>
</Grid>

<Grid container item xs={12} md={6}>

<Card style={{ display: "flex", flex: 1 }}>
<CardContent style={{ display: "flex",
flex: 1, padding: 8 }}>
{isMapVisible && (
<MapTemp
rideType="ongoing"

sourceLocation={rideDetails?.sourceLocationGps}

destinationLocation={rideDetails?.destinationLocationGps}

tripPolyline={rideDetails?.tripPolyline}

currentLocation={rideDetails?.destinationLocationGps}

locationArray={rideDetails?.locationArray}

startDateAndTime={rideDetails?.startDateAndTime}

endDateAndTime={rideDetails?.endDateAndTime}

beforeStartTripLocationArray={

rideDetails?.beforeStartTripLocationArray
}

afterStartTripLocationArray={

rideDetails?.afterStartTripLocationArray
}
/>
)}
</CardContent>
</Card>
</Grid>

<Grid item xs={6} md={3}>

<MobilityAccordion
isExpanded={true}
title={"Fare Details :"}
details={
<>
<MobilityFareHeadingValue
heading="Basic Fare"

value={rideDetails?.baseFare}
/>
<MobilityFareHeadingValue
heading="Distance
Fare"

value={rideDetails?.distanceFare}
/>
<MobilityFareHeadingValue
heading="Buyer Finder
Fare"

value={rideDetails?.buyerFinderFees}
/>
<MobilityFareHeadingValue
 heading="CGST (2.5
%)"

value={rideDetails?.cgst}
/>
<MobilityFareHeadingValue
heading="SGST (2.5
%)"

value={rideDetails?.sgst}
/>
<MobilityFareHeadingValue
heading="Total Fare"

value={rideDetails?.totalFare}
/>
</>
}
/>
</Grid>

<Grid item xs={6} md={3}>

<MobilityAccordion
isExpanded={true}
title={"Cancellation Charges :"}
details={
<>
<MobilityFareHeadingValue
heading="Ride
Assigned"

value={rideDetails?.rideAsigned}
/>
<MobilityFareHeadingValue
heading="Ride Enroute
Pickup"

value={rideDetails?.rideEnroutePickup}
/>
<MobilityFareHeadingValue
heading="Ride Arrived
Pickup"

value={rideDetails?.rideArrivedPickup}
/>
<MobilityFareHeadingValue
heading="Ride
Started"

value={rideDetails?.rideStarted}
/>
</>
}
/>
</Grid>

<Grid item xs={6} md={3}>

<MobilityAccordion
isExpanded={true}
title={"Payment Details:"}
details={
<>
<MobilityFareHeadingValue
heading="Collected
By"

value={rideDetails?.paymentCollectedBy}
/>
<MobilityFareHeadingValue
heading="Status"

value={rideDetails?.paymentStatus}
/>
<MobilityFareHeadingValue
heading="Type"

value={rideDetails?.paymentType}
/>
</>
}
/>
</Grid>

<Grid item xs={6} md={3}>

<MobilityAccordion
isExpanded={true}
title={"Waiting Charges"}
details={
<>
<MobilityFareHeadingValue
heading="Waiting
Charges"

value={rideDetails?.waitingCharges}
/>
<MobilityFareHeadingValue
heading="Extra Time
Charges"

value={rideDetails?.extraTimeCharges}
/>
</>
}
/>
</Grid>
</Grid>
</Paper>
</Grid>
);
};

export default CurrentRideDetails;

43] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
CurrentRides\[Link]
import { Card, Grid, Paper } from "@mui/material";
import * as React from "react";
import _, { isEmpty } from "lodash";
import { useNavigate } from "react-router-dom";
import EnhancedTable from "../../CommonComponents/EnhancedTable";
import { formatDate, formatDateTime } from "../../../CustomUtils/DateTimeUtils";
import { MobilityButtonIconView } from
"../../CommonComponents/MobilityButtonIcon";
import { AppContext } from "../../Context/AppContext";
import { ShowSnackbarFailure } from "../../CommonComponents/MobilitySnackBar";
import { apiHandler } from "../../ApiServices/ApiHandler";
import { TRACK_CURRENT_RIDE } from "../../ApiServices/ApiConstants";
import MobilityDatePicker from "../../CommonComponents/MobilityDatePicker";
import dayjs, { Dayjs } from "dayjs";
import {
DateValidationError,
PickerChangeHandlerContext,
} from "@mui/x-date-pickers";
import MobilityButton from "../../CommonComponents/MobilityButton";

const currentRideDetailsPath: string = "/current-ride-details";

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

interface driverState {
id: string;
firstName: string;
phone: string;
city: string;
status: string;
documents: string;
actions: any;
driverName: any;
passengerName: any;
estimatedCost: any;
estimatedTime: any;
source: any;
destination: any;
dateAndTime: any;
}

const CurrentRidesList: [Link] = (): [Link] => {

const navigate = useNavigate();
let myContext = [Link](AppContext);
const tableRef = [Link]<any>();
const [filteredcurrentRides, setFilteredcurrentRides] = [Link]<
driverState[]
>([]);
const [startDate, setStartDate] = [Link]<Dayjs | null>(
myContext?.currentRidesFilter?.startDate
? dayjs(myContext?.currentRidesFilter?.startDate)
: dayjs(new Date())
);
const [endDate, setEndDate] = [Link]<Dayjs | null>(
myContext?.currentRidesFilter?.endDate
? dayjs(myContext?.currentRidesFilter?.endDate)
: dayjs(new Date())
);
// const [startDate, setStartDate] = [Link]<string | undefined>(
// new Date().toString()
// );
// const [endDate, setEndDate] = [Link]<string | undefined>();

const [rowsPerPage, setRowsPerPage] = [Link]<number>(25);

const [count, setCount] = [Link]<number>(0);
const [page, setPage] = [Link]<number>(0);

[Link](() => {
if (page || rowsPerPage) {
getCurrentRidesList();
}
}, [page, rowsPerPage]);
 async function getCurrentRidesList() {
try {
[Link]({
isLoading: true,
message: "Tracking current ride...",
});
[Link]({ startDate, endDate });
const payload = {
rowsPerPage,
pageNo: page,
searchBy: "date",
startDate: startDate?.format("DD/MM/YYYY"),
endDate: endDate?.format("DD/MM/YYYY"),
// startDate: startDate
// ? formatDate(startDate)?.toString()
// : formatDate(new Date().toString()),
// endDate: endDate
// ? formatDate(endDate)?.toString()
// : formatDate(new Date().toString()),
};

const response: Iresponse = await

[Link](TRACK_CURRENT_RIDE, {
params: payload,
});
if (!isEmpty(response)) {
const data = response?.data?.data?.result;
const _data = data?.map((ride: any) => {
return {
id: ride?.id,
driverName: ride?.driverName,
passengerName: ride?.customreName,
source: ride?.source,
destination: ride?.destination,
estimatedCost: ride?.cost,
estimatedTime: ride?.eta,
//dateAndTime:
formatDateTime(ride?.dateAndTime, true),
dateAndTime: new
Date(ride?.dateAndTime).getTime(),
viewDetails: (
<MobilityButtonIconView
tooltipTitle="View Ride Details"
onClick={(e) => {
[Link]();
navigate(`$
{currentRideDetailsPath}?id=${ride?.id}`);
}}
/>
),
};
});
setFilteredcurrentRides(_data);
setCount(response?.data?.data?.totalCount);
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}

const EnhancedTableConfig = {
headers: [
{
id: "driverName",
numeric: false,
disablePadding: true,
label: "Driver Name",
disableSort: false,
},
{
id: "passengerName",
numeric: false,
disablePadding: true,
label: "Passenger Name",
disableSort: false,
},
{
id: "source",
numeric: false,
disablePadding: true,
label: "Source",
disableSort: true,
},
{
id: "destination",
numeric: false,
disablePadding: true,
label: "Destination",
disableSort: true,
},
{
id: "estimatedCost",
numeric: true,
disablePadding: true,
label: "Estimated Fare",
disableSort: true,
},
{
id: "estimatedTime",
numeric: true,
disablePadding: true,
label: "Estimated Time (mins)",
disableSort: true,
},
{
id: "dateAndTime",
numeric: false,
disablePadding: true,
label: "Date Time",
disableSort: false,
},
{
id: "viewDetails",
numeric: true,
disablePadding: true,
label: "View Details",
disableSort: true,
},
],
};

const refreshPage = async (pagination: any) => {

 if ([Link]) {
setRowsPerPage([Link]);
}
if (pagination?.page?.toString().length > 0) {
setPage([Link]);
}
};

return (
<Grid style={{ padding: 5 }}>
<Paper component={Card} variant="outlined">
<Grid
container
sx={{
paddingLeft: 2,
paddingTop: 2,
backgroundColor: "white",
}}
>
<Grid container spacing={2} alignItems="center">
<Grid item>
<MobilityDatePicker
label="Start Date"
value={startDate}
onChange={(
value: Dayjs | null,
context:
PickerChangeHandlerContext<DateValidationError>
) => {
setStartDate(value);
}}
/>
</Grid>
<Grid item>
<MobilityDatePicker
label="End Date"
value={endDate}
onChange={(
value: Dayjs | null,
context:
PickerChangeHandlerContext<DateValidationError>
) => {
setEndDate(value);
}}
/>
</Grid>
<Grid item>
<MobilityButton
label="Search"
onClick={(
event:
[Link]<HTMLButtonElement, MouseEvent>
) => {
if
(startDate?.isAfter(endDate, "dates")) {
ShowSnackbarFailure(
"Start Date
should be same or before End Date",
myContext
);
} else {

getCurrentRidesList();
}
 }}
/>
</Grid>
</Grid>
</Grid>

<Grid padding={2}>
<EnhancedTable
ref={tableRef}
headers={[Link]}
tableData={filteredcurrentRides}
count={count}
refreshPage={refreshPage}
></EnhancedTable>
</Grid>
</Paper>
</Grid>
);
};

export default CurrentRidesList;

44] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
CurrentRides\[Link]
import { LoadScript } from "@react-google-maps/api";
import GoogleMapComponent from "./mapW";
import { MAP_API_KEY } from "../../../config/env";

export interface MapProps {

currentLocation?: any;
sourceLocation?: any;
destinationLocation?: any;
tripPolyline?: any;
locationArray?: any;
startDateAndTime?: any;
endDateAndTime?: any;
driverCoordinates?: any;
searchCoordinates?: any;
customerLocation?: any;
driverBroadcastedCoordinates?: any;
driverBroadcastReceivedCoordinates?: any;
driverAcceptedByCoordinates?: any;
driverBroadcastAssignedCoordinates?: any;
driverAssignedCoordinates?: any;
broadcastCustomerDetails?: any;
broadcastCustomerLocation?: any;
rideType?: string;
beforeStartTripLocationArray?: any;
afterStartTripLocationArray?: any;
search?: string;
}

function MapTemp(props: MapProps) {

//[Link]("29 props ", props);
return (
<LoadScript googleMapsApiKey={MAP_API_KEY}>
<GoogleMapComponent
search={props?.search}
driverCoordinates={props?.driverCoordinates}
searchCoordinates={props?.searchCoordinates}
sourceLocation={[Link]}
destinationLocation={[Link]}
tripPolyline={[Link]}
currentLocation={props?.currentLocation}
 locationArray={props?.locationArray}
startDateAndTime={props?.startDateAndTime}
endDateAndTime={props?.endDateAndTime}
customerLocation={props?.customerLocation}

driverBroadcastedCoordinates={props?.driverBroadcastedCoordinates}
driverBroadcastReceivedCoordinates={
props?.driverBroadcastReceivedCoordinates
}

driverAcceptedByCoordinates={props?.driverAcceptedByCoordinates}

driverAssignedCoordinates={props?.driverAssignedCoordinates}

broadcastCustomerDetails={props?.broadcastCustomerDetails}

broadcastCustomerLocation={props?.broadcastCustomerLocation}
rideType={props?.rideType}

beforeStartTripLocationArray={props?.beforeStartTripLocationArray}

afterStartTripLocationArray={props?.afterStartTripLocationArray}
/>
</LoadScript>
);
}

export default MapTemp;

45] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
CurrentRides\[Link]
import { useState } from "react";
import {
GoogleMap,
Polyline,
Marker,
InfoWindow,
} from "@react-google-maps/api";
import { MapProps } from "./map";
import { MobilityButtonIconReCenter } from
"../../CommonComponents/MobilityButtonIcon";
import { Grid, Typography, colors } from "@mui/material";
import _ from "lodash";
import auto from "../../../assets/[Link]";
import auto_red from "../../../assets/auto_red.png";
import auto_black from "../../../assets/auto_black.png";
import auto_blue from "../../../assets/auto_blue.png";
import location_man_red from "../../../assets/location_man_red.svg";
import source_svg from "../../../assets/[Link]";
import { GRAY_900, RED_A200 } from "../../Constants/CommonConstants";
import { formatDateTime } from "../../../CustomUtils/DateTimeUtils";
import polyline from "./polyline";
import React from "react";
import { AppContext } from "../../Context/AppContext";
import { MobilityAppBar } from "../../CommonComponents/MobilityAppBar";
import MobilityBadge from "../../CommonComponents/MobilityBadge";
import { useNavigate } from "react-router-dom";

const containerStyle = {
display: "flex",
flex: 1,
minHeight: 200,
//maxHeight: 500,
};
const center = {
lat: 18.559658,
lng: 73.779938,
};

function GoogleMapComponent(props: MapProps) {

// const google = useGoogleMap();
const [googleMap, setGoogleMap] = useState<any>(null);
const [apiResponse, setApiResponse] = useState<any>(null);
const [eventResponse, setEventResponse] = useState<any>(null);
const [current, setCurrent] = useState<any>(null);
const [autoStartLocation, setAutoStartLocation] = useState<any>(null);
const [mapCenter, setMapCenter] = useState<any>(center);
const [mapZoom, setMapZoom] = useState<any>(15);
const [source, setSource] = useState<any>();
const [destination, setDestination] = useState<any>();
const [polyLatLng, setPolyLatLng] = useState<any>(null);
const [tripPolyLatLng, setTripPolyLatLng] = useState<any>(null);
const [beforeStartTripPolyLatLng, setBeforeStartTripPolyLatLng] =
useState<any>(null);
const [afterStartTripPolyLatLng, setAfterStartTripPolyLatLng] =
useState<any>(null);
const [driverCoordinates, setDriverCoordinates] = useState<any>([]);
const [searchCoordinates, setSearchCoordinates] = useState<any>([]);
const [customerLoc, setCustomerLoc] = useState<any>("");
const [customerBroadcastedCoordinates, seCustomerBroadcastedCoordinates] =
useState<any>([]);
const [driverBroadcastedCoordinates, setDriverBroadcastedCoordinates] =
useState<any>([]);
const [
driverBroadcastReceivedCoordinates,
setDriverBroadcastReceivedCoordinates,
] = useState<any>([]);
const [driverAssignedCoordinates, setDriverAssignedCoordinates] =
useState<any>([]);
const [driverAcceptedCoordinates, setDriverAcceptedCoordinates] =
useState<any>([]);
const [displayInfoWindo, setDisplayInfoWindo] = useState<any>();
let myContext: any = [Link](AppContext);

const onLoad = (mapInstance: any) => {

setGoogleMap(mapInstance);

const markers: { lat: number; lng: number }[] = [],

driverMarkers: any = [],
searchMarkers: any = [],
acceptedMarkers: any = [];

if (
props?.customerLocation &&
props?.customerLocation?.toString() !== "0,0" &&
props?.customerLocation?.toString() != ""
) {
const sourceLatLng = {
lat:
Number(props?.customerLocation?.toString().split(",")[0]),
lng:
Number(props?.customerLocation?.toString().split(",")[1]),
};
//[Link](sourceLatLng);
setCustomerLoc(sourceLatLng);
}
 if (
props?.sourceLocation &&
props?.sourceLocation?.toString() !== "0,0" &&
props?.sourceLocation?.toString() != ""
) {
const sourceLatLng = {
lat: Number(props?.sourceLocation?.toString().split(",")
[0]),
lng: Number(props?.sourceLocation?.toString().split(",")
[1]),
};
[Link](sourceLatLng);
[Link]("111 sourceLatLng", sourceLatLng);
setSource(sourceLatLng);
}

if (
props?.destinationLocation &&
props?.destinationLocation?.toString() !== "0,0" &&
props?.destinationLocation?.toString() != ""
) {
const destLatLng = {
lat:
Number(props?.destinationLocation?.toString().split(",")[0]),
lng:
Number(props?.destinationLocation?.toString().split(",")[1]),
};
[Link](destLatLng);
[Link]("125 destLatLng", destLatLng);
setDestination(destLatLng);
}

if (
props?.currentLocation &&
props?.currentLocation?.toString() !== "0,0" &&
props?.currentLocation?.toString() != ""
) {
const currentLatLng = {
lat:
Number(props?.currentLocation?.toString().split(",")[0]),
lng:
Number(props?.currentLocation?.toString().split(",")[1]),
};
[Link](currentLatLng);
setCurrent(currentLatLng);
//[Link]("267", props?.currentLocation);
}

if (props?.driverCoordinates) {
props?.[Link]((item: any) => {
//if (item?.toString() !== "0,0" && item?.toString() !=
"") {
const latlng = {
lat: Number(

item?.currentLocation?.[Link]().split(",")[0]
),
lng: Number(

item?.currentLocation?.[Link]().split(",")[1]
),
};
[Link](latlng);
//[Link]("143", latlng);
 //[Link]({
[Link]({
latlng,
name: (
<div>
{item?.name}
<br />
{item?.phone}
<br />
<div>
{item?.currentLocation?.time
?
formatDateTime(item?.currentLocation?.time, true)
: ""}
</div>
</div>
),
auto,
size: new [Link](25, 25),
phone: item?.phone,
//fullName: item?.name,
});
//[Link](latlng);
//}
});
}
//[Link]("281 driverMarkers", ...driverMarkers);
//setDriverCoordinates(driverMarkers);

if (props?.searchCoordinates) {
props?.[Link]((item: any) => {
//if (item?.toString() !== "0,0" && item?.toString() !=
"") {
const latlng = {
lat: Number(item?.toString().split(",")[0]),
lng: Number(item?.toString().split(",")[1]),
};
[Link](latlng);
[Link](latlng);
//}
});
}

//[Link]("306 searchMarkers", ...searchMarkers);

setSearchCoordinates(searchMarkers);

if (props?.driverBroadcastedCoordinates) {
props?.[Link]((item: any) => {
[Link]("179 item", item);
if (item?.currentLocations) {
if (
item?.currentLocations?.toString() !== "0,0"
&&
item?.toString() != ""
) {
const name = item?.firstName + " " +
item?.lastName;
const latlng = {
lat:
Number(item?.currentLocations?.toString().split(",")[0]),
lng:
Number(item?.currentLocations?.toString().split(",")[1]),
};
[Link](latlng);
 [Link]({
latlng,
name: (
<div>
<div style={{ fontWeight:
"bold" }}>{`Broadcasted to :`}</div>
{name}
<br />
{item?.phone}
{item?.time}
</div>
),
auto,
size: new [Link](25, 25),
});
}
}
});
}
//[Link]("284", driverBroadcastedCoordinates);
setDriverBroadcastedCoordinates(driverBroadcastedCoordinates);

if (props?.driverBroadcastReceivedCoordinates) {
props?.[Link]((item: any) => {
//[Link]("269", item?.[Link]());
if (item?.currentLocations) {
if (
item?.currentLocations?.toString() !== "0,0"
&&
item?.toString() != ""
) {
const name = item?.firstName + " " +
item?.lastName;
const latlng = {
lat:
Number(item?.currentLocations?.toString().split(",")[0]),
lng:
Number(item?.currentLocations?.toString().split(",")[1]),
};
[Link](latlng);

//[Link]({ latlng, name });

[Link]({
latlng,
//name: <div>Ride received by :
{name}</div>,
name: (
<div>
<div style={{ fontWeight:
"bold" }}>{`Received by :`}</div>
{name}
<br />
{item?.phone}
{item?.time}
</div>
),
auto: auto_black,
size: new [Link](30, 30),
});
}
}
});
}
// [Link]("305", driverBroadcastReceivedCoordinates);
 setDriverBroadcastReceivedCoordinates(driverBroadcastReceivedCoordinates);

if (props?.driverAcceptedByCoordinates) {
props?.[Link]((item: any) => {
//[Link]("310", item?.[Link]());
if (item?.currentLocations) {
if (
item?.[Link]() !== "0,0"
&&
item?.toString() != ""
) {
const name = item?.firstName + " " +
item?.lastName;
const latlng = {
lat:
Number(item?.currentLocations?.toString().split(",")[0]),
lng:
Number(item?.currentLocations?.toString().split(",")[1]),
};
[Link](latlng);
//[Link]({ latlng,
name });
[Link]({
latlng,
//name: <div>Ride accepted by :
{name}</div>,
name: (
<div>
<div style={{ fontWeight:
"bold" }}>{`Accepted by :`}</div>
{name}
<br />
{item?.phone}
{item?.time}
</div>
),
auto: auto_blue,
size: new [Link](35, 35),
});
}
}
});
}
//[Link]("325", driverAcceptedCoordinates);
setDriverAcceptedCoordinates(driverAcceptedCoordinates);

if (props?.driverAssignedCoordinates) {
props?.[Link]((item: any) => {
[Link]("310", item?.[Link]());
if (item?.currentLocations) {
if (
item?.[Link]() !== "0,0"
&&
item?.toString() != ""
) {
const name = item?.firstName + " " +
item?.lastName;
const latlng = {
lat:
Number(item?.currentLocations?.toString().split(",")[0]),
lng:
Number(item?.currentLocations?.toString().split(",")[1]),
};
 [Link](latlng);
//[Link]({ latlng,
name });
[Link]({
latlng,
//name: <div>Ride assigned to :
{name}</div>,
name: (
<div>
<div style={{ fontWeight:
"bold" }}>{`Assigned to :`}</div>
{name}
<br />
{item?.phone}
{item?.time}
</div>
),
auto: auto_red,
size: new [Link](40, 40),
});
}
}
});
}
//[Link]("325", driverAssignedCoordinates);
setDriverAssignedCoordinates(driverAssignedCoordinates);

if (props?.broadcastCustomerDetails) {
let name = props?.broadcastCustomerDetails?.name;
let item: any = {
// name: <div>Passenger : {name}</div>,
name: (
<div>
<div style={{ fontWeight:
"bold" }}>{`Passenger :`}</div>
{name}
</div>
),
auto: location_man_red,
size: new [Link](50, 50),
};

if (
props?.broadcastCustomerLocation &&
props?.broadcastCustomerLocation?.coordinates
) {
const latlng = {
lat:
Number(props?.broadcastCustomerLocation?.coordinates[0]),
lng:
Number(props?.broadcastCustomerLocation?.coordinates[1]),
};
[Link](latlng);
item = { ...item, latlng };
}
// [Link]("425 item", item);
//[Link](item);
[Link](item);
}

//[Link]("327 ", props?.beforeStartTripLocationArray);

if (props?.beforeStartTripLocationArray) {
let coArray1 = props?.[Link](
(item: any, index: any) => {
 return [
Number(item?.location?.toString().split(",")
[0]),
Number(item?.location?.toString().split(",")
[1]),
];
}
);
//[Link]("336 coArray", coArray1);
let polyline = encodePolyline(coArray1);
//[Link]("338 polyline", polyline);
let s = decodePolyline(polyline);
//[Link]("340 s", s);
setBeforeStartTripPolyLatLng(s);

let item: any = _.first(props?.beforeStartTripLocationArray);

if (item) {
const latlng = {
lat: Number(item?.location?.toString().split(",")
[0]),
lng: Number(item?.location?.toString().split(",")
[1]),
};
let obj = { ...item, latlng };
//[Link]("363", obj);
[Link](latlng);
//[Link]("355 obj", obj);
setAutoStartLocation(obj);
}
}

if (props?.afterStartTripLocationArray) {
let coArray1 = props?.[Link](
(item: any, index: any) => {
return [
Number(item?.location?.toString().split(",")
[0]),
Number(item?.location?.toString().split(",")
[1]),
];
}
);
//[Link]("506 coArray", coArray1);
let polyline = encodePolyline(coArray1);
//[Link]("508 polyline", polyline);
let s = decodePolyline(polyline);
//[Link]("510 s", s);
setAfterStartTripPolyLatLng(s);

let item: any = _.last(props?.afterStartTripLocationArray);

if (item) {
const latlng = {
lat: Number(item?.location?.toString().split(",")
[0]),
lng: Number(item?.location?.toString().split(",")
[1]),
};
let obj = { ...item, latlng };
//[Link]("519", obj);
[Link](latlng);
setCurrent(obj);
}
}
 if (props?.rideType === "completed" && props?.tripPolyline) {
//[Link]("474", props?.tripPolyline);
let polLatLng = decodePolyline(props?.tripPolyline);
//[Link]("476", polLatLng);
setTripPolyLatLng(polLatLng);
}

if (props?.rideType === "completed" && props?.locationArray) {

let coArray1 = props?.[Link]((item: any, index:
any) => {
return [
Number(item?.location?.toString().split(",")[0]),
Number(item?.location?.toString().split(",")[1]),
];
});
//[Link]("506 coArray", coArray);
let polyline = encodePolyline(coArray1);
//[Link]("508 polyline", polyline);
let s = decodePolyline(polyline);
//[Link]("510 s", s);
setPolyLatLng(s);

let item: any = _.last(props?.locationArray);

if (item) {
const latlng = {
lat: Number(item?.location?.toString().split(",")
[0]),
lng: Number(item?.location?.toString().split(",")
[1]),
};
let obj = { ...item, latlng };
//[Link]("519", obj);
[Link](latlng);
setCurrent(obj);
}
}

if (props?.rideType === "ongoing" && props?.locationArray) {

// let coArray = props?.[Link]((item: any, index:
any) => {
// return {
// lat: Number(item?.location?.toString().split(",")
[0]),
// lng: Number(item?.location?.toString().split(",")
[1]),
// };
// });
let coArray1 = props?.[Link]((item: any, index:
any) => {
return [
Number(item?.location?.toString().split(",")[0]),
Number(item?.location?.toString().split(",")[1]),
];
});
//[Link]("453 coArray", coArray);
let polyline = encodePolyline(coArray1);
//[Link]("452 polyline", polyline);
let s = decodePolyline(polyline);
//[Link]("468 s", s);
setPolyLatLng(s);

let item: any = _.last(props?.locationArray);

if (item) {
const latlng = {
 lat: Number(item?.location?.toString().split(",")
[0]),
lng: Number(item?.location?.toString().split(",")
[1]),
};
let obj = { ...item, latlng };
//[Link]("484", obj);
[Link](latlng);
setCurrent(obj);
}
}

if (props?.rideType === "cancelled" && props?.locationArray) {

// let coArray = props?.[Link]((item: any, index:
any) => {
// return {
// lat: Number(item?.location?.toString().split(",")
[0]),
// lng: Number(item?.location?.toString().split(",")
[1]),
// };
// });
let coArray1 = props?.[Link]((item: any, index:
any) => {
return [
Number(item?.location?.toString().split(",")[0]),
Number(item?.location?.toString().split(",")[1]),
];
});
//[Link]("453 coArray", coArray);
let polyline = encodePolyline(coArray1);
//[Link]("452 polyline", polyline);
let s = decodePolyline(polyline);
//[Link]("468 s", s);
setPolyLatLng(s);

let item: any = _.last(props?.locationArray);

if (item) {
const latlng = {
lat: Number(item?.location?.toString().split(",")
[0]),
lng: Number(item?.location?.toString().split(",")
[1]),
};
let obj = { ...item, latlng };
//[Link]("552", obj);
[Link](latlng);
setCurrent(obj);
}
}

//[Link]("429 item", driverBroadcastedCoordinates);

const bounds = new [Link]();
markers?.forEach(({ lat, lng }) => [Link]({ lat, lng }));
[Link](bounds);
};

function handleZoomChanged() {
if (googleMap) {
setMapZoom([Link]());
}
}

const polylineOptions = {
 strokeColor: GRAY_900,
//strokeOpacity: 1,
//strokeWeight: [Link](1, 6 - (mapZoom - 15)),
};

const url = new URL([Link]);

const urlSearchParams = new URLSearchParams([Link]);

const decodePolyline = (poly: any) => {

let points = [Link](poly, 5);
let coords = [Link]((point, index) => {
return {
lat: point[0],
lng: point[1],
};
});

return coords;
};

const encodePolyline = (coordinates: any) => {

let line = [Link](coordinates, 5);
return line;
};

function customMarker(item: any, index: any) {

return (
<Marker
key={index}
position={[Link]}
icon={{
url: item?.auto ? item?.auto : auto,
scaledSize: item?.size ? item?.size : new
[Link](20, 20),
}}
onMouseOver={() => {
setDisplayInfoWindo(index);
}}
onMouseOut={() => {
setDisplayInfoWindo(-1);
}}
>
{(displayInfoWindo === index || item?.phone ===
props?.search) && (
<InfoWindow position={[Link]}>
<div>{item?.name}</div>
</InfoWindow>
)}
</Marker>
);
}

function customMarkerBroadcast(item: any, index: any) {

return (
<Marker
key={index}
position={[Link]}
icon={{
url: item?.auto ? item?.auto : auto,
scaledSize: item?.size ? item?.size : new
[Link](20, 20),
}}
onMouseOver={() => {
setDisplayInfoWindo(index);
 }}
onMouseOut={() => {
setDisplayInfoWindo(-1);
}}
>
{displayInfoWindo === index && (
<InfoWindow position={[Link]}>
<div>{item?.name}</div>
</InfoWindow>
)}
</Marker>
);
}

//[Link]("507,", props?.locationArray);
return (
// <Grid item>
// <Grid item marginBottom={1}>
// <MobilityAppBar
// title="Broadcast Details"
// menus={createDescription()}
// onBackClick={() => {
// navigate(-1);
// }}
// />
// </Grid>
<GoogleMap
mapContainerStyle={containerStyle}
// center={{
// lat: 18.52,
// lng: 73.8553,
// }}
zoom={mapZoom}
options={{
zoomControl: true,
streetViewControl: false,
mapTypeControl: false,
fullscreenControl: false,
//tilt: 45,
}}
onLoad={onLoad}
onZoomChanged={handleZoomChanged}
// onTilesLoaded={() => {
// setMapZoom(12);
// }}
// onBoundsChanged={onBoundsChanged}
>
{
props?.customerLocation &&
customMarker(
{
latlng: customerLoc,
name: <div>Customer Location</div>,
auto: source_svg,
},
0
)
// <Marker
// position={customerLoc}
// icon={{
// //path: [Link],
// url:
require("../../../assets/[Link]").default,
// //scale: 10,
 // //strokeColor: "red",
// }}
// >
// <InfoWindow position={source}>
// <div>Customer Location</div>
// </InfoWindow>
// </Marker>
}
{props?.sourceLocation && (
<Marker
position={source}
icon={{
url:
require("../../../assets/[Link]").default,
}}
>
<InfoWindow position={source}>
<div>
Source Location
<br />
{props?.startDateAndTime}
</div>
</InfoWindow>
</Marker>
)}

{props?.destinationLocation && (
<Marker
position={destination}
icon={{
url:
require("../../../assets/[Link]").default,
}}
>
<InfoWindow>
<div>
Destination Location
<br />
{props?.endDateAndTime}
</div>
</InfoWindow>
</Marker>
)}

{props?.rideType === "ongoing" &&

customMarker(
{
latlng: current?.latlng,
name: (
<div>
Current Location
<br />
{current?.date ?
formatDateTime(current?.date, true) : ""}
</div>
),
//auto,
size: new [Link](25, 25),
},
1
)}

{props?.tripPolyline && <Polyline path={tripPolyLatLng} />}

{polyLatLng !== null && <Polyline path={polyLatLng} />}
 {beforeStartTripPolyLatLng && (
<Polyline
path={beforeStartTripPolyLatLng}
options={{ strokeColor: RED_A200 }}
/>
)}
{afterStartTripPolyLatLng && (
<Polyline
path={afterStartTripPolyLatLng}
options={{ strokeColor: "#00C853" }}
/>
)}
{autoStartLocation &&
customMarker(
{
latlng: autoStartLocation?.latlng,
name: (
<div>
Auto Start Location
<br />
{autoStartLocation?.date
?
formatDateTime(autoStartLocation?.date, true)
: ""}
</div>
),
auto: source_svg,
},
2
)}

<Grid sx={{ alignSelf: "flex-end", margin: 1 }}>

<MobilityButtonIconReCenter
onClick={() => {
setMapZoom(12);
onLoad(googleMap);
}}
/>
</Grid>

{/* {driverCoordinates &&

driverCoordinates?.map((item: any, index: any) => {
return (
<Marker
key={index}
position={item}
icon={{
url:
require("../../../assets/[Link]"),
scaledSize: new
[Link](25, 25),
//path:
[Link].BACKWARD_OPEN_ARROW,
//scale: 4,
//strokeColor: "red",
}}
></Marker>
);
})} */}
{searchCoordinates &&
searchCoordinates?.map((item: any, index: any) => {
return (
<Marker
key={index}
 position={item}
icon={{
url:
require("../../../assets/location_man_red.svg").default,
scaledSize: new
[Link](40, 40),
//path:
[Link].FORWARD_OPEN_ARROW,
//scale: 4,
//strokeColor: "red",
}}
></Marker>
);
})}

{myContext?.broadcastFilter?.driverBroadcastedCoordinatesVisible &&
driverBroadcastedCoordinates?.map((item: any, index:
any) => {
return customMarkerBroadcast(item, index);
})}

{myContext?.broadcastFilter?.driverBroadcastReceivedCoordinatesVisible &&
driverBroadcastReceivedCoordinates &&
driverBroadcastReceivedCoordinates?.map((item: any,
index: any) => {
return customMarkerBroadcast(item, index);
})}

{myContext?.broadcastFilter?.driverAssignedCoordinatesVisible
&&
driverAssignedCoordinates &&
driverAssignedCoordinates?.map((item: any, index: any)
=> {
return customMarkerBroadcast(item, index);
})}

{myContext?.broadcastFilter?.driverAcceptedCoordinatesVisible
&&
driverAcceptedCoordinates &&
driverAcceptedCoordinates?.map((item: any, index: any)
=> {
return customMarkerBroadcast(item, index);
})}

{customerBroadcastedCoordinates &&
customerBroadcastedCoordinates?.map((item: any, index:
any) => {
return customMarkerBroadcast(item, index);
})}

{driverCoordinates &&
driverCoordinates?.map((item: any, index: any) => {
return customMarker(item, index);
})}
</GoogleMap>
// </Grid>
);
}

export default GoogleMapComponent;

46] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
CurrentRides\[Link]
"use strict";

/**
* Based off of [the offical Google
document]([Link]
polylinealgorithm)
*
* Some parts from [this
implementation]([Link]
[Link])
* by [Mark McClure]([Link]
*
* @module polyline
*/

var polyline = {};

function py2_round(value) {
// Google's polyline algorithm uses the same rounding strategy as Python
2, which is different from JS for negative values
return [Link]([Link](value) + 0.5) * (value >= 0 ? 1 : -1);
}

function encode(current, previous, factor) {

current = py2_round(current * factor);
previous = py2_round(previous * factor);
var coordinate = (current - previous) * 2;
if (coordinate < 0) {
coordinate = -coordinate - 1;
}
var output = "";
while (coordinate >= 0x20) {
output += [Link]((0x20 | (coordinate & 0x1f)) + 63);
coordinate /= 32;
}
output += [Link]((coordinate | 0) + 63);
return output;
}

/**
* Decodes to a [latitude, longitude] coordinates array.
*
* This is adapted from the implementation in Project-OSRM.
*
* @param {String} str
* @param {Number} precision
* @returns {Array}
*
* @see [Link]
routing/[Link]
*/
[Link] = function (str, precision) {
var index = 0,
lat = 0,
lng = 0,
coordinates = [],
shift = 0,
result = 0,
byte = null,
latitude_change,
longitude_change,
factor = [Link](10, [Link](precision) ? precision : 5);
 // Coordinates have variable length when encoded, so just keep
// track of whether we've hit the end of the string. In each
// loop iteration, a single coordinate is decoded.
while (index < [Link]) {
// Reset shift, result, and byte
byte = null;
shift = 1;
result = 0;

do {
byte = [Link](index++) - 63;
result += (byte & 0x1f) * shift;
shift *= 32;
} while (byte >= 0x20);

latitude_change = result & 1 ? (-result - 1) / 2 : result / 2;

shift = 1;
result = 0;

do {
byte = [Link](index++) - 63;
result += (byte & 0x1f) * shift;
shift *= 32;
} while (byte >= 0x20);

longitude_change = result & 1 ? (-result - 1) / 2 : result / 2;

lat += latitude_change;
lng += longitude_change;

[Link]([lat / factor, lng / factor]);

}

return coordinates;
};

/**
* Encodes the given [latitude, longitude] coordinates array.
*
* @param {Array.<Array.<Number>>} coordinates
* @param {Number} precision
* @returns {String}
*/
[Link] = function (coordinates, precision) {
if (![Link]) {
return "";
}

var factor = [Link](10, [Link](precision) ? precision : 5),

output =
encode(coordinates[0][0], 0, factor) +
encode(coordinates[0][1], 0, factor);

for (var i = 1; i < [Link]; i++) {

var a = coordinates[i],
b = coordinates[i - 1];
output += encode(a[0], b[0], factor);
output += encode(a[1], b[1], factor);
}

return output;
};
function flipped(coords) {
var flipped = [];
for (var i = 0; i < [Link]; i++) {
var coord = coords[i].slice();
[Link]([coord[1], coord[0]]);
}
return flipped;
}

/**
* Encodes a GeoJSON LineString feature/geometry.
*
* @param {Object} geojson
* @param {Number} precision
* @returns {String}
*/
[Link] = function (geojson, precision) {
if (geojson && [Link] === "Feature") {
geojson = [Link];
}
if (!geojson || [Link] !== "LineString") {
throw new Error("Input must be a GeoJSON LineString");
}
return [Link](flipped([Link]), precision);
};

/**
* Decodes to a GeoJSON LineString geometry.
*
* @param {String} str
* @param {Number} precision
* @returns {Object}
*/
[Link] = function (str, precision) {
var coords = [Link](str, precision);
return {
type: "LineString",
coordinates: flipped(coords),
};
};

if (typeof module === "object" && [Link]) {

[Link] = polyline;
}

47] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
DriverRideCount\[Link]
import { Card, Grid, Paper, Tab, Tabs } from "@mui/material";
import * as React from "react";
import { apiHandler } from "../../ApiServices/ApiHandler";
import _ from "lodash";
import { useLocation, useNavigate } from "react-router-dom";
import EnhancedTable from "../../CommonComponents/EnhancedTable";
import { AppContext } from "../../Context/AppContext";
import { ShowSnackbarFailure } from "../../CommonComponents/MobilitySnackBar";
import MobilityEmptyMsg from "../../CommonComponents/MobilityEmptyMsg";
import { GET_DRIVER_AND_RIDE_LIST } from "../../ApiServices/ApiConstants";
import {
formatDateTime,
convertToStartDateString,
convertToEndDateString,
} from "../../../CustomUtils/DateTimeUtils";
import MobilityButton from "../../CommonComponents/MobilityButton";
import dayjs, { Dayjs } from "dayjs";
import MobilityDatePicker from "../../CommonComponents/MobilityDatePicker";
import {
DateValidationError,
PickerChangeHandlerContext,
} from "@mui/x-date-pickers";

const DriverRideCount: [Link] = (): [Link] => {

const navigate = useNavigate();
const location = useLocation();
let myContext = [Link](AppContext);
const [searchText, setSearchText] = [Link]<string>("");
const tableRef = [Link]<any>();
const [rowsPerPage, setRowsPerPage] = [Link]<number>(25);
const [count, setCount] = [Link]<number>(0);
const [page, setPage] = [Link]<number>(0);
const [tabValue, setTabValue] = [Link]<string>(
location?.state ? location?.state : "drivers"
);
const [filteredDriverList, setFilteredDriverList] =
[Link]<any[]>();
const [filteredRideList, setFilteredRideList] = [Link]<any[]>();
const [startDate, setStartDate] = [Link]<Dayjs | null>(
myContext?.driverRideStatsFilter?.startDate
? dayjs(myContext?.driverRideStatsFilter?.startDate)
: dayjs(new Date())
);
const [endDate, setEndDate] = [Link]<Dayjs | null>(
myContext?.driverRideStatsFilter?.endDate
? dayjs(myContext?.driverRideStatsFilter?.endDate)
: dayjs(new Date())
);
// const [startDate, setStartDate] = [Link]<string | undefined>(
// new Date().toString()
// );
// const [endDate, setEndDate] = [Link]<string | undefined>();

const EnhancedTableConfig = {
headers: [
{
id: "date",
numeric: false,
disablePadding: true,
label: "Date",
disableSort: false,
},
{
id: "count",
numeric: false,
disablePadding: true,
label: "Count",
disableSort: true,
},
],
};

[Link](() => {
fetchData();
}, []);

const fetchData = async () => {

try {
setFilteredDriverList([]);
setFilteredRideList([]);
 [Link]({
isLoading: true,
message: "Getting Driver and Ride count list...",
});
[Link]({ startDate, endDate });
const payload = {
startDate: startDate
? convertToStartDateString([Link]())
: convertToStartDateString(new Date().toString()),
endDate: endDate
? convertToEndDateString([Link]())
: convertToEndDateString(new Date().toString()),
};

const response = await

[Link](GET_DRIVER_AND_RIDE_LIST, {
params: payload,
});
//[Link]("368", response);
if (response?.status === 200) {
const { data } = response?.data;

getFilterDriverList(data?.driverCount);
getFilterRideList(data?.rideCount);
}
} catch (error) {
ShowSnackbarFailure(error, myContext);
} finally {
[Link]({
isLoading: false,
});
}
};

function capitalize(str: string) {

return [Link](0).toUpperCase() + [Link](1);
}

async function getFilterDriverList(obj: any) {

let updatedFilteredList: any[] = [Link]((driver: any) => {
let date = driver?.date ? driver?.date : "";
let count = driver?.count ? driver?.count : "";
return {
id: driver?.id,
date: formatDateTime(date),
count: count,
};
});
//[Link]("412 updatedFilteredList", updatedFilteredList);
setFilteredDriverList(updatedFilteredList);
//setCount(obj?.total);
}

async function getFilterRideList(obj: any) {

let updatedFilteredList: any[] = [Link]((ride: any) => {
let date = ride?._id?.date ? ride?._id?.date : "";
let count = ride?.count ? ride?.count : "";
return {
id: ride?.id,
date: formatDateTime(date),
count: count,
};
});
//[Link]("412 updatedFilteredList", updatedFilteredList);
 setFilteredRideList(updatedFilteredList);
//setCount(obj?.total);
}

const styles = {
extendedTab: {
textTransform: "none",
fontSize: 16,
fontWeight: 400,
},
};

const refreshPage = async (pagination: any) => {

if ([Link]) {
setRowsPerPage([Link]);
}
if (pagination?.page?.toString().length > 0) {
setPage([Link]);
}
};

return (
<Grid style={{ padding: 5 }}>
<Paper component={Card} variant="outlined">
<Grid
container
sx={{
paddingLeft: 2,
paddingTop: 2,
backgroundColor: "white",
}}
>
<Grid container spacing={2} alignItems="center">
<Grid item>
<MobilityDatePicker
label="Start Date"
value={startDate}
onChange={(
value: Dayjs | null,
context:
PickerChangeHandlerContext<DateValidationError>
) => {
setStartDate(value);
}}
/>
</Grid>
<Grid item>
<MobilityDatePicker
label="End Date"
value={endDate}
onChange={(
value: Dayjs | null,
context:
PickerChangeHandlerContext<DateValidationError>
) => {
setEndDate(value);
}}
/>
</Grid>
<Grid item>
<MobilityButton
label="Search"
onClick={(
event:
[Link]<HTMLButtonElement, MouseEvent>
) => {
if
(startDate?.isAfter(endDate, "dates")) {
ShowSnackbarFailure(
"Start Date
should be same or before End Date",
myContext
);
} else {
fetchData();
}
}}
/>
</Grid>
</Grid>
</Grid>

<Grid
sx={{
display: "flex",
justifyContent: "space-between",
paddingLeft: 2,
paddingTop: 2,
}}
>
<Grid container>
<Grid item>
<Tabs
value={tabValue}
onChange={(e, newValue) => {

//tableRef?.current?.handleChangePage(null, 0);
setTabValue(newValue);
//setSearchText("");
}}
>
<Tab label="Drivers"
value="drivers" sx={[Link]} />
<Tab label="Rides" value="rides"
sx={[Link]} />
</Tabs>
</Grid>
</Grid>

<Grid
container
sx={{
alignItems: "end",
justifyContent: "end",
marginRight: 1,
}}
>
{/* {tabValue && tabValue !== "all" && (
<Grid marginRight={1}>
<MobilityButton
fullWidth={false}
label={"Download"}
onClick={(event:
[Link]<HTMLButtonElement>) => {
fetchData("", true);
}}
/>
</Grid>
 )} */}

{/* <MobilityTextField
label="Search Driver by Phone..."
type="text"
name="search"
value={searchText}
maxLength={50}
fullWidth={false}
onChange={(event:
[Link]<HTMLInputElement>) => {
handleInputChange(event);
}}
/> */}
</Grid>
</Grid>

{filteredDriverList &&
[Link] > 0 &&
tabValue === "drivers" && (
<Grid padding={2}>
<EnhancedTable
ref={tableRef}

headers={[Link]}
tableData={filteredDriverList}
//count={count}
//refreshPage={refreshPage}
/>
</Grid>
)}

{filteredRideList &&
[Link] > 0 &&
tabValue === "rides" && (
<Grid padding={2}>
<EnhancedTable
ref={tableRef}

headers={[Link]}
tableData={filteredRideList}
//count={count}
//refreshPage={refreshPage}
/>
</Grid>
)}

{(filteredDriverList?.length === 0 ||
filteredRideList?.length === 0) && (
<MobilityEmptyMsg message={"No Data Found"} />
)}
</Paper>
</Grid>
);
};

export default DriverRideCount;

48] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
Drivers\[Link]
import React, { FC, ReactElement } from "react";
import {
Card,
Grid,
 Paper,
Tabs,
Tab,
Divider,
Typography,
Tooltip,
IconButton,
} from "@mui/material";
import { useSearchParams, useNavigate } from "react-router-dom";
import { isEmpty } from "lodash";
import MobilityTextField from "../../CommonComponents/MobilityTextField";
import MobilitySelect from "../../CommonComponents/MobilitySelect";
import { BugReport, CancelOutlined, TaskAlt } from "@mui/icons-material";
import { AppContext } from "../../Context/AppContext";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../../CommonComponents/MobilitySnackBar";
import MobilityButton from "../../CommonComponents/MobilityButton";
import { MobilityChip } from "../../CommonComponents/MobilityChip";
import MobilityAccordion from "../../CommonComponents/MobilityAccordion";
import { MobilityImgHeading } from
"../../CommonComponents/MobilityHeadingValue";
import { MobilityAppBar } from "../../CommonComponents/MobilityAppBar";
import EnhancedTable from "../../CommonComponents/EnhancedTable";
import { MobilityButtonIconView } from
"../../CommonComponents/MobilityButtonIcon";
import { MobilityListItemEdit } from "../../CommonComponents/MobilityListItem";
import MobilityActionMenu from "../../CommonComponents/MobilityActionMenu";
import { formatDate, formatDateTime } from "../../../CustomUtils/DateTimeUtils";
import MobilityEmptyMsg from "../../CommonComponents/MobilityEmptyMsg";
import { apiHandler } from "../../ApiServices/ApiHandler";
import {
CHANGE_DOCUMENT_STATUS,
CHANGE_VEHICLE_STATUS_BY_ADMIN,
EDIT_DRIVER,
GET_DRIVER_DETAILS_BY_ID,
GET_DRIVER_DOCUMENT,
UPDATE_DRIVER_DOCUMENTS_BY_ID,
} from "../../ApiServices/ApiConstants";
import _ from "lodash";

const RaiseIssuePath: string = "/raiseIssue";

const vehicleDetailsPath: string = "/vehicleDetails";

const DriverDetails: FC = (): ReactElement => {

const navigate = useNavigate();
const [queryParameters] = useSearchParams();
const id = [Link]("id");
let isEdit = [Link]("isEdit");
let selectedTab = [Link]("selectedTab");
let driverTab = [Link]("driverTab");
let myContext = [Link](AppContext);
const [tabValue, setTabValue] = [Link]<string>(selectedTab!);
const statusOptions = ["Approved", "Pending", "Rejected"]; // "InActive"

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

const [driverDetails, setDriverDetails] = [Link]<any>({});

 const [vehicleDetails, setVehicleDetails] = [Link]<any>([]);
const [subscriptionDetails, setSubscriptionDetails] =
[Link]<any>([]);
const [rideDetails, setRideDetails] = [Link]<any>([]);
const [expiryDate, setExpiryDate] = [Link]<any>([]);
const [docNumber, setDocNumber] = [Link]<any>([]);

async function apiCall() {

try {
[Link]({
isLoading: true,
message: "Getting Driver Details...",
});

const response: Iresponse = await [Link](

`${GET_DRIVER_DETAILS_BY_ID}?id=${id}`
);

if (!isEmpty(response)) {
const { data } = [Link];

setDriverDetails({
firstName: [Link]?.firstName,
lastName: [Link]?.lastName,
phone: [Link]?.phone,
city: [Link]?.city,
status: [Link]?.status,
email: [Link]?.email,
driverId: [Link]?._id ||
[Link]?.id,
entityId: [Link]?.entityId,
documents: [Link]?.documents,
homeAddress:
[Link]?.homeAddress?.address,
rejectReason: [Link]?.rejectReason,
});

setVehicleDetails([Link]);
setSubscriptionDetails([Link]);
setRideDetails([Link]);
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}

const validateData = () => {

try {
if (!driverDetails?.firstName ||
driverDetails?.firstName?.length == 0) {
ShowSnackbarFailure("Please Enter First Name",
myContext);
return false;
}
if (!driverDetails?.lastName ||
driverDetails?.lastName?.length == 0) {
ShowSnackbarFailure("Please Enter Last Name",
myContext);
 return false;
}
if (!driverDetails?.city || driverDetails?.city?.length == 0)
{
ShowSnackbarFailure("Please Enter City", myContext);
return false;
}

return true;
} catch (error) {}
};

async function handleSubmit(event: [Link]) {

[Link]();

if (validateData()) {
try {
[Link]({
isLoading: true,
message: "Updated Driver Details...",
});
const requestBody = {
driverId: [Link],
firstName: [Link],
lastName: [Link],
city: [Link],
email: [Link],
status: [Link],
...(driverDetails?.status === "Rejected" && {
rejectReason: driverDetails?.rejectReason,
}),
};

const res: Iresponse = await

[Link](EDIT_DRIVER, requestBody);
if (isEmpty(res)) {
apiCall();
}
if ([Link] === 200) {
ShowSnackbarSuccess("Driver details Updated
Successfully", myContext);
navigate("/driver", { state: driverTab });
} else {
ShowSnackbarFailure(res, myContext);
[Link]("error.", res);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}
}

async function saveDocumentData(

event: any,
{ docId, docType, docNumber, expiryDate, dob }: any
) {
[Link]("205", docNumber, expiryDate, dob);
if (validateData()) {
try {
[Link]({
 isLoading: true,
message: "Updating Driver Details...",
});
const requestBody = {
driverId: [Link],
docType,
docId,
docNumber,
expiryDate,
dob,
};

[Link]("215", requestBody);
const res: Iresponse = await [Link](
UPDATE_DRIVER_DOCUMENTS_BY_ID,
requestBody
);
if (isEmpty(res)) {
apiCall();
}
if ([Link] === 200) {
ShowSnackbarSuccess("Driver details Updated
Successfully", myContext);
apiCall();
} else {
ShowSnackbarFailure(res, myContext);
[Link]("error.", res);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}
}

[Link](() => {
apiCall();
}, []);

const cardStyle = {
//padding: "26px",
margin: "auto",
width: "100%",
boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
marginTop: "10px",
//margin: "26px",
};

const styles = {
extendedTab: {
//minWidth: "500px",
textTransform: "none",
fontSize: 16,
fontWeight: 400,
},
};

function detailsData() {
return (
<>
<Grid container spacing={4} sx={{ padding: 3 }}>
 <Grid item xs={12} sm={6}>
<MobilityTextField
//disabled={isEdit ? true : false}
disabled={true}
label="First Name"
name="firstName"
type="text"
value={driverDetails?.firstName || ""}
onChange={(event: any) => {
setDriverDetails({
...driverDetails,
firstName:
[Link],
});
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<MobilityTextField
//disabled={isEdit ? true : false}
disabled={true}
label="Last Name"
name="lastName"
type="text"
value={driverDetails?.lastName || ""}
onChange={(event: any) => {
setDriverDetails({
...driverDetails,
lastName:
[Link],
});
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<MobilityTextField
label="Phone"
name="phone"
type="text"
disabled={true}
value={driverDetails?.phone || ""}
onChange={(e) =>
setDriverDetails({
...driverDetails,
phone: [Link],
})
}
/>
</Grid>
<Grid item xs={12} sm={6}>
<MobilityTextField
//disabled={isEdit ? true : false}
disabled={true}
label="City"
name="city"
type="text"
value={driverDetails?.city || ""}
onChange={(e) =>

setDriverDetails({ ...driverDetails, city: [Link] })

}
/>
</Grid>
<Grid item xs={12} sm={6}>
 <MobilityTextField
// disabled={isEdit ? true : false}
disabled={true}
label="Email"
name="email"
type="text"
value={driverDetails?.email || ""}
onChange={(e) =>
setDriverDetails({
...driverDetails,
email: [Link],
})
}
/>
</Grid>
<Grid item xs={12} sm={6}>
<MobilitySelect
disabled={isEdit ? true : false}
label="Status"
value={driverDetails?.status || ""}
statusOptions={statusOptions}
onChange={(e) => {
setDriverDetails({
...driverDetails,
status: [Link] as
string,
});
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<MobilityTextField
label="Home Address"
name="homeAddress"
type="text"
multiline={true}
disabled={true}
value={driverDetails?.homeAddress ||
""}
onChange={(e) => {}}
/>
</Grid>
{driverDetails?.status === "Rejected" && (
<Grid item xs={12} sm={6}>
<MobilityTextField
label="Rejected Reason"
name="Rejected Reason"
type="text"
multiline={true}

value={driverDetails?.rejectReason || ""}
onChange={(e) => {
setDriverDetails({
...driverDetails,
rejectReason:
[Link] as string,
});
}}
/>
</Grid>
)}

{!isEdit && (
<Grid container sx={{ marginTop: 2,
justifyContent: "flex-end" }}>
<MobilityButton label="Submit"
onClick={handleSubmit} />
</Grid>
)}
</Grid>
</>
);
}

function documentsData() {
return (
<Grid>
<Grid container item xs={12} md={12} spacing={1}
padding={2}>
{driverDetails?.documents?.length === 0 && (
<MobilityEmptyMsg message="No found
Found" />
)}

{driverDetails?.documents?.map((item: any, index:

any) => {
if (!item?.docType || !item?.status) {
return <></>;
}

if (
[Link]?.toString() === "DL" ||
[Link]?.toString() === "DLBack"
||
[Link]?.toString() === "QRCODE"
||
[Link]?.toString() ===
"ProfilePhoto"
) {
return (
<Grid item xs={12} md={6}
key={index}>
<MobilityAccordion
key={index}
isExpanded={false}

title={getTitle(item)}

summary={getSummary(item, index)}
details={

<MobilityImgHeading

heading={item}

//imgUrl={[Link]}

imgUrl={`${GET_DRIVER_DOCUMENT}?driverId=${[Link]}&docId=$
{[Link]}`}

docType={item?.docType}

onDataSave={saveDocumentData}
/>
}
/>
</Grid>
);
 }
})}
</Grid>
</Grid>
);
}

const EnhancedTableConfig = {
vehicleHeaders: [
{
id: "VehicleName",
numeric: false,
disablePadding: true,
label: "Vehicle Name",
disableSort: true,
},
{
id: "registrationNumber",
numeric: true,
disablePadding: true,
label: "Registration Number",
disableSort: true,
},
{
id: "model",
numeric: false,
disablePadding: true,
label: "Model",
disableSort: true,
},
{
id: "status",
numeric: false,
disablePadding: true,
label: "Status",
disableSort: true,
},

{
id: "docNew",
numeric: false,
disablePadding: true,
label: "Documents",
disableSort: true,
},
{
id: "actionNew",
numeric: false,
disablePadding: true,
label: "Actions",
disableSort: true,
},
],
subscriptionHeaders: [
{
id: "subscriptionStartDate",
numeric: false,
disablePadding: true,
label: "Start Date",
disableSort: true,
},
{
id: "subscriptionEndDate",
numeric: false,
 disablePadding: true,
label: "End Date",
disableSort: true,
},
{
id: "cost",
numeric: false,
disablePadding: true,
label: "Cost",
disableSort: true,
},
{
id: "status",
numeric: false,
disablePadding: true,
label: "Status",
disableSort: true,
},
{
id: "subscriptionDays",
numeric: false,
disablePadding: true,
label: "Days",
disableSort: true,
},
{
id: "subscriptionName",
numeric: false,
disablePadding: true,
label: "Type",
disableSort: true,
},
{
id: "paymentTime",
numeric: false,
disablePadding: true,
label: "Payment Date",
disableSort: false,
},
],
rideHeaders: [
{
id: "customerName",
numeric: false,
disablePadding: true,
label: "Customer Name",
disableSort: true,
},
{
id: "pickUpAddress",
numeric: false,
disablePadding: true,
label: "Pickup Address",
disableSort: true,
},
{
id: "dropAddress",
numeric: false,
disablePadding: true,
label: "Drop Address",
disableSort: true,
},
{
id: "fare",
 numeric: false,
disablePadding: true,
label: "Fare",
disableSort: true,
},
{
id: "pickUpDateTime",
numeric: false,
disablePadding: true,
label: "Pickup Date Time",
disableSort: true,
},
{
id: "dropUpDateTime",
numeric: true,
disablePadding: true,
label: "Dropoff Date Time",
disableSort: true,
},
{
id: "status",
numeric: false,
disablePadding: true,
label: "Status",
disableSort: true,
},
{
id: "actionNew",
numeric: false,
disablePadding: true,
label: "Actions",
disableSort: true,
},
],
};

const changeVehicleStatus = async (

status: string,
vehicleid: string,
rejectedReason?: string
) => {
try {
[Link]({
isLoading: true,
message: "Updating Vehicle status...",
});

const payload = { id: vehicleid, status };

if (status === "InActive" && rejectedReason) {
[Link](payload, { rejectedReason:
rejectedReason });
}

const response = await [Link](

CHANGE_VEHICLE_STATUS_BY_ADMIN,
payload
);

if ([Link] === 200) {

ShowSnackbarSuccess(response, myContext);
await apiCall();
} else {
ShowSnackbarFailure(response, myContext);
await apiCall();
 }
} catch (err: any) {
ShowSnackbarFailure(err, myContext);

if (err?.message) {
}
} finally {
[Link]({
isLoading: false,
});
}
};

const editAction = (vehicle: any) => {

navigate(`${vehicleDetailsPath}?id=$
{[Link]}&selectedTab=documents`);
};

let filteredVehicleList = [Link]((vehicle: any, index: any) =>

{
return {
key: index,
id: vehicle?._id || vehicle?.id,
VehicleName: vehicle?.name,
registrationNumber: vehicle?.registrationNumber,
status: <MobilityChip label={vehicle?.status} />,
statusFilter: vehicle?.status,
docNew: (() => {
let path =
isEdit !== null && isEdit == "false"
? `${vehicleDetailsPath}?id=$
{vehicle?.id}&isEdit=false&selectedTab=documents`
: `${vehicleDetailsPath}?id=$
{vehicle?.id}&selectedTab=documents`;

const docIcon = (
<MobilityButtonIconView
tooltipTitle="View Documents"
onClick={(e) => {
[Link]();
navigate(path);
}}
/>
);

if (vehicle?.documents?.length > 0) {
return docIcon;
}

return null;
})(),
actionNew: (() => {
const commonIconContainerStyle = {
display: "flex",
justifyContent: "center",
};

const menuList: any = [

<MobilityListItemEdit
label="Edit Vehicle"
onClick={(e) => {
[Link]();
editAction(vehicle);
}}
 />,
];

return (
<div style={commonIconContainerStyle}>
<MobilityActionMenu items={menuList} />
</div>
);
})(),

model: vehicle?.model,
};
});

let filteredSubscriptionHistoryList = [Link]((item: any)

=> {
return {
subscriptionStartDate: formatDateTime(
item?.subscriptionDetails?.subscriptionStartDate
),
subscriptionEndDate: formatDateTime(
item?.subscriptionDetails?.subscriptionEndDate
),
status: <MobilityChip
label={item?.subscriptionDetails?.status} />,
subscriptionDays: item?.subscriptionDetails?.subscriptionDays,
subscriptionName: item?.subscriptionDetails?.subscriptionName,
cost: item?.subscriptionDetails?.cost,
paymentTime: formatDate(item?.payment[0]?.paymentTime),
};
});

const filteredRideHistoryList = [Link]((item: any) => {

return {
transactionId: item?.transactionId,
customerName: item?.customerName,
pickUpAddress: item?.pickUpAddress,
dropAddress: item?.dropAddress,
orderId: item?.orderId,
pickUpDateTime: item?.pickUpDateTime
? formatDateTime(item?.pickUpDateTime, true)
: "",
dropUpDateTime: item?.dropUpDateTime
? formatDateTime(item?.dropUpDateTime, true)
: "",
status: <MobilityChip label={item?.status} />,
fare: item?.fare,
actionNew: (() => {
const issueAction = () => {
navigate(
`${RaiseIssuePath}?transactionId=$
{item?.transactionId}&driverId=${id}`
);
};

const commonIconContainerStyle = {
display: "flex",
justifyContent: "center",
};

const commonIcons = (
<div style={commonIconContainerStyle}>
<Tooltip title="Raise an Issue">
<IconButton
 color={"primary"}
aria-label="Raise an Issue"
onClick={(e) => {
[Link]();
issueAction();
}}
>
<BugReport />
</IconButton>
</Tooltip>
</div>
);

return commonIcons;
})(),
};
});

function vehiclesData() {
return (
<Grid container item xs={12} md={12} spacing={1} padding={2}>
<Grid item xs={12} md={12}>
{[Link] > 0 ? (
<EnhancedTable

headers={[Link]}
tableData={filteredVehicleList}
/>
) : (
<MobilityEmptyMsg message="No data found" />
)}
</Grid>
</Grid>
);
}

function subscriptionData() {
return (
<Grid container item xs={12} md={12} spacing={1} padding={2}>
<Grid item xs={12} md={12}>
{[Link] > 0 ? (
<EnhancedTable

headers={[Link]}

tableData={filteredSubscriptionHistoryList}
/>
) : (
<MobilityEmptyMsg message="No data found" />
)}
</Grid>
</Grid>
);
}

function rideData() {
return (
<Grid container item xs={12} md={12} spacing={1} padding={2}>
<Grid item xs={12} md={12}>
{[Link] > 0 ? (
<EnhancedTable

headers={[Link]}
tableData={filteredRideHistoryList}
 />
) : (
<MobilityEmptyMsg message="No data found" />
)}
</Grid>
</Grid>
);
}

const handleApprove = async (

status: any,
docId: any,
parentId: any,
rejectedReason: any
) => {
try {
[Link]({
isLoading: true,
message: "Updated document status...",
});
const payload = {
status,
docId,
parentId,
};
if (status === "Rejected" && rejectedReason) {
[Link](payload, { rejectedReason:
rejectedReason });
}

const response: Iresponse = await [Link](

CHANGE_DOCUMENT_STATUS,
payload
);

if ([Link] === 200) {

ShowSnackbarSuccess("Status changed succesfully",
myContext);

const updatedDocuments =
response?.data?.data?.updatedEntity?.documents;
[Link]((selectedDoc: any) => ({
...selectedDoc,
parentId: parentId,
}));

setDriverDetails({ ...driverDetails, documents:

updatedDocuments });
await apiCall();
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
};

function getTitle(item: any) {

let docTitle = [Link];
switch ([Link]()) {
 case "profilephoto":
docTitle = "Profile Photo";
break;
case "dl":
docTitle = "Driving License Front";
break;
case "dlback":
docTitle = "Driving License Back";
break;
case "aadharfront":
docTitle = "Aadhar Front Side";
break;
case "aadharback":
docTitle = "Aadhar Back Side";
break;
case "pc":
docTitle = "Police Clearance";
break;
case "ypb":
docTitle = "Yellow Permit Badge";
break;
case "qrcode":
docTitle = "QR Code";
break;
}

let statusColor = "info";

switch ([Link]?.toString().toLowerCase()) {
case "approved":
statusColor = "green";
break;
case "rejected":
statusColor = "red";
break;
case "pending":
statusColor = "orange";
break;
case "expired":
statusColor = "blue";
break;
}

return (
<Grid>
<Grid>
<Typography color="primary" sx={{ fontSize: 16 }}>
{docTitle}
</Typography>
<Typography color={statusColor} sx={{ fontSize: 12
}}>
{[Link]}
</Typography>
</Grid>
</Grid>
);
}

function getSummary(item: any, index: any) {

let summary: any = [];
var dialogProp: any;
var isExpired: boolean = false;
if (item?.expiryDate) {
const currentDate = new Date().setHours(0, 0, 0, 0);
const expDate = new Date(item?.expiryDate).setHours(0, 0, 0,
0);
isExpired = expDate < currentDate;
dialogProp = {
showButton: false,
open: true,
title: "Alert",
message: "This document is expired. You can not approve
this document.",
};
}
switch ([Link]()) {
case "pending":
case "expired":
if (!isExpired) {
dialogProp = {
open: true,
title: "Confirmation",
message: "Are you sure you want to
proceed?",
onYesClick: (event: any, param: string |
undefined) => {
handleApprove(
"Approved",
item?.docId,
[Link],
param
);
},
};
}
[Link](
<>
<MobilityChip
key={index}
label="Approve Document"
disabled={isEdit ? true : false}
clickable={isEdit ? false : true}
icon={<TaskAlt />}
onClick={(event) => {
[Link]({
...dialogProp,
});
}}
/>
<Divider sx={{ width: 10 }} />
<MobilityChip
key={index}
label="Reject Document"
disabled={isEdit ? true : false}
clickable={isEdit ? false : true}
icon={<CancelOutlined />}
onClick={(event) => {
[Link]({
action: "Rejected",
open: true,
title: "Confirmation",
message: "Are you sure you
want to proceed?",
onYesClick: (event: any,
param: string | undefined) => {
handleApprove(
"Rejected",
item?.docId,
 [Link],
param
);
},
});
}}
/>
<Divider sx={{ width: 10 }} />
</>
);
break;
case "rejected":
if (!isExpired) {
dialogProp = {
open: true,
title: "Confirmation",
message: "Are you sure you want to
proceed?",
onYesClick: (event: any, param: string |
undefined) => {
handleApprove(
"Approved",
item?.docId,
[Link],
param
);
},
};
}
[Link](
<MobilityChip
key={index}
label="Approve Document"
disabled={isEdit ? true : false}
clickable={isEdit ? false : true}
icon={<TaskAlt />}
onClick={(event) => {
[Link]({
...dialogProp,
});
}}
/>
);
break;
case "approved":
[Link](
<MobilityChip
key={index}
label="Reject Document"
disabled={isEdit ? true : false}
clickable={isEdit ? false : true}
icon={<CancelOutlined />}
onClick={(event) => {
[Link]({
action: "Rejected",
open: true,
title: "Confirmation",
message: "Are you sure you want
to proceed?",
onYesClick: (event: any, param:
string | undefined) => {
handleApprove(
"Rejected",
[Link],
 [Link],
param
);
},
});
}}
/>
);
break;
}
return summary;
}

function createDescription() {
return (
<Grid paddingLeft={1}>
<MobilityChip
label={
"Name : " + driverDetails?.firstName + " " +
driverDetails?.lastName
}
size={"medium"}
/>
<MobilityChip
label={"Mobile : " + driverDetails?.phone}
size={"medium"}
/>
</Grid>
);
}

function getEditableFields(item: any) {

let summary: any = [];

setDocNumber(item?.docNumber);
[Link](
<>
<Grid container xs={12} sx={{ margin: 0, padding: 0 }}>
<Grid textAlign={"left"} xs={3} sx={{ margin: 0,
padding: 0 }}>
<MobilityTextField
label="Document Number"
name="Document Number"
type="alphaNumeric"
size={"small"}
value={docNumber || ""}
onChange={(e) => {
setDocNumber([Link] as
string);
// setDriverDetails({
// ...driverDetails,
// rejectReason:
[Link] as string,
// });
}}
/>
</Grid>

<Grid textAlign={"left"} xs={3} sx={{ marginLeft:

1, padding: 0 }}>
<MobilityTextField
label="Doc. Expiry Date"
name="Doc. Expiry Date"
 type="alphaNumeric"
size={"small"}
value={formatDateTime(expiryDate) ||
""}
onChange={(e) => {
setExpiryDate([Link] as
string);
}}
/>
</Grid>

<Grid textAlign={"left"} xs={3} sx={{ marginLeft:

1, padding: 0 }}>
<MobilityTextField
label="Date of Birth"
name="Date of Birth"
type="text"
size={"small"}

value={formatDateTime(item?.dateOfBirth) || ""}
onChange={(e) => {}}
/>
</Grid>
</Grid>
</>
);

return summary;
}
return (
<Grid style={{ padding: 5 }}>
<Grid item>
<MobilityAppBar
title="Driver Details"
description={createDescription()}
onBackClick={() => {
navigate("/driver", { state: driverTab });
}}
/>
</Grid>

<Paper component={Card} variant="outlined" sx={cardStyle}>

<Grid sx={{ display: "flex", justifyContent: "space-
between" }}>
<Grid container>
<Grid item>
<Tabs
value={tabValue}
onChange={(e, newValue) => {
setTabValue(newValue);
}}
>
<Tab
label="Documents"
value="documents"
sx={[Link]}
/>
<Tab
label="Vehicles"
value="vehicles"
sx={[Link]}
/>
<Tab
label="Subscription
History"
value="subscriptionHistory"
sx={[Link]}
/>
<Tab
label="Ride History"
value="rideHistory"
sx={[Link]}
/>
</Tabs>
</Grid>
</Grid>

<Grid
container
sx={{
alignItems: "end",
justifyContent: "end",
marginRight: 1,
marginLeft: 1,
}}
>
{tabValue === "documents" && (
<Grid container spacing={2}
padding={2}>
<Grid item xs={12} sm={4}>
<MobilitySelect
size={"small"}
disabled={isEdit ?
true : false}
label="Status"

value={driverDetails?.status || ""}

statusOptions={statusOptions}
onChange={(e) => {

setDriverDetails({
...driver
Details,
status:
[Link] as string,
});
}}
/>
</Grid>
{driverDetails?.status ===
"Rejected" && (
<Grid item xs={12} sm={6}>
<MobilityTextField
label="Rejected
Reason"
name="Rejected
Reason"
type="text"
size={"small"}

value={driverDetails?.rejectReason || ""}
onChange={(e)
=> {

setDriverDetails({
...
driverDetails,
 rejectReason: [Link] as string,
});
}}
/>
</Grid>
)}
{!isEdit && (
<Grid item xs={12} sm={2}>
<MobilityButton
label="Submit" onClick={handleSubmit} />
</Grid>
)}
</Grid>
)}
</Grid>
</Grid>
{tabValue === "details" && detailsData()}
{tabValue === "documents" && documentsData()}
{tabValue === "vehicles" && vehiclesData()}
{tabValue === "subscriptionHistory" &&
subscriptionData()}
{tabValue === "rideHistory" && rideData()}
</Paper>
</Grid>
);
};

export default DriverDetails;

49] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
Drivers\[Link]
import { Card, Grid, Paper, Tab, Tabs } from "@mui/material";
import * as React from "react";
import { apiHandler } from "../../ApiServices/ApiHandler";
import _ from "lodash";
import { useLocation, useNavigate } from "react-router-dom";
import EnhancedTable from "../../CommonComponents/EnhancedTable";
import { MobilityButtonIconView } from
"../../CommonComponents/MobilityButtonIcon";
import MobilityTextField from "../../CommonComponents/MobilityTextField";
import { AppContext } from "../../Context/AppContext";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../../CommonComponents/MobilitySnackBar";
import { MobilityChip } from "../../CommonComponents/MobilityChip";
import LongMenu from "../../CommonComponents/MobilityActionMenu";
import {
MobilityListItemDelete,
MobilityListItemDocuments,
MobilityListItemEdit,
MobilityListItemVehicle,
MobilityListItemView,
} from "../../CommonComponents/MobilityListItem";
import MobilityEmptyMsg from "../../CommonComponents/MobilityEmptyMsg";
import {
CHANGE_DRIVER_STATUS_BY_ADMIN,
DELETE_DRIVER_ACCOUNT,
GET_DRIVERS_LIST,
} from "../../ApiServices/ApiConstants";
import {
formatDateTime,
currentDatAndTime,
} from "../../../CustomUtils/DateTimeUtils";
import MobilityButton from "../../CommonComponents/MobilityButton";
import * as XLSX from "xlsx";

const driverDetailsPath: string = "/driverDetails";

const Drivers: [Link] = (): [Link] => {

const navigate = useNavigate();
const location = useLocation();
let myContext = [Link](AppContext);
const [searchText, setSearchText] = [Link]<string>("");
const tableRef = [Link]<any>();
const [rowsPerPage, setRowsPerPage] = [Link]<number>(25);
const [count, setCount] = [Link]<number>(0);
const [page, setPage] = [Link]<number>(0);
const [tabValue, setTabValue] = [Link]<string>(
location?.state ? location?.state : "all"
);
const [filteredDriverList, setFilteredDriverList] =
[Link]<any[]>();

const changeDriverStatus = async (

status: string,
driverId: string,
rejectedReason?: string
) => {
try {
[Link]({
isLoading: true,
message: "Updating Driver Status...",
});

const payload = { id: driverId, status, query: searchText };

if (status === "Rejected" && rejectedReason) {
[Link](payload, { rejectedReason:
rejectedReason });
}

const response = await [Link](

CHANGE_DRIVER_STATUS_BY_ADMIN,
payload
);

if ([Link] === 200) {

ShowSnackbarSuccess(response, myContext);
await fetchData();
} else {
ShowSnackbarFailure(response, myContext);
await fetchData();
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
};

const DeleteDriver = async (driverId: string) => {

try {
[Link]({
isLoading: true,
message: "Deleting Driver...",
 });

const response = await [Link](

`${DELETE_DRIVER_ACCOUNT}?driverId=${driverId}`
);

if ([Link] === 200) {

ShowSnackbarSuccess(response, myContext);
await fetchData();
} else {
ShowSnackbarFailure(response, myContext);
await fetchData();
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
};

const approveDeleteAction = (driver: any) => {

[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you want to proceed?",
onYesClick: (event: any, param: string | undefined) => {
DeleteDriver([Link]);
},
});
};

const editAction = (driver: any) => {

navigate(
`${driverDetailsPath}?id=$
{[Link]}&selectedTab=documents&driverTab=${tabValue}`
);
};

const EnhancedTableConfig = {
headers: [
{
id: "driverName",
numeric: false,
disablePadding: true,
label: "Driver Name",
disableSort: false,
},
{
id: "phone",
numeric: false,
disablePadding: true,
label: "Phone",
disableSort: false,
},
{
id: "rideStatus",
numeric: false,
disablePadding: true,
label: "Ride Status",
disableSort: true,
},
{
 id: "currentLocationDateTime",
numeric: false,
disablePadding: true,
label: "Location DateTime",
disableSort: false,
},
// {
// id: "city",
// numeric: false,
// disablePadding: true,
// label: "City",
// disableSort: true,
// },
{
id: "status",
numeric: false,
disablePadding: true,
label: "Status",
disableSort: true,
},

{
id: "modifiedDateTime",
numeric: false,
disablePadding: true,
label: "Modified DateTime",
disableSort: false,
},
{
id: "docNew",
numeric: true,
disablePadding: true,
label: "Documents",
disableSort: true,
},
// {
// id: "history",
// numeric: false,
// disablePadding: true,
// label: "Ride History",
// disableSort: true,
// },
// {
// id: "subscriptionHistory",
// numeric: false,
// disablePadding: true,
// label: "Sub History",
// disableSort: true,
// },
{
id: "actionNew",
numeric: true,
disablePadding: true,
label: "Actions",
disableSort: true,
},
],
};

[Link](() => {
if (page || rowsPerPage || tabValue) {
fetchData("");
}
}, [page, rowsPerPage, tabValue]);
 async function prepareApprovedDataDownload(data: any) {
let requests: any = [];
[Link]((record: any) => {
let row = {};
row = {
Name:
record?.firstName && record?.lastName
? [Link](" ",
[Link])
: "",
Phone: [Link],
};

if ([Link]) {
[Link]((doc: any) => {
if ([Link] === "DL") {
row = {
...row,
"Driving Licence Status": [Link],
};
} else if ([Link] === "QRCODE") {
row = {
...row,
"QR Code Status": [Link],
};
} else if ([Link] === "ProfilePhoto") {
row = {
...row,
"Profile Photo Status": [Link],
};
}
});
}
row = {
...row,
Status: [Link],
"Modified Date": formatDateTime([Link],
true, true),
// "Last Location Date Time": formatDateTime(
// record?.currentLocation?.time,
// true,
// true
// ),
};
[Link](row);
});
return requests;
}

async function preparePendingDataDownload(data: any) {

let requests: any = [];
data?.forEach((record: any) => {
let row = {};
row = {
Name:
record?.firstName && record?.lastName
? [Link](" ",
[Link])
: "",
Phone: [Link],
};

if ([Link]) {
 [Link]((doc: any) => {
if ([Link] === "DL") {
row = {
...row,
"Driving Licence Status": [Link],
};
} else if ([Link] === "QRCODE") {
row = {
...row,
"QR Code Status": [Link],
};
} else if ([Link] === "ProfilePhoto") {
row = {
...row,
"Profile Photo Status": [Link],
};
}
});
}
row = {
...row,
Status: [Link],
"Modified Date": formatDateTime([Link],
true, true),
};
[Link](row);
});
return requests;
}

async function prepareRejectedDataDownload(data: any) {

let requests: any = [];
data?.forEach((record: any) => {
let row = {};

row = {
Name:
record?.firstName && record?.lastName
? [Link](" ",
[Link])
: "",
Phone: [Link],
};
if ([Link]) {
[Link]((doc: any) => {
if ([Link] === "DL") {
row = {
...row,
"Driving Licence Status": [Link],
};
} else if ([Link] === "QRCODE") {
row = {
...row,
"QR Code Status": [Link],
};
} else if ([Link] === "ProfilePhoto") {
row = {
...row,
"Profile Photo Status": [Link],
};
}
});
}
row = {
 ...row,
Status: [Link],
"Rejected Reason": [Link],
"Modified Date": formatDateTime([Link],
true, true),
};
[Link](row);
});
return requests;
}

const fetchData = async (inputValue?: any, isDownload = false) => {

try {
[Link]({
isLoading: true,
message: "Getting Driver list...",
});
const payload = {
rowsPerPage: rowsPerPage,
pageNo: page,
search: inputValue,
isDownload,
...(tabValue !== "all" && { status: tabValue }),
};

const response = await [Link](GET_DRIVERS_LIST,

payload);
const { data } = response?.data;
if (isDownload) {
let requestes: any = [];
if (tabValue === "Approved") {
requestes = await
prepareApprovedDataDownload(data?.driversList);
} else if (tabValue === "Rejected") {
requestes = await
prepareRejectedDataDownload(data?.driversList);
} else if (tabValue === "Pending") {
requestes = await
preparePendingDataDownload(data?.driversList);
}

if ([Link]) {
const dataCsv =
[Link].json_to_sheet(requestes);
const wb = [Link].book_new();
[Link].book_append_sheet(wb, dataCsv, "Sheet
1");
const time = currentDatAndTime();
[Link](wb, `Drivers_${tabValue}_$
{time}.xlsx`);
}
} else {
getFilterDriverList({ data: data?.driversList, total:
data?.total });
}
} catch (error) {
} finally {
[Link]({
isLoading: false,
});
}
};

function capitalize(str: string) {

 return [Link](0).toUpperCase() + [Link](1);
}

async function getFilterDriverList(obj: any) {

let updatedFilteredList: any[] = [Link]((driver: any) => {
let firstName = driver?.firstName
? driver?.firstName?.split(" ").map(capitalize).join("
")
: "";
let lastName = driver?.lastName
? driver?.lastName?.split(" ").map(capitalize).join(" ")
: "";
return {
id: driver?.id,
driverName: `${firstName} ${lastName}`,
firstName: firstName,
lastName: lastName,
phone: driver?.phone,
city: _.capitalize(driver?.city),
status: <MobilityChip label={driver?.status || ""} />,
statusFilter: driver?.status || "",
rideStatus: <MobilityChip label={driver?.rideStatus ||
"NA"} />,
currentLocationDateTime: driver?.currentLocation
? new
Date(driver?.currentLocation?.time).getTime()
: "NA",

// <MobilityChip
//
label={formatDateTime(driver?.currentLocation?.time, true) || "NA"}
// type={"broadcast"}
// />
modifiedDateTime: new Date(
driver?.documentsUpdateDate
? driver?.documentsUpdateDate
: driver?.modifiedDate
).getTime(),
// formatDateTime(
// driver?.documentsUpdateDate
// ? driver?.documentsUpdateDate
// : driver?.modifiedDate,
// true,
// true
// ),
docNew: (() => {
const docIcon = (
<MobilityButtonIconView
tooltipTitle="View Documents"
onClick={(e) => {
[Link]();
navigate(
`${driverDetailsPath}?id=$
{[Link]}&selectedTab=documents&driverTab=${tabValue}`
);
}}
/>
);

if (driver?.documents?.length > 0) {
return docIcon;
}
return null;
})(),
 actionNew: (() => {
const menuList: any = [];

if (driver?.status !== "Deleted") {

[Link](
<MobilityListItemEdit
key={"Edit"}
label="Edit Driver"
onClick={(e) => {
[Link]();
editAction(driver);
}}
/>
);
}

if (driver?.status === "Delete-Initiated") {

[Link](
<MobilityListItemDelete
key={"Delete"}
label="Approve Delete Driver"
onClick={(e) => {
[Link]();

approveDeleteAction(driver);
}}
/>
);
}

[Link](
<MobilityListItemDocuments
key={"ViewD"}
label="View Documents"
onClick={(e) => {
[Link]();
navigate(
`${driverDetailsPath}?id=$
{[Link]}&selectedTab=documents&driverTab=${tabValue}`
);
}}
/>,

<MobilityListItemVehicle
key={"ViewV"}
label="View Vehicles"
onClick={(e) => {
[Link]();
navigate(
`${driverDetailsPath}?id=$
{[Link]}&selectedTab=vehicles&driverTab=${tabValue}`
);
}}
/>,

<MobilityListItemView
key={"Ride"}
label="Ride History"
onClick={(e) => {
[Link]();
navigate(
`${driverDetailsPath}?id=$
{[Link]}&selectedTab=rideHistory&driverTab=${tabValue}`
 );
}}
/>,

<MobilityListItemView
key={"Subscription"}
label="Subscription History"
onClick={(e) => {
[Link]();
// navigate(`$
{subscriptionDetailsPath}?id=${driver?.id}`);
navigate(
`${driverDetailsPath}?id=$
{[Link]}&selectedTab=subscriptionHistory&driverTab=${tabValue}`
);
}}
/>
);

return <LongMenu items={menuList} />;

})(),
};
});
setFilteredDriverList(updatedFilteredList);
setCount(obj?.total);
}

const handleInputChange = (event: [Link]<HTMLInputElement>) =>

{
const inputValue = [Link];
setSearchText(inputValue);

if ([Link] === 10 || [Link] === 0) {

fetchData(inputValue);
}
};

const styles = {
extendedTab: {
textTransform: "none",
fontSize: 16,
fontWeight: 400,
},
};

const refreshPage = async (pagination: any) => {

if ([Link]) {
setRowsPerPage([Link]);
}
if (pagination?.page?.toString().length > 0) {
setPage([Link]);
}
};

return (
<Grid style={{ padding: 5 }}>
<Paper component={Card} variant="outlined">
<Grid sx={{ display: "flex", justifyContent: "space-
between" }}>
<Grid container>
<Grid item>
<Tabs
value={tabValue}
onChange={(e, newValue) => {
 tableRef?.current?.handleChangePage(null, 0);
setTabValue(newValue);
setSearchText("");
}}
>
<Tab label="All Drivers"
value="all" sx={[Link]} />
<Tab
label="Approved"
value="Approved"
sx={[Link]}
/>
<Tab
label="Rejected"
value="Rejected"
sx={[Link]}
/>
<Tab label="Pending"
value="Pending" sx={[Link]} />
</Tabs>
</Grid>
</Grid>

<Grid
container
sx={{
alignItems: "end",
justifyContent: "end",
marginRight: 1,
}}
>
{tabValue && tabValue !== "all" && (
<Grid marginRight={1}>
<MobilityButton
fullWidth={false}
label={"Download"}
onClick={(event:
[Link]<HTMLButtonElement>) => {
fetchData("", true);
}}
/>
</Grid>
)}

<MobilityTextField
label="Search Driver by Phone..."
type="text"
name="search"
value={searchText}
maxLength={50}
fullWidth={false}
onChange={(event:
[Link]<HTMLInputElement>) => {
handleInputChange(event);
}}
/>
</Grid>
</Grid>

<Grid padding={2}>
{filteredDriverList && [Link] >
0 ? (
<EnhancedTable
 ref={tableRef}
headers={[Link]}
tableData={filteredDriverList}
count={count}
refreshPage={refreshPage}
/>
) : (
<MobilityEmptyMsg message={"No Data
Found"} />
)}
</Grid>
</Paper>
</Grid>
);
};

export default Drivers;

50] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
Drivers\[Link]
import { makeStyles } from "@mui/styles";

export const useStyles = makeStyles({});

51] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
Drivers\[Link]
import React, { FC, ReactElement, useState } from "react";
import { Card, Grid, Paper } from "@mui/material";
import { useLocation } from "react-router-dom";
import { apiHandler } from "../../ApiServices/ApiHandler";
import { useSearchParams, useNavigate } from "react-router-dom";
import { useUserDispatch } from "../../../CustomUtils/usercontext";
import { isEmpty } from "lodash";
import MobilityTextField from "../../CommonComponents/MobilityTextField";
import MobilitySelect from "../../CommonComponents/MobilitySelect";
import { AppContext } from "../../Context/AppContext";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../../CommonComponents/MobilitySnackBar";
import MobilityButton from "../../CommonComponents/MobilityButton";
import { MobilityButtonIconBack } from
"../../CommonComponents/MobilityButtonIcon";
import { GET_ISSUE_CATEGORIES, ISSUE } from "../../ApiServices/ApiConstants";

const RaiseIssue: FC = (): ReactElement => {

const location = useLocation();
const dispatch: any = useUserDispatch();
const navigate = useNavigate();

const [queryParameters] = useSearchParams();

const id = [Link]("id");
const entityId = [Link]("entityId");

const transactionId = [Link]("transactionId");

const driverId = [Link]("driverId");

const statusOptions = ["Approved", "Pending", "Rejected"];

interface Iresponse {
headers?: any;
data?: any;
 status?: number;
message?: string;
}

const [issueCategories, setIssueCategories] = useState<any[]>([]);

const [selectedIssueCategory, setSelectedIssueCategory] =
useState<any>("");
const [selectedSubCategory, setSelectedSubCategory] = useState<any>("");
const issueType = [{ key: "Issue", value: "Issue" }];
const [selectedIssueType, setselectedIssueType] = useState<any>("");
let myContext = [Link](AppContext);

const issueShortDescriptionOptions = [
{ key: "Driver related complaint", value: "Driver related complaint"
},
{ key: "Payment related complaint", value: "Payment related
complaint" },
{ key: "Other", value: "Other" },
];
const [selectedIssueShortDescription, setSelectedIssueShortDescription] =
useState<any>("");
const [issuetextbox, setissueTextBox] = useState<any>("");
const [driverComplaintOptions, setDriverComplaintOptions] =
useState<any[]>(
[]
);

const [driverDetails, setDriverDetails] = [Link]<any>({});

async function IssueCategoriesapiCall() {
try {
[Link]({
isLoading: true,
message: "Issue...",
});

const response: Iresponse = await

[Link](GET_ISSUE_CATEGORIES);

if (!isEmpty(response)) {
const { data } = [Link];

const formattedData =
[Link](response?.data?.data).map(
(category) => ({
key: category,
value:
[Link](response?.data?.data[category]).map((issue) => ({
key: issue,
value: response?.data?.data[category]
[issue],
})),
})
);

setIssueCategories(formattedData);
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
 });
}
}

const validateData = () => {

try {
if (!selectedSubCategory || [Link] == 0)
{
ShowSnackbarFailure("Please Select Issue Category",
myContext);
return false;
}

if (!selectedSubCategory || [Link] == 0) {
ShowSnackbarFailure("Please Select Issue Sub-Category",
myContext);
return false;
}

if (!selectedIssueType || [Link] == 0) {
ShowSnackbarFailure("Please Select Issue Type",
myContext);
return false;
}
if (
!selectedIssueShortDescription ||
[Link] == 0
) {
ShowSnackbarFailure("Please Select Issue", myContext);
return false;
}
if (!issuetextbox || [Link] == 0) {
ShowSnackbarFailure("Please Enter Issue Description",
myContext);
return false;
}
return true;
} catch (error) {

}
};

const onPressSubmit = async () => {

if (validateData()) {
try {
[Link]({
isLoading: true,
message: "Raised Issue...",
});
let params = {
//driverId: driverId,
transactionId: transactionId,
description: {
shortDesc: selectedIssueShortDescription,
longDesc: issuetextbox,
},
city: "Pune",
state: "Maharashtra",
issueCategory: selectedIssueCategory,
subCategory: selectedSubCategory,
issueType: selectedIssueType,
issueStatus: "OPEN",
};
 let privateInstance = [Link]();
const response: Iresponse = await [Link](
`/issue`,
params
);
//const response: Iresponse = await
[Link](ISSUE, params);

if (!isEmpty(response)) {

if (response?.status === 200) {

ShowSnackbarSuccess("Issue Raised
Successfully", myContext);
navigate(-1);
} else {
ShowSnackbarFailure(response, myContext);
}
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (error) {
ShowSnackbarFailure(error, myContext);

[Link]("153:", error);
} finally {
[Link]({
isLoading: false,
});
}
}
};

async function handleSubmit(event: [Link]) {

[Link]();
try {
[Link]({
isLoading: true,
message: "Updated Driver Details...",
});
const requestBody = {
...driverDetails,
};
let privateInstance = [Link]();
const res: Iresponse = await [Link](
`/api/edit-driver`,
requestBody,
{ params: { entityId } }
);
if (isEmpty(res)) {
IssueCategoriesapiCall();
}
if ([Link] === 200) {
ShowSnackbarSuccess("Driver details updated
successfully", myContext);
navigate(-1);
} else {
ShowSnackbarFailure(res, myContext);
[Link]("error.", res);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
 } finally {
[Link]({
isLoading: false,
});
}
}

[Link](() => {
IssueCategoriesapiCall();
}, []);

const cardStyle = {
padding: "26px",
margin: "auto",
width: "100%",
boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
marginTop: "10px",
};

const titleStyle = {
fontSize: "28px",
fontWeight: "bold",
marginBottom: "25px",
};

const formControlStyle = {
width: "100%",
marginBottom: "16px",
};

const buttonStyle = {
marginTop: "25px",
};

return (
<Grid style={{ padding: 5 }}>
<Grid item>
<Card sx={{ display: "flex", justifyContent: "space-
between" }}>
<Grid container>
<Grid item sx={{ padding: 1 }}>
<MobilityButtonIconBack onClick={() =>
navigate(-1)} />
</Grid>
<Grid item sx={{ alignItems: "center",
display: "flex" }}>
Raise an Issue
</Grid>
</Grid>
<Grid
container
sx={{ alignItems: "center", justifyContent:
"end" }}
></Grid>
</Card>
</Grid>
<Paper component={Card} variant="outlined" sx={cardStyle}>
<Grid container spacing={4}>
<Grid item xs={12} sm={6}>
<MobilitySelect
label="Issue Category"
value={selectedIssueCategory}

statusOptions={[Link]((category) => [Link])}

 onChange={(e) => {

setSelectedIssueCategory([Link] as string);
}}
/>
</Grid>

<Grid item xs={12} sm={6}>

<MobilitySelect
label="Issue SUB-- Category"
value={selectedSubCategory}
statusOptions={
selectedIssueCategory
? issueCategories
.find(

(category) => [Link] === selectedIssueCategory

)
?.[Link](

(subCategory: { value: any; key: any }) =>

[Link]
) || []
: []
}
onChange={(e) => {

setSelectedSubCategory([Link] as string);
}}
/>
</Grid>

<Grid item xs={12} sm={6}>

<MobilitySelect
label="Issue Type"
value={selectedIssueType}
statusOptions={[Link]((option)
=> [Link])}
onChange={(event: any) =>

setselectedIssueType([Link])
}
/>
</Grid>
<Grid item xs={12} sm={6}>
<MobilitySelect
label="Issue"
value={selectedIssueShortDescription}

statusOptions={[Link](
(option) => [Link]
)}
onChange={(event: any) => {

setSelectedIssueShortDescription([Link] as string);
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<MobilityTextField
label="Textbox "
name="textbox"
type="text"
 value={issuetextbox}
onChange={(event: any) => {

setissueTextBox([Link]);
}}
/>
</Grid>
</Grid>

{/* <Button
type="submit"
variant="contained"
color="primary"
onClick={onPressSubmit}
sx={buttonStyle}
>
Submit
</Button> */}
<Grid container sx={{ marginTop: 2, justifyContent:
"flex-end" }}>
<MobilityButton label="Submit"
onClick={onPressSubmit} />
</Grid>
</Paper>
</Grid>
);
};

export default RaiseIssue;

52] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
Drivers\[Link]
import { Grid, IconButton, Tooltip } from "@mui/material";
import * as React from "react";
import _, { isEmpty } from "lodash";
import { useNavigate } from "react-router-dom";
import { BugReport } from "@mui/icons-material";
import { formatDateTime } from "../../../CustomUtils/DateTimeUtils";
import EnhancedTable from "../../CommonComponents/EnhancedTable";
import { AppContext } from "../../Context/AppContext";
import { ShowSnackbarFailure } from "../../CommonComponents/MobilitySnackBar";
import MobilityEmptyMsg from "../../CommonComponents/MobilityEmptyMsg";
import { MobilityChip } from "../../CommonComponents/MobilityChip";
import { MobilityAppBar } from "../../CommonComponents/MobilityAppBar";
import { apiHandler } from "../../ApiServices/ApiHandler";

const RaiseIssuePath: string = "/raiseIssue";

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

interface rideHistoryState {
transactionId?: string;
customerName?: string;
pickUpAddress?: any;
dropAddress?: any;
orderId?: string;
pickUpDateTime?: Date;
dropUpDateTime?: Date;
status?: string;
 fare?: number;
}

const RideHistory: [Link] = (): [Link] => {

const driverId = new URLSearchParams([Link]).get("id");

const navigate = useNavigate();

const [RideHistory, setRideHistory] =
[Link]<rideHistoryState[]>([]);
const driverDetailsPath: string = "/driverDetails";
let myContext = [Link](AppContext);

async function getRideHistory(page: number, count: number, driverId:

string) {
try {
[Link]({
isLoading: true,
message: "Getting Ride History...",
});
const params = { page, count: 100, driverId };

let privateInstance = [Link]();

const response: Iresponse = await [Link](
"/api/get-drivers-ride-history",
{ params }
);

if (!isEmpty(response)) {
const { data } = response?.data;

const _data = data?.rideHistoryList?.map((Rideshistory:

any) => {
return {
transactionId: Rideshistory?.transactionId,
customerName: Rideshistory?.customerName,
pickUpAddress: Rideshistory?.pickUpAddress,
dropAddress: Rideshistory?.dropAddress,
orderId: Rideshistory?.orderId,
pickUpDateTime:
formatDateTime(Rideshistory?.pickUpDateTime, true),
dropUpDateTime:
formatDateTime(Rideshistory?.dropUpDateTime, true),
status: <MobilityChip
label={Rideshistory?.status} />,
fare: Rideshistory?.fare,
actionNew: (() => {
const issueAction = () => {
navigate(
`${RaiseIssuePath}?
transactionId=${Rideshistory?.transactionId}&driverId=${driverId}`
);
};

const commonIconContainerStyle = {
display: "flex",
justifyContent: "center",
};

const commonIcons = (
<div
style={commonIconContainerStyle}>
<Tooltip title="Raise an
Issue">
<IconButton
 color={"primary"}
aria-
label="Raise an Issue"
onClick={(e) =>
{

[Link]();

issueAction();
}}
>
<BugReport />
</IconButton>
</Tooltip>
</div>
);

return commonIcons;
})(),
};
});
setRideHistory(_data);
} else {
ShowSnackbarFailure(response, myContext);
[Link]("error.", response);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}

const EnhancedTableConfig = {
headers: [
{
id: "customerName",
numeric: false,
disablePadding: true,
label: "Customer Name",
disableSort: true,
},
{
id: "pickUpAddress",
numeric: false,
disablePadding: true,
label: "Pickup Address",
disableSort: true,
},
{
id: "dropAddress",
numeric: false,
disablePadding: true,
label: "Drop Address",
disableSort: true,
},
{
id: "fare",
numeric: false,
disablePadding: true,
label: "Fare",
 disableSort: true,
},
{
id: "pickUpDateTime",
numeric: false,
disablePadding: true,
label: "Pickup Date Time",
disableSort: true,
},
{
id: "dropUpDateTime",
numeric: true,
disablePadding: true,
label: "Dropoff Date Time",
disableSort: true,
},
{
id: "status",
numeric: false,
disablePadding: true,
label: "Status",
disableSort: true,
},
{
id: "actionNew",
numeric: false,
disablePadding: true,
label: "Actions",
disableSort: true,
},
],
};

[Link](() => {
if (driverId) {
getRideHistory(1, 10, driverId);
}
}, [driverId]);

return (
<Grid style={{ padding: 5 }}>
<Grid item>
<MobilityAppBar
title="Ride History Details"
onBackClick={() => {
navigate(-1);
}}
// menus={
// <MobilityButton
// label="Raise an Issue"
// onClick={(event:
[Link]<HTMLButtonElement>) => {
// //navigate(`${RaiseIssuePath}`);
// }}
// />
// }
/>
</Grid>

<Grid item style={{ paddingTop: 10 }}>

{/* <EnhancedTable
headers={[Link]}
tableData={RideHistory}
/> */}
 {[Link] > 0 ? (
<EnhancedTable
headers={[Link]}
tableData={RideHistory}
/>
) : (
<MobilityEmptyMsg message={"No Ride History
Found"} />
)}
</Grid>
</Grid>
);
};

export default RideHistory;

53] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
Drivers\[Link]
import { Card, Grid } from "@mui/material";
import React from "react";
import { isEmpty } from "lodash";
import moment from "moment";
import { useSearchParams, useNavigate } from "react-router-dom";
import EnhancedTable from "../../CommonComponents/EnhancedTable";
import { formatDateTime } from "../../../CustomUtils/DateTimeUtils";
import { AppContext } from "../../Context/AppContext";
import { ShowSnackbarFailure } from "../../CommonComponents/MobilitySnackBar";
import MobilityEmptyMsg from "../../CommonComponents/MobilityEmptyMsg";
import { MobilityChip } from "../../CommonComponents/MobilityChip";
import { MobilityButtonIconBack } from
"../../CommonComponents/MobilityButtonIcon";
import { apiHandler } from "../../ApiServices/ApiHandler";

const subscriptionDetailsPath: string = "subscriptionHistory";

const SubscriptionHistory = () => {
const [queryParameters] = useSearchParams();

const id = [Link]("id");
const entityId = [Link]("entityId");

const navigate = useNavigate();

let myContext = [Link](AppContext);

function formatDate(date: string) {

const parsedDate = moment(date);
return [Link]("DD-MMM-YYYY");
}
interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

interface Subresponse {
subscriptionStartDate: string;
subscriptionEndDate: string;
cost: number;
status: string;
paymentTime: string;
}

const [subscription, setSubscription] = [Link]<Subresponse[]>([]);

async function SubscriptionapiCall(page: number, rowsPerPage: number) {
 try {
[Link]({
isLoading: true,
message: "Getting Subscription History...",
});

const payload = { rowsPerPage, pageNo: page };

let privateInstance = [Link]();

const response: Iresponse = await [Link](
`/api/get-subscription-history?driverId=${id}`,
{
params: payload,
}
);

if (
!isEmpty(response) &&
[Link] &&
[Link]
) {
const data = response?.data?.data?.subscriptionHistory;

const _data = data?.map((subItem: any) => {

return {
subscriptionStartDate: formatDateTime(

subItem?.subscriptionDetails?.subscriptionStartDate
),
subscriptionEndDate: formatDateTime(

subItem?.subscriptionDetails?.subscriptionEndDate
),
cost: subItem?.subscriptionDetails?.cost,
status: (
<MobilityChip
label={subItem?.subscriptionDetails?.status} />
),
paymentTime:
formatDate(subItem?.payment[0]?.paymentTime),

path: subscriptionDetailsPath,
};
});

setSubscription(_data);
} else {
ShowSnackbarFailure(response, myContext);
[Link]("error.", response);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}
[Link](() => {
if (id) {
SubscriptionapiCall(1, 10);
}
}, []);
const basicTableConfig = {
 headers: [
{ text: "Start Date", value: "subscriptionStartDate" },
{ text: "End Date", value: "subscriptionEndDate" },
{ text: "Cost", value: "cost" },
{ text: "Status", value: "status" },
{ text: "Payment Date", value: "paymentTime" },
],
};
const EnhancedTableConfig = {
headers: [
{
id: "subscriptionStartDate",
numeric: false,
disablePadding: true,
label: "Start Date",
disableSort: true,
},
{
id: "subscriptionEndDate",
numeric: false,
disablePadding: true,
label: "End Date",
disableSort: true,
},
{
id: "cost",
numeric: false,
disablePadding: true,
label: "Cost",
disableSort: true,
},

{
id: "status",
numeric: false,
disablePadding: true,
label: "Status",
disableSort: true,
},
{
id: "paymentTime",
numeric: false,
disablePadding: true,
label: "Payment Date",
disableSort: false,
},
],
};
const cardStyle = {
padding: "26px",
margin: "auto",
width: "100%",
boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",

marginTop: "10px",
};

const titleStyle = {
fontSize: "28px",
fontWeight: "bold",
marginBottom: "25px",
};

return (
 <Grid style={{ padding: 5 }}>
<Grid item>
<Card sx={{ display: "flex", justifyContent: "space-
between" }}>
<Grid container>
<Grid item sx={{ padding: 1 }}>
<MobilityButtonIconBack onClick={() =>
navigate(-1)} />
</Grid>
<Grid item sx={{ alignItems: "center",
display: "flex" }}>
Subscription Details
</Grid>
</Grid>
</Card>
</Grid>
<Grid item style={{ paddingTop: 10 }}>
{/* <EnhancedTable
headers={[Link]}
tableData={subscription}
></EnhancedTable> */}
{[Link] > 0 ? (
<EnhancedTable
headers={[Link]}
tableData={subscription}
/>
) : (
<MobilityEmptyMsg message={"No Subscription
History Found"} />
)}
</Grid>
</Grid>
);
};

export default SubscriptionHistory;

54] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
DriversBroadCast\[Link]
import { FC, ReactElement } from "react";
import { useLocation } from "react-router-dom";
import * as React from "react";
import CardContent from "@mui/material/CardContent";
import {
Badge,
Card,
Grid,
IconButton,
Paper,
Tab,
Tabs,
Tooltip,
Typography,
colors,
} from "@mui/material";
import CardActions from "@mui/material/CardActions";
import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
import MobilityButton from "../../CommonComponents/MobilityButton";
import { MobilityCard } from "../../CommonComponents/MobilityCard";
import { AppContext } from "../../Context/AppContext";
import { apiHandler } from "../../ApiServices/ApiHandler";
import {
GET_DASHBOARD_DRIVERS_DETAILS,
GET_ONLINE_DRIVER_LOCATIONS,
 GET_SEARCH_LOCATIONS,
} from "../../ApiServices/ApiConstants";
import MapTemp from "../CurrentRides/map";
import { MobilityAppBar } from "../../CommonComponents/MobilityAppBar";
import { useNavigate, useNavigation } from "react-router-dom";
import MobilityTextField from "../../CommonComponents/MobilityTextField";
import { MobilityChip } from "../../CommonComponents/MobilityChip";
import _ from "lodash";
import MobilityBadge from "../../CommonComponents/MobilityBadge";

const BroadcastDetails: FC = (): ReactElement => {

const navigate = useNavigate();
const locations = useLocation();
//[Link]("33 logs", locations?.state);

let myContext: any = [Link](AppContext);

const [driverDetails, setDriverDetails] = [Link]<any>([]);
const [locationDetails, setLocationDetails] = [Link]<any>([]);
const [isMapVisible, setIsMapVisible] = [Link](false);
const [isVisible, setIsVisible] = [Link](false);

[Link](() => {
setTimeout(() => {
setIsMapVisible(true);
}, 1000);
}, []);

function createDescription() {
return (
<Grid marginRight={2}>
{locations?.state?.driverBroadcastedCoordinates && (
<MobilityBadge
title="Ride broadcast count"
badgeContent={_.size(

locations?.state?.driverBroadcastedCoordinates
)}
color="secondary"
icon={
<IconButton
sx={{ padding: 0 }}
onClick={() => {
let filter =
[Link];

[Link]({
...filter,

driverBroadcastedCoordinatesVisible: true,

driverBroadcastReceivedCoordinatesVisible: false,

driverAssignedCoordinatesVisible: false,

driverAcceptedCoordinatesVisible: false,
});
}}
>
<img
src={require("../../../assets/[Link]")} height="30px" />
</IconButton>
}
></MobilityBadge>
)}
 {locations?.state?.driverBroadcastReceivedCoordinates &&
(
<MobilityBadge
title="Ride broadcast received count"
badgeContent={_.size(

locations?.state?.driverBroadcastReceivedCoordinates
)}
color="warning"
icon={
<IconButton
sx={{ padding: 0 }}
onClick={() => {
let filter =
[Link];

[Link]({
...filter,

driverBroadcastedCoordinatesVisible: false,

driverBroadcastReceivedCoordinatesVisible: true,

driverAssignedCoordinatesVisible: false,

driverAcceptedCoordinatesVisible: false,
});
}}
>
<img

src={require("../../../assets/auto_black.png")}
height="30px"
/>
</IconButton>
}
></MobilityBadge>
)}
{locations?.state?.driverAcceptedByCoordinates && (
<MobilityBadge
title="Ride accepted count"

badgeContent={_.size(locations?.state?.driverAcceptedByCoordinates)}
color="info"
icon={
<IconButton
sx={{ padding: 0 }}
onClick={() => {
let filter =
[Link];

[Link]({
...filter,

driverBroadcastedCoordinatesVisible: false,

driverBroadcastReceivedCoordinatesVisible: false,

driverAssignedCoordinatesVisible: false,

driverAcceptedCoordinatesVisible: true,
});
}}
>
 <img

src={require("../../../assets/auto_blue.png")}
height="30px"
/>
</IconButton>
}
></MobilityBadge>
)}
{locations?.state?.driverAssignedCoordinates && (
<MobilityBadge
title="Ride assigned count"

badgeContent={_.size(locations?.state?.driverAssignedCoordinates)}
color="error"
icon={
<IconButton
sx={{ padding: 0 }}
onClick={() => {
let filter =
[Link];
[Link]("147 filter",
filter);

[Link]({
...filter,

driverBroadcastedCoordinatesVisible: false,

driverBroadcastReceivedCoordinatesVisible: false,

driverAssignedCoordinatesVisible: true,

driverAcceptedCoordinatesVisible: false,
});
}}
>
<img

src={require("../../../assets/auto_red.png")}
height="30px"
/>
</IconButton>
}
></MobilityBadge>
)}
</Grid>
);
}

return (
<div>
<Grid style={{ padding: 5 }}>
<Grid item marginBottom={1}>
<MobilityAppBar
title="Broadcast Details"
menus={createDescription()}
onBackClick={() => {
navigate(-1);
//navigate("/driver", { state:
driverTab });
}}
/>
</Grid>
 <Grid container item xs={12} md={12} marginTop={1}>
<Card style={{ display: "flex", flex: 1 }}>
<CardContent
style={{
display: "flex",
flex: 1,
padding: 8,
height: "75vh",
}}
>
{isMapVisible && (
<MapTemp

driverBroadcastedCoordinates={

locations?.state?.driverBroadcastedCoordinates
}

driverBroadcastReceivedCoordinates={

locations?.state?.driverBroadcastReceivedCoordinates
}
driverAssignedCoordinates={

locations?.state?.driverAssignedCoordinates
}

driverAcceptedByCoordinates={

locations?.state?.driverAcceptedByCoordinates
}
broadcastCustomerDetails={

locations?.state?.broadcastCustomerDetails
}
broadcastCustomerLocation={

locations?.state?.broadcastCustomerLocation
}
/>
)}
</CardContent>
</Card>
</Grid>
{/* </Paper> */}
</Grid>
</div>
);
};

export default BroadcastDetails;

55] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
DriversBroadCast\[Link]
import { Card, Grid, Paper } from "@mui/material";
import * as React from "react";
import _, { isEmpty } from "lodash";
import { useNavigate } from "react-router-dom";
import EnhancedTable from "../../CommonComponents/EnhancedTable";
import { formatDateTime } from "../../../CustomUtils/DateTimeUtils";
import { MobilityButtonIconView } from
"../../CommonComponents/MobilityButtonIcon";
import { MobilityChip } from "../../CommonComponents/MobilityChip";
import MobilityButton from "../../CommonComponents/MobilityButton";
import { AppContext } from "../../Context/AppContext";
import { ShowSnackbarFailure } from "../../CommonComponents/MobilitySnackBar";
import MobilityEmptyMsg from "../../CommonComponents/MobilityEmptyMsg";
import { apiHandler } from "../../ApiServices/ApiHandler";
import { GET_BROADCAST_DETAILS_BY_TRANSACTION_ID } from
"../../ApiServices/ApiConstants";
import dayjs, { Dayjs } from "dayjs";
import MobilityDateTimePicker from
"../../CommonComponents/MobilityDateTimePicker";
import moment from "moment";
import { start } from "repl";

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

const DriversBroadcast: [Link] = (): [Link] => {

const navigate = useNavigate();
let myContext = [Link](AppContext);
const tableRef = [Link]<any>();
const [allList, setAllList] = [Link]<any[]>([]);
const [filteredBroadcastedDrivers, setFilteredBroadcastedDrivers] =
[Link]<any[]>([]);
let currentTime = moment();
let fifteenMinAgo = moment(currentTime).subtract(15, "minutes");
// const [startDate, setStartDate] = [Link]<string | any>(
// [Link]()
// );
// const [endDate, setEndDate] = [Link]<string | any>(
// moment(currentTime).toString()
// );
const [startDate, setStartDate] = [Link]<Dayjs | null>(
myContext?.broadcastFilter?.startDate
? myContext?.broadcastFilter?.startDate?.isSame(
myContext?.broadcastFilter?.endDate
)
? dayjs(new Date()).subtract(15, "minutes")
: dayjs(myContext?.broadcastFilter?.startDate)
: dayjs(new Date()).subtract(15, "minutes")
);
const [endDate, setEndDate] = [Link]<Dayjs | null>(
myContext?.broadcastFilter?.endDate
? dayjs(myContext?.broadcastFilter?.endDate)
: dayjs(new Date())
);

const [rowsPerPage, setRowsPerPage] = [Link]<number>(25);

const [count, setCount] = [Link]<number>(0);
const [page, setPage] = [Link]<number>(0);

// [Link](() => {
// if (startDate?.isSame(endDate)) {
// setStartDate(startDate?.subtract(15, "minutes"));
// }
// }, [startDate]);

const prepareTableData = async (toMapData: any[]) => {

//[Link]("60 toMapData in loop", toMapData);

return [Link]((toMapRecord: any, index: any) => {

 [Link]("64 ", toMapRecord);
let customerLocation: any = toMapRecord?.customerLocation;
let broadcasted: any = [];
let currentDriverLocations: any = [];
let assigned: any = [];
let broadcastReceivedBy: any = [];
let acceptedBy: any = [];

let broadcastedLocations: any = [];

let assignedLocations: any = [];
let acceptedByLocations: any = [];
let broadcastReceivedByLocations: any = [];

let customerDetails: any = toMapRecord?.customerDetails;

[Link]((item: any) => {

//[Link]("itm", item);
switch ([Link]) {
case "broadcasted":
[Link](
[Link]((subItem: any)
=> {
//[Link]("subItem",
subItem);
[Link]({
driverId:
subItem?.driverId,
firstName:
subItem?.firstName ? subItem?.firstName : "",
lastName: subItem?.lastName
? subItem?.lastName : "",
time: formatDateTime(

subItem?.currentLocation?.time,
false,
false,
true
),
currentLocations:
subItem?.currentLocation?.coordinates
?
subItem?.currentLocation?.[Link]()
: "",
});

return (
<div>
<MobilityChip
label={`$
{subItem?.firstName} ${subItem?.lastName}, ${

subItem?.phone
}, $
{formatDateTime(

subItem?.currentLocation?.time,
false,
false,
true
)}`}
size={"small"}

type={"broadcast"}
/>
 </div>
);
})
);

break;
case "assigned":
[Link](
[Link]((subItem: any)
=> {
[Link]({
driverId: [Link],
firstName:
[Link],
lastName: [Link],
time: formatDateTime(

subItem?.currentLocation?.time,
false,
false,
true
),
currentLocations:
subItem?.currentLocation?.coordinates
?
subItem?.currentLocation?.[Link]()
: "",
});
return (
<div>
<MobilityChip
label={`$
{subItem?.firstName} ${subItem?.lastName}, ${

subItem?.phone
}, $
{formatDateTime(

subItem?.currentLocation?.time,
false,
false,
true
)}`}
size={"small"}

type={"assigned"}
/>
</div>
);
})
);
break;
case "acceptedBy":
[Link](
[Link]((subItem: any)
=> {
[Link]({
driverId: [Link],
firstName:
[Link],
lastName: [Link],
time: formatDateTime(

subItem?.currentLocation?.time,
 false,
false,
true
),
currentLocations:
subItem?.currentLocation?.coordinates
?
subItem?.currentLocation?.[Link]()
: "",
});
return (
<div>
<MobilityChip
label={`$
{subItem?.firstName} ${subItem?.lastName}, ${

subItem?.phone
}, $
{formatDateTime(

subItem?.currentLocation?.time,
false,
false,
true
)}`}
size={"small"}

type={"acceptedBy"}
/>
</div>
);
})
);
break;
case "broadcastReceivedBy":
[Link](
[Link]((subItem: any)
=> {

[Link]({
driverId: [Link],
firstName:
[Link],
lastName: [Link],
time: formatDateTime(

subItem?.currentLocation?.time,
false,
false,
true
),
currentLocations:
subItem?.currentLocation?.coordinates
?
subItem?.currentLocation?.[Link]()
: "",
});
return (
<div>
<MobilityChip
label={`$
{subItem?.firstName} ${subItem?.lastName}, ${

subItem?.phone
 }, $
{formatDateTime(

subItem?.currentLocation?.time,
false,
false,
true
)}`}
size={"small"}

type={"broadcastReceivedBy"}
/>
</div>
);
})
);
break;
default:
break;
}
});

let actionNew = [
<MobilityButtonIconView
key={index}
onClick={function (
event: [Link]<HTMLButtonElement,
MouseEvent>
): void {
navigate("/broadcast-to-drivers-details", {
state: {
driverBroadcastedCoordinates:
broadcastedLocations,

driverBroadcastReceivedCoordinates:

broadcastReceivedByLocations,
driverAssignedCoordinates:
assignedLocations,
driverAcceptedByCoordinates:
acceptedByLocations,
broadcastCustomerDetails:
toMapRecord?.customerDetails,
broadcastCustomerLocation:
toMapRecord?.customerLocation,
},
});
}}
></MobilityButtonIconView>,
];

//[Link]("227", broadcasted);
//[Link]("131", acceptedByLocations);
return {
transactionId: (
<div>
<MobilityChip
label={`${customerDetails?.name}, $
{customerDetails?.phone}`}
size={"small"}
type={"transaction"}
/>
<MobilityChip
label={toMapRecord?.transactionId}
 size={"small"}
type={"transaction"}
/>
</div>
),
// toMapRecord?.transactionId +
// customerDetails?.name +
// "\n" +
// customerDetails?.phone,
customerLocations: customerLocation,
// currentDriverLocations,
broadcasted,
broadcastReceivedBy,
acceptedBy,
assigned,
broadcastedLocations,
assignedLocations,
acceptedByLocations,
broadcastReceivedByLocations,
actionNew,
};
});
};

async function getBroadcastedDrivers() {

try {
[Link]({
isLoading: true,
message: "Getting List...",
});
[Link]({ startDate, endDate });
[Link]("294", myContext?.broadcastFilter?.startDate);
[Link]("295", myContext?.broadcastFilter?.endDate);

if (startDate?.isSame(endDate)) {
}
const payload = {
rowsPerPage: rowsPerPage,
pageNo: page,
searchBy: "date",
startDate: startDate &&
moment(startDate?.toString()).toString(),
endDate: endDate &&
moment(endDate?.toString()).toString(),
// startDate: startDate
// ? moment(startDate).toString()
// : new Date().toString(),
// endDate: endDate ? moment(endDate).toString() : new
Date().toString(),
};

// [Link]("205", payload);
const response: Iresponse = await [Link](
GET_BROADCAST_DETAILS_BY_TRANSACTION_ID,
payload
);

//[Link]("291 response ", response);

if (!isEmpty(response)) {
const data = response?.data?.data;
[Link]("294 data", data);
//if (data && data?.length > 0) {
if (data && data[0]?.data?.length > 0) {
//const mappedData = await prepareTableData(data);
 //let tableData: any = [];
let toMapData = data[0]?.data;
let count = data[0]?.metadata[0]?.total;
//[Link]("301 count", count);
setCount(count);

const mappedData = await

prepareTableData(toMapData);

//setCount(data?.length);
setAllList(mappedData);
setFilteredBroadcastedDrivers(mappedData);
} else {
setAllList([]);
setFilteredBroadcastedDrivers([]);
}
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}

const EnhancedTableConfig = {
headers: [
{
id: "transactionId",
numeric: false,
disablePadding: true,
label: "Transaction ID",
disableSort: true,
enabelLongText: true,
},
{
id: "actionNew",
numeric: false,
disablePadding: true,
label: "View on Map",
disableSort: true,
enabelLongText: true,
},
{
id: "broadcasted",
numeric: false,
disablePadding: true,
label: "Broadcasted",
disableSort: true,
enabelLongText: true,
},
{
id: "broadcastReceivedBy",
numeric: false,
disablePadding: true,
label: "Broadcast Received By",
disableSort: true,
enabelLongText: true,
},
{
id: "acceptedBy",
 numeric: false,
disablePadding: true,
label: "Accepted By",
disableSort: true,
enabelLongText: true,
},
{
id: "assigned",
numeric: false,
disablePadding: true,
label: "Assigned",
disableSort: true,
enabelLongText: true,
},

// {
// id: "viewDetails",
// numeric: false,
// disablePadding: true,
// label: "View Details",
// disableSort: true,
// },
],
};
[Link](() => {
if (page || rowsPerPage) {
getBroadcastedDrivers();
}
}, [page, rowsPerPage]);

const refreshPage = async (pagination: any) => {

//[Link]("refreshPage", pagination);

if ([Link]) {
setRowsPerPage([Link]);
}
if (pagination?.page?.toString().length > 0) {
setPage([Link]);
}
};

return (
<Grid style={{ padding: 5 }}>
<Paper component={Card} variant="outlined">
<Grid
container
sx={{
padding: 1,
backgroundColor: "white",
}}
>
<Grid container spacing={2} alignItems="center">
<Grid item>
<MobilityDateTimePicker
label="Start Date Time"
value={startDate}
defaultDate={startDate}
onChange={(value: Dayjs | null,
context: any) => {
//[Link]("347",
value?.toString());
setStartDate(value);
}}
/>
 </Grid>
{/* <Grid item>
<MobilityDatePicker
label="Start Date"
//value={startDate}
onChange={(
value: Dayjs | null,
context:
PickerChangeHandlerContext<DateValidationError>
) => {

setStartDate(value?.toString());
}}
/>
</Grid> */}
<Grid item>
<MobilityDateTimePicker
label="End Date Time"
value={endDate}
defaultDate={endDate}
onChange={(value: Dayjs | null,
context: any) => {
//[Link]("401",
value?.toString());
setEndDate(value);
}}
/>
</Grid>
<Grid item>
<MobilityButton
label="Search"
onClick={(
event:
[Link]<HTMLButtonElement, MouseEvent>
) => {
if
(startDate?.isAfter(endDate)) {
ShowSnackbarFailure(
"Start DateTime
should be before End DateTime",
myContext
);
} else {

getBroadcastedDrivers();
}
}}
/>
</Grid>
</Grid>
</Grid>

{[Link] > 0 ? (
<EnhancedTable
ref={tableRef}
headers={[Link]}
tableData={filteredBroadcastedDrivers}
count={count}
refreshPage={refreshPage}
/>
) : (
<MobilityEmptyMsg message={"No Broadcast Details
Found"} />
)}
 </Paper>
</Grid>
);
};

export default DriversBroadcast;

56] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
DriversBroadCast\[Link]
import * as React from "react";
import {
Button,
Dialog,
DialogContent,
DialogTitle,
FormControl,
Grid,
IconButton,
InputLabel,
MenuItem,
Select,
TextareaAutosize,
} from "@mui/material";
import { useNavigate } from "react-router-dom";
import { apiHandler } from "../../ApiServices/ApiHandler";
import { AppContext } from "../../Context/AppContext";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../../CommonComponents/MobilitySnackBar";
import { AppBlockingSharp, Close } from "@mui/icons-material";
import MobilityButton from "../../CommonComponents/MobilityButton";
import { ISSUE_RESOLUTION } from "../../ApiServices/ApiConstants";
interface issueFormProps {
issueData: any;
open: boolean;
setOpen: any;
}
// interface ValidationErrors {
// complainantAction: string;
// shortDesc: string;
// }
//
interface issueDetails {
//complainantAction: string;
respondentAction: string;
shortDesc: string;
}
interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}
const submitButtonStyle = {
marginTop: "25px",
display: "flex",
justifyContent: "center",
};
const textAreaStyle = {
width: "100%",
};
const GrievanceForm: [Link]<issueFormProps> = ({
issueData,
 open,
setOpen,
}) => {
const navigate = useNavigate();
// const dropdownOptions = ["OPEN", "ESCALATE", "CLOSE"];
const dropdownOptions = ["PROCESSING", "RESOLVED"];
const [selectedRespondent, setSelectedRespondent] =
[Link]<any>("");
const actionTypes = ["ResolveIssue", "IGM"];
const [issueDetails, setIssueDetails] = [Link]<issueDetails>({
//complainantAction: "",
respondentAction: "",
shortDesc: "",
});
// const [selectedRespondent, setSelectedRespondent] =
[Link]<any>("");
const [isLoading, setIsLoading] = [Link]<boolean>(false);
const [actionType, setActionType] = [Link]<any>(null);
const [complainantAction, setComplainantAction] =
[Link]<any>(null);
// const [validationErrors, setValidationErrors] =
// [Link]<ValidationErrors>({
// complainantAction: "",
// shortDesc: "",
// });
let myContext = [Link](AppContext);

async function handleSubmit(event: [Link]) {

[Link]();
try {
[Link]({
isLoading: true,
message: "Saving Issue...",
});
let isValid = true;
if (actionType === "ResolveIssue" && complainantAction ===
"ESCALATE") {
isValid = false;
}
if (isValid) {
setIsLoading(true);

const requestBody = {
...issueData,
issueResolutionKey: "pushToGrievance",
resolutionType: "pushToGrievance",
groRemarks: [Link],
respondentAction: selectedRespondent,
};

// const res: Iresponse = await [Link](

// `/api/issue-resolution`,
// requestBody
// );

const res: Iresponse = await [Link](

ISSUE_RESOLUTION,
requestBody
);

// if (isEmpty(res)) {
// // apiCall();
// }
 if ([Link] === 200) {

//navigate(-1);
ShowSnackbarSuccess("Issue pushed to GR",
myContext);
setIssueDetails({
//complainantAction: "",
respondentAction: "",
shortDesc: "",
});
setOpen(false);
} else {
ShowSnackbarFailure(res, myContext);
}
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);

} finally {
[Link]({
isLoading: false,
});
}
}
const handleClose = () => {
setOpen(false);
};
return (
<Dialog
open={open}
onClose={function handleClose() {
setOpen(false);
}}
PaperProps={{
style: {
minWidth: "25vw",
// width: "40%",
// height: "65vh",
// maxWidth: "none",
},
}}
>
<DialogTitle
sx={{ backgroundColor: "#eaeaea" }}
// style={{
// backgroundColor: "#e2e2e2",
// textAlign: "center",
// marginBottom: "10px",
// }}
>
Take Action
</DialogTitle>
<IconButton
aria-label="close"
onClick={handleClose}
sx={{
position: "absolute",
right: 8,
top: 16,
}}
>
<Close />
</IconButton>
 <DialogContent>
{/* <form onSubmit={handleSubmit}> */}
<Grid container spacing={4}>
{/* <Grid item xs={12}>
<FormControl fullWidth
variant="outlined">
<InputLabel id="select-
label">Action type</InputLabel>
<Select
labelId="select-
label"
id="select2"
variant="outlined"
fullWidth
value={actionType}
onChange={(e) =>
setActionType([Link])}
label="Action type"
>

{[Link]((option) => (
<MenuItem
key={option} value={option}>
{option}
</MenuItem>
))}
</Select>
</FormControl>
</Grid> */}

{/* <Grid item xs={12}>

<FormControl fullWidth
variant="outlined">
<InputLabel id="select-
label">Complainant Action</InputLabel>
<Select
labelId="select-
label"
id="select"
variant="outlined"
fullWidth

value={[Link]}
onChange={(e) => {

setComplainantAction([Link]);

setIssueDetails({
...issueD
etails,

complainantAction: [Link],
});
}}
label="Complainant
Action"
>

{[Link]((option) => (
<MenuItem
key={option} value={option}>
{option}
</MenuItem>
))}
 </Select>
</FormControl>
</Grid> */}

<Grid item xs={12}>

<FormControl fullWidth variant="outlined">
<InputLabel id="select-
label">Respondent Action</InputLabel>
<Select
labelId="select-label"
id="select"
variant="outlined"
fullWidth
value={selectedRespondent}
onChange={(e) => {

setSelectedRespondent([Link]);
setIssueDetails({
...issueDetails,
respondentAction:
[Link],
});
}}
label="Complainant Action"
>
{[Link]((option) =>
(
<MenuItem key={option}
value={option}>
{option}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
</Grid>

<Grid container spacing={4}>

<Grid
item
xs={12}
sx={{
marginTop: 2,
}}
>
<TextareaAutosize
aria-label="minimum height"
minRows={3}
placeholder="Enter comment here"
style={textAreaStyle}
value={[Link]}
onChange={(e) =>
setIssueDetails({
...issueDetails,
shortDesc: [Link],
})
}
/>
{/* <div style={{ color: "red" }}>
{[Link]}
</div> */}
</Grid>
</Grid>
 <Grid container sx={{ marginTop: 1, justifyContent:
"center" }}>
<MobilityButton
label="Submit"
disabled={![Link]}
onClick={handleSubmit}
/>
</Grid>
{/* <Grid item lg={12} sx={submitButtonStyle}>
<Button
type="submit"
variant="contained"
color="primary"
disabled={![Link]}
>
Submit
</Button>
</Grid> */}
{/* </form> */}
</DialogContent>
</Dialog>
);
};

export default GrievanceForm;

57] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
DriverSearchMapView\[Link]
import { FC, ReactElement } from "react";
import * as React from "react";
import CardContent from "@mui/material/CardContent";
import {
Avatar,
Badge,
Card,
Grid,
Paper,
Tab,
Tabs,
Typography,
colors,
} from "@mui/material";
import CardActions from "@mui/material/CardActions";
import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
import MobilityButton from "../../CommonComponents/MobilityButton";
import { MobilityCard } from "../../CommonComponents/MobilityCard";
import { AppContext } from "../../Context/AppContext";
import { apiHandler } from "../../ApiServices/ApiHandler";
import {
GET_DASHBOARD_DRIVERS_DETAILS,
GET_ONLINE_DRIVER_LOCATIONS,
GET_SEARCH_LOCATIONS,
} from "../../ApiServices/ApiConstants";
import MapTemp from "../CurrentRides/map";
import _ from "lodash";
import auto from "../../../assets/[Link]";
import { Mail } from "@mui/icons-material";
import VehicleDetails from "../Vehicle/vehicleDetails";
import MobilityBadge from "../../CommonComponents/MobilityBadge";
import { ShowSnackbarFailure } from "../../CommonComponents/MobilitySnackBar";
import { formatDateTime } from "../../../CustomUtils/DateTimeUtils";
import MobilityTextField from "../../CommonComponents/MobilityTextField";

const data = [
 { name: "Group A", value: 400 },
{ name: "Group B", value: 300 },
{ name: "Group C", value: 300 },
{ name: "Group D", value: 200 },
];

const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];

const RADIAN = [Link] / 180;

// const renderCustomizedLabel = (
// props: any
// //{
// // cx: any,
// // cy: any,
// // midAngle,
// // innerRadius,
// // outerRadius,
// // percent,
// // index,
// //}
// ) => {
// const radius =
// props?.innerRadius + (props?.outerRadius - props?.innerRadius) *
0.5;
// const x = props?.cx + radius * [Link](-props?.midAngle * RADIAN);
// const y = props?.cy + radius * [Link](-props?.midAngle * RADIAN);

// return (
// <text
// x={x}
// y={y}
// fill="white"
// textAnchor={x > props?.cx ? "start" : "end"}
// dominantBaseline="central"
// >
// {`${(props?.percent * 100).toFixed(0)}%`}
// </text>
// );
// };

// const Dashboard: FC = (): ReactElement => {

// return (
// <Grid>
// <h1>Dashbia new</h1>
// <Appd />
// </Grid>
// );

const DriverSearchMapView: FC = (): ReactElement => {

let myContext: any = [Link](AppContext);
const [searchByPhone, setSearchhByPhone] = [Link]<any>("");
const [driverDetails, setDriverDetails] = [Link]<any>(0);
const [locationDetails, setLocationDetails] = [Link]<any>(0);
const [uniqueDriverDetails, setUniqueDriverDetails] =
[Link]<any>([]);
const [uniqueLocationDetails, setUniqueLocationDetails] =
[Link]<any>(
[]
);
const [isMapVisible, setIsMapVisible] = [Link](false);

[Link](() => {
fetchData();
}, []);
 function fetchData() {
fetchDriverData();
fetchSearchData();
setTimeout(() => {
setIsMapVisible(true);
}, 1000);
}

const fetchDriverData = async () => {

try {
[Link]({
isLoading: true,
message: "Getting Driver Locations...",
});
const payload = { rowsPerPage: 0, pageNo: 1 };
const response = await
[Link](GET_ONLINE_DRIVER_LOCATIONS);
//[Link]("111", response);
if (response?.status === 200 && response?.data) {
const { data } = response?.data;
setDriverDetails(_.size(data));
let ss: any = [];
[Link]((item: any) => {
if (
// item !== null &&
// item?.toString() !== "0,0" &&
// item?.toString() !== ""
item?.currentLocation?.coordinates !== null
&&

item?.currentLocation?.coordinates?.toString() !== "0,0" &&

item?.currentLocation?.coordinates?.toString() !== ""

//!includesXY(ss, item)
) {
// let temp = new
Date(item?.currentLocation?.time).setHours(
// 0,
// 0,
// 0,
// 0
// );
// let today = new Date().setHours(0, 0, 0,
0);
// if (temp === today)
[Link](item);
}
});
setUniqueDriverDetails(ss);
//setDriverDetails(_.size(ss));
} else {
setDriverDetails(0);
}
} catch (error: any) {
ShowSnackbarFailure(error, myContext);
} finally {
[Link]({
isLoading: false,
});
}
};

function includesXY(arr: any, latlng: any) {

 return [Link]((e: any) => e === latlng);
}

const fetchSearchData = async () => {

try {
[Link]({
isLoading: true,
message: "Getting Search Locations...",
});
const payload = { rowsPerPage: 0, pageNo: 1 };
const response = await [Link](GET_SEARCH_LOCATIONS);
if (response?.status === 200 && response?.data) {
const { data } = response?.data;

//[Link]("144", _.size(data));
setLocationDetails(_.size(data));

let ss: any = [];

[Link]((item: any) => {
if (
//!includesXY(ss, item) &&
item !== null &&
item?.toString() !== "0,0" &&
item?.toString() !== ""
) {
[Link](item);
}
});
setUniqueLocationDetails(ss);
} else {
setLocationDetails(0);
}
} catch (error) {
} finally {
[Link]({
isLoading: false,
});
}
};

return (
<div>
<Grid style={{ padding: 5 }}>
<Paper component={Card} variant="outlined"
sx={{ padding: 1 }}>
<Grid
item
sx={{
display: "flex",
justifyContent: "space-between",
}}
>
<Grid container>
<Typography
fontSize={20}
color={"black"}
fontWeight={600}
sx={{ marginLeft: 1, marginTop: 1
}}
>
Online Drivers, Searches
Dashboard
</Typography>
</Grid>
 <Grid
container
sx={{
alignItems: "end",
justifyContent: "end",
}}
>
<Grid marginRight={1} marginTop={1}>
<MobilityBadge
title="Online Drivers"

badgeContent={driverDetails}
color="warning"
icon={
<img

src={require("../../../assets/[Link]")}
height="30px"
/>
}
></MobilityBadge>

<MobilityBadge
title="Searches in Last 1
hour"

badgeContent={locationDetails}
color="success"
icon={
<img

src={require("../../../assets/location_man_red.png")}
height="30px"
/>
}
></MobilityBadge>
<MobilityTextField
label="Search Driver by
Phone..."
type="text"
name="search"
value={searchByPhone}
maxLength={10}
fullWidth={false}
onChange={(event:
[Link]<HTMLInputElement>) => {

setSearchhByPhone(event?.target?.value);
}}
/>
</Grid>
<Grid marginRight={1} marginTop={1}>
<MobilityButton
fullWidth={false}
label={"Refresh Data"}
onClick={(event:
[Link]<HTMLButtonElement>) => {

setIsMapVisible(false);
fetchData();
}}
/>
</Grid>
 </Grid>
</Grid>

{/* <Grid container>

<MobilityCard
title={"Passenger Search Count (15
mins)"}
description={[Link] ?
[Link] : 0}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
></MobilityCard>
<MobilityCard
title={"Driver's Count"}
description={[Link] ?
[Link] : 0}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
></MobilityCard>
</Grid> */}

<Grid container item xs={12} md={12}

marginTop={1}>
<Card style={{ display: "flex", flex: 1 }}>
<CardContent
style={{
display: "flex",
flex: 1,
padding: 8,
height: "75vh",
}}
>
{isMapVisible && (
<MapTemp

search={searchByPhone}

driverCoordinates={uniqueDriverDetails}

searchCoordinates={uniqueLocationDetails}
/>
)}
</CardContent>
</Card>
</Grid>

{/* <Grid container></Grid>

<Typography
fontSize={20}
color={"black"}
fontWeight={600}
sx={{ paddingInline: 1, marginTop: 5 }}
>
Today's Rides Data
</Typography>

<Typography
fontSize={20}
 color={"black"}
fontWeight={600}
sx={{ paddingInline: 1, marginTop: 5 }}
>
Today's Ride Search Data
</Typography>
<Grid container></Grid> */}
</Paper>
</Grid>
</div>
);
};

export default DriverSearchMapView;

const renderCustomizedLabel = ({
cx,
cy,
midAngle,
innerRadius,
outerRadius,
percent,
index,
}: any) => {
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
const x = cx + radius * [Link](-midAngle * RADIAN);
const y = cy + radius * [Link](-midAngle * RADIAN);

return (
<text
x={x}
y={y}
fill="white"
textAnchor={x > cx ? "start" : "end"}
dominantBaseline="central"
>
{`${(percent * 100).toFixed(0)}%`}
</text>
);
};
export function Appd() {
return (
<PieChart width={800} height={800}>
<Pie
data={data}
cx={200}
cy={200}
labelLine={false}
label={renderCustomizedLabel}
outerRadius={180}
fill="#8884d8"
dataKey="value"
onClick={() => {}}
enableBackground={1}
>
{[Link]((entry, index) => (
<Cell
key={`cell-${index}`}
fill={COLORS[index % [Link]]}
onClick={() => {}}
/>
))}
</Pie>
</PieChart>
 );
}

58] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
Grievances\[Link]
import React, { FC, ReactElement, useState } from "react";
import {
Card,
Grid,
Typography,
CardContent,
Box,
Divider,
} from "@mui/material";
import PersonIcon from "@mui/icons-material/Person";
import AccessTimeIcon from "@mui/icons-material/AccessTime";
import TimerIcon from "@mui/icons-material/Timer";
import { useSearchParams, useNavigate } from "react-router-dom";
import { isEmpty } from "lodash";
import Carousel from "react-material-ui-carousel";
import IconButton, { IconButtonProps } from "@mui/material/IconButton";
import { styled } from "@mui/material/styles";
import moment from "moment";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import MobilityButton from "../../CommonComponents/MobilityButton";
import ActionCard from "../Issue/ActionCard";
import GrievanceForm from "./issue-form";
import { AppContext } from "../../Context/AppContext";
import { ShowSnackbarFailure } from "../../CommonComponents/MobilitySnackBar";
import { apiHandler } from "../../ApiServices/ApiHandler";
import { GET_ISSUE_DETAILS } from "../../ApiServices/ApiConstants";
import env from "../../../config/env";
const BASE_URL: string = env.API_BASE_URL;
interface ExpandMoreProps extends IconButtonProps {
expand: boolean;
}

const ExpandMore = styled((props: ExpandMoreProps) => {

const { expand, ...other } = props;
return <IconButton {...other} />;
})(({ theme, expand }) => ({
transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
marginLeft: "auto",
transition: [Link]("transform", {
duration: [Link],
}),
}));

const GrievanceDetails: FC = (): ReactElement => {

const [queryParameters] = useSearchParams();
const [expanded, setExpanded] = [Link](false);
const [rexpanded, setRExpanded] = [Link](false);
const [open, setOpen] = [Link](false);

const id = [Link]("id");
const navigate = useNavigate();
let myContext = [Link](AppContext);

const openDocumentDialog = () => {

setOpen(true);
};
interface Iresponse {
headers?: any;
 data?: any;
status?: number;
message?: string;
}
const styles: { [key: string]: [Link] } = {
card: {
width: "100%",
// padding: 10,
boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.2)",
borderRadius: 5,
overflow: "scroll",
},
subtitle: {
fontSize: 14,
},
gridKey: {
display: "flex",
flexDirection: "row",
},
media: {
display: "inline-block",
marginRight: 10,
height: 200,
},
mediaContainer: {
width: "100%",
overflowX: "auto",
whiteSpace: "nowrap",
},
title: {
textAlign: "start",
fontSize: "20px",
fontWeight: "bold",
},
};

const tableHeaders: any = {

respondentActions: [
{ text: "Action", value: "action" },
{ text: "Short Description", value: "shortDesc" },
{ text: "Organization", value: "organization" },
{ text: "Name", value: "name" },
],
complainantActions: [
{ text: "Action", value: "action" },
// { text: "Short Description", value: "shortDesc" },
{ text: "Name", value: "name" },
{ text: "Phone", value: "phone" },
{ text: "Email", value: "email" },
{ text: "Organization", value: "organization" },
],
};

const [issueDetails, setIssueDetails] = [Link]<any>({});

const [resolutionData, setResolutionData] = [Link]<any>({});
const [tabeValue, setTabeValue] = useState<string>("respondentActions");

async function apiCall() {

try {
[Link]({
isLoading: true,
message: "Getting grievance details...",
});
// const response: Iresponse = await [Link]("/api/get-
issue-details", {
// params: { id },
// });
const response: Iresponse = await
[Link](GET_ISSUE_DETAILS, {
params: { id },
});

if (!isEmpty(response)) {
const { data } = [Link];
if (!data) {
alert("empty response......");
// navigate("/issue")
}
const _issueDetails: any = {
...data,
issueDetails: [Link][0],
};

if (_issueDetails?.issueDetails?.createdDate) {
const dateTime1 =
moment(_issueDetails?.issueDetails?.createdDate);
const dateTime2 = moment();
const duration =
[Link]([Link](dateTime1));
const days = [Link]();
const hours = [Link]();
const minute = [Link]();
const second = [Link]();

_issueDetails.[Link] =
(days > 1 && `${days} days ago`) ||
(hours > 1 && `${hours} hours ago`) ||
(minute > 1 && `${minute} minute ago`) ||
`${second} second ago`;
}

_issueDetails.[Link] =

_issueDetails?.issueDetails?.description?.images?.map(
(img: any) => `${BASE_URL}/${img?.filePath}`
);
// [
// '[Link]
// '[Link]
[Link]',
//
'[Link]
// ];
setIssueDetails(_issueDetails);

} else {
ShowSnackbarFailure(response, myContext);
[Link]("error.", response);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);

} finally {
[Link]({
isLoading: false,
});
}
 }

[Link](() => {
apiCall();
}, []);
[Link](() => {
const data = {
respondentActions:

issueDetails?.issueDetails?.issueActions?.respondentActions?.map(
(item: any) => {
return {
id: item?._id,
action: item?.respondentActions,
shortDesc: item?.shortDesc,
organization:
item?.updatedBy?.[Link],
name: item?.updatedBy?.person?.name,
};
}
),
complainantActions:

issueDetails?.issueDetails?.issueActions?.complainantActions?.map(
(item: any) => {
return {
id: item?._id,
action: item?.complainantActions,
shortDesc: item?.shortDesc,
organization:
item?.updatedBy?.[Link],
name: item?.updatedBy?.person?.name,
phone:
item?.updatedBy?.contact?.phone,
email:
item?.updatedBy?.contact?.email,
};
}
) || [],
};
setResolutionData(data);
}, [issueDetails]);
return (
<Grid container spacing={1} padding={1}>
<Grid item lg={12} md={12} sm={12} xs={12}>
<Card sx={{ display: "flex", justifyContent: "space-
between" }}>
<Grid container>
<Grid item sx={{ p: 1 }}>
<IconButton onClick={() => navigate(-
1)}>
<ArrowBackIcon />
</IconButton>
</Grid>
<Grid
item
sm={7}
sx={{ p: 1, alignItems: "center",
display: "flex" }}
>
Issue details
</Grid>
</Grid>
<Grid
 container
sx={{
alignItems: "center",
justifyContent: "end",
marginRight: 1,
}}
>
{/* <Button
onClick={() => setOpen(true)}
sx={{ p: 1, alignItems: "center",
display: "flex", pr: 2 }}
>
Take action
</Button> */}
<MobilityButton
label="Take Action"
onClick={(event:
[Link]<HTMLButtonElement>) => {
setOpen(true);
}}
/>
</Grid>
</Card>
</Grid>
<Grid item lg={6} md={12} sm={12} xs={12}>
<Card style={[Link]}>
<Grid
item
sx={{
display: "flex",
justifyContent: "space-between",
padding: 1,
paddingLeft: 2,
}}
>
<Typography variant="body1" gutterBottom>
Issue Id
#{issueDetails?.issueDetails?._id}
</Typography>
<Typography variant="body1" gutterBottom>

{issueDetails?.issueDetails?.description?.name}
</Typography>
</Grid>
<CardContent>
<Grid
item
sx={{
display: "flex",
paddingTop: 1,
paddingBottom: 1,
}}
lg={12}
xs={12}
md={12}
>
<Typography variant="h6" gutterBottom>

{issueDetails?.issueDetails?.description?.shortDesc}
</Typography>
</Grid>
<Grid container sx={{ display: "flex" }}>
<Grid item sx={{ display: "flex",
columnGap: "5px", pr: 1 }}>
 <PersonIcon
fontSize="small"></PersonIcon>
<Typography
variant="caption"
gutterBottom
sx={{ alignItems:
"center" }}
>

{issueDetails?.issueDetails?.complainantInfo?.person?.name}
</Typography>
</Grid>
<Grid item sx={{ display: "flex", pr:
1, columnGap: "5px" }}>
<AccessTimeIcon
fontSize="small"></AccessTimeIcon>
<Typography
variant="caption"
gutterBottom
sx={{ alignItems:
"center" }}
>

{issueDetails?.issueDetails?.createdAt}
</Typography>
</Grid>
<Grid item sx={{ display: "flex", pr:
1, columnGap: "5px" }}>
<TimerIcon
fontSize="small"></TimerIcon>
<Typography
variant="caption"
gutterBottom
sx={{ alignItems:
"center" }}
>

{issueDetails?.issueDetails?.createdTime}
</Typography>
</Grid>
</Grid>
<Grid
item
sx={{
display: "flex",
paddingTop: 1,
paddingBottom: 1,
}}
>
<Typography variant="subtitle2"
gutterBottom>

{issueDetails?.issueDetails?.description?.longDesc}
</Typography>
</Grid>
<Divider />

<Grid container sx={{ py: 1 }}

columnGap={2}>
<Grid
item
sx={{
display: "flex",
py: 1,
 columnGap: "5px",
alignItems: "baseline",
}}
>
<Typography
fontSize={12}
fontWeight={600}
gutterBottom
style={{ display: "flex" }}
>
Order Id:
</Typography>
<Typography fontSize={12}>

{issueDetails?.issueDetails?.orderDetails?.id}
</Typography>
</Grid>
<Grid
item
sx={{
display: "flex",
py: 1,
alignItems: "baseline",
columnGap: "5px",
}}
>
<Typography
fontSize={12}
fontWeight={600}
gutterBottom
style={{ display: "flex" }}
>
Order Item Id:
</Typography>
<Typography fontSize={12}>

{issueDetails?.issueDetails?.orderDetails?.items?.[0]?.itemId}
</Typography>
</Grid>
<Grid
item
sx={{
display: "flex",
py: 1,
alignItems: "baseline",
columnGap: "5px",
}}
>
<Typography
fontSize={12}
fontWeight={600}
gutterBottom
style={{ display: "flex" }}
>
Market Place:
</Typography>
<Typography fontSize={12}>

{issueDetails?.issueDetails?.source?.networkParticipantId}
</Typography>
</Grid>

<Grid item lg={12} sm={12} md={12}>

<Divider />
 </Grid>

<Grid item sx={{ py: 1 }} lg={12}

xs={12} md={12}>
<Typography
fontSize={14}
fontWeight={600}
gutterBottom
style={{ display: "flex" }}
>
Issue Actions
</Typography>
<Box
sx={{
height: "fit-
content",
"max-height":
"800px",
overflow: "scroll",
}}
>

{issueDetails?.issueHistory?.map((history: any) => {

const props = {
...
(history?.issueHistory?.status && {

actionName: history?.issueHistory?.actionType,
}),
...
(history?.issueHistory?.longDesc && {

longDescription: history?.issueHistory?.longDesc,
}),
...
(history?.issueHistory?.shortDesc && {

shortDescription: history?.issueHistory?.shortDesc,
}),
...
(history?.issueHistory?.createdBy?.performedBy && {

performBy:

history?.issueHistory?.createdBy?.performedBy,
}),
...(!
isEmpty(history?.issueHistory?.createdBy) && {

complainantDetails: {
...
(history?.issueHistory?.createdBy?.name && {

name: history?.issueHistory?.[Link],
}),
...
(history?.issueHistory?.[Link] && {

email: history?.issueHistory?.[Link],
}),
...
(history?.issueHistory?.[Link] && {
 id: history?.issueHistory?.[Link],
}),
...
(history?.issueHistory?.[Link] && {

phone: history?.issueHistory?.[Link],
}),
},
}),
status:
history?.status,
date:
[Link],
};
return (
<Grid item
sx={{ p: 1 }} lg={12} xs={12} md={12}>

<ActionCard {...props} />

</Grid>
);
})}
</Box>
</Grid>
{/* {resolutionData?.respondentActions
&& (
<Grid item lg={12} md={12} sm={12} xs={12}>
<CardActionArea
sx={{
display: 'flex',
justifyContent: 'space-between',
padding: 2,
}}
>
<Typography>RespondentActions</Typography>
<ExpandMoreIcon />
</CardActionArea>

<CardContent>
<RespondentActions
respondentData={[Link]}
headers={[Link]}
/>
</CardContent>
</Grid>
)} */}
{/* <Grid item
sx={{ display:'flex',py:1 }}>
<Typography variant="subtitle2" fontWeight={600} gutterBottom
style={{ display:'flex' }}>
Agent Name:
</Typography>
<span style={{ paddingLeft: 4,fontSize: 12}}>
{issueDetails?.issueDetails?.source?.networkParticipantId}
</span>
</Grid> */}
</Grid>
</CardContent>
</Card>
</Grid>
<Grid item lg={6} md={12} sm={12} xs={12}>
<Grid container rowGap={2}>
<Grid item lg={12} md={12} sm={12} xs={12}>
<Card style={[Link]}>
 <Typography
sx={{
display: "flex",
padding: 1,
paddingLeft: 3,
background: "#e2e2e2",
}}
>
Order Summary
</Typography>
<CardContent>
<Grid container sx={{ py: 1 }}
columnGap={2}>
<Grid
item
sx={{
display:
"flex",
py: 1,
columnGap:
"5px",
alignItems:
"baseline",
}}
>
<Typography
fontSize={12}

fontWeight={600}
gutterBottom

style={{ display: "flex" }}

>
Provider Id:
</Typography>
<span
style={{ paddingLeft: 4, fontSize: 12 }}>

{issueDetails?.issueDetails?.orderDetails?.providerId}
</span>
</Grid>

{/* <Grid item

sx={{ display: 'flex', py: 1 }}>
<Grid container> */}
{/* <Grid item lg={12}>
<Typography
variant="subtitle2"
fontWeight={600}
gutterBottom
style={{ display: 'flex' }}
>
Item Details
</Typography>
</Grid> */}
<Grid
item
sx={{
display:
"flex",
py: 1,
columnGap:
"5px",
alignItems:
"baseline",
}}
>
<Typography
fontSize={12}

fontWeight={600}
gutterBottom

style={{ display: "flex" }}

>
Item Id :
</Typography>
<span
style={{ paddingLeft: 4, fontSize: 12 }}>
{

issueDetails?.issueDetails?.orderDetails?.items?.[0]
?.i
temId
}
</span>
</Grid>
<Grid
item
sx={{
display:
"flex",
py: 1,
columnGap:
"5px",
alignItems:
"baseline",
}}
>
<Typography
fontSize={12}

fontWeight={600}
gutterBottom

style={{ display: "flex" }}

>
Item Name :
</Typography>
<span
style={{ paddingLeft: 4, fontSize: 12 }}>
{

issueDetails?.issueDetails?.orderDetails?.items?.[0]
?.d
escriptor?.name
}
</span>
</Grid>
{/* </Grid>
</Grid> */}
</Grid>
</CardContent>
</Card>
</Grid>
<Grid item lg={12} md={12} sm={12} xs={12}>
<Card style={[Link]}>
<Typography
 sx={{
display: "flex",
padding: 1,
paddingLeft: 3,
background: "#e2e2e2",
}}
>
Uploads
</Typography>
<CardContent>
<Carousel fullHeightHover={true}>

{issueDetails?.issueDetails?.description?.images?.map(
(image: string,
index: number) => (
<div
key={index}>
<img

width="450px"

crossOrigin='anonymous'

height="300px"

src={image}

alt={`Images ${index}`}
/>
</div>
)
)}
</Carousel>
</CardContent>
</Card>
</Grid>
</Grid>
</Grid>
<Grid item lg={12} md={12} xs={12} sm={12}>
{
<GrievanceForm
issueData={{
id,
}}
open={open}
setOpen={setOpen}
/>
}
</Grid>
</Grid>
);
};

export default GrievanceDetails;

59] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
Grievances\[Link]
import * as React from "react";
import _, { isEmpty } from "lodash";
import { useNavigate } from "react-router-dom";
import { Card, Grid, Paper, Tab, Tabs } from "@mui/material";
import EnhancedTable from "../../CommonComponents/EnhancedTable";
import { MobilityButtonIconView } from
"../../CommonComponents/MobilityButtonIcon";
import { formatDateTime } from "../../../CustomUtils/DateTimeUtils";
import { AppContext } from "../../Context/AppContext";
import { ShowSnackbarFailure } from "../../CommonComponents/MobilitySnackBar";
import MobilityEmptyMsg from "../../CommonComponents/MobilityEmptyMsg";
import { MobilityChip } from "../../CommonComponents/MobilityChip";
import { apiHandler } from "../../ApiServices/ApiHandler";
import { GET_GRIEVANCE_LIST } from "../../ApiServices/ApiConstants";

export interface Iresponse {

headers?: any;
data?: any;
status?: number;
message?: string;
}

export interface GrievanceState {

id: string;
issueType: string;
shortDesc: string;
longDesc: string;
status: string;
actions: any;
}
// const submitButtonStyle = {
// marginTop: "25px",
// display: "flex",
// justifyContent: "center",
// };
// const titleStyle = {
// fontSize: "28px",
// fontWeight: "bold",
// marginBottom: "25px",
// };
// const cardStyle = {
// padding: "24px",
// margin: "auto",
// width: "100%",
// boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
// };

const GrievanceList: [Link] = (): [Link] => {

const navigate = useNavigate();
let myContext = [Link](AppContext);

const grievanceDetailsPath: string = "/grievance-details";

const [passengerIssueList, setPassengerIssueList] =
[Link]<any[]>([]);
const [passengerSupportIssueList, setPassengerSupportIssueList] =
[Link]<any[]>([]);
const [driverIssueList, setDriverIssueList] = [Link]<any[]>([]);
const [driverSupportIssueList, setDriverSupportIssueList] =
[Link]<
any[]
>([]);
const [showDialogForm, setShowDialogForm] = [Link]("");

const [issueData, setissueData] = [Link]<any>({});

const [open, setOpen] = [Link](false);
const [isLoading, setIsLoading] = [Link]<boolean>(false);
const [tabValue, setTabValue] = [Link]<string>("passengerIssue");
const [searchText, setSearchText] = [Link]<string>("");
const [filteredPassengerIssueList, setfilteredPassengerIssueList] =
[Link]<any[]>([]);
const [
 filteredpassengerSupportIssueList,
setfilteredPassengerSupportIssueList,
] = [Link]<any[]>([]);
const [filteredDriverIssueList, setfilterdDriverIssueList] =
[Link]<
any[]
>([]);
const [filteredDriverSupportIssueList, setfilteredDriverSupportIssueList]
=
[Link]<any[]>([]);
const openDocumentDialog = (item: any, id: any, key: string) => {
setOpen(true);
setShowDialogForm(key);
setissueData(item);
};

async function getGrievanceList(page: number, rowsPerPage: number) {

try {
[Link]({
isLoading: true,
message: "Getting grievance list...",
}); // const entityId = "651fa78600a18444e470c8be";
// const payload = { rowsPerPage, pageNo: page };

// const response: Iresponse = await [Link](

// "/api/get-grievance-list"
// // payload,
// // {
// // params: { entityId },
// // }
// );
const response: Iresponse = await [Link](
GET_GRIEVANCE_LIST
// // payload,
// // {
// // params: { entityId },
// // }
);

let passIssueList: any = [],

passSupportIssueList: any = [],
driveIssueList = [],
driveSupportIssueList = [];
if (!isEmpty(response)) {
const { data } = response?.data;
//let passIssueList = [];
// passSupportIssueList = [],
// driveIssueList = [],
// driveSupportIssueList = [];
data?.map((issue: any) => {
let issueItem = {
id: issue?.id,
issueType: [Link],
shortDesc: issue?.description?.shortDesc,
longDesc: issue?.description?.longDesc,
status: <MobilityChip
label={issue?.orderDetails?.state} />,
sourceType: issue?.source?.type,
actions: (() => {
return [
{
label: "Resolve Issue",
props: {
color: "success",
 },
action: (item: any) => {

openDocumentDialog(item, [Link], "ResolveIssue");

},
},
{
label: "IGM",
props: {
color: "success",
},
action: (item: any) => {

openDocumentDialog(item, [Link], "IGM");

},
},
];
})(),
createdDate:
formatDateTime(issue?.createdDate, true),
history: (
<MobilityButtonIconView
tooltipTitle="View Issue Details"
onClick={(e) => {
[Link]();
navigate(`$
{grievanceDetailsPath}?id=${issue?.id}`);
}}
/>
),
//path: issueDetailsPath,
};

switch ([Link]) {
case "CONSUMER":
[Link](issueItem);
break;
case "SELLER":
[Link](issueItem);
break;
case "INTERFACING_NP":
[Link](issueItem);
break;
}
});

setPassengerIssueList(passIssueList);
setfilteredPassengerIssueList(passIssueList);

setPassengerSupportIssueList(passSupportIssueList);

setfilteredPassengerSupportIssueList(passSupportIssueList);
} else {
ShowSnackbarFailure(response, myContext);
[Link]("error.", response);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}
[Link](() => {
getGrievanceList(1, 0);
}, []);

const basicTableConfig = {
headers: [
{ text: "Created date", value: "createdDate" },
{ text: "Issue Type", value: "issueType" },
{ text: "Short Description", value: "shortDesc" },
{ text: "Long Description", value: "longDesc" },
{ text: "Status", value: "status" },
],

navigate: (item: any) => {

navigate(`${[Link]}?id=${[Link]}`);
},
};

const EnhancedTableConfig = {
headers: [
{
id: "createdDate",
numeric: false,
disablePadding: true,
label: "Created DateTime",
disableSort: false,
},
// {
// id: "issueType",
// numeric: false,
// disablePadding: false,
// label: "Issue Type",
// disableSort: false,
// },
{
id: "shortDesc",
numeric: false,
disablePadding: true,
label: "Short Description",
disableSort: true,
},
{
id: "longDesc",
numeric: false,
disablePadding: true,
label: "Long Description",
disableSort: true,
},
{
id: "status",
numeric: false,
disablePadding: true,
label: "Ride Status",
disableSort: true,
},
{
id: "history",
numeric: false,
disablePadding: true,
label: "View Details",
disableSort: true,
},
],
// navigate: (item: any) => {
 // navigate(`${[Link]}?id=${[Link]}`);
// },
};

const styles = {
extendedTab: {
//minWidth: "500px",
textTransform: "none",
fontSize: 16,
fontWeight: 400,
},
};

const handleInputChange = (event: [Link]<HTMLInputElement>) =>

{
const inputValue = [Link]();

setSearchText(inputValue);
switch (tabValue) {
case "passengerIssue":
const filteredRows = [Link]((row) =>
{
return (

[Link]().includes(inputValue) ||

[Link]().includes(inputValue)
);
});

setfilteredPassengerIssueList(filteredRows);
break;
case "passengerSupportIssue":
const filteredRows2 =
[Link]((row) => {
return (

[Link]().includes(inputValue) ||

[Link]().includes(inputValue)
);
});

setfilteredPassengerSupportIssueList(filteredRows2);
break;
case "driverIssue":
const filteredRows3 = [Link]((row) => {
return
[Link]().includes(inputValue);
});
setfilterdDriverIssueList(filteredRows3);
break;
case "driverSupportIssue":
const filteredRows4 =
[Link]((row) => {
return
[Link]().includes(inputValue);
});
setfilteredDriverSupportIssueList(filteredRows4);
break;
}
};
return (
<Grid style={{ padding: 5 }}>
 <Paper component={Card} variant="outlined">
{/* <Grid
container
sx={{
justifyContent: "end",
padding: 1,
backgroundColor: "white",
}}
>
<MobilityTextField
label="Search Issue..."
type="text"
name="search"
value={searchText}
maxLength={10}
onChange={(event: [Link]<HTMLInputElement>) => {
handleInputChange(event);
}}
/>
</Grid> */}
<Grid sx={{ display: "flex", justifyContent: "space-
between" }}>
<Grid container>
<Grid item>
<Tabs
value={tabValue}
onChange={(e, newValue) => {
setTabValue(newValue);
}}
>
<Tab
label="Passenger"
value="passengerIssue"
sx={[Link]}
/>

<Tab
label="Passenger Support"

value="passengerSupportIssue"
sx={[Link]}
/>

<Tab
label="Driver"
value="driverIssue"
sx={[Link]}
/>

<Tab
label="Driver Support"
value="driverSupportIssue"
sx={[Link]}
/>
</Tabs>
</Grid>
</Grid>
</Grid>

<Grid padding={2}>
{tabValue === "passengerIssue" &&
([Link] > 0 ? (
<EnhancedTable
 headers={[Link]}
//
tableData={passengerIssueList}

tableData={filteredPassengerIssueList}
/>
) : (
<MobilityEmptyMsg message={"No
Passenger Issue Found"} />
))}

{tabValue === "driverIssue" &&

([Link] > 0 ? (
<EnhancedTable

headers={[Link]}
// tableData={driverIssueList}

tableData={filteredDriverIssueList}
/>
) : (
<MobilityEmptyMsg message={"No Driver
Issue Found"} />
))}

{tabValue === "passengerSupportIssue" &&

([Link] > 0 ? (
<EnhancedTable

headers={[Link]}
//
tableData={passengerSupportIssueList}

tableData={filteredpassengerSupportIssueList}
/>
) : (
<MobilityEmptyMsg message={"No
Passenger Support Issue Found"} />
))}

{tabValue === "driverSupportIssue" &&

([Link] > 0 ? (
<EnhancedTable

headers={[Link]}
//
tableData={driverSupportIssueList}

tableData={filteredDriverSupportIssueList}
/>
) : (
<MobilityEmptyMsg message={"No Driver
Support Issue Found"} />
))}
</Grid>
</Paper>
{/* <EnhancedTable
headers={[Link]}
tableData={issueList}
></EnhancedTable> */}

{/* <Grid item lg={12} md={12} xs={12} sm={12}>

{
<IssueForm
 issueData={issueData}
open={open}
setOpen={setOpen}
></IssueForm>
}
</Grid> */}
</Grid>
);
};

export default GrievanceList;

60] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
Grievances\[Link]
import * as React from "react";
import {
Button,
Dialog,
DialogContent,
DialogTitle,
FormControl,
Grid,
IconButton,
InputLabel,
MenuItem,
Select,
TextareaAutosize,
} from "@mui/material";
import { useNavigate } from "react-router-dom";
import { apiHandler } from "../../ApiServices/ApiHandler";
import { AppContext } from "../../Context/AppContext";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../../CommonComponents/MobilitySnackBar";
import { AppBlockingSharp, Close } from "@mui/icons-material";
import MobilityButton from "../../CommonComponents/MobilityButton";
import { ISSUE_RESOLUTION } from "../../ApiServices/ApiConstants";
interface issueFormProps {
issueData: any;
open: boolean;
setOpen: any;
}
// interface ValidationErrors {
// complainantAction: string;
// shortDesc: string;
// }
//
interface issueDetails {
//complainantAction: string;
respondentAction: string;
shortDesc: string;
}
interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}
const submitButtonStyle = {
marginTop: "25px",
display: "flex",
justifyContent: "center",
};
const textAreaStyle = {
width: "100%",
};
const GrievanceForm: [Link]<issueFormProps> = ({
issueData,
open,
setOpen,
}) => {
const navigate = useNavigate();
// const dropdownOptions = ["OPEN", "ESCALATE", "CLOSE"];
const dropdownOptions = ["PROCESSING", "RESOLVED"];
const [selectedRespondent, setSelectedRespondent] =
[Link]<any>("");
const actionTypes = ["ResolveIssue", "IGM"];
const [issueDetails, setIssueDetails] = [Link]<issueDetails>({
//complainantAction: "",
respondentAction: "",
shortDesc: "",
});
// const [selectedRespondent, setSelectedRespondent] =
[Link]<any>("");
const [isLoading, setIsLoading] = [Link]<boolean>(false);
const [actionType, setActionType] = [Link]<any>(null);
const [complainantAction, setComplainantAction] =
[Link]<any>(null);
// const [validationErrors, setValidationErrors] =
// [Link]<ValidationErrors>({
// complainantAction: "",
// shortDesc: "",
// });
let myContext = [Link](AppContext);

async function handleSubmit(event: [Link]) {

[Link]();
try {
[Link]({
isLoading: true,
message: "Saving Issue...",
});
let isValid = true;
if (actionType === "ResolveIssue" && complainantAction ===
"ESCALATE") {
isValid = false;
}
if (isValid) {
setIsLoading(true);

const requestBody = {
...issueData,
issueResolutionKey: "pushToGrievance",
resolutionType: "pushToGrievance",
groRemarks: [Link],
respondentAction: selectedRespondent,
};

// const res: Iresponse = await [Link](

// `/api/issue-resolution`,
// requestBody
// );

const res: Iresponse = await [Link](

ISSUE_RESOLUTION,
requestBody
 );

// if (isEmpty(res)) {
// // apiCall();
// }
if ([Link] === 200) {

//navigate(-1);
ShowSnackbarSuccess("Issue pushed to GR",
myContext);
setIssueDetails({
//complainantAction: "",
respondentAction: "",
shortDesc: "",
});
setOpen(false);
} else {
ShowSnackbarFailure(res, myContext);
}
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);

} finally {
[Link]({
isLoading: false,
});
}
}
const handleClose = () => {
setOpen(false);
};
return (
<Dialog
open={open}
onClose={function handleClose() {
setOpen(false);
}}
PaperProps={{
style: {
minWidth: "25vw",
// width: "40%",
// height: "65vh",
// maxWidth: "none",
},
}}
>
<DialogTitle
sx={{ backgroundColor: "#eaeaea" }}
// style={{
// backgroundColor: "#e2e2e2",
// textAlign: "center",
// marginBottom: "10px",
// }}
>
Take Action
</DialogTitle>
<IconButton
aria-label="close"
onClick={handleClose}
sx={{
position: "absolute",
right: 8,
 top: 16,
}}
>
<Close />
</IconButton>
<DialogContent>
{/* <form onSubmit={handleSubmit}> */}
<Grid container spacing={4}>
{/* <Grid item xs={12}>
<FormControl fullWidth
variant="outlined">
<InputLabel id="select-
label">Action type</InputLabel>
<Select
labelId="select-
label"
id="select2"
variant="outlined"
fullWidth
value={actionType}
onChange={(e) =>
setActionType([Link])}
label="Action type"
>

{[Link]((option) => (
<MenuItem
key={option} value={option}>
{option}
</MenuItem>
))}
</Select>
</FormControl>
</Grid> */}

{/* <Grid item xs={12}>

<FormControl fullWidth
variant="outlined">
<InputLabel id="select-
label">Complainant Action</InputLabel>
<Select
labelId="select-
label"
id="select"
variant="outlined"
fullWidth

value={[Link]}
onChange={(e) => {

setComplainantAction([Link]);

setIssueDetails({
...issueD
etails,

complainantAction: [Link],
});
}}
label="Complainant
Action"
>

{[Link]((option) => (
 <MenuItem
key={option} value={option}>
{option}
</MenuItem>
))}
</Select>
</FormControl>
</Grid> */}

<Grid item xs={12}>

<FormControl fullWidth variant="outlined">
<InputLabel id="select-
label">Respondent Action</InputLabel>
<Select
labelId="select-label"
id="select"
variant="outlined"
fullWidth
value={selectedRespondent}
onChange={(e) => {

setSelectedRespondent([Link]);
setIssueDetails({
...issueDetails,
respondentAction:
[Link],
});
}}
label="Complainant Action"
>
{[Link]((option) =>
(
<MenuItem key={option}
value={option}>
{option}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
</Grid>

<Grid container spacing={4}>

<Grid
item
xs={12}
sx={{
marginTop: 2,
}}
>
<TextareaAutosize
aria-label="minimum height"
minRows={3}
placeholder="Enter comment here"
style={textAreaStyle}
value={[Link]}
onChange={(e) =>
setIssueDetails({
...issueDetails,
shortDesc: [Link],
})
}
/>
{/* <div style={{ color: "red" }}>
 {[Link]}
</div> */}
</Grid>
</Grid>

<Grid container sx={{ marginTop: 1, justifyContent:

"center" }}>
<MobilityButton
label="Submit"
disabled={![Link]}
onClick={handleSubmit}
/>
</Grid>
{/* <Grid item lg={12} sx={submitButtonStyle}>
<Button
type="submit"
variant="contained"
color="primary"
disabled={![Link]}
>
Submit
</Button>
</Grid> */}
{/* </form> */}
</DialogContent>
</Dialog>
);
};

export default GrievanceForm;

61] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
Issue\[Link]
import { Card, Grid, Typography } from "@mui/material";
import PersonIcon from "@mui/icons-material/Person";
import EmailIcon from "@mui/icons-material/Email";
import PhoneIcon from "@mui/icons-material/Phone";
import { isEmpty } from "lodash";

import { FC, useEffect } from "react";

interface ActionCardProps {
actionName: string;
longDescription?: string;
shortDescription?: string;
performBy?: string;
complainantDetails?: {
name?: string;
email?: string;
id?: string;
phone?: string;
};
status?: string;
date: string;
}

const ActionCard: FC<ActionCardProps> = ({

actionName,
longDescription,
shortDescription,
performBy,
complainantDetails,
status,
date,
}) => {
useEffect(() => {

}, []);

// const actionNameMapper: any = {

// 'Resolution of the Issue from Seller': 'Issue Resolution from
Seller',
// ISSUE_RESOLVED: 'Issue resolved',
// PROCESSED_TO_IGM: 'Processed to IGM',
// Reply_to_cx: 'Reply to Passenger',
// created: 'Issue Created by passenger',
// Recieved_Issue_from_BAP: 'Recieved issue from passenger',
// };

const performByMap: any = {

"BPP Support": "Support admin",
BAP_SUPPORT_ADMIN: "Passenger support",
};

const _date = new Date(date);

const dateString = `${_date.getDay()}/${_date.getMonth()}/$

{_date.getUTCFullYear()}`;

return (
<Card elevation={6}>
<Grid container>
<Grid
item
sx={{ p: 1, display: "flex", justifyContent:
"space-between" }}
lg={12}
>
<Typography fontSize={17} fontWeight={380}
gutterBottom>
{actionName}
{/* {actionNameMapper[actionName]
? actionNameMapper[actionName]
: actionName}
{actionNameMapper[actionName]
? actionNameMapper[actionName]
: actionName} */}
</Typography>
</Grid>

<Grid container sx={{ px: 1 }}>

{date && (
<Grid
item
lg={3}
sm={12}
md={12}
sx={{
display: "flex",
alignItems: "center",
columnGap: "10px",
}}
>
<Typography fontSize={11}
fontWeight={550} gutterBottom>
Date:
</Typography>
<Typography fontSize={12}
fontWeight={400} gutterBottom>
{dateString}
</Typography>
</Grid>
)}
{performBy && (
<Grid
item
lg={6}
sm={12}
md={12}
sx={{
display: "flex",
alignItems: "center",
columnGap: "10px",
}}
>
<Typography fontSize={11}
fontWeight={550} gutterBottom>
Perform By:
</Typography>
<Typography fontSize={13}
fontWeight={350} gutterBottom>
{performByMap[performBy] ?
performByMap[performBy] : performBy}
{/* {performByMap[performBy] ?
performByMap[performBy] : performBy} */}
</Typography>
</Grid>
)}
{status && (
<Grid
item
lg={3}
sm={12}
md={12}
sx={{
display: "flex",
alignItems: "center",
columnGap: "10px",
}}
>
<Typography fontSize={11}
fontWeight={550} gutterBottom>
Issue status:
</Typography>
<Typography fontSize={13}
fontWeight={350} gutterBottom>
{status}
</Typography>
</Grid>
)}
</Grid>
{!isEmpty(complainantDetails) && (
<Grid container sx={{ marginLeft: "10px" }}>
<Grid item lg={12} sm={12} md={12}
sx={{ display: "flex" }}>
<Typography fontSize={14}
fontWeight={500} gutterBottom>
Complainant Info:
</Typography>
</Grid>
{complainantDetails?.name && (
<Grid
 item
sx={{
p: 1,
display: "flex",
columnGap: "5px",
// marginLeft: '12px'
}}
>
<PersonIcon
fontSize="small"></PersonIcon>
<Typography
fontSize={12}
fontWeight={400}
gutterBottom
sx={{ display: "flex" }}
>
{complainantDetails?.name}
</Typography>
</Grid>
)}
{complainantDetails?.email && (
<Grid
item
sx={{
p: 1,
columnGap: "5px",
display: "flex",
}}
>
<EmailIcon
fontSize="small"></EmailIcon>
<Typography
fontSize={12}
fontWeight={400}
gutterBottom
sx={{ display: "flex" }}
>
{complainantDetails?.email}
</Typography>
</Grid>
)}
{[Link] && (
<Grid
item
sx={{
p: 1,
columnGap: "5px",
display: "flex",
}}
>
<PhoneIcon
fontSize="small"></PhoneIcon>
<Typography
fontSize={12}
fontWeight={400}
gutterBottom
sx={{ display: "flex" }}
>
{complainantDetails?.phone}
</Typography>
</Grid>
)}
</Grid>
)}
 {/* long description */}
{shortDescription && (
<div>
<Grid
item
lg={12}
sm={12}
md={12}
sx={{ display: "flex", px: 1, pb: 0,
mb: 0 }}
>
<Typography fontSize={12}
fontWeight={600} gutterBottom>
Short Description:
</Typography>
</Grid>
<Grid item sx={{ p: 1 }} lg={12}>
<Typography
fontSize={14}
fontWeight={520}
gutterBottom
sx={{ display: "flex" }}
>
{shortDescription}
</Typography>
</Grid>
</div>
)}
{/* short description */}
{longDescription && (
<>
<Grid
item
lg={12}
sm={12}
md={12}
sx={{ display: "flex", px: 1, pb: 0,
mb: 0 }}
>
<Typography fontSize={12}
fontWeight={600} gutterBottom>
Description:
</Typography>
</Grid>
<Grid item sx={{ p: 1 }} lg={12}>
<Typography
fontSize={12}
fontWeight={350}
gutterBottom
sx={{ display: "flex", textAlign:
"start" }}
>
{longDescription}
</Typography>
</Grid>
</>
)}
</Grid>
</Card>
);
};

export default ActionCard;

 62] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
Issue\[Link]
import React, { FC, ReactElement, useState } from "react";
import {
Card,
Grid,
Typography,
CardContent,
Box,
Divider,
} from "@mui/material";
import ActionCard from "./ActionCard";
import PersonIcon from "@mui/icons-material/Person";
import AccessTimeIcon from "@mui/icons-material/AccessTime";
import TimerIcon from "@mui/icons-material/Timer";
import { useSearchParams, useNavigate } from "react-router-dom";
import { isEmpty } from "lodash";
import Carousel from "react-material-ui-carousel";
import IconButton, { IconButtonProps } from "@mui/material/IconButton";
import { styled } from "@mui/material/styles";
import moment from "moment";
import IssueForm from "../../CommonComponents/IssueFormDetails";
import MobilityButton from "../../CommonComponents/MobilityButton";
import { AppContext } from "../../Context/AppContext";
import { ShowSnackbarFailure } from "../../CommonComponents/MobilitySnackBar";
import { MobilityButtonIconBack } from
"../../CommonComponents/MobilityButtonIcon";
import { apiHandler } from "../../ApiServices/ApiHandler";
import { GET_ISSUE_DETAILS } from "../../ApiServices/ApiConstants";
import env from "../../../config/env";
const BASE_URL: string = env.API_BASE_URL;

interface ExpandMoreProps extends IconButtonProps {

expand: boolean;
}

const ExpandMore = styled((props: ExpandMoreProps) => {

const { expand, ...other } = props;
return <IconButton {...other} />;
})(({ theme, expand }) => ({
transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
marginLeft: "auto",
transition: [Link]("transform", {
duration: [Link],
}),
}));

const IssueDetails: FC = (): ReactElement => {

const [queryParameters] = useSearchParams();
const [expanded, setExpanded] = [Link](false);
const [rexpanded, setRExpanded] = [Link](false);
const [open, setOpen] = [Link](false);
let myContext = [Link](AppContext);

//
const id = [Link]("id");
const navigate = useNavigate();

const openDocumentDialog = () => {

setOpen(true);
};
interface Iresponse {
headers?: any;
 data?: any;
status?: number;
message?: string;
}
const styles: { [key: string]: [Link] } = {
card: {
width: "100%",
// padding: 10,
boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.2)",
borderRadius: 5,
overflow: "scroll",
},
subtitle: {
fontSize: 14,
},
gridKey: {
display: "flex",
flexDirection: "row",
},
media: {
display: "inline-block",
marginRight: 10,
height: 200,
},
mediaContainer: {
width: "100%",
overflowX: "auto",
whiteSpace: "nowrap",
},
title: {
textAlign: "start",
fontSize: "20px",
fontWeight: "bold",
// paddingTop: '10px',
// paddingBottom: '10px'
},
};

const tableHeaders: any = {

respondentActions: [
{ text: "Action", value: "action" },
{ text: "Short Description", value: "shortDesc" },
{ text: "Organization", value: "organization" },
{ text: "Name", value: "name" },
],
complainantActions: [
{ text: "Action", value: "action" },
// { text: "Short Description", value: "shortDesc" },
{ text: "Name", value: "name" },
{ text: "Phone", value: "phone" },
{ text: "Email", value: "email" },
{ text: "Organization", value: "organization" },
],
};

const [issueDetails, setIssueDetails] = [Link]<any>({});

const [resolutionData, setResolutionData] = [Link]<any>({});
const [tabeValue, setTabeValue] = useState<string>("respondentActions");

async function apiCall() {

try {
[Link]({
isLoading: true,
message: "Getting Issue Deatils...",
 });
// const response: Iresponse = await [Link]("/api/get-
issue-details", {
// params: { id },
// });
const response: Iresponse = await
[Link](GET_ISSUE_DETAILS, {
params: { id },
});

if (!isEmpty(response)) {
const { data } = [Link];
if (!data) {
alert("empty response......");
// navigate("/issue")
}
const _issueDetails: any = {
...data,
issueDetails: [Link][0],
};

if (_issueDetails?.issueDetails?.createdDate) {
const dateTime1 =
moment(_issueDetails?.issueDetails?.createdDate);
const dateTime2 = moment();
const duration =
[Link]([Link](dateTime1));
const days = [Link]();
const hours = [Link]();
const minute = [Link]();
const second = [Link]();

_issueDetails.[Link] =
(days > 1 && `${days} days ago`) ||
(hours > 1 && `${hours} hours ago`) ||
(minute > 1 && `${minute} minute ago`) ||
`${second} second ago`;
}

_issueDetails.[Link] =

_issueDetails?.issueDetails?.description?.images?.map(
(img: any) => `${BASE_URL}/${img?.filePath}`
);
// [
// '[Link]
// '[Link]
[Link]',
//
'[Link]
// ];
setIssueDetails(_issueDetails);

} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);

} finally {
[Link]({
isLoading: false,
});
}
 }

[Link](() => {
apiCall();
}, []);
[Link](() => {
const data = {
respondentActions:

issueDetails?.issueDetails?.issueActions?.respondentActions?.map(
(item: any) => {
return {
id: item?._id,
action: item?.respondentActions,
shortDesc: item?.shortDesc,
organization:
item?.updatedBy?.[Link],
name: item?.updatedBy?.person?.name,
};
}
),
complainantActions:

issueDetails?.issueDetails?.issueActions?.complainantActions?.map(
(item: any) => {
return {
id: item?._id,
action: item?.complainantActions,
shortDesc: item?.shortDesc,
organization:
item?.updatedBy?.[Link],
name: item?.updatedBy?.person?.name,
phone:
item?.updatedBy?.contact?.phone,
email:
item?.updatedBy?.contact?.email,
};
}
) || [],
};
setResolutionData(data);
}, [issueDetails]);
return (
<Grid container spacing={1} padding={1}>
<Grid item lg={12} md={12} sm={12} xs={12}>
<Card sx={{ display: "flex", justifyContent: "space-
between" }}>
<Grid container>
<Grid item sx={{ p: 1 }}>
<MobilityButtonIconBack onClick={() =>
navigate(-1)} />
</Grid>
<Grid
item
sm={7}
sx={{ p: 1, alignItems: "center",
display: "flex" }}
>
Issue details
</Grid>
</Grid>
<Grid
container
sx={{ alignItems: "center", justifyContent:
"end", marginRight: 1 }}
>
<MobilityButton
label="Take Action"
onClick={(event:
[Link]<HTMLButtonElement>) => {
setOpen(true);
}}
/>
</Grid>
</Card>
</Grid>
<Grid item lg={6} md={12} sm={12} xs={12}>
<Card style={[Link]}>
<Grid
item
sx={{
display: "flex",
justifyContent: "space-between",
padding: 1,
paddingLeft: 2,
}}
>
<Typography variant="body1" gutterBottom>
Issue Id
#{issueDetails?.issueDetails?._id}
</Typography>
<Typography variant="body1" gutterBottom>

{issueDetails?.issueDetails?.description?.name}
</Typography>
</Grid>
<CardContent>
<Grid
item
sx={{
display: "flex",
paddingTop: 1,
paddingBottom: 1,
}}
lg={12}
xs={12}
md={12}
>
<Typography variant="h6" gutterBottom>

{issueDetails?.issueDetails?.description?.shortDesc}
</Typography>
</Grid>
<Grid container sx={{ display: "flex" }}>
<Grid item sx={{ display: "flex",
columnGap: "5px", pr: 1 }}>
<PersonIcon
fontSize="small"></PersonIcon>
<Typography
variant="caption"
gutterBottom
sx={{ alignItems:
"center" }}
>

{issueDetails?.issueDetails?.complainantInfo?.person?.name}
</Typography>
</Grid>
 <Grid item sx={{ display: "flex", pr:
1, columnGap: "5px" }}>
<AccessTimeIcon
fontSize="small"></AccessTimeIcon>
<Typography
variant="caption"
gutterBottom
sx={{ alignItems:
"center" }}
>

{issueDetails?.issueDetails?.createdDate}
</Typography>
</Grid>
<Grid item sx={{ display: "flex", pr:
1, columnGap: "5px" }}>
<TimerIcon
fontSize="small"></TimerIcon>
<Typography
variant="caption"
gutterBottom
sx={{ alignItems:
"center" }}
>

{issueDetails?.issueDetails?.createdTime}
</Typography>
</Grid>
</Grid>
<Grid
item
sx={{
display: "flex",
paddingTop: 1,
paddingBottom: 1,
}}
>
<Typography variant="subtitle2"
gutterBottom>

{issueDetails?.issueDetails?.description?.longDesc}
</Typography>
</Grid>
<Divider />

<Grid container sx={{ py: 1 }}

columnGap={2}>
<Grid
item
sx={{
display: "flex",
py: 1,
columnGap: "5px",
alignItems: "baseline",
}}
>
<Typography
fontSize={12}
fontWeight={600}
gutterBottom
style={{ display: "flex" }}
>
Order Id:
</Typography>
 <Typography fontSize={12}>

{issueDetails?.issueDetails?.orderDetails?.id}
</Typography>
</Grid>
<Grid
item
sx={{
display: "flex",
py: 1,
alignItems: "baseline",
columnGap: "5px",
}}
>
<Typography
fontSize={12}
fontWeight={600}
gutterBottom
style={{ display: "flex" }}
>
Order Item Id:
</Typography>
<Typography fontSize={12}>

{issueDetails?.issueDetails?.orderDetails?.items?.[0]?.itemId}
</Typography>
</Grid>
<Grid
item
sx={{
display: "flex",
py: 1,
alignItems: "baseline",
columnGap: "5px",
}}
>
<Typography
fontSize={12}
fontWeight={600}
gutterBottom
style={{ display: "flex" }}
>
Market Place:
</Typography>
<Typography fontSize={12}>

{issueDetails?.issueDetails?.source?.networkParticipantId}
</Typography>
</Grid>

<Grid item lg={12} sm={12} md={12}>

<Divider />
</Grid>

<Grid item sx={{ py: 1 }} lg={12}

xs={12} md={12}>
<Typography
fontSize={14}
fontWeight={600}
gutterBottom
style={{ display: "flex" }}
>
Issue Actions
</Typography>
 <Box
sx={{
height: "fit-
content",
"max-height":
"800px",
overflow: "scroll",
}}
>

{issueDetails?.issueHistory?.map((history: any) => {

const props = {
...
(history?.issueHistory?.status && {

actionName: history?.issueHistory?.status,
}),
...
(history?.issueHistory?.longDesc && {

longDescription: history?.issueHistory?.longDesc,
}),
...
(history?.issueHistory?.shortDesc && {

shortDescription: history?.issueHistory?.shortDesc,
}),
...
(history?.issueHistory?.createdBy?.performedBy && {

performBy:

history?.issueHistory?.createdBy?.performedBy,
}),
...(!
isEmpty(history?.issueHistory?.createdBy) && {

complainantDetails: {
...
(history?.issueHistory?.createdBy?.name && {

name: history?.issueHistory?.[Link],
}),
...
(history?.issueHistory?.[Link] && {

email: history?.issueHistory?.[Link],
}),
...
(history?.issueHistory?.[Link] && {

id: history?.issueHistory?.[Link],
}),
...
(history?.issueHistory?.[Link] && {

phone: history?.issueHistory?.[Link],
}),
},
}),
status:
history?.status,
date:
[Link],
 };
return (
<Grid item
sx={{ p: 1 }} lg={12} xs={12} md={12}>

<ActionCard {...props} />

</Grid>
);
})}
</Box>
</Grid>
{/* {resolutionData?.respondentActions
&& (
<Grid item lg={12} md={12} sm={12} xs={12}>
<CardActionArea
sx={{
display: 'flex',
justifyContent: 'space-between',
padding: 2,
}}
>
<Typography>RespondentActions</Typography>
<ExpandMoreIcon />
</CardActionArea>

<CardContent>
<RespondentActions
respondentData={[Link]}
headers={[Link]}
/>
</CardContent>
</Grid>
)} */}
{/* <Grid item
sx={{ display:'flex',py:1 }}>
<Typography variant="subtitle2" fontWeight={600} gutterBottom
style={{ display:'flex' }}>
Agent Name:
</Typography>
<span style={{ paddingLeft: 4,fontSize: 12}}>
{issueDetails?.issueDetails?.source?.networkParticipantId}
</span>
</Grid> */}
</Grid>
</CardContent>
</Card>
</Grid>
<Grid item lg={6} md={12} sm={12} xs={12}>
<Grid container rowGap={2}>
<Grid item lg={12} md={12} sm={12} xs={12}>
<Card style={[Link]}>
<Typography
sx={{
display: "flex",
padding: 1,
paddingLeft: 3,
background: "#e2e2e2",
}}
>
Order Summary
</Typography>
<CardContent>
<Grid container sx={{ py: 1 }}
columnGap={2}>
 <Grid
item
sx={{
display:
"flex",
py: 1,
columnGap:
"5px",
alignItems:
"baseline",
}}
>
<Typography
fontSize={12}

fontWeight={600}
gutterBottom

style={{ display: "flex" }}

>
Provider Id:
</Typography>
<span
style={{ paddingLeft: 4, fontSize: 12 }}>

{issueDetails?.issueDetails?.orderDetails?.providerId}
</span>
</Grid>

{/* <Grid item

sx={{ display: 'flex', py: 1 }}>
<Grid container> */}
{/* <Grid item lg={12}>
<Typography
variant="subtitle2"
fontWeight={600}
gutterBottom
style={{ display: 'flex' }}
>
Item Details
</Typography>
</Grid> */}
<Grid
item
sx={{
display:
"flex",
py: 1,
columnGap:
"5px",
alignItems:
"baseline",
}}
>
<Typography
fontSize={12}

fontWeight={600}
gutterBottom

style={{ display: "flex" }}

>
Item Id :
</Typography>
 <span
style={{ paddingLeft: 4, fontSize: 12 }}>
{

issueDetails?.issueDetails?.orderDetails?.items?.[0]
?.i
temId
}
</span>
</Grid>
<Grid
item
sx={{
display:
"flex",
py: 1,
columnGap:
"5px",
alignItems:
"baseline",
}}
>
<Typography
fontSize={12}

fontWeight={600}
gutterBottom

style={{ display: "flex" }}

>
Item Name :
</Typography>
<span
style={{ paddingLeft: 4, fontSize: 12 }}>
{

issueDetails?.issueDetails?.orderDetails?.items?.[0]
?.d
escriptor?.name
}
</span>
</Grid>
{/* </Grid>
</Grid> */}
</Grid>
</CardContent>
</Card>
</Grid>
<Grid item lg={12} md={12} sm={12} xs={12}>
<Card style={[Link]}>
<Typography
sx={{
display: "flex",
padding: 1,
paddingLeft: 3,
background: "#e2e2e2",
}}
>
Uploads
</Typography>
<CardContent>
<Carousel fullHeightHover={true}>

{issueDetails?.issueDetails?.description?.images?.map(
 (image: string,
index: number) => (
<div
key={index}>
<img

width="450px"

height="300px"

crossOrigin='anonymous'

src={image}

alt={`Images ${index}`}
/>
</div>
)
)}
</Carousel>
</CardContent>
</Card>
</Grid>
</Grid>
</Grid>
<Grid item lg={12} md={12} xs={12} sm={12}>
{
<IssueForm
issueData={{
id,
}}
open={open}
setOpen={setOpen}
/>
}
</Grid>
</Grid>
);
};

export default IssueDetails;

63] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
Issue\[Link]
import * as React from "react";
import _, { isEmpty } from "lodash";
import { useNavigate } from "react-router-dom";
import { Card, Grid, Paper, Tab, Tabs } from "@mui/material";
import IssueForm from "../../CommonComponents/IssueFormDetails";
import EnhancedTable from "../../CommonComponents/EnhancedTable";
import { MobilityButtonIconView } from
"../../CommonComponents/MobilityButtonIcon";
import { formatDateTime } from "../../../CustomUtils/DateTimeUtils";
import { AppContext } from "../../Context/AppContext";
import { ShowSnackbarFailure } from "../../CommonComponents/MobilitySnackBar";
import MobilityEmptyMsg from "../../CommonComponents/MobilityEmptyMsg";
import { MobilityChip } from "../../CommonComponents/MobilityChip";
import { apiHandler } from "../../ApiServices/ApiHandler";
import { GET_ISSUE_LIST } from "../../ApiServices/ApiConstants";

interface Iresponse {
headers?: any;
data?: any;
status?: number;
 message?: string;
}

interface issueState {
id: string;
issueType: string;
shortDesc: string;
longDesc: string;
status: string;
actions: any;
}

const IssueList: [Link] = (): [Link] => {

const navigate = useNavigate();
let myContext = [Link](AppContext);

const issueDetailsPath: string = "/issue-details";

const [issueList, setIssueList] = [Link]<issueState[]>([]);
const [showDialogForm, setShowDialogForm] = [Link]("");

const [issueData, setissueData] = [Link]<any>({});

const [open, setOpen] = [Link](false);
const [tabValue, setTabValue] = [Link]<string>("passengerIssue");
const [passengerIssueList, setPassengerIssueList] =
[Link]<any[]>([]);
const [passengerSupportIssueList, setPassengerSupportIssueList] =
[Link]<any[]>([]);
const [driverIssueList, setDriverIssueList] = [Link]<any[]>([]);
const [driverSupportIssueList, setDriverSupportIssueList] =
[Link]<
any[]
>([]);
const [searchText, setSearchText] = [Link]<string>("");
const [filteredPassengerIssueList, setfilteredPassengerIssueList] =
[Link]<any[]>([]);
const [
filteredpassengerSupportIssueList,
setfilteredPassengerSupportIssueList,
] = [Link]<any[]>([]);
const [filteredDriverIssueList, setfilterdDriverIssueList] =
[Link]<
any[]
>([]);
const [filteredDriverSupportIssueList, setfilteredDriverSupportIssueList]
=
[Link]<any[]>([]);
const openDocumentDialog = (item: any, id: any, key: string) => {
setOpen(true);
setShowDialogForm(key);
setissueData(item);
};
async function getIssueList(page: number, rowsPerPage: number) {
try {
[Link]({
isLoading: true,
message: "Getting Issue List...",
}); // const entityId = "651fa78600a18444e470c8be";
// const payload = { rowsPerPage, pageNo: page };

// const response: Iresponse = await [Link](

// "/api/get-issue-list"
// // payload,
// // {
// // params: { entityId },
 // // }
// );
const response: Iresponse = await
[Link](GET_ISSUE_LIST);

let passIssueList: any = [],

passSupportIssueList: any = [],
driveIssueList: any = [],
driveSupportIssueList = [];
if (!isEmpty(response) && [Link] === 200) {
const { data } = response?.data;
data?.map((issue: any) => {
let issueItem = {
id: issue?.id,
issueType: [Link],
shortDesc: issue?.description?.shortDesc,
longDesc: issue?.description?.longDesc,
status: <MobilityChip
label={issue?.orderDetails?.state} />,
sourceType: issue?.source?.type,
actions: (() => {
return [
{
label: "Resolve Issue",
props: {
color: "success",
},
action: (item: any) => {

openDocumentDialog(item, [Link], "ResolveIssue");

},
},
{
label: "IGM",
props: {
color: "success",
},
action: (item: any) => {

openDocumentDialog(item, [Link], "IGM");

},
},
];
})(),
createdDate:
formatDateTime(issue?.createdDate, true),
history: (
<MobilityButtonIconView
tooltipTitle="View Issue Details"
onClick={(e) => {
[Link]();
navigate(`$
{issueDetailsPath}?id=${issue?.id}`);
}}
/>
),
//path: issueDetailsPath,
};

// setIssueList(_data);
switch ([Link]) {
case "CONSUMER":
[Link](issueItem);
break;
 case "SELLER":
[Link](issueItem);
break;
case "INTERFACING_NP":
[Link](issueItem);
break;
}
//[Link](issueItem);
});

//
setPassengerIssueList(passIssueList);
setfilteredPassengerIssueList(passIssueList);

setPassengerSupportIssueList(passSupportIssueList);

setfilteredPassengerSupportIssueList(passSupportIssueList);

setDriverIssueList(driveIssueList);
setfilterdDriverIssueList(driveIssueList);

// setDriverSupportIssueList(driveIssueList);
// setfilteredDriverSupportIssueList(driveIssueList);
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
//
} finally {
[Link]({
isLoading: false,
});
}
}
[Link](() => {
getIssueList(1, 0);
}, []);

const EnhancedTableConfig = {
headers: [
{
id: "createdDate",
numeric: false,
disablePadding: true,
label: "Created DateTime",
disableSort: false,
},
// {
// id: "issueType",
// numeric: false,
// disablePadding: true,
// label: "Issue Type",
// disableSort: false,
// },
{
id: "shortDesc",
numeric: false,
disablePadding: true,
label: "Short Description",
disableSort: true,
},
{
id: "longDesc",
 numeric: false,
disablePadding: true,
label: "Long Description",
disableSort: true,
},
{
id: "status",
numeric: false,
disablePadding: true,
label: "Status",
disableSort: true,
},
{
id: "history",
numeric: false,
disablePadding: true,
label: "View Details",
disableSort: true,
},
],
navigate: (item: any) => {
navigate(`${[Link]}?id=${[Link]}`);
},
};

const styles = {
extendedTab: {
textTransform: "none",
fontSize: 16,
fontWeight: 400,
},
};

const handleInputChange = (event: [Link]<HTMLInputElement>) =>

{
const inputValue = [Link]();

setSearchText(inputValue);
switch (tabValue) {
case "passengerIssue":
const filteredRows = [Link]((row) =>
{
return (

[Link]().includes(inputValue) ||

[Link]().includes(inputValue)
);
});
setfilteredPassengerIssueList(filteredRows);
break;
case "passengerSupportIssue":
const filteredRows2 =
[Link]((row) => {
return
[Link]().includes(inputValue);
});
setfilteredPassengerSupportIssueList(filteredRows2);
break;
case "driverIssue":
const filteredRows3 = [Link]((row) => {
return
[Link]().includes(inputValue);
});
 setfilterdDriverIssueList(filteredRows3);
break;
case "driverSupportIssue":
const filteredRows4 =
[Link]((row) => {
return
[Link]().includes(inputValue);
});
setfilteredDriverSupportIssueList(filteredRows4);
break;
}
};

return (
<Grid style={{ padding: 5 }}>
<Paper component={Card} variant="outlined">
<Grid sx={{ display: "flex", justifyContent: "space-
between" }}>
<Grid container>
<Grid item>
<Tabs
value={tabValue}
onChange={(e, newValue) => {
setTabValue(newValue);
}}
>
<Tab
label="Passenger"
value="passengerIssue"
sx={[Link]}
/>

<Tab
label="Passenger Support"

value="passengerSupportIssue"
sx={[Link]}
/>

<Tab
label="Driver"
value="driverIssue"
sx={[Link]}
/>

<Tab
label="Driver Support"
value="driverSupportIssue"
sx={[Link]}
/>
</Tabs>
</Grid>
</Grid>
</Grid>

{/* <Grid
container
sx={{
justifyContent: "end",
padding: 1,
backgroundColor: "white",
}}
>
<MobilityTextField
 label="Search Issue..."
type="text"
name="search"
value={searchText}
maxLength={10}
onChange={(event:
[Link]<HTMLInputElement>) => {
handleInputChange(event);
}}
/>
</Grid> */}
{/* <Box
sx={{
borderBottom: 1,
borderColor: "divider",
backgroundColor: "white",
}}
> */}

<Grid padding={2}>
{tabValue === "passengerIssue" &&
([Link] > 0 ? (
<EnhancedTable

headers={[Link]}

tableData={filteredPassengerIssueList}
/>
) : (
<MobilityEmptyMsg message={"No
Passenger Issue Found"} />
))}

{tabValue === "driverIssue" &&

([Link] > 0 ? (
<EnhancedTable

headers={[Link]}

tableData={filteredDriverIssueList}
/>
) : (
<MobilityEmptyMsg message={"No Driver
Issue Found"} />
))}

{tabValue === "passengerSupportIssue" &&

([Link] > 0 ? (
<EnhancedTable

headers={[Link]}

tableData={filteredpassengerSupportIssueList}
/>
) : (
<MobilityEmptyMsg message={"No
Passenger Support Issue Found"} />
))}

{tabValue === "driverSupportIssue" &&

([Link] > 0 ? (
<EnhancedTable

headers={[Link]}
 tableData={filteredDriverSupportIssueList}
/>
) : (
<MobilityEmptyMsg message={"No Driver
Support Issue Found"} />
))}
</Grid>

<Grid item lg={12} md={12} xs={12} sm={12}>

{
<IssueForm
issueData={issueData}
open={open}
setOpen={setOpen}
></IssueForm>
}
</Grid>
</Paper>
</Grid>
);
};

export default IssueList;

64]ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
Issue\[Link]
import React, { FC, ReactElement, useState } from "react";
import {
Button,
Card,
Grid,
TextField,
Typography,
Container,
Divider,
Paper,
} from "@mui/material";
import { useLocation } from "react-router-dom";
import { useSearchParams, useNavigate } from "react-router-dom";
import { useUserDispatch } from "../../../CustomUtils/usercontext";
import { isEmpty } from "lodash";
import { AppContext } from "../../Context/AppContext";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../../CommonComponents/MobilitySnackBar";
import { apiHandler } from "../../ApiServices/ApiHandler";
import {
EDIT_DRIVER,
GET_DRIVER_DETAILS_BY_ID,
} from "../../ApiServices/ApiConstants";

const DriverDetails: FC = (): ReactElement => {

const location = useLocation();
const dispatch: any = useUserDispatch();
const navigate = useNavigate();

const [queryParameters] = useSearchParams();

const id = [Link]("id");
const entityId = [Link]("entityId");
 const statusOptions = ["Approved", "Pending", "Rejected"];
interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

const [driverDetails, setDriverDetails] = [Link]<any>({});

let myContext = [Link](AppContext);

async function apiCall() {

try {
[Link]({
isLoading: true,
message: "Getting Driver Details...",
});
// const response: Iresponse = await [Link](
// `/api/get-driver-details-by-id?id=${id}`
// );
const response: Iresponse = await [Link](
`${GET_DRIVER_DETAILS_BY_ID}?id=${id}`
);

if (!isEmpty(response)) {
const { data } = [Link];

setDriverDetails({
firstName: data?.firstName,
lastName: data?.lastName,
phone: data?.phone,
city: data?.city,
status: data?.status,
email: data?.email,
driverId: data?._id || data?.id,
entityId: data?.entityId,
});
}
} catch (err: any) {

} finally {
[Link]({
isLoading: false,
});
}
}

async function handleSubmit(event: [Link]) {

[Link]();
try {
[Link]({
isLoading: true,
message: "Updating Driver Details...",
});
const requestBody = {
...driverDetails,
};
// const res: Iresponse = await [Link](
// `/api/edit-driver`,
// requestBody,
// { params: { entityId } }
// );
const res: Iresponse = await [Link](EDIT_DRIVER,
requestBody, {
 params: { entityId },
});

if (isEmpty(res)) {
apiCall();
}
if ([Link] === 200) {
ShowSnackbarSuccess("Driver details Updated
Successfully", myContext);
navigate(-1);
} else {
ShowSnackbarFailure(res, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);

} finally {
[Link]({
isLoading: false,
});
}
}

[Link](() => {
apiCall();
}, []);

const cardStyle = {
padding: "24px",
margin: "auto",
width: "100%",
boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
};

const titleStyle = {
fontSize: "28px",
fontWeight: "bold",
marginBottom: "25px",
};

const formControlStyle = {
width: "100%",
marginBottom: "16px",
};

const buttonStyle = {
marginTop: "25px",
};

return (
<Container>
<Paper component={Card} variant="outlined" sx={cardStyle}>
<Typography variant="h5" sx={titleStyle}>
issue Details
</Typography>
<Divider />
<form onSubmit={handleSubmit}>
<Grid container spacing={4}>
<Grid item xs={12} sm={6}>
<TextField
label="Issue Number"
variant="outlined"
fullWidth
 value={driverDetails?.firstName
|| ""}
onChange={(e) =>
setDriverDetails({
...driverDetails,
firstName:
[Link],
})
}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
label="description"
variant="outlined"
fullWidth
value={driverDetails?.email ||
""}
onChange={(e) =>

setDriverDetails({ ...driverDetails, email: [Link] })

}
/>
</Grid>
</Grid>
<Button
type="submit"
variant="contained"
color="primary"
sx={buttonStyle}
>
Submit
</Button>
</form>
</Paper>
</Container>
);
};

export default DriverDetails;

65] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
Issue\[Link]
import { FC, useState, useEffect } from "react";
import { Tabs, Box, Tab } from "@mui/material";
import { useNavigate, useSearchParams } from "react-router-dom";
import IssueList from "./issueList";

const entityByIdApiPath: string = "api/get-entity-details-by-id";

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

interface SubscriberDetailsProps {
name: string;
}

const SubscriberDetails: FC<SubscriberDetailsProps> = ({ name }) => {

const [queryParameters] = useSearchParams();
const entityId = [Link]("id");
 const navigate = useNavigate();
const [subscriberDetails, setSubscriberDetails] = useState<any>({
id: "64914e84e833e424558d20b5",
name: "Auto",
});

const [tabeValue, setTabeValue] = useState<string>("passengerIssue");

// async function getSubscribersById() {
// try {
// const { data: response }: Iresponse = await [Link](
// entityByIdApiPath,
// {
// params: { id: entityId },
// }
// );

// if (!isEmpty(response)) {
// const { data } = response;

// setSubscriberDetails({
// id: data?.id || data?._id,
// name: data?.name,
// type: data?.type,
// });
// }
// } catch (err: any) {
//
// }
// }

useEffect(() => {
// getSubscribersById();
}, []);

const styles = {
extendedTab: {
minWidth: "500px",
},
};

return (
<div>
{/* <Card>
<CardHeader title="Subscriber details" style={{ textAlign: "start" }} />
<CardContent style={{ textAlign: "start" }}>
{subscriberDetails?.name}
</CardContent>
</Card> */}
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Tabs
value={tabeValue}
onChange={(e, newValue) => {

setTabeValue(newValue);
}}
>
<Tab
label="Passenger Issue"
value="passengerIssue"
sx={[Link]}
/>
{/* <Tab label="Driver Issue" value="driverIssue"
sx={[Link]} /> */}
</Tabs>
 </Box>
{/* {tabeValue === "passengerIssue" ? <IssueList /> :
<IssueList />} */}
<IssueList />
</div>
);
};

export default SubscriberDetails;

66] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
UnassignedRides\[Link]
import { Card, Grid, Paper } from "@mui/material";
import * as React from "react";
import _, { isEmpty } from "lodash";
import { useNavigate } from "react-router-dom";
import EnhancedTable from "../../CommonComponents/EnhancedTable";
import { formatDate, formatDateTime } from "../../../CustomUtils/DateTimeUtils";
import { MobilityButtonIconView } from
"../../CommonComponents/MobilityButtonIcon";
import { AppContext } from "../../Context/AppContext";
import { ShowSnackbarFailure } from "../../CommonComponents/MobilitySnackBar";
import { apiHandler } from "../../ApiServices/ApiHandler";
import { TRACK_PENDING_RIDES } from "../../ApiServices/ApiConstants";
import MobilityDatePicker from "../../CommonComponents/MobilityDatePicker";
import dayjs, { Dayjs } from "dayjs";
import {
DateValidationError,
PickerChangeHandlerContext,
} from "@mui/x-date-pickers";
import MobilityButton from "../../CommonComponents/MobilityButton";
import { MobilityChip } from "../../CommonComponents/MobilityChip";
import moment from "moment";

const pendingRideDetailsPath: string = "/pending-ride-details";

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

interface driverState {
id: string;
firstName: string;
phone: string;
city: string;
status: string;
documents: string;
actions: any;
driverName: any;
passengerName: any;
estimatedCost: any;
estimatedTime: any;
source: any;
destination: any;
dateAndTime: any;
}

const PendingRidesList: [Link] = (): [Link] => {

const navigate = useNavigate();
let myContext = [Link](AppContext);
const tableRef = [Link]<any>();
const [pendingRides, setPendingRides] = [Link]<driverState[]>([]);
 const [open, setOpen] = [Link](false);
const [isLoading, setIsLoading] = [Link](false);
const [searchText, setSearchText] = [Link]<string>("");
const [filteredPendingRides, setFilteredPendingRides] = [Link]<
driverState[]
>([]);
// const [startDate, setStartDate] = [Link]<string | undefined>(
// new Date().toString()
// );
// const [endDate, setEndDate] = [Link]<string | undefined>();
const [startDate, setStartDate] = [Link]<Dayjs | null>(
myContext?.unassignedRidesFilter?.startDate
? dayjs(myContext?.unassignedRidesFilter?.startDate)
: dayjs(new Date())
);
const [endDate, setEndDate] = [Link]<Dayjs | null>(
myContext?.unassignedRidesFilter?.endDate
? dayjs(myContext?.unassignedRidesFilter?.endDate)
: dayjs(new Date())
);
const [rowsPerPage, setRowsPerPage] = [Link]<number>(25);
const [count, setCount] = [Link]<number>(0);
const [page, setPage] = [Link]<number>(0);

[Link](() => {
if (page || rowsPerPage) {
getPendingRidesList();
}
}, [page, rowsPerPage]);

async function getPendingRidesList() {

try {
[Link]({
isLoading: true,
message: "Tracking pending ride...",
});

[Link]({ startDate, endDate });

const payload = {
rowsPerPage,
pageNo: page,
searchBy: "date",
startDate: startDate?.format("DD/MM/YYYY"),
endDate: endDate?.format("DD/MM/YYYY"),
};

const response: Iresponse = await

[Link](TRACK_PENDING_RIDES, {
params: payload,
});

if (!isEmpty(response)) {
const data = response?.data?.data?.result;

//[Link]("125", data);
const _data = data?.map((ride: any) => {
return {
id: ride?.id,
driverName: ride?.driverName,
passengerName: ride?.customreName,
source: ride?.source,
destination: ride?.destination,
estimatedCost: ride?.cost,
estimatedTime: ride?.eta,
 //dateAndTime:
formatDateTime(ride?.dateAndTime, true),
dateAndTime: new
Date(ride?.dateAndTime).getTime(),
transactionStepName: (
<MobilityChip
label={ride?.transactionStepName?.status || ""} />
),
status: <MobilityChip label={ride?.status ||
""} />,
viewDetails: (
<MobilityButtonIconView
tooltipTitle="View Ride Details"
onClick={(e) => {
[Link]();
navigate(`$
{pendingRideDetailsPath}?id=${ride?.id}`);
}}
/>
),
};
});
setPendingRides(_data);
setFilteredPendingRides(_data);
setCount(response?.data?.data?.totalCount);
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}

const EnhancedTableConfig = {
headers: [
{
id: "driverName",
numeric: false,
disablePadding: true,
label: "Driver Name",
disableSort: false,
},
{
id: "passengerName",
numeric: false,
disablePadding: true,
label: "Passenger Name",
disableSort: false,
},
{
id: "source",
numeric: false,
disablePadding: true,
label: "Source",
disableSort: true,
},
{
id: "destination",
numeric: false,
disablePadding: true,
 label: "Destination",
disableSort: true,
},
{
id: "status",
numeric: false,
disablePadding: true,
label: "Ride Status",
disableSort: true,
},
{
id: "transactionStepName",
numeric: false,
disablePadding: true,
label: "Transaction Step",
disableSort: true,
},
// {
// id: "estimatedCost",
// numeric: true,
// disablePadding: true,
// label: "Estimated Fare",
// disableSort: true,
// },
// {
// id: "estimatedTime",
// numeric: true,
// disablePadding: true,
// label: "Estimated Time (mins)",
// disableSort: true,
// },
{
id: "dateAndTime",
numeric: false,
disablePadding: true,
label: "Date Time",
disableSort: false,
},
// {
// id: "viewDetails",
// numeric: true,
// disablePadding: true,
// label: "View Details",
// disableSort: true,
// },
],
};

const refreshPage = async (pagination: any) => {

if ([Link]) {
setRowsPerPage([Link]);
}
if (pagination?.page?.toString().length > 0) {
setPage([Link]);
}
};

return (
<Grid style={{ padding: 5 }}>
<Paper component={Card} variant="outlined">
{/* <Grid
container
sx={{
justifyContent: "end",
 padding: 1,
backgroundColor: "white",
}}
>
<MobilityTextField
label="Search..."
type="text"
name="search"
value={searchText}
fullWidth={false}
maxLength={50}
onChange={(event:
[Link]<HTMLInputElement>) => {
handleInputChange(event);
}}
/>
</Grid> */}

<Grid
container
sx={{
paddingLeft: 2,
paddingTop: 2,
backgroundColor: "white",
}}
>
<Grid container spacing={2} alignItems="center">
<Grid item>
<MobilityDatePicker
label="Start Date"
value={startDate}
onChange={(
value: Dayjs | null,
context:
PickerChangeHandlerContext<DateValidationError>
) => {
setStartDate(value);
}}
/>
</Grid>
<Grid item>
<MobilityDatePicker
label="End Date"
value={endDate}
onChange={(
value: Dayjs | null,
context:
PickerChangeHandlerContext<DateValidationError>
) => {
setEndDate(value);
}}
/>
</Grid>
<Grid item>
<MobilityButton
label="Search"
onClick={(
event:
[Link]<HTMLButtonElement, MouseEvent>
) => {
if
(startDate?.isAfter(endDate, "dates")) {
ShowSnackbarFailure(
"Start Date
should be same or before End Date",
myContext
);
} else {

getPendingRidesList();
}
}}
/>
</Grid>
</Grid>
</Grid>

<Grid padding={2}>
<EnhancedTable
ref={tableRef}
headers={[Link]}
tableData={filteredPendingRides}
count={count}
refreshPage={refreshPage}
></EnhancedTable>
</Grid>
</Paper>
</Grid>
);
};

export default PendingRidesList;

67] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
Vehicle\[Link]
import React, { FC, ReactElement } from "react";
import {
Card,
Grid,
Typography,
Divider,
Paper,
Tabs,
Tab,
} from "@mui/material";
import { useSearchParams, useNavigate } from "react-router-dom";
import { isEmpty } from "lodash";
import MobilityTextField from "../../CommonComponents/MobilityTextField";
import MobilitySelect from "../../CommonComponents/MobilitySelect";
import { CancelOutlined, Margin, TaskAlt } from "@mui/icons-material";
import { AppContext } from "../../Context/AppContext";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../../CommonComponents/MobilitySnackBar";
import MobilityButton from "../../CommonComponents/MobilityButton";
import { MobilityAppBar } from "../../CommonComponents/MobilityAppBar";
import MobilityAccordion from "../../CommonComponents/MobilityAccordion";
import { MobilityChip } from "../../CommonComponents/MobilityChip";
import { MobilityImgHeading } from
"../../CommonComponents/MobilityHeadingValue";
import { apiHandler } from "../../ApiServices/ApiHandler";
import {
CHANGE_DOCUMENT_STATUS,
EDIT_VEHICLE_DETAILS,
GET_DRIVER_DOCUMENT,
GET_VEHICLES_DETAILS_BY_ID,
GET_VEHICLE_DOCUMENT,
 UPDATE_VEHICLE_DOCUMENTS_BY_ID,
} from "../../ApiServices/ApiConstants";
import moment from "moment";

const VehicleDetails: FC = (): ReactElement => {

const navigate = useNavigate();
let myContext = [Link](AppContext);

const [queryParameters] = useSearchParams();

const id = [Link]("id");
const entityId = [Link]("entityId");
let isEdit = [Link]("isEdit");

//
//
let selectedTab = [Link]("selectedTab");
let vehicleTab = [Link]("vehicleTab");
let pageFrom = [Link]("pageFrom");
//[Link]("47", selectedTab + " " + vehicleTab + " ", pageFrom);

const [tabValue, setTabValue] = [Link]<string>(selectedTab!);

const statusOptions = ["Active", "InActive", "Pending"];

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

const [vehicleDetails, setVehicleDetails] = [Link]<any>({});

async function apiCall() {

try {
[Link]({
isLoading: true,
message: "Getting Vehicle Details...",
});

// const response: Iresponse = await [Link](

// `/api/get-vehicles-details-by-id?id=${id}`
// );

const response: Iresponse = await [Link](

`${GET_VEHICLES_DETAILS_BY_ID}?id=${id}`
);
if (!isEmpty(response)) {
const { data } = [Link];
setVehicleDetails({
driverId: [Link] || "",
registrationNumber: [Link] || "",
model: [Link] || "",
name: [Link] || "",
type: [Link] || "",
//make: [Link] || "",
vehicleId: data._id || [Link] || "",
entityId: [Link] || "",
rejectReason: data?.rejectReason || "",
year: [Link] || "",
//engineNumber: [Link] || "",
status: [Link] || "",
documents: [Link],
ownerType: [Link],
rcOwnerName: [Link]?.find((item: any) => {
 if (item?.docType === "RC") return item;
})?.rcOwnerName,
});
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}
const validateData = () => {
try {
if (!vehicleDetails?.name || vehicleDetails?.name?.length ==
0) {
ShowSnackbarFailure("Please Enter Vehicle Company Name",
myContext);
return false;
}
// if (!vehicleDetails?.type || vehicleDetails?.type?.length
== 0) {
// ShowSnackbarFailure("Please Enter Vehicle Type",
myContext);
// return false;
// }
if (!vehicleDetails?.model || vehicleDetails?.model?.length ==
0) {
ShowSnackbarFailure("Please Enter vehicle model",
myContext);
return false;
}
// if (!vehicleDetails?.make || vehicleDetails?.make?.length
== 0) {
// ShowSnackbarFailure("Please Enter Vehicle Make",
myContext);
// return false;
// }
if (
!vehicleDetails?.registrationNumber ||
vehicleDetails?.registrationNumber?.length == 0
) {
ShowSnackbarFailure("Please Enter Registration Number",
myContext);
return false;
}
if (!vehicleDetails?.year || vehicleDetails?.year?.length ==
0) {
ShowSnackbarFailure("Please Enter Year", myContext);
return false;
}
// if (
// !vehicleDetails?.engineNumber ||
// vehicleDetails?.engineNumber?.length == 0
// ) {
// ShowSnackbarFailure("Please Enter Engine Number",
myContext);
// return false;
// }

return true;
} catch (error) {}
 };

async function handleSubmit(event: [Link]) {

[Link]();
if (validateData()) {
try {
[Link]({
isLoading: true,
message: "Updating Vehicle Details...",
});
const requestBody = {
//...vehicleDetails,
isEdit: true,
driverId: [Link],
vehicleId: [Link],
name: [Link],
model: [Link],
year: [Link],
status: [Link],
registrationNumber:
[Link],
...([Link] === "InActive" && {
rejectReason: [Link],
}),
};

// const res: Iresponse = await [Link](

// `/api/edit-vehicle-details`,
// requestBody,
// { params: { entityId } }
// );
const res: Iresponse = await [Link](
EDIT_VEHICLE_DETAILS,
requestBody
//{ params: { entityId } }
);
if (isEmpty(res)) {
apiCall();
}
if ([Link] === 200) {
ShowSnackbarSuccess(
"Vehicle details Updated Successfully",
myContext
);

apiCall();
// navigate(-1);
} else {
ShowSnackbarFailure(res, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}
}

[Link](() => {
apiCall();
}, []);
const cardStyle = {
margin: "auto",
width: "100%",
boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
marginTop: "10px",
};

const titleStyle = {
fontSize: "28px",
fontWeight: "bold",
marginBottom: "25px",
};
const styles = {
extendedTab: {
textTransform: "none",
fontSize: 16,
fontWeight: 400,
},
};

function detailsData() {
return (
<>
<Grid container spacing={4} sx={{ padding: 3 }}>
<Grid item xs={12} sm={6}>
<MobilityTextField
//disabled={isEdit ? true : false}
disabled={true}
label="Vehicle Company Name"
type="text"
name="vehicleCompanyName"
value={[Link] || ""}
onChange={(e) =>
setVehicleDetails({
...vehicleDetails,
name: [Link],
})
}
/>
</Grid>

<Grid item xs={12} sm={6}>

<MobilityTextField
//disabled={isEdit ? true : false}
disabled={true}
label="Vehicle Model"
name="vehicleModel"
type="text"
value={[Link] || ""}
onChange={(e) =>
setVehicleDetails({
...vehicleDetails,
model: [Link],
})
}
/>
</Grid>
{/* <Grid item xs={12} sm={6}>
<MobilityTextField
disabled={isEdit ? true : false}
label="Vehicle Make"
name="vehicleMake"
type="text"
value={[Link] || ""}
 onChange={(e) =>
setVehicleDetails({
...vehicleDetails,
make: [Link],
})
}
/>
</Grid> */}
<Grid item xs={12} sm={6}>
<MobilityTextField
//disabled={isEdit ? true : false}
disabled={true}
label="Year"
name="vehicleYear"
type="text"
value={[Link] || ""}
onChange={(e) =>
setVehicleDetails({
...vehicleDetails,
year: [Link],
})
}
/>
</Grid>
<Grid item xs={12} sm={6}>
<MobilityTextField
//disabled={isEdit ? true : false}
disabled={true}
label="Registration Number"
name="vehicleRegistrationNumber"
type="text"

value={[Link] || ""}
onChange={(e) =>
setVehicleDetails({
...vehicleDetails,
registrationNumber:
[Link],
})
}
/>
</Grid>

{/* <Grid item xs={12} sm={6}>

<MobilityTextField
disabled={isEdit ? true : false}
label="Engine Number"
name="alphaNumeric"
type="text"
value={[Link] ||
""}
onChange={(e) =>
setVehicleDetails({
...vehicleDetails,
engineNumber:
[Link],
})
}
/>
</Grid> */}
<Grid item xs={12} sm={6}>
<MobilitySelect
disabled={isEdit ? true : false}
label="Status"
 value={[Link] || ""}
onChange={(e) =>
setVehicleDetails({
...vehicleDetails,
status: [Link] as
string,
})
}
statusOptions={statusOptions}
/>
</Grid>

<Grid item xs={12} sm={6}>

<MobilityTextField
disabled={true}
label="Vehicle Type"
name="vehicleType"
type="text"
value={[Link] || ""}
onChange={(e) =>
setVehicleDetails({
...vehicleDetails,
type: [Link],
})
}
/>
</Grid>

<Grid item xs={12} sm={6}>

<MobilityTextField
disabled={true}
label="Owner Type"
name="ownerType"
type="text"
value={[Link] || ""}
onChange={
(e) => {}
// setVehicleDetails({
// ...vehicleDetails,
// registrationNumber:
[Link],
// })
}
/>
</Grid>
{vehicleDetails?.status === "InActive" && (
<Grid item xs={12} sm={6}>
<MobilityTextField
label="Rejected Reason"
name="rejectedReason"
type="text"

value={vehicleDetails?.rejectReason || ""}
onChange={(e) => {
setVehicleDetails({
...vehicleDetails,
rejectReason:
[Link],
});
}}
/>
</Grid>
)}
 {!isEdit && (
<Grid container sx={{ marginTop: 2,
justifyContent: "flex-end" }}>
<MobilityButton label="Submit"
onClick={handleSubmit} />
</Grid>
)}
</Grid>
</>
);
}

async function saveDocumentData(

event: any,
{ docId, docType, expiryDate, docNumber }: any
) {
[Link]("411", docId, docType, docNumber);
if (validateData()) {
try {
[Link]({
isLoading: true,
message: "Updating Vehicle Details...",
});
const requestBody = {
driverId: [Link],
vehicleId: [Link],
docId,
docType,
docNumber,
//expiryDate,
};

[Link]("215", requestBody);
const res: Iresponse = await [Link](
UPDATE_VEHICLE_DOCUMENTS_BY_ID,
requestBody
);
if (isEmpty(res)) {
apiCall();
}
if ([Link] === 200) {
ShowSnackbarSuccess("Driver details Updated
Successfully", myContext);
apiCall();
//navigate("/driver", { state: driverTab });
} else {
ShowSnackbarFailure(res, myContext);
[Link]("error.", res);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}
}

function documentsData() {
return (
<>
<Grid container item xs={12} md={12} spacing={1}
padding={2}>
 {vehicleDetails?.documents?.map((item: any, index:
any) => {
if (
[Link]?.toString() ===
"AutoFront" ||
//[Link]?.toString() ===
"AutoBack" ||
[Link]?.toString() === "RC"
) {
return (
<Grid item xs={12} md={6}
key={index}>
<MobilityAccordion
key={index}
isExpanded={false}

title={getTitle(item)}

summary={getSummary(item, index)}
details={
<>

<MobilityImgHeading

heading={item}

value=""

//imgUrl={[Link]}

imgUrl={`${GET_VEHICLE_DOCUMENT}?driverId=$
{vehicleDetails?.driverId}&vehicleId=${vehicleDetails?.vehicleId}&docId=$
{[Link]}`}

onDataSave={saveDocumentData}
/>
</>
}
/>
</Grid>
);
}
})}
</Grid>
</>
);
}

const handleApprove = async (

status: any,
docId: any,
parentId: any,
rejectedReason?: string
) => {
try {
[Link]({
isLoading: true,
message: "Updated document status...",
});
const payload = {
status,
docId,
parentId,
};
 // setIsLoading(true);
if (status === "Rejected" && rejectedReason) {
[Link](payload, { rejectedReason:
rejectedReason });
}

const response: Iresponse = await [Link](

CHANGE_DOCUMENT_STATUS,
payload
);

if ([Link] === 200) {

ShowSnackbarSuccess("Status changed succesfully",
myContext);

const updatedDocuments =
response?.data?.data?.updatedEntity?.documents;
[Link]((selectedDoc: any) => ({
...selectedDoc,
parentId: parentId,
}));

setVehicleDetails({ ...vehicleDetails, documents:

updatedDocuments });
await apiCall();
//setDocList(updatedDocuments);
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
};

function getTitle(item: any) {

let docTitle = [Link];
switch ([Link]()) {
case "rc":
docTitle = "Registration Certificate (RC)";
break;
case "vi":
docTitle = "Vehicle Insurance";
break;
case "puc":
docTitle = "PUC (Pollution Under Control) Certificate";
break;
case "fc":
docTitle = "Fitness Certificate";
break;
}
let statusColor = "info";
switch ([Link]().toLowerCase()) {
case "approved":
statusColor = "green";
break;
case "rejected":
statusColor = "red";
break;
case "pending":
statusColor = "orange";
 break;
case "expired":
statusColor = "blue";
break;
}
return (
<Grid>
<Grid>
<Typography color="primary" sx={{ fontSize: 16 }}>
{docTitle}
</Typography>
<Typography color={statusColor} sx={{ fontSize: 14
}}>
{[Link]}
</Typography>
</Grid>
</Grid>
);
}

function getSummary(item: any, index: any) {

let summary: any = [];
var dialogProp: any;
var isExpired: boolean = false;
if (item?.expiryDate) {
const currentDate = new Date().setHours(0, 0, 0, 0);
const expDate = new Date(item?.expiryDate).setHours(0, 0, 0,
0);
isExpired = expDate < currentDate;
dialogProp = {
showButton: false,
open: true,
title: "Alert",
message: "This document is expired. You can not approve
this document.",
};
}

switch ([Link]()) {
case "pending":
case "expired":
if (!isExpired) {
dialogProp = {
open: true,
title: "Confirmation",
message: "Are you sure you want to
proceed?",
onYesClick: () => {
handleApprove("Approved", item?.docId,
[Link]);
//navigate(-1);
},
};
}

[Link](
<>
<MobilityChip
key={index}
label="Approve Document"
disabled={isEdit ? true : false}
clickable={isEdit ? false : true}
icon={<TaskAlt />}
onClick={(event) => {
 [Link]({ ...dialogProp });
}}
/>
<Divider sx={{ width: 10 }} />
<MobilityChip
key={index}
label="Reject Document"
disabled={isEdit ? true : false}
clickable={isEdit ? false : true}
icon={<CancelOutlined />}
onClick={(event) => {
[Link]({
action: "Rejected",
open: true,
title: "Confirmation",
message: "Are you sure you
want to proceed?",
onYesClick: (event: any,
param: string | undefined) => {
handleApprove(
"Rejected",
item?.docId,

[Link],
param
);
},
});
}}
/>
<Divider sx={{ width: 10 }} />
</>
);
break;
case "rejected":
if (!isExpired) {
dialogProp = {
open: true,
title: "Confirmation",
message: "Are you sure you want to
proceed?",
onYesClick: () => {
handleApprove("Approved", item?.docId,
[Link]);
//navigate(-1);
},
};
}
[Link](
<MobilityChip
key={index}
label="Approve Document"
color={"primary"}
disabled={isEdit ? true : false}
clickable={isEdit ? false : true}
icon={<TaskAlt />}
onClick={(event) => {
[Link]({
...dialogProp,
});
}}
/>
);
 break;
case "approved":
[Link](
<MobilityChip
key={index}
label="Reject Document"
disabled={isEdit ? true : false}
clickable={isEdit ? false : true}
icon={<CancelOutlined />}
onClick={(event) => {
[Link]({
action: "Rejected",
open: true,
title: "Confirmation",
message: "Are you sure you want
to proceed?",
onYesClick: (event: any, param:
string | undefined) => {
handleApprove(
"Rejected",
[Link],

[Link],
param
);
//navigate(-1);
},
});
}}
/>
);
break;
}
return summary;
}

function createDescription() {
return (
<Grid paddingLeft={1}>
{vehicleDetails?.rcOwnerName && (
<MobilityChip
label={"Owner Name : " +
vehicleDetails?.rcOwnerName}
size={"medium"}
/>
)}

{vehicleDetails?.ownerType && (
<MobilityChip
label={"Owner Type : " +
vehicleDetails?.ownerType}
size={"medium"}
/>
)}

{/* <MobilityChip
label={"Year : " + vehicleDetails?.year}
size={"medium"}
/> */}
<MobilityChip
label={"Reg. Number : " +
vehicleDetails?.registrationNumber}
size={"medium"}
/>
 </Grid>
);
//return description;
}

return (
<Grid style={{ padding: 5 }}>
<Grid item>
<MobilityAppBar
title="Vehicles Details ::"
description={createDescription()}
onBackClick={() => {
//[Link]("694", pageFrom + " " +
vehicleTab);
if (pageFrom && pageFrom === "vehicle") {
navigate("/vehicle", { state:
vehicleTab });
} else {
navigate(-1);
}
}}
/>
</Grid>

<Paper component={Card} variant="outlined" sx={cardStyle}>

<Grid sx={{ display: "flex", justifyContent: "space-
between" }}>
<Grid container>
<Grid item>
<Tabs
value={tabValue}
onChange={(e, newValue) => {
setTabValue(newValue);
}}
>
{/* <Tab label="Details"
value="details" sx={[Link]} /> */}

<Tab
label="Documents"
value="documents"
sx={[Link]}
/>
</Tabs>
</Grid>
</Grid>

<Grid
container
sx={{
alignItems: "end",
justifyContent: "end",
marginRight: 1,
}}
>
{tabValue === "documents" && (
<Grid container spacing={2}
padding={2}>
<Grid item xs={12} sm={4}>
<MobilitySelect
size={"small"}
disabled={isEdit ?
true : false}
label="Status"
 value={[Link] || ""}
onChange={(e) =>

setVehicleDetails({
...vehicl
eDetails,
status:
[Link] as string,
})
}

statusOptions={statusOptions}
/>
</Grid>
{vehicleDetails?.status ===
"InActive" && (
<Grid item xs={12} sm={6}>
<MobilityTextField
size={"small"}
label="Rejected
Reason"

name="rejectedReason"
type="text"

value={vehicleDetails?.rejectReason || ""}
onChange={(e)
=> {

setVehicleDetails({
...
vehicleDetails,

rejectReason: [Link],
});
}}
/>
</Grid>
)}
{!isEdit && (
<Grid item xs={12} sm={2}>
<MobilityButton
label="Submit" onClick={handleSubmit} />
</Grid>
)}
</Grid>
)}
</Grid>
</Grid>

{tabValue === "details" && detailsData()}

{tabValue === "documents" && documentsData()}

</Paper>
</Grid>
);
};

export default VehicleDetails;

68] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
Vehicle\[Link]
// import React, { useState } from "react";
// import { Card, Grid, Typography, CardContent, Link } from "@mui/material";
// import EnhancedTable from "../../CommonComponents/EnhancedTable";
// import {
// MobilityButtonIconApprove,
// MobilityButtonIconReject,
// } from "../../CommonComponents/MobilityButtonIcon";
// import { AppContext } from "../../Context/AppContext";
// import {
// ShowSnackbarFailure,
// ShowSnackbarSuccess,
// } from "../../CommonComponents/MobilitySnackBar";
// const vehicleDocumentTablePath: string = "/vehicleDocumentTable";

// interface DocumentTableProps {
// documents: {
// driverId?: any;
// docId?: any;
// docType?: any;
// docName?: any;
// docNumber?: any;
// path?: any;
// status?: any;
// _id?: any;
// }[];
// }

// interface Iresponse {
// headers?: any;
// data?: any;
// status?: number;
// message?: string;
// }

// function VehicleDocumentTable({ documents }: DocumentTableProps) {

// type DocObjectType = {
// driverId: any;
// docId: any;
// docType: any;
// docName: any;
// path: any;
// status: any;
// };

// const [open, setOpen] = useState(false);

// const [selectedDocument, setSelectedDocument] = useState<
// Array<DocObjectType>
// >([]);
// let myContext = [Link](AppContext);

// function DocumentList(documents: DocumentTableProps["documents"]) {

// return [Link]((doc: any, index: number) => ({
// srNo: index + 1,
// docName: doc?.docName,
// docType: doc?.docType,
// docUrl: (
// <Link
// component="button"
// onClick={(e) => {
// [Link]();
// downloadDocument(doc?.docId, doc?.docName);
// }}
// >
// {doc?.docName}
// </Link>
// ),
// status: doc?.status,

// actions:
// doc?.status === "Approved" ? (
// <MobilityButtonIconReject
// tooltipTitle="Reject"
// onClick={(event) => {
// handleApprove("Rejected", doc?.docId,
doc?.driverId);
// }}
// />
// ) : doc?.status === "Rejected" ? (
// <MobilityButtonIconApprove
// tooltipTitle="Approve"
// onClick={(event) => {
// handleApprove("Approved", doc?.docId,
doc?.driverId);
// }}
// />
// ) : (
// <>
// <MobilityButtonIconApprove
// tooltipTitle="Approve"
// onClick={(event) => {
// handleApprove("Approved",
doc?.docId, doc?.driverId);
// }}
// />
// <MobilityButtonIconReject
// tooltipTitle="Reject"
// onClick={(event) => {
// handleApprove("Rejected",
doc?.docId, doc?.driverId);
// }}
// />
// </>
// ),
// path: vehicleDocumentTablePath,
// }));
// }

// const closeDocumentDialog = () => {

// setOpen(false);
// };

// const handleClickOpen = (doc: any) => {

// setSelectedDocument(doc);
// setOpen(true);
// };

// const downloadDocument = async (documentId: string, docName: string) => {

// try {
// [Link]({
// isLoading: true,
// message: "Downloading documents...",
// });
// const response: Iresponse = await [Link](
// `/api/download-driver-document?documentId=$
{documentId}`,
// { responseType: "blob" }
// );
// if ([Link] === 200) {
// const { data } = response;
// const downloadUrl = [Link](new
Blob([data]));
// const link = [Link]("a");
// [Link] = downloadUrl;
// [Link]("download", docName);
// [Link](link);
// [Link]();
// [Link]();
// } else {
// ShowSnackbarFailure(response, myContext);
// }
// } catch (err: any) {
// ShowSnackbarFailure(err, myContext);
//
// } finally {
// [Link]({
// isLoading: false,
// });
// }
// };

// const handleApprove = async (status: any, docId: any, parentId: any) => {
// try {
// [Link]({
// isLoading: true,
// message: "Updating document status...",
// });
// const payload = {
// status,
// docId,
// parentId,
// };
// const response: Iresponse = await [Link](
// `/api/change-document-status`,
// payload
// );

// if ([Link] === 200) {

// ShowSnackbarSuccess("Updated document status",
myContext);
// } else {
// ShowSnackbarFailure(response, myContext);
// [Link]("Failed to approve ride.");
// }
// } catch (err: any) {
// ShowSnackbarFailure(err, myContext);
// [Link]("Error while approving ride:", err);
// } finally {
// [Link]({
// isLoading: false,
// });
// }
// };

// const EnhancedTableConfig = {
// headers: [
// { id: "srNo", label: "Sr. No" },
// { id: "docType", label: "Doc Type" },
// { id: "docUrl", label: "Doc URL" },
// { id: "status", label: "Status" },
// { id: "actions", label: "Actions" },
// ],
// };
// return (
// <Grid container spacing={2}>
// <Card>
// <CardContent>
// <Typography variant="h6" gutterBottom>
// Document List
// </Typography>
// <EnhancedTable
// headers={[Link]}
// tableData={DocumentList(documents)}
// />
// </CardContent>
// </Card>
// <Grid item xs={12}></Grid>
// </Grid>
// );
// }

// export default VehicleDocumentTable;

export {};

69] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
Vehicle\[Link]
import { Card, Paper, Tabs, Tab } from "@mui/material";
import { Grid } from "@mui/material";
import React, { FC, ReactElement, useEffect, useRef, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import EnhancedTable from "../../CommonComponents/EnhancedTable";
import { MobilityButtonIconView } from
"../../CommonComponents/MobilityButtonIcon";
import MobilityTextField from "../../CommonComponents/MobilityTextField";
import { AppContext } from "../../Context/AppContext";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../../CommonComponents/MobilitySnackBar";
import { MobilityChip } from "../../CommonComponents/MobilityChip";
import {
MobilityListItemDocuments,
MobilityListItemEdit,
} from "../../CommonComponents/MobilityListItem";
import LongMenu from "../../CommonComponents/MobilityActionMenu";
import MobilityEmptyMsg from "../../CommonComponents/MobilityEmptyMsg";
import { apiHandler } from "../../ApiServices/ApiHandler";
import {
CHANGE_VEHICLE_STATUS_BY_ADMIN,
GET_VEHICLE_LIST,
} from "../../ApiServices/ApiConstants";
import {
formatDateTime,
currentDatAndTime,
} from "../../../CustomUtils/DateTimeUtils";
import * as XLSX from "xlsx";
import _ from "lodash";
import MobilityButton from "../../CommonComponents/MobilityButton";

//const vehiclePath: string = "/api/get-vehicles-list";

const vehicleDetailsPath: string = "/vehicleDetails";
const vehicleDocumentTablePath: string = "/vehicleDocumentTable";

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

interface vehicleState {
_id: string;
name: any;
documents: any;
id: string;
VehicleName: string;
registrationNumber: string;
status: string;
statusFilter: string;
model: string;
docNew: string;
actionNew: any;
firstName: string;
lastName: string;
phone: string;
documentsUpdateDate: string;
modifiedDate: string;
}

const buttonStyle = {
backgroundColor: "#007bff",
color: "white",
padding: "8px 16px",
borderRadius: "4px",
border: "none",
cursor: "pointer",
fontSize: "10px",
fontWeight: "bold",
};

interface docState {
vehicleId?: string;
docId?: string;
docName?: string;
docNumber?: string;
docType?: string;
path?: string;
status?: string;
_id?: string;
}

//TODO: add vehicle status change for the admin

const VehicleList: FC = (): ReactElement => {
const navigate = useNavigate();
const location = useLocation();
let myContext = [Link](AppContext);
// const [VehicleList, setVehicleList] = useState<vehicleState[]>([]);
const [activeVehicles, setActiveVehicles] = [Link]<any[]>([]);
const [inActiveVehicles, setInActiveVehicles] = [Link]<any[]>([]);
const [pendingVehicles, setPendingVehicles] = [Link]<any[]>([]);
const [selectedDocument, setSelectedDocument] =
[Link]<docState[]>(
[]
);
const [open, setOpen] = [Link](false);
const [searchText, setSearchText] = [Link]<string>("");
const [tabValue, setTabValue] = [Link]<string>(
location?.state ? location?.state : "all"
);
const [vehicleList, setVehicleList] = useState<any[]>();
const [rowsPerPage, setRowsPerPage] = [Link]<number>(25);
const [count, setCount] = [Link]<number>(0);
 const [page, setPage] = [Link]<number>(0);
const tableRef = useRef<any>();
const [filteredVehicleList, setFilteredVehicleList] = useState<any[]>();

const openDocumentDialog = (doc: any, parentId: any) => {

setSelectedDocument(
[Link]((selectedDoc: any) => ({ ...selectedDoc, vehicleId:
parentId }))
);
setOpen(true);
};
const closeDocumentDialog = () => {
setOpen(false);
};

const changeVehicleStatus = async (

status: string,
vehicleid: string,
rowsPerPage: number,
page: number,
rejectedReason?: string
) => {
try {
[Link]({
isLoading: true,
message: "Updating Vehicle status...",
});
const payload = { id: vehicleid, status };
if (status === "InActive" && rejectedReason) {
[Link](payload, { rejectedReason:
rejectedReason });
}
const response = await [Link](
CHANGE_VEHICLE_STATUS_BY_ADMIN,
payload
);

if ([Link] === 200) {

ShowSnackbarSuccess(response, myContext);
// getVehicleList(page, 0);
await fetchData();
} else {
ShowSnackbarFailure(response, myContext);
// getVehicleList(page, rowsPerPage);
await fetchData();
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);

if (err?.message) {
}
} finally {
[Link]({
isLoading: false,
});
}
};

const approveAction = (vehicle: any) => {

[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you want to proceed?",
onYesClick: () => {
 changeVehicleStatus(
"Active", //"Approved"
[Link],
0,
1
// getVehicleList
);
},
});
};

const rejectAction = (vehicle: any) => {

[Link]({
action: "Rejected",
open: true,
title: "Confirmation",
message: "Are you sure you want to proceed?",
onYesClick: (event: any, param: string | undefined) => {
changeVehicleStatus(
"InActive", //"Rejected",
[Link],
0,
1,
param
// getVehicleList
);
},
});
};

const editAction = (vehicle: any) => {

navigate(
`${vehicleDetailsPath}?id=$
{vehicle._id}&selectedTab=details&vehicleTab=${tabValue}&pageFrom=vehicle`
);
};

const EnhancedTableConfig = {
headers: [
{
id: "driverName",
numeric: false,
disablePadding: true,
label: "Driver Name",
disableSort: false,
},
{
id: "driverPhone",
numeric: false,
disablePadding: true,
label: "Phone",
disableSort: false,
},
{
id: "VehicleName",
numeric: false,
disablePadding: true,
label: "Vehicle",
disableSort: false,
},
// {
// id: "model",
// numeric: false,
// disablePadding: true,
 // label: "Model",
// disableSort: true,
// },
{
id: "registrationNumber",
numeric: true,
disablePadding: true,
label: "Reg. No.",
disableSort: false,
},
{
id: "status",
numeric: false,
disablePadding: true,
label: "Status",
disableSort: true,
},

{
id: "modifiedDateTime",
numeric: false,
disablePadding: true,
label: "Modified DateTime",
disableSort: false,
},
{
id: "docNew",
numeric: true,
disablePadding: true,
label: "Documents",
disableSort: true,
},
{
id: "actionNew",
numeric: false,
disablePadding: true,
label: "Actions",
disableSort: true,
},
],
navigate: (item: any) => {
navigate(`${[Link]}?id=${[Link]}`);
},
};

const refreshPage = async (pagination: any) => {

//if ([Link]?.toString().length > 0) {
if ([Link]) {
setRowsPerPage([Link]);
}
if (pagination?.page?.toString().length > 0) {
setPage([Link]);
}
};

const fetchData = async (inputValue?: any, isDownload = false) => {

try {
[Link]({
isLoading: true,
message: "Getting Vehicle list...",
});
const payload = {
rowsPerPage: rowsPerPage,
pageNo: page,
 search: inputValue,
isDownload,
...(tabValue !== "all" && {
status: tabValue === "Reverification" ? "InActive"
: tabValue,
}),
...(tabValue === "Reverification" && {
resubmittedForVerification: true,
}),
};

const response: Iresponse = await

[Link](GET_VEHICLE_LIST, {
params: payload,
});

const { data } = response?.data;

if (isDownload) {
let requestes: any = [];
if (tabValue === "Active") {
requestes = await
prepareApprovedDataDownload(data?.vehiclesList);
} else if (tabValue === "InActive" || tabValue ===
"Reverification") {
requestes = await
prepareRejectedDataDownload(data?.vehiclesList);
} else if (tabValue === "Pending") {
requestes = await
preparePendingDataDownload(data?.vehiclesList);
}
[Link]("requestes", requestes);

if ([Link]) {
const dataCsv =
[Link].json_to_sheet(requestes);
const wb = [Link].book_new();
[Link].book_append_sheet(wb, dataCsv, "Sheet
1");
const time = currentDatAndTime();
[Link](wb, `Vehicles_${tabValue}_$
{time}.xlsx`);
}
} else {
getFilterVehicleList({ data: data?.vehiclesList, total:
data?.total });
}
// [Link]('response', data);
// setVehicleList([...[Link]]);
// setVehicleList([Link]);
// setCount(data?.total);
//[Link]("infetch data");
} catch (error) {
ShowSnackbarFailure(error, myContext);
} finally {
[Link]({
isLoading: false,
});
}
};
async function preparePendingDataDownload(data: any) {
let requests: any = [];
data?.forEach((record: any) => {
let row = {};
row = {
 "Driver Name":
record?.firstName && record?.lastName
? [Link](" ",
[Link])
: "",
"Vehicle Name": record?.name || "",
"Vehicle Registration Number":
record?.registrationNumber || "",
Phone: [Link],
};

if ([Link]) {
[Link]((doc: any) => {
if ([Link] === "RC") {
row = {
...row,
RC: [Link],
};
} else if ([Link] === "AutoFront") {
row = {
...row,
"AutoFront Photo": [Link],
};
}
// else if ([Link] === "AutoBack") {
// row = {
// ...row,
// "AutoBack Photo": [Link],
// };
// }
});
}
row = {
...row,
Status: [Link],
"Modified Date": formatDateTime([Link],
true, true),
};
[Link](row);
});
return requests;
}
async function prepareRejectedDataDownload(data: any) {
let requests: any = [];
data?.forEach((record: any) => {
let row = {};

row = {
"Driver Name":
record?.firstName && record?.lastName
? [Link](" ",
[Link])
: "",
"Vehicle Name": record?.name || "",
"Vehicle Registration Number":
record?.registrationNumber || "",
Phone: [Link],
};
if ([Link]) {
[Link]((doc: any) => {
if ([Link] === "RC") {
row = {
...row,
RC: [Link],
 };
} else if ([Link] === "AutoFront") {
row = {
...row,
"AutoFront Photo": [Link],
};
}
// else if ([Link] === "AutoBack") {
// row = {
// ...row,
// "AutoBack Photo": [Link],
// };
// }
});
}
row = {
...row,
Status: [Link],
"Rejected Reason": [Link],
"Modified Date": formatDateTime([Link],
true, true),
};
[Link](row);
});
return requests;
}
async function prepareApprovedDataDownload(data: any) {
let requests: any = [];
[Link]((record: any) => {
let row = {};
row = {
"Driver Name":
record?.firstName && record?.lastName
? [Link](" ",
[Link])
: "",
"Vehicle Name": record?.name || "",
"Vehicle Registration Number":
record?.registrationNumber || "",
Phone: [Link],
};

if ([Link]) {
[Link]((doc: any) => {
if ([Link] === "RC") {
row = {
...row,
RC: [Link],
};
} else if ([Link] === "AutoFront") {
row = {
...row,
"AutoFront Photo": [Link],
};
}
// else if ([Link] === "AutoBack") {
// row = {
// ...row,
// "AutoBack Photo": [Link],
// };
// }
});
}
row = {
 ...row,
Status: [Link],
"Modified Date": formatDateTime([Link],
true, true),
};
[Link](row);
});
return requests;
}

useEffect(() => {
if (page || rowsPerPage || tabValue) {
fetchData("");
}
}, [page, rowsPerPage, tabValue]);

function capitalize(str: string) {

return [Link](0).toUpperCase() + [Link](1);
}

async function getFilterVehicleList(obj: any) {

let updatedFilteredList: any[] = [Link]((vehicle: any) => {
let firstName = vehicle?.firstName
? vehicle?.firstName?.split(" ").map(capitalize).join("
")
: "";
let lastName = vehicle?.lastName
? vehicle?.lastName?.split(" ").map(capitalize).join("
")
: "";
return {
driverName: `${firstName} ${lastName}`,
driverPhone: vehicle?.phone,
VehicleName: vehicle?.name,
registrationNumber: vehicle?.registrationNumber,
status: <MobilityChip label={vehicle?.status} />,
statusFilter: vehicle?.status,
// modifiedDateTime: formatDateTime(
// vehicle?.documentsUpdateDate
// ? vehicle?.documentsUpdateDate
// : vehicle?.modifiedDate,
// true,
// true
// ),
modifiedDateTime: new Date(
vehicle?.documentsUpdateDate
? vehicle?.documentsUpdateDate
: vehicle?.modifiedDate
).getTime(),
docNew: (() => {
const docIcon = (
<MobilityButtonIconView
tooltipTitle="View Documents"
onClick={(e) => {
[Link]();
navigate(
`${vehicleDetailsPath}?id=$
{vehicle?._id}&selectedTab=documents&vehicleTab=${tabValue}&pageFrom=vehicle`
);
}}
/>
);

if (vehicle?.status !== "Deleted") {

 return docIcon;
}

return null;
})(),
actionNew: (() => {
const menuList: any = [];

if (vehicle?.status !== "Deleted") {

[Link](
<MobilityListItemEdit
label="Edit Vehicle"
onClick={(e) => {
[Link]();
editAction(vehicle);
}}
/>
);
}

if (vehicle?.status !== "Deleted") {

[Link](
<MobilityListItemDocuments
label="View Documents"
onClick={(e) => {
[Link]();
navigate(
`$
{vehicleDetailsPath}?id=${vehicle?.id} &selectedTab=documents&vehicleTab=$
{tabValue}&pageFrom=vehicle`
);
}}
/>
);
}
return <LongMenu items={menuList} />;
})(),

model: vehicle?.model,
// path: vehicleDetailsPath,
};
});
// [Link]('updatedFilteredList', updatedFilteredList);
// [Link]('updatedFilteredList', vehicleList);

// setVehicleList([...updatedFilteredList])
// setFilteredVehicleList([...updatedFilteredList])
// [Link]('after set filteredVehicleList',
filteredVehicleList);

setVehicleList(updatedFilteredList);
//[Link]("befire", updatedFilteredList);

setFilteredVehicleList(updatedFilteredList);
// [Link]("sete", filteredVehicleList);
//[Link]("sete", obj?.total);
setCount(obj?.total);
}

const handleInputChange = (event: [Link]<HTMLInputElement>) =>

{
const inputValue = [Link]();

setSearchText(inputValue);
 if ([Link] > 12 || [Link] === 0) {
fetchData(inputValue);
}

// if ([Link] > 0) {
// const filteredRows = vehicleList?.filter((row: any) => {
// return (
//
[Link]?.toLowerCase().includes([Link]()) ||
//
[Link]?.toLowerCase().includes([Link]()) ||
// [Link]
// ?.toString()
// ?.toLowerCase()
// .includes([Link]()) ||
//
[Link]?.toString().includes([Link]())
// );
// });

// setFilteredVehicleList(filteredRows);
// } else {
// setFilteredVehicleList(vehicleList);
// }

// const filteredActive = [Link]((row) => {

// return (
// [Link] === "Active" &&
// ([Link]?.toLowerCase().includes(inputValue) ||
// [Link]
// ?.toString()
// ?.toLowerCase()
// .includes(inputValue) ||
//
[Link]?.toString()?.toLowerCase().includes(inputValue))
// );
// });
// setActiveVehicles(filteredActive);

// const filteredInActive = [Link]((row) => {

// return (
// [Link] === "InActive" &&
// ([Link]?.toLowerCase().includes(inputValue) ||
// [Link]
// ?.toString()
// ?.toLowerCase()
// .includes(inputValue) ||
//
[Link]?.toString()?.toLowerCase().includes(inputValue))
// );
// });
// setInActiveVehicles(filteredInActive);

// const filteredPending = [Link]((row) => {

// return (
// [Link] === "Pending" &&
// ([Link]?.toLowerCase().includes(inputValue) ||
// [Link]
// ?.toString()
// ?.toLowerCase()
// .includes(inputValue) ||
//
[Link]?.toString()?.toLowerCase().includes(inputValue))
 // );
// });
// setPendingVehicles(filteredPending);
// } else {
// setFilteredVehicleList(VehicleList);

// const filteredActive = [Link]((row) => {

// return [Link] === "Active";
// });
// setActiveVehicles(filteredActive);

// const filteredInActive = [Link]((row) => {

// return [Link] === "InActive";
// });
// setInActiveVehicles(filteredInActive);

// const filteredPending = [Link]((row) => {

// return [Link] === "Pending";
// });
// setPendingVehicles(filteredPending);
// }
};

const styles = {
extendedTab: {
textTransform: "none",
fontSize: 16,
fontWeight: 400,
},
};
return (
<Grid style={{ padding: 5 }}>
<Paper component={Card} variant="outlined">
<Grid sx={{ display: "flex", justifyContent: "space-
between" }}>
<Grid container>
<Grid item>
<Tabs
value={tabValue}
onChange={(e, newValue) => {

tableRef?.current?.handleChangePage(null, 0);
setTabValue(newValue);
setSearchText("");
}}
>
<Tab label="All Vehicles"
value="all" sx={[Link]} />
<Tab label="Active"
value="Active" sx={[Link]} />
<Tab
label="InActive"
value="InActive"
sx={[Link]}
/>
<Tab label="Pending"
value="Pending" sx={[Link]} />
<Tab
label="Re-verification"
value="Reverification"
sx={[Link]}
/>
</Tabs>
</Grid>
 </Grid>

<Grid
container
sx={{
alignItems: "end",
justifyContent: "end",
marginRight: 1,
}}
>
{tabValue && tabValue !== "all" && (
<Grid marginRight={1}>
<MobilityButton
fullWidth={false}
label={"Download"}
onClick={(event:
[Link]<HTMLButtonElement>) => {
fetchData("", true);
}}
/>
</Grid>
)}
<MobilityTextField
label="Search Vehicle by Registration
number..."
type="text"
name="search"
value={searchText}
maxLength={50}
fullWidth={false}
onChange={(event:
[Link]<HTMLInputElement>) => {
handleInputChange(event);
}}
/>
</Grid>
</Grid>

<Grid padding={2}>
{filteredVehicleList && [Link]
> 0 ? (
<EnhancedTable
ref={tableRef}
headers={[Link]}
tableData={filteredVehicleList}
count={count}
refreshPage={refreshPage}
/>
) : (
<MobilityEmptyMsg message={"No Data
Found"} />
)}
</Grid>
</Paper>
</Grid>
);
};

export default VehicleList;

70] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
[Link]
import { FC, ReactElement } from "react";
import * as React from "react";
import { AppContext } from "../Context/AppContext";
import { apiHandler } from "../ApiServices/ApiHandler";
import { GET_DASHBOARD_DRIVERS_DETAILS } from "../ApiServices/ApiConstants";
import CardContent from "@mui/material/CardContent";
import {
Card,
Grid,
Paper,
Tab,
Tabs,
Typography,
colors,
} from "@mui/material";
import CardActions from "@mui/material/CardActions";
import Example from "../CommonComponents/MobilityPieChart";
import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
import { MobilityCard } from "../CommonComponents/MobilityCard";
import MobilityButton from "../CommonComponents/MobilityButton";
import { ShowSnackbarFailure } from "../CommonComponents/MobilitySnackBar";
import {
AppsSharp,
Cancel,
CheckCircle,
Flaky,
OfflineBolt,
Pending,
Search,
SearchOff,
ThumbUpAlt,
Timelapse,
} from "@mui/icons-material";
import MobilityBadge from "../CommonComponents/MobilityBadge";

const data = [
{ name: "Group A", value: 400 },
{ name: "Group B", value: 300 },
{ name: "Group C", value: 300 },
{ name: "Group D", value: 200 },
];

const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];

const RADIAN = [Link] / 180;

// const renderCustomizedLabel = (
// props: any
// //{
// // cx: any,
// // cy: any,
// // midAngle,
// // innerRadius,
// // outerRadius,
// // percent,
// // index,
// //}
// ) => {
// const radius =
// props?.innerRadius + (props?.outerRadius - props?.innerRadius) *
0.5;
// const x = props?.cx + radius * [Link](-props?.midAngle * RADIAN);
// const y = props?.cy + radius * [Link](-props?.midAngle * RADIAN);

// return (
// <text
// x={x}
// y={y}
// fill="white"
// textAnchor={x > props?.cx ? "start" : "end"}
// dominantBaseline="central"
// >
// {`${(props?.percent * 100).toFixed(0)}%`}
// </text>
// );
// };

// const Dashboard: FC = (): ReactElement => {

// return (
// <Grid>
// <h1>Dashbia new</h1>
// <Appd />
// </Grid>
// );

const Dashboard: FC = (): ReactElement => {

let myContext = [Link](AppContext);
const [allDetails, setAllDetails] = [Link]<any>("");
const [totalVehiclesCount, setTotalVehiclesCount] =
[Link]<any>([]);

[Link](() => {
fetchData();
}, []);

const fetchData = async () => {

try {
[Link]({
isLoading: true,
message: "Getting Driver list...",
});
const payload = { rowsPerPage: 0, pageNo: 1 };
const response = await [Link](
GET_DASHBOARD_DRIVERS_DETAILS,
payload
);
//[Link]("90", response);
if (response?.status === 200) {
let { data } = response?.data;

if (data?.totalVehiclesCount?.[0]) {
data?.totalVehiclesCount?.[0]?.status?.map((item:
any) => {
//[Link]("96", item);
switch ([Link]) {
case "Active":
data = { ...data, activeVehicles:
item?.total };
break;
case "InActive":
data = { ...data,
inActiveVehicles: item?.total };
break;
case "Pending":
data = { ...data,
pendingVehicles: item?.total };
break;
}
});
}
if (data?.totalDriversCount?.[0]) {
 data?.totalDriversCount?.[0]?.status?.map((item:
any) => {
//[Link]("96", item);
switch ([Link]) {
case "Approved":
data = { ...data,
approvedDrivers: item?.total };
break;
case "Rejected":
data = { ...data,
rejectedDrivers: item?.total };
break;
case "Pending":
data = { ...data, pendingDrivers:
item?.total };
break;
}
});
}

setAllDetails(data);
}
} catch (error: any) {
ShowSnackbarFailure(error, myContext);
} finally {
[Link]({
isLoading: false,
});
}
};
const commonCardProps = {
gridstyle: {
size: 2,
margin: 1,
},
titleStyle: {
fontSize: 15,
color: "black",
fontWeight: 400,
},
descriptionStyle: {
fontSize: 15,
color: "black",
fontWeight: 500,
},
};
return (
<div>
<Grid style={{ padding: 5 }}>
<Paper component={Card} variant="outlined"
sx={{ padding: 2 }}>
<Grid
item
sx={{
display: "flex",
justifyContent: "space-between",
//padding: 1,
}}
>
<Grid container>
<Typography
fontSize={20}
color={"black"}
fontWeight={600}
 //sx={{ margin: 1 }}
>
Driver App Dashboard
</Typography>
</Grid>

<Grid
container
sx={{
alignItems: "end",
justifyContent: "end",
}}
>
<Grid marginRight={1}>
<MobilityBadge
title="Online Drivers"

badgeContent={[Link]}
color="success"
icon={
<img
src={require("../../assets/[Link]")} height="35px" />
}
></MobilityBadge>
<MobilityButton
fullWidth={false}
label={"Refresh Data"}
onClick={(event:
[Link]<HTMLButtonElement>) => {
fetchData();
}}
/>
</Grid>
</Grid>
</Grid>

<Grid
item
sx={{
display: "flex",
justifyContent: "space-between",
//padding: 1,
}}
>
<Grid container>
<Typography
fontSize={16}
color={"black"}
fontWeight={500}
sx={{ margin: 1 }}
>
Drivers Data
</Typography>
{/* <MobilityBadge
title="Online Drivers"

badgeContent={[Link]}
color="success"
icon={
<img
src={require("../../assets/[Link]")} height="30px" />
}
></MobilityBadge> */}
</Grid>
 </Grid>
<Grid container>
<MobilityCard
title={`Updated App ($
{allDetails?.appUpdateCount?.version})`}

description={allDetails?.appUpdateCount?.count}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
icon={
<img
src={require("../../assets/[Link]")} height="25px" />
}
backgroundColor={"#ECEFF1"}
></MobilityCard>

<MobilityCard
title="Current Online "

description={[Link]}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
icon={
<img
src={require("../../assets/[Link]")} height="25px" />
}
backgroundColor={"#ECEFF1"}
></MobilityCard>
<MobilityCard
title="Approved"

description={allDetails?.approvedDrivers}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
icon={<CheckCircle color="success" />}
backgroundColor={"#E8F5E9"}
></MobilityCard>
<MobilityCard
title="Rejected"

description={allDetails?.rejectedDrivers}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
icon={<Cancel color="error" />}
backgroundColor={"#FFEBEE"}
></MobilityCard>
<MobilityCard
title="Pending"

description={allDetails?.pendingDrivers}

titleStyle={[Link]}
 descriptionStyle={[Link]}
gridstyle={[Link]}
icon={<Pending color="warning" />}
backgroundColor={"#FFF3E0"}
></MobilityCard>
<MobilityCard
title="Total Drivers"

description={allDetails?.totalDriversCount?.[0]?.total}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
icon={<Flaky color="info" />}
backgroundColor={"#E1F5FE"}
></MobilityCard>

<MobilityCard
title="Approved Drivers with Active
Vehicles"
description={

allDetails?.approvedDriversActiveVehiclesCount?.[0]?.count
}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={{ margin: 1, size: 4 }}
icon={<ThumbUpAlt color="success" />}
backgroundColor={"#E1F5FE"}
></MobilityCard>
</Grid>

<Typography
fontSize={16}
color={"black"}
fontWeight={500}
sx={{ paddingInline: 1, marginTop: 2 }}
>
Vehicles Data
</Typography>
<Grid container>
{/* {allDetails?.totalVehiclesCount?.[0] &&
allDetails?.totalVehiclesCount?.
[0]?.status?.map(
(status: any) => {
return (
<MobilityCard

title={status?.status}

description={status?.total}

titleStyle={[Link]}

descriptionStyle={[Link]}

gridstyle={[Link]}
></MobilityCard>
);
}
 )} */}

<MobilityCard
title={"Active"}

description={[Link]}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
icon={<CheckCircle color="success" />}
backgroundColor={"#E8F5E9"}
></MobilityCard>

<MobilityCard
title={"InActive"}

description={[Link]}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
icon={<Cancel color="error" />}
backgroundColor={"#FFEBEE"}
></MobilityCard>

<MobilityCard
title={"Pending"}
description={
allDetails?.pendingVehicles ?
allDetails?.pendingVehicles : "0"
}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
icon={<Pending color="warning" />}
backgroundColor={"#FFF3E0"}
></MobilityCard>

<MobilityCard
title="Total Vehicles"

description={allDetails?.totalVehiclesCount?.[0]?.total}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
icon={<Flaky color="info" />}
backgroundColor={"#E1F5FE"}
></MobilityCard>
</Grid>

<Typography
fontSize={16}
color={"black"}
fontWeight={500}
sx={{ paddingInline: 1, marginTop: 2 }}
>
Today's Rides Data
 </Typography>
<Grid container>
<MobilityCard
title="On Going "

description={[Link]}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
icon={
<img
src={require("../../assets/[Link]")} height="25px" />
}
backgroundColor={"#ECEFF1"}
></MobilityCard>
<MobilityCard
title="Completed "

description={[Link]}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
icon={<CheckCircle color="success" />}
backgroundColor={"#E8F5E9"}
></MobilityCard>
<MobilityCard
title="Cancelled "

description={[Link]}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
icon={<Cancel color="error" />}
backgroundColor={"#FFEBEE"}
></MobilityCard>
<MobilityCard
title="UnAssigned/Pending"

description={[Link]}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
icon={<Pending color="warning" />}
backgroundColor={"#FFF3E0"}
></MobilityCard>

<MobilityCard
title="Total Rides"
description={[Link]}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
icon={<Flaky color="info" />}
backgroundColor={"#E1F5FE"}
 ></MobilityCard>
</Grid>

<Typography
fontSize={16}
color={"black"}
fontWeight={500}
sx={{ paddingInline: 1, marginTop: 2 }}
>
Today's Ride Search Data
</Typography>
<Grid container>
<MobilityCard
title="Searches in last 1 hr"

description={[Link]}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
icon={<Search color="action" />}
backgroundColor={"#ECEFF1"}
></MobilityCard>
<MobilityCard
title="Total Searches"

description={[Link]}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
icon={<Flaky color="info" />}
backgroundColor={"#E1F5FE"}
></MobilityCard>
</Grid>
</Paper>
</Grid>
</div>
);
};

export default Dashboard;

const renderCustomizedLabel = ({
cx,
cy,
midAngle,
innerRadius,
outerRadius,
percent,
index,
}: any) => {
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
const x = cx + radius * [Link](-midAngle * RADIAN);
const y = cy + radius * [Link](-midAngle * RADIAN);

return (
<text
x={x}
y={y}
fill="white"
textAnchor={x > cx ? "start" : "end"}
 dominantBaseline="central"
>
{`${(percent * 100).toFixed(0)}%`}
</text>
);
};
export function Appd() {
return (
<PieChart width={800} height={800}>
<Pie
data={data}
cx={200}
cy={200}
labelLine={false}
label={renderCustomizedLabel}
outerRadius={180}
fill="#8884d8"
dataKey="value"
onClick={() => {}}
enableBackground={1}
>
{[Link]((entry, index) => (
<Cell
key={`cell-${index}`}
fill={COLORS[index % [Link]]}
onClick={() => {}}
/>
))}
</Pie>
</PieChart>
);
}

71] ondc\Admin-portal-frontend\bpp_admin\src\Components\ProtectedComponents\
[Link]
import { Button, Card, Grid, Paper, Typography } from "@mui/material";
import * as React from "react";
import { MobilityCard } from "../CommonComponents/MobilityCard";
import _, { isEmpty } from "lodash";
import {
convertToStartDateString,
convertToEndDateString,
} from "../../CustomUtils/DateTimeUtils";
import { AppContext } from "../Context/AppContext";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../CommonComponents/MobilitySnackBar";
import { apiHandler } from "../ApiServices/ApiHandler";
import {
DOWNLOAD_EVENT_REPORT,
DOWNLOAD_NOTIFICATION_HISTORY_REPORT,
GET_REPORTS_DETAILS,
} from "../ApiServices/ApiConstants";
import MobilityDatePicker from "../CommonComponents/MobilityDatePicker";
import dayjs, { Dayjs } from "dayjs";
import {
DateValidationError,
PickerChangeHandlerContext,
} from "@mui/x-date-pickers";
import MobilityButton from "../CommonComponents/MobilityButton";
import moment from "moment";
import { Download } from "@mui/icons-material";
import fileDownload from "js-file-download";
import { start } from "repl";

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

const Reports: [Link] = (): [Link] => {

// const [startDate, setStartDate] = [Link]<any>(new
Date().toString());
// const [endDate, setEndDate] = [Link]<any>(new
Date().toString());
let myContext = [Link](AppContext);
const [allDetails, setAllDetails] = [Link]<any>("");
const [buttonList, setButtonList] = [Link]<any>();
const [startDate, setStartDate] = [Link]<Dayjs | null>(
myContext?.reportsFilter?.startDate
? dayjs(myContext?.reportsFilter?.startDate)
: dayjs(new Date())
);
const [endDate, setEndDate] = [Link]<Dayjs | null>(
myContext?.reportsFilter?.endDate
? dayjs(myContext?.reportsFilter?.endDate)
: dayjs(new Date())
);

[Link](() => {
getReportsList();
createDynamicButtons();
}, []);

async function getReportsList() {

try {
[Link]({
isLoading: true,
message: "Getting details...",
});
[Link]({ startDate, endDate });
const payload = {
searchBy: "date",
startDate: startDate
? convertToStartDateString(startDate?.toString())
: convertToStartDateString(new Date().toString()),
endDate: endDate
? convertToEndDateString(endDate?.toString())
: convertToEndDateString(new Date().toString()),
};

const response: Iresponse = await

[Link](GET_REPORTS_DETAILS, {
params: payload,
});
if (!isEmpty(response)) {
const data = response?.data?.data;
//[Link]("data", data);
setAllDetails(data);
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
 [Link]({
isLoading: false,
});
}
}

async function downloadReport(date: string) {

try {
[Link]({
isLoading: true,
message: "Downloading Driver Event Logs Report...",
});

const payload = {
date: moment(date).format("YYYY-MM-DD"),
};

const response: Iresponse = await [Link](

DOWNLOAD_EVENT_REPORT,
payload
);
if (!isEmpty(response)) {
//[Link]("102 data", response);
let fileName =
"driver-event-" +
moment(date).format("DD-MM-YYYY") +
"-" +
new Date().getTime().toString();
ShowSnackbarSuccess(`Downloading ${fileName}...`,
myContext);
fileDownload(response?.data, `${fileName}.csv`);
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}

async function downloadNotificationReport(date: string) {

try {
[Link]({
isLoading: true,
message: "Downloading Driver Notification Report...",
});

const payload = {
date: moment(date).format("YYYY-MM-DD"),
};

const response: Iresponse = await [Link](

DOWNLOAD_NOTIFICATION_HISTORY_REPORT,
payload
);
if (!isEmpty(response)) {
//[Link]("102 data", response);
let fileName =
"driver-notification-history-" +
moment(date).format("DD-MM-YYYY") +
"-" +
 new Date().getTime().toString();
ShowSnackbarSuccess(`Downloading ${fileName}...`,
myContext);
fileDownload(response?.data, `${fileName}.csv`);
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}

const getDaysArray = function (start: any, end: any) {

const arr = [];
for (
const dt = new Date(start);
dt <= new Date(end);
[Link]([Link]() + 1)
) {
[Link](new Date(dt).toDateString());
}
return arr;
};

function createDynamicButtons() {
let dateArray = getDaysArray(startDate, endDate);
setButtonList(dateArray);
}

const commonCardProps = {
gridstyle: {
size: 2.75,
margin: 1,
},
titleStyle: {
fontSize: 14,
color: "GrayText",
fontWeight: 600,
},
descriptionStyle: {
fontSize: 16,
color: "black",
fontWeight: 600,
},
};

return (
<Grid style={{ padding: 5 }}>
<Paper component={Card} variant="outlined">
<Grid
container
sx={{
paddingLeft: 2,
paddingTop: 2,
backgroundColor: "white",
}}
>
<Grid container spacing={2} alignItems="center">
<Grid item>
<MobilityDatePicker
 label="Start Date"
value={startDate}
minDate={dayjs(new
Date()).subtract(7, "days")}
onChange={(
value: any,
context:
PickerChangeHandlerContext<DateValidationError>
) => {
setStartDate(value);
// let sd = new
Date(value?.toString()).setHours(0, 0, 0, 0);
// let ed = new
Date(endDate).setHours(0, 0, 0, 0);
// if
(moment(sd).isSameOrAfter(moment(ed))) {
// ShowSnackbarFailure(
// "Start Date
should be same or before End Date",
// myContext
// );
// }
}}
/>
</Grid>
<Grid item>
<MobilityDatePicker
label="End Date"
value={endDate}
minDate={dayjs(new
Date()).subtract(7, "days")}
maxDate={dayjs(new Date())}
onChange={(
value: any,
context:
PickerChangeHandlerContext<DateValidationError>
) => {
setEndDate(value);
// let sd = new
Date(startDate).setHours(0, 0, 0, 0);
// let ed = new
Date(value?.toString()).setHours(0, 0, 0, 0);
// if
(moment(sd).isSameOrAfter(moment(ed))) {
// ShowSnackbarFailure(
// "End Date
should be same or after Start Date",
// myContext
// );
// }
}}
/>
</Grid>
<Grid item>
<MobilityButton
label="Search"
onClick={(
event:
[Link]<HTMLButtonElement, MouseEvent>
) => {
// let sd = new
Date(startDate).setHours(0, 0, 0, 0);
// let ed = new
Date(endDate).setHours(0, 0, 0, 0);
 if
(startDate?.isAfter(endDate, "dates")) {
setAllDetails("");
ShowSnackbarFailure(
"Start Date
should be same or before End Date",
myContext
);
} else {
getReportsList();

createDynamicButtons();
}

// if
(moment(sd).isSameOrBefore(moment(ed))) {
//
getCurrentRidesList();
//
createDynamicButtons(sd, ed);
// } else {
// setAllDetails("");
// ShowSnackbarFailure(
// "Start Date
should be same or before End Date",
// myContext
// );
// }
}}
/>
</Grid>
</Grid>
</Grid>
<Grid
item
sx={{
display: "flex",
justifyContent: "space-between",
padding: 1,
}}
>
<Grid container>
<MobilityCard
title="On boarded Drivers"

description={allDetails?.onboardedDriversCount}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
></MobilityCard>
<MobilityCard
title="Drivers taken at least 1 ride"

description={allDetails?.atleastOneRideDriverCount}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
></MobilityCard>
<MobilityCard
 title="Completed Rides"

description={allDetails?.completedRidesCount}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
></MobilityCard>
<MobilityCard
title="Total search request came to
Driver server"

description={allDetails?.searchRequestCount}

titleStyle={[Link]}

descriptionStyle={[Link]}
gridstyle={[Link]}
></MobilityCard>
</Grid>
</Grid>

<Grid item sx={{ margin: 2 }}>

{buttonList && (
<Typography fontSize={16} color={"black"}
fontWeight={600}>
Driver Event Logs Report
</Typography>
)}
{buttonList?.map((item: any) => {
return (
<Button
id={item}
variant="contained"
endIcon={<Download />}
sx={{
padding: 2,
borderRadius: 1,
marginTop: 1,
marginLeft: 1,
fontSize: 16,
textTransform: "initial",
}}
onClick={(event: any) => {

downloadReport(event?.target?.id);
}}
>
{item}
</Button>
);
})}
</Grid>

<Grid item sx={{ margin: 2 }}>

{buttonList && (
<Typography fontSize={16} color={"black"}
fontWeight={600}>
Driver Notification Report
</Typography>
)}
{buttonList?.map((item: any) => {
return (
 <Button
id={item}
variant="contained"
endIcon={<Download />}
sx={{
padding: 2,
borderRadius: 1,
marginTop: 1,
marginLeft: 1,
fontSize: 16,
textTransform: "initial",
}}
onClick={(event: any) => {

downloadNotificationReport(event?.target?.id);
}}
>
{item}
</Button>
);
})}
</Grid>
</Paper>
</Grid>
);
};

export default Reports;

72] ondc\Admin-portal-frontend\bpp_admin\src\Components\Routes\[Link]
import { FC, ReactElement } from "react";
import { Routes, Route } from "react-router-dom";
import { useUserState } from "../../CustomUtils/usercontext";
import Box from "@mui/material/Box";
import Footer from "../CommonComponents/Footer";
import routesList from "./routesList";
import { useStyles } from "./routestyle";
import NavigationDrawerNew, {
DrawerHeader,
} from "../CommonComponents/NavigationDrawerNew";
import { Login } from "../CommonComponents/login";

const AppRouter: FC = (): ReactElement => {

const classes = useStyles();
const isUserAuthenticated: boolean = useUserState();
return (
<Routes>
{[Link]((route: any, index) => (
<Route
key={index}
path={route?.path}
element={
isUserAuthenticated ? (
<>
<Box
className={[Link]}>
<NavigationDrawerNew />
<Box
component="main"
sx={{
flexGrow: 1,
p: 1,
overflow:
"auto",
 backgroundColor: "#e7e7e7",
}}
>
<DrawerHeader />
<[Link] />
</Box>
</Box>
<Footer />
</>
) : (
<Login />
)
}
/>
))}
</Routes>
);
};

export default AppRouter;

73] ondc\Admin-portal-frontend\bpp_admin\src\Components\Routes\[Link]
import Dashboard from "../ProtectedComponents/dashboard";
import Reports from "../ProtectedComponents/reports";
import Drivers from "../ProtectedComponents/Drivers/drivers";
import DriverDetails from "../ProtectedComponents/Drivers/driverDetails";
import VehicleDetails from "../ProtectedComponents/Vehicle/vehicleDetails";
import VehicleList from "../ProtectedComponents/Vehicle/vehicleList";
import RideHistory from "../ProtectedComponents/Drivers/rideHistory";
import IssueList from "../ProtectedComponents/Issue/issueList";
import IssueResolvedForm from "../ProtectedComponents/Issue/IssueResolvedForm";
import IssueDetails from "../ProtectedComponents/Issue/IssueDetails";
import SubscriptionHistory from
"../ProtectedComponents/Drivers/subscriptionHistory";
import CurrentRides from "../ProtectedComponents/CurrentRides/currentRidesList";
import CurrentRideDetails from
"../ProtectedComponents/CurrentRides/currentRidesDetails";
import RaiseIssue from "../ProtectedComponents/Drivers/raiseIssue";
import CompletedRidesList from
"../ProtectedComponents/CompletedRides/completedRidesList";
import CompletedRideDetails from
"../ProtectedComponents/CompletedRides/completedRidesDetails";
import GrievanceList from "../ProtectedComponents/Grievances/grievances-list";
import DriversBroadcast from "../ProtectedComponents/DriversBroadCast/drivers-
broadcast";
import DriversBroadcastDetails from
"../ProtectedComponents/DriversBroadCast/drivers-broadcast-details";
import GrievanceDetails from "../ProtectedComponents/Grievances/grievance-
details";
import CancelledRidesList from
"../ProtectedComponents/CancelledRides/cancelledRidesList";
import MapView from
"../ProtectedComponents/DriverSearchMapView/driverSearchMapView";
import DriverSearchMapView from
"../ProtectedComponents/DriverSearchMapView/driverSearchMapView";
import CancelledRideDetails from
"../ProtectedComponents/CancelledRides/cancelledRidesDetails";
import PendingRidesList from
"../ProtectedComponents/UnassignedRides/pendingRidesList";
import DriverRideCount from
"../ProtectedComponents/DriverRideCount/driverRideCount";
//import categoriesList from "../ProtectedComponents/Categories/categoriesList";
const routesList: Array<Object> = [
{
path: "/",
component: Dashboard,
},
{
path: "/dashboard",
component: Dashboard,
},
{
path: "/reports",
component: Reports,
},
// {
// path: "/categoriesList",
// component: categoriesList,
// },
{
path: "/driver",
component: Drivers,
},
{
path: "/vehicle",
component: VehicleList,
},
{
path: "/driverDetails",
component: DriverDetails,
},
{
path: "/vehicleDetails",
component: VehicleDetails,
},
{
path: "/rideHistory",
component: RideHistory,
},
{
path: "/subscriptionHistory",
component: SubscriptionHistory,
},
{
path: "/issue-list",
component: IssueList,
},
{
path: "/issue-resolved",
component: IssueResolvedForm,
},
{
path: "/issue",
component: IssueList,
},
{
path: "/issue-details",
component: IssueDetails,
},
{
path: "/current-rides",
component: CurrentRides,
},
{
path: "/current-ride-details",
component: CurrentRideDetails,
 },
{
path: "/raiseIssue",
component: RaiseIssue,
},
{
path: "/completed-rides",
component: CompletedRidesList,
},
{
path: "/completed-ride-details",
component: CompletedRideDetails,
},
{
path: "/grievances",
component: GrievanceList,
},
{
path: "/grievance-details",
component: GrievanceDetails,
},
{
path: "/cancelled-rides",
component: CancelledRidesList,
},
{
path: "/driver-search-map-view",
component: DriverSearchMapView,
},
{
path: "/broadcast-to-drivers",
component: DriversBroadcast,
},
{
path: "/broadcast-to-drivers-details",
component: DriversBroadcastDetails,
},
{
path: "/cancelled-ride-details",
component: CancelledRideDetails,
},
{
path: "/pending-rides",
component: PendingRidesList,
},
{
path: "/driver-ride-count",
component: DriverRideCount,
},
];

export default routesList;

74] ondc\Admin-portal-frontend\bpp_admin\src\Components\Routes\[Link]
import { makeStyles } from "@mui/styles";

export const useStyles = makeStyles({

routesComponentWrapper: {
display: "flex",
position: "fixed",
bottom: "21px",
right: "0px",
left: "0px",
top: "0px",
 },
});

75] ondc\Admin-portal-frontend\bpp_admin\src\config\[Link]
const dev = {
VERSION: "1.2.9",
BUILD_ENV: "local", //production
DOMAIN: "localhost",
API_BASE_URL: "[Link]
//API_BASE_URL: '[Link]
//API_BASE_URL: "[Link]
LOGIN_REDIRECTION: "[Link]
};

const loc_static = {
BUILD_ENV: "local", //production
DOMAIN: "localhost",
API_BASE_URL: "[Link]
LOGIN_REDIRECTION: "[Link]
ADMIN_REDIRECTION: "[Link]
SUPER_ADMIN_REDIRECTION: "[Link]
};

const uat = {
VERSION: "1.2.9",
BUILD_ENV: "uat", //production
DOMAIN: "[Link]",
API_BASE_URL: "[Link]
LOGIN_REDIRECTION: "[Link]
ADMIN_REDIRECTION: "[Link]
SUPER_ADMIN_REDIRECTION: "[Link]
admin",
};

const staging = {
VERSION: "1.2.9",
BUILD_ENV: "staging", //production
DOMAIN: "[Link]",
API_BASE_URL: "[Link]
LOGIN_REDIRECTION:
"[Link]
ADMIN_REDIRECTION:
"[Link]
SUPER_ADMIN_REDIRECTION:
"[Link]
};

const preProd = {
VERSION: "1.2.9",
BUILD_ENV: "oRickshaw", // oRickshaw
DOMAIN: "[Link]",
API_BASE_URL: "[Link]
LOGIN_REDIRECTION: "[Link]
};

const oRickshaw = {
VERSION: "1.2.9",
BUILD_ENV: "oRickshaw", // oRickshaw
DOMAIN: "[Link]",
API_BASE_URL: "[Link]
LOGIN_REDIRECTION: "[Link]
};

const pro = {};

export default oRickshaw;

export const MAP_API_KEY = "AIzaSyBcBSeBCLN6BEzyxVR93JA6zuJTBF06Lvo";

76] ondc\Admin-portal-frontend\bpp_admin\src\CustomUtils\[Link]
import Cookies from "js-cookie";
import env from "../config/env";

export function setCookies(key: string, value: string) {

[Link](key, value, { domain: [Link], secure: true });
}

export function getCookies(key: string) {

return [Link](key);
}

export function removeCookies(key: string) {

return [Link](key);
}

77] ondc\Admin-portal-frontend\bpp_admin\src\CustomUtils\[Link]
import moment from "moment";

export function formatDateTime(

dateString: string,
dateWithTime?: boolean,
withOutFormatting?: boolean,
onlyTime?: boolean
) {
if (dateString) {
if (withOutFormatting) {
let a = moment(dateString).format("DD/MM/YYYY LTS");
return a;
} else if (dateWithTime) {
let a = moment(dateString).format("DD/MM/YYYY hh:mm:ss A");
//.replace(" ", "\n");
return a;
} else if (onlyTime) {
let a = moment(dateString).format("LTS").replace(" ", "\n");
return a;
} else {
return moment(dateString).format("DD/MM/YYYY");
}
} else {
return "";
}
}

export function formatDate(dateString: string | undefined) {

if (dateString) {
let a = moment(dateString).format("DD/MM/YYYY");
return a;
} else {
return dateString;
}
}

export function convertToStartDateString(dateString: string | undefined) {

if (dateString) {
let d = new Date(dateString);
[Link](0, 0, 0, 0);
return [Link]();
} else {
 return dateString;
}
}

export function convertToEndDateString(dateString: string | undefined) {

if (dateString) {
let d = new Date(dateString);
[Link](23, 59, 59, 999);
return [Link]();
} else {
return dateString;
}
}

export function formatAmount(amount: string | number | undefined) {

if (amount) {
let a = "Rs. " + parseFloat([Link]()).toFixed(2);
return a;
} else {
return "Rs. " + parseFloat("0").toFixed(2);
}
}

export function currentDatAndTime() {

const DATE = new Date();

const dateNumber = [Link]();

const monthNumber = [Link]();
const fullYear = [Link]();
const hours = [Link]();
const minutes = [Link]();
const seconds = [Link]();

const formattedDate = `${dateNumber < 10 ? "0" : ""}${dateNumber}${

monthNumber < 10 ? "0" : ""
}${monthNumber + 1}${fullYear}`;
const formattedTime = `${hours < 10 ? "0" : ""}${hours}${
minutes < 10 ? "0" : ""
}${minutes}${seconds < 10 ? "0" : ""}${seconds}`;

return `${formattedDate}_${formattedTime}`;
}

78] ondc\Admin-portal-frontend\bpp_admin\src\CustomUtils\[Link]
// import axios from "axios";
// import env from "../config/env";
// const BASE_URL: string = env.API_BASE_URL;

// const publicInstance = [Link]({

// baseURL: BASE_URL,
// headers: {
// "Content-Type": "application/json",
// context: ["admin_portal"],
// },
// transformRequest: [
// (data) => {
// return [Link](data);
// },
// ],
// transformResponse: [
// (data) => {
// let isValidJSON = true;
// try {
// [Link](data);
// } catch {
// isValidJSON = false;
// }
// return isValidJSON ? [Link](data) : data;
// },
// ],
// });
export default {};

79] ondc\Admin-portal-frontend\bpp_admin\src\CustomUtils\[Link]
import Cookies from "js-cookie";
import React, { useEffect, createContext, FC, ReactElement } from "react";

const userStateContext = createContext<boolean>(false);

const userDispatchContext = createContext<any>(() => null);

const userReducer = (state: boolean, action: string) => {

switch (action) {
case "LOGIN_SUCCESS":
return true;
case "SIGN_OUT":
return false;
case "LOGIN_FAILURE":
return false;
case "TOKEN_EXPIRED":
return false;
default: {
throw new Error(`Unhandled action type: ${action}`);
}
}
};
const UserProvider: FC<any> = ({ children }): ReactElement => {
var [isUserAuthenticated, dispatch] = [Link](
userReducer,
//!![Link]("ONDCAdminToken")
!![Link]("bpp_portal_ONDCAdminToken")
);

useEffect(() => {
if (isUserAuthenticated) {
}
}, [isUserAuthenticated]);

return (
<[Link] value={isUserAuthenticated}>
<[Link] value={dispatch}>
{children}
</[Link]>
</[Link]>
);
};

const useUserState = () => {

const context = [Link](userStateContext);

return context;
};
const useUserDispatch = () => {
const context = [Link](userDispatchContext);
return context;
};

export { UserProvider, useUserState, useUserDispatch };

 80] ondc\Admin-portal-frontend\bpp_admin\src\CustomUtils\[Link]
const ValidateInput = (regex: RegExp, input: string) => {
return [Link](input) ? true : false;
};

export const ValidateMobile = (inputValue: string) => {

const numberRegex = new RegExp("^[1-9][0-9]{9}$");
return ValidateInput(numberRegex, inputValue);
};

export const ValidateName = (inputValue: string) => {

const nameRegex = new RegExp("^[A-Za-z ]*$");
return ValidateInput(nameRegex, inputValue);
};

export const ValidatePincode = (inputValue: string) => {

const pinCodeRegex = new RegExp("^[0-9]{6}$");
return ValidateInput(pinCodeRegex, inputValue);
};

export const ValidateDob = (inputValue: string) => {

const dobRegx = new RegExp(
// '^([0]?[1-9]|[1|2][0-9]|[3][0|1])[/]([0]?[1-9]|[1][0-2])[/]([1|2]
[0-9]{3})$',
"^([1|2][0-9]{3})[-]([0]?[1-9]|[1][0-2])[-]([0]?[1-9]|[1|2][0-9]|[3]
[0|1])$"
);
return ValidateInput(dobRegx, inputValue);
};

export const ValidatePan = (inputValue: string) => {

const dobRegx = new RegExp("^[A-Z]{5}[0-9]{4}[A-Z]{1}$");
return ValidateInput(dobRegx, inputValue);
};

export const ValidateAadhar = (inputValue: string) => {

const dobRegx = new RegExp("^[0-9]{12}|[0-9]{16}$");
return ValidateInput(dobRegx, inputValue);
};

export const ValidateExpiryDate = (inputValue: string) => {

const dobRegx = new RegExp(
"^([1|2][0-9]{3})[-]([0]?[1-9]|[1][0-2])[-]([0]?[1-9]|[1|2][0-9]|[3]
[0|1])$"
);
return ValidateInput(dobRegx, inputValue);
};

export const ValidateDrivingLicense = (inputValue: string) => {

const dobRegx = new RegExp("^[A-Z0-9 -]{16}$");
return ValidateInput(dobRegx, inputValue);
};
export const ValidateNumberPlate = (inputValue: string) => {
const vehicleNumberRegx = new RegExp("^[A-Z-0-9_-]*$");

return ValidateInput(vehicleNumberRegx, inputValue);

};
export const ValidateIfscCode = (inputValue: string) => {
const dobRegx = new RegExp("^[A-Z]{4}[0][A-Z0-9]{6}$");
return ValidateInput(dobRegx, inputValue);
};

export const ValidateMicrCode = (inputValue: string) => {

const dobRegx = new RegExp("^[0-9]{9}$");
 return ValidateInput(dobRegx, inputValue);
};
export const ValidateEmail = (inputValue: string) => {
const dobRegx = new RegExp(
"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}"
);
return ValidateInput(dobRegx, inputValue);
};

export const ValidateAddress = (inputValue: string) => {

const nameRegex = new RegExp("^[A-Za-z , 0-9]*$");
return ValidateInput(nameRegex, inputValue);
};

export const ValidateAccountNumber = (inputValue: string) => {

const dobRegx = new RegExp("^[A-Z0-9]{20}$");
return ValidateInput(dobRegx, inputValue);
};
export const ValidateVehicleRegistrationNumber = (inputValue: string) => {
const dobRegx = new RegExp(
"^[A-Z]{2}[ -]?[0-9]{2}[ -]?[A-Z]{1,2}[ -]?[0-9]{4}$"
);
return ValidateInput(dobRegx, inputValue);
};

81] ondc\Admin-portal-frontend\bpp_admin\src\[Link]
.App {
text-align: center;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {

.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
 82] ondc\Admin-portal-frontend\bpp_admin\src\[Link]
import { render, screen } from "@testing-library/react";
import App from "./App";

test("renders learn react link", () => {

render(<App />);
const linkElement = [Link](/learn react/i);
expect(linkElement).toBeInTheDocument();
});

83] ondc\Admin-portal-frontend\bpp_admin\src\[Link]
import { useState } from "react";
import "./[Link]";
import AppRouter from "./Components/Routes/routes";
import MobilityLoader, {
MobilityLoaderProp,
} from "./Components/CommonComponents/MobilityLoader";
import { AppContext, RidesFilterProps } from "./Components/Context/AppContext";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { MobilitySnackbarProp } from
"./Components/CommonComponents/MobilitySnackBar";
import MobilitySnackbar from "./Components/CommonComponents/MobilitySnackBar";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import MobilityConfirmDialog, {
MobilityConfirmDialogProp,
} from "./Components/CommonComponents/MobilityConfirmDialog";
import moment from "moment";

function App() {
const [loader, setLoader] = useState<MobilityLoaderProp>({});
const [snackbar, setSnackbar] = useState<MobilitySnackbarProp>({});
const [confirmDialog, setConfirmDialog] =
useState<MobilityConfirmDialogProp>(
{}
);
const [cancelledRidesFilter, setCancelledRidesFilter] =
useState<RidesFilterProps>({
startDate: moment(),
endDate: moment(),
});
const [currentRidesFilter, setCurrentRidesFilter] =
useState<RidesFilterProps>({
startDate: moment(),
endDate: moment(),
});
const [completedRidesFilter, setCompletedRidesFilter] =
useState<RidesFilterProps>({
startDate: moment(),
endDate: moment(),
});
const [unassignedRidesFilter, setUnassignedRidesFilter] =
useState<RidesFilterProps>({
startDate: moment(),
endDate: moment(),
});
const [driverRideStatsFilter, setDriverRideStatsFilter] =
useState<RidesFilterProps>({
startDate: moment(),
endDate: moment(),
});
const [reportsFilter, setReportsFilter] = useState<RidesFilterProps>({
startDate: moment(),
endDate: moment(),
 });
const [broadcastFilter, setBroadcastFilter] = useState<RidesFilterProps>({
startDate: moment(),
endDate: moment(),
});

return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<[Link]
value={{
loader,
setLoader,
snackbar,
setSnackbar,
confirmDialog,
setConfirmDialog,
cancelledRidesFilter,
setCancelledRidesFilter,
currentRidesFilter,
setCurrentRidesFilter,
completedRidesFilter,
setCompletedRidesFilter,
unassignedRidesFilter,
setUnassignedRidesFilter,
driverRideStatsFilter,
setDriverRideStatsFilter,
reportsFilter,
setReportsFilter,
broadcastFilter,
setBroadcastFilter,
}}
>
<AppRouter />
<MobilityLoader loader={loader} />
<MobilitySnackbar snackbar={snackbar} />
<MobilityConfirmDialog dialog={confirmDialog} />
</[Link]>
</LocalizationProvider>
);
}

export default App;

84] import { useState } from "react";

import "./[Link]";
import AppRouter from "./Components/Routes/routes";
import MobilityLoader, {
MobilityLoaderProp,
} from "./Components/CommonComponents/MobilityLoader";
import { AppContext, RidesFilterProps } from "./Components/Context/AppContext";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { MobilitySnackbarProp } from
"./Components/CommonComponents/MobilitySnackBar";
import MobilitySnackbar from "./Components/CommonComponents/MobilitySnackBar";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import MobilityConfirmDialog, {
MobilityConfirmDialogProp,
} from "./Components/CommonComponents/MobilityConfirmDialog";
import moment from "moment";

function App() {
const [loader, setLoader] = useState<MobilityLoaderProp>({});
const [snackbar, setSnackbar] = useState<MobilitySnackbarProp>({});
const [confirmDialog, setConfirmDialog] =
useState<MobilityConfirmDialogProp>(
{}
);
const [cancelledRidesFilter, setCancelledRidesFilter] =
useState<RidesFilterProps>({
startDate: moment(),
endDate: moment(),
});
const [currentRidesFilter, setCurrentRidesFilter] =
useState<RidesFilterProps>({
startDate: moment(),
endDate: moment(),
});
const [completedRidesFilter, setCompletedRidesFilter] =
useState<RidesFilterProps>({
startDate: moment(),
endDate: moment(),
});
const [unassignedRidesFilter, setUnassignedRidesFilter] =
useState<RidesFilterProps>({
startDate: moment(),
endDate: moment(),
});
const [driverRideStatsFilter, setDriverRideStatsFilter] =
useState<RidesFilterProps>({
startDate: moment(),
endDate: moment(),
});
const [reportsFilter, setReportsFilter] = useState<RidesFilterProps>({
startDate: moment(),
endDate: moment(),
});
const [broadcastFilter, setBroadcastFilter] = useState<RidesFilterProps>({
startDate: moment(),
endDate: moment(),
});

return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<[Link]
value={{
loader,
setLoader,
snackbar,
setSnackbar,
confirmDialog,
setConfirmDialog,
cancelledRidesFilter,
setCancelledRidesFilter,
currentRidesFilter,
setCurrentRidesFilter,
completedRidesFilter,
setCompletedRidesFilter,
unassignedRidesFilter,
setUnassignedRidesFilter,
driverRideStatsFilter,
setDriverRideStatsFilter,
reportsFilter,
setReportsFilter,
broadcastFilter,
setBroadcastFilter,
}}
>
<AppRouter />
 <MobilityLoader loader={loader} />
<MobilitySnackbar snackbar={snackbar} />
<MobilityConfirmDialog dialog={confirmDialog} />
</[Link]>
</LocalizationProvider>
);
}

export default App;

85] ondc\Admin-portal-frontend\bpp_admin\src\[Link]
import ReactDOM from "react-dom/client";
import "./[Link]";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import { UserProvider } from "./CustomUtils/usercontext";
import { ThemeProvider } from "@mui/material/styles";
import { theme } from "./Theme";

const root = [Link](

[Link]("root") as HTMLElement
);
[Link](
// <[Link]>
<ThemeProvider theme={theme}>
<UserProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</UserProvider>
</ThemeProvider>
// {/* </[Link]> */}
);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(
// or send to an analytics endpoint. Learn more: [Link]
reportWebVitals();

86] ondc\Admin-portal-frontend\bpp_admin\src\[Link]
<svg xmlns="[Link] viewBox="0 0 841.9 595.3"><g
fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-
114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8
19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-
18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9
53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28
31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9
14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4
66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4
63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6
36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-
130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-
4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8
106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-
8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-
39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3
11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7
39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-
15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4
18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-
2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5
15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-
18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6
8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5
125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7
27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-
6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4
19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84
46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9
2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1
63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-
13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4
15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle
cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

87] ondc\Admin-portal-frontend\bpp_admin\src\[Link]
/// <reference types="react-scripts" />

88] ondc\Admin-portal-frontend\bpp_admin\src\[Link]
import { ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {

if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};

export default reportWebVitals;

89] ondc\Admin-portal-frontend\bpp_admin\src\[Link]

// jest-dom adds custom jest matchers for asserting on DOM nodes.

// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: [Link]
import '@testing-library/jest-dom';

90] ondc\Admin-portal-frontend\bpp_admin\src\[Link]
import { createTheme } from "@mui/material/styles";

export const theme = createTheme({

components: {
// MuiCard: {
// styleOverrides: {
// root: {
// // backgroundImage: `radial-gradient(47.97% 107.05% at 44.91%
42.96%, #FFF 32.07%, #B6EADA 77.76%), url(${require("./assets/[Link]")})`,
// // backgroundRepeat: "no-repeat",
// // background: `radial-gradient(47.97% 107.05% at 44.91% 42.96%,
#FFF 32.07%, #B6EADA 77.76%)`,
// // backgroundSize: "50%",
// // backgroundPosition: "center",
// },
// },
// },
MuiTableCell: {
styleOverrides: {
root: {
textAlign: "center",
width: "500px",
},
},
 },
MuiLink: {
styleOverrides: {
root: {
cursor: "pointer",
},
},
},
MuiButton: {
styleOverrides: {
root: {
height: "30px",
width: "auto",
margin: "2px",
borderRadius: "20px",
},
},
},
},
});

91] ondc\Admin-portal-frontend\bpp_admin\.gitignore
# See [Link] for more about ignoring
files.

# dependencies
/node_modules
/.pnp
.[Link]
[Link]
build

# testing
/coverage

# production
/build

# misc
.DS_Store
.[Link]
.[Link]
.[Link]
.[Link]

[Link]*
[Link]*
[Link]*

92] ondc\Admin-portal-frontend\bpp_admin\[Link]
{
"name": "ondc_admin_react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.13.7",
"@mui/material": "^5.13.7",
"@mui/styles": "^5.14.0",
"@mui/x-date-pickers": "^6.18.2",
"@react-google-maps/api": "^2.19.2",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/js-cookie": "^3.0.3",
"@types/lodash": "^4.14.195",
"@types/node": "^16.18.38",
"@types/react": "^18.2.14",
"@types/react-dom": "^18.2.6",
"axios": "^1.4.0",
"dayjs": "^1.11.10",
"js-cookie": "^3.0.5",
"js-file-download": "^0.4.12",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-draggable": "^4.4.6",
"react-loading-overlay-ts": "^2.0.2",
"react-material-ui-carousel": "^3.4.2",
"react-router-dom": "^6.14.1",
"react-scripts": "5.0.1",
"recharts": "^2.12.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4",
"xlsx": "^0.18.5"
},
"scripts": {
"start": "set PORT=3004 && react-scripts start",
"start-mac": "PORT=3004 react-scripts start",
"build": "BUILD_PATH='../../driver-service/admin' react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

93] ondc\Admin-portal-frontend\bpp_admin\[Link]
# Getting Started with Create React App

This project was bootstrapped with [Create React

App]([Link]

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.\
Open [[Link] to view it in the browser.

The page will reload if you make edits.\

You will also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.\

See the section about [running tests]([Link]
app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.\

It correctly bundles React in production mode and optimizes the build for the
best performance.

The build is minified and the filenames include the hashes.\

Your app is ready to be deployed!

See the section about

[deployment]([Link] for
more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you aren’t satisfied with the build tool and configuration choices, you can
`eject` at any time. This command will remove the single build dependency from
your project.

Instead, it will copy all the configuration files and the transitive
dependencies (webpack, Babel, ESLint, etc) right into your project so you have
full control over them. All of the commands except `eject` will still work, but
they will point to the copied scripts so you can tweak them. At this point
you’re on your own.

You don’t have to ever use `eject`. The curated feature set is suitable for
small and middle deployments, and you shouldn’t feel obligated to use this
feature. However we understand that this tool wouldn’t be useful if you
couldn’t customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App

documentation]([Link]
started).

To learn React, check out the [React documentation]([Link]

94] ondc\Admin-portal-frontend\bpp_admin\[Link]
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "[Link]", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
 "module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}

95]ondc\Admin-portal-frontend\super_admin\src\Components\ApiServices\
[Link]
import env from "../../config/env";

export const SERVER_URL = env.API_BASE_URL;

export const BASE_URL =
// `[Link]
`${SERVER_URL}/api/`;

export const ADMIN_LOGIN = "admin-login";

export const UPDATE_ENTITY_SUBSCRIPTION_PLAN =

"update-entity-subscription-plan";

export const EDIT_DRIVER = "edit-driver";

export const GET_DRIVERS_LIST = "get-drivers-list";
export const GET_DRIVER_DETAILS_BY_ID = "get-driver-details-by-id";
export const CHANGE_DRIVER_STATUS_BY_ADMIN = "change-driver-status-by-admin";

export const CHANGE_DOCUMENT_STATUS = "change-document-status";

export const GET_VEHICLE_LIST = "get-vehicles-list";

export const EDIT_VEHICLE_DETAILS = "edit-vehicle-details";
export const GET_VEHICLES_DETAILS_BY_ID = "get-vehicles-details-by-id";
export const CHANGE_VEHICLE_STATUS_BY_ADMIN = "change-vehicle-status-by-admin";

export const ISSUE = "issue";

export const GET_ISSUE_CATEGORIES = "get-issue-categories";

export const TRACK_CURRENT_RIDE = "track-current-ride";

export const TRACK_COMPLETED_RIDE = "track-completed-ride";
export const CURRENT_RIDE_DETAILS = "current-ride-details";
export const COMPLETED_RIDE_DETAILS = "completed-ride-details";

export const GET_ISSUE_LIST = "get-issue-list";

export const GET_ISSUE_DETAILS = "get-issue-details";
export const ISSUE_RESOLUTION = "issue-resolution";

export const GET_GRIEVANCE_LIST = "get-grievance-list";

export const ADD_EDIT_ENTITY_USER = "add-edit-entity-user";

export const GET_ENTITY_LIST = "get-entity-list";
export const CHANGE_ENTITY_STATUS = "change-entity-status";
export const ADD_EDIT_VEHICLE_CATEGORY = "add-edit-vehicle-category";
export const GET_VEHICLE_CATEGORY_CONFIG= "get-vehicle-categories-config";
export const GET_VEHICLE_CATEGORY= "add-edit-vehicle-category";

96] ondc\Admin-portal-frontend\super_admin\src\Components\ApiServices\
[Link]
import axios from "axios";
import Cookies from "js-cookie";
import { BASE_URL } from "./ApiConstants";

class ApiHandler {
 getToken() {
let token = [Link]("bpp_admin_portal_ONDCAdminToken");
return token;
}

getPublicInstance() {
const publicInstance = [Link]({
baseURL: BASE_URL,
headers: {
"Content-Type": "application/json",
context: ["admin_portal"],
},
transformRequest: [
(data) => {
return [Link](data);
},
],
transformResponse: [
(data) => {
let isValidJSON = true;
try {
[Link](data);
} catch {
isValidJSON = false;
}
return isValidJSON ? [Link](data) : data;
},
],
});
return publicInstance;
}

getPrivateInstance() {
const instance = [Link]({
baseURL: BASE_URL,
headers: {
"Content-Type": "application/json",
context: ["admin_portal"],
Authorization: [Link](),
},
transformRequest: [
(data) => {
return [Link](data);
},
],
transformResponse: [
(data) => {
let isValidJSON = true;
try {
[Link](data);
} catch {
isValidJSON = false;
}
const parseData = isValidJSON ? [Link](data) :
data;
if (
parseData?.message?.message ===
"Unauthorized, token not available."
) {

[Link]("bpp_admin_portal_ONDCAdminToken");
}
return parseData;
},
 ],
});
return instance;
}

post(url: string, payload: any, params?: any) {

return [Link]().post(url, payload, params);
}

get(url: string, payload?: any) {

return [Link]().get(url, payload);
}
}

export const apiHandler = new ApiHandler();

// function getToken() {
// let token = [Link]("bpp_portal_ONDCAdminToken");
// return token;
// }

// const instance = [Link]({

// baseURL: BASE_URL,
// headers: {
// "Content-Type": "application/json",
// context: ["bpp_portal"],
// Authorization: getToken(),
// },
// transformRequest: [
// (data) => {
// return [Link](data);
// },
// ],
// transformResponse: [
// (data) => {
// let isValidJSON = true;
// try {
// [Link](data);
// } catch {
// isValidJSON = false;
// }
// const parseData = isValidJSON ? [Link](data) : data;
// if (
// parseData?.message?.message === "Unauthorized, token not
available."
// ) {
// [Link]("bpp_portal_ONDCAdminToken");
// }
// return parseData;
// },
// ],
// });
// export default instance;

97] ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import * as React from "react";
import { alpha } from "@mui/material/styles";
import Box from "@mui/material/Box";
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 TablePagination from "@mui/material/TablePagination";
import TableRow from "@mui/material/TableRow";
import TableSortLabel from "@mui/material/TableSortLabel";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import FormControlLabel from "@mui/material/FormControlLabel";
import Switch from "@mui/material/Switch";
import DeleteIcon from "@mui/icons-material/Delete";
import FilterListIcon from "@mui/icons-material/FilterList";
import { visuallyHidden } from "@mui/utils";
import { PropsOf } from "@emotion/react";
import { Button as MUIButton } from "@mui/material";

function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {

if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}

type Order = "asc" | "desc";

function getComparator<Key extends keyof any>(

order: Order,
orderBy: Key
): (
a: { [key in Key]: number | string },
b: { [key in Key]: number | string }
) => number {
return order === "desc"
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}

// Since 2020 all major browsers ensure sort stability with

[Link]().
// stableSort() brings sort stability to non-modern browsers (notably IE11). If
you
// only support modern browsers you can replace stableSort(exampleArray,
exampleComparator)
// with [Link]().sort(exampleComparator)
function stableSort<T>(
array: readonly T[],
comparator: (a: T, b: T) => number
) {
const stabilizedThis = [Link]((el, index) => [el, index] as [T,
number]);
[Link]((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) {
return order;
}
return a[1] - b[1];
});
return [Link]((el) => el[0]);
}

interface EnhancedTableProps {
 numSelected: number;
onRequestSort: (event: [Link]<unknown>, property: string) =>
void;
onSelectAllClick: (event: [Link]<HTMLInputElement>) => void;
order: Order;
orderBy: string;
rowCount: number;
headers: any;
}

function EnhancedTableHead(props: EnhancedTableProps) {

const {
onSelectAllClick,
order,
orderBy,
numSelected,
rowCount,
onRequestSort,
} = props;
const createSortHandler =
(property: string) => (event: [Link]<unknown>) => {
onRequestSort(event, property);
};

const tableRowStyle = {
//cursor: "pointer",
//backgroundColor: "#f0f0f0",
//borderRadius: 2,
};

return (
<TableHead>
<TableRow>
{/* <TableCell padding="checkbox">
<Checkbox
color="primary"
indeterminate={numSelected > 0 &&
numSelected < rowCount}
checked={rowCount > 0 && numSelected ===
rowCount}
onChange={onSelectAllClick}
inputProps={{
"aria-label": "select all desserts",
}}
/>
</TableCell> */}
{[Link]((headCell: any) => (
<TableCell
style={{
padding: 10,
}}
key={[Link]}
//align={[Link] ? "right" :
"left"}
padding={[Link] ? "none" :
"normal"}
sortDirection={orderBy === [Link] ?
order : false}
>
{[Link] ? (
<Typography style={{ fontWeight:
800 }}>
{[Link]}
</Typography>
 ) : (
<TableSortLabel
active={orderBy === [Link]}
direction={orderBy ===
[Link] ? order : "asc"}

onClick={createSortHandler([Link])}
>
{/* {[Link]} */}
<Typography style={{ fontWeight:
800 }}>
{[Link]}
</Typography>
{orderBy === [Link] ? (
<Box component="span"
sx={visuallyHidden}>
{order === "desc"
? "sorted
descending"
: "sorted
ascending"}
</Box>
) : null}
</TableSortLabel>
)}
</TableCell>
))}
</TableRow>
</TableHead>
);
}

interface EnhancedTableToolbarProps {
numSelected: number;
}

function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {

const { numSelected } = props;

return (
<Toolbar
sx={{
pl: { sm: 2 },
pr: { xs: 1, sm: 1 },
...(numSelected > 0 && {
bgcolor: (theme) =>
alpha(
[Link],
[Link]
),
}),
}}
>
{/* {numSelected > 0 ? (
<Typography
sx={{ flex: "1 1 100%" }}
color="inherit"
variant="subtitle1"
component="div"
>
{numSelected} selected
</Typography>
) : (
<Typography
 sx={{ flex: "1 1 100%" }}
variant="h6"
id="tableTitle"
component="div"
>

</Typography>
)} */}
{/* {numSelected > 0 ? (
<Tooltip title="Delete">
<IconButton>
<DeleteIcon />
</IconButton>
</Tooltip>
) : (
<Tooltip title="Filter list">
<IconButton>
<FilterListIcon />
</IconButton>
</Tooltip>
)} */}
</Toolbar>
);
}

interface EnhancedTableMainProps {
headers: any[];
tableData: any;
rowProps?: any;
navigate?: any;
}

export default function EnhancedTable(props: EnhancedTableMainProps) {

const { headers, tableData } = props;

const [order, setOrder] = [Link]<Order>("asc");

const [orderBy, setOrderBy] = [Link]<string>("");
const [selected, setSelected] = [Link]<readonly number[]>([]);
const [page, setPage] = [Link](0);
const [dense, setDense] = [Link](true);
const [rowsPerPage, setRowsPerPage] = [Link](10);

const handleRequestSort = (
event: [Link]<unknown>,
property: string
) => {
const isAsc = orderBy === property && order === "asc";
setOrder(isAsc ? "desc" : "asc");
setOrderBy(property);
};

const handleSelectAllClick = (event: [Link]<HTMLInputElement>)

=> {
// if ([Link]) {
// const newSelected = [Link]((n) => [Link]);
// setSelected(newSelected);
// return;
// }
// setSelected([]);
};

// const handleClick = (
// event: [Link]<unknown>,
// id: string | number
 // ) => {
// const selectedIndex = [Link](id);
// let newSelected: readonly number[] = [];

// if (selectedIndex === -1) {

// newSelected = [Link](selected, id);
// } else if (selectedIndex === 0) {
// newSelected = [Link]([Link](1));
// } else if (selectedIndex === [Link] - 1) {
// newSelected = [Link]([Link](0, -1));
// } else if (selectedIndex > 0) {
// newSelected = [Link](
// [Link](0, selectedIndex),
// [Link](selectedIndex + 1)
// );
// }
// setSelected(newSelected);
// };

const handleChangePage = (event: unknown, newPage: number) => {

setPage(newPage);
};

const handleChangeRowsPerPage = (
event: [Link]<HTMLInputElement>
) => {
setRowsPerPage(parseInt([Link], 10));
setPage(0);
};

const handleChangeDense = (event: [Link]<HTMLInputElement>) =>

{
setDense([Link]);
};

const isSelected = (id: number) => [Link](id) !== -1;

// Avoid a layout jump when reaching the last page with empty rows.
const emptyRows =
page > 0
? [Link](0, (1 + page) * rowsPerPage -
[Link])
: 0;

const visibleRows = [Link](

() =>
stableSort([Link], getComparator(order,
orderBy)).slice(
page * rowsPerPage,
page * rowsPerPage + rowsPerPage
),
[order, orderBy, page, rowsPerPage, [Link]]
);

return (
<Box sx={{ width: "100%" }}>
<Paper sx={{ width: "100%" }}>
{/* <EnhancedTableToolbar numSelected={0} /> */}
<TableContainer sx={{ maxHeight: 500 }}>
<Table
stickyHeader
sx={{ minWidth: 500 }}
aria-labelledby="tableTitle"
>
 <TableHead>
<TableRow>
{/* {[Link]((headCell,
index) => (
<TableCell
key={index}
align={[Link] ? "right" : "left"}
padding={[Link] ? "none" : "normal"}
>
{[Link] ? (
[Link]
) : (
<TableSortLabel
active={orderBy === [Link]}
direction={orderBy === [Link] ? order : "asc"}
onClick={(event) =>
handleRequestSort(event, [Link])
}
>
{[Link]}
</TableSortLabel>
)}
</TableCell>
))} */}
{[Link]((header, index) => (
<TableCell
style={{
padding: 10,

backgroundColor: "#eee",
width:

[Link] === "Documents" ||

[Link] === "View Details"

?
"10px"
:
"auto",
}}
key={index}
align={[Link]
? "right" : "left"}

padding={[Link] ? "none" : "normal"}

//
sortDirection={orderBy === [Link] ? order : false}
>
{[Link] ?
(
<Typography
style={{ fontWeight: 600 }}>

{[Link]}
</Typography>
) : (
<TableSortLabel

onClick={(event) => handleRequestSort(event, [Link])}

>

<Typography style={{ fontWeight: 600 }}>

{[Link]}
 </Typography>

</TableSortLabel>
)}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{[Link]((row, index) => (
<TableRow key={index} sx={{}}>
{[Link]((header,
headerIndex) => (
<TableCell
style={{
padding:
10,
width:

[Link] === "Documents" ||

[Link] === "View Details"

? "10px"

: "auto",
}}

key={headerIndex}

align={[Link] ? "right" : "left"}

//padding={[Link] ? "none" : "normal"}

>
{/*
{row[[Link]]} */}
{row[[Link]]
?
row[[Link]].toString().length > 30
?
row[[Link]].toString().substring(0, 30) + "..."
:
row[[Link]]
: ""}
</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[10, 25]}
component="div"
count={[Link]}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
</Box>
);
}

98]ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import { FC, ReactElement } from "react";
import { Paper, Typography } from "@mui/material";

const Footer: FC = (): ReactElement => {

return (
<Paper
sx={{
height: "20px",
position: "fixed",
bottom: "0px",
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
}}
>
<Typography sx={{ fontSize: "13px", textAlign: "center" }}>
Suma Soft Pvt. Ltd.
</Typography>
</Paper>
);
};

export default Footer;

99] ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import React, { FC, ReactElement, useState } from "react";
import { Card, Grid, Typography, useMediaQuery } from "@mui/material";
import { useUserDispatch } from "../../CustomUtils/usercontext";
import { apiHandler } from "../ApiServices/ApiHandler";
import { ADMIN_LOGIN } from "../ApiServices/ApiConstants";
import { setCookies } from "../../CustomUtils/CookiesUtils";
import MobilityTextField from "./MobilityTextField";
import MobilityButton from "./MobilityButton";
import { ShowSnackbarFailure, ShowSnackbarSuccess } from "./MobilitySnackBar";
import { AppContext } from "../Context/AppContext";

export const Login: FC = (): ReactElement => {

const [phone, setPhone] = useState<string>("8888455557");
const [password, setPassword] = useState<string>("SumaSoft@123");
const [showPassword, setShowPassword] = useState(false);
const disptch: Function = useUserDispatch();
const isMobile = useMediaQuery("(max-width:600px)");
let myContext = [Link](AppContext);

const handleClickShowPassword = (): void => setShowPassword(!

showPassword);
const handleMouseDownPassword = (): void => setShowPassword(!
showPassword);

const checkValidCredentials = (): boolean => {

if (phone && password) {
return true;
} else {
return false;
}
};

const OnSubmit: Function = async () => {

 try {
if (checkValidCredentials()) {
[Link]({
isLoading: true,
message: "Authenticating...",
});
let payload = { phone, password };
let publicInstance = [Link]();
const loginResponse = await
[Link](ADMIN_LOGIN, payload);

// const loginResponse = await [Link](

// "/api/admin-login",
// payload
// );
//
// if ([Link] === 200) {
//
// const { data } = [Link];
//
// [Link]("ONDCAdminToken", data?.token, { path:
"" });
// disptch("LOGIN_SUCCESS");
// } else {
// disptch("LOGIN_FAILURE");
// }

const {
clientsInfo = {},
userInfo = {},
token = {},
} = loginResponse?.data?.data || {};

if (
([Link](clientsInfo) && [Link]
> 0) ||
[Link] === 200
) {
let userRedirct = [Link](
(el: { clientName: string }): any =>
[Link] ===
userInfo?.defaultPortal
);

if (userRedirct === undefined) {

disptch("LOGIN_FAILURE");
}

if ([Link] === "admin_portal") {

disptch("LOGIN_SUCCESS");

setCookies("bpp_admin_portal_ONDCAdminToken", token);
setCookies("bpp_admin_portal_UserName",
[Link]);
setCookies(
"bpp_admin_portal_ClientInfo",
[Link](clientsInfo)
);
ShowSnackbarSuccess("Logged in
Successfully", myContext);
} else {
ShowSnackbarFailure("Please enter valid
Credentials", myContext);
disptch("LOGIN_FAILURE");
 }
} else {
disptch("LOGIN_FAILURE");
}
}
} catch (error) {
ShowSnackbarFailure(error, myContext);

} finally {
[Link]({
isLoading: false,
});
}
};

const setUserDetails = (event: any): void => {

[Link]();
if ([Link] === "phone") {
if (!isNaN(event?.target?.value)) {
setPhone([Link]);
}
} else if ([Link] === "password") {
setPassword([Link]);
}
};
return (
<Grid
style={{
height: "100vh",
justifyContent: "center",
display: "flex",
}}
>
<Card
sx={{
alignSelf: "center",
margin: "20px",
padding: "20px",
width: isMobile ? "auto" : "400px",
borderRadius: "20px",
}}
>
<Grid container spacing={2} alignItems="center"
justifyContent="center">
<Grid item>
<img

src={require("../../assets/Logo_digital.png")}
height="100px"
/>
</Grid>
<Grid item>
<Typography style={{ fontWeight: 800,
fontSize: 20 }}>
Super (Driver) Admin Login Portal
</Typography>
</Grid>
<Grid item md={12} xs={12} sx={{ marginTop: 2 }}>
<MobilityTextField
label="Phone"
type="text"
name="phone"
required={true}
value={phone}
 maxLength={10}
onChange={(event:
[Link]<HTMLInputElement>) => {
setUserDetails(event);
}}
/>
</Grid>
<Grid item md={12} xs={12}>
<MobilityTextField
type={showPassword ? "text" :
"password"}
name="password"
label="Password"
value={password}
showPassword={showPassword}
onChange={(event:
[Link]<HTMLInputElement>) => {
setUserDetails(event);
}}
onIconClick={(event:
[Link]<HTMLButtonElement>) => {
handleClickShowPassword();
}}
/>
</Grid>
<Grid item>
<MobilityButton
label="Login"
onClick={(event:
[Link]<HTMLButtonElement>) => {
OnSubmit();
}}
/>
</Grid>
</Grid>
</Card>
</Grid>
);
};

100] ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import styled from "@emotion/styled";
import {ExpandMore} from "@mui/icons-material";
import {
AccordionSummary,
Grid,
} from "@mui/material";
import React from "react";
import MuiAccordionDetails from "@mui/material/AccordionDetails";
import MuiAccordion, { AccordionProps } from "@mui/material/Accordion";
export interface MobilityAccordionprops {
title: any;
summary?: any;
details: any;
isExpanded: boolean;
}

function MobilityAccordion(props: MobilityAccordionprops) {

const Accordion = styled((props: AccordionProps) => (
<MuiAccordion disableGutters {...props} />
))(({ theme }) => ({
//border: `1px solid `,
// "&:not(:last-child)": {
 // borderBottom: 10,
// //marginBottom: 10,
// },
// "&:before": {
// display: "none",
// },
// margin: 16,
}));

const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({

borderTop: "1px solid rgba(0, 0, 0, .125)",
}));
return (
<div>
<Accordion defaultExpanded={[Link]}
sx={{ marginBottom: 2 }}>
<AccordionSummary
expandIcon={<ExpandMore color={"primary"}
fontSize="large" />}
sx={{}}
>
<Grid
container
item
sx={{
alignItems: "center",
}}
>
<Grid
container
flex={1}
sx={{
alignItems: "center",
}}
>
{props?.title}
</Grid>

{props?.summary}
</Grid>
</AccordionSummary>
<AccordionDetails>{props?.details}</AccordionDetails>
</Accordion>
</div>
);
}

export default MobilityAccordion;

101] ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import * as React from "react";
import Box from "@mui/material/Box";
import Menu from "@mui/material/Menu";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import Settings from "@mui/icons-material/Settings";
import Logout from "@mui/icons-material/Logout";
import { MoreVert } from "@mui/icons-material";

export interface MobilityLongProps {

label?: string;
items: any[];
}
export default function MobilityActionMenu(props: MobilityLongProps) {
const [anchorEl, setAnchorEl] = [Link]<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleClick = (event: [Link]<HTMLElement>) => {
setAnchorEl([Link]);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<[Link]>
<Box sx={{ display: "flex", alignItems: "center", textAlign:
"center" }}>
<Tooltip title="View Options">
<IconButton
onClick={handleClick}
size="small"
sx={{ ml: 2 }}
aria-controls={open ? "account-menu" :
undefined}
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
>
<MoreVert />
</IconButton>
</Tooltip>
</Box>
<Menu
anchorEl={anchorEl}
id="account-menu"
open={open}
onClose={handleClose}
onClick={handleClose}
PaperProps={{
elevation: 0,
sx: {
overflow: "visible",
filter: "drop-shadow(0px 2px 8px
rgba(0,0,0,0.32))",
"& .MuiAvatar-root": {
width: 32,
height: 32,
ml: -0.5,
mr: 1,
},
"&:before": {
content: '""',
display: "block",
position: "absolute",
top: 0,
right: 14,
width: 10,
height: 10,
bgcolor: "[Link]",
transform: "translateY(-50%)
rotate(45deg)",
zIndex: 0,
},
},
}}
transformOrigin={{ horizontal: "right", vertical:
"top" }}
anchorOrigin={{ horizontal: "right", vertical:
"bottom" }}
>
{props?.items &&
props?.[Link]((item: any) => {
return item;
})}
</Menu>
</[Link]>
);
}

102] ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import { Card, Grid } from "@mui/material";
import { MobilityButtonIconBack } from "./MobilityButtonIcon";

export interface MobilityAppBarProps {

title?: string;
clickable?: boolean;
icon?: any;
menus?: any;
onBackClick: (event: [Link]<HTMLButtonElement>) => void;
}

export function MobilityAppBar(props: MobilityAppBarProps) {

return (
<Card sx={{ display: "flex", justifyContent: "space-between" }}>
<Grid container>
<Grid item sx={{ padding: 1 }}>
<MobilityButtonIconBack
onClick={props?.onBackClick} />
</Grid>
<Grid item sx={{ alignItems: "center", display:
"flex" }}>
{props?.title}
</Grid>
</Grid>
<Grid
container
sx={{
alignItems: "center",
justifyContent: "end",
marginRight: 1,
}}
>
{props?.menus}
</Grid>
</Card>
);
}

103] ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import React from "react";
import { Button } from "@mui/material";
import { Add, Place } from "@mui/icons-material";

interface MobilityButtonProps {
label: string;
icon?: any;
disabled?: boolean;
variant?: any;
style?: [Link];
 onClick: (event: [Link]<HTMLButtonElement>) => void;
}

function MobilityButton(props: MobilityButtonProps) {

return (
<Button
variant={props?.variant ? props?.variant : "contained"}
startIcon={props?.icon}
style={
props?.style !== undefined
? props?.style
: {
height: 40,
borderRadius: 5,
textTransform: "initial",
fontSize: 16,
minWidth: 90,
}
}
onClick={(event: [Link]<HTMLButtonElement>) => {
[Link](event);
}}
>
{[Link]}
</Button>
);
}

export default MobilityButton;

104] ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import React from "react";
import { Avatar, IconButton, Tooltip } from "@mui/material";
import {
ArrowBack,
Autorenew,
BorderColorOutlined,
CancelOutlined,
TaskAlt,
TrendingUp,
Visibility,
} from "@mui/icons-material";
import _ from "lodash";

interface MobilityButtonIconProps {
color?: any;
label?: string;
disabled?: boolean;
icon?: any;
tooltipTitle?: string;
onClick: (event: [Link]<HTMLButtonElement>) => void;
}

function stringAvatar(name: any) {

return {
children: `${_.capitalize(name?.slice(0, 1))}`,
};
}

export function MobilityButtonIcon(props: MobilityButtonIconProps) {

return (
<Tooltip title={[Link]}>
{props?.icon ? (
 <IconButton color={[Link]} size="small"
onClick={[Link]}>
{props?.icon}
</IconButton>
) : (
<IconButton color={[Link]} onClick={[Link]}>
<Avatar
{...stringAvatar(props?.label?.toString())}></Avatar>
</IconButton>
)}
</Tooltip>
);
}

export function MobilityButtonIconView(props: MobilityButtonIconProps) {

return (
<MobilityButtonIcon
color={"primary"}
icon={<Visibility />}
tooltipTitle={[Link]}
onClick={[Link]}
/>
);
}

export function MobilityButtonIconApprove(props: MobilityButtonIconProps) {

return (
<MobilityButtonIcon
color={"success"}
onClick={[Link]}
icon={<TaskAlt />}
tooltipTitle={[Link]}
/>
);
}

export function MobilityButtonIconReject(props: MobilityButtonIconProps) {

return (
<MobilityButtonIcon
color={"error"}
onClick={[Link]}
icon={<CancelOutlined />}
tooltipTitle={[Link]}
/>
);
}

export function MobilityButtonIconEdit(props: MobilityButtonIconProps) {

return (
<MobilityButtonIcon
color={"primary"}
onClick={[Link]}
icon={<BorderColorOutlined />}
tooltipTitle={[Link]}
/>
);
}

export function MobilityButtonIconRenew(props: MobilityButtonIconProps) {

return (
<MobilityButtonIcon
color={"success"}
onClick={[Link]}
icon={<Autorenew />}
 tooltipTitle={[Link]}
/>
);
}

export function MobilityButtonIconUpgrade(props: MobilityButtonIconProps) {

return (
<MobilityButtonIcon
color={"warning"}
onClick={[Link]}
icon={<TrendingUp />}
tooltipTitle={[Link]}
/>
);
}

export function MobilityButtonIconBack(props: MobilityButtonIconProps) {

return (
<MobilityButtonIcon
color="default"
onClick={[Link]}
icon={<ArrowBack />}
tooltipTitle={[Link]}
/>
);
}

105] ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import { Chip } from "@mui/material";

export interface MobilityChipProps {

label?: string;
clickable?: boolean;
disabled?: boolean;
icon?: any;
onClick?: (event: [Link]<HTMLDivElement>) => void;
}

export function MobilityChip(props: MobilityChipProps) {

let textColor: any = "primary";
switch (props?.label?.toLowerCase()) {
case "pending":
textColor = "warning";
break;
case "approved":
case "approve":
case "active":
case "completed":
textColor = "success";
break;
case "rejected":
case "reject":
case "inactive":
textColor = "error";
break;
case "ongoing":
textColor = "info";
break;
}

return props?.clickable ? (
<Chip
size={"small"}
 color={textColor}
label={props?.label}
onClick={props?.onClick}
icon={props?.icon}
disabled={props?.disabled}
/>
) : (
<Chip
size={"small"}
color={textColor}
label={props?.label}
disabled={props?.disabled}
/>
);
}

106]ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
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 { AppContext } from "../Context/AppContext";
import { styled } from "@mui/material/styles";
import { IconButton, Typography } from "@mui/material";
import { Close, ClosedCaption } from "@mui/icons-material";
import MobilityButton from "./MobilityButton";

export interface MobilityConfirmDialogProps {

dialog?: MobilityConfirmDialogProp;
}

export interface MobilityConfirmDialogProp {

open?: boolean;
title?: string;
message?: string;
onYesClick?: (event: [Link]<HTMLButtonElement>) => void;
onNoClick?: (event: [Link]<HTMLButtonElement>) => void;
}

const BootstrapDialog = styled(Dialog)(({ theme }) => ({

"& .MuiDialogContent-root": {
padding: [Link](2),
},
"& .MuiDialogActions-root": {
padding: [Link](1),
},
}));

export default function MobilityConfirmDialog(

props: MobilityConfirmDialogProps
) {
let myContext = [Link](AppContext);

function handleOnClose() {
[Link]({ open: false });
}

function handleOnYes(event: any) {

if (props?.dialog?.onYesClick) {
props?.dialog?.onYesClick(event);
 }
handleOnClose();
}

return (
<[Link]>
<BootstrapDialog open={props?.dialog?.open ?
props?.dialog?.open : false}>
<DialogTitle sx={{ m: 0, p: 2 }} style={{ fontWeight:
600 }}>
{props?.dialog?.title}
</DialogTitle>
<IconButton
onClick={handleOnClose}
sx={{
position: "absolute",
right: 8,
top: 8,
color: (theme) => [Link][500],
}}
>
<Close />
</IconButton>
<DialogContent>
<Typography>{props?.dialog?.message}</Typography>
</DialogContent>
<DialogActions
sx={{
marginRight: 1,
marginBottom: 1,
}}
>
<MobilityButton
label="No"
variant="outlined"
onClick={handleOnClose}
/>
<MobilityButton label="Yes"
onClick={handleOnYes} />
</DialogActions>
</BootstrapDialog>
</[Link]>
);
}

107]ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import { Grid, Typography } from "@mui/material";

export interface MobilityEmptyMsg {

message: string;
}
function MobilityEmptyMsg(props: MobilityEmptyMsg) {
return (
<Grid style={{ marginTop: 20, height: 50, textAlign: "center" }}>
<Typography>{[Link]}</Typography>
</Grid>
);
}

export default MobilityEmptyMsg;

108]ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import { Grid, Link, Tooltip, Typography } from "@mui/material";
import React from "react";
import MobilityImg from "./MobilityImg";
import { formatDate } from "../../CustomUtils/DateTimeUtils";

export interface MobilityHeadingValueProps {

heading: any;
value: any;
linkUrl?: string;
imgUrl?: any;
}
export function MobilityFareHeadingValue(props: MobilityHeadingValueProps) {
const FareHeadingValuePair: [Link]<{
heading: string;
value: string;
}> = ({ heading, value }) => (
<Grid container xs={12}>
<Grid textAlign={"left"} xs={6}>
<Typography variant="body2" component="div">
{heading}
</Typography>
</Grid>
<Grid textAlign={"left"} xs={6}>
<Typography variant="body2" component="div">
{" : " + value}
</Typography>
</Grid>
</Grid>
);
return (
<div>
<FareHeadingValuePair heading={[Link]}
value={[Link]} />
</div>
);
}

export function MobilityHeadingValue(props: MobilityHeadingValueProps) {

const HeadingValuePair: [Link]<{
heading: string;
value: any;
linkUrl?: string;
}> = ({ heading, value, linkUrl }) => (
<Grid container xs={12}>
<Grid textAlign={"left"} xs={3}>
<Typography variant="body2" component="div">
{heading}
</Typography>
</Grid>
<Grid textAlign={"left"} xs={9}>
{linkUrl ? (
<Typography variant="body2" component="div">
{" : "}
<Tooltip title="Click to View Details">
<Link href={linkUrl}
underline="hover">
{value}
</Link>
</Tooltip>
</Typography>
) : (
<Typography variant="body2" component="div">
{" : " + value}
</Typography>
 )}
</Grid>
</Grid>
);
return (
<div>
<HeadingValuePair
heading={[Link]}
value={[Link]}
linkUrl={[Link]}
/>
</div>
);
}

export function MobilityImgHeading(props: MobilityHeadingValueProps) {

const ImgHeading: [Link]<{
heading: any;
value: any;
imgUrl?: string;
}> = ({ heading, value, imgUrl }) => (
<Grid container>
<Grid xs={12} sx={{ marginTop: 1 }}>
<MobilityHeadingValue heading={"Status"}
value={[Link]} />

{heading?.docNumber && (
<MobilityHeadingValue
heading={"Doc. Number"}
value={heading?.docNumber}
/>
)}

{heading?.expiryDate && (
<MobilityHeadingValue
heading={"Doc. Expiry Date"}
value={formatDate(heading?.expiryDate)}
/>
)}
{heading?.dateOfBirth && (
<MobilityHeadingValue
heading={"Date of Birth"}
value={formatDate(heading?.dateOfBirth)}
/>
)}
</Grid>

<Grid
xs={12}
container
sx={{ marginTop: 1 }}
justifyContent="center"
alignItems="center"
>
<MobilityImg imgUrl={[Link]} />
</Grid>
</Grid>
);
return (
<ImgHeading
heading={[Link]}
value={[Link]}
imgUrl={[Link]}
/>
 );
}

109]ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import {
Close,
RotateLeft,
RotateRight,
ZoomIn,
ZoomOut,
} from "@mui/icons-material";
import {
Dialog,
DialogActions,
DialogContent,
DialogTitle,
IconButton,
} from "@mui/material";
import React, { useState } from "react";
import { MobilityChip } from "./MobilityChip";
import env from "../../config/env";
const BASE_URL: string = env.API_BASE_URL;

export interface MobilityImgProps {

imgUrl: string;
}
function MobilityImg(props: MobilityImgProps) {
const [open, setOpen] = [Link](false);
const [selectedValue, setSelectedValue] = [Link](emails[1]);

const handleClose = (value: string) => {

setOpen(false);
setSelectedValue(value);
};

return (
<div>
<div>
<img src={`${BASE_URL}/${[Link]}`} height={200}
width={300}></img>
</div>

<ImageDialog
imageUrl={`${BASE_URL}/${[Link]}`}
selectedValue={selectedValue}
open={open}
onClose={handleClose}
/>

<div
style={{
display: "flex",
flex: 1,
alignItems: "flex-end",
}}
>
<MobilityChip
icon={<ZoomIn />}
clickable={true}
label="Zoom Image"
onClick={(e: any) => {
setOpen(true);
}}
 />
</div>
</div>
);
}

export default MobilityImg;

const emails = ["username@[Link]", "user02@[Link]"];

export interface ImageDialogProps {

open: boolean;
imageUrl: string;
selectedValue?: any;
onClose: (value: any) => void;
}

function ImageDialog(props: ImageDialogProps) {

const { onClose, selectedValue, open } = props;
const [rotate, setRotate] = useState(0);
const [zoom, setZoom] = useState(1);

const handleClose = () => {

onClose(selectedValue);
};

return (
<Dialog onClose={handleClose} open={open}>
<DialogTitle sx={{ backgroundColor: "#eaeaea" }}>
Image Viewer
</DialogTitle>
<IconButton
aria-label="close"
onClick={handleClose}
sx={{
position: "absolute",
right: 8,
top: 16,
}}
>
<Close />
</IconButton>
<DialogContent>
<div>
<img
src={props?.imageUrl}
style={{
transform: `rotate(${rotate}deg)
scale(${zoom})`,
maxHeight: "80vh",
}}
/>
</div>
</DialogContent>
<DialogActions
sx={{ backgroundColor: "#eaeaea", justifyContent:
"center" }}
>
<IconButton
onClick={() => {
setRotate(rotate - 90);
}}
>
<RotateLeft />
 </IconButton>
<IconButton
onClick={() => {
setRotate(rotate + 90);
}}
>
<RotateRight />
</IconButton>

<IconButton
onClick={() => {
setZoom(zoom === 2 ? zoom : zoom + 0.25);
}}
>
<ZoomIn />
</IconButton>
<IconButton
onClick={() => {
setZoom(zoom === 0.25 ? zoom : zoom - 0.25);
}}
>
<ZoomOut />
</IconButton>
</DialogActions>
</Dialog>
);
}

110]ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import React from "react";
import {
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
Tooltip,
} from "@mui/material";
import { MenuItemProps } from "./NavigationDrawerNew";

export interface MobilityListProps {

items: MenuItemProps[];
}

function MobilityList(props: MobilityListProps) {

const [selectedIndex, setSelectedIndex] = [Link](1);

let itemsList = [Link]((item: MenuItemProps) => {

return (
<ListItem
disablePadding
sx={{
display: "block",
color: selectedIndex === [Link] ? "#1976d2" : "",
}}
>
<ListItemButton
selected={selectedIndex === [Link]}
onClick={(event: [Link]<HTMLDivElement>)
=> {
setSelectedIndex([Link]);
[Link](event);
}}
 sx={{
minHeight: 48,
justifyContent: "initial",
px: 2.5,
}}
>
<Tooltip title={[Link]}>
<ListItemIcon
sx={{
minWidth: 0,
mr: 3,
justifyContent: "center",
color: selectedIndex ===
[Link] ? "#1976d2" : "",
}}
>
{[Link]}
</ListItemIcon>
</Tooltip>

<ListItemText>
<div
style={{
fontWeight: selectedIndex ===
[Link] ? "bolder" : "normal",
}}
>
{[Link]}
</div>
</ListItemText>
</ListItemButton>
</ListItem>
);
});
return <List>{itemsList}</List>;
}

export default MobilityList;

111]ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import React from "react";
import {
ListItemIcon,
MenuItem,
Typography,
} from "@mui/material";
import {
Assignment,
Autorenew,
BorderColorOutlined,
CancelOutlined,
DriveEta,
TaskAlt,
TrendingUp,
Visibility,
} from "@mui/icons-material";

interface MobilityListItemProps {
label?: any;
icon?: any;
color?: any;
disabled?: boolean;
onClick?: (event: [Link]<HTMLLIElement>) => void;
}

function MobilityListItem(props: MobilityListItemProps) {

return (
<MenuItem onClick={props?.onClick}>
<ListItemIcon>{[Link]}</ListItemIcon>
{[Link]}
</MenuItem>
);
}

export default MobilityListItem;

export function MobilityListItemEdit(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<BorderColorOutlined fontSize="small" color="primary"
/>}
/>
);
}

export function MobilityListItemReject(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<CancelOutlined fontSize="small" color="error" />}
/>
);
}

export function MobilityListItemView(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<Visibility fontSize="small" color="info" />}
/>
);
}

export function MobilityListItemApprove(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<TaskAlt fontSize="small" color="success" />}
/>
);
}

export function MobilityListItemRenew(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
 icon={<Autorenew />}
/>
);
}

export function MobilityListItemUpgarde(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<TrendingUp />}
/>
);
}

export function MobilityListItemVehicle(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<DriveEta fontSize="small" color="primary" />}
/>
);
}

export function MobilityListItemDocuments(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<Assignment fontSize="small" color="primary" />}
/>
);
}
112]ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import { Backdrop, CircularProgress, Grid, Typography } from "@mui/material";
export interface MobilityLoaderProps {
loader?: MobilityLoaderProp;
}

export interface MobilityLoaderProp {

isLoading?: boolean;
message?: string;
}

function MobilityLoader(props: MobilityLoaderProps) {

return (
<Backdrop
sx={{ color: "white", zIndex: (theme) => [Link] +
1 }}
open={props?.loader?.isLoading ? props?.loader?.isLoading :
false}
>
<Grid
sx={{
backgroundColor: "#D7DBDD",
padding: 2,
}}
>
<Grid
 container
direction={"column"}
alignItems={"center"}
rowGap={1}
justifyContent={"center"}
>
<CircularProgress color="primary" />
<Typography
color="primary"
fontWeight={600}
marginTop={1}
fontSize={18}
>
{props?.loader?.message ?
props?.loader?.message : "Please wait..."}
</Typography>
</Grid>
</Grid>
</Backdrop>
);
}

export default MobilityLoader;

113]ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import React, { FC, ReactElement } from "react";
import {
Button,
FormControl,
InputLabel,
MenuItem,
Paper,
Select,
SelectChangeEvent,
SelectProps,
TextField,
Typography,
} from "@mui/material";
import LoadingOverlayWrapper from "react-loading-overlay-ts";

interface MobilityLoaderProps {
text: string;
isLoading: boolean;
children: any;
}

function MobilityLoaderOld(props: MobilityLoaderProps) {

return (
<LoadingOverlayWrapper spinner active={[Link]}
text={[Link]}>
{[Link]}
</LoadingOverlayWrapper>
);
}

export default MobilityLoaderOld;

114]ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import {
FormControl,
InputLabel,
MenuItem,
 Select,
SelectChangeEvent,
} from "@mui/material";

interface MobilitySelectProps {
label: string;
value: HTMLSelectElement;
disabled?: boolean;
statusOptions: string[];
onChange: (event: SelectChangeEvent<HTMLSelectElement>) => void;
}

function MobilitySelect(props: MobilitySelectProps) {

return (
<FormControl fullWidth variant="outlined">
<InputLabel>{[Link]}</InputLabel>
<Select
disabled={[Link]}
style={{ textAlign: "start" }}
label={[Link]}
value={[Link]}
onChange={[Link]}
>
{[Link]((status) => (
<MenuItem key={status} value={status}>
{status}
</MenuItem>
))}
</Select>
</FormControl>
);
}

export default MobilitySelect;

115]ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import * as React from "react";
import Stack from "@mui/material/Stack";
import Snackbar from "@mui/material/Snackbar";
import MuiAlert, { AlertColor, AlertProps } from "@mui/material/Alert";
import { AppContext, AppContextPropTypes } from "../Context/AppContext";

export interface MobilitySnackbarProps {

snackbar: MobilitySnackbarProp;
}

export interface MobilitySnackbarProp {

open?: boolean;
message?: string;
severity?: AlertColor;
handleOnClose?: (event: [Link] | Event) => void;
}

const Alert = [Link]<HTMLDivElement, AlertProps>(function Alert(

props,
ref
) {
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});

function MobilitySnackbar(props: MobilitySnackbarProps) {

let myContext = [Link](AppContext);
function handleOnClose() {
 [Link]({ open: false });
}
return (
<Stack spacing={2} sx={{ width: "100%" }}>
{props?.[Link] && (
<Snackbar
open={props?.[Link] ? props?.[Link] : false}
autoHideDuration={2000}
onClose={handleOnClose}
anchorOrigin={{ vertical: "top", horizontal: "center" }}
>
<Alert
onClose={handleOnClose}
severity={props?.snackbar?.severity}
sx={{ width: "100%" }}
>
{props?.snackbar?.message}
</Alert>
</Snackbar>
)}
</Stack>
);
}

export function ShowSnackbarSuccess(

response: any,
myContext: AppContextPropTypes
) {
let message = "";
if (response?.data?.data?.message) {
message = [Link](response?.data?.data?.message);
} else if (response?.data?.message) {
message = [Link](response?.data?.message);
} else if (response?.data) {
message = [Link](response?.data);
} else {
message = response;
}

[Link]({
open: true,
severity: "success",
message: message,
});
}

export function ShowSnackbarFailure(err: any, myContext: AppContextPropTypes) {

let message = "";
if (err?.response?.data?.error) {
message = [Link](err?.response?.data?.error);
} else if (err?.response?.data) {
message = [Link](err?.response?.data);
} else if (err?.data) {
message = [Link](err?.data);
}else if (err?.message){
message = [Link](err?.message);
} else {
message = err;
}

[Link]({
open: true,
severity: "error",
message: message,
 });
}

export default MobilitySnackbar;

116]ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import * as React from "react";
import {
Button,
Dialog,
DialogContent,
DialogTitle,
Grid,
} from "@mui/material";
import MobilitySelect from "./MobilitySelect";
import { AppContext } from "../Context/AppContext";
import { ShowSnackbarFailure, ShowSnackbarSuccess } from "./MobilitySnackBar";
import { apiHandler } from "../ApiServices/ApiHandler";
import { UPDATE_ENTITY_SUBSCRIPTION_PLAN } from "../ApiServices/ApiConstants";

interface issueFormProps {
issueData?: any;
openDialog: boolean;
setOpenDialog: any;
title: string;
entityId: string;
planType: string;
}
interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}
const submitButtonStyle = {
marginTop: "25px",
display: "flex",
justifyContent: "center",
};
const MobilitySubscriptionDialog: [Link]<issueFormProps> = ({
issueData,
openDialog,
setOpenDialog,
title,
entityId,
planType,
}) => {
let myContext = [Link](AppContext);

const subscriptionOptions = ["Monthly", "Half-Yearly", "Yearly"];

const [selectedSubscription, setselectedSubscription] =
[Link]<any>("");

async function handleSubmit(event: [Link]) {

[Link]();
try {
[Link]({
isLoading: true,
message: "Updated Subscription plan...",
});
const payload = {
entityId: entityId,
subscriptionType: selectedSubscription,
 planType: planType,
};

const response: Iresponse = await [Link](

UPDATE_ENTITY_SUBSCRIPTION_PLAN,
payload
);

if ([Link] === 200) {

ShowSnackbarSuccess("Plan Updated Successfully",
myContext);
handleClose();
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}

function handleClose() {
setOpenDialog(false);
}

return (
<Dialog
open={openDialog}
onClose={handleClose}
PaperProps={{
style: {
width: "auto",
minWidth: "25vw",
maxWidth: "75vw",
height: "auto",
maxHeight: "75vh",
},
}}
>
<DialogTitle
style={{
backgroundColor: "#e2e2e2",
textAlign: "center",
marginBottom: "10px",
}}
>
{title}
</DialogTitle>
<DialogContent style={{ padding: "15px" }}>
<form onSubmit={handleSubmit}>
<Grid container spacing={4}>
<Grid item xs={12}>
<MobilitySelect
label="Subscription Type"
value={selectedSubscription}
onChange={(event: any) =>

setselectedSubscription([Link])
}

statusOptions={subscriptionOptions}
 />
</Grid>
</Grid>

<Grid item lg={12} sx={submitButtonStyle}>

<Button variant="contained" color="inherit"
onClick={handleClose}>
Close
</Button>
<Button
type="submit"
variant="contained"
color="primary"
disabled={!selectedSubscription}
>
Submit
</Button>
</Grid>
</form>
</DialogContent>
</Dialog>
);
};

export default MobilitySubscriptionDialog;

117]ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import React, { useState } from "react";
import { IconButton, InputAdornment, TextField } from "@mui/material";
import VisibilityIcon from "@mui/icons-material/Visibility";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
import {
ValidateAccountNumber,
ValidateAddress,
ValidateEmail,
ValidateIfscCode,
ValidateMicrCode,
ValidateMobile,
ValidateMultiplier,
ValidateName,
ValidateNumber,
ValidatePincode,
} from "../../CustomUtils/ValidationUtils";

interface MobilityTextFieldProps {
label: string;
type: string;
name: string;
value: string;
required?: boolean;
disabled?: boolean;
maxLength?: number;
helperText?: string;
showPassword?: boolean;
fullWidth?: boolean;
onChange: (event: [Link]<HTMLInputElement>) => void;
onIconClick?: (event: [Link]<HTMLButtonElement>) => void;
}

function MobilityTextField(props: MobilityTextFieldProps) {

const [helperText, setHelperText] = useState<string>("");
const [error, setError] = useState<boolean>(false);
function validate(target: HTMLInputElement | HTMLTextAreaElement) {
switch ([Link]) {
case "phone":
// if ([Link] === "phone") {
if (ValidateMobile([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText("Please Enter Valid Mobile Number");
setError(true);
}
break;
case "PinCode":
if (ValidatePincode([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText("Please Enter Valid Pin Code");
setError(true);
}
break;
case "IfscCode":
if (ValidateIfscCode([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText("Please Enter Valid Ifsc Code");
setError(true);
}
break;
case "MicrCode":
if (ValidateMicrCode([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText("Please Enter Valid Micr Code");
setError(true);
}
break;
case "email":
if (ValidateEmail([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText("Please Enter Valid Email Address");
setError(true);
}
break;
case "address":
if (ValidateAddress([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText("Please Enter Valid Address");
setError(true);
}
break;

case "accountNumber":
if (ValidateAccountNumber([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText("Please Enter Valid Account Number");
 setError(true);
}
break;

case "number":
if (ValidateNumber([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText("");
setError(true);
}
break;
case "multiplier":
if (ValidateMultiplier([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText("");
setError(true);
}
break;
case "search":
break;
case "alphaNumeric":
break;
default:
if (ValidateName([Link])) {
setHelperText("");
setError(false);
} else {
setHelperText(`Please Enter Valid Value`);
setError(true);
}
break;
}
}

return (
<TextField
fullWidth={props?.fullWidth === false ? false : true}
variant="outlined"
name={[Link]}
type={[Link]}
label={[Link]}
value={[Link]}
required={[Link]}
helperText={helperText}
error={error}
disabled={[Link] ? [Link] : false}
color={"success"}
size={props?.name === "search" ? "small" : "medium"}
onChange={(event: [Link]<HTMLInputElement>) => {
validate([Link]);
[Link](event);
}}
inputProps={
[Link]
? {
maxLength: [Link],
}
: { maxLength: 100 }
}
InputProps={
 props?.name === "password"
? {
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="Toggle Password Visibility"
onClick={props?.onIconClick}
>
{props?.showPassword ? (
<VisibilityIcon />
) : (
<VisibilityOffIcon />
)}
</IconButton>
</InputAdornment>
),
}
: {}
}
/>
);
}

export default MobilityTextField;

118]ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import { TimePicker } from "@mui/x-date-pickers/TimePicker";
import {
DateValidationError,
PickerChangeHandlerContext,
TimeValidationError,
} from "@mui/x-date-pickers";
import dayjs, { Dayjs } from "dayjs";
interface MobilityTimePickerProps {
label: string;
value?: Dayjs| null;
disabled?: boolean;
onChange?: (
value: Dayjs | null,
) => void;
}
function MobilityTimePicker(props: MobilityTimePickerProps) {
return <TimePicker label={[Link]} onChange={[Link]}
disabled={[Link] ? [Link] : false}
/>;
}

export default MobilityTimePicker;

119]ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import * as React from "react";

import AppBar from "@mui/material/AppBar";

import Box from "@mui/material/Box";
import CssBaseline from "@mui/material/CssBaseline";
import Divider from "@mui/material/Divider";
import Drawer from "@mui/material/Drawer";
import IconButton from "@mui/material/IconButton";
import InboxIcon from "@mui/icons-material/MoveToInbox";
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 MenuIcon from "@mui/icons-material/Menu";
import Toolbar from "@mui/material/Toolbar";
import { useNavigate } from "react-router-dom";
import LogoutIcon from "@mui/icons-material/Logout";
import { Card } from "@mui/material";
import Cookies from "js-cookie";
import { useUserDispatch } from "../../CustomUtils/usercontext";

const drawerWidth = 240;

interface Props {
window?: () => Window;
children?: any;
}

export default function NavigationDrawer(props: Props) {

// const { window } = props;
const [mobileOpen, setMobileOpen] = [Link](false);
const [toolbarOpen, setToolbarOpen] = [Link](false);
const dispatch = useUserDispatch();
const navigate = useNavigate();

const handleDrawerToggle = () => {

setMobileOpen(!mobileOpen);
};

const LogOut = () => {

[Link]("bpp_admin_portal_ONDCAdminToken");
dispatch("SIGN_OUT");
[Link] = "[Link]
};
const drawer = (
<div>
<Toolbar
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: 0,
}}
>
<img
style={{ cursor: "pointer" }}
onClick={() => navigate("/dashboard")}
src={require("../../assets/Logo_digital.png")}
alt=""
//width="65px"
height="60px"
/>
</Toolbar>
<Divider />
<List>
{/* <ListItem disablePadding>
<ListItemButton
onClick={() => {
navigate("/driver");
}}
>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary={"Drivers"} />
 </ListItemButton>
</ListItem> */}
<ListItem disablePadding>
<ListItemButton
onClick={() => {
navigate("/subscribers");
}}
>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary={"Subscribers"} />
</ListItemButton>
</ListItem>
</List>
</div>
);

// const container =
// window !== undefined ? () => window().[Link] : undefined;

return (
<>
<CssBaseline />
<AppBar
position="fixed"
sx={{
backgroundColor: "#FFFF",
width: { sm: `calc(100% - ${drawerWidth}px)` },
ml: { sm: `${drawerWidth}px` },
}}
>
<Toolbar>
<IconButton
edge="start"
onClick={handleDrawerToggle}
sx={{ mr: 2, display: { sm: "none" } }}
>
<MenuIcon sx={{ color: "black" }} />
</IconButton>
<IconButton
onClick={() => {
setToolbarOpen(!toolbarOpen);
}}
sx={{ position: "absolute", right: "5px" }}
>
AD
</IconButton>
</Toolbar>
{toolbarOpen && (
<Card
sx={{
width: 200,
height: 200,
position: "absolute",
right: "25px",
top: "30px",
}}
>
<List>
<ListItem button onClick={LogOut}>
<LogoutIcon />
Log Out
</ListItem>
 </List>
</Card>
)}
</AppBar>

<Box
component="nav"
sx={{ width: { sm: drawerWidth }, flexShrink: { sm:
0 } }}
aria-label="mailbox folders"
>
<Drawer
// container={container}
variant="temporary"
open={mobileOpen}
onClose={handleDrawerToggle}
ModalProps={{
keepMounted: true,
}}
sx={{
display: { xs: "block", sm: "none" },
"& .MuiDrawer-paper": {
boxSizing: "border-box",
width: drawerWidth,
},
}}
>
{drawer}
</Drawer>
<Drawer
variant="permanent"
sx={{
display: { xs: "none", sm: "block" },
"& .MuiDrawer-paper": {
boxSizing: "border-box",
width: drawerWidth,
},
}}
open
>
{drawer}
</Drawer>
</Box>
</>
);
}

120]ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import * as React from "react";
import { styled, useTheme, Theme, CSSObject } from "@mui/material/styles";
import Box from "@mui/material/Box";
import MuiDrawer from "@mui/material/Drawer";
import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import List from "@mui/material/List";
import CssBaseline from "@mui/material/CssBaseline";
import Divider from "@mui/material/Divider";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import { useNavigate } from "react-router";
import {
AirlineSeatReclineNormal,
BugReport,
ElectricCar,
DriveEta,
Logout,
Subscript,
Visibility,
EmojiTransportation,
} from "@mui/icons-material";
import { Button, Card, Grid, Icon, Typography } from "@mui/material";
import Cookies from "js-cookie";
import { useUserDispatch } from "../../CustomUtils/usercontext";
import env from "../../config/env";
import MobilityList from "./MobilityList";
import { MobilityButtonIcon } from "./MobilityButtonIcon";
import MobilityButton from "./MobilityButton";

const drawerWidth = 240;

const openedMixin = (theme: Theme): CSSObject => ({

width: drawerWidth,
transition: [Link]("width", {
easing: [Link],
duration: [Link],
}),
overflowX: "hidden",
});

const closedMixin = (theme: Theme): CSSObject => ({

transition: [Link]("width", {
easing: [Link],
duration: [Link],
}),
overflowX: "hidden",
width: `calc(${[Link](7)} + 1px)`,
[[Link]("sm")]: {
width: `calc(${[Link](8)} + 1px)`,
},
});

export const DrawerHeader = styled("div")(({ theme }) => ({

display: "flex",
alignItems: "center",
justifyContent: "center",
padding: [Link](0, 1),
// necessary for content to be below app bar
...[Link],
}));

interface AppBarProps extends MuiAppBarProps {

open?: boolean;
}

const AppBar = styled(MuiAppBar, {

shouldForwardProp: (prop) => prop !== "open",
})<AppBarProps>(({ theme, open }) => ({
zIndex: [Link] + 1,
transition: [Link](["width", "margin"], {
easing: [Link],
duration: [Link],
}),
 ...(open && {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: [Link](["width", "margin"], {
easing: [Link],
duration: [Link],
}),
}),
}));

const Drawer = styled(MuiDrawer, {

shouldForwardProp: (prop) => prop !== "open",
})(({ theme, open }) => ({
width: drawerWidth,
flexShrink: 0,
whiteSpace: "nowrap",
boxSizing: "border-box",
...(open && {
...openedMixin(theme),
"& .MuiDrawer-paper": openedMixin(theme),
}),
...(!open && {
...closedMixin(theme),
"& .MuiDrawer-paper": closedMixin(theme),
}),
}));

export interface MenuItemProps {

id: number;
lable: string;
icon: any;
isSelected: boolean;
onClick: (event: [Link]<HTMLDivElement>) => void;
}

export default function NavigationDrawerNew() {

const menuItemsList: MenuItemProps[] = [
{
id: 1,
lable: "Subscribers",
isSelected: false,
icon: <EmojiTransportation />,
onClick: (event: [Link]<HTMLDivElement>) => {
navigate("/subscribers");
},
},
// {
// id: 2,
// lable: "Vehicles",
// icon: <DriveEta />,
// isSelected: false,
// onClick: (event: [Link]<HTMLDivElement>) => {
// navigate("/vehicle");
// },
// },
// {
// id: 3,
// lable: "Issues",
// icon: <BugReport />,
// isSelected: false,
// onClick: (event: [Link]<HTMLDivElement>) => {
// navigate("/issue");
// },
// },
 // {
// id: 4,
// lable: "Track Current Rides",
// icon: <ElectricCar />,
// isSelected: false,
// onClick: (event: [Link]<HTMLDivElement>) => {
// navigate("/current-rides");
// //navigate("/current-ride-details");
// },
// },
];

const theme = useTheme();

const [open, setOpen] = [Link](true);
const navigate = useNavigate();
const [menus, setMenus] = [Link](menuItemsList);
const [toolbarOpen, setToolbarOpen] = [Link](false);
const dispatch = useUserDispatch();
const [username, SetUsername] = [Link]("");
const [assignedRoles, setAssignedRoles] = [Link]("");

const handleDrawerOpen = () => {

setOpen(true);
};

const handleDrawerClose = () => {

setOpen(false);
};

const LogOut = () => {

[Link]("bpp_admin_portal_ONDCAdminToken");
dispatch("SIGN_OUT");
[Link] = env.LOGIN_REDIRECTION;
};

function getUsername() {
const temp: any =
[Link]("bpp_admin_portal_UserName")?.toString();
SetUsername(temp);
}

[Link](() => {
getUsername();
});

return (
<Box sx={{ display: "flex" }}>
<CssBaseline />
<AppBar position="fixed" open={open}>
<Toolbar style={{ backgroundColor: "white" }}>
<IconButton
color="primary"
aria-label="open drawer"
onClick={open ? handleDrawerClose :
handleDrawerOpen}
edge="start"
sx={{
marginRight: 5,
//...(open && { display: "none" }),
}}
>
{<MenuIcon />}
{/* {!open && <MenuIcon />}
{open && <ChevronLeftIcon />} */}
 </IconButton>
<Typography
//variant="h6"
component="div"
sx={{ flexGrow: 1 }}
color={"InfoText"}
>
Super Admin
</Typography>
<MobilityButtonIcon
label={username}
onClick={(event:
[Link]<HTMLButtonElement>) => {
setToolbarOpen(!toolbarOpen);
}}
></MobilityButtonIcon>
{/* <img
style={{
cursor: "pointer",
}}

src={require("../../assets/Logo_digital.png")}
alt="logo"
height="55px"
/> */}
{/* <IconButton
onClick={() => {
setToolbarOpen(!toolbarOpen);
}}
sx={{ center: "10px" }}
>
{username}
</IconButton> */}
</Toolbar>
{toolbarOpen && (
<Card
sx={{
position: "absolute",
right: "5vh",
top: "50px",
}}
>
<List>
<ListItem
disablePadding={true}
onClick={LogOut}
onMouseOver={() =>
setToolbarOpen(true)}
onMouseOut={() =>
setToolbarOpen(false)}
>
<ListItemButton>
<Logout />
<ListItemText
primary="Logout" style={{ marginLeft: 10 }} />
</ListItemButton>
</ListItem>
</List>
</Card>
)}
</AppBar>
<Drawer variant="permanent" open={open}>
<DrawerHeader>
<img
 src={require("../../assets/Logo_digital.png")}
height="60px"
style={{ cursor: "pointer" }}
onClick={() => navigate("/")}
/>
{/* <IconButton onClick={handleDrawerClose}>
{[Link] === "rtl" ? (
<ChevronRightIcon color="primary" />
) : (
<ChevronLeftIcon color="primary" />
)}
</IconButton> */}
</DrawerHeader>
<Divider />
<MobilityList items={menus} />
{/* <List>
{["Inbox", "Starred", "Send email",
"Drafts"].map((text, index) => (
<ListItem key={text} disablePadding
sx={{ display: "block" }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ?
"initial" : "center",
px: 2.5,
}}
>
<ListItemIcon
sx={{
minWidth: 0,
mr: open ? 3 :
"auto",
justifyContent:
"center",
}}
>
{index % 2 === 0 ?
<InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text}
sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
))}
</List> */}
{/* <Divider /> */}
{/* <List>
{["All mail", "Trash", "Spam"].map((text, index)
=> (
<ListItem key={text} disablePadding
sx={{ display: "block" }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ?
"initial" : "center",
px: 2.5,
}}
>
<ListItemIcon
sx={{
minWidth: 0,
 mr: open ? 3 :
"auto",
justifyContent:
"center",
}}
>
{index % 2 === 0 ?
<InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text}
sx={{ opacity: open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
))}
</List> */}
</Drawer>
{/* <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<DrawerHeader />
</Box> */}
</Box>
);
}

121]ondc\Admin-portal-frontend\super_admin\src\Components\CommonComponents\
[Link]
import { Box } from "@mui/material";
import { FC, ReactElement } from "react";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";

const PublicHeader: FC = (): ReactElement => {

return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="fixed">
<Toolbar
sx={{
backgroundColor: "#FFFF",
}}
>
<img

src="[Link]
9 "
alt=""
width="50px"
height="50px"
/>
</Toolbar>
</AppBar>
</Box>
);
};

export default PublicHeader;

122]ondc\Admin-portal-frontend\super_admin\src\Components\Context\
[Link]
import { createContext } from "react";
import { MobilityLoaderProp } from "../CommonComponents/MobilityLoader";
import { MobilitySnackbarProp } from "../CommonComponents/MobilitySnackBar";
import { MobilityConfirmDialogProp } from
"../CommonComponents/MobilityConfirmDialog";

export interface AppContextPropTypes {

 loader: MobilityLoaderProp;
setLoader: [Link]<[Link]<MobilityLoaderProp>>;
snackbar: MobilitySnackbarProp;
setSnackbar: [Link]<[Link]<MobilitySnackbarProp>>;
confirmDialog: MobilityConfirmDialogProp;
setConfirmDialog: [Link]<
[Link]<MobilityConfirmDialogProp>
>;
}
export const AppContext = createContext<AppContextPropTypes>({
loader: {},
setLoader: () => {},
snackbar: {},
setSnackbar: () => {},
confirmDialog: {},
setConfirmDialog: () => {},
});

123]ondc\Admin-portal-frontend\super_admin\src\Components\ProtectedComponents\
Drivers\[Link]
import React, { FC, ReactElement, useState } from "react";
import {
Card,
Grid,
Typography,
Divider,
Paper,
Tabs,
Tab,
} from "@mui/material";
import { useLocation } from "react-router-dom";
import { useSearchParams, useNavigate } from "react-router-dom";
import { useUserDispatch } from "../../../CustomUtils/usercontext";
import { isEmpty } from "lodash";
import { CancelOutlined, TaskAlt } from "@mui/icons-material";
import MobilityTextField from "../../CommonComponents/MobilityTextField";
import MobilitySelect from "../../CommonComponents/MobilitySelect";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../../CommonComponents/MobilitySnackBar";
import { AppContext } from "../../Context/AppContext";
import MobilityButton from "../../CommonComponents/MobilityButton";
import { MobilityAppBar } from "../../CommonComponents/MobilityAppBar";
import { MobilityImgHeading } from
"../../CommonComponents/MobilityHeadingValue";
import MobilityAccordion from "../../CommonComponents/MobilityAccordion";
import { MobilityChip } from "../../CommonComponents/MobilityChip";
import EnhancedTable from "../../CommonComponents/EnhancedTable";
import { MobilityButtonIconView } from
"../../CommonComponents/MobilityButtonIcon";
import {
MobilityListItemApprove,
MobilityListItemEdit,
MobilityListItemReject,
} from "../../CommonComponents/MobilityListItem";
import MobilityActionMenu from "../../CommonComponents/MobilityActionMenu";
import { apiHandler } from "../../ApiServices/ApiHandler";
import {
CHANGE_DOCUMENT_STATUS,
CHANGE_VEHICLE_STATUS_BY_ADMIN,
EDIT_DRIVER,
GET_DRIVER_DETAILS_BY_ID,
} from "../../ApiServices/ApiConstants";
const DriverDetails: FC = (): ReactElement => {
let myContext = [Link](AppContext);

const location = useLocation();

const dispatch: any = useUserDispatch();
const navigate = useNavigate();
const vehicleDetailsPath: string = "/vehicleDetails";

const [queryParameters] = useSearchParams();

const id = [Link]("id");
const entityId = [Link]("entityId");
let isEdit = [Link]("isEdit");

let selectedTab = [Link]("selectedTab");

const [tabValue, setTabValue] = [Link]<string>(selectedTab!);

const statusOptions = ["Approved", "Pending", "Rejected"];

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

const [driverDetails, setDriverDetails] = [Link]<any>({});

const [vehicleDetails, setVehicleDetails] = [Link]<any>([]);

const [isLoading, setIsLoading] = useState<boolean>(false);

async function apiCall() {

try {
[Link]({
isLoading: true,
message: "Getting Driver Details...",
});
// const response: Iresponse = await [Link](
// `/api/get-driver-details-by-id?id=${id}`
// );
const response: Iresponse = await [Link](
`${GET_DRIVER_DETAILS_BY_ID}?id=${id}`
);

if (!isEmpty(response)) {
const { data } = [Link];

setDriverDetails({
firstName: [Link]?.firstName || "",
lastName: [Link]?.lastName || "",
phone: [Link]?.phone || "",
city: [Link]?.city || "",
status: [Link]?.status || "",
email: [Link]?.email || "",
driverId: [Link]?._id ||
[Link]?.id || "",
entityId: [Link]?.entityId || "",
documents: [Link]?.documents,
});
setVehicleDetails([Link]);
} else {
ShowSnackbarFailure(response, myContext);
}
 } catch (err: any) {
ShowSnackbarFailure(err, myContext);

} finally {
[Link]({ isLoading: false });
}
}
const validateData = () => {
try {
if (!driverDetails?.firstName ||
driverDetails?.firstName?.length == 0) {
ShowSnackbarFailure("Please Enter First Name",
myContext);
return false;
}
if (!driverDetails?.lastName ||
driverDetails?.lastName?.length == 0) {
ShowSnackbarFailure("Please Enter Last Name",
myContext);
return false;
}
if (!driverDetails?.city || driverDetails?.city?.length == 0)
{
ShowSnackbarFailure("Please Enter City", myContext);
return false;
}
if (!driverDetails?.email || driverDetails?.email?.length ==
0) {
ShowSnackbarFailure("Please Enter Email", myContext);
return false;
}

return true;
} catch (error) {

}
};
async function handleSubmit(event: [Link]) {
[Link]();
if (validateData()) {
try {
[Link]({
isLoading: true,
message: "Updating Driver Details...",
});

const requestBody = {
// ...driverDetails,
driverId: [Link],
firstName: [Link],
lastName: [Link],
city: [Link],
email: [Link],
status: [Link],
};
// const res: Iresponse = await [Link](
// `/api/edit-driver?entityId=${entityId}`,
// requestBody
// //{ params: { entityId } }
// );
const res: Iresponse = await [Link](
`${EDIT_DRIVER}?entityId=${entityId}`,
requestBody
//{ params: { entityId } }
 );
if (isEmpty(res)) {
apiCall();
}
if ([Link] === 200) {
ShowSnackbarSuccess("Driver details Updated
Successfully", myContext);

navigate(-1);
} else {
ShowSnackbarFailure(res, myContext);
[Link]("error.", res);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);

} finally {
[Link]({ isLoading: false });
}
}
}

[Link](() => {
apiCall();
}, []);

const cardStyle = {
// padding: "26px",
margin: "auto",
width: "100%",
boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
marginTop: "10px",
};

const buttonStyle = {
marginTop: "25px",
};
const styles = {
extendedTab: {
//minWidth: "500px",
textTransform: "none",
fontSize: 16,
fontWeight: 400,
},
};
function detailsData() {
return (
<>
<Grid container spacing={4} sx={{ padding: 3 }}>
<Grid item xs={12} sm={6}>
<MobilityTextField
disabled={isEdit ? true : false}
label="First Name"
name="firstName"
type="text"
maxLength={10}
value={driverDetails?.firstName || ""}
onChange={(event: any) => {
setDriverDetails({
...driverDetails,
firstName:
[Link],
});
 }}
/>
</Grid>
<Grid item xs={12} sm={6}>
<MobilityTextField
disabled={isEdit ? true : false}
label="Last Name"
name="lastName"
type="text"
value={driverDetails?.lastName || ""}
onChange={(event: any) => {
setDriverDetails({
...driverDetails,
lastName:
[Link],
});
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<MobilityTextField
label="Phone"
name="phone"
type="text"
disabled={true}
value={driverDetails?.phone || ""}
onChange={(e) =>
setDriverDetails({
...driverDetails,
phone: [Link],
})
}
/>
</Grid>
<Grid item xs={12} sm={6}>
<MobilityTextField
disabled={isEdit ? true : false}
label="City"
name="city"
type="text"
value={driverDetails?.city || ""}
onChange={(e) =>

setDriverDetails({ ...driverDetails, city: [Link] })

}
/>
</Grid>
<Grid item xs={12} sm={6}>
<MobilityTextField
disabled={isEdit ? true : false}
label="Email"
name="email"
type="text"
value={driverDetails?.email || ""}
onChange={(e) =>
setDriverDetails({
...driverDetails,
email: [Link],
})
}
/>
</Grid>
<Grid item xs={12} sm={6}>
<MobilitySelect
 disabled={isEdit ? true : false}
label="Status"
value={driverDetails?.status || ""}
statusOptions={statusOptions}
onChange={(e) =>
setDriverDetails({
...driverDetails,
status: [Link] as
string,
})
}
/>
</Grid>

{!isEdit && (
<Grid container sx={{ marginTop: 4,
justifyContent: "flex-end" }}>
<MobilityButton label="Submit"
onClick={handleSubmit} />
</Grid>
)}
</Grid>
</>
);
}
function documentsData() {
return (
<Grid container item xs={12} md={12} spacing={1} padding={2}>
{driverDetails?.documents?.map((item: any) => {
return (
<Grid item xs={12} md={6}>
<MobilityAccordion
isExpanded={false}
title={getTitle(item)}
summary={getSummary(item)}
details={
<>
<MobilityImgHeading
heading={item}
value=""

imgUrl={[Link]}
//
heading={undefined}
/>
{/* <MobilityImg
imgUrl={[Link]}/> */}
</>
}
/>
</Grid>
);
})}
</Grid>
);
}

const EnhancedTableConfig = {
headers: [
{
id: "VehicleName",
numeric: false,
disablePadding: true,
label: "Vehicle Name",
 disableSort: true,
},
{
id: "registrationNumber",
numeric: true,
disablePadding: true,
label: "Registration Number",
disableSort: true,
},
{
id: "model",
numeric: false,
disablePadding: true,
label: "Model",
disableSort: true,
},
{
id: "status",
numeric: false,
disablePadding: true,
label: "Status",
disableSort: true,
},

{
id: "docNew",
numeric: false,
disablePadding: true,
label: "Documents",
disableSort: true,
},
{
id: "actionNew",
numeric: false,
disablePadding: true,
label: "Actions",
disableSort: true,
},
],
navigate: (item: any) => {
navigate(`${[Link]}?id=${[Link]}`);
},
};

const changeVehicleStatus = async (

status: string,
vehicleid: string,
rowsPerPage: number,
page: number
) => {
try {
[Link]({
isLoading: true,
message: "Updating Vehicle status...",
});
const payload = { id: vehicleid, status };
// const response = await [Link](
// "/api/change-vehicle-status-by-admin",
// payload
// );
const response = await [Link](
CHANGE_VEHICLE_STATUS_BY_ADMIN,
payload
);
 if ([Link] === 200) {
ShowSnackbarSuccess(response, myContext);
await apiCall();
} else {
ShowSnackbarFailure(response, myContext);
await apiCall();
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);

if (err?.message) {

} finally {
[Link]({
isLoading: false,
});
}
};
const approveAction = (vehicle: any) => {
[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you want to proceed?",
onYesClick: () => {
changeVehicleStatus(
"Active", //"Approved"
[Link],
0,
1
);
},
});

//
};

const rejectAction = (vehicle: any) => {

[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you want to proceed?",
onYesClick: () => {
changeVehicleStatus(
"InActive", //"Rejected",
[Link],
0,
1
);
},
});

//
};
const editAction = (vehicle: any) => {
navigate(`${vehicleDetailsPath}?id=${[Link]}
&selectedTab=details`);
};
let filteredVehicleList = [Link]((vehicle: any) => {
return {
id: vehicle?._id || vehicle?.id,
VehicleName: vehicle?.name,
 registrationNumber: vehicle?.registrationNumber,
status: <MobilityChip label={vehicle?.status} />,
statusFilter: vehicle?.status,

docNew: (() => {

const docIcon = (
<MobilityButtonIconView
tooltipTitle="View Documents"
onClick={(e) => {
[Link]();
// openDocumentDialogAction();

navigate(
`${vehicleDetailsPath}?id=$
{vehicle?.id} &selectedTab=documents`
);
}}
/>
);

if (vehicle?.documents?.length > 0) {
return docIcon;
}

//
return null;
})(),
actionNew: (() => {
const commonIconContainerStyle = {
display: "flex",
justifyContent: "center",
};

const menuList: any = [

<MobilityListItemEdit
label="Edit Vehicle"
onClick={(e) => {
[Link]();
editAction(vehicle);
}}
/>,
];
if (vehicle?.status === "Approved" || vehicle?.status
=== "Active") {
[Link](
<MobilityListItemReject
label="InActive Vehicle"
onClick={(e) => {
[Link]();
rejectAction(vehicle);
}}
/>
);
} else if (
vehicle?.status === "Rejected" ||
vehicle?.status === "InActive"
) {
[Link](
<MobilityListItemApprove
label="Active Vehicle"
onClick={(e) => {
[Link]();
approveAction(vehicle);
}}
 />
);
} else if (
vehicle?.status === "Pending" ||
vehicle?.status === "Expired"
) {
[Link](
<MobilityListItemApprove
label="Active Vehicle"
onClick={(e) => {
[Link]();
approveAction(vehicle);
}}
/>,
<MobilityListItemReject
label="InActive Vehicle"
onClick={(e) => {
[Link]();
rejectAction(vehicle);
}}
/>
);
}

return (
<div style={commonIconContainerStyle}>
<MobilityActionMenu items={menuList} />
</div>
);
})(),

model: vehicle?.model,
// path: vehicleDetailsPath,
};
});
function vehiclesData() {
return (
<Grid container item xs={12} md={12} spacing={1} padding={2}>
<Grid item xs={12} md={12}>
<EnhancedTable
headers={[Link]}
tableData={filteredVehicleList}
/>
</Grid>
</Grid>
);
}
const handleApprove = async (status: any, docId: any, parentId: any) => {
try {
[Link]({
isLoading: true,
message: "Updated document status...",
});
const payload = {
status,
docId,
parentId,
};
setIsLoading(true);

// const response: Iresponse = await [Link](

// `/api/change-document-status`,
// payload
// );
 const response: Iresponse = await [Link](
CHANGE_DOCUMENT_STATUS,
payload
);

if ([Link] === 200) {

ShowSnackbarSuccess("Status changed succesfully",
myContext);

const updatedDocuments =
response?.data?.data?.updatedEntity?.documents;
[Link]((selectedDoc: any) => ({
...selectedDoc,
parentId: parentId,
}));

setDriverDetails({ ...driverDetails, documents:

updatedDocuments });
//setDocList(updatedDocuments);
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
};

function getTitle(item: any) {

let docTitle = [Link];
switch ([Link]()) {
case "profilephoto":
docTitle = "Profile Photo";
break;
case "dl":
docTitle = "Driving License Front";
break;
case "dlback":
docTitle = "Driving License Back";
break;
case "aadharfront":
docTitle = "Aadhar Front Side";
break;
case "aadharback":
docTitle = "Aadhar Back Side";
break;
case "pc":
docTitle = "Police Clearance";
break;
case "ypb":
docTitle = "Yellow Permit Badge";
break;
}

let statusColor = "info";

switch ([Link]().toLowerCase()) {
case "approved":
statusColor = "green";
break;
 case "rejected":
statusColor = "red";
break;
case "pending":
statusColor = "orange";
break;
case "expired":
statusColor = "blue";
break;
}

return (
<Grid>
<Grid>
<Typography color="primary" sx={{ fontSize: 16 }}>
{docTitle}
</Typography>
<Typography color={statusColor} sx={{ fontSize: 12
}}>
{[Link]}
</Typography>
</Grid>
</Grid>
);
}

function getSummary(item: any) {

let summary: any = [];
switch ([Link]()) {
case "pending":
case "expired":
[Link](
<>
<MobilityChip
label="Approve"
disabled={isEdit ? true : false}
clickable={isEdit ? false : true}
icon={<TaskAlt />}
onClick={(event) => {
[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you
want to proceed?",
onYesClick: () => {
handleApprove(
"Approved",
item?.docId,

[Link]
);
},
});
}}
/>
<Divider sx={{ width: 10 }} />
<MobilityChip
label="Reject"
disabled={isEdit ? true : false}
clickable={isEdit ? false : true}
icon={<CancelOutlined />}
onClick={(event) => {
[Link]({
open: true,
 title: "Confirmation",
message: "Are you sure you
want to proceed?",
onYesClick: () => {
handleApprove(
"Rejected",
item?.docId,

[Link]
);
},
});
}}
/>
<Divider sx={{ width: 10 }} />
</>
);
break;
case "rejected":
[Link](
<MobilityChip
label="Approve"
disabled={isEdit ? true : false}
clickable={isEdit ? false : true}
icon={<TaskAlt />}
onClick={(event) => {
[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you want
to proceed?",
onYesClick: () => {
handleApprove(
"Approved",
item?.docId,

[Link]
);
},
});
}}
/>
);
break;
case "approved":
[Link](
<MobilityChip
label="Reject"
disabled={isEdit ? true : false}
clickable={isEdit ? false : true}
icon={<CancelOutlined />}
onClick={(event) => {
[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you want
to proceed?",
onYesClick: () => {
handleApprove("Rejected",
[Link], [Link]);
},
});
}}
/>
 );
break;
}
return summary;
}
return (
<Grid style={{ padding: 5 }}>
<Grid item>
<MobilityAppBar
title="Driver Details"
onBackClick={() => {
navigate(-1);
}}
/>
</Grid>

<Paper component={Card} variant="outlined" sx={cardStyle}>

<Tabs
value={tabValue}
onChange={(e, newValue) => {
setTabValue(newValue);
}}
>
<Tab label="Details" value="details"
sx={[Link]} />

<Tab label="Documents" value="documents"

sx={[Link]} />
<Tab label="Vehicles" value="vehicles"
sx={[Link]} />
</Tabs>

{tabValue === "details" && detailsData()}

{tabValue === "documents" && documentsData()}

{tabValue === "vehicles" && vehiclesData()}

</Paper>
</Grid>
);
};

export default DriverDetails;

124]ondc\Admin-portal-frontend\super_admin\src\Components\ProtectedComponents\
Drivers\[Link]
import { makeStyles } from "@mui/styles";

export const useStyles = makeStyles({});

125]ondc\Admin-portal-frontend\super_admin\src\Components\ProtectedComponents\
Subscribers\driver\[Link]
import { Card, Grid, Paper, Tabs, Tab } from "@mui/material";
import { isEmpty } from "lodash";
import React, { FC, ReactElement, useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import EnhancedTable from "../../../CommonComponents/EnhancedTable";
import { MobilityButtonIconView } from
"../../../CommonComponents/MobilityButtonIcon";
import MobilityTextField from "../../../CommonComponents/MobilityTextField";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../../../CommonComponents/MobilitySnackBar";
import { AppContext } from "../../../Context/AppContext";
import { MobilityChip } from "../../../CommonComponents/MobilityChip";
import {
MobilityListItemApprove,
MobilityListItemDocuments,
MobilityListItemEdit,
MobilityListItemReject,
MobilityListItemVehicle,
} from "../../../CommonComponents/MobilityListItem";
import LongMenu from "../../../CommonComponents/MobilityActionMenu";
import MobilityEmptyMsg from "../../../CommonComponents/MobilityEmptyMsg";
import { apiHandler } from "../../../ApiServices/ApiHandler";
import {
CHANGE_DRIVER_STATUS_BY_ADMIN,
GET_DRIVERS_LIST,
} from "../../../ApiServices/ApiConstants";

// const driverPath: string = "/api/get-drivers-list";

const driverDetailsPath: string = "/driverDetails";

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}
interface driverState {
isAdminUser: any;
id: string;
firstName: string;
phone: string;
city: string;
status: string;
statusFilter: string;
documents: string;
actions: any;
lastName: string;
}
const DriverList: FC = (): ReactElement => {
let myContext = [Link](AppContext);

const [queryParameters] = useSearchParams();

const entityId = [Link]("id");
const [open, setOpen] = [Link](false);

const navigate = useNavigate();

const [DriverList, setDriverList] = useState<driverState[]>([]);
const [approvedDrivers, setApprovedDrivers] = [Link]<any[]>([]);
const [rejectedDrivers, setRejectedDrivers] = [Link]<any[]>([]);
const [pendingDrivers, setPendingDrivers] = [Link]<any[]>([]);
const [selectedDocument, setSelectedDocument] = [Link]<any>([]);
const [searchText, setSearchText] = [Link]<string>("");
// const [filteredDriverList, setFilteredDriverList] =
[Link]<any>([]);
const [tabValue, setTabValue] = [Link]<string>("all");
// const [drivers, setDrivers] = [Link]<driverState[]>([]);

const driverHeader = [
"Name",
"Phone",
"City",
"Status",
"Documents",
"Actions",
 "",
];

const openDocumentDialog = (doc: any, parentId: any) => {

setSelectedDocument(
[Link]((selectedDoc: any) => ({ ...selectedDoc, driverId:
parentId }))
);
setOpen(true);
};
const changeDriverStatus = async (
status: string,
driverId: string,
// getDriversList: any,
rowsPerPage: number,
page: number
) => {
try {
[Link]({
isLoading: true,
message: "Changing Driver status...",
});

const payload = { id: driverId, status };

// const response = await [Link](
// "/api/change-driver-status-by-admin",
// payload
// );
const response = await [Link](
CHANGE_DRIVER_STATUS_BY_ADMIN,
payload
);

if (!isEmpty(response)) {
ShowSnackbarSuccess(response, myContext);
// getDriversList(page, 0, driverPath, "driver");
await fetchData();
} else {
ShowSnackbarFailure(response, myContext);
await fetchData();

[Link]("error.", response);
}
} catch (err: any) {

ShowSnackbarFailure(err, myContext);
} finally {
[Link]({ isLoading: false });
}
};
// async function getTableData(
// page: number,
// rowsPerPage: number,
// path: string,
// type: string
// ) {
// try {
// [Link]({
// isLoading: true,
// message: "Getting Driver List...",
// });
// let response: Iresponse;
// const payload = { rowsPerPage: 0, pageNo: 0 };
// response = await [Link](driverPath, payload, {
 // params: { entityId },
// });
// let allList: any = [],
// approvedList: any = [],
// rejectedList: any = [],
// pendingList: any = [];
// if (!isEmpty(response)) {
// const { data } = response?.data;
//
// const _data = data?.driversList?.map((driver: any) => {
// let item = {
// id: driver?.id,
// firstName: `${driver?.firstName || ""} ${driver?.lastName ||
" "}`,
// phone: driver?.phone,
// city: driver?.city,
// status: <MobilityChip label={driver?.status} />,
// statusFilter: driver?.status,
// userType: driver?.isAdminUser ? "Admin" : "Driver",

// docNew: (() => {

// const openDocumentDialogAction = () => {
// openDocumentDialog(driver?.documents, [Link]);
// };

// const docIcon = (
// <MobilityButtonIconView
// tooltipTitle="View Documents"
// onClick={(e) => {
// [Link]();
// // openDocumentDialogAction();
// navigate(
// `${driverDetailsPath}?id=$
{[Link]}&selectedTab=documents`
// );
// }}
// />
// );

// if (driver?.documents?.length > 0) {
// return docIcon;
// }

// return null;
// })(),

// actionNew: (() => {

// // const approveAction = () => {
// // [Link]({
// // open: true,
// // title: "Confirmation",
// // message: "Are you sure you want to proceed?",
// // onYesClick: () => {
// // changeDriverStatus(
// // "Approved",
// // [Link],
// // getTableData,
// // 0,
// // 1
// // );
// // },
// // });
// // //
// // };
 // // const rejectAction = () => {
// // [Link]({
// // open: true,
// // title: "Confirmation",
// // message: "Are you sure you want to proceed?",
// // onYesClick: () => {
// // changeDriverStatus(
// // "Rejected",
// // [Link],
// // getTableData,
// // 0,
// // 1
// // );
// // },
// // });
// // //
// // };

// // const editAction = () => {

// // navigate(
// // `${driverDetailsPath}?id=${[Link]}&entityId=$
{entityId}&selectedTab=details`
// // );
// // };

// const commonIconContainerStyle = {
// display: "flex",
// justifyContent: "center",
// };
// const menuList: any = [
// <MobilityListItemEdit
// label="Edit Driver"
// onClick={(e) => {
// [Link]();
// editAction();
// }}
// />,
// ];

// if (driver?.status === "Approved") {

// [Link](
// <MobilityListItemReject
// label="Reject Driver"
// onClick={(e) => {
// [Link]();
// rejectAction();
// }}
// />
// );
// } else if (driver?.status === "Rejected") {
// [Link](
// <MobilityListItemApprove
// label="Approve Driver"
// onClick={(e) => {
// [Link]();
// approveAction();
// }}
// />
// );
// } else if (driver?.status === "Pending") {
// [Link](
// <>
// <MobilityListItemApprove
// label="Approve Driver"
// onClick={(e) => {
// [Link]();
// approveAction();
// }}
// />
// <MobilityListItemReject
// label="Reject Driver"
// onClick={(e) => {
// [Link]();
// rejectAction();
// }}
// />
// </>
// );
// }
// return (
// <div style={commonIconContainerStyle}>
// <LongMenu items={menuList} />
// </div>
// );
// })(),
// };
// switch (driver?.status?.toString()) {
// case "Approved":
// [Link](item);
// break;
// case "Rejected":
// [Link](item);
// break;
// case "Pending":
// [Link](item);
// break;
// }

// [Link](item);
// });

// // setDriverList(_data);
// // setFilteredDriverList(_data);
// setApprovedDrivers(approvedList);
// setRejectedDrivers(rejectedList);
// setPendingDrivers(pendingList);
// setDriverList(allList);
// setFilteredDriverList(allList);
// } else {
// ShowSnackbarFailure(response, myContext);
// // [Link]("error.", response);
// }
// } catch (err: any) {
// ShowSnackbarFailure(err, myContext);
// //
// } finally {
// [Link]({ isLoading: false });
// }
// }

const approveAction = (driver: any) => {

[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you want to proceed?",
 onYesClick: () => {
changeDriverStatus(
"Approved",
[Link],
// getTableData,
0,
1
);
},
});
//
};

const rejectAction = (driver: any) => {

[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you want to proceed?",
onYesClick: () => {
changeDriverStatus(
"Rejected",
[Link],
// getTableData,
0,
1
);
},
});
//
};

const editAction = (driver: any) => {

navigate(
`${driverDetailsPath}?id=${[Link]}&entityId=$
{entityId}&selectedTab=details`
);
};

useEffect(() => {
// getTableData(1, 0, driverPath, "driver");
fetchData();
}, [open]);

const EnhancedTableConfig = {
headers: [
{
id: "userType",
numeric: false,
disablePadding: true,
label: "User Type",
disableSort: false,
},
{
id: "firstName",
numeric: false,
disablePadding: true,
label: "Name",
disableSort: false,
},
{
id: "phone",
numeric: true,
disablePadding: true,
label: "Phone",
 disableSort: true,
},
{
id: "city",
numeric: false,
disablePadding: true,
label: "City",
disableSort: true,
},
{
id: "status",
numeric: false,
disablePadding: true,
label: "Status",
disableSort: true,
},
{
id: "docNew",
numeric: false,
disablePadding: true,
label: "Documents",
disableSort: true,
},
{
id: "actionNew",
numeric: false,
disablePadding: true,
label: "Actions",
disableSort: true,
},
],
};

const fetchData = async () => {

try {
[Link]({
isLoading: true,
message: "Getting Driver list...",
});
const payload = { rowsPerPage: 0, pageNo: 1 };
// const response: Iresponse = await [Link](driverPath,
payload, {
// params: { entityId },
// });
const response: Iresponse = await [Link](
GET_DRIVERS_LIST,
payload,
{
params: { entityId },
}
);
const { data } = response?.data;
setDriverList([Link]);
} catch (error) {

} finally {
[Link]({
isLoading: false,
});
}
};

let filteredDriverList = [Link]((row) => {

if (tabValue === "all") {
 return true;
} else {
return [Link]?.toLowerCase() === [Link]();
}
})
.filter((row) => {
return (

[Link]?.toLowerCase().includes([Link]()) ||

[Link]?.toLowerCase().includes([Link]())
);
})
.map((driver) => {
return {
id: driver?.id,
firstName: `${driver?.firstName || ""} $
{driver?.lastName || " "}`,
phone: driver?.phone,
city: driver?.city,
status: <MobilityChip label={driver?.status} />,
statusFilter: driver?.status,
userType: driver?.isAdminUser ? "Admin" : "Driver",

docNew: (() => {

// const openDocumentDialogAction = () => {
// openDocumentDialog(driver?.documents,
[Link]);
// };

const docIcon = (
<MobilityButtonIconView
tooltipTitle="View Documents"
onClick={(e) => {
[Link]();
// openDocumentDialogAction();
navigate(
`${driverDetailsPath}?id=$
{[Link]}&entityId=${entityId}&selectedTab=documents`
);
}}
/>
);

if (driver?.documents?.length > 0) {
return docIcon;
}

return null;
})(),

actionNew: (() => {

// const approveAction = () => {
// [Link]({
// open: true,
// title: "Confirmation",
// message: "Are you sure you want to
proceed?",
// onYesClick: () => {
// changeDriverStatus(
// "Approved",
// [Link],
// getTableData,
// 0,
 // 1
// );
// },
// });
// //
// };

// const rejectAction = () => {

// [Link]({
// open: true,
// title: "Confirmation",
// message: "Are you sure you want to
proceed?",
// onYesClick: () => {
// changeDriverStatus(
// "Rejected",
// [Link],
// getTableData,
// 0,
// 1
// );
// },
// });
// //
// };

// const editAction = () => {

// navigate(
// `${driverDetailsPath}?id=$
{[Link]}&entityId=${entityId}&selectedTab=details`
// );
// };

const commonIconContainerStyle = {
display: "flex",
justifyContent: "center",
};
const menuList: any = [
<MobilityListItemEdit
label="Edit Driver"
onClick={(e) => {
[Link]();
editAction(driver);
}}
/>,
];

if (driver?.status === "Approved" ||

driver?.status === "Active") {
[Link](
<MobilityListItemReject
label="Reject Driver"
onClick={(e) => {
[Link]();
rejectAction(driver);
}}
/>
);
} else if (
driver?.status === "Rejected" ||
driver?.status === "InActive"
) {
[Link](
<MobilityListItemApprove
 label="Approve Driver"
onClick={(e) => {
[Link]();
approveAction(driver);
}}
/>
);
} else if (
driver?.status === "Pending" ||
driver?.status === "Expired"
) {
[Link](
<>
<MobilityListItemApprove
label="Approve Driver"
onClick={(e) => {
[Link]();

approveAction(driver);
}}
/>
<MobilityListItemReject
label="Reject Driver"
onClick={(e) => {
[Link]();
rejectAction(driver);
}}
/>
</>
);
}
[Link](
<MobilityListItemDocuments
label="View Documents"
onClick={(e) => {
[Link]();
navigate(
`${driverDetailsPath}?id=$
{[Link]}&entityId=${entityId}&selectedTab=documents`
);
}}
/>,
<MobilityListItemVehicle
label="View Vehicles"
onClick={(e) => {
[Link]();
navigate(
`${driverDetailsPath}?id=$
{[Link]}&selectedTab=vehicles`
);
}}
/>
);
return (
<div style={commonIconContainerStyle}>
<LongMenu items={menuList} />
</div>
);
})(),
};
});
const closeDocumentDialog = () => {
setOpen(false);
};
 const handleInputChange = (event: [Link]<HTMLInputElement>) =>
{
const inputValue = [Link]();

setSearchText(inputValue);
// if ([Link] > 2) {
// const filteredRows = [Link]((row: any) => {
// return (
// [Link]().includes(inputValue) ||
// [Link]().includes(inputValue)
// );
// });

//
// setFilteredDriverList(filteredRows);

// const filteredApproved = [Link]((row: any) => {

// return (
// [Link] === "Approved" &&
// ([Link]().includes(inputValue) ||
// [Link]().includes(inputValue))
// );
// });
// setApprovedDrivers(filteredApproved);

// const filteredRejected = [Link]((row: any) => {

// return (
// [Link] === "Rejected" &&
// ([Link]().includes(inputValue) ||
// [Link]().includes(inputValue))
// );
// });
// setRejectedDrivers(filteredRejected);

// const filteredPending = [Link]((row: any) => {

// return (
// [Link] === "Pending" &&
// ([Link]().includes(inputValue) ||
// [Link]().includes(inputValue))
// );
// });
// setPendingDrivers(filteredPending);
// } else {
// setFilteredDriverList(DriverList);
// }
};
const styles = {
extendedTab: {
textTransform: "none",
fontSize: 16,
fontWeight: 400,
},
};
return (
<Grid style={{ padding: 5 }}>
<Paper component={Card} variant="outlined">
<Grid sx={{ display: "flex", justifyContent: "space-
between" }}>
<Grid container>
<Grid item>
<Tabs
value={tabValue}
onChange={(e, newValue) => {
setTabValue(newValue);
 }}
>
<Tab label="All Drivers"
value="all" sx={[Link]} />
<Tab
label="Approved"
value="approved"
sx={[Link]}
/>
<Tab
label="Rejected"
value="rejected"
sx={[Link]}
/>
<Tab label="Pending"
value="pending" sx={[Link]} />
</Tabs>
</Grid>
</Grid>

<Grid
container
sx={{
alignItems: "end",
justifyContent: "end",
marginRight: 1,
}}
>
<MobilityTextField
label="Search Driver..."
type="text"
name="search"
value={searchText}
maxLength={50}
fullWidth={false}
onChange={(event:
[Link]<HTMLInputElement>) => {
handleInputChange(event);
}}
/>
</Grid>
</Grid>

<Grid padding={2}>
{/* {tabValue === "all" && */}
{[Link] > 0 ? (
<EnhancedTable
headers={[Link]}
tableData={filteredDriverList}
/>
) : (
<MobilityEmptyMsg message={"No Data
Found"} />
)}

{/* {tabValue === "approved" &&

([Link] > 0 ? (
<EnhancedTable
headers={[Link]}
tableData={approvedDrivers}
/>
) : (
<MobilityEmptyMsg message={"No Data Found"} />
))}
 {tabValue === "rejected" &&
([Link] > 0 ? (
<EnhancedTable
headers={[Link]}
tableData={rejectedDrivers}
/>
) : (
<MobilityEmptyMsg message={"No Data Found"} />
))}

{tabValue === "pending" &&

([Link] > 0 ? (
<EnhancedTable
headers={[Link]}
tableData={pendingDrivers}
/>
) : (
<MobilityEmptyMsg message={"No Data Found"} />
))} */}
</Grid>
</Paper>
</Grid>
);
};

export default DriverList;

126]ondc\Admin-portal-frontend\super_admin\src\Components\ProtectedComponents\
Subscribers\vehicle\[Link]
import { Card, Grid, Paper, Tabs, Tab } from "@mui/material";
import { isEmpty } from "lodash";
import React, { FC, ReactElement, useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import EnhancedTable from "../../../CommonComponents/EnhancedTable";
import { MobilityButtonIconView } from
"../../../CommonComponents/MobilityButtonIcon";
import MobilityTextField from "../../../CommonComponents/MobilityTextField";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../../../CommonComponents/MobilitySnackBar";
import { AppContext } from "../../../Context/AppContext";
import MobilityEmptyMsg from "../../../CommonComponents/MobilityEmptyMsg";
import { MobilityChip } from "../../../CommonComponents/MobilityChip";
import LongMenu from "../../../CommonComponents/MobilityActionMenu";
import {
MobilityListItemApprove,
MobilityListItemEdit,
MobilityListItemReject,
} from "../../../CommonComponents/MobilityListItem";
import { apiHandler } from "../../../ApiServices/ApiHandler";
import {
CHANGE_VEHICLE_STATUS_BY_ADMIN,
GET_VEHICLE_LIST,
} from "../../../ApiServices/ApiConstants";

//const vehiclePath: string = "/api/get-vehicles-list";

const vehicleDetailsPath: string = "/vehicleDetails";

interface Iresponse {
headers?: any;
data?: any;
status?: number;
 message?: string;
}
interface vehicleState {
_id: string;
name: any;
documents: any;
id: string;
VehicleName: string;
registrationNumber: string;
status: string;
statusFilter: string;
model: string;
docNew: string;
actionNew: any;
}
//TODO: add vehicle status change for the admin
const VehicleList: FC = (): ReactElement => {
let myContext = [Link](AppContext);

const [queryParameters] = useSearchParams();

const entityId = [Link]("id");

const navigate = useNavigate();

const [VehicleList, setVehicleList] = useState<vehicleState[]>([]);
const [activeVehicles, setActiveVehicles] = [Link]<any[]>([]);
const [inActiveVehicles, setInActiveVehicles] = [Link]<any[]>([]);
const [pendingVehicles, setPendingVehicles] = [Link]<any[]>([]);
const [searchText, setSearchText] = [Link]<string>("");
// const [filteredVehicleList, setFilteredVehicleList] =
useState<any>([]);
const [tabValue, setTabValue] = [Link]<string>("all");

const vehicleHeader = [
"Name",
"Model",
"Registration Number",
"Status",
"Documents",
"Actions",
"",
];
const [selectedDocument, setSelectedDocument] = [Link]<any[]>([]);
const [open, setOpen] = [Link](false);
const [message, setMessage] = useState<string>("");
const [isLoading, setIsLoading] = useState<boolean>(false);
const openDocumentDialog = (doc: any, parentId: any) => {
setSelectedDocument(
[Link]((selectedDoc: any) => ({ ...selectedDoc, vehicleId:
parentId }))
);
setOpen(true);
};
const closeDocumentDialog = () => {
setOpen(false);
};
const changeVehicleStatus = async (
status: string,
id: string,
// getVehicleList: any,
rowsPerPage: number,
page: number
) => {
try {
 [Link]({
isLoading: true,
message: "Changing Vehicle status...",
});

const payload = { id, status };

// const response = await [Link](
// "/api/change-vehicle-status-by-admin",
// payload
// );
const response = await [Link](
CHANGE_VEHICLE_STATUS_BY_ADMIN,
payload
);

if (!isEmpty(response)) {
ShowSnackbarSuccess("Vehicle Status Updated
Successfully", myContext);
await fetchData();
// getVehicleList(page, 0, vehiclePath, "driver");
} else {
ShowSnackbarFailure(response, myContext);
await fetchData();
[Link]("error.", response);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);

} finally {
[Link]({
isLoading: false,
});
}
};
// async function getTableData(
// page: number,
// rowsPerPage: number,
// path: string,
// type: string
// ) {
// try {
// [Link]({
// isLoading: true,
// message: "Getting Vehicle list...",
// });
// let response: Iresponse;
// const payload = { rowsPerPage: 0, pageNo: 0 };
// response = await [Link](vehiclePath, {
// params: { entityId, ...payload },
// });
//
// let allList: any = [],
// activeList: any = [],
// inActiveList: any = [],
// pendingList: any = [];
// if (!isEmpty(response)) {
// const { data } = response?.data;
// const vehicleList = data?.vehiclesList?.map((vehicle: any) => {
// let item = {
// id: vehicle?._id || vehicle?.id,
// VehicleName: vehicle?.name,
// registrationNumber: vehicle?.registrationNumber,
// status: <MobilityChip label={vehicle?.status} />,
// statusFilter: vehicle?.status,
 // docNew: (() => {
// const openDocumentDialogAction = () => {
// openDocumentDialog(vehicle?.documents, [Link]);
// //
// //
// };

// const docIcon = (
// <MobilityButtonIconView
// tooltipTitle="View Documents"
// onClick={(e) => {
// [Link]();
// openDocumentDialogAction();
// // navigate(`${vehicleDocumentTablePath}?id=$
{vehicle?.id}`);
// navigate(
// `${vehicleDetailsPath}?id=${vehicle?.id}
&selectedTab=documents`
// );
// }}
// />
// );

// if (vehicle?.documents?.length > 0) {
// //
// return docIcon;
// }

// //
// return null;
// })(),
// actionNew: (() => {
// // const approveAction = () => {
// // [Link]({
// // open: true,
// // title: "Confirmation",
// // message: "Are you sure you want to proceed?",
// // onYesClick: () => {
// // changeVehicleStatus(
// // "Active",
// // [Link],
// // getTableData,
// // rowsPerPage,
// // page
// // );
// // },
// // });
// // };

// // const rejectAction = () => {

// // [Link]({
// // open: true,
// // title: "Confirmation",
// // message: "Are you sure you want to proceed?",
// // onYesClick: () => {
// // changeVehicleStatus(
// // "InActive",
// // [Link],
// // getTableData,
// // rowsPerPage,
// // page
// // );
// // },
 // // });
// // };
// // const editAction = () => {
// // navigate(
// // `${vehicleDetailsPath}?id=${[Link]}&entityId=$
{entityId}&selectedTab=details`
// // );
// // };
// const commonIconContainerStyle = {
// display: "flex",
// justifyContent: "center",
// };
// const menuList: any = [
// <MobilityListItemEdit
// label="Edit Vehicle"
// onClick={(e) => {
// [Link]();
// editAction(vehicle);
// }}
// />,
// ];
// if (
// vehicle?.status === "Approved" ||
// vehicle?.status === "Active"
// ) {
// //
// [Link](
// <MobilityListItemReject
// label="Inactive Vehicle"
// onClick={(e) => {
// [Link]();
// rejectAction(vehicle);
// }}
// />
// );
// } else if (
// vehicle?.status === "Rejected" ||
// vehicle?.status === "InActive"
// ) {
// //
// [Link](
// <MobilityListItemApprove
// label="Active Vehicle"
// onClick={(e) => {
// [Link]();
// approveAction(vehicle);
// }}
// />
// );
// } else if (vehicle?.status === "Pending") {
// [Link](
// <>
// <MobilityListItemApprove
// label="Active Vehicle"
// onClick={(e) => {
// [Link]();
// approveAction(vehicle);
// }}
// />
// <MobilityListItemReject
// label="InActive Vehicle"
// onClick={(e) => {
// [Link]();
// rejectAction(vehicle);
// }}
// />
// </>
// );
// }

//
// return (
// <div style={commonIconContainerStyle}>
// <LongMenu items={menuList} />
// </div>
// );
// })(),

// model: vehicle?.model,
// path: vehicleDetailsPath,
// };
// switch (vehicle?.status?.toString()) {
// case "Active":
// case "Approved":
// [Link](item);
// break;
// case "InActive":
// case "Rejected":
// [Link](item);
// break;
// case "Pending":
// [Link](item);
// break;
// }

// [Link](item);
// });
// //
// setActiveVehicles(activeList);
// setInActiveVehicles(inActiveList);
// setPendingVehicles(pendingList);
// setVehicleList(allList);
// setFilteredVehicleList(allList);
// } else {
// ShowSnackbarFailure(response, myContext);
// // [Link]("error.", response);
// }
// } catch (err: any) {
// ShowSnackbarFailure(err, myContext);
// //
// } finally {
// [Link]({
// isLoading: false,
// });
// }
// }

const approveAction = (vehicle: any) => {

[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you want to proceed?",
onYesClick: () => {
changeVehicleStatus(
"Active",
[Link],
// getTableData,
0,
 1
);
},
});
};

const rejectAction = (vehicle: any) => {

[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you want to proceed?",
onYesClick: () => {
changeVehicleStatus(
"InActive",
[Link],
// getTableData,
0,
1
);
},
});
};
const editAction = (vehicle: any) => {
navigate(
`${vehicleDetailsPath}?id=${[Link]}&entityId=$
{entityId}&selectedTab=details`
);
};
useEffect(() => {
//
// getTableData(1, 0, vehiclePath, "vehicle");
fetchData();
}, [open]);

//

const EnhancedTableConfig = {
headers: [
{
id: "VehicleName",
numeric: false,
disablePadding: true,
label: "Vehicle Name",
disableSort: true,
},
{
id: "registrationNumber",
numeric: true,
disablePadding: true,
label: "Registration Number",
disableSort: true,
},
{
id: "model",
numeric: false,
disablePadding: true,
label: "Model",
disableSort: true,
},
{
id: "status",
numeric: false,
disablePadding: true,
label: "Status",
 disableSort: true,
},

{
id: "docNew",
numeric: false,
disablePadding: true,
label: "Documents",
disableSort: true,
},
{
id: "actionNew",
numeric: false,
disablePadding: true,
label: "Actions",
disableSort: true,
},
],
navigate: (item: any) => {
navigate(`${[Link]}?id=${[Link]}`);
},
};

const fetchData = async () => {

try {
[Link]({
isLoading: true,
message: "Getting Vehicle list...",
});
const payload = { rowsPerPage: 0, pageNo: 1 };
// const response: Iresponse = await [Link](vehiclePath,
{
// params: { entityId, ...payload },
// });
const response: Iresponse = await
[Link](GET_VEHICLE_LIST, {
params: { entityId, ...payload },
});
const { data } = response?.data;
setVehicleList([Link]);

} catch (error) {

} finally {
[Link]({
isLoading: false,
});
}
};

let filteredVehicleList = [Link]((row) => {

if (tabValue === "all") {
return true;
} else {
return [Link]?.toLowerCase() === [Link]();
}
})
?.filter((row) => {
return (

[Link]?.toLowerCase().includes([Link]()) ||

[Link]?.toLowerCase().includes([Link]())
);
 })
.map((vehicle) => {
return {
id: vehicle?._id || vehicle?.id,
VehicleName: vehicle?.name,
registrationNumber: vehicle?.registrationNumber,
status: <MobilityChip label={vehicle?.status} />,
statusFilter: vehicle?.status,

docNew: (() => {

// const openDocumentDialogAction = () => {
// openDocumentDialog(vehicle?.documents,
[Link]);
//
//
// };

const docIcon = (
<MobilityButtonIconView
tooltipTitle="View Documents"
onClick={(e) => {
[Link]();
// openDocumentDialogAction();
navigate(
`${vehicleDetailsPath}?id=$
{vehicle?.id} &selectedTab=documents`
);
}}
/>
);

if (vehicle?.documents?.length > 0) {
return docIcon;
}

return null;
})(),
actionNew: (() => {
const commonIconContainerStyle = {
display: "flex",
justifyContent: "center",
};

const menuList: any = [

<MobilityListItemEdit
label="Edit Vehicle"
onClick={(e) => {
[Link]();
editAction(vehicle);
}}
/>,
];
if (vehicle?.status === "Approved" ||
vehicle?.status === "Active") {
[Link](
<MobilityListItemReject
label="InActive Vehicle"
onClick={(e) => {
[Link]();
rejectAction(vehicle);
}}
/>
);
 } else if (
vehicle?.status === "Rejected" ||
vehicle?.status === "InActive"
) {
[Link](
<MobilityListItemApprove
label="Active Vehicle"
onClick={(e) => {
[Link]();
approveAction(vehicle);
}}
/>
);
} else if (
vehicle?.status === "Pending" ||
vehicle?.status === "Expired"
) {
[Link](
<MobilityListItemApprove
label="Active Vehicle"
onClick={(e) => {
[Link]();
approveAction(vehicle);
}}
/>,
<MobilityListItemReject
label="InActive Vehicle"
onClick={(e) => {
[Link]();
rejectAction(vehicle);
}}
/>
);
}

// return commonIcons;
return (
<div style={commonIconContainerStyle}>
<LongMenu items={menuList} />
</div>
);
})(),

model: vehicle?.model,
// path: vehicleDetailsPath,
};
});

const handleInputChange = (event: [Link]<HTMLInputElement>) =>

{
const inputValue = [Link]?.toLowerCase();

setSearchText(inputValue);
// if ([Link] > 0) {
// const filteredRows = [Link]((row:any) => {
// return (
// [Link]?.toLowerCase().includes(inputValue) ||
// [Link]
// ?.toString()
// ?.toLowerCase()
// .includes(inputValue) ||
// [Link]?.toString()?.toLowerCase().includes(inputValue)
 // );
// });
//
// setFilteredVehicleList(filteredRows);

// const filteredActive = [Link]((row:any) => {

// return (
// [Link] === "Active" &&
// ([Link]?.toLowerCase().includes(inputValue) ||
// [Link]
// ?.toString()
// ?.toLowerCase()
// .includes(inputValue) ||
//
[Link]?.toString()?.toLowerCase().includes(inputValue))
// );
// });
// setActiveVehicles(filteredActive);

// const filteredInActive = [Link]((row:any) => {

// return (
// [Link] === "InActive" &&
// ([Link]?.toLowerCase().includes(inputValue) ||
// [Link]
// ?.toString()
// ?.toLowerCase()
// .includes(inputValue) ||
//
[Link]?.toString()?.toLowerCase().includes(inputValue))
// );
// });
// setInActiveVehicles(filteredInActive);

// const filteredPending = [Link]((row:any) => {

// return (
// [Link] === "Pending" &&
// ([Link]?.toLowerCase().includes(inputValue) ||
// [Link]
// ?.toString()
// ?.toLowerCase()
// .includes(inputValue) ||
//
[Link]?.toString()?.toLowerCase().includes(inputValue))
// );
// });
// setPendingVehicles(filteredPending);
// } else {
// setFilteredVehicleList(VehicleList);

// const filteredActive = [Link]((row:any) => {

// return [Link] === "Active";
// });
// setActiveVehicles(filteredActive);

// const filteredInActive = [Link]((row:any) => {

// return [Link] === "InActive";
// });
// setInActiveVehicles(filteredInActive);

// const filteredPending = [Link]((row:any) => {

// return [Link] === "Pending";
// });
// setPendingVehicles(filteredPending);
// }
 };

const styles = {
extendedTab: {
textTransform: "none",
fontSize: 16,
fontWeight: 400,
},
};
return (
<Grid style={{ padding: 5 }}>
<Paper component={Card} variant="outlined">
<Grid sx={{ display: "flex", justifyContent: "space-
between" }}>
<Grid container>
<Grid item>
<Tabs
value={tabValue}
onChange={(e, newValue) => {
setTabValue(newValue);
}}
>
<Tab label="All Vehicles"
value="all" sx={[Link]} />
<Tab label="Active"
value="active" sx={[Link]} />
<Tab
label="InActive"
value="inActive"
sx={[Link]}
/>
<Tab label="Pending"
value="pending" sx={[Link]} />
</Tabs>
</Grid>
</Grid>

<Grid
container
sx={{
alignItems: "end",
justifyContent: "end",
marginRight: 1,
}}
>
<MobilityTextField
label="Search Vehicle..."
type="text"
name="search"
value={searchText}
maxLength={50}
fullWidth={false}
onChange={(event:
[Link]<HTMLInputElement>) => {
handleInputChange(event);
}}
/>
</Grid>
</Grid>

<Grid padding={2}>
{/* {tabValue === "all" && */}
{[Link] > 0 ? (
<EnhancedTable
 headers={[Link]}
tableData={filteredVehicleList}
/>
) : (
<MobilityEmptyMsg message={"No Data
Found"} />
)}

{/* {tabValue === "active" &&

([Link] > 0 ? (
<EnhancedTable
headers={[Link]}
tableData={activeVehicles}
/>
) : (
<MobilityEmptyMsg message={"No Data Found"} />
))}

{tabValue === "inActive" &&

([Link] > 0 ? (
<EnhancedTable
headers={[Link]}
tableData={inActiveVehicles}
/>
) : (
<MobilityEmptyMsg message={"No Data Found"} />
))}

{tabValue === "pending" &&

([Link] > 0 ? (
<EnhancedTable
headers={[Link]}
tableData={pendingVehicles}
/>
) : (
<MobilityEmptyMsg message={"No Data Found"} />
))} */}
</Grid>
</Paper>
</Grid>
);
};

export default VehicleList;

127]ondc\Admin-portal-frontend\super_admin\src\Components\ProtectedComponents\
Subscribers\[Link]
import React, { FC, ReactElement, useEffect, useState } from "react";
import { Card, Grid, Paper, AlertColor } from "@mui/material";
import { useLocation } from "react-router-dom";
import { useSearchParams, useNavigate } from "react-router-dom";
import { isEmpty } from "lodash";
import MobilityTextField from "../../CommonComponents/MobilityTextField";
import MobilitySelect from "../../CommonComponents/MobilitySelect";
import MobilityButton from "../../CommonComponents/MobilityButton";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../../CommonComponents/MobilitySnackBar";
import { AppContext } from "../../Context/AppContext";
import { MobilityAppBar } from "../../CommonComponents/MobilityAppBar";
import { apiHandler } from "../../ApiServices/ApiHandler";
import { ADD_EDIT_ENTITY_USER } from "../../ApiServices/ApiConstants";
const AddNewSubscriberPath: string = " AddNewSubscriber";

const AddNewSubscriber: FC = (): ReactElement => {

let myContext = [Link](AppContext);

const navigate = useNavigate();

const location = useLocation();

const [queryParameters] = useSearchParams();

const id = [Link]("id");
const entityId = [Link]("entityId");

//
//

const statusOptions = ["Approved", "Pending", "Rejected"];

const stateOptions = ["Maharashtra"];
const [selectedState, setselectedState] = useState<any>("");
const cityOptions = ["Pune"];
const [selectedCity, setselectedCity] = useState<any>("");
const [subscriberName, setSubscriberName] = useState<any>("");
const [address, setAddress] = useState<any>("");
const [bankName, setBankName] = useState<any>("");
const [branchName, setBranchName] = useState<any>("");
const [accountNo, setAccountNo] = useState<any>("");
const [reEnterAccountNo, setreEnterAccountNo] = useState<any>("");
const [ifscCode, setIfscCode] = useState<any>("");
const [micrCode, setMicrCode] = useState<any>("");
const [firstName, setFirstName] = useState<any>("");
const [lastName, setLastName] = useState<any>("");
const [number, setNumber] = useState<any>("");
const [email, setEmail] = useState<any>("");
const [password, setpassword] = useState<any>("");
const [reEnterPassword, setreEnterPassword] = useState<any>("");
const [subscriberPinCode, setSubscriberPinCode] = useState<any>("");
const [BankPinCode, setBankPinCode] = useState<any>("");
const bankStateOptions = ["Maharashtra"];
const [selectedBankState, setselectedBankState] = useState<any>("");
const bankCityOptions = ["Pune"];
const [selectedBankCity, setselectedBankCity] = useState<any>("");
const subscriptionOptions = ["Monthly", "Half-Yearly", "Yearly"];
const [selectedSubscription, setselectedSubscription] = useState<any>("");
const [contactAddress, setContactAddress] = useState<any>("");
const contactStateOptions = ["Maharashtra"];
const [selectedContactState, setselectedContactState] = useState<any>("");
const contactCityOptions = ["Pune"];
const [selectedContactCity, setselectedContactCity] = useState<any>("");
const [ContactPinCode, setContactPinCode] = useState<any>("");
const [subscriberDetails, setSubscriberDetails] = useState<any>(
location?.state?.subscriber
);
const [openSnackBar, setOpenSnackBar] = [Link]<boolean>(false);
const [snackBarSeverity, setSnackBarSeverity] =
[Link]<AlertColor>();
const [message, setMessage] = [Link]<string>("");
const [isLoading, setIsLoading] = useState<boolean>(false);

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}
 const [vehicleDetails, setVehicleDetails] = [Link]<any>({});

useEffect(() => {
if (subscriberDetails) {

setSubscriberName(subscriberDetails?.name);
setselectedSubscription(
subscriberDetails?.subscriptionDetails?.subscriptionName
);
setAddress(subscriberDetails?.address?.address1);
setselectedState(subscriberDetails?.address?.state);
setselectedCity(subscriberDetails?.address?.city);
setSubscriberPinCode(subscriberDetails?.address?.pinCode);

setBankName(subscriberDetails?.bankDetails?.bankName);
setBranchName(subscriberDetails?.bankDetails?.branchName);
setAccountNo(subscriberDetails?.bankDetails?.accountNumber);

setreEnterAccountNo(subscriberDetails?.bankDetails?.accountNumber);
setIfscCode(subscriberDetails?.bankDetails?.ifscCode);
setMicrCode(subscriberDetails?.bankDetails?.micrCode);
setselectedBankState(subscriberDetails?.bankDetails?.state);
setselectedBankCity(subscriberDetails?.bankDetails?.city);
setBankPinCode(subscriberDetails?.bankDetails?.pinCode);

setFirstName(subscriberDetails?.contact?.[0]?.firstName);
setLastName(subscriberDetails?.contact?.[0]?.lastName);
setEmail(subscriberDetails?.contact?.[0]?.email);
setNumber(subscriberDetails?.contact?.[0]?.phone);

//
setContactAddress([Link][0].contactAddress);
//
setselectedContactState([Link][0].state);
setselectedContactCity([Link]?.[0]?.city);
// setContactPinCode([Link][0].pinCode);
}
}, []);

const validateData = () => {

try {
if (!subscriberName || subscriberName?.length == 0) {
ShowSnackbarFailure("Please Enter Subscriber Name",
myContext);
return false;
}
if (!selectedSubscription || selectedSubscription?.length ==
0) {
ShowSnackbarFailure("Please Enter Subscription Type",
myContext);
return false;
}
if (!address || address?.length == 0) {
ShowSnackbarFailure("Please Enter Subscriber Address",
myContext);
return false;
}
//
if (!selectedState || selectedState?.length == 0) {
ShowSnackbarFailure("Please Select State", myContext);
return false;
}
if (!selectedCity || selectedCity?.length == 0) {
 ShowSnackbarFailure("Please Select City", myContext);
return false;
}
if (!subscriberPinCode || subscriberPinCode?.length == 0) {
ShowSnackbarFailure("Please Enter Pin Code", myContext);
return false;
}

if (!bankName || bankName?.length == 0) {
ShowSnackbarFailure("Please Enter Bank Name",
myContext);
return false;
}
if (!branchName || branchName?.length == 0) {
ShowSnackbarFailure("Please Enter Branch Name",
myContext);
return false;
}
if (!accountNo || accountNo?.length == 0) {
ShowSnackbarFailure("Please Enter Account Number",
myContext);
return false;
}
if (!reEnterAccountNo || reEnterAccountNo?.length == 0) {
ShowSnackbarFailure("Please Re-Enter Account Number",
myContext);
return false;
}
if (!ifscCode || ifscCode?.length == 0) {
ShowSnackbarFailure("Please Enter IFSC Code",
myContext);
return false;
}
if (!micrCode || micrCode?.length == 0) {
ShowSnackbarFailure("Please Enter MICR Code",
myContext);
return false;
}
if (!selectedBankState || selectedBankState?.length == 0) {
ShowSnackbarFailure("Please Select State", myContext);
return false;
}
if (!selectedBankCity || selectedBankCity?.length == 0) {
ShowSnackbarFailure("Please Select City", myContext);
return false;
}
if (!firstName || firstName?.length == 0) {
ShowSnackbarFailure("Please Enter First Name",
myContext);
return false;
}
if (!lastName || lastName?.length == 0) {
ShowSnackbarFailure("Please Enter Last Name",
myContext);
return false;
}
if (!number || number?.length == 0) {
ShowSnackbarFailure("Please Enter Number", myContext);
return false;
}
if (!email || email?.length == 0) {
ShowSnackbarFailure("Please Enter Email", myContext);
return false;
}
 // if ([Link] == 0) {
// [Link]("Please Enter Primary Contact Address");
// return false;
// }
// if ([Link] == 0) {
// [Link]("Please Select Primary Contact State");
// return false;
// }
if (!selectedContactCity || selectedContactCity?.length == 0)
{
ShowSnackbarFailure("Please Select Primary Contact
City", myContext);
return false;
}
// if ([Link] == 0) {
// [Link]("Please Enter Primary Contact Pin Code");
// return false;
// }
// if ([Link] == 0) {
// [Link]("Please Enter Password");
// return false;
// }
// if ([Link] == 0) {
// [Link]("Please Re-Enter Password");
// return false;
// }
// if (password !== reEnterPassword) {
// [Link]("Passwords do not match. Please re-enter
the passwords.");
// return false;
// }
if (accountNo !== reEnterAccountNo) {
ShowSnackbarFailure(
"Account do not match. Please re-enter the Account
Number.",
myContext
);
return false;
}
return true;
} catch (error) {
//
}
};

const onPressSubmit = async () => {

//
if (validateData()) {
try {
[Link]({
isLoading: true,
message: "Saving Subscriber data...",
});

let params = {
primaryContact: {
firstName: firstName,
lastName: lastName,
phone: number,
email: email,
//password: password,
// address1: contactAddress,
// state: selectedContactState,
city: selectedContactCity,
 // pinCode: ContactPinCode,
},
bankDetails: {
bankName: bankName,
branchName: branchName,
accountNumber: accountNo,
ifscCode: ifscCode,
micrCode: micrCode,
state: selectedBankState,
city: selectedBankCity,
pinCode: BankPinCode,
},

name: subscriberName,
subscriptionType: selectedSubscription,
address: {
address1: address,
address2: "",
city: selectedCity,
state: selectedState,
pinCode: subscriberPinCode,
},
};

if (subscriberDetails) {
[Link](params, { entityId:
[Link]() });
}

//

// const response: Iresponse = await [Link](

// `/api/add-edit-entity-user`,
// params
// );
const response: Iresponse = await [Link](
ADD_EDIT_ENTITY_USER,
params
);

//
if (!isEmpty(response)) {
//
if (response?.status === 200) {
ShowSnackbarSuccess("Subscriber Saved
Successfully", myContext);

navigate(-1);
} else {
ShowSnackbarFailure(response, myContext);
}
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}
};
 const cardStyle = {
padding: "20px",
margin: "auto",
width: "100%",
boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
marginTop: "10px",
};

const titleStyle = {
alignItems: "center",
display: "flex",
// padding: "1%",
paddingTop: "15px",
paddingBottom: "15px",
fontweight: "800",
};

return (
<Grid>
<Grid item>
<MobilityAppBar
title={subscriberDetails ? "Edit Subscriber" :
"Add New Subscriber"}
onBackClick={() => {
navigate(-1);
}}
// menus={
// <MobilityButton
// label="Raise an Issue"
// onClick={(event:
[Link]<HTMLButtonElement>) => {
// //navigate(`${RaiseIssuePath}`);
// }}
// />
// }
/>
</Grid>

<Paper component={Card} variant="outlined" sx={cardStyle}>

<Grid
item
sx={{
alignItems: "center",
display: "flex",
paddingBottom: "15px",
fontweight: "800",
}}
>
Subscriber Details
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<MobilityTextField
label="Subscriber Name"
maxLength={50}
required={true}
type="text"
name="subscriberName"
value={subscriberName}
onChange={(event: any) => {

setSubscriberName([Link]);
}}
/>
 </Grid>
<Grid item xs={12} sm={6}>
<MobilitySelect
disabled={subscriberDetails ?
selectedSubscription : false}
label="Subscription Type"
value={selectedSubscription}
onChange={(event: any) =>

setselectedSubscription([Link])
}
statusOptions={subscriptionOptions}
/>
</Grid>
<Grid item xs={12} sm={6}>
<MobilityTextField
label="Address"
maxLength={50}
required={true}
name="address"
type="text"
value={address}
onChange={(event: any) => {
setAddress([Link]);
}}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilitySelect
label="State"
value={selectedState}
onChange={(event: any) =>
setselectedState([Link])}
statusOptions={stateOptions}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilitySelect
label="City"
value={selectedCity}
onChange={(event: any) =>
setselectedCity([Link])}
statusOptions={cityOptions}
/>
</Grid>

<Grid item xs={12} sm={3}>

<MobilityTextField
label="Pin Code "
maxLength={6}
required={true}
name="PinCode"
type="text"
value={subscriberPinCode}
onChange={(event: any) => {

setSubscriberPinCode([Link]);
}}
/>
</Grid>
</Grid>
<Grid item sx={titleStyle}>
Bank Details
</Grid>
 <Grid container spacing={3}>
<Grid item xs={12} sm={3}>
<MobilityTextField
label="Bank Name"
maxLength={30}
required={true}
name="bankName"
type="text"
value={bankName}
onChange={(event: any) => {
setBankName([Link]);
}}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilityTextField
label="Branch Name"
maxLength={30}
required={true}
name="branchName"
type="text"
value={branchName}
onChange={(event: any) => {

setBranchName([Link]);
}}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilityTextField
label="Account Number"
maxLength={20}
required={true}
name="accountNumber"
type="text"
value={accountNo}
onChange={(event: any) => {
setAccountNo([Link]);
}}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilityTextField
label="Re-enter Account Number"
maxLength={20}
required={true}
name="accountNumber"
type="text"
value={reEnterAccountNo}
onChange={(event: any) => {

setreEnterAccountNo([Link]);
}}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilityTextField
label="IFSC Code"
maxLength={11}
required={true}
name="IfscCode"
type="text"
value={ifscCode}
 onChange={(event: any) => {
setIfscCode([Link]);
}}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilityTextField
label="MICR Code"
maxLength={9}
required={true}
name="MicrCode"
type="text"
value={micrCode}
onChange={(event: any) => {
setMicrCode([Link]);
}}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilitySelect
label="State"
value={selectedBankState}
onChange={(event: any) =>

setselectedBankState([Link])
}
statusOptions={bankStateOptions}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilitySelect
label="City"
value={selectedBankCity}
onChange={(event: any) =>
setselectedBankCity([Link])}
statusOptions={bankCityOptions}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilityTextField
label="Pin Code "
maxLength={6}
required={true}
name="PinCode"
type="text"
value={BankPinCode}
onChange={(event: any) => {

setBankPinCode([Link]);
}}
/>
</Grid>
</Grid>

<Grid item sx={titleStyle}>

Primary Contact Details
</Grid>

<Grid container spacing={3}>

<Grid item xs={12} sm={3}>
<MobilityTextField
label="First Name"
maxLength={20}
required={true}
 name="firstName"
type="text"
value={firstName}
onChange={(event: any) => {
setFirstName([Link]);
}}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilityTextField
label="Last Name"
maxLength={20}
required={true}
name="lastName"
type="text"
value={lastName}
onChange={(event: any) => {
setLastName([Link]);
}}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilityTextField
label="Mobile Number"
disabled={subscriberDetails ?
selectedSubscription : false}
maxLength={10}
required={true}
name="phone"
type="text"
value={number}
onChange={(event: any) => {
setNumber([Link]);
}}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilityTextField
label="E-Mail Address"
maxLength={40}
required={true}
name="email"
type="email"
value={email}
onChange={(event: any) => {
setEmail([Link]);
}}
/>
</Grid>
{/* <Grid item xs={12} sm={3}>
<MobilityTextField
label="Password"
maxLength={20}
required={true}
name="password"
type="text"
value={password}
onChange={(event: any) => {
setpassword([Link]);
}}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilityTextField
 label="Re-Enter Password"
maxLength={20}
required={true}
name="re-enterPassword"
type="password"
value={reEnterPassword}
onChange={(event: any) => {

setreEnterPassword([Link]);
}}
/>
</Grid> */}

{/* <Grid item xs={12} sm={3}>

<MobilityTextField
label="Address"
maxLength={50}
required={true}
name="address"
type="text"
value={contactAddress}
onChange={(event: any) => {
setContactAddress([Link]);
}}
/>
</Grid> */}
{/* <Grid item xs={12} sm={3}>
<MobilitySelect
label="State"
value={selectedContactState}
onChange={(event: any) =>
setselectedContactState([Link])
}
statusOptions={contactStateOptions}
/>
</Grid> */}
<Grid item xs={12} sm={3}>
<MobilitySelect
label="City"
value={selectedContactCity}
onChange={(event: any) =>

setselectedContactCity([Link])
}
statusOptions={contactCityOptions}
/>
</Grid>

{/* <Grid item xs={12} sm={3}>

<MobilityTextField
label="Pin Code "
maxLength={6}
required={true}
name="PinCode"
type="text"
value={ContactPinCode}
onChange={(event: any) => {
setContactPinCode([Link]);
}}
/>
</Grid> */}
</Grid>

<Grid container sx={{ marginTop: 1, justifyContent:

"flex-end" }}>
<MobilityButton label="Submit"
onClick={onPressSubmit} />
</Grid>
</Paper>
</Grid>
);
};

export default AddNewSubscriber;

128]ondc\Admin-portal-frontend\super_admin\src\Components\ProtectedComponents\
Subscribers\[Link]
import { Card, Grid, Paper, Tabs, Tab } from "@mui/material";
import { isEmpty } from "lodash";
import React, { FC, ReactElement, useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../../CommonComponents/MobilitySnackBar";
import { AppContext } from "../../Context/AppContext";
import EnhancedTable from "../../CommonComponents/EnhancedTable";
import MobilityButton from "../../CommonComponents/MobilityButton";
import MobilityAccordion from "../../CommonComponents/MobilityAccordion";
import { MobilityHeadingValue } from
"../../CommonComponents/MobilityHeadingValue";
import { isConstructorDeclaration } from "typescript";
import { apiHandler } from "../../ApiServices/ApiHandler";
import { GET_VEHICLE_CATEGORY_CONFIG } from "../../ApiServices/ApiConstants";
// import instance from "../../../../CustomUtils/privateaxios";
// import EnhancedTable from "../../../CommonComponents/EnhancedTable";
// import { MobilityButtonIconView } from
"../../../CommonComponents/MobilityButtonIcon";
// import MobilityTextField from "../../../CommonComponents/MobilityTextField";

// import { AppContext } from "../../../Context/AppContext";

// import { MobilityChip } from "../../../CommonComponents/MobilityChip";
// import {
// MobilityListItemApprove,
// MobilityListItemDocuments,
// MobilityListItemEdit,
// MobilityListItemReject,
// MobilityListItemVehicle,
// } from "../../../CommonComponents/MobilityListItem";
// import LongMenu from "../../../CommonComponents/MobilityActionMenu";
// import MobilityEmptyMsg from "../../../CommonComponents/MobilityEmptyMsg";

const driverPath: string = "/api/get-drivers-list";

const subscriberConfiguration: string = "/subscriberConfiguration";

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}
interface categoryState {
name: string;
code: string;

actions: any;
}
const Categories: FC = (): ReactElement => {
let myContext = [Link](AppContext);
const [queryParameters] = useSearchParams();
const entityId = [Link]("id");
// const [queryParameters] = useSearchParams();
// const entityId = [Link]("id");
const [open, setOpen] = [Link](false);

const navigate = useNavigate();

const [CategoryList, setCategoryList] = useState<any>([]);
const [approvedDrivers, setApprovedDrivers] = [Link]<any[]>([]);
const [rejectedDrivers, setRejectedDrivers] = [Link]<any[]>([]);
const [pendingDrivers, setPendingDrivers] = [Link]<any[]>([]);
const [selectedDocument, setSelectedDocument] = [Link]<any>([]);
const [searchText, setSearchText] = [Link]<string>("");
const [categoryDetails, setCategoryDetails] = [Link]<{
cityCode: string | number;
applyBuyerFinderFee: boolean | string;
skipGST: boolean | string;
isMeterBased: boolean | string;
subcategories: any[];
action: any;
}>({
cityCode: "",
applyBuyerFinderFee: "",
skipGST: "",
isMeterBased: "",
subcategories: [],
action: "",
});
const [filteredList, setFilteredList] = [Link]<any[]>([]);
const [tabValue, setTabValue] = [Link]<string>("CAB");
const [autCategoryData, setAutCategoryData] = [Link]<{
cityCode: string | number;
applyBuyerFinderFee: boolean | string;
skipGST: boolean | string;
isMeterBased: boolean | string;
subcategories: any[];
}>({
cityCode: "",
applyBuyerFinderFee: "",
skipGST: "",
isMeterBased: "",
subcategories: [],
});
const [cabData, setCabData] = [Link]<{
cityCode: string | number;
applyBuyerFinderFee: boolean | string;
skipGST: boolean | string;
isMeterBased: boolean | string;
subcategories: any[];
}>({
cityCode: "",
applyBuyerFinderFee: "",
skipGST: "",
isMeterBased: "",
subcategories: [],
});

// const [drivers, setDrivers] = [Link]<driverState[]>([]);

const driverHeader = [
"Name",
"Phone",
"City",
 "Status",
"Documents",
"Actions",
"",
];
// const category = [
// {
// _id: "64ddaacaa5fecda2e2097558",
// // name: "CAB",
// name: "AUTO_RICKSHAW",
// code: "TAXI",
// cityCode: "std:020",
// entityId: "64df4347a5fecda2e20afda0",
// applyBuyerFinderFee: true,
// skipGST: true,
// isMeterBased: true,
// subcategories: [
// {
// action: "",
// _id: "64ddaacaa5fecda2e2097559",
// name: "AECONOMICAL",
// code: "RIDE",
// farePolicies: {
// MIN_FARE: 23,
// PER_KM_CHARGE: 15,
// WAITING_CHARGE_PER_MIN: 3,
// NIGHT_CHARGE_MULTIPLIER: 0.1,
// NIGHT_SHIFT_START_TIME: "22:00",
// NIGHT_SHIFT_END_TIME: "22:00",
// },
// cancellationPoliciesMultiplier: {
// RIDE_ASSIGNED: 0.5,
// RIDE_ARRIVED_PICKUP: 0.4,
// RIDE_STARTED: 0.3,
// DRIVER_EN_ROUTE_TO_PICKUP: 0.2,
// },
// },
// {
// action: "",
// _id: "64ddaacaa5fecda2e2097560",
// name: "ALUXURY",
// code: "RIDE",
// farePolicies: {
// MIN_FARE: 23,
// PER_KM_CHARGE: 15,
// WAITING_CHARGE_PER_MIN: 3,
// NIGHT_CHARGE_MULTIPLIER: 0.1,
// NIGHT_SHIFT_START_TIME: "22:00",
// NIGHT_SHIFT_END_TIME: "22:00",
// },
// cancellationPoliciesMultiplier: {
// RIDE_ASSIGNED: 0,
// RIDE_ARRIVED_PICKUP: 0,
// RIDE_STARTED: 0,
// DRIVER_EN_ROUTE_TO_PICKUP: 0,
// },
// },
// {
// action: "",
// _id: "64ddaacaa5fecda2e2097561",
// name: "SPREMIUM",
// code: "RIDE",
// farePolicies: {
// MIN_FARE: 23,
// PER_KM_CHARGE: 15,
// WAITING_CHARGE_PER_MIN: 3,
// NIGHT_CHARGE_MULTIPLIER: 0.1,
// NIGHT_SHIFT_START_TIME: "22:00",
// NIGHT_SHIFT_END_TIME: "22:00",
// },
// cancellationPoliciesMultiplier: {
// RIDE_ASSIGNED: 0,
// RIDE_ARRIVED_PICKUP: 0,
// RIDE_STARTED: 0,
// DRIVER_EN_ROUTE_TO_PICKUP: 0,
// },
// },
// ],
// },
// {
// _id: "64ddaacaa5fecda2e2097558",
// name: "CAB",
// // name:"AUTO_RICKSHAW",
// code: "TAXI",
// cityCode: "std:020",
// entityId: "64df4347a5fecda2e20afda0",
// applyBuyerFinderFee: true,
// skipGST: false,
// isMeterBased: false,
// subcategories: [
// {
// _id: "64ddaacaa5fecda2e2097559",
// name: "ECONOMICAL",
// code: "RIDE",
// farePolicies: {
// MIN_FARE: 23,
// PER_KM_CHARGE: 15,
// WAITING_CHARGE_PER_MIN: 3,
// NIGHT_CHARGE_MULTIPLIER: 0.1,
// NIGHT_SHIFT_START_TIME: "22:00",
// NIGHT_SHIFT_END_TIME: "22:00",
// },
// cancellationPoliciesMultiplier: {
// RIDE_ASSIGNED: 0.5,
// RIDE_ARRIVED_PICKUP: 0.4,
// RIDE_STARTED: 0.3,
// DRIVER_EN_ROUTE_TO_PICKUP: 0.2,
// },
// },
// {
// _id: "64ddaacaa5fecda2e2097560",
// name: "LUXURY",
// code: "RIDE",
// farePolicies: {
// MIN_FARE: 23,
// PER_KM_CHARGE: 15,
// WAITING_CHARGE_PER_MIN: 3,
// NIGHT_CHARGE_MULTIPLIER: 0.1,
// NIGHT_SHIFT_START_TIME: "22:00",
// NIGHT_SHIFT_END_TIME: "22:00",
// },
// cancellationPoliciesMultiplier: {
// RIDE_ASSIGNED: 0,
// RIDE_ARRIVED_PICKUP: 0,
// RIDE_STARTED: 0,
// DRIVER_EN_ROUTE_TO_PICKUP: 0,
// },
// },
// {
// _id: "64ddaacaa5fecda2e2097561",
// name: "PREMIUM",
// code: "RIDE",
// farePolicies: {
// MIN_FARE: 23,
// PER_KM_CHARGE: 15,
// WAITING_CHARGE_PER_MIN: 3,
// NIGHT_CHARGE_MULTIPLIER: 0.1,
// NIGHT_SHIFT_START_TIME: "22:00",
// NIGHT_SHIFT_END_TIME: "22:00",
// },
// cancellationPoliciesMultiplier: {
// RIDE_ASSIGNED: 0,
// RIDE_ARRIVED_PICKUP: 0,
// RIDE_STARTED: 0,
// DRIVER_EN_ROUTE_TO_PICKUP: 0,
// },
// },
// ],
// },
// ];

useEffect(() => {
// getTableData(1, 0, driverPath, "driver");

fetchData();
}, [open]);

function updatedata(_tabValue: string) {

if (_tabValue === "CAB" && !isEmpty(cabData)) {
setCategoryDetails({
cityCode: [Link],
applyBuyerFinderFee: [Link],
skipGST: [Link],
isMeterBased: [Link],
subcategories: [Link],
action: "sdf",
});
if ([Link]) {
setFilteredList([Link]);
}
} else if (!isEmpty(autCategoryData)) {
setCategoryDetails({
cityCode: [Link],
applyBuyerFinderFee: [Link],
skipGST: [Link],
isMeterBased: [Link],
subcategories: [Link],
action: "sdf",
});
if ([Link]) {
setFilteredList([Link]);
}
}
}

const EnhancedTableConfig = {
headers: [
{
id: "name",
numeric: false,
disablePadding: true,
label: "Name",
 disableSort: false,
},
{
id: "code",
numeric: false,
disablePadding: true,
label: "Code",
disableSort: false,
},
{
id: "action",
numeric: true,
disablePadding: true,
label: "Edit",
disableSort: true,
},
],
};

const fetchData = async () => {

try {
[Link]({
isLoading: true,
message: "Getting Categories list...",
});
const payload = { entityId };
const response: Iresponse = await [Link](
GET_VEHICLE_CATEGORY_CONFIG,
{ params: payload }
);

// const data = [Link];

const auto_Data = [Link](
(_category:any) => _category.name === "AUTO_RICKSHAW"
) || {
cityCode: "",
isMeterBased: "",
applyBuyerFinderFee: "",
skipGST: "",
subcategories: [],
action: "",
};
const cab_Data = [Link](
(_category:any) => _category.name === "CAB"
) || {
cityCode: "",
isMeterBased: "",
applyBuyerFinderFee: "",
skipGST: "",
subcategories: [],
action: "",
};

auto_Data.subcategories=auto_Data.[Link]((subcategory :any) =>

{
return{
...subcategory,
action:
(() => {
 return <MobilityButton
label="Edit"
onClick={(e) => {
[Link]();
// [Link] = [Link];
//openDocumentDialogAction();
navigate(`/subscriberConfiguration?entityId=${entityId}`,
{
state: { subcategory , vehicleCategoryName:"AUTO_RICKSHAW",
cityCode: auto_Data.cityCode},
});
}}
/>;
})(),
};
});

cab_Data.subcategories=cab_Data.[Link]((subcategory:any) => {
return{
...subcategory,
action:
(() => {

return <MobilityButton
label="Edit"
onClick={(e) => {
[Link]();
// [Link] = [Link];
//openDocumentDialogAction();
navigate(`/subscriberConfiguration?entityId=${entityId}`,
{
state: { subcategory, vehicleCategoryName: "CAB" },
});
}}
/>;
})(),
};
});
// [Link] = "";
// (() => {

// const edit = (
// <MobilityButton
// label="Edit"
// onClick={(e) => {
// [Link]();
// // [Link] = [Link];
// //openDocumentDialogAction();
// // navigate(`${subscriberConfiguration}`, {
// // state: { subCat },
// // });
// }}
// />
// );

// return edit;
// })(),
// };

// });
// }
setAutCategoryData(auto_Data);
setCabData(cab_Data);
 if (tabValue === "CAB" && !isEmpty(cab_Data)) {
setCategoryDetails({
cityCode: cab_Data.cityCode,
applyBuyerFinderFee: cab_Data.applyBuyerFinderFee,
skipGST: cab_Data.skipGST,
isMeterBased: cab_Data.isMeterBased,
subcategories: cab_Data.subcategories,
action: "sdf",
});
if (cab_Data.[Link]) {
setFilteredList(cab_Data.subcategories);
}
} else if (!isEmpty(auto_Data)) {
setCategoryDetails({
cityCode: auto_Data.cityCode,
applyBuyerFinderFee: auto_Data.applyBuyerFinderFee,
skipGST: auto_Data.skipGST,
isMeterBased: auto_Data.isMeterBased,
subcategories: auto_Data.subcategories,
action: "sdf",
});
if (auto_Data.[Link]) {
setFilteredList(auto_Data.subcategories);
}
}

// action: (() => {

// // const openDocumentDialogAction = () => {
// // openDocumentDialog(driver?.documents, [Link]);
// // };
// const edit = (
// <MobilityButton
// label="Edit"
// onClick={(e) => {
// [Link]();
// [Link] = [Link];
// //openDocumentDialogAction();
// navigate(`${subscriberConfiguration}`, {
// state: { subCat },
// });
// }}
// />
// );
// // if (driver?.documents?.length > 0) {
// return edit;
// // }
// // return null;
// })(),

// const { data } = response?.data;

//
// setCategoryList([Link]?.data);
// // setCategoryList(data);

//
} catch (error) {

} finally {
[Link]({
isLoading: false,
});
}
};
 // let aCategory = [Link]((cat :any)=>{
// return cat?.categoryName?.toLowerCase() === [Link]();
// })[0];
//

// let aSubCategory =
aCategory?.[Link]((subCategory :any)=>{return subCategory});
//

// let filteredList1 = aSubCategory?.map((item :any)=>{return item});

//

// let filteredList = [Link]((category: any) => {return

category});
//

// let filteredList = [Link]((category: any) => {

//
// // if (tabValue === "cab") {
// // return true;
// // } else {
// return category?.categoryName?.toLowerCase() === [Link]();
// // }
// }).map((subCat: any) => {
//
// // return [Link]((sub:any)=>
// // {

// var a = subCat?.subcategories?.map((subCategory: any) => {

// [Link] = [Link];
//
// return subCategory;
// });

//
// return a;
// //return {
// // name: [Link],
// // code: [Link],
// // id: driver?.id,
// // firstName: `${driver?.firstName || ""} ${driver?.lastName || "
"}`,
// // phone: driver?.phone,
// // city: driver?.city,
// // status: label={driver?.status || ""} />,
// // statusFilter: driver?.status || "",

// // action: (() => {

// // // const openDocumentDialogAction = () => {
// // // openDocumentDialog(driver?.documents, [Link]);
// // // };

// // const edit = (
// // <MobilityButton
// // label="Edit"
// // onClick={(e) => {
// // [Link]();
// // [Link] = [Link];
// // //openDocumentDialogAction();
// // navigate(`${subscriberConfiguration}`, {
// // state: { subCat },
// // });
// // }}
// // />
// // );

// // // if (driver?.documents?.length > 0) {
// // return edit;
// // // }
// // // return null;
// // })(),
// //};
// //} );
// });

// const updatedCategoryList = [Link]((category) => {

// const editButton = (
// <Button
// key={`edit-${[Link]}`}
// onClick={(e) => {
// [Link]();
// // Assuming you have a navigation link for editing categories
// navigate(`${}?id=${[Link]}`);
// }}
// >
// Edit
// </Button>
// );

// return {
// ...category,
// action: editButton,
// };
// });
const styles = {
extendedTab: {
textTransform: "none",
fontSize: 16,
fontWeight: 400,
},
};
return (
<Grid style={{ padding: 5 }}>
<Paper component={Card} variant="outlined">
<Grid sx={{ display: "flex", justifyContent: "space-between" }}>
<Grid container>
<Grid item>
<Tabs
value={tabValue}
onChange={(e, newValue) => {
setTabValue(newValue);
updatedata(newValue);
}}
>
<Tab label="CAB" value="CAB" sx={[Link]} />
<Tab
label="AUTO_RICKSHAW"
value="AUTO_RICKSHAW"
sx={[Link]}
/>
</Tabs>
</Grid>
</Grid>
{/* <Grid
container
sx={{
alignItems: "start",
justifyContent: "start",
 // marginRight: 1,
}}
></Grid> */}
</Grid>
<Grid container spacing={1}>
<Grid item xs={12} md={12}>
<MobilityAccordion
isExpanded={true}
title={"Category Details"}
details={
<>
<MobilityHeadingValue
heading="City Code"
value={categoryDetails?.cityCode}
// value={undefined}
/>
<MobilityHeadingValue
heading="Buyer Finder Fee"
value={categoryDetails?.applyBuyerFinderFee}
// value={undefined}
/>
<MobilityHeadingValue
heading="Skip GST"
value={categoryDetails?.skipGST}
// value={undefined}
/>
<MobilityHeadingValue
heading="IsMeter Based"
value={[Link]}
// value={undefined}
/>
</>
}
/>
</Grid>
</Grid>

{/* <Grid
container
sx={{
alignItems: "end",
justifyContent: "end",
marginRight: 1,
}}
></Grid> */}

<Grid padding={2}>
{/* {tabValue === "all" && */}
{/* {[Link] > 0 ? ( */}
<EnhancedTable
headers={[Link]}
tableData={filteredList}
/>
{/* ) : (
<MobilityEmptyMsg message={"No Data Found"} />
)} */}
</Grid>
</Paper>
</Grid>
);
};

export default Categories;

 129]ondc\Admin-portal-frontend\super_admin\src\Components\ProtectedComponents\
Subscribers\[Link]
import { Card, Grid, Paper, SelectChangeEvent } from "@mui/material";
import React, { useEffect, useState } from "react";
import MobilitySelect from "../../CommonComponents/MobilitySelect";
import MobilityButton from "../../CommonComponents/MobilityButton";
import MobilityTextField from "../../CommonComponents/MobilityTextField";
import MobilityTimePicker from "../../CommonComponents/MobilityTimePicker";
import dayjs, { Dayjs } from "dayjs";
import {
DateValidationError,
PickerChangeHandlerContext,
TimeValidationError,
} from "@mui/x-date-pickers";
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
import { MobilityAppBar } from "../../CommonComponents/MobilityAppBar";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../../CommonComponents/MobilitySnackBar";
import { AppContext } from "../../Context/AppContext";
import { isEmpty } from "lodash";
// import instance from "../../../CustomUtils/privateaxios";

import { formatDateTime } from "../../../CustomUtils/DateTimeUtils";

import { apiHandler } from "../../ApiServices/ApiHandler";
import { GET_VEHICLE_CATEGORY } from "../../ApiServices/ApiConstants";

const SubscriberConfiguration = (route: any) => {

const navigate = useNavigate();
const location = useLocation();
const [categoryDetails, setCategoryDetails] = useState<any>(
location?.state?.subcategory
);
const [vehicleCategory, setVehicleCategory] = useState<any>(
location?.state?.vehicleCategoryName
);
const [cityCategory, setCityCategory] = useState<any>(
location?.state?.cityCode
);

let myContext = [Link](AppContext);

const cityCodeMaper:any = {
"std:020": "Pune",
"std:022": "Mumbai"

const vehicleOptions = ["AUTO_RICKSHAW", "CAB"];

const [selectedVehicleCategory, setselectedVehicleCategory] =
useState<any>("");
const cityOptions = ["Pune", "Mumbai"];
const [selectedCity, setselectedCity] = useState<any>("");
const vehicleSubOptions = ["ECONOMICAL", "LUXURY", "CAB", "AUTO_RICKSHAW"];
const [selectedVehicleSubCategory, setselectedVehicleSubCategory] =
useState<any>("");
const codeOptions = ["RIDE"];
const [selectedCode, setSelectedCode] = useState<any>("RIDE");
const [minimumFare, setMinimumFare] = useState<any>("");
const [perKm, setPerKm] = useState<any>("");
const [waitingCharges, setWaitingCharges] = useState<any>("");
const [nightCharges, setNightCharges] = useState<any>("0");
 const [rideAssigned, setRideAssigned] = useState<any>("0");
const [diverAtPickup, setDiverAtPickup] = useState<any>("0");
const [rideStarted, setRideStarted] = useState<any>("0");
const [driverEnRoute, setDriverEnRoute] = useState<any>("0");
const [rideEnded, setRideEnded] = useState<any>("0");
// const applyBuyerFinderFeeOptions = [ {text: 'YES',value:true },{text:
'NO',value:false}];
const applyBuyerFinderFeeOptions = ["YES", "NO"];

const [queryParameters] = useSearchParams();

const entityId = [Link]("entityId");

const [selectedApplyBuyerFinderFee, setSelectedApplyBuyerFinderFee] =

useState<any>("");
const skipGSTOptions = ["YES", "NO"];
const [selectedSkipGST, setSelectedSkipGST] = useState<any>("");
const MeterBasedOptions = ["YES", "NO"];
const [selectedMeterBased, setSelectedMeterBased] = useState<any>("");
const [startTime, setStartTime] = [Link]<any | undefined>();
const [endTime, setEndTime] = [Link]<any | undefined>();

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

useEffect(() => {
if (categoryDetails) {

setselectedCity(cityCodeMaper[cityCategory]);

setselectedVehicleCategory(vehicleCategory);
setselectedVehicleSubCategory(categoryDetails?.name);
setSelectedApplyBuyerFinderFee(
categoryDetails?.applyBuyerFinderFee ? "YES" : "NO"
);
setSelectedMeterBased(categoryDetails?.isMeterBased ? "YES" : "NO");
setSelectedSkipGST(categoryDetails?.skipGST ? "YES" : "NO");

setMinimumFare(categoryDetails?.farePolicies?.MIN_FARE);

setPerKm(categoryDetails?.farePolicies?.PER_KM_CHARGE);
setWaitingCharges(categoryDetails?.farePolicies?.WAITING_CHARGE_PER_MIN);
setNightCharges(categoryDetails?.farePolicies?.NIGHT_CHARGE_MULTIPLIER);
// setStartTime(categoryDetails?.farePolicies?.NIGHT_SHIFT_END_TIME);
setStartTime(dayjs(categoryDetails?.farePolicies?.NIGHT_SHIFT_END_TIME));

setEndTime(
categoryDetails?.farePolicies?.NIGHT_SHIFT_START_TIME.toString()
);

setRideAssigned(
categoryDetails?.cancellationPoliciesMultiplier?.RIDE_ASSIGNED
);
setDiverAtPickup(
categoryDetails?.cancellationPoliciesMultiplier?.RIDE_ARRIVED_PICKUP
);
setRideStarted(
categoryDetails?.cancellationPoliciesMultiplier?.RIDE_STARTED
 );
setDriverEnRoute(
categoryDetails?.cancellationPoliciesMultiplier
?.RIDE_ENROUTE_PICKUP
);
setRideEnded(
categoryDetails?.cancellationPoliciesMultiplier?.
RIDE_ENDED
);
}
}, []);
const validateData = () => {
try {
if (!selectedCity || selectedCity?.length == 0) {
ShowSnackbarFailure("Please Select City", myContext);
return false;
}
if (!selectedVehicleCategory || selectedVehicleCategory?.length == 0) {
ShowSnackbarFailure("Please Select Vehicle Category", myContext);
return false;
}
if (
!selectedVehicleSubCategory ||
selectedVehicleSubCategory?.length == 0
) {
ShowSnackbarFailure("Please Select Vehicle Sub-Category", myContext);
return false;
}
if (!selectedCode || selectedCode?.length == 0) {
ShowSnackbarFailure("Please Select Code", myContext);
return false;
}
if (!minimumFare || minimumFare?.length == 0) {
ShowSnackbarFailure("Please Enter Minimum Fare", myContext);
return false;
}
if (!perKm || perKm?.length == 0) {
ShowSnackbarFailure("Please Enter Per KM", myContext);
return false;
}
if (!waitingCharges || waitingCharges?.length == 0) {
ShowSnackbarFailure("Please Enter Waiting Charges", myContext);
return false;
}
if (!nightCharges || nightCharges?.length == 0) {
ShowSnackbarFailure("Please Enter Night Charges", myContext);
return false;
}
if (!rideAssigned || rideAssigned?.length == 0) {
ShowSnackbarFailure(
"Please Enter Ride Assigned Multiplier in Cancellation Charges",
myContext
);
return false;
}
if (!diverAtPickup || diverAtPickup?.length == 0) {
ShowSnackbarFailure(
"Please Enter Driver at pickup Multiplier in Cancellation Charges",
myContext
);
return false;
}
if (!rideStarted || rideStarted?.length == 0) {
ShowSnackbarFailure(
 "Please Enter Ride Started Multiplier in Cancellation Charges",
myContext
);
return false;
}
if (!driverEnRoute || driverEnRoute?.length == 0) {
ShowSnackbarFailure(
"Please Enter Driver EN Route Multiplier in Cancellation Charges",
myContext
);
return false;
}
if (!rideEnded || rideEnded?.length == 0) {
ShowSnackbarFailure(
"Please Enter Ride Ended Multiplier in Cancellation Charges",
myContext
);
return false;
}
if (
!selectedApplyBuyerFinderFee ||
selectedApplyBuyerFinderFee?.length == 0
) {
ShowSnackbarFailure("Please Select Apply Buyer Finder Fee", myContext);
return false;
}
if (!selectedSkipGST || selectedSkipGST?.length == 0) {
ShowSnackbarFailure("Please Select Skip GST", myContext);
return false;
}
if (!selectedMeterBased || selectedMeterBased?.length == 0) {
ShowSnackbarFailure("Please Select Meter Based", myContext);
return false;
}
if (endTime < startTime) {
ShowSnackbarFailure(
"End time must be greater than start time",
myContext
);
return;
}
return true;
} catch (error) {

}
};

const onPressSubmit = async () => {

if (validateData()) {
try {
let params = {
subCategoryId: categoryDetails?._id,
categoryName: categoryDetails?.name,
entityId,
vehicleCategoryDetails: {
city: selectedCity,
vehicleCategory: selectedVehicleCategory,
vehicleSubCategory: selectedVehicleSubCategory,
code: selectedCode,

applyBuyerFinderFee:
selectedApplyBuyerFinderFee === "YES" ? true : false,
skipGST: selectedSkipGST === "YES" ? true : false,
ismeterBased: selectedMeterBased === "YES" ? true : false,
 },

farePolicies: {
minimumFare: minimumFare,
perKm: perKm,
waitingCharges: waitingCharges,
nightCharges: nightCharges,
startTime: startTime?.toString(),
endTime: endTime?.toString(),
},

cancellationPolicies: {
rideAssigned: rideAssigned,
diverAtPickup: diverAtPickup,
rideStarted: rideStarted,
driverEnRoute: driverEnRoute,
rideEnded: rideEnded,
},
};

const response: Iresponse = await [Link](

GET_VEHICLE_CATEGORY,
params
);

if (!isEmpty(response)) {

if (response?.status === 200) {

ShowSnackbarSuccess("Saved Successfully", myContext);
navigate(-1);
} else {
ShowSnackbarFailure(response, myContext);
}
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (error) {
ShowSnackbarFailure(error, myContext);
}
}
};
const cardStyle = {
padding: "20px",
margin: "auto",
width: "100%",
boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
marginTop: "10px",
};
const titleStyle = {
alignItems: "center",
display: "flex",
// padding: "1%",
// paddingTop: "15px",
paddingBottom: "15px",
fontweight: "800",
};
return (
<Grid>
<Grid item>
<MobilityAppBar
// title="Subscriber Configuration"
title={
categoryDetails
 ? "Edit Subscriber Configuration"
: "Subscriber Configuration"
}
onBackClick={() => {
navigate(-1);
}}
/>
</Grid>

<Paper component={Card} variant="outlined" sx={cardStyle}>

<Grid item sx={titleStyle}>
Vehicle Category Details
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={3}>
<MobilitySelect
label="City"
disabled={categoryDetails ? selectedCity : false}
value={selectedCity}
onChange={(event: any) => setselectedCity([Link])}
statusOptions={cityOptions}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilitySelect
label="Select Vehicle Category"
disabled={categoryDetails ? selectedVehicleCategory : false}
value={selectedVehicleCategory}
statusOptions={vehicleOptions}
onChange={(event: any) =>
setselectedVehicleCategory([Link])
}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilitySelect
label="Select Vehicle SubCategory"
disabled={categoryDetails ? selectedVehicleSubCategory : false}
value={selectedVehicleSubCategory}
statusOptions={vehicleSubOptions}
onChange={(event: any) =>
setselectedVehicleSubCategory([Link])
}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilitySelect
label="Code"
value={selectedCode}
statusOptions={codeOptions}
onChange={(event: any) => setSelectedCode([Link])}
/>
</Grid>
</Grid>

<Grid item sx={titleStyle} style={{ paddingTop: "20px" }}>

Fare Policies
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={3}>
<MobilityTextField
maxLength={4}
required={true}
label="Minimum Fare"
 type="text"
name="number"
value={minimumFare}
onChange={(event: any) => {
setMinimumFare([Link]);
}}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilityTextField
maxLength={4}
required={true}
label="Per KM Charges"
type="text"
name="number"
value={perKm}
onChange={(event: any) => {
setPerKm([Link]);
}}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilityTextField
maxLength={4}
required={true}
label="Waiting Charges per minute"
type="text"
name="number"
value={waitingCharges}
onChange={(event: any) => {
setWaitingCharges([Link]);
}}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilityTextField
maxLength={4}
required={true}
label="Night Charges Multiplier"
type="number"
name="multiplier"
value={nightCharges}
onChange={(event: any) => {
setNightCharges([Link]);
}}
/>
</Grid>

<Grid item xs={12} sm={3}>

<MobilityTimePicker
label="Night Shift Start Time"
disabled={categoryDetails ? startTime : false}
value={startTime}
onChange={(value: any) => {

setStartTime(value);
}}
/>
</Grid>

<Grid item xs={12} sm={3}>

<MobilityTimePicker
label="Night Shift End Time"
disabled={categoryDetails ? endTime : false}
 value={endTime}
onChange={(value: any) => {

setEndTime(value);
}}
/>
</Grid>
</Grid>

<Grid item sx={titleStyle} style={{ paddingTop: "20px" }}>

Cancellation Policies (Multiplier)
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={3}>
<MobilityTextField
maxLength={4}
required={true}
label="RIDE_ASSIGNED"
type="number"
name="multiplier"
value={rideAssigned}
onChange={(event: any) => {
setRideAssigned([Link]);
}}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilityTextField
maxLength={4}
required={true}
label="DRIVER_AT_PICKUP"
type="number"
name="multiplier"
value={diverAtPickup}
onChange={(event: any) => {
setDiverAtPickup([Link]);
}}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilityTextField
maxLength={4}
required={true}
label="RIDE_STARTED"
type="number"
name="multiplier"
value={rideStarted}
onChange={(event: any) => {
setRideStarted([Link]);
}}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilityTextField
maxLength={4}
required={true}
label="DRIVER_EN_ROUTE"
type="number"
name="multiplier"
value={driverEnRoute}
onChange={(event: any) => {
setDriverEnRoute([Link]);
}}
/>
 </Grid>
<Grid item xs={12} sm={3}>
<MobilityTextField
maxLength={4}
required={true}
label="RIDE_ENDED"
type="number"
name="multiplier"
value={rideEnded}
onChange={(event: any) => {
setRideEnded([Link]);
}}
/>
</Grid>
</Grid>

<Grid item sx={titleStyle} style={{ paddingTop: "20px" }}>

Features
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={3}>
<MobilitySelect
label="Apply Buyer Finder Fee"
disabled={categoryDetails ? selectedApplyBuyerFinderFee : false}
value={selectedApplyBuyerFinderFee}
onChange={(event: any) =>
setSelectedApplyBuyerFinderFee([Link])
}
statusOptions={applyBuyerFinderFeeOptions}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilitySelect
label="Skip GST"
disabled={categoryDetails ? selectedSkipGST : false}
value={selectedSkipGST}
onChange={(event: any) => setSelectedSkipGST([Link])}
statusOptions={skipGSTOptions}
/>
</Grid>
<Grid item xs={12} sm={3}>
<MobilitySelect
label="Is Meter Based"
disabled={categoryDetails ? selectedMeterBased : false}
value={selectedMeterBased}
onChange={(event: any) =>
setSelectedMeterBased([Link])
}
statusOptions={MeterBasedOptions}
/>
</Grid>
</Grid>
<Grid container sx={{ marginTop: 1, justifyContent: "flex-end" }}>
<MobilityButton label="Submit" onClick={onPressSubmit} />
</Grid>
</Paper>
</Grid>
);
};

export default SubscriberConfiguration;

130]ondc\Admin-portal-frontend\super_admin\src\Components\ProtectedComponents\
Subscribers\[Link]
import { FC, useState, useEffect } from "react";
import { Card, Tabs, Box, Tab, Grid, Paper } from "@mui/material";
import { useNavigate, useSearchParams } from "react-router-dom";
import { isEmpty } from "lodash";
import VehicleList from "./vehicle/vehicleList";
import DriverList from "./driver/driverList";
import { AppContext } from "../../Context/AppContext";
import React from "react";
import { MobilityAppBar } from "../../CommonComponents/MobilityAppBar";
import MobilityButton from "../../CommonComponents/MobilityButton";
import { Add } from "@mui/icons-material";
import Categories from "./Categories";

const entityByIdApiPath: string = "api/get-entity-details-by-id";

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

interface SubscriberDetailsProps {
name: string;
}

const SubscriberDetails: FC<SubscriberDetailsProps> = ({ name }) => {

const [queryParameters] = useSearchParams();
const entityId = [Link]("id");
const navigate = useNavigate();
const [subscriberDetails, setSubscriberDetails] = useState<any>({});

const [tabeValue, setTabeValue] = useState<string>("Drivers");

let myContext = [Link](AppContext);

// async function getSubscribersById() {

// try {
// [Link]({
// isLoading: true,
// message: "Getting Subscriber details...",
// });
// const { data: response }: Iresponse = await [Link](
// entityByIdApiPath,
// {
// params: { id: entityId },
// }
// );

// if (!isEmpty(response)) {
// const { data } = response;

// setSubscriberDetails({
// id: data?.id || data?._id,
// name: data?.name,
// type: data?.type,
// });
// }
// } catch (err: any) {
//
// }finally {
// [Link]({ isLoading: false });
// }
// }
 useEffect(() => {
//getSubscribersById();
}, []);

const styles = {
extendedTab: {
//minWidth: "500px",
textTransform: "none",
fontSize: 16,
fontWeight: 500,
},
};

const cardStyle = {
//padding: "26px",
//margin: "auto",
//width: "100%",
boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
marginTop: "10px",
//padding: 2,
//margin: 1,
};

return (
<div>
<Grid style={{ padding: 5 }}>
<MobilityAppBar
title="Subscriber Details"
onBackClick={() => {
navigate(-1);
}}
// menus={
// <MobilityButton
// label="Raise an Issue"
// onClick={(event: [Link]<HTMLButtonElement>) =>
{
// //navigate(`${RaiseIssuePath}`);
// }}
// />
// }
/>

{/* <Card>
<CardHeader title="Subscriber details"
style={{ textAlign: "start" }} />
<CardContent style={{ textAlign: "start" }}>
{subscriberDetails?.name}
</CardContent>
</Card> */}
<Paper component={Card} variant="outlined" sx={cardStyle}>
<Box
sx={{
// display: "flex",
// borderBottom: 1,
// borderColor: "divider",
backgroundColor: "white",
// justifyContent: "space-between",
}}
>
<Tabs
value={tabeValue}
onChange={(e, newValue) => {

setTabeValue(newValue);
 }}
>
<Tab
label="Drivers/Users"
value="Drivers"
sx={[Link]}
/>
<Tab label="Vehicles" value="Vehicles" sx={[Link]} />

<Tab label="Categories" value="Categories"

sx={[Link]}/>

<Grid
container
sx={{
alignItems: "end",
justifyContent: "end",
marginRight: 1,
}}
>
<MobilityButton
// icon={<Add />}
label="Subscriber Configuration"
onClick={(event: [Link]<HTMLButtonElement>) => {
navigate(`/subscriberConfiguration?entityId=${entityId}`);
}}
/>
</Grid>
</Tabs>
</Box>
{/* {tabeValue === "Drivers" ? <DriverList /> :
// <VehicleList />
<Categories/>} */}
{tabeValue === "Drivers" && <DriverList /> ||
tabeValue === "Vehicles" && <VehicleList /> ||
tabeValue === "Categories" && <Categories />}
{/* {tabeValue === "Drivers" ? <DriverList /> :
tabeValue === "Vehicles" ? <VehicleList /> :
<Categories />} */}
</Paper>
</Grid>
</div>
);
};

export default SubscriberDetails;

131]ondc\Admin-portal-frontend\super_admin\src\Components\ProtectedComponents\
Subscribers\[Link]
import { FC, ReactElement, useState, useEffect } from "react";
import { Card, Grid, Tab, Tabs } from "@mui/material";
import * as React from "react";
import Paper from "@mui/material/Paper";
import _ from "lodash";
import { useNavigate } from "react-router-dom";
import EnhancedTable from "../../CommonComponents/EnhancedTable";
import { MobilityButtonIconView } from
"../../CommonComponents/MobilityButtonIcon";
import MobilityButton from "../../CommonComponents/MobilityButton";
import MobilitySubscriptionDialog from
"../../CommonComponents/MobilitySubscriptionDialog";
import { AppContext } from "../../Context/AppContext";
import {
ShowSnackbarFailure,
 ShowSnackbarSuccess,
} from "../../CommonComponents/MobilitySnackBar";
import { MobilityChip } from "../../CommonComponents/MobilityChip";
import {
MobilityListItemApprove,
MobilityListItemEdit,
MobilityListItemReject,
MobilityListItemRenew,
MobilityListItemUpgarde,
} from "../../CommonComponents/MobilityListItem";
import LongMenu from "../../CommonComponents/MobilityActionMenu";
import MobilityEmptyMsg from "../../CommonComponents/MobilityEmptyMsg";
import { Add } from "@mui/icons-material";
import { apiHandler } from "../../ApiServices/ApiHandler";
import {
CHANGE_ENTITY_STATUS,
GET_ENTITY_LIST,
} from "../../ApiServices/ApiConstants";

//const entityApiPath = "/api/get-entity-list";

interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

const Subscribers: FC = (): ReactElement => {

let myContext = [Link](AppContext);
const navigate = useNavigate();

const [page, setPage] = [Link]<number>(0);

const [rowsPerPage, setRowsPerPage] = [Link]<number>(5);
const [subscribersList, setSubscribersList] = useState<any>([]);
const [filteredList, setFilteredList] = useState<any>([]);
const [activeSubscribers, setActiveSubscribers] =
[Link]<any[]>([]);
const [inActiveSubscribers, setInActiveSubscribers] =
[Link]<any[]>(
[]
);
const [pendingSubscribers, setPendingSubscribers] =
[Link]<any[]>([]);
const [openDialog, setOpenDialog] = [Link](false);
const [dialogTitle, setDialogTitle] = [Link]("");
const [entityId, setEntityId] = [Link]("");
const [planType, setPlanType] = [Link]("");
const [tabValue, setTabValue] = [Link]<string>("all");

async function PlanStatus(status: any, entityId: any) {

try {
[Link]({
isLoading: true,
message: "Changing Entity status...",
});

const payload = {
entityId: entityId,
status: status,
};

// const response: Iresponse = await [Link](

// `/api/change-entity-status`,
 // payload
// );
const response: Iresponse = await [Link](
CHANGE_ENTITY_STATUS,
payload
);

if ([Link] === 200) {

ShowSnackbarSuccess(response, myContext);
getSubscribersList(page, 0);
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({ isLoading: false });
}
}

async function getSubscribersList(page: number, rowsPerPage: number) {

try {
[Link]({
isLoading: true,
message: "Loading Subscriber List...",
});

const payload = { rowsPerPage, pageNo: page };

//const response: Iresponse = await

[Link](entityApiPath);

const response: Iresponse = await

[Link](GET_ENTITY_LIST);

if ([Link] === 200) {

const { data } = response;
//

let allList: any = [],

activeList: any = [],
inActiveList: any = [],
pendingList: any = [];

const _data = data?.data?.map((subscriber: any) => {

let item = {
id: subscriber?.id,
type: subscriber?.type,
name: subscriber?.name,
city: subscriber?.address?.city,
status: <MobilityChip
label={subscriber?.status} />,

view: (
<MobilityButtonIconView
tooltipTitle="View Subscriber
Details"
onClick={(e) => {
[Link]();

navigate(`/subscriberDetails?id=${subscriber?.id}`);
}}
/>
 ),

actionNew: (() => {

const renewAction = () => {
[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you
want to proceed?",
onYesClick: () => {
setOpenDialog(true);
setDialogTitle("Renew
Subscription");

setEntityId([Link]);

setPlanType("Renewal");
},
});
};
const upgradeAction = () => {
[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you
want to proceed?",
onYesClick: () => {
setOpenDialog(true);

setDialogTitle("Upgrade Subscription");

setEntityId([Link]);

setPlanType("Upgrade");
},
});
};
const editAction = () => {
navigate(`/addNewSubscriber?id=$
{subscriber?.id}`, {
state: { subscriber },
});
};
const activeAction = () => {
[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you
want to proceed?",
onYesClick: () => {
PlanStatus("Active",
[Link]);
},
});
};

const inActiveAction = () => {

[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you
want to proceed?",
onYesClick: () => {
 PlanStatus("InActive", [Link]);
},
});
};

const commonIconContainerStyle = {
display: "flex",
justifyContent: "center",
};

const menuList: any = [

<MobilityListItemEdit
label="Edit Subscriber"
onClick={(e) => {
[Link]();
editAction();
}}
/>,
];
if (subscriber?.status === "Active") {
if
(subscriber?.subscriptionDetails?.status === "Active") {
[Link](
<>

<MobilityListItemReject

label="Inactive Subscriber"

onClick={(e) => {

[Link]();

inActiveAction();
}}
/>

<MobilityListItemUpgarde

label="Upgrade Subscription"

onClick={(e) => {

[Link]();

upgradeAction();
}}
/>
</>
);
} else if (

subscriber?.subscriptionDetails?.status === "InActive"

) {
[Link](
<>

<MobilityListItemReject

label="Inactive"

onClick={(e) => {

[Link]();
 inActiveAction();
}}
/>

<MobilityListItemRenew

label="Renew Subscription"

onClick={(e) => {

[Link]();

renewAction();
}}
/>
</>
);
} else if (

subscriber?.subscriptionDetails?.status === "Pending"

) {
[Link](

<MobilityListItemReject
label="Inactive
Subscriber"
onClick={(e) =>
{

[Link]();

inActiveAction();
}}
/>
);
}
} else if (subscriber?.status ===
"InActive") {
[Link](
<MobilityListItemApprove
label="Active
Subscriber"
onClick={(e) => {

[Link]();
activeAction();
}}
/>
);
} else if (subscriber?.status ===
"Pending") {
[Link](
<>

<MobilityListItemApprove
label="Active
Subscriber"
onClick={(e) =>
{

[Link]();

activeAction();
 }}
/>

<MobilityListItemReject
label="Inactive
Subscriber"
onClick={(e) =>
{

[Link]();

inActiveAction();
}}
/>
</>
);
}
return (
<div
style={commonIconContainerStyle}>
<LongMenu
items={menuList} />
</div>
);
})(),
};

switch (subscriber?.status?.toString()) {
case "Active":
[Link](item);
break;
case "InActive":
[Link](item);
break;
case "Pending":
[Link](item);
break;
}

[Link](item);
});

setActiveSubscribers(activeList);
setInActiveSubscribers(inActiveList);
setPendingSubscribers(pendingList);
setSubscribersList(allList);
setFilteredList(allList);
//setSubscribersList(_data);
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
}

useEffect(() => {
getSubscribersList(page, rowsPerPage < 0 ? 0 : rowsPerPage);
}, []);
 const EnhancedTableConfig = {
headers: [
{
id: "name",
numeric: false,
disablePadding: true,
label: "Name",
disableSort: true,
},
{
id: "city",
numeric: false,
disablePadding: true,
label: "City",
disableSort: false,
},
{
id: "status",
numeric: false,
disablePadding: true,
label: "Status",
disableSort: true,
},
{
id: "view",
numeric: false,
disablePadding: true,
label: "Details",
disableSort: true,
},
{
id: "actionNew",
numeric: false,
disablePadding: true,
label: "Actions",
disableSort: true,
},
],
};

const handleButtonClick = () => {

navigate("/addNewSubscriber");
};

const styles = {
extendedTab: {
textTransform: "none",
fontSize: 16,
fontWeight: 400,
},
};

return (
<Paper component={Card} variant="outlined">
<Grid sx={{ display: "flex", justifyContent: "space-
between" }}>
<Grid container>
<Grid item>
<Tabs
value={tabValue}
onChange={(e, newValue) => {
setTabValue(newValue);
}}
 >
<Tab
label="All Subscribers"
value="all"
sx={[Link]}
/>
<Tab label="Active" value="active"
sx={[Link]} />
<Tab label="InActive" value="inactive"
sx={[Link]} />
<Tab label="Pending" value="pending"
sx={[Link]} />
</Tabs>
</Grid>
</Grid>

<Grid
container
sx={{
alignItems: "end",
justifyContent: "end",
marginRight: 1,
}}
>
<MobilityButton
icon={<Add />}
label="New Subscriber"
onClick={handleButtonClick}
/>
</Grid>
</Grid>

<Grid padding={2}>
{tabValue === "all" &&
([Link] > 0 ? (
<EnhancedTable
headers={[Link]}
tableData={filteredList}
/>
) : (
<MobilityEmptyMsg message={"No Data
Found"} />
))}

{tabValue === "active" &&

([Link] > 0 ? (
<EnhancedTable
headers={[Link]}
tableData={activeSubscribers}
/>
) : (
<MobilityEmptyMsg message={"No Data
Found"} />
))}

{tabValue === "inactive" &&

([Link] > 0 ? (
<EnhancedTable
headers={[Link]}
tableData={inActiveSubscribers}
/>
) : (
<MobilityEmptyMsg message={"No Data
Found"} />
 ))}

{tabValue === "pending" &&

([Link] > 0 ? (
<EnhancedTable
headers={[Link]}
tableData={pendingSubscribers}
/>
) : (
<MobilityEmptyMsg message={"No Data
Found"} />
))}
</Grid>

<MobilitySubscriptionDialog
openDialog={openDialog}
setOpenDialog={setOpenDialog}
title={dialogTitle}
entityId={entityId}
planType={planType}
></MobilitySubscriptionDialog>
</Paper>
// <Grid style={{ padding: 5 }}>
// <Grid item lg={12} md={12} xs={12} sm={12}>
// <Grid
// container
// sx={{
// justifyContent: "end",
// marginRight: 1,
// marginBottom: 2,
// }}
// >
// <MobilityButton
// label="Add New Subscriber"
// onClick={handleButtonClick}
// />
// </Grid>
// <Paper sx={{ overflow: "auto" }}>
// <EnhancedTable
// headers={[Link]}
// tableData={subscribersList}
// ></EnhancedTable>
// </Paper>

// <MobilitySubscriptionDialog
// openDialog={openDialog}
// setOpenDialog={setOpenDialog}
// title={dialogTitle}
// entityId={entityId}
// planType={planType}
// ></MobilitySubscriptionDialog>
// </Grid>
// </Grid>
);
};

export default Subscribers;

132]ondc\Admin-portal-frontend\super_admin\src\Components\ProtectedComponents\
Vehicle\[Link]
import React, { FC, ReactElement, useState } from "react";
import {
Card,
Grid,
 Typography,
Paper,
Tab,
Tabs,
Divider,
} from "@mui/material";
import { useSearchParams, useNavigate } from "react-router-dom";
import { isEmpty } from "lodash";
import { CancelOutlined, TaskAlt } from "@mui/icons-material";
import MobilityTextField from "../../CommonComponents/MobilityTextField";
import MobilitySelect from "../../CommonComponents/MobilitySelect";
import {
ShowSnackbarFailure,
ShowSnackbarSuccess,
} from "../../CommonComponents/MobilitySnackBar";
import { AppContext } from "../../Context/AppContext";
import MobilityButton from "../../CommonComponents/MobilityButton";
import { MobilityAppBar } from "../../CommonComponents/MobilityAppBar";
import { MobilityImgHeading } from
"../../CommonComponents/MobilityHeadingValue";
import MobilityAccordion from "../../CommonComponents/MobilityAccordion";
import { MobilityChip } from "../../CommonComponents/MobilityChip";
import { apiHandler } from "../../ApiServices/ApiHandler";
import {
CHANGE_DOCUMENT_STATUS,
EDIT_VEHICLE_DETAILS,
GET_VEHICLES_DETAILS_BY_ID,
} from "../../ApiServices/ApiConstants";

const VehicleDetails: FC = (): ReactElement => {

let myContext = [Link](AppContext);

const navigate = useNavigate();

const [queryParameters] = useSearchParams();

const id = [Link]("id");
const entityId = [Link]("entityId");
let isEdit = [Link]("isEdit");
let selectedTab = [Link]("selectedTab");
const [tabValue, setTabValue] = [Link]<string>(selectedTab!);
const statusOptions = ["Active", "InActive", "Pending"];
interface Iresponse {
headers?: any;
data?: any;
status?: number;
message?: string;
}

const [vehicleDetails, setVehicleDetails] = [Link]<any>({});

const [message, setMessage] = useState<string>("");
const [isLoading, setIsLoading] = useState<boolean>(false);
async function apiCall() {
try {
[Link]({
isLoading: true,
message: "Getting Vehicle details...",
});
// const response: Iresponse = await [Link](
// `/api/get-vehicles-details-by-id?id=${id}`
// );
const response: Iresponse = await [Link](
`${GET_VEHICLES_DETAILS_BY_ID}?id=${id}`
);
 if (!isEmpty(response)) {
const { data } = [Link];
setVehicleDetails({
driverId: [Link] || "",
registrationNumber: [Link] || "",
model: [Link] || "",
name: [Link] || "",
type: [Link] || "",
// make: [Link] || "",
vehicleId: data._id || [Link] || "",
entityId: [Link] || "",
year: [Link] || "",
// engineNumber: [Link] || "",
status: [Link] || "",
documents: [Link],
ownerType: [Link],
});
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({ isLoading: false });
}
}
const validateData = () => {
try {
if (!vehicleDetails?.name || vehicleDetails?.name?.length ==
0) {
ShowSnackbarFailure("Please Enter Vehicle Name",
myContext);
return false;
}
// if (!vehicleDetails?.type || vehicleDetails?.type?.length
== 0) {
// ShowSnackbarFailure("Please Enter Vehicle Type",
myContext);
// return false;
// }
if (!vehicleDetails?.model || vehicleDetails?.model?.length ==
0) {
ShowSnackbarFailure("Please Enter vehicle model",
myContext);
return false;
}
// if (!vehicleDetails?.make || vehicleDetails?.make?.length
== 0) {
// ShowSnackbarFailure("Please Enter Vehicle Make",
myContext);
// return false;
// }
if (
!vehicleDetails?.registrationNumber ||
vehicleDetails?.registrationNumber?.length == 0
) {
ShowSnackbarFailure("Please Enter Registration Number",
myContext);
return false;
}
if (!vehicleDetails?.year || vehicleDetails?.year?.length ==
0) {
ShowSnackbarFailure("Please Enter Year", myContext);
return false;
 }
// if (
// !vehicleDetails?.engineNumber ||
// vehicleDetails?.engineNumber?.length == 0
// ) {
// ShowSnackbarFailure("Please Enter Engine Number",
myContext);
// return false;
// }
return true;
} catch (error) {

}
};
async function handleSubmit(event: [Link]) {
[Link]();
if (validateData()) {
try {
[Link]({
isLoading: true,
message: "Updating Vehicle Details...",
});
const requestBody = {
// ...vehicleDetails,
isEdit: true,
driverId: [Link],
vehicleId: [Link],
name: [Link],
model: [Link],
year: [Link],
status: [Link],
registrationNumber:
[Link],
};
// const res: Iresponse = await [Link](
// `/api/edit-vehicle-details?entityId=${entityId}`,
// requestBody
// //{ params: { entityId } }
// );
const res: Iresponse = await [Link](
`${EDIT_VEHICLE_DETAILS}?entityId=${entityId}`,
requestBody
);

if (isEmpty(res)) {
apiCall();
}
if ([Link] === 200) {
ShowSnackbarSuccess(
"Vehicle details Updated Successfully",
myContext
);
navigate(-1);
} else {
ShowSnackbarFailure(res, myContext);

[Link]("error.", res);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);

} finally {
[Link]({ isLoading: false });
 }
}
}

[Link](() => {
apiCall();
}, []);

const cardStyle = {
margin: "auto",
width: "100%",
boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
marginTop: "10px",
};
const styles = {
extendedTab: {
textTransform: "none",
fontSize: 16,
fontWeight: 400,
},
};
function detailsData() {
return (
<>
<Grid container spacing={4} sx={{ padding: 3 }}>
<Grid item xs={12} sm={6}>
<MobilityTextField
disabled={isEdit ? true : false}
label="Vehicle Company Name"
type="text"
name="vehicleName"
value={[Link] || ""}
onChange={(e) =>
setVehicleDetails({
...vehicleDetails,
name: [Link],
})
}
/>
</Grid>

<Grid item xs={12} sm={6}>

<MobilityTextField
disabled={isEdit ? true : false}
label="Vehicle Model"
name="vehicleModel"
type="text"
value={[Link] || ""}
onChange={(e) =>
setVehicleDetails({
...vehicleDetails,
model: [Link],
})
}
/>
</Grid>
{/* <Grid item xs={12} sm={6}>
<MobilityTextField
disabled={isEdit ? true : false}
label="Vehicle Make"
name="vehicleMake"
type="text"
value={[Link] || ""}
onChange={(e) =>
 setVehicleDetails({
...vehicleDetails,
make: [Link],
})
}
/>
</Grid> */}
<Grid item xs={12} sm={6}>
<MobilityTextField
disabled={isEdit ? true : false}
label="Year"
name="vehicleYear"
type="text"
value={[Link] || ""}
onChange={(e) =>
setVehicleDetails({
...vehicleDetails,
year: [Link],
})
}
/>
</Grid>
<Grid item xs={12} sm={6}>
<MobilityTextField
disabled={isEdit ? true : false}
label="Registration Number"
name="vehicleRegistrationNumber"
type="text"

value={[Link] || ""}
onChange={(e) =>
setVehicleDetails({
...vehicleDetails,
registrationNumber:
[Link],
})
}
/>
</Grid>

{/* <Grid item xs={12} sm={6}>

<MobilityTextField
disabled={isEdit ? true : false}
label="Engine Number"
name="alphaNumeric"
type="text"
value={[Link] || ""}
onChange={(e) =>
setVehicleDetails({
...vehicleDetails,
engineNumber: [Link],
})
}
/>
</Grid> */}
<Grid item xs={12} sm={6}>
<MobilitySelect
disabled={isEdit ? true : false}
label="Status"
value={[Link] || ""}
onChange={(e) =>
setVehicleDetails({
...vehicleDetails,
status: [Link] as
string,
})
}
statusOptions={statusOptions}
/>
</Grid>
<Grid item xs={12} sm={6}>
<MobilityTextField
disabled={true}
label="Vehicle Type"
name="vehicleType"
type="text"
value={[Link] || ""}
onChange={(e) =>
setVehicleDetails({
...vehicleDetails,
type: [Link],
})
}
/>
</Grid>
<Grid item xs={12} sm={6}>
<MobilityTextField
disabled={true}
label="Owner Type"
name="ownerType"
type="text"
value={[Link] || ""}
onChange={
(e) => {}
// setVehicleDetails({
// ...vehicleDetails,
// type: [Link],
// })
}
/>
</Grid>

{!isEdit && (
<Grid container sx={{ marginTop: 4,
justifyContent: "flex-end" }}>
<MobilityButton label="Submit"
onClick={handleSubmit} />
</Grid>
)}
</Grid>
</>
);
}
function documentsData() {
return (
<>
<Grid container item xs={12} md={12} spacing={1}
padding={2}>
{vehicleDetails?.documents?.map((item: any) => {
return (
<Grid item xs={12} md={6}>
<MobilityAccordion
isExpanded={false}
title={getTitle(item)}
summary={getSummary(item)}
details={
<>
 <MobilityImgHeading

heading={item}
value=""

imgUrl={[Link]}
/>
</>
}
/>
</Grid>
);
})}
</Grid>
</>
);
}
const handleApprove = async (status: any, docId: any, parentId: any) => {
try {
[Link]({
isLoading: true,
message: "Updated document status...",
});
const payload = {
status,
docId,
parentId,
};

// const response: Iresponse = await [Link](

// `/api/change-document-status`,
// payload
// );
const response: Iresponse = await [Link](
CHANGE_DOCUMENT_STATUS,
payload
);

if ([Link] === 200) {

ShowSnackbarSuccess("Status changed succesfully",
myContext);

const updatedDocuments =
response?.data?.data?.updatedEntity?.documents;
[Link]((selectedDoc: any) => ({
...selectedDoc,
parentId: parentId,
}));

setVehicleDetails({ ...vehicleDetails, documents:

updatedDocuments });
} else {
ShowSnackbarFailure(response, myContext);
}
} catch (err: any) {
ShowSnackbarFailure(err, myContext);
} finally {
[Link]({
isLoading: false,
});
}
};

function getTitle(item: any) {

 let docTitle = [Link];
switch ([Link]()) {
case "rc":
docTitle = "Registration Certificate (RC)";
break;
case "vi":
docTitle = "Vehicle Insurance";
break;
case "puc":
docTitle = "PUC (Pollution Under Control) Certificate";
break;
case "fc":
docTitle = "Fitness Certificate";
break;
}
let statusColor = "info";
switch ([Link]().toLowerCase()) {
case "approved":
statusColor = "green";
break;
case "rejected":
statusColor = "red";
break;
case "pending":
statusColor = "orange";
break;
case "expired":
statusColor = "blue";
break;
}
return (
<Grid>
<Grid>
<Typography color="primary" sx={{ fontSize: 16 }}>
{docTitle}
</Typography>
<Typography color={statusColor} sx={{ fontSize: 12
}}>
{[Link]}
</Typography>
</Grid>
</Grid>
);
}

function getSummary(item: any) {

let summary: any = [];
switch ([Link]()) {
case "pending":
case "expired":
[Link](
<>
<MobilityChip
label="Approve"
disabled={isEdit ? true : false}
clickable={isEdit ? false : true}
icon={<TaskAlt />}
onClick={(event) => {
[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you
want to proceed?",
onYesClick: () => {
 handleApprove(
"Approved",
item?.docId,

[Link]
);
},
});
}}
/>
<Divider sx={{ width: 10 }} />
<MobilityChip
label="Reject"
disabled={isEdit ? true : false}
clickable={isEdit ? false : true}
icon={<CancelOutlined />}
onClick={(event) => {
[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you
want to proceed?",
onYesClick: () => {
handleApprove(
"Rejected",
item?.docId,

[Link]
);
},
});
}}
/>
<Divider sx={{ width: 10 }} />
</>
);
break;
case "rejected":
[Link](
<MobilityChip
label="Approve"
disabled={isEdit ? true : false}
clickable={isEdit ? false : true}
icon={<TaskAlt />}
onClick={(event) => {
[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you want
to proceed?",
onYesClick: () => {
handleApprove(
"Approved",
item?.docId,

[Link]
);
},
});
}}
/>
);
break;
case "approved":
 [Link](
<MobilityChip
label="Reject"
disabled={isEdit ? true : false}
clickable={isEdit ? false : true}
icon={<CancelOutlined />}
onClick={(event) => {
[Link]({
open: true,
title: "Confirmation",
message: "Are you sure you want
to proceed?",
onYesClick: () => {
handleApprove(
"Rejected",
[Link],

[Link]
);
},
});
}}
/>
);
break;
}
return summary;
}
return (
<Grid style={{ padding: 5 }}>
<Grid item>
<MobilityAppBar
title="Vehicles Details"
onBackClick={() => {
navigate(-1);
}}
/>
</Grid>

<Paper component={Card} variant="outlined" sx={cardStyle}>

<Tabs
value={tabValue}
onChange={(e, newValue) => {
setTabValue(newValue);
}}
>
<Tab label="Details" value="details"
sx={[Link]} />

<Tab label="Documents" value="documents"

sx={[Link]} />
</Tabs>

{tabValue === "details" && detailsData()}

{tabValue === "documents" && documentsData()}

</Paper>
</Grid>
);
};

export default VehicleDetails;

133]ondc\Admin-portal-frontend\super_admin\src\Components\ProtectedComponents\
[Link]
import { FC, ReactElement } from "react";

const Dashboard: FC = (): ReactElement => {

return <h1>Dashboard</h1>;
};

export default Dashboard;

134]ondc\Admin-portal-frontend\super_admin\src\Components\Routes\[Link]
import { FC, ReactElement } from "react";
import { Routes, Route } from "react-router-dom";
import { useUserState } from "../../CustomUtils/usercontext";
import Box from "@mui/material/Box";
import { Login } from "../CommonComponents/login";
import Footer from "../CommonComponents/Footer";
import routesList from "./routesList";
import { useStyles } from "./routestyle";
import NavigationDrawerNew, {
DrawerHeader,
} from "../CommonComponents/NavigationDrawerNew";

const AppRouter: FC = (): ReactElement => {

const classes = useStyles();
const isUserAuthenticated: boolean = useUserState();
return (
<Routes>
{[Link]((route: any, index) => (
<Route
key={index}
path={route?.path}
element={
isUserAuthenticated ? (
<>
<Box
className={[Link]}>
<NavigationDrawerNew />
<Box
component="main"
sx={{
flexGrow: 1,
p: 1,
overflow:
"auto",

backgroundColor: "#e7e7e7",
}}
>
<DrawerHeader />

<[Link] />
</Box>
</Box>
<Footer />
</>
) : (
<Login />
)
}
/>
))}
</Routes>
);
};
export default AppRouter;

135]ondc\Admin-portal-frontend\super_admin\src\Components\Routes\[Link]
import Dashboard from "../ProtectedComponents/dashboard";
import Subscribers from "../ProtectedComponents/Subscribers/Subscribers";
import SubscriberDetails from
"../ProtectedComponents/Subscribers/SubscriberDetails";
//import Drivers from "../ProtectedComponents/Drivers/drivers";
import DriverDetails from "../ProtectedComponents/Drivers/driverDetails";
import VehicleDetails from "../ProtectedComponents/Vehicle/vehicleDetails";
import AddNewSubscriber from
"../ProtectedComponents/Subscribers/AddNewSubscriber";
import SubscriberConfiguration from
"../ProtectedComponents/Subscribers/SubscriberConfiguration";

const routesList: Array<Object> = [

{
// path: "/super-admin",
path: "/",
component: Dashboard,
},
// {
// path: "/driver",
// component: Drivers,
// },
{
path: "/subscribers",
component: Subscribers,
},
{
path: "/subscriberDetails",
component: SubscriberDetails,
},
{
path: "/driverDetails",
component: DriverDetails,
},
{
path: "/vehicleDetails",
component: VehicleDetails,
},
{
path: "/addNewSubscriber",
component: AddNewSubscriber,
},
{
path: "/subscriberConfiguration",
component: SubscriberConfiguration,
},
];

export default routesList;

136]ondc\Admin-portal-frontend\super_admin\src\Components\Routes\[Link]
import { makeStyles } from "@mui/styles";

export const useStyles = makeStyles({

routesComponentWrapper: {
display: "flex",
position: "fixed",
bottom: "21px",
right: "0px",
left: "0px",
 top: "0px",
},
});

137]ondc\Admin-portal-frontend\super_admin\src\config\[Link]
const dev = {
BUILD_ENV: "local", //production
DOMAIN: "localhost",
API_BASE_URL: "[Link]
LOGIN_REDIRECTION: "[Link]
};

const loc_static = {
BUILD_ENV: "local", //production
DOMAIN: "localhost",
API_BASE_URL: "[Link]
LOGIN_REDIRECTION: "[Link]
ADMIN_REDIRECTION: "[Link]
SUPER_ADMIN_REDIRECTION: "[Link]
};

const uat = {
BUILD_ENV: "uat", //production
DOMAIN: "[Link]",
API_BASE_URL: "[Link]
LOGIN_REDIRECTION: "[Link]
ADMIN_REDIRECTION: "[Link]
SUPER_ADMIN_REDIRECTION: "[Link]
};

const staging = {
BUILD_ENV: "staging", //production
DOMAIN: "[Link]",
API_BASE_URL: "[Link]
LOGIN_REDIRECTION: "[Link]
ADMIN_REDIRECTION: "[Link]
SUPER_ADMIN_REDIRECTION:
"[Link]
};

const preProd = {
BUILD_ENV: "oRickshaw", // oRickshaw
DOMAIN: "[Link]",
API_BASE_URL: "[Link]
LOGIN_REDIRECTION: "[Link]
};

const oRickshaw = {
BUILD_ENV: "oRickshaw", // oRickshaw
DOMAIN: "[Link]",
API_BASE_URL: "[Link]
LOGIN_REDIRECTION: "[Link]
};

const pro = {};

export default dev;

export const MAP_API_KEY = "AIzaSyBcBSeBCLN6BEzyxVR93JA6zuJTBF06Lvo";

138]ondc\Admin-portal-frontend\super_admin\src\CustomUtils\[Link]
import Cookies from "js-cookie";
import env from "../config/env";
export function setCookies(key: string, value: string) {
[Link](key, value, { domain: [Link] });
}

export function getCookies(key: string) {

return [Link](key);
}

139]ondc\Admin-portal-frontend\super_admin\src\CustomUtils\[Link]
import moment from "moment";
export function formatDateTime(dateString: string, dateWithTime?: boolean) {
if (dateWithTime) {
let a = moment(dateString).format("DD/MM/YYYY LTS").replace(" ", "\
n");
return a;
} else {
return moment(dateString).format("DD/MM/YYYY");
}
}

export function formatDate(dateString: string | undefined) {

if (dateString) {
let a = moment(dateString).format("DD/MM/YYYY");
return a;
} else {
return dateString;
}
}

export function formatAmount(amount: string | number | undefined) {

if (amount) {
let a = "Rs. " + parseFloat([Link]()).toFixed(2);
return a;
} else {
return "Rs. " + parseFloat("0").toFixed(2);
}
}

140] ondc\Admin-portal-frontend\super_admin\src\CustomUtils\[Link]
import Cookies from "js-cookie";
import React, { useEffect, createContext, FC, ReactElement } from "react";

const userStateContext = createContext<boolean>(false);

const userDispatchContext = createContext<any>(() => null);

const userReducer = (state: boolean, action: string) => {

switch (action) {
case "LOGIN_SUCCESS":
return true;
case "SIGN_OUT":
return false;
case "LOGIN_FAILURE":
return false;
case "TOKEN_EXPIRED":
return false;
default: {
throw new Error(`Unhandled action type: ${action}`);
}
}
};
const UserProvider: FC<any> = ({ children }): ReactElement => {
var [isUserAuthenticated, dispatch] = [Link](
userReducer,
 !![Link]("bpp_admin_portal_ONDCAdminToken")
);

useEffect(() => {
if (isUserAuthenticated) {
}
}, [isUserAuthenticated]);

return (
<[Link] value={isUserAuthenticated}>
<[Link] value={dispatch}>
{children}
</[Link]>
</[Link]>
);
};

const useUserState = () => {

const context = [Link](userStateContext);

return context;
};
const useUserDispatch = () => {
const context = [Link](userDispatchContext);
return context;
};

export { UserProvider, useUserState, useUserDispatch };

141]ondc\Admin-portal-frontend\super_admin\src\CustomUtils\[Link]
const ValidateInput = (regex: RegExp, input: string) => {
return [Link](input) ? true : false;
};

export const ValidateMobile = (inputValue: string) => {

const numberRegex = new RegExp("^[6-9][0-9]{9}$");
return ValidateInput(numberRegex, inputValue);
};

export const ValidateName = (inputValue: string) => {

const nameRegex = new RegExp("^[A-Za-z ]+$");
return ValidateInput(nameRegex, inputValue);
};

export const ValidatePincode = (inputValue: string) => {

const pinCodeRegex = new RegExp("^[0-9]{6}$");
return ValidateInput(pinCodeRegex, inputValue);
};

export const ValidateDob = (inputValue: string) => {

const dobRegx = new RegExp(
// '^([0]?[1-9]|[1|2][0-9]|[3][0|1])[/]([0]?[1-9]|[1][0-2])[/]([1|2][0-9]
{3})$',
"^([1|2][0-9]{3})[-]([0]?[1-9]|[1][0-2])[-]([0]?[1-9]|[1|2][0-9]|[3][0|1])$"
);
return ValidateInput(dobRegx, inputValue);
};

export const ValidatePan = (inputValue: string) => {

const dobRegx = new RegExp("^[A-Z]{5}[0-9]{4}[A-Z]{1}$");
return ValidateInput(dobRegx, inputValue);
};

export const ValidateAadhar = (inputValue: string) => {

 const dobRegx = new RegExp("^[0-9]{12}|[0-9]{16}$");
return ValidateInput(dobRegx, inputValue);
};

export const ValidateExpiryDate = (inputValue: string) => {

const dobRegx = new RegExp(
"^([1|2][0-9]{3})[-]([0]?[1-9]|[1][0-2])[-]([0]?[1-9]|[1|2][0-9]|[3][0|1])$"
);
return ValidateInput(dobRegx, inputValue);
};

export const ValidateDrivingLicense = (inputValue: string) => {

const dobRegx = new RegExp("^[A-Z0-9 -]{16}$");
return ValidateInput(dobRegx, inputValue);
};
export const ValidateNumberPlate = (inputValue: string) => {
const vehicleNumberRegx = new RegExp("^[A-Z-0-9_-]*$");

return ValidateInput(vehicleNumberRegx, inputValue);

};
export const ValidateIfscCode = (inputValue: string) => {
const dobRegx = new RegExp("^[A-Z]{4}[0][A-Z0-9]{6}$");
return ValidateInput(dobRegx, inputValue);
};

export const ValidateMicrCode = (inputValue: string) => {

const dobRegx = new RegExp("^[0-9]{9}$");
return ValidateInput(dobRegx, inputValue);
};
export const ValidateEmail = (inputValue: string) => {
const dobRegx = new RegExp(
"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}"
);
return ValidateInput(dobRegx, inputValue);
};

export const ValidateAddress = (inputValue: string) => {

const nameRegex = new RegExp("^[A-Za-z , 0-9]*$");
return ValidateInput(nameRegex, inputValue);
};

export const ValidateAccountNumber = (inputValue: string) => {

const dobRegx = new RegExp("^[A-Z0-9]{20}$");
return ValidateInput(dobRegx, inputValue);
};

export const ValidateNumber = (inputValue: string) => {

const numberRegx = new RegExp("^[0-9]+$");
return ValidateInput(numberRegx, inputValue);
};

export const ValidateMultiplier = (inputValue: string) => {

const numberRegx = new RegExp("^(0(\\.\\d{1,2})?|1(\\.0{1,2})?)$");
return ValidateInput(numberRegx, inputValue);
};

142]ondc\Admin-portal-frontend\super_admin\src\[Link]
.App {
text-align: center;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {

.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

143]ondc\Admin-portal-frontend\super_admin\src\[Link]
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {

render(<App />);
const linkElement = [Link](/learn react/i);
expect(linkElement).toBeInTheDocument();
});

144]ondc\Admin-portal-frontend\super_admin\src\[Link]
import { useState } from "react";
import "./[Link]";
import AppRouter from "./Components/Routes/routes";
import MobilityLoader, {
MobilityLoaderProp,
} from "./Components/CommonComponents/MobilityLoader";
import { AppContext } from "./Components/Context/AppContext";
import MobilitySnackBar, {
MobilitySnackbarProp,
} from "./Components/CommonComponents/MobilitySnackBar";
import MobilityConfirmDialog, {
MobilityConfirmDialogProp,
} from "./Components/CommonComponents/MobilityConfirmDialog";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";

function App() {
const [loader, setLoader] = useState<MobilityLoaderProp>({});
const [snackbar, setSnackbar] = useState<MobilitySnackbarProp>({});
const [confirmDialog, setConfirmDialog] =
useState<MobilityConfirmDialogProp>(
{}
);
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<[Link]
value={{
loader,
setLoader,
snackbar,
setSnackbar,
confirmDialog,
setConfirmDialog,
}}
>
<AppRouter />
<MobilityLoader loader={loader} />
<MobilitySnackBar snackbar={snackbar} />
<MobilityConfirmDialog dialog={confirmDialog} />

</[Link]>
</LocalizationProvider>

);
}

export default App;

145]ondc\Admin-portal-frontend\super_admin\src\[Link]
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

146]ondc\Admin-portal-frontend\super_admin\src\[Link]
import React from "react";
import ReactDOM from "react-dom/client";
import "./[Link]";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import { UserProvider } from "./CustomUtils/usercontext";
import { ThemeProvider } from "@mui/material/styles";
import { theme } from "./Theme";

const root = [Link](

[Link]("root") as HTMLElement
);
[Link](
// <[Link]>
<ThemeProvider theme={theme}>
<UserProvider>
<BrowserRouter>
<App />
 </BrowserRouter>
</UserProvider>
</ThemeProvider>
// {/* </[Link]> */}
);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(
// or send to an analytics endpoint. Learn more: [Link]
reportWebVitals();

147]ondc\Admin-portal-frontend\super_admin\src\[Link]
<svg xmlns="[Link] viewBox="0 0 841.9 595.3"><g
fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-
114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8
19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-
18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9
53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28
31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9
14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4
66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4
63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6
36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-
130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-
4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8
106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-
8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-
39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3
11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7
39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-
15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4
18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-
2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5
15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-
18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6
8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5
125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7
27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-
6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4
19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84
46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9
2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1
63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-
13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4
15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle
cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
148]ondc\Admin-portal-frontend\super_admin\src\[Link]
/// <reference types="react-scripts" />

149]ondc\Admin-portal-frontend\super_admin\src\[Link]
import { ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {

if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;

150]ondc\Admin-portal-frontend\super_admin\src\[Link]
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: [Link]
import '@testing-library/jest-dom';

151]ondc\Admin-portal-frontend\super_admin\src\[Link]
import { createTheme } from "@mui/material/styles";

export const theme = createTheme({

components: {
// MuiCard: {
// styleOverrides: {
// root: {
// // backgroundImage: `radial-gradient(47.97% 107.05% at 44.91%
42.96%, #FFF 32.07%, #B6EADA 77.76%), url(${require("./assets/[Link]")})`,
// // backgroundRepeat: "no-repeat",
// // background: `radial-gradient(47.97% 107.05% at 44.91% 42.96%,
#FFF 32.07%, #B6EADA 77.76%)`,
// // backgroundSize: "50%",
// // backgroundPosition: "center",
// },
// },
// },
MuiTableCell: {
styleOverrides: {
root: {
textAlign: "center",
width: "500px",
},
},
},
MuiLink: {
styleOverrides: {
root: {
cursor: "pointer",
},
},
},
MuiButton: {
styleOverrides: {
root: {
height: "30px",
width: "auto",
margin: "2px",
borderRadius: "20px",
},
},
},
},
});

152]ondc\Admin-portal-frontend\super_admin\.gitignore
# See [Link] for more about ignoring
files.

# dependencies
/node_modules
/.pnp
.[Link]
[Link]

# testing
/coverage

# production
/build

# misc
.DS_Store
.[Link]
.[Link]
.[Link]
.[Link]

[Link]*
[Link]*
[Link]*

153]ondc\Admin-portal-frontend\super_admin\[Link]
import React from "react";
import {
Button,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
MenuItem,
SvgIconTypeMap,
Typography,
} from "@mui/material";
import {
AirlineSeatFlat,
BorderColorOutlined,
CancelOutlined,
Logout,
TaskAlt,
Visibility,
} from "@mui/icons-material";
import { OverridableComponent } from "@mui/material/OverridableComponent";

interface MobilityListItemProps {
label?: any;
icon?: any;
color?: any;
disabled?: boolean;
onClick?: (event: [Link]<HTMLLIElement>) => void;
}

function MobilityListItem(props: MobilityListItemProps) {

return (
<MenuItem onClick={props?.onClick}>
<ListItemIcon>{[Link]}</ListItemIcon>
{[Link]}
</MenuItem>
);
}

export default MobilityListItem;

export function MobilityListItemEdit(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<BorderColorOutlined fontSize="small" color="primary"
/>}
/>
);
}

export function MobilityListItemReject(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<CancelOutlined fontSize="small" color="error" />}
/>
);
}

export function MobilityListItemView(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<Visibility fontSize="small" color="info" />}
/>
);
}

export function MobilityListItemApprove(props: MobilityListItemProps) {

return (
<MobilityListItem
label={<Typography sx={{ fontSize: 14
}}>{[Link]}</Typography>}
onClick={[Link]}
icon={<TaskAlt fontSize="small" color="success" />}
/>
);
}

154]ondc\Admin-portal-frontend\super_admin\[Link]
{
"name": "ondc_admin_react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.13.7",
"@mui/material": "^5.15.3",
"@mui/styles": "^5.14.0",
"@mui/x-date-pickers": "^6.18.6",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/js-cookie": "^3.0.3",
"@types/lodash": "^4.14.195",
"@types/node": "^16.18.38",
"@types/react": "^18.2.14",
"@types/react-dom": "^18.2.6",
"axios": "^1.4.0",
"dayjs": "^1.11.10",
 "js-cookie": "^3.0.5",
"lodash": "^4.17.21",
"moment": "^2.30.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-loading-overlay-ts": "^2.0.2",
"react-router-dom": "^6.14.1",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "set PORT=3003 && react-scripts start",
"start-mac": "PORT=3003 react-scripts start",
"build": "BUILD_PATH='../../driver-service/super_admin' react-scripts
build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

155]ondc\Admin-portal-frontend\super_admin\[Link]
# Getting Started with Create React App

This project was bootstrapped with [Create React

App]([Link]

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.\

Open [[Link] to view it in the browser.

The page will reload if you make edits.\

You will also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.\

See the section about [running tests]([Link]
app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the
best performance.

The build is minified and the filenames include the hashes.\

Your app is ready to be deployed!

See the section about

[deployment]([Link] for
more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you aren’t satisfied with the build tool and configuration choices, you can
`eject` at any time. This command will remove the single build dependency from
your project.

Instead, it will copy all the configuration files and the transitive
dependencies (webpack, Babel, ESLint, etc) right into your project so you have
full control over them. All of the commands except `eject` will still work, but
they will point to the copied scripts so you can tweak them. At this point
you’re on your own.

You don’t have to ever use `eject`. The curated feature set is suitable for
small and middle deployments, and you shouldn’t feel obligated to use this
feature. However we understand that this tool wouldn’t be useful if you
couldn’t customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App

documentation]([Link]
started).

To learn React, check out the [React documentation]([Link]

156]ondc\Admin-portal-frontend\super_admin\[Link]
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "[Link]", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}