+
+
+ {/*
*/}
+
+
+
{
+ window.open("https://www.digit.org/", "_blank").focus();
+ }}
+ />
+
+
+
+}
+
+export default EmployeeApp
\ No newline at end of file
diff --git a/frontend/micro-ui-internals/packages/modules/core/src/redux/reducers/index.js b/frontend/micro-ui-internals/packages/modules/core/src/redux/reducers/index.js
new file mode 100644
index 00000000000..11591c2b250
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/core/src/redux/reducers/index.js
@@ -0,0 +1,8 @@
+export const commonReducer = (defaultData) => (state = defaultData, action) => {
+ switch (action.type) {
+ case "LANGUAGE_SELECT":
+ return { ...state, selectedLanguage: action.payload };
+ default:
+ return state;
+ }
+};
diff --git a/frontend/micro-ui-internals/packages/modules/core/src/redux/store.js b/frontend/micro-ui-internals/packages/modules/core/src/redux/store.js
new file mode 100644
index 00000000000..3d2f22ee016
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/core/src/redux/store.js
@@ -0,0 +1,24 @@
+import { createStore, combineReducers, compose, applyMiddleware } from "redux";
+import thunk from "redux-thunk";
+import { commonReducer } from "./reducers";
+
+const getRootReducer = (defaultStore, moduleReducers) =>
+ combineReducers({
+ common: commonReducer(defaultStore),
+ ...moduleReducers,
+ });
+
+const middleware = [thunk];
+
+const composeEnhancers =
+ typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
+
+const enhancer = composeEnhancers(
+ applyMiddleware(...middleware)
+ // other store enhancers if any
+);
+
+const getStore = (defaultStore, moduleReducers = {}) => {
+ return createStore(getRootReducer(defaultStore, moduleReducers), enhancer);
+};
+export default getStore;
diff --git a/frontend/micro-ui-internals/packages/modules/dss/package.json b/frontend/micro-ui-internals/packages/modules/dss/package.json
new file mode 100644
index 00000000000..0aff4659ddd
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/dss/package.json
@@ -0,0 +1,37 @@
+{
+ "name": "@egovernments/digit-ui-module-dss",
+ "version": "1.3.0",
+ "license": "MIT",
+ "main": "dist/index.js",
+ "module": "dist/index.modern.js",
+ "source": "src/Module.js",
+ "files": [
+ "dist"
+ ],
+ "scripts": {
+ "start": "microbundle-crl watch --no-compress --format modern,cjs",
+ "build": "microbundle-crl --no-compress --format modern,cjs",
+ "prepublish": "yarn build"
+ },
+ "peerDependencies": {
+ "react": "^17.0.0",
+ "react-router-dom": "^5.2.0"
+ },
+ "dependencies": {
+ "@egovernments/digit-ui-libraries": "^1.3.0",
+ "@egovernments/digit-ui-react-components": "^1.3.0",
+ "react": "^17.0.0",
+ "react-date-range": "1.3.0",
+ "react-dom": "^17.0.0",
+ "react-hook-form": "^6.7.0",
+ "react-i18next": "^11.7.3",
+ "react-query": "^3.6.1",
+ "react-redux": "^7.2.1",
+ "react-router-dom": "^5.2.0",
+ "react-table": "^7.6.1",
+ "react-time-picker": "4.2.0",
+ "recharts": "^2.0.9",
+ "redux": "^4.0.5",
+ "redux-thunk": "^2.3.0"
+ }
+}
diff --git a/frontend/micro-ui-internals/packages/modules/dss/src/Module.js b/frontend/micro-ui-internals/packages/modules/dss/src/Module.js
new file mode 100644
index 00000000000..401eeafe0e7
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/dss/src/Module.js
@@ -0,0 +1,74 @@
+import React, { Fragment } from "react";
+import { useTranslation } from "react-i18next";
+// import { useRouteMatch } from "react-router";
+import { BackButton, Loader, PrivateRoute, BreadCrumb } from "@egovernments/digit-ui-react-components";
+import DashBoard from "./pages";
+import { Route, Switch, useRouteMatch, useLocation } from "react-router-dom";
+import Overview from "./pages/Overview";
+import DSSCard from "./components/DSSCard";
+import DrillDown from "./pages/DrillDown";
+
+const DssBreadCrumb = ({ location }) => {
+ const { t } = useTranslation();
+ const crumbs = [
+ {
+ path: "/digit-ui/employee",
+ content: t("ES_COMMON_HOME"),
+ show: true,
+ },
+ {
+ path: "/digit-ui/employee/dss/dashboard/fsm",
+ content: t("ES_COMMON_DSS"),
+ show: true,
+ },
+ {
+ path: "/digit-ui/employee/dss/drilldown",
+ content: t("ES_COMMON_DSS_DRILL"),
+ show: location.pathname.includes("drilldown") ? true : false,
+ },
+ ];
+
+ return
;
+};
+
+const Routes = ({ path, stateCode }) => {
+ const location = useLocation();
+ return (
+
+ );
+};
+
+const DSSModule = ({ stateCode, userType, tenants }) => {
+ const moduleCode = "DSS";
+ // const { path, url } = useRouteMatch();
+ const { path, url } = useRouteMatch();
+ const language = Digit.StoreData.getCurrentLanguage();
+ const { isLoading, data: store } = Digit.Services.useStore({ stateCode, moduleCode, language });
+
+ if (isLoading) {
+ return
;
+ }
+
+ Digit.SessionStorage.set("DSS_TENANTS", tenants);
+
+ if (userType !== "citizen") {
+ return
;
+ }
+};
+
+const componentsToRegister = {
+ DSSModule,
+ DSSCard,
+};
+
+export const initDSSComponents = () => {
+ Object.entries(componentsToRegister).forEach(([key, value]) => {
+ Digit.ComponentRegistryService.setComponent(key, value);
+ });
+};
diff --git a/frontend/micro-ui-internals/packages/modules/dss/src/components/CustomAreaChart.js b/frontend/micro-ui-internals/packages/modules/dss/src/components/CustomAreaChart.js
new file mode 100644
index 00000000000..2d4135b60ea
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/dss/src/components/CustomAreaChart.js
@@ -0,0 +1,161 @@
+import React, { useContext, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ResponsiveContainer, AreaChart, Area, CartesianGrid, Line, LineChart, XAxis, YAxis, Tooltip, Legend, Label } from "recharts";
+import { Card, CardHeader, Loader } from "@egovernments/digit-ui-react-components";
+import { startOfMonth, endOfMonth, sub, getTime, format, getDaysInMonth } from "date-fns";
+import FilterContext from "./FilterContext";
+
+const getValue = (plot) => plot.value;
+
+const renderUnits = (t, denomination) => {
+ switch (denomination) {
+ case "Unit":
+ return `(${t("DSS_UNIT")})`;
+ case "Lac":
+ return `(${t("DSS_LAC")})`;
+ case "Cr":
+ return `(${t("DSS_CR")})`;
+ }
+};
+
+const CustomAreaChart = ({ xDataKey = "name", yDataKey = getValue, data }) => {
+ const { t } = useTranslation();
+ const { id } = data;
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const { value } = useContext(FilterContext);
+ const [totalCapacity, setTotalCapacity] = useState(0);
+ const [totalWaste, setTotalWaste] = useState(0);
+ const stateTenant = tenantId.split(".")[0];
+ const { isMdmsLoading, data: mdmsData } = Digit.Hooks.useCommonMDMS(stateTenant, "FSM", "FSTPPlantInfo", {
+ enabled: id === "fsmCapacityUtilization",
+ });
+ const { isLoading, data: response } = Digit.Hooks.dss.useGetChart({
+ key: id,
+ type: "metric",
+ tenantId,
+ requestDate: { ...value?.requestDate, startDate: value?.range?.startDate?.getTime(), endDate: value?.range?.endDate?.getTime() },
+ filters: value?.filters,
+ });
+
+ useEffect(() => {
+ if (mdmsData) {
+ let fstpPlants = mdmsData;
+ if (value?.filters?.tenantId.length > 0) {
+ fstpPlants = mdmsData.filter((plant) => value?.filters?.tenantId?.some((tenant) => plant?.ULBS.includes(tenant)));
+ }
+ const totalCapacity = fstpPlants.reduce((acc, plant) => acc + Number(plant?.PlantOperationalCapacityKLD), 0);
+ setTotalCapacity(totalCapacity);
+ }
+ }, [mdmsData, value]);
+
+ useEffect(() => {
+ if (response) {
+ const totalWaste = Math.round(response?.responseData?.data?.[0]?.plots[response?.responseData?.data?.[0]?.plots.length - 1]?.value);
+ setTotalWaste(totalWaste);
+ }
+ }, [response]);
+
+ const chartData = useMemo(() => {
+ if (id !== "fsmCapacityUtilization") {
+ return response?.responseData?.data?.[0]?.plots;
+ }
+ return response?.responseData?.data?.[0]?.plots.map((plot) => {
+ const [month, year] = plot?.name.split("-");
+ const totalDays = getDaysInMonth(Date.parse(`${month} 1, ${year}`));
+ const value = Math.round((plot?.value / (totalCapacity * totalDays)) * 100);
+ return { ...plot, value };
+ });
+ }, [response, totalCapacity]);
+
+ const renderPlot = (plot) => {
+ if (id === "fsmCapacityUtilization") {
+ return Number(plot?.value.toFixed(1));
+ }
+ const { denomination } = value;
+ switch (denomination) {
+ case "Unit":
+ return plot?.value;
+ case "Lac":
+ return Number((plot.value / 100000).toFixed(2));
+ case "Cr":
+ return Number((plot.value / 10000000).toFixed(2));
+ }
+ };
+
+ const renderLegend = (value) =>
{value} ;
+
+ const tickFormatter = (value) => {
+ if (typeof value === "string") {
+ return value.replace("-", ", ");
+ }
+ return value;
+ };
+
+ const renderTooltip = ({ payload, label, unit }) => {
+ return (
+
+
{`${tickFormatter(label)} :${id === "fsmTotalCumulativeCollection" ? " ₹" : ""}${payload?.[0]?.value}${
+ id === "fsmTotalCumulativeCollection" ? (value?.denomination !== "Unit" ? value?.denomination : "") : `%`
+ }`}
+
+ );
+ };
+
+ if (isLoading) {
+ return
;
+ }
+
+ return (
+
+ {id === "fsmCapacityUtilization" && (
+
+ {t("DSS_FSM_TOTAL_SLUDGE_TREATED")} - {totalWaste} {t("DSS_KL")}
+
+ )}
+
+ {!chartData || chartData?.length === 0 ? (
+
+ ) : (
+
+
+
+
+
+
+ )}
+
+
+ );
+};
+
+export default CustomAreaChart;
diff --git a/frontend/micro-ui-internals/packages/modules/dss/src/components/CustomBarChart.js b/frontend/micro-ui-internals/packages/modules/dss/src/components/CustomBarChart.js
new file mode 100644
index 00000000000..a9ac94e7991
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/dss/src/components/CustomBarChart.js
@@ -0,0 +1,97 @@
+import React, { Fragment, useContext, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import { startOfMonth, endOfMonth, getTime } from "date-fns";
+import { Loader } from "@egovernments/digit-ui-react-components";
+import { ResponsiveContainer, Bar, BarChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from "recharts";
+import FilterContext from "./FilterContext";
+
+const CustomLabel = ({ x, y, name, stroke, value }) => {
+ const { t } = useTranslation();
+ return (
+ <>
+
+ {`${value}%`}
+
+
+ {t(name)}
+
+
+ );
+};
+
+const CustomBarChart = ({
+ xDataKey = "value",
+ xAxisType = "number",
+ yAxisType = "category",
+ yDataKey = "name",
+ hideAxis = true,
+ layout = "vertical",
+ fillColor = "#00703C",
+ showGrid = false,
+ showDrillDown = false,
+ data,
+ title,
+}) => {
+ const { id } = data;
+ const { t } = useTranslation();
+ const history = useHistory();
+ const { value } = useContext(FilterContext);
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const { isLoading, data: response } = Digit.Hooks.dss.useGetChart({
+ key: id,
+ type: "metric",
+ tenantId,
+ requestDate: { ...value?.requestDate, startDate: value?.range?.startDate?.getTime(), endDate: value?.range?.endDate?.getTime() },
+ filters: value?.filters,
+ });
+
+ const chartData = useMemo(() => {
+ if (!response) return null;
+ return response?.responseData?.data?.map((bar) => {
+ return {
+ name: t(bar?.plots?.[0].name),
+ value: bar?.plots?.[0].value,
+ };
+ });
+ }, [response]);
+
+ const goToDrillDownCharts = () => {
+ history.push(`/digit-ui/employee/dss/drilldown?chart=${response?.responseData?.drillDownChartId}&ulb=${value?.filters?.tenantId}&title=${title}`);
+ };
+ if (isLoading) {
+ return
;
+ }
+ if (chartData?.length === 0) {
+ return (
+
+ );
+ }
+ return (
+
+
+
+ {showGrid &&
+
+ {showDrillDown && (
+
+ {t("DSS_SHOW_MORE")}
+
+ )}
+
+ );
+};
+
+export default CustomBarChart;
diff --git a/frontend/micro-ui-internals/packages/modules/dss/src/components/CustomHorizontalBarChart.js b/frontend/micro-ui-internals/packages/modules/dss/src/components/CustomHorizontalBarChart.js
new file mode 100644
index 00000000000..0d45fa343fa
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/dss/src/components/CustomHorizontalBarChart.js
@@ -0,0 +1,128 @@
+import React, { useContext, useMemo, Fragment } from "react";
+import { useTranslation } from "react-i18next";
+import { startOfMonth, endOfMonth, getTime } from "date-fns";
+import { Loader, ResponseComposer } from "@egovernments/digit-ui-react-components";
+import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis, Text } from "recharts";
+import FilterContext from "./FilterContext";
+import { useHistory } from "react-router-dom";
+
+const barColors = ["#048BD0", "#FBC02D", "#8E29BF"];
+
+const CustomHorizontalBarChart = ({
+ data,
+ xAxisType = "category",
+ yAxisType = "number",
+ xDataKey = "name",
+ yDataKey = "",
+ xAxisLabel = "",
+ yAxisLabel = "",
+ layout = "horizontal",
+ title,
+ showDrillDown = false,
+}) => {
+ const { id } = data;
+ const { t } = useTranslation();
+ const history = useHistory();
+ const { value } = useContext(FilterContext);
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const { isLoading, data: response } = Digit.Hooks.dss.useGetChart({
+ key: id,
+ type: "metric",
+ tenantId,
+ requestDate: { ...value?.requestDate, startDate: value?.range?.startDate?.getTime(), endDate: value?.range?.endDate?.getTime() },
+ filters: value?.filters,
+ });
+
+ const constructChartData = (data) => {
+ let result = {};
+ for (let i = 0; i < data?.length; i++) {
+ const row = data[i];
+ for (let j = 0; j < row.plots.length; j++) {
+ const plot = row.plots[j];
+ result[plot.name] = { ...result[plot.name], [row.headerName]: plot.value };
+ }
+ }
+ return Object.keys(result).map((key) => {
+ return {
+ name: key,
+ ...result[key],
+ };
+ });
+ };
+
+ const goToDrillDownCharts = () => {
+ history.push(`/digit-ui/employee/dss/drilldown?chart=${response?.responseData?.drillDownChartId}&ulb=${value?.filters?.tenantId}&title=${title}`);
+ };
+
+ const tooltipFormatter = (value, name) => {
+ if (id === "fsmMonthlyWasteCal") {
+ return [`${Math.round((value + Number.EPSILON) * 100) / 100} ${t("DSS_KL")}`, name];
+ }
+ return [Math.round((value + Number.EPSILON) * 100) / 100, name];
+ };
+
+ const chartData = useMemo(() => constructChartData(response?.responseData?.data), [response]);
+
+ const renderLegend = (value) =>
{value} ;
+
+ const tickFormatter = (value) => {
+ if (typeof value === "string") {
+ return value.replace("-", ", ");
+ }
+ return value;
+ };
+
+ if (isLoading) {
+ return
;
+ }
+
+ // if (chartData?.length === 0) {
+ // return null;
+ // }
+
+ const bars = response?.responseData?.data?.map((bar) => bar?.headerName);
+
+ return (
+
+
+ {chartData?.length === 0 ? (
+
+ ) : (
+
+ 1 ? 1 : id} />
+ ))}
+
+ )}
+
+ {showDrillDown && (
+
+ {t("DSS_SHOW_MORE")}
+
+ )}
+
+ );
+};
+
+export default CustomHorizontalBarChart;
diff --git a/frontend/micro-ui-internals/packages/modules/dss/src/components/CustomPieChart.js b/frontend/micro-ui-internals/packages/modules/dss/src/components/CustomPieChart.js
new file mode 100644
index 00000000000..a955fd8b404
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/dss/src/components/CustomPieChart.js
@@ -0,0 +1,111 @@
+import React, { useContext, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { startOfMonth, endOfMonth, getTime } from "date-fns";
+import { ResponsiveContainer, Cell, Legend, Pie, PieChart, Tooltip } from "recharts";
+import { Card, Loader } from "@egovernments/digit-ui-react-components";
+import FilterContext from "./FilterContext";
+
+const COLORS = ["#048BD0", "#FBC02D", "#8E29BF", "#EA8A3B", "#0BABDE", "#FFBB28", "#FF8042"];
+
+const CustomPieChart = ({ dataKey = "value", data }) => {
+ const { id } = data;
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const { t } = useTranslation();
+ const { value } = useContext(FilterContext);
+ const { isLoading, data: response } = Digit.Hooks.dss.useGetChart({
+ key: id,
+ type: "metric",
+ tenantId,
+ requestDate: { ...value?.requestDate, startDate: value?.range?.startDate?.getTime(), endDate: value?.range?.endDate?.getTime() },
+ filters: value?.filters,
+ });
+
+ const chartData = useMemo(() => {
+ if (!response) return null;
+ const compareFn = (a, b) => b.value - a.value;
+ return response?.responseData?.data?.[0]?.plots.sort(compareFn).reduce((acc, plot, index) => {
+ if (index < 4) acc = acc.concat(plot);
+ else if (index === 4) acc = acc.concat({ label: null, name: "DSS.OTHERS", value: plot?.value, symbol: "amount" });
+ else acc[4].value += plot?.value;
+ return acc;
+ }, []);
+ }, [response]);
+
+ const renderLegend = (value) =>
{t(`PROPERTYTYPE_MASTERS_${value}`)} ;
+
+ const renderCustomLabel = (args) => {
+ const { value, endAngle, startAngle, x, cx, y, cy, percent, name } = args;
+ const diffAngle = endAngle - startAngle;
+ if (diffAngle < 7) {
+ return null;
+ }
+ return (
+
cx ? "start" : "end"}
+ >
+ {`${(percent * 100).toFixed(0)}%`}
+
+ );
+ };
+
+ const renderTooltip = ({ payload, label }) => {
+ return (
+
+
{`${t(`PROPERTYTYPE_MASTERS_${payload?.[0]?.name}`)}: ${Digit.Utils.dss.formatter(payload?.[0]?.value, payload?.[0]?.payload?.payload?.symbol, value?.denomination, false)}`}
+
+ );
+ }
+
+ if (isLoading) {
+ return
;
+ }
+ if (chartData?.length === 0) {
+ return (
+
+ );
+ }
+ return (
+
+
+
+ {response?.responseData?.data?.[0]?.plots.map((entry, index) => (
+ |
+ ))}
+
+
+
+ );
+};
+
+export default CustomPieChart;
diff --git a/frontend/micro-ui-internals/packages/modules/dss/src/components/CustomTable.js b/frontend/micro-ui-internals/packages/modules/dss/src/components/CustomTable.js
new file mode 100644
index 00000000000..ecaf4a19679
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/dss/src/components/CustomTable.js
@@ -0,0 +1,272 @@
+import React, { Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { startOfMonth, endOfMonth, getTime, subYears, differenceInCalendarDays } from "date-fns";
+import { UpwardArrow, TextInput, Loader, Table, RemoveableTag, Rating, DownwardArrow } from "@egovernments/digit-ui-react-components";
+import FilterContext from "./FilterContext";
+
+const InsightView = ({ rowValue, insight }) => {
+ return (
+
+ {rowValue}
+ {` `}
+ {insight >= 0 ?
+ );
+}
+
+const calculateFSTPCapacityUtilization = (value, totalCapacity, numberOfDays = 1) => {
+ if (value === undefined) return value;
+ return Math.round((((value / (totalCapacity * numberOfDays)) * 100)));
+}
+
+const CustomTable = ({ data, onSearch, setChartData }) => {
+ const { id } = data;
+ const [chartKey, setChartKey] = useState(id);
+ const [filterStack, setFilterStack] = useState([{ id: chartKey }]);
+ const { t } = useTranslation();
+ const { value, setValue, ulbTenants, fstpMdmsData } = useContext(FilterContext);
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const dssTenants = Digit.SessionStorage.get("DSS_TENANTS");
+ const lastYearDate = {
+ startDate: subYears(value?.range?.startDate, 1).getTime(),
+ endDate: subYears(value?.range?.endDate, 1).getTime(),
+ interval: "month",
+ title: "",
+ };
+ const { isLoading: isRequestLoading, data: lastYearResponse } = Digit.Hooks.dss.useGetChart({
+ key: chartKey,
+ type: "metric",
+ tenantId,
+ requestDate: { ...lastYearDate },
+ filters:
+ id === chartKey ? value?.filters : { [filterStack[filterStack.length - 1]?.filterKey]: filterStack[filterStack.length - 1]?.filterValue },
+ });
+ const { isLoading, data: response } = Digit.Hooks.dss.useGetChart({
+ key: chartKey,
+ type: "metric",
+ tenantId,
+ requestDate: { ...value?.requestDate, startDate: value?.range?.startDate?.getTime(), endDate: value?.range?.endDate?.getTime() },
+ filters:
+ id === chartKey ? value?.filters : { [filterStack[filterStack.length - 1]?.filterKey]: filterStack[filterStack.length - 1]?.filterValue },
+ });
+
+ const tableData = useMemo(() => {
+ if (!response || !lastYearResponse) return;
+ return response?.responseData?.data?.map((rows, id) => {
+ const lyData = lastYearResponse?.responseData?.data?.find((lyRow) => lyRow?.headerName === rows?.headerName);
+ return rows?.plots?.reduce((acc, row, currentIndex) => {
+ let cellValue = row?.value !== null ? row?.value : row?.label || "";
+ let prevData = lyData?.plots?.[currentIndex]?.value;
+ let insight = null;
+ if (row?.name === "CapacityUtilization" && chartKey !== "fsmVehicleLogReportByVehicleNo") {
+ const { range } = value;
+ const { startDate, endDate } = range;
+ const numberOfDays = differenceInCalendarDays(endDate, startDate) + 1;
+ const ulbs = dssTenants.filter((tenant) => tenant?.city?.ddrName === rows.headerName || tenant?.code === rows.headerName).map(tenant => tenant.code);
+ const totalCapacity = fstpMdmsData?.filter(plant => ulbs.find(ulb => plant.ULBS.includes(ulb))).reduce((acc, plant) => acc + Number(plant.PlantOperationalCapacityKLD), 0)
+ cellValue = calculateFSTPCapacityUtilization(cellValue, totalCapacity, numberOfDays);
+ prevData = calculateFSTPCapacityUtilization(prevData, totalCapacity, numberOfDays);
+ }
+ if (row?.name === "CapacityUtilization" && chartKey === "fsmVehicleLogReportByVehicleNo") {
+ const tankCapcity = rows?.plots.find(plot => plot?.name === "TankCapacity");
+ cellValue = calculateFSTPCapacityUtilization(cellValue, tankCapcity?.value);
+ prevData = calculateFSTPCapacityUtilization(prevData, tankCapcity?.value);
+ }
+ if ((row.symbol === "number" || row.symbol === "percentage" || row.symbol === "amount") && (row.name !== "CitizenAverageRating" && row.name !== "TankCapacity") && lyData !== undefined) {
+ if (prevData === cellValue) insight = 0;
+ else insight = prevData === 0 ? 100 : Math.round(((cellValue - prevData) / prevData) * 100);
+ }
+ // if (row?.name === "CapacityUtilization") cellValue = cellValue + "%"
+ if (typeof cellValue === "number" && !Number.isInteger(cellValue)) {
+ cellValue = Math.round((cellValue + Number.EPSILON) * 100) / 100;
+ }
+ acc[t(`DSS_HEADER_${row?.name.toUpperCase()}`)] = insight !== null ? { value: cellValue, insight } : row?.name === "S.N." ? id + 1 : cellValue;
+ acc['key'] = rows.headerName;
+ return acc;
+ }, {});
+ });
+ }, [response, lastYearResponse]);
+
+ useEffect(() => {
+ if (tableData) {
+ const result = tableData.map(row => {
+ return Object.keys(row).reduce((acc, key) => {
+ if (key === "key") return acc;
+ acc[key] = typeof row[key] === 'object' ? row[key]?.value : row[key];
+ return acc;
+ }, {});
+ })
+ setChartData(result);
+ }
+ }, [tableData]);
+
+ const filterValue = useCallback((rows, id, filterValue = "") => {
+ return rows.filter(row => {
+ const res = Object.keys(row.values).find(key => {
+ if (typeof row.values[key] === 'object') {
+ return Object.keys(row.values[key]).find(id => {
+ if (id === 'insight') {
+ return String(Math.abs(row.values[key][id]) + '%').toLowerCase().startsWith(filterValue?.toLowerCase());
+ }
+ return String(row.values[key][id]).toLowerCase().startsWith(filterValue?.toLowerCase());
+ })
+ }
+ return String(row.values[key]).toLowerCase().split(' ').some(str => str.startsWith(filterValue?.toLowerCase()));
+ })
+ return res;
+ })
+ }, []);
+
+ const renderUnits = (denomination) => {
+ switch (denomination) {
+ case "Unit":
+ return "(₹)";
+ case "Lac":
+ return "(Lac)"
+ case "Cr":
+ return "(Cr)";
+ }
+ }
+
+ const renderHeader = (plot) => {
+ const code = `DSS_HEADER_${plot?.name.toUpperCase()}`;
+ // const units = ["TotalSeptageDumped", "TotalSeptageCollected"];
+ // if (id === "fsmVehicleLogReportByDDR" && units.includes(plot?.name)) {
+ // return `${t(code)} (${t("DSS_KL")})`;
+ // }
+ if (plot?.symbol === "amount") {
+ return `${t(code)} ${renderUnits(value?.denomination)}`;
+ }
+ return t(code);
+ };
+
+ const getDrilldownCharts = (value, filterKey, label) => {
+ if (response?.responseData?.drillDownChartId && response?.responseData?.drillDownChartId !== "none") {
+ let currentValue = value;
+ if (filterKey === "tenantId") {
+ currentValue = dssTenants.filter((tenant) => tenant?.city?.ddrName === value || tenant?.code === value).map(tenant => tenant?.code);
+ if (currentValue === undefined) return;
+ }
+ setFilterStack([...filterStack, { id: response?.responseData?.drillDownChartId, name: value, filterKey, filterValue: currentValue, label }]);
+ setChartKey(response?.responseData?.drillDownChartId);
+ }
+ };
+
+ const sortRows = useCallback((rowA, rowB, columnId) => {
+ const firstCell = rowA.values[columnId];
+ const secondCell = rowB.values[columnId];
+ let value1, value2;
+ value1 = typeof firstCell === "object" ? firstCell?.value : firstCell;
+ value2 = typeof secondCell === "object" ? secondCell?.value : secondCell;
+ return String(value1).localeCompare(String(value2), undefined, { numeric: true });
+ }, []);
+
+ const accessData = (plot) => {
+ const name = t(`DSS_HEADER_${plot?.name.toUpperCase()}`)
+ return (originalRow, rowIndex, columns) => {
+ const cellValue = originalRow[name];
+ if (plot?.symbol === "amount") {
+ return typeof cellValue === "object" ?
+ { value: convertDenomination(cellValue?.value), insight: cellValue?.insight } :
+ String(convertDenomination(cellValue))
+ }
+ return originalRow[name];
+ }
+ }
+
+ const tableColumns = useMemo(
+ () => {
+ const columns = response?.responseData?.data?.find(row => !!row);
+ return columns?.plots?.filter(plot => plot?.name !== 'TankCapacity').map((plot) => ({
+ Header: renderHeader(plot),
+ accessor: accessData(plot),
+ id: plot?.name.replaceAll(".", " "),
+ symbol: plot?.symbol,
+ sortType: sortRows,
+ Cell: (args) => {
+ const { value: cellValue, column, row } = args;
+ if (typeof cellValue === "object") {
+ return (
+
+ );
+ }
+ const filter = response?.responseData?.filter.find((elem) => elem.column === column.id);
+ if (response?.responseData?.drillDownChartId !== "none" && filter !== undefined) {
+ return (
+
getDrilldownCharts(cellValue, filter?.key, t(`DSS_HEADER_${plot?.name.toUpperCase()}`))}>
+ {t(cellValue)}
+
+ );
+ }
+ if (column.id === "CitizenAverageRating") {
+ return
;
+ }
+ return String(t(cellValue));
+ },
+ })
+ )},
+ [response, value?.denomination, value?.range]
+ );
+
+ const convertDenomination = (val) => {
+ const { denomination } = value;
+ switch (denomination) {
+ case "Unit":
+ return val;
+ case "Lac":
+ return Number((val / 100000).toFixed(2));
+ case "Cr":
+ return Number((val / 10000000).toFixed(2));
+ }
+ };
+
+ const removeULB = (id) => {
+ const nextState = filterStack.filter((filter, index) => index < id);
+ setFilterStack(nextState);
+ setChartKey(nextState[nextState.length - 1]?.id);
+ };
+
+ if (isLoading || isRequestLoading) {
+ return
;
+ }
+ if (!tableColumns || !tableData) {
+ return (
+
+ );
+ }
+
+ return (
+
+ {filterStack.length > 1 && (
+
+ {t("DSS_FILTERS_APPLIED")}:
+ {filterStack.map((filter, id) => (id > 0 ? removeULB(id)} /> : null))}
+
+ )}
+
{
+ return {
+ style: {},
+ };
+ }}
+ />
+
+ );
+};
+
+export default CustomTable;
diff --git a/frontend/micro-ui-internals/packages/modules/dss/src/components/DSSCard.js b/frontend/micro-ui-internals/packages/modules/dss/src/components/DSSCard.js
new file mode 100644
index 00000000000..cb3e733ae72
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/dss/src/components/DSSCard.js
@@ -0,0 +1,39 @@
+import React, { Fragment } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { ArrowRightInbox, ShippingTruck } from "@egovernments/digit-ui-react-components";
+
+const ArrowRight = ({ to }) => (
+
+
+
+
+
+ {t("ES_TITLE_DSS")}
+
+
+
+
+
+
+
{t(`ES_DSS_DATE_RANGE`)}
+
+
+ setIsModalOpen((prevState) => !prevState)} />
+
+ {isModalOpen && (
+
+
+ )}
+
+
closeFilters()}>
+
+ {isOpen && (
+
+
+
{t(`DSS_FILTERS`)}
+
+
+
+ )}
+ {showDateRange && (
+
+
+ )}
+ {showDDR && (
+
+ )}
+ {showUlb && (
+
+ )}
+ {showDenomination && (
+
+
+ )}
+
+
+
+ {showHeader &&
{`${t(header)}`} }
+ {subHeader &&
{subHeader}
}
+
+
+ {showSearch && download(data)} />
+
+
{caption} }
+ {React.cloneElement(children, { setChartData })}
+
+ );
+};
+
+export default GenericChart;
diff --git a/frontend/micro-ui-internals/packages/modules/dss/src/components/Layout.js b/frontend/micro-ui-internals/packages/modules/dss/src/components/Layout.js
new file mode 100644
index 00000000000..481f6f64f8c
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/dss/src/components/Layout.js
@@ -0,0 +1,97 @@
+import React, { Fragment, useContext, useState } from "react";
+import { useTranslation } from "react-i18next";
+import CustomAreaChart from "./CustomAreaChart";
+import CustomBarChart from "./CustomBarChart";
+import CustomHorizontalBarChart from "./CustomHorizontalBarChart";
+import CustomPieChart from "./CustomPieChart";
+import CustomTable from "./CustomTable";
+import FilterContext from "./FilterContext";
+import GenericChart from "./GenericChart";
+import MetricChart from "./MetricChart";
+import Summary from "./Summary";
+
+let index = 1;
+
+const Layout = ({ rowData }) => {
+ const { t } = useTranslation();
+ const { value } = useContext(FilterContext);
+ const [searchQuery, onSearch] = useState("");
+
+ const renderChart = (chart, title) => {
+ switch (chart.chartType) {
+ case "table":
+ return
+
+ );
+ case "chart":
+ if (
+ value?.filters?.tenantId?.length === 0 &&
+ (visualizer?.charts?.[0].id === "fsmTopDsoByPerformance" || visualizer?.charts?.[0].id === "fsmBottomDsoByPerformance")
+ )
+ return null;
+ return (
+ onSearch(e.target.value)}
+ >
+ {/* {visualizer.charts.map((chart, key) => renderChart(chart, key))} */}
+ {renderChart(visualizer?.charts?.[0], visualizer.name)}
+
+ );
+ case "performing-metric":
+ if (
+ value?.filters?.tenantId?.length > 0 &&
+ (visualizer?.charts?.[0].id === "fsmTopUlbByPerformance" || visualizer?.charts?.[0].id === "fsmBottomUlbByPerformance")
+ )
+ return null;
+ return (
+
+
+ );
+ case "collection":
+ case "module":
+ return {rowData.vizArray.map((chart, key) => renderVisualizer(chart, key))}
;
+};
+
+export default Layout;
diff --git a/frontend/micro-ui-internals/packages/modules/dss/src/components/MetricChart.js b/frontend/micro-ui-internals/packages/modules/dss/src/components/MetricChart.js
new file mode 100644
index 00000000000..a34fd783570
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/dss/src/components/MetricChart.js
@@ -0,0 +1,67 @@
+import React, { Fragment, useContext } from "react";
+import { useTranslation } from "react-i18next";
+import { Card, CardSubHeader, Rating, UpwardArrow, DownwardArrow } from "@egovernments/digit-ui-react-components";
+import { startOfMonth, endOfMonth, getTime } from "date-fns";
+import FilterContext from "./FilterContext";
+
+const MetricData = ({ t, data, code }) => {
+ const { value } = useContext(FilterContext);
+ return (
+
+
+ {code === "citizenAvgRating" ? (
+
+ {data?.insight && (
+
+ {data?.insight?.indicator === "upper_green" ?
:
}
+
{data?.insight.value.replace(/[+-]/g, "")}
+
+ )}
+
+
{t(data.name)}
+
+ {/*
{`${displaySymbol(response.headerSymbol)} ${response.headerValue}`}
*/}
+
+
+
{t(data?.name)}
+
{response?.responseData?.data?.[0]?.headerValue}
+
+ {/*
+
This Month
+
{ monthValue }
+
+
*/}
+
+
+
+
+
+
+ {data.charts.map((chart, key) => (
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Summary;
diff --git a/frontend/micro-ui-internals/packages/modules/dss/src/components/Switch.js b/frontend/micro-ui-internals/packages/modules/dss/src/components/Switch.js
new file mode 100644
index 00000000000..f26c1d95c4e
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/dss/src/components/Switch.js
@@ -0,0 +1,30 @@
+import React, { Fragment, useContext } from "react";
+import FilterContext from "./FilterContext";
+
+const denominations = ["Cr", "Lac", "Unit"];
+
+const Switch = ({ onSelect, t }) => {
+ const { value } = useContext(FilterContext);
+ return (
+ <>
+ {t(`ES_DSS_DENOMINATION`)}
+
+ {denominations.map((label, idx) => (
+
+ {label}
+
+ ))}
+
+
+
+ {filters?.filters?.tenantId?.map((filter, id) => (
+
removeULB(id)} />
+ ))}
+
+ {t(`DSS_FILTER_CLEAR`)}
+
+ onSearch(e.target.value)} showHeader={false}>
+
+
+ );
+};
+
+export default DrillDown;
diff --git a/frontend/micro-ui-internals/packages/modules/dss/src/pages/Overview.js b/frontend/micro-ui-internals/packages/modules/dss/src/pages/Overview.js
new file mode 100644
index 00000000000..45d8bcbc888
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/dss/src/pages/Overview.js
@@ -0,0 +1,25 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Header, Loader } from "@egovernments/digit-ui-react-components";
+import Layout from "../components/Layout";
+
+const Overview = () => {
+ const { t } = useTranslation();
+ const moduleCode = "home";
+ const { data: response, isLoading } = Digit.Hooks.dss.useDashboardConfig(moduleCode);
+
+ if (isLoading) {
+ return
+
+ {response?.responseData?.[0]?.visualizations.map((item, key) => (
+
+ );
+};
+
+export default Overview;
diff --git a/frontend/micro-ui-internals/packages/modules/dss/src/pages/index.js b/frontend/micro-ui-internals/packages/modules/dss/src/pages/index.js
new file mode 100644
index 00000000000..af028f91a6e
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/dss/src/pages/index.js
@@ -0,0 +1,220 @@
+import React, { useMemo, useState, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import {
+ Header,
+ Loader,
+ ShareIcon,
+ DownloadIcon,
+ FilterIcon,
+ RemoveableTag,
+ MultiLink,
+ EmailIcon,
+ WhatsappIcon,
+} from "@egovernments/digit-ui-react-components";
+import { startOfYear, endOfYear, format, addMonths, endOfToday } from "date-fns";
+import Filters from "../components/Filters";
+import Layout from "../components/Layout";
+import FilterContext from "../components/FilterContext";
+import { useParams } from "react-router-dom";
+
+const key = 'DSS_FILTERS';
+
+const getInitialRange = () => {
+ const data = Digit.SessionStorage.get(key);
+ const startDate = data?.range?.startDate ? new Date(data?.range?.startDate) : addMonths(startOfYear(new Date()), 3);
+ const endDate = data?.range?.endDate ? new Date(data?.range?.endDate) : endOfToday();
+ const title = `${format(startDate, "MMM d, yyyy")} - ${format(endDate, "MMM d, yyyy")}`;
+ const duration = Digit.Utils.dss.getDuration(startDate, endDate);
+ const denomination = data?.denomination || "Unit";
+ const tenantId = data?.filters?.tenantId || []
+ return { startDate, endDate, title, duration, denomination, tenantId };
+};
+
+const DashBoard = ({ stateCode }) => {
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const { t } = useTranslation();
+ const [filters, setFilters] = useState(() => {
+ const { startDate, endDate, title, duration, denomination, tenantId } = getInitialRange();
+ return {
+ denomination,
+ range: { startDate, endDate, title, duration},
+ requestDate: {
+ startDate: startDate.getTime(),
+ endDate: endDate.getTime(),
+ interval: duration,
+ title: title,
+ },
+ filters: {
+ tenantId,
+ }
+ }
+ });
+ const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
+ const { moduleCode } = useParams();
+
+ const language = Digit.StoreData.getCurrentLanguage();
+
+ const { isLoading: localizationLoading, data: store } = Digit.Services.useStore({ stateCode, moduleCode, language });
+ const { data: screenConfig } = Digit.Hooks.dss.useMDMS(stateCode, "dss-dashboard", "DssDashboard");
+ const { data: response, isLoading } = Digit.Hooks.dss.useDashboardConfig(moduleCode);
+ const { data: ulbTenants, isLoading: isUlbLoading } = Digit.Hooks.useModuleTenants("FSM");
+ const { isLoading: isMdmsLoading, data: mdmsData } = Digit.Hooks.useCommonMDMS(stateCode, "FSM", "FSTPPlantInfo");
+ const [showOptions, setShowOptions] = useState(false);
+
+ const handleFilters = (data) => {
+ Digit.SessionStorage.set(key, data);
+ setFilters(data);
+ }
+ const fullPageRef = useRef();
+ const provided = useMemo(
+ () => ({
+ value: filters,
+ setValue: handleFilters,
+ ulbTenants,
+ fstpMdmsData: mdmsData
+ }),
+ [filters, isUlbLoading, isMdmsLoading]
+ );
+ const handlePrint = () => Digit.Download.PDF(fullPageRef, t(dashboardConfig?.[0]?.name));
+
+ const removeULB = (id) => {
+ handleFilters({ ...filters, filters: { ...filters?.filters, tenantId: [...filters?.filters?.tenantId].filter((tenant, index) => index !== id) } });
+ };
+
+ const handleClear = () => {
+ handleFilters({ ...filters, filters: { ...filters?.filters, tenantId: [] } });
+ };
+
+ const dashboardConfig = response?.responseData;
+
+ const shareOptions = navigator.share
+ ? [
+ {
+ label: t("ES_DSS_SHARE_PDF"),
+ onClick: () => {
+ setShowOptions(!showOptions);
+ setTimeout(() => {
+ Digit.ShareFiles.PDF(tenantId, fullPageRef, t(dashboardConfig?.[0]?.name));
+ }, 500)
+ },
+ },
+ {
+ label: t("ES_DSS_SHARE_IMAGE"),
+ onClick: () => {
+ setShowOptions(!showOptions);
+ setTimeout(() => {
+ Digit.ShareFiles.Image(tenantId, fullPageRef, t(dashboardConfig?.[0]?.name));
+ }, 500)
+ },
+ },
+ ]
+ : [
+ {
+ icon:
+
+
+
{t(dashboardConfig?.[0]?.name)}
+
+
+
+
+
+
+
+
setIsFilterModalOpen(false)} />
+ {filters?.filters?.tenantId.length > 0 && (
+
+ {filters?.filters?.tenantId?.map((filter, id) => (
+
removeULB(id)} />
+ ))}
+
+ {t(`DSS_FILTER_CLEAR`)}
+
+
+
+ setIsFilterModalOpen(!isFilterModalOpen)} style />
+
+
+
+
+
+
+ );
+};
+
+export default DashBoard;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/package.json b/frontend/micro-ui-internals/packages/modules/fsm/package.json
new file mode 100644
index 00000000000..ca8b9bf9617
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/package.json
@@ -0,0 +1,35 @@
+{
+ "name": "@egovernments/digit-ui-module-fsm",
+ "version": "1.3.0",
+ "license": "MIT",
+ "main": "dist/index.js",
+ "module": "dist/index.modern.js",
+ "source": "src/Module.js",
+ "files": [
+ "dist"
+ ],
+ "scripts": {
+ "start": "microbundle-crl watch --no-compress --format modern,cjs",
+ "build": "microbundle-crl --no-compress --format modern,cjs",
+ "prepublish": "yarn build"
+ },
+ "peerDependencies": {
+ "react": "^17.0.0",
+ "react-router-dom": "^5.2.0"
+ },
+ "dependencies": {
+ "@egovernments/digit-ui-libraries": "^1.3.0",
+ "@egovernments/digit-ui-react-components": "^1.3.0",
+ "react": "^17.0.0",
+ "react-dom": "^17.0.0",
+ "react-hook-form": "^6.7.0",
+ "react-i18next": "^11.7.3",
+ "react-query": "^3.6.1",
+ "react-redux": "^7.2.1",
+ "react-router-dom": "^5.2.0",
+ "react-table": "^7.6.1",
+ "react-time-picker": "4.2.0",
+ "redux": "^4.0.5",
+ "redux-thunk": "^2.3.0"
+ }
+}
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/Module.js b/frontend/micro-ui-internals/packages/modules/fsm/src/Module.js
new file mode 100644
index 00000000000..0aa40197b59
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/Module.js
@@ -0,0 +1,270 @@
+import { BackButton, BreadCrumb, CitizenHomeCard, CitizenTruck, Loader, PrivateRoute } from "@egovernments/digit-ui-react-components";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, Redirect, Switch, useLocation, useRouteMatch } from "react-router-dom";
+import FSMCard from "./components/FsmCard";
+import CheckSlum from "./pageComponents/CheckSlum";
+import SelectAddress from "./pageComponents/SelectAddress";
+import SelectChannel from "./pageComponents/SelectChannel";
+import SelectGeolocation from "./pageComponents/SelectGeolocation";
+import SelectLandmark from "./pageComponents/SelectLandmark";
+import SelectName from "./pageComponents/SelectName";
+import SelectPincode from "./pageComponents/SelectPincode";
+import SelectPitType from "./pageComponents/SelectPitType";
+import SelectPropertySubtype from "./pageComponents/SelectPropertySubtype";
+import SelectPropertyType from "./pageComponents/SelectPropertyType";
+import SelectSlumName from "./pageComponents/SelectSlumName";
+import SelectStreet from "./pageComponents/SelectStreet";
+import SelectTankSize from "./pageComponents/SelectTankSize";
+import SelectTripData from "./pageComponents/SelectTripData";
+import ApplicationDetails from "./pages/citizen/ApplicationDetails";
+import { MyApplications } from "./pages/citizen/MyApplications";
+import NewApplicationCitizen from "./pages/citizen/NewApplication/index";
+import RateView from "./pages/citizen/Rating/RateView";
+import SelectRating from "./pages/citizen/Rating/SelectRating";
+import ApplicationAudit from "./pages/employee/ApplicationAudit";
+import EmployeeApplicationDetails from "./pages/employee/ApplicationDetails";
+import DsoDashboard from "./pages/employee/DsoDashboard";
+import EditApplication from "./pages/employee/EditApplication";
+import FstpInbox from "./pages/employee/FstpInbox";
+import FstpOperatorDetails from "./pages/employee/FstpOperatorDetails";
+import Inbox from "./pages/employee/Inbox";
+import { NewApplication } from "./pages/employee/NewApplication";
+import Response from "./pages/Response";
+
+
+
+
+
+const FsmBreadCrumb = ({ location }) => {
+ const { t } = useTranslation();
+ const DSO = Digit.UserService.hasAccess(["FSM_DSO"]);
+ const isApplicationDetails = location?.pathname?.includes("application-details");
+ const isInbox = location?.pathname?.includes("inbox");
+ const isFsm = location?.pathname?.includes("fsm");
+ const isSearch = location?.pathname?.includes("search");
+ const [search, setSearch] = useState(false);
+
+ useEffect(() => {
+ if (!search) {
+ setSearch(isSearch);
+ } else if (isInbox && search) {
+ setSearch(false);
+ }
+ }, [location]);
+
+ const crumbs = [
+ {
+ path: DSO ? "/digit-ui/citizen/fsm/dso-dashboard" : "/digit-ui/employee",
+ content: t("ES_COMMON_HOME"),
+ show: isFsm,
+ },
+ {
+ path: "/digit-ui/employee/fsm/inbox",
+ content: isInbox || isApplicationDetails || search ? t("ES_TITLE_INBOX") : "FSM",
+ show: isFsm,
+ },
+ {
+ path: "/digit-ui/employee/fsm/search",
+ content: t("ES_TITILE_SEARCH_APPLICATION"),
+ show: search,
+ },
+ { content: t("ES_TITLE_APPLICATION_DETAILS"), show: isApplicationDetails },
+ ];
+
+ return
+
+
+
+
+
+ );
+};
+
+const CitizenApp = ({ path }) => {
+ const location = useLocation();
+ const { t } = useTranslation();
+
+ return (
+
+ {!location.pathname.includes("/new-application/response") && {t("CS_COMMON_BACK")} }
+
+
+ Digit.UserService.hasAccess(["FSM_DSO"]) ?
+ Digit.UserService.hasAccess(["FSM_DSO"]) ?
+
+ );
+};
+
+const FSMModule = ({ stateCode, userType, tenants }) => {
+ const moduleCode = "FSM";
+ const { path, url } = useRouteMatch();
+ const language = Digit.StoreData.getCurrentLanguage();
+ const { isLoading, data: store } = Digit.Services.useStore({ stateCode, moduleCode, language });
+
+ if (isLoading) {
+ return
+
+
+
+
+
+
+
+
+
{t("ES_TITLE_FSM")}
+
+
+
+
+
+
+ {/*
+ */}
+
+
+
+
+
+
+
{t("CS_FSM_RATE")}
+
+
+
+
+
{t("CS_FSM_RATE_VIEW")}
+
+
+
+ );
+ case "SUBMIT_FEEDBACK":
+ return (
+
+
+ );
+ }
+ };
+
+ if (isLoading) {
+ return
+ {!isLoading && (
+
+ {data?.timeline?.length > 0 && (
+
+ {t("CS_APPLICATION_DETAILS_APPLICATION_TIMELINE")}
+
+ )}
+ {data?.timeline && data?.timeline?.length === 1 ? (
+
+ {data?.timeline &&
+ data?.timeline.map((checkpoint, index, arr) => {
+ return (
+
+
+ );
+ })}
+
+ )}
+
+ )}
+ {data && showNextActions(data?.nextActions[0])}
+
+ );
+};
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/components/CustomTimePicker.js b/frontend/micro-ui-internals/packages/modules/fsm/src/components/CustomTimePicker.js
new file mode 100644
index 00000000000..13c8d402eb2
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/components/CustomTimePicker.js
@@ -0,0 +1,14 @@
+import React, { Fragment } from "react";
+import TimePicker from "react-time-picker";
+import { TextInput } from "@egovernments/digit-ui-react-components";
+
+const CustomTimePicker = ({ name, value, onChange }) => {
+ const timeFormat = new Date().toLocaleTimeString();
+ if (timeFormat.includes("AM") || timeFormat.includes("PM")) {
+ return onChange(event.target.value)} className="custom-time-picker" />;
+ }
+
+ return {value} ;
+ const FSTP = Digit.UserService.hasAccess("FSM_EMP_FSTPO") || false;
+
+ const GetSlaCell = (value) => {
+ if (isNaN(value)) return 0 ;
+ return value < 0 ? {value} : {value} ;
+ };
+
+ function goTo(id) {
+ // console.log("id", id);
+ // history.push("/digit-ui/employee/fsm/complaint/details/" + id);
+ }
+
+ const columns = React.useMemo(() => {
+ if (props.isSearch) {
+ return [
+ {
+ Header: t("ES_INBOX_APPLICATION_NO"),
+ accessor: "applicationNo",
+ disableSortBy: true,
+ Cell: ({ row }) => {
+ return (
+
+ );
+ },
+ },
+ {
+ Header: t("ES_APPLICATION_DETAILS_APPLICANT_NAME"),
+ disableSortBy: true,
+ accessor: (row) => GetCell(row.citizen?.name || ""),
+ },
+ {
+ Header: t("ES_APPLICATION_DETAILS_APPLICANT_MOBILE_NO"),
+ disableSortBy: true,
+ accessor: (row) => GetCell(row.citizen?.mobileNumber || ""),
+ },
+ {
+ Header: t("ES_APPLICATION_DETAILS_PROPERTY_TYPE"),
+ accessor: (row) => {
+ const key = t(`PROPERTYTYPE_MASTERS_${row.propertyUsage.split(".")[0]}`);
+ // console.log(PropertyType.data && PropertyType.data[key]);
+ return key;
+ },
+ disableSortBy: true,
+ },
+ {
+ Header: t("ES_APPLICATION_DETAILS_PROPERTY_SUB-TYPE"),
+ accessor: (row) => {
+ const key = t(`PROPERTYTYPE_MASTERS_${row.propertyUsage}`);
+ return key;
+ },
+ disableSortBy: true,
+ },
+ {
+ Header: t("ES_INBOX_LOCALITY"),
+ accessor: (row) => GetCell(t(Digit.Utils.locale.getRevenueLocalityCode(row.address.locality.code, row.tenantId))),
+ disableSortBy: true,
+ },
+ {
+ Header: t("ES_INBOX_STATUS"),
+ accessor: (row) => {
+ return GetCell(t(`CS_COMMON_FSM_${row.applicationStatus}`));
+ },
+ disableSortBy: true,
+ },
+ ];
+ }
+ switch (props.userRole) {
+ case "FSM_EMP_FSTPO":
+ return [
+ {
+ Header: t("ES_INBOX_VEHICLE_LOG"),
+ accessor: "applicationNo",
+ Cell: ({ row }) => {
+ return (
+
+
+
+
+ );
+ },
+ },
+ {
+ Header: t("ES_INBOX_VEHICLE_NO"),
+ accessor: (row) => row.vehicle?.registrationNumber,
+ },
+ {
+ Header: t("ES_INBOX_DSO_NAME"),
+ accessor: (row) => `${row.dsoName} - ${row.tripOwner.name}`,
+ },
+ {
+ Header: t("ES_INBOX_WASTE_COLLECTED"),
+ accessor: (row) => row.tripDetails[0]?.volume,
+ },
+ ];
+ default:
+ return [
+ {
+ Header: t("CS_FILE_DESLUDGING_APPLICATION_NO"),
+ Cell: ({ row }) => {
+ return (
+
+ );
+ },
+ },
+ {
+ Header: t("ES_INBOX_APPLICATION_DATE"),
+ accessor: "createdTime",
+ Cell: ({ row }) => {
+ return GetCell(
+ `${row.original.createdTime.getDate()}/${row.original.createdTime.getMonth() + 1}/${row.original.createdTime.getFullYear()}`
+ );
+ },
+ },
+ {
+ Header: t("ES_INBOX_LOCALITY"),
+ Cell: ({ row }) => {
+ return GetCell(t(Digit.Utils.locale.getRevenueLocalityCode(row.original["locality"], row.original["tenantId"])));
+ },
+ // Cell: (row) => {
+ // return GetCell(t(`CS_COMMON_${row.row.original["status"]}`));
+ // },
+ },
+ {
+ Header: t("ES_INBOX_STATUS"),
+ Cell: (row) => {
+ return GetCell(t(`CS_COMMON_FSM_${row.row.original["status"]}`));
+ },
+ },
+ {
+ Header: t("ES_INBOX_SLA_DAYS_REMAINING"),
+ Cell: ({ row }) => {
+ return GetSlaCell(row.original["sla"]);
+ },
+ },
+ ];
+ }
+ }, []);
+
+ let result;
+ if (props.isLoading) {
+ result =
+ {/* TODO Change localization key */}
+ {
+ // t("CS_MYCOMPLAINTS_NO_COMPLAINTS")
+ t("CS_MYAPPLICATIONS_NO_APPLICATION")
+ .split("\\n")
+ .map((text, index) => (
+
+ {text}
+
+ ))
+ }
+
+ );
+ } else if (props?.data?.table?.length > 0) {
+ result = (
+ {
+ return {
+ style: {
+ minWidth: cellInfo.column.Header === t("ES_INBOX_APPLICATION_NO") ? "240px" : "",
+ padding: "20px 18px",
+ fontSize: "16px",
+ // borderTop: "1px solid grey",
+ // textAlign: "left",
+ // verticalAlign: "middle",
+ },
+ };
+ }}
+ onPageSizeChange={props.onPageSizeChange}
+ currentPage={props.currentPage}
+ onNextPage={props.onNextPage}
+ onPrevPage={props.onPrevPage}
+ pageSizeLimit={props.pageSizeLimit}
+ onSort={props.onSort}
+ disableSort={props.disableSort}
+ onPageSizeChange={props.onPageSizeChange}
+ sortParams={props.sortParams}
+ totalRecords={props.totalRecords}
+ />
+ );
+ }
+
+ return (
+
+ {props.userRole !== "FSM_EMP_FSTPO" && !props.isSearch && (
+
+ )}
+
+
0 ;
+ return value < 0 ? {value} : {value} ;
+};
+
+const GetCell = (value) => {value} ;
+
+const MobileInbox = ({
+ data,
+ vehicleLog,
+ isLoading,
+ isSearch,
+ onSearch,
+ onFilterChange,
+ onSort,
+ searchParams,
+ searchFields,
+ linkPrefix,
+ parentRoute,
+ removeParam,
+ sortParams,
+}) => {
+ const { t } = useTranslation();
+ const getData = () => {
+ if (isSearch) {
+ return data?.map(({ applicationNo, applicationStatus, propertyUsage, tenantId, address, citizen }) => ({
+ [t("ES_INBOX_APPLICATION_NO")]: applicationNo,
+ [t("ES_APPLICATION_DETAILS_APPLICANT_NAME")]: GetCell(citizen?.name || ""),
+ [t("ES_APPLICATION_DETAILS_APPLICANT_MOBILE_NO")]: GetCell(citizen?.mobileNumber || ""),
+ [t("ES_APPLICATION_DETAILS_PROPERTY_TYPE")]: GetCell(t(`PROPERTYTYPE_MASTERS_${propertyUsage.split(".")[0]}`)),
+ [t("ES_APPLICATION_DETAILS_PROPERTY_SUB-TYPE")]: GetCell(t(`PROPERTYTYPE_MASTERS_${propertyUsage}`)),
+ [t("ES_INBOX_LOCALITY")]: GetCell(t(Digit.Utils.locale.getRevenueLocalityCode(address.locality.code, tenantId))),
+ [t("ES_INBOX_STATUS")]: GetCell(t(`CS_COMMON_FSM_${applicationStatus}`)),
+ }));
+ } else {
+ return data?.map(({ locality, applicationNo, createdTime, tenantId, status, sla }) => ({
+ [t("ES_INBOX_APPLICATION_NO")]: applicationNo,
+ [t("ES_INBOX_APPLICATION_DATE")]: `${createdTime.getDate()}/${createdTime.getMonth() + 1}/${createdTime.getFullYear()}`,
+ [t("ES_INBOX_LOCALITY")]: GetCell(t(Digit.Utils.locale.getRevenueLocalityCode(locality, tenantId))),
+ [t("ES_INBOX_STATUS")]: GetCell(t(`CS_COMMON_${status}`)),
+ [t("ES_INBOX_SLA_DAYS_REMAINING")]: GetSlaCell(sla),
+ }));
+ }
+ };
+
+ const DSO = Digit.UserService.hasAccess(["FSM_DSO"]) || false;
+
+ const isFstpOperator = Digit.UserService.hasAccess("FSM_EMP_FSTPO") || false;
+
+ const fstpOperatorData = vehicleLog?.map((vehicle) => ({
+ [t("ES_INBOX_VEHICLE_LOG")]: vehicle?.applicationNo,
+ [t("ES_INBOX_VEHICLE_NO")]: vehicle?.vehicle?.registrationNumber,
+ [t("ES_INBOX_DSO_NAME")]: vehicle?.tripOwner.displayName,
+ [t("ES_INBOX_WASTE_COLLECTED")]: vehicle?.tripDetails[0]?.volume,
+ }));
+
+ return (
+
+
+
+ {!isFstpOperator && !isSearch &&
}
+
+
+
+
+
{headComment}
+
{otherComment}
+
+ {data.date &&
{data.date}
}
+
+ {data.mobileNumber &&
}
+ {data.source &&
{t("ES_APPLICATION_DETAILS_APPLICATION_CHANNEL_" + data.source.toUpperCase())}
}
+ {data.comment &&
}
+
+ {assigner?.name}
+ {` `}
+ {data?.Employees?.[0]?.assignments?.[0]?.designation
+ ? `(${t(`COMMON_MASTERS_DESIGNATION_${data?.Employees?.[0]?.assignments?.[0]?.designation}`)})`
+ : ""}
+ {assigner?.type === "CITIZEN" && assigner?.roles?.some((role) => role.code === "FSM_DSO") ? "(DSO)" : ""}
+
+ );
+};
+
+export default Username;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/ApplicationCard.js b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/ApplicationCard.js
new file mode 100644
index 00000000000..343b946107e
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/ApplicationCard.js
@@ -0,0 +1,158 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import { Card, DetailsCard, Loader, PopUp, SearchAction } from "@egovernments/digit-ui-react-components";
+import { FilterAction } from "@egovernments/digit-ui-react-components";
+import Filter from "./Filter";
+import SearchApplication from "./search";
+import SortBy from "./SortBy";
+
+export const ApplicationCard = ({
+ t,
+ data,
+ onFilterChange,
+ onSearch,
+ onSort,
+ serviceRequestIdKey,
+ isFstpOperator,
+ isLoading,
+ isSearch,
+ searchParams,
+ searchFields,
+ sortParams,
+ linkPrefix,
+ removeParam,
+}) => {
+ const [type, setType] = useState(isSearch ? "SEARCH" : "");
+ const [popup, setPopup] = useState(isSearch ? true : false);
+ const [params, setParams] = useState(searchParams);
+ const [_sortparams, setSortParams] = useState(sortParams);
+
+ const selectParams = (param) => {
+ setParams((o) => ({ ...o, ...param }));
+ };
+
+ const clearParam = () => {
+ setParams({});
+ };
+
+ const onSearchPara = (param) => {
+ onFilterChange({ ...params, ...param });
+ setType("");
+ setPopup(false);
+ };
+
+ useEffect(() => {
+ if (type) setPopup(true);
+ }, [type]);
+
+ const DSO = Digit.UserService.hasAccess(["FSM_DSO"]) || false;
+
+ const handlePopupClose = () => {
+ setPopup(false);
+ setType("");
+ setParams(searchParams);
+ setSortParams(sortParams);
+ };
+
+ const onSearchSortParams = (d) => {
+ setSortParams(d);
+ setPopup(false);
+ setType("");
+ onSort(d);
+ };
+
+ if (isLoading) {
+ return
+ {t("CS_MYAPPLICATIONS_NO_APPLICATION")
+ .split("\\n")
+ .map((text, index) => (
+
+ {text}
+
+ ))}
+
+ );
+ } else if (data && data?.length > 0) {
+ result = (
+
+
+ {onSearch && (
+ {
+ setType("SEARCH");
+ setPopup(true);
+ }}
+ />
+ )}
+ {!isSearch && onFilterChange && (
+ {
+ setType("FILTER");
+ setPopup(true);
+ }}
+ />
+ )}
+ {
+ setType("SORT");
+ setPopup(true);
+ }}
+ />
+
+ {result}
+ {popup && (
+
+ {type === "FILTER" && (
+
+ {
+
+ )}
+ {type === "SORT" && (
+
+ {
+ )}
+ {type === "SEARCH" && (
+
+
+ )}
+
+ )}
+
+ );
+};
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/ApplicationLinks.js b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/ApplicationLinks.js
new file mode 100644
index 00000000000..edbf8ce6694
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/ApplicationLinks.js
@@ -0,0 +1,79 @@
+import { Card, ShippingTruck } from "@egovernments/digit-ui-react-components";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
+const ApplicationLinks = ({ linkPrefix }) => {
+ const { t } = useTranslation();
+
+ const allLinks = [
+ {
+ text: t("ES_TITLE_NEW_DESULDGING_APPLICATION"),
+ link: "/digit-ui/employee/fsm/new-application",
+ accessTo: ["FSM_CREATOR_EMP"],
+ },
+ // { text: t("ES_TITLE_REPORTS"), link: "/employee" },
+ // { text: t("ES_TITLE_DASHBOARD"), link: "/employee" },
+ {
+ text: t("ES_TITILE_SEARCH_APPLICATION"),
+ link: `${linkPrefix}/search`,
+ },
+ ];
+
+ const [links, setLinks] = useState([]);
+
+ const { roles } = Digit.UserService.getUser().info;
+
+ const hasAccess = (accessTo) => {
+ return roles.filter((role) => accessTo.includes(role.code)).length;
+ };
+
+ useEffect(() => {
+ let linksToShow = [];
+ allLinks.forEach((link) => {
+ if (link.accessTo) {
+ if (hasAccess(link.accessTo)) {
+ linksToShow.push(link);
+ }
+ } else {
+ linksToShow.push(link);
+ }
+ });
+ setLinks(linksToShow);
+ }, []);
+
+ // useEffect(() => {
+ // if (isMobile) {
+ // const mobileLinks = links.filter((link) => {
+ // return link.text !== t("ES_TITLE_DASHBOARD");
+ // });
+ // setLinks(mobileLinks);
+ // }
+ // }, []);
+
+ const GetLogo = () => (
+
+
+ {" "}
+ {t("ES_TITLE_FAECAL_SLUDGE_MGMT")}
+
+ );
+
+ return (
+
+
+ {GetLogo()}
+
+ {links.map(({ link, text }, index) => (
+
+
+ ))}
+
+
+ );
+};
+
+export default ApplicationLinks;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/ApplicationTable.js b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/ApplicationTable.js
new file mode 100644
index 00000000000..3259185d568
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/ApplicationTable.js
@@ -0,0 +1,38 @@
+import React from "react";
+import { Table } from "@egovernments/digit-ui-react-components";
+
+const ApplicationTable = ({
+ t,
+ currentPage,
+ columns,
+ data,
+ getCellProps,
+ disableSort,
+ onSort,
+ onNextPage,
+ onPrevPage,
+ onPageSizeChange,
+ pageSizeLimit,
+ sortParams,
+ totalRecords,
+}) => {
+ return (
+
+ );
+};
+
+export default ApplicationTable;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/AssignedTo.js b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/AssignedTo.js
new file mode 100644
index 00000000000..45a02a674f1
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/AssignedTo.js
@@ -0,0 +1,34 @@
+import React from "react";
+import { RadioButtons } from "@egovernments/digit-ui-react-components";
+
+const AssignedTo = ({ onFilterChange, searchParams, paginationParms, tenantId, t }) => {
+ const { data: AssignedToAll } = Digit.Hooks.fsm.useInbox(
+ tenantId,
+ {
+ ...searchParams,
+ ...paginationParms,
+ fromDate: searchParams?.fromDate ? new Date(searchParams?.fromDate).getTime() : undefined,
+ toDate: searchParams?.toDate ? new Date(searchParams?.toDate).getTime() : undefined,
+ total: true,
+ uuid: { code: "ASSIGNED_TO_ALL", name: t("ES_INBOX_ASSIGNED_TO_ALL") },
+ }
+ );
+
+ const availableOptions = [
+ { code: "ASSIGNED_TO_ME", name: `${t("ES_INBOX_ASSIGNED_TO_ME")} (0)` },
+ { code: "ASSIGNED_TO_ALL", name: `${t("ES_INBOX_ASSIGNED_TO_ALL")} (${AssignedToAll?.totalCount || 0})` },
+ ];
+
+ return (
+
+ onFilterChange({ uuid: { code: d.code } })}
+ selectedOption={availableOptions.filter((option) => option.code === searchParams?.uuid?.code)[0]}
+ optionsKey="name"
+ options={availableOptions}
+ />
+
+ );
+};
+
+export default AssignedTo;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/DropdownStatus.js b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/DropdownStatus.js
new file mode 100644
index 00000000000..f6bfb296cf8
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/DropdownStatus.js
@@ -0,0 +1,12 @@
+import React from "react";
+import { Dropdown, Loader } from "@egovernments/digit-ui-react-components";
+
+const DropdownStatus = ({ onAssignmentChange, value, applicationStatuses, areApplicationStatus }) => {
+ return areApplicationStatus ? (
+
+
+ {" "}
+ {t("ES_TITLE_FAECAL_SLUDGE_MGMT")}
+
+ );
+
+ return (
+
+
+ {GetLogo()}
+
+ {links.map(({ link, text, hyperlink = false, accessTo = [] }, index) => {
+ return (
+
+ {hyperlink ? {text} :
+ );
+ })}
+
+
+ );
+};
+
+export default FSMLink;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/Filter.js b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/Filter.js
new file mode 100644
index 00000000000..333a94e30f0
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/Filter.js
@@ -0,0 +1,128 @@
+import React from "react";
+import { ActionBar, RemoveableTag, CloseSvg, Loader, Localities } from "@egovernments/digit-ui-react-components";
+import { ApplyFilterBar } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import Status from "./Status";
+import AssignedTo from "./AssignedTo";
+
+const Filter = ({ searchParams, paginationParms, onFilterChange, onSearch, removeParam, ...props }) => {
+ const { t } = useTranslation();
+
+ const DSO = Digit.UserService.hasAccess(["FSM_DSO"]) || false;
+ const isFstpOperator = Digit.UserService.hasAccess("FSTP") || false;
+
+ // const hideLocalityFilter = Digit.UserService.hasAccess(["FSM_CREATOR_EMP", "FSM_VIEW_EMP"]);
+
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const state = tenantId.split(".")[0];
+
+ const { data: roleStatuses, isFetched: isRoleStatusFetched } = Digit.Hooks.fsm.useMDMS(state, "DIGIT-UI", "RoleStatusMapping");
+
+ const userInfo = Digit.UserService.getUser();
+ const userRoles = userInfo.info.roles.map((roleData) => roleData.code);
+
+ const userRoleDetails = roleStatuses?.filter((roleDetails) => userRoles.filter((role) => role === roleDetails.userRole)[0]);
+
+ const mergedRoleDetails = userRoleDetails?.reduce(
+ (merged, details) => ({
+ fixed: details?.fixed && merged?.fixed,
+ statuses: [...merged?.statuses, ...details?.statuses].filter((item, pos, self) => self.indexOf(item) == pos),
+ zeroCheck: details?.zeroCheck || merged?.zeroCheck,
+ }),
+ { statuses: [] }
+ );
+
+ // console.log("find use query localities here", localities)
+ const selectLocality = (d) => {
+ onFilterChange({ locality: [...searchParams?.locality, d] });
+ };
+
+ const onStatusChange = (e, type) => {
+ if (e.target.checked) onFilterChange({ applicationStatus: [...searchParams?.applicationStatus, type] });
+ else onFilterChange({ applicationStatus: searchParams?.applicationStatus.filter((option) => type.name !== option.name) });
+ };
+
+ const clearAll = () => {
+ onFilterChange({ applicationStatus: [], locality: [], uuid: { code: "ASSIGNED_TO_ME", name: "Assigned to Me" } });
+ props?.onClose?.();
+ };
+
+ return (
+
+
+
+
+
{t("ES_COMMON_FILTER_BY")}:
+
+ {t("ES_COMMON_CLEAR_ALL")}
+
+ {props.type === "desktop" && (
+
+ {t("ES_COMMON_CLEAR_ALL")}
+
+ )}
+ {props.type === "mobile" && (
+
+
+ )}
+
+
+ {!DSO && !isFstpOperator && searchParams && (
+
+ )}
+
+ {/* {GetSelectOptions(t("ES_INBOX_LOCALITY"), localities, selectedLocality, onSelectLocality, "code", onRemove, "locality", "name")} */}
+
+ {/*
*/}
+
+
+ {mergedRoleDetails?.statuses?.length > 0 ? (
+
+
{t("ES_INBOX_LOCALITY")}
+ {/*
*/}
+
+
+ {searchParams?.locality.map((locality, index) => {
+ return (
+ {
+ onFilterChange({ locality: searchParams?.locality.filter((loc) => loc.code !== locality.code) });
+ }}
+ />
+ );
+ })}
+
+
+ ) : null}
+
+ {isRoleStatusFetched && mergedRoleDetails ? (
+
+
+
+ {
+ if (props.type === "mobile") onSearch({ delete: ["applicationNos"] });
+ else onSearch();
+ }}
+ style={{ flex: 1 }}
+ />
+
+ )}
+
+ );
+};
+
+export default Filter;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/SortBy.js b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/SortBy.js
new file mode 100644
index 00000000000..66166c40ccc
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/SortBy.js
@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { ActionBar, RadioButtons } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import { ApplyFilterBar, CloseSvg } from "@egovernments/digit-ui-react-components";
+
+const SortBy = (props) => {
+ const { t } = useTranslation();
+ const [selectedOption, setSelectedOption] = useState(() => {
+ return props.sortParams?.[0]?.desc
+ ? { code: "DESC", name: t("ES_INBOX_DATE_LATEST_FIRST") }
+ : { code: "ASC", name: t("ES_INBOX_DATE_LATEST_LAST") };
+ });
+
+ function clearAll() {}
+
+ function onSort(option) {
+ props.onSort([{ id: "createdTime", desc: option.code === "DESC" ? true : false }]);
+ props.onClose();
+ }
+
+ return (
+
+
+
+
+
{t("SORT_BY")}:
+
+ {t("ES_COMMON_CLEAR_ALL")}
+
+ {props.type === "desktop" && (
+
+ {t("ES_COMMON_CLEAR_ALL")}
+
+ )}
+ {props.type === "mobile" && (
+
+
+ )}
+
+
+
+
+
+ {props.type === "mobile" && (
+ */}
+
+ );
+};
+
+export default SortBy;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/Status.js b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/Status.js
new file mode 100644
index 00000000000..917475d35f1
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/Status.js
@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import { Loader } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import StatusCount from "./StatusCount";
+
+const Status = ({ onAssignmentChange, fsmfilters, mergedRoleDetails, statusMap }) => {
+ const { t } = useTranslation();
+
+ const { data: applicationsWithCount, isLoading } = Digit.Hooks.fsm.useApplicationStatus(true, true, statusMap);
+ // console.log("find application stats", applicationsWithCount)
+
+ const [moreStatus, showMoreStatus] = useState(false);
+
+ const finalApplicationWithCount = mergedRoleDetails.statuses
+ .map((roleDetails) => applicationsWithCount?.filter((application) => application.code === roleDetails)[0])
+ .filter((status) => status?.code);
+
+ const moreApplicationWithCount = applicationsWithCount?.filter(
+ (application) => !finalApplicationWithCount.find((listedApplication) => listedApplication.code === application.code)
+ );
+
+ // console.log("find role status from here", applicationsWithCount , mergedRoleDetails, finalApplicationWithCount, moreApplicationWithCount);
+ if (isLoading) {
+ return
+
{t("ES_INBOX_STATUS")}
+ {finalApplicationWithCount?.map((option, index) => (
+
+ ))}
+ {moreStatus
+ ? moreApplicationWithCount?.map((option, index) => (
+
+ ))
+ : null}
+ {mergedRoleDetails.fixed === false ? (
+
showMoreStatus(!moreStatus)}>
+ {" "}
+ {moreStatus ? t("ES_COMMON_LESS") : t("ES_COMMON_MORE")}{" "}
+
+ ) : null}
+
onAssignmentChange(e, status)}
+ checked={fsmfilters?.applicationStatus.filter((e) => e.name === status.name).length !== 0 ? true : false}
+ label={`${t(status.name)} (${count || 0})`}
+ />
+ );
+};
+
+export default StatusCount;
\ No newline at end of file
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/search.js b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/search.js
new file mode 100644
index 00000000000..a191a96a172
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/components/inbox/search.js
@@ -0,0 +1,140 @@
+import React, { useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { TextInput, Label, SubmitBar, LinkLabel, ActionBar, CloseSvg, DatePicker, CardLabelError } from "@egovernments/digit-ui-react-components";
+import DropdownStatus from "./DropdownStatus";
+import { useTranslation } from "react-i18next";
+
+const SearchApplication = ({ onSearch, type, onClose, isFstpOperator, searchFields, searchParams, isInboxPage }) => {
+ const storedSearchParams = isInboxPage ? Digit.SessionStorage.get("fsm/inbox/searchParams") : Digit.SessionStorage.get("fsm/search/searchParams");
+
+ const { data: applicationStatuses, isFetched: areApplicationStatus } = Digit.Hooks.fsm.useApplicationStatus();
+
+ const { t } = useTranslation();
+ const { register, handleSubmit, reset, watch, control } = useForm({
+ defaultValues: storedSearchParams || searchParams,
+ });
+ const [error, setError] = useState(false);
+ const mobileView = innerWidth <= 640;
+ const FSTP = Digit.UserService.hasAccess("FSM_EMP_FSTPO") || false;
+ const watchSearch = watch(["applicationNos", "mobileNumber"]);
+
+ const onSubmitInput = (data) => {
+ if (!data.mobileNumber) {
+ delete data.mobileNumber;
+ }
+ onSearch(data);
+ if (type === "mobile") {
+ onClose();
+ }
+ };
+
+ function clearSearch() {
+ const resetValues = searchFields.reduce((acc, field) => ({ ...acc, [field?.name]: "" }), {});
+ reset(resetValues);
+ if (isInboxPage) {
+ Digit.SessionStorage.del("fsm/inbox/searchParams");
+ } else {
+ Digit.SessionStorage.del("fsm/search/searchParams");
+ }
+ onSearch({});
+ }
+
+ const clearAll = (mobileView) => {
+ const mobileViewStyles = mobileView ? { margin: 0 } : {};
+ return (
+
+ {t("ES_COMMON_CLEAR_SEARCH")}
+
+ );
+ };
+
+ const searchValidation = (data) => {
+ // console.log("find input", watchSearch, data);
+ if (FSTP) return null;
+
+ watchSearch.applicationNos || watchSearch.mobileNumber ? setError(false) : setError(true);
+ return watchSearch.applicationNos || watchSearch.mobileNumber ? true : false;
+ };
+
+ const getFields = (input) => {
+ switch (input.type) {
+ case "date":
+ return (
+ (
+
+
+ );
+};
+
+export default CheckSlum;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectAddress.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectAddress.js
new file mode 100644
index 00000000000..264b5f0f15f
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectAddress.js
@@ -0,0 +1,144 @@
+import React, { useEffect, useState } from "react";
+import { FormStep, CardLabel, Dropdown, RadioButtons, LabelFieldPair, RadioOrSelect } from "@egovernments/digit-ui-react-components";
+
+const SelectAddress = ({ t, config, onSelect, userType, formData }) => {
+ const allCities = Digit.Hooks.fsm.useTenants();
+ let tenantId = Digit.ULBService.getCurrentTenantId();
+
+ const { pincode, city } = formData?.address || "";
+ const cities =
+ userType === "employee"
+ ? allCities.filter((city) => city.code === tenantId)
+ : pincode
+ ? allCities.filter((city) => city?.pincode?.some((pin) => pin == pincode))
+ : allCities;
+
+ const [selectedCity, setSelectedCity] = useState(() => formData?.address?.city || Digit.SessionStorage.get("fsm.file.address.city") || null);
+ const { data: fetchedLocalities } = Digit.Hooks.useBoundaryLocalities(
+ selectedCity?.code,
+ "revenue",
+ {
+ enabled: !!selectedCity,
+ },
+ t
+ );
+ const [localities, setLocalities] = useState();
+ const [selectedLocality, setSelectedLocality] = useState();
+
+ useEffect(() => {
+ if (cities) {
+ if (cities.length === 1) {
+ setSelectedCity(cities[0]);
+ }
+ }
+ }, [cities]);
+
+ useEffect(() => {
+ if (selectedCity && fetchedLocalities) {
+ let __localityList = fetchedLocalities;
+ let filteredLocalityList = [];
+
+ if (formData?.address?.locality) {
+ setSelectedLocality(formData.address.locality);
+ }
+
+ if (formData?.address?.pincode) {
+ filteredLocalityList = __localityList.filter((obj) => obj.pincode?.find((item) => item == formData.address.pincode));
+ if (!formData?.address?.locality) setSelectedLocality();
+ }
+
+ if (userType === "employee") {
+ onSelect(config.key, { ...formData[config.key], city: selectedCity });
+ }
+ setLocalities(() => (filteredLocalityList.length > 0 ? filteredLocalityList : __localityList));
+ // console.log("find set localities here", fetchedLocalities, filteredLocalityList.length > 0 ? filteredLocalityList : __localityList )
+ if (filteredLocalityList.length === 1) {
+ setSelectedLocality(filteredLocalityList[0]);
+ if (userType === "employee") {
+ onSelect(config.key, { ...formData[config.key], locality: filteredLocalityList[0] });
+ }
+ }
+ }
+ }, [selectedCity, formData?.address?.pincode, fetchedLocalities]);
+
+ function selectCity(city) {
+ setSelectedLocality(null);
+ setLocalities(null);
+ Digit.SessionStorage.set("fsm.file.address.city", city);
+ setSelectedCity(city);
+ }
+
+ function selectLocality(locality) {
+ setSelectedLocality(locality);
+ if (userType === "employee") {
+ onSelect(config.key, { ...formData[config.key], locality: locality });
+ }
+ }
+
+ function onSubmit() {
+ onSelect(config.key, { city: selectedCity, locality: selectedLocality });
+ }
+
+ if (userType === "employee") {
+ return (
+
+
+
+ {t("MYCITY_CODE_LABEL")}
+ {config.isMandatory ? " * " : null}
+
+
+
+
+ {t("CS_CREATECOMPLAINT_MOHALLA")}
+ {config.isMandatory ? " * " : null}
+
+
+
+ );
+ }
+ return (
+
+ {`${t("MYCITY_CODE_LABEL")} *`}
+ {`${t("CS_CREATECOMPLAINT_MOHALLA")} *`} }
+ {selectedCity && localities && (
+
+ );
+};
+
+export default SelectAddress;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectChannel.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectChannel.js
new file mode 100644
index 00000000000..8a91252814c
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectChannel.js
@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import { Loader } from "@egovernments/digit-ui-react-components";
+import { Dropdown } from "@egovernments/digit-ui-react-components";
+import { useLocation } from "react-router-dom";
+
+const SelectChannel = ({ t, config, onSelect, formData = {}, userType }) => {
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+
+ const { pathname: url } = useLocation();
+ const editScreen = url.includes("/modify-application/");
+
+ const { data: channelMenu } = Digit.Hooks.fsm.useMDMS(tenantId, "FSM", "EmployeeApplicationChannel");
+ const [channel, setChannel] = useState(formData?.channel);
+
+ function selectChannel(value) {
+ // console.log(value)
+ setChannel(value);
+ onSelect(config.key, value);
+ }
+
+ return channelMenu ? (
+ onSelect(config.key, { geoLocation, pincode })}
+ onChange={(code, location) => onChange(code, location)}
+ disabled={pincode === ""}
+ forcedError={t(pincodeServicability)}
+ />
+ );
+};
+
+export default SelectGeolocation;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectLandmark.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectLandmark.js
new file mode 100644
index 00000000000..6f19ca28c95
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectLandmark.js
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from "react";
+import { FormStep, TextArea, LabelFieldPair, CardLabel } from "@egovernments/digit-ui-react-components";
+
+const SelectLandmark = ({ t, config, onSelect, formData, userType }) => {
+ const [landmark, setLandmark] = useState();
+
+ const [error, setError] = useState("");
+
+ const inputs = [
+ {
+ label: "ES_NEW_APPLICATION_LOCATION_LANDMARK",
+ type: "textarea",
+ name: "landmark",
+ validation: {
+ maxLength: 1024,
+ },
+ },
+ ];
+
+ useEffect(() => {
+ setLandmark(formData?.address?.landmark);
+ }, [formData?.address?.landmark]);
+
+ function onChange(e) {
+ if (e.target.value.length > 1024) {
+ setError("CS_COMMON_LANDMARK_MAX_LENGTH");
+ } else {
+ setError(null);
+ setLandmark(e.target.value);
+ if (userType === "employee") {
+ const value = e?.target?.value;
+ const key = e?.target?.id;
+ onSelect(config.key, { ...formData[config.key], landmark: e.target.value });
+ }
+ }
+ }
+
+ if (userType === "employee") {
+ return inputs?.map((input, index) => {
+ return (
+
+
+ {t(input.label)}
+ {config.isMandatory ? " * " : null}
+
+
+
+ );
+ });
+ }
+ const onSkip = () => onSelect();
+
+ return (
+ onSelect(config.key, { ...formData[config.key], ...data })}
+ onSkip={onSkip}
+ t={t}
+ forcedError={t(error)}
+ >
+ );
+};
+
+export default SelectLandmark;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectName.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectName.js
new file mode 100644
index 00000000000..06333b311ac
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectName.js
@@ -0,0 +1,66 @@
+import React from "react";
+import { LabelFieldPair, CardLabel, TextInput, CardLabelError } from "@egovernments/digit-ui-react-components";
+import { useLocation } from "react-router-dom";
+
+const SelectName = ({ t, config, onSelect, formData = {}, userType, register, errors }) => {
+ const { pathname: url } = useLocation();
+ // console.log("find errors here", errors)
+ const editScreen = url.includes("/modify-application/");
+ const inputs = [
+ {
+ label: "ES_NEW_APPLICATION_APPLICANT_NAME",
+ type: "text",
+ name: "applicantName",
+ validation: {
+ isRequired: true,
+ pattern: "^[a-zA-Z]+( [a-zA-Z]+)*$",
+ title: t("CORE_COMMON_APPLICANT_NAME_INVALID"),
+ },
+ isMandatory: true,
+ },
+ {
+ label: "ES_NEW_APPLICATION_APPLICANT_MOBILE_NO",
+ type: "text",
+ name: "mobileNumber",
+ validation: {
+ isRequired: true,
+ pattern: "[6-9]{1}[0-9]{9}",
+ type: "tel",
+ title: t("CORE_COMMON_APPLICANT_MOBILE_NUMBER_INVALID"),
+ },
+ isMandatory: true,
+ },
+ ];
+
+ function setValue(value, input) {
+ onSelect(config.key, { ...formData[config.key], [input]: value });
+ console.log("find value here", value, input, formData);
+ }
+
+ return (
+
+ {inputs?.map((input, index) => (
+
+ {errors[input.name] && {t(input.error)} }
+
+
+ {t(input.label)}
+ {input.isMandatory ? " * " : null}
+
+
+ setValue(e.target.value, input.name)}
+ disable={editScreen}
+ {...input.validation}
+ />
+
+
+
+ ))}
+
+
+ {t(input.label)}
+ {config.isMandatory ? " * " : null}
+
+
+
+
+ );
+ });
+ }
+ const onSkip = () => onSelect();
+ return (
+
+ {t("CS_FILE_APPLICATION_PIT_TYPE_LABEL")}
+
+ );
+};
+
+export default SelectPitType;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectPropertySubtype.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectPropertySubtype.js
new file mode 100644
index 00000000000..004f30789f0
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectPropertySubtype.js
@@ -0,0 +1,76 @@
+import React, { useState, useEffect, useMemo } from "react";
+import { Loader, TypeSelectCard, Dropdown, FormStep, CardLabel, RadioOrSelect } from "@egovernments/digit-ui-react-components";
+
+const SelectPropertySubtype = ({ config, onSelect, t, userType, formData }) => {
+ // console.log("find subtype here", { config, onSelect, t, userType, formData });
+
+ const select = (items) => items.map((item) => ({ ...item, i18nKey: t(item.i18nKey) }));
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const stateId = tenantId.split(".")[0];
+ const { isLoading: propertySubtypesDataLoading, data: propertySubtypesData } = Digit.Hooks.fsm.useMDMS(stateId, "FSM", "PropertySubtype", {
+ select,
+ });
+
+ const [subtype, setSubtype] = useState();
+
+ const [subtypeOptions, setSubtypeOptions] = useState([]);
+ const { propertyType } = formData || {};
+
+ useEffect(() => {
+ if (!propertySubtypesDataLoading && propertySubtypesData) {
+ const preFillSubtype = propertySubtypesData?.filter((subType) => subType.code === (formData?.subtype?.code || formData?.subtype))[0];
+ // console.log("find pre fill subtype here", propertyType, preFillSubtype)
+ if (
+ (typeof propertyType === "string" && preFillSubtype?.code.split(".")[0] === propertyType) ||
+ preFillSubtype?.code.split(".")[0] === propertyType?.code
+ ) {
+ setSubtype(preFillSubtype);
+ } else {
+ setSubtype(null);
+ }
+ }
+ }, [propertyType, formData?.subtype, propertySubtypesData]);
+
+ useEffect(() => {
+ // console.log("find proptype here", propertyType, propertySubtypesDataLoading, propertySubtypesData);
+ // setSubtypeOptions([]);
+ // if (userType === "employee") onSelect(config.key, undefined);
+ if (!propertySubtypesDataLoading && propertyType) {
+ const subTypes = propertySubtypesData.filter((item) => item.propertyType === (propertyType?.code || propertyType));
+ setSubtypeOptions(subTypes);
+ }
+ }, [propertyType, propertySubtypesDataLoading, propertySubtypesData]);
+
+ const selectedValue = (value) => {
+ setSubtype(value);
+ };
+
+ const goNext = () => {
+ onSelect(config.key, subtype);
+ };
+
+ function selectedSubType(value) {
+ onSelect(config.key, value.code);
+ }
+
+ if (propertySubtypesDataLoading) {
+ return
+ {`${t("CS_FILE_APPLICATION_PROPERTY_SUBTYPE_LABEL")} *`}
+
+ );
+ }
+};
+
+export default SelectPropertySubtype;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectPropertyType.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectPropertyType.js
new file mode 100644
index 00000000000..521e1a5db63
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectPropertyType.js
@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from "react";
+import { CitizenInfoLabel, Loader, Dropdown, FormStep, CardLabel, RadioOrSelect } from "@egovernments/digit-ui-react-components";
+
+const SelectPropertyType = ({ config, onSelect, t, userType, formData }) => {
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const stateId = tenantId.split(".")[0];
+ const select = (items) => items.map((item) => ({ ...item, i18nKey: t(item.i18nKey) }));
+
+ const propertyTypesData = Digit.Hooks.fsm.useMDMS(stateId, "FSM", "PropertyType", { select });
+
+ const [propertyType, setPropertyType] = useState();
+
+ useEffect(() => {
+ if (!propertyTypesData.isLoading && propertyTypesData.data) {
+ const preFilledPropertyType = propertyTypesData.data.filter(
+ (propertyType) => propertyType.code === (formData?.propertyType?.code || formData?.propertyType)
+ )[0];
+ setPropertyType(preFilledPropertyType);
+ }
+ }, [formData?.propertyType, propertyTypesData.data]);
+
+ const goNext = () => {
+ onSelect(config.key, propertyType);
+ };
+ function selectedValue(value) {
+ setPropertyType(value);
+ }
+ function selectedType(value) {
+ onSelect(config.key, value.code);
+ }
+
+ if (propertyTypesData.isLoading) {
+ return
+
+ {`${t("CS_FILE_APPLICATION_PROPERTY_LABEL")} *`}
+
+ {propertyType &&
+ );
+ }
+};
+
+export default SelectPropertyType;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectSlumName.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectSlumName.js
new file mode 100644
index 00000000000..e6ed1132386
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectSlumName.js
@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from "react";
+import { CardLabel, LabelFieldPair, Dropdown, FormStep, Loader } from "@egovernments/digit-ui-react-components";
+
+const SelectSlumName = ({ config, onSelect, t, userType, formData }) => {
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const stateId = tenantId.split(".")[0];
+ const [slum, setSlum] = useState();
+ const slumTenantId = formData?.address?.city ? formData?.address?.city.code : tenantId;
+ const { data: slumData, isLoading: slumDataLoading } = Digit.Hooks.fsm.useMDMS(slumTenantId, "FSM", "Slum");
+ // console.log("find slum data here", locality,slumData && slumData[locality]), formData?.address?.locality;
+
+ const [slumMenu, setSlumMenu] = useState();
+
+ useEffect(() => {
+ if (userType !== "employee" && formData?.address?.slumArea?.code === false) onSelect(config.key, {}, true);
+ }, [formData?.address?.slumArea]);
+
+ useEffect(() => {
+ if (slumMenu && formData?.address) {
+ const preSelectedSlum = slumMenu.filter((slum) => slum.code === formData?.address?.slum)[0];
+ setSlum(preSelectedSlum);
+ }
+ }, [formData?.address?.slum, slumMenu]);
+
+ useEffect(() => {
+ const locality = formData?.address?.locality?.code;
+ // console.log("find locality code here", locality)
+ if (userType === "employee" && !slumDataLoading && slumData) {
+ // console.log("find slum data here", slumData[locality], formData)
+ const optionalSlumData = slumData[locality]
+ ? [
+ {
+ code: null,
+ active: true,
+ name: "Not residing in slum area",
+ i18nKey: "ES_APPLICATION_NOT_SLUM_AREA",
+ },
+ ...slumData[locality],
+ ]
+ : [
+ {
+ code: null,
+ active: true,
+ name: "Not residing in slum area",
+ i18nKey: "ES_APPLICATION_NOT_SLUM_AREA",
+ },
+ ...Object.keys(slumData)
+ .map((key) => slumData[key])
+ .reduce((prev, curr) => [...prev, ...curr]),
+ ];
+ // console.log("find slum dta here", optionalSlumData)
+ setSlumMenu(optionalSlumData);
+ // console.log("ok setting slum name to none",{
+ // code: null,
+ // active: true,
+ // name: "Not residing in slum area",
+ // i18nKey: "ES_APPLICATION_NOT_SLUM_AREA",
+ // })
+ if (!formData?.address?.slum) {
+ setSlum({
+ code: null,
+ active: true,
+ name: "Not residing in slum area",
+ i18nKey: "ES_APPLICATION_NOT_SLUM_AREA",
+ });
+ onSelect(config.key, { ...formData[config.key], slum: null });
+ }
+ }
+ if (userType !== "employee" && !slumDataLoading && slumData) {
+ // console.log("find citizen slum menu here", slumData, slumData[locality], formData)
+ const allSlum = Object.keys(slumData)
+ .map((key) => slumData[key])
+ .reduce((prev, curr) => [...prev, ...curr]);
+ // console.log("find slum data here", slumData, allSlum)
+ slumData[locality] ? setSlumMenu(slumData[locality]) : setSlumMenu(allSlum);
+ }
+ }, [slumDataLoading, formData?.address?.locality?.code]);
+
+ function selectSlum(value) {
+ setSlum(value);
+ onSelect(config.key, { ...formData[config.key], slum: value.code });
+ }
+
+ function onSkip() {
+ onSelect();
+ }
+
+ function goNext() {
+ onSelect(config.key, { ...formData[config.key], slum: slum.code, slumData: slum });
+ }
+
+ if (slumDataLoading) return
+ {t("ES_NEW_APPLICATION_SLUM_NAME")}
+
+ ) : (
+
+
+ );
+};
+
+export default SelectSlumName;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectStreet.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectStreet.js
new file mode 100644
index 00000000000..192bc7b9bc6
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectStreet.js
@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from "react";
+import { FormStep, TextInput, LabelFieldPair, CardLabel } from "@egovernments/digit-ui-react-components";
+import { useForm, Controller } from "react-hook-form";
+import _ from "lodash";
+
+const SelectStreet = ({ t, config, onSelect, userType, formData, formState, setError, clearErrors }) => {
+ const onSkip = () => onSelect();
+
+ const [focusIndex, setFocusIndex] = useState({ index: -1, type: "" });
+
+ const { control, formState: localFormState, watch, setError: setLocalError, clearErrors: clearLocalErrors, setValue, trigger } = useForm();
+ const formValue = watch();
+ const { errors } = localFormState;
+ const checkLocation = window.location.href.includes("tl/new-application") || window.location.href.includes("tl/renew-application-details");
+ const isRenewal = window.location.href.includes("edit-application") || window.location.href.includes("tl/renew-application-details");
+
+ let inputs;
+ if (window.location.href.includes("tl")) {
+ inputs = config.inputs;
+ config.inputs[0].disable = window.location.href.includes("edit-application");
+ config.inputs[1].disable = window.location.href.includes("edit-application");
+ } else {
+ inputs = [
+ {
+ label: "PT_PROPERTY_ADDRESS_STREET_NAME",
+ type: "text",
+ name: "street",
+ validation: {
+ pattern: "[a-zA-Z0-9 ]{1,255}",
+ // maxlength: 256,
+ title: t("CORE_COMMON_STREET_INVALID"),
+ },
+ },
+ {
+ label: "PT_PROPERTY_ADDRESS_HOUSE_NO",
+ type: "text",
+ name: "doorNo",
+ validation: {
+ pattern: "[A-Za-z0-9#,/ -]{1,63}",
+ // maxlength: 256,
+ title: t("CORE_COMMON_DOOR_INVALID"),
+ },
+ },
+ ];
+ }
+
+ const convertValidationToRules = ({ validation, name, messages }) => {
+ if (validation) {
+ let { pattern: valPattern, maxlength, minlength, required: valReq } = validation || {};
+ let pattern = (value) => {
+ if (valPattern) {
+ if (valPattern instanceof RegExp) return valPattern.test(value) ? true : messages?.pattern || `${name.toUpperCase()}_PATTERN`;
+ else if (typeof valPattern === "string")
+ return new RegExp(valPattern)?.test(value) ? true : messages?.pattern || `${name.toUpperCase()}_PATTERN`;
+ }
+ return true;
+ };
+ let maxLength = (value) => (maxlength ? (value?.length <= maxlength ? true : messages?.maxlength || `${name.toUpperCase()}_MAXLENGTH`) : true);
+ let minLength = (value) => (minlength ? (value?.length >= minlength ? true : messages?.minlength || `${name.toUpperCase()}_MINLENGTH`) : true);
+ let required = (value) => (valReq ? (!!value ? true : messages?.required || `${name.toUpperCase()}_REQUIRED`) : true);
+
+ return { pattern, required, minLength, maxLength };
+ }
+ return {};
+ };
+
+ useEffect(() => {
+ trigger();
+ }, []);
+
+ useEffect(() => {
+ if (userType === "employee") {
+ // console.log(formState.errors[config.key]?.type, "inside form errors");
+ if (Object.keys(errors).length && !_.isEqual(formState.errors[config.key]?.type || {}, errors)) setError(config.key, { type: errors });
+ else if (!Object.keys(errors).length && formState.errors[config.key]) clearErrors(config.key);
+ }
+ }, [errors]);
+
+ useEffect(() => {
+ const keys = Object.keys(formValue);
+ const part = {};
+ keys.forEach((key) => (part[key] = formData[config.key]?.[key]));
+
+ // console.log(formValue, part, formData[config.key], errors, "inside form value change");
+ if (!_.isEqual(formValue, part)) {
+ onSelect(config.key, { ...formData[config.key], ...formValue });
+ trigger();
+ }
+ }, [formValue]);
+
+ if (userType === "employee") {
+ return inputs?.map((input, index) => {
+ return (
+
+
+ {!checkLocation ? t(input.label) : `${t(input.label)}:`}
+ {config.isMandatory ? " * " : null}
+
+
+ (
+ {
+ setFocusIndex({ index });
+ _props.onChange(e.target.value);
+ }}
+ onBlur={_props.onBlur}
+ // disable={isRenewal}
+ autoFocus={focusIndex?.index == index}
+ {...input.validation}
+ />
+ )}
+ />
+
+
+ );
+ });
+ }
+ return (
+ onSelect(config.key, data)}
+ onSkip={onSkip}
+ t={t}
+ />
+ );
+};
+
+export default SelectStreet;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectTankSize.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectTankSize.js
new file mode 100644
index 00000000000..9284622bbfc
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectTankSize.js
@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from "react";
+import { FormStep, PitDimension } from "@egovernments/digit-ui-react-components";
+
+const isConventionalSpecticTank = (tankDimension) => tankDimension === "lbd";
+
+const SelectTankSize = ({ config, onSelect, t, formData = {}, userType }) => {
+ const tankDimension = formData?.pitType?.dimension;
+ const [disable, setDisable] = useState(true);
+
+ const [size, setSize] = useState();
+
+ useEffect(() => {
+ if (!formData?.pitType && userType !== "employee") {
+ onSelect(config.key, {}, true);
+ }
+ }, []);
+
+ useEffect(() => {
+ if (isConventionalSpecticTank(tankDimension)) {
+ setSize({ ...formData?.pitDetail, diameter: 0, ...(formData?.pitDetail?.length === 0 && { height: 0 }) });
+ } else {
+ setSize({ ...formData?.pitDetail, length: 0, width: 0, ...(formData?.pitDetail?.diameter === 0 && { height: 0 }) });
+ }
+ }, [tankDimension]);
+
+ useEffect(() => {
+ const pitDetailValues = size ? Object.values(size).filter((value) => value > 0) : null;
+ if (isConventionalSpecticTank(tankDimension) && pitDetailValues?.length >= 3) {
+ setDisable(false);
+ } else if (!isConventionalSpecticTank(tankDimension) && pitDetailValues?.length >= 2) {
+ setDisable(false);
+ } else {
+ setDisable(true);
+ }
+ }, [size]);
+
+ const handleChange = (event) => {
+ const { name, value } = event.target;
+ if (!isNaN(value)) {
+ setSize((prev) => ({ ...prev, [name]: value }));
+ if (userType === "employee") {
+ setTimeout(onSelect(config.key, { ...size, [name]: value }));
+ }
+ }
+ };
+
+ const handleSubmit = () => {
+ onSelect(config.key, size);
+ };
+
+ const onSkip = () => onSelect();
+ if (userType === "employee") {
+ return
+
+ );
+};
+
+function getPitDetail(pitDetail = {}, tankDimension) {
+ let detail = { ...pitDetail };
+ if (pitDetail) {
+ if (tankDimension === "lbd") {
+ detail = { length: pitDetail?.length || "", width: pitDetail?.width || "", height: pitDetail?.height || "" };
+ } else {
+ detail = { diameter: pitDetail?.diameter || "", height: pitDetail?.height || "" };
+ }
+ } else {
+ if (tankDimension === "lbd") {
+ detail = { length: "", width: "", height: "" };
+ } else {
+ detail = { diameter: "", height: "" };
+ }
+ }
+ return detail;
+}
+
+export default SelectTankSize;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectTripData.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectTripData.js
new file mode 100644
index 00000000000..125d0f8d5ee
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectTripData.js
@@ -0,0 +1,166 @@
+import React, { useEffect, useState } from "react";
+import { getVehicleType } from "../utils";
+import { LabelFieldPair, CardLabel, TextInput, Dropdown, Loader, CardLabelError } from "@egovernments/digit-ui-react-components";
+
+const SelectTripData = ({ t, config, onSelect, formData = {}, userType }) => {
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const state = tenantId?.split(".")[0] || "pb";
+
+ const [vehicle, setVehicle] = useState(formData?.tripData?.vehicleType);
+ const [billError, setError] = useState(false);
+
+ const { isLoading: isVehicleMenuLoading, data: vehicleData } = Digit.Hooks.fsm.useMDMS(state, "Vehicle", "VehicleType", { staleTime: Infinity });
+
+ const { data: dsoData, isLoading: isDsoLoading, isSuccess: isDsoSuccess, error: dsoError } = Digit.Hooks.fsm.useDsoSearch(tenantId);
+
+ const [vehicleMenu, setVehicleMenu] = useState([]);
+
+ useEffect(() => {
+ if (dsoData && vehicleData) {
+ const allVehicles = dsoData.reduce((acc, curr) => {
+ return curr.vehicles ? [...acc, ...curr.vehicles.map((dsoVehicle) => dsoVehicle.type)] : acc;
+ }, []);
+
+ const __vehicleMenu = allVehicles
+ .map((vehicle) => vehicleData.filter((data) => data.code === vehicle)[0])
+ .filter((item, pos, self) => self.indexOf(item) == pos)
+ .filter((i) => i);
+
+ // console.log("find vehicle menu here", allVehicles, __vehicleMenu)
+
+ setVehicleMenu(__vehicleMenu);
+ }
+ }, [dsoData, vehicleData]);
+
+ // console.log("find vendro data here", dsoData, vehicleData)
+
+ const inputs = [
+ {
+ label: "ES_NEW_APPLICATION_PAYMENT_NO_OF_TRIPS",
+ type: "text",
+ name: "noOfTrips",
+ error: t("ES_NEW_APPLICATION_NO_OF_TRIPS_INVALID"),
+ validation: {
+ isRequired: true,
+ },
+ default: formData?.tripData?.noOfTrips,
+ disable: true,
+ isMandatory: true,
+ },
+ {
+ label: "ES_NEW_APPLICATION_AMOUNT_PER_TRIP",
+ type: "text",
+ name: "amountPerTrip",
+ error: t("ES_NEW_APPLICATION_AMOUNT_INVALID"),
+ validation: {
+ isRequired: true,
+ pattern: "[0-9]{1,10}",
+ title: t("ES_APPLICATION_BILL_SLAB_ERROR"),
+ },
+ default: formData?.tripData?.amountPerTrip,
+ disable: true,
+ isMandatory: true,
+ },
+ {
+ label: "ES_PAYMENT_DETAILS_TOTAL_AMOUNT",
+ type: "text",
+ name: "amount",
+ validation: {
+ isRequired: true,
+ title: t("ES_APPLICATION_BILL_SLAB_ERROR"),
+ },
+ default: formData?.tripData?.amount,
+ disable: true,
+ isMandatory: true,
+ },
+ ];
+
+ function selectVehicle(value) {
+ setVehicle(value);
+ onSelect(config.key, { ...formData[config.key], vehicleType: value });
+ console.log("find value here", value, formData);
+ }
+
+ function setValue(object) {
+ onSelect(config.key, { ...formData[config.key], ...object });
+ // console.log("find value here", formData);
+ }
+ useEffect(() => {
+ (async () => {
+ // console.log("abcd1",vehicle, formData?.propertyType , formData?.subtype)
+
+ if (formData?.tripData?.vehicleType !== vehicle) {
+ setVehicle(formData?.tripData?.vehicleType);
+ }
+
+ if (formData?.propertyType && formData?.subtype && formData?.address && formData?.tripData?.vehicleType?.code) {
+ const { capacity } = formData?.tripData?.vehicleType;
+ // console.log("find bill slab form data", formData)
+ const { slum: slumDetails } = formData.address;
+ const slum = slumDetails ? "YES" : "NO";
+ const billingDetails = await Digit.FSMService.billingSlabSearch(tenantId, {
+ propertyType: formData?.subtype,
+ capacity,
+ slum,
+ });
+
+ const billSlab = billingDetails?.billingSlab?.length && billingDetails?.billingSlab[0];
+ if (billSlab?.price) {
+ console.log("find bill slab here", billSlab.price);
+ setValue({
+ amountPerTrip: billSlab.price,
+ amount: billSlab.price * formData.tripData.noOfTrips,
+ });
+ setError(false);
+ // console.log("find formdata here", formData);
+ } else {
+ setValue({
+ amountPerTrip: "",
+ amount: "",
+ });
+ setError(true);
+ }
+ }
+ })();
+ // console.log("find form data here helllo", formData);
+ }, [formData?.propertyType, formData?.subtype, formData?.address, formData?.tripData?.vehicleType?.code]);
+
+ return isVehicleMenuLoading && isDsoLoading ? (
+
+
+ {t("ES_NEW_APPLICATION_LOCATION_VEHICLE_REQUESTED") + " * "}
+ ({ ...vehicle, label: getVehicleType(vehicle, t) }))}
+ optionKey="label"
+ id="vehicle"
+ selected={vehicle}
+ select={selectVehicle}
+ t={t}
+ />
+
+ {inputs?.map((input, index) => (
+
+
+ {t(input.label)}
+ {input.isMandatory ? " * " : null}
+
+
+
+
+ ))}
+ {billError ?
{t("ES_APPLICATION_BILL_SLAB_ERROR")} : null}
+
+ {DisplayText(state.action, mutation.isSuccess, props.parentRoute.includes("employee"), t)}
+ {mutation.isSuccess && (
+
+
+
+
+
+ {t("CS_COMMON_DOWNLOAD")}
+
+ }
+ style={{ width: "100px" }}
+ onClick={handleDownloadPdf}
+ />
+ )}
+
+
+ ) : null}
+
+ );
+};
+
+export default Response;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/ApplicationDetails.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/ApplicationDetails.js
new file mode 100644
index 00000000000..4b00152a371
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/ApplicationDetails.js
@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Header, Card, KeyNote, LinkButton, Loader, MultiLink } from "@egovernments/digit-ui-react-components";
+import { useHistory, useLocation, useParams } from "react-router-dom";
+import getPDFData from "../../getPDFData";
+import { getVehicleType } from "../../utils";
+import { ApplicationTimeline } from "../../components/ApplicationTimeline";
+
+const ApplicationDetails = () => {
+ const { t } = useTranslation();
+ const { id } = useParams();
+ const history = useHistory();
+ const { state: locState } = useLocation();
+ const tenantId = locState?.tenantId || Digit.ULBService.getCurrentTenantId();
+ const state = tenantId?.split(".")[0];
+
+ const { isLoading, isError, error, data: application, error: errorApplication } = Digit.Hooks.fsm.useApplicationDetail(
+ t,
+ tenantId,
+ id,
+ {},
+ "CITIZEN"
+ );
+
+ const { data: paymentsHistory } = Digit.Hooks.fsm.usePaymentHistory(tenantId, id);
+
+ const { data: storeData } = Digit.Hooks.useStore.getInitData();
+ const { tenants } = storeData || {};
+
+ const [showOptions, setShowOptions] = useState(false);
+
+ if (isLoading || !application) {
+ return
+
+ {t("CS_FSM_APPLICATION_DETAIL_TITLE_APPLICATION_DETAILS")}
+ setShowOptions(!showOptions)}
+ displayOptions={showOptions}
+ options={dowloadOptions}
+ />
+
+
+ {application?.applicationDetails?.map(({ title, value, child, caption, map }, index) => {
+ return (
+
+ {child && typeof child === "object" ? React.createElement(child.element, { ...child }) : child}
+
+ );
+ })}
+
+
+ );
+};
+
+export default ApplicationDetails;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/MyApplications/MyApplication.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/MyApplications/MyApplication.js
new file mode 100644
index 00000000000..fc53607bcd7
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/MyApplications/MyApplication.js
@@ -0,0 +1,22 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Card, KeyNote, SubmitBar } from "@egovernments/digit-ui-react-components";
+import { Link } from "react-router-dom";
+
+const MyApplication = ({ application }) => {
+ const { t } = useTranslation();
+
+ return (
+
+
+ );
+};
+
+export default MyApplication;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/MyApplications/index.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/MyApplications/index.js
new file mode 100644
index 00000000000..1c1f73718ce
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/MyApplications/index.js
@@ -0,0 +1,31 @@
+import React from "react";
+import { Header, Loader } from "@egovernments/digit-ui-react-components";
+import MyApplication from "./MyApplication";
+import { useTranslation } from "react-i18next";
+
+export const MyApplications = () => {
+ const { t } = useTranslation();
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const { info: userInfo } = Digit.UserService.getUser();
+
+ const { isLoading, isError, error, data: { data: { table: applicationsList } = {}} = {}} = Digit.Hooks.fsm.useSearchAll(tenantId, {
+ uuid: userInfo.uuid,
+ limit: 100,
+ });
+
+ if (isLoading) {
+ return
+ {t("CS_FSM_APPLICATION_TITLE_MY_APPLICATION")}
+ {applicationsList?.length > 0 &&
+ applicationsList.map((application, index) => (
+
+
+ ))}
+
+ );
+};
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/NewApplication/CheckPage.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/NewApplication/CheckPage.js
new file mode 100644
index 00000000000..670e374a945
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/NewApplication/CheckPage.js
@@ -0,0 +1,114 @@
+import React from "react";
+import {
+ Card,
+ CardCaption,
+ CardHeader,
+ CardLabel,
+ CardSubHeader,
+ StatusTable,
+ Row,
+ ActionLinks,
+ LinkButton,
+ SubmitBar,
+ CardText,
+} from "@egovernments/digit-ui-react-components";
+import { useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+const ActionButton = ({ jumpTo }) => {
+ const { t } = useTranslation();
+ const history = useHistory();
+
+ function routeTo() {
+ history.push(jumpTo);
+ }
+
+ return
+ {t("CS_CHECK_CHECK_YOUR_ANSWERS")}
+ {t("CS_CHECK_CHECK_YOUR_ANSWERS_TEXT")}
+ {t("CS_CHECK_PROPERTY_DETAILS")}
+
+ |
}
+ />
+ |
}
+ />
+ |
}
+ />
+ {address?.landmark?.trim() && (
+ |
}
+ />
+ )}
+ {address?.slumArea?.code === true && (
+ |
}
+ />
+ )}
+ {pitType && (
+ |
}
+ />
+ )}
+ {pitMeasurement && (
+ |
}
+ />
+ )}
+
+ {/*
+ );
+};
+
+export default CheckPage;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/NewApplication/Response.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/NewApplication/Response.js
new file mode 100644
index 00000000000..775adbe511d
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/NewApplication/Response.js
@@ -0,0 +1,117 @@
+import React, { useEffect } from "react";
+import { Card, Banner, CardText, SubmitBar, LinkButton } from "@egovernments/digit-ui-react-components";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Loader } from "@egovernments/digit-ui-react-components";
+import getPDFData from "../../../getPDFData";
+
+const GetActionMessage = () => {
+ const { t } = useTranslation();
+ return t("CS_FILE_DESLUDGING_APPLICATION_SUCCESS");
+};
+
+const BannerPicker = (props) => {
+ return (
+
+ {t("CS_FILE_PROPERTY_RESPONSE")}
+ {mutation.isSuccess && (
+
+
+
+
+
+ {t("CS_COMMON_DOWNLOAD")}
+
+ }
+ onClick={handleDownloadPdf}
+ className="w-full"
+ />
+ )}
+
+ );
+};
+
+export default Response;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/NewApplication/config.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/NewApplication/config.js
new file mode 100644
index 00000000000..63600cb305a
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/NewApplication/config.js
@@ -0,0 +1,18 @@
+export const config = [
+ {
+ texts: {
+ headerCaption: "",
+ header: "CS_FILE_APPLICATION_PROPERTY_LABEL",
+ cardText: "CS_FILE_APPLICATION_PROPERTY_TEXT",
+ submitBarLabel: "CS_COMMON_NEXT",
+ },
+ },
+ {
+ texts: {
+ headerCaption: "",
+ header: "CS_FILE_APPLICATION_PINCODE_LABEL",
+ cardText: "CS_FILE_APPLICATION_PROPERTY_SUBTYPE_TEXT",
+ submitBarLabel: "CS_COMMON_NEXT",
+ },
+ },
+];
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/NewApplication/defaultConfig.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/NewApplication/defaultConfig.js
new file mode 100644
index 00000000000..0c61556ec6c
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/NewApplication/defaultConfig.js
@@ -0,0 +1,163 @@
+import SelectPropertySubtype from "./SelectPropertySubtype";
+import SelectPropertyType from "./SelectPropertyType";
+import SelectAddress from "./SelectAddress";
+import SelectStreet from "./SelectStreet";
+import SelectLandmark from "./SelectLandmark";
+import SelectPincode from "./SelectPincode";
+import SelectTankSize from "./SelectTankSize";
+import SelectPitType from "./SelectPitType";
+import SelectGeolocation from "./SelectGeolocation";
+
+export const config = {
+ routes: [
+ {
+ route: "property-type",
+ component: SelectPropertyType,
+ groupKey: "ES_TITLE_APPLICATION_DETAILS",
+ texts: {
+ headerCaption: "",
+ header: "CS_FILE_APPLICATION_PROPERTY_LABEL",
+ cardText: "CS_FILE_APPLICATION_PROPERTY_TEXT",
+ submitBarLabel: "CS_COMMON_NEXT",
+ },
+ nextStep: "property-subtype",
+ },
+ {
+ route: "property-subtype",
+ component: SelectPropertySubtype,
+ groupKey: "ES_TITLE_APPLICATION_DETAILS",
+ texts: {
+ headerCaption: "",
+ header: "CS_FILE_APPLICATION_PROPERTY_SUBTYPE_LABEL",
+ cardText: "CS_FILE_APPLICATION_PROPERTY_SUBTYPE_TEXT",
+ submitBarLabel: "CS_COMMON_NEXT",
+ },
+ nextStep: "map",
+ },
+ {
+ route: "map",
+ component: SelectGeolocation,
+ nextStep: "pincode",
+ hideInEmployee: true,
+ },
+ {
+ route: "pincode",
+ component: SelectPincode,
+ groupKey: "ES_NEW_APPLICATION_LOCATION_DETAILS",
+ texts: {
+ headerCaption: "",
+ header: "CS_FILE_APPLICATION_PINCODE_LABEL",
+ cardText: "CS_FILE_APPLICATION_PINCODE_TEXT",
+ nextText: "CS_COMMON_NEXT",
+ skipText: "CORE_COMMON_SKIP_CONTINUE",
+ },
+ inputs: [
+ {
+ label: "CORE_COMMON_PINCODE",
+ type: "text",
+ name: "pincode",
+ validation: {
+ pattern: /^([1-9])(\d{5})$/,
+ minLength: 6,
+ maxLength: 7,
+ },
+ error: "CORE_COMMON_PINCODE_INVALID",
+ },
+ ],
+ nextStep: "address",
+ },
+ {
+ route: "address",
+ component: SelectAddress,
+ groupKey: "ES_NEW_APPLICATION_LOCATION_DETAILS",
+ texts: {
+ headerCaption: "CS_FILE_APPLICATION_PROPERTY_LOCATION_LABEL",
+ header: "CS_FILE_APPLICATION_PROPERTY_LOCATION_ADDRESS_TEXT",
+ cardText: "CS_FILE_APPLICATION_PROPERTY_LOCATION_CITY_MOHALLA_TEXT",
+ nextText: "CS_COMMON_NEXT",
+ },
+ nextStep: "street",
+ },
+ {
+ route: "street",
+ component: SelectStreet,
+ groupKey: "ES_NEW_APPLICATION_LOCATION_DETAILS",
+ texts: {
+ headerCaption: "CS_FILE_APPLICATION_PROPERTY_LOCATION_LABEL",
+ header: "CS_FILE_APPLICATION_PROPERTY_LOCATION_ADDRESS_TEXT",
+ cardText: "CS_FILE_APPLICATION_PROPERTY_LOCATION_STREET_DOOR_NO_LABEL",
+ nextText: "CS_COMMON_NEXT",
+ skipText: "CORE_COMMON_SKIP_CONTINUE",
+ },
+ inputs: [
+ {
+ label: "CS_FILE_APPLICATION_PROPERTY_LOCATION_STREET_NAME_LABEL",
+ type: "text",
+ name: "street",
+ validation: {
+ pattern: /^[\w\s]{1,256}$/,
+ },
+ error: "CORE_COMMON_STREET_INVALID",
+ },
+ {
+ label: "CS_FILE_APPLICATION_PROPERTY_LOCATION_DOOR_NO_LABEL",
+ type: "text",
+ name: "doorNo",
+ validation: {
+ pattern: /^[\w]([\w\/,\s])*$/,
+ },
+ error: "CORE_COMMON_DOOR_INVALID",
+ },
+ ],
+ nextStep: "landmark",
+ },
+ {
+ route: "landmark",
+ component: SelectLandmark,
+ groupKey: "ES_NEW_APPLICATION_LOCATION_DETAILS",
+ texts: {
+ headerCaption: "CS_FILE_APPLICATION_PROPERTY_LOCATION_LABEL",
+ header: "CS_FILE_APPLICATION_PROPERTY_LOCATION_PROVIDE_LANDMARK_TITLE",
+ cardText: "CS_FILE_APPLICATION_PROPERTY_LOCATION_PROVIDE_LANDMARK_TEXT",
+ nextText: "CS_COMMON_NEXT",
+ skipText: "CORE_COMMON_SKIP_CONTINUE",
+ },
+ inputs: [
+ {
+ label: "CS_FILE_APPLICATION_PROPERTY_LOCATION_LANDMARK_LABEL",
+ type: "textarea",
+ name: "landmark",
+ validation: {
+ maxLength: 1024,
+ },
+ },
+ ],
+ nextStep: "pit-type",
+ },
+ {
+ route: "pit-type",
+ component: SelectPitType,
+ groupKey: "CS_CHECK_PIT_SEPTIC_TANK_DETAILS",
+ texts: {
+ header: "CS_FILE_PROPERTY_PIT_TYPE",
+ cardText: "CS_FILE_PROPERTY_PIT_TYPE_TEXT",
+ nextText: "CS_COMMON_NEXT",
+ },
+ nextStep: "tank-size",
+ },
+ {
+ route: "tank-size",
+ component: SelectTankSize,
+ groupKey: "CS_CHECK_PIT_SEPTIC_TANK_DETAILS",
+ texts: {
+ headerCaption: "",
+ header: "CS_FILE_APPLICATION_PIT_SEPTIC_TANK_SIZE_TITLE",
+ cardText: "CS_FILE_APPLICATION_PIT_SEPTIC_TANK_SIZE_TEXT",
+ nextText: "CS_COMMON_NEXT",
+ skipText: "CORE_COMMON_SKIP_CONTINUE",
+ },
+ nextStep: null,
+ },
+ ],
+ indexRoute: "property-type",
+};
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/NewApplication/index.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/NewApplication/index.js
new file mode 100644
index 00000000000..f3d72fe9c5b
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/NewApplication/index.js
@@ -0,0 +1,81 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Redirect, Route, BrowserRouter as Router, Switch, useHistory, useRouteMatch, useLocation } from "react-router-dom";
+import { TypeSelectCard, Loader } from "@egovernments/digit-ui-react-components";
+import { newConfig } from "../../../config/NewApplication/config";
+import CheckPage from "./CheckPage";
+import Response from "./Response";
+import { useQueryClient } from "react-query";
+
+const FileComplaint = ({ parentRoute }) => {
+ const queryClient = useQueryClient();
+ const match = useRouteMatch();
+ const { t } = useTranslation();
+ const { pathname } = useLocation();
+ const history = useHistory();
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const stateId = tenantId.split(".")[0];
+ let config = [];
+ const [params, setParams, clearParams] = Digit.Hooks.useSessionStorage("FSM_CITIZEN_FILE_PROPERTY", {});
+ const { data: commonFields, isLoading } = Digit.Hooks.fsm.useMDMS(stateId, "FSM", "CommonFieldsConfig");
+ const goNext = (skipStep) => {
+ const currentPath = pathname.split("/").pop();
+ const { nextStep } = config.find((routeObj) => routeObj.route === currentPath);
+ let redirectWithHistory = history.push;
+ if (skipStep) {
+ redirectWithHistory = history.replace;
+ }
+ if (nextStep === null) {
+ return redirectWithHistory(`${parentRoute}/new-application/check`);
+ }
+ redirectWithHistory(`${match.path}/${nextStep}`);
+ };
+
+ const submitComplaint = async () => {
+ history.push(`${parentRoute}/new-application/response`);
+ };
+
+ function handleSelect(key, data, skipStep) {
+ setParams({ ...params, ...{ [key]: { ...params[key], ...data } }, ...{ source: "ONLINE" } });
+ goNext(skipStep);
+ }
+
+ const handleSkip = () => {};
+
+ const handleSUccess = () => {
+ clearParams();
+ queryClient.invalidateQueries("FSM_CITIZEN_SEARCH");
+ };
+
+ if (isLoading) {
+ return
+ {config.map((routeObj, index) => {
+ const { component, texts, inputs, key } = routeObj;
+ const Component = typeof component === "string" ? Digit.ComponentRegistryService.getComponent(component) : component;
+ return (
+
+
+ );
+ })}
+
+
+
+
+
+
+
+ );
+};
+
+export default FileComplaint;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/Rating/RateView.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/Rating/RateView.js
new file mode 100644
index 00000000000..0c6587cc014
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/Rating/RateView.js
@@ -0,0 +1,42 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { Card, CardLabel, CardHeader, KeyNote, Loader, Rating } from "@egovernments/digit-ui-react-components";
+
+const RateView = (props) => {
+ const { t } = useTranslation();
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ let { id: applicationNos } = useParams();
+ const { isError, isLoading, isSuccess, error, data: application } = Digit.Hooks.fsm.useSearch(tenantId, { applicationNos });
+ const { isLoading: isWorkflowLoading, data } = Digit.Hooks.useWorkflowDetails({
+ tenantId: application?.tenantId,
+ id: applicationNos,
+ moduleCode: "FSM",
+ config: { enabled: isSuccess && !!application },
+ });
+
+ if (isLoading || isWorkflowLoading) {
+ return
+ {t("CS_RATE_HELP_US")}
+
+
+ {application.additionalDetails.CheckList.map((checklist) => (
+ t(val))
+ .join(", ")}
+ />
+ ))}
+
+ );
+};
+
+export default RateView;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/Rating/SelectRating.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/Rating/SelectRating.js
new file mode 100644
index 00000000000..75edadbc559
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/citizen/Rating/SelectRating.js
@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from "react";
+import { Loader, RatingCard } from "@egovernments/digit-ui-react-components";
+import { useHistory, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+const SelectRating = ({ parentRoute }) => {
+ const { t } = useTranslation();
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const history = useHistory();
+ let { id: applicationNos } = useParams();
+ const { isError, error, data: application } = Digit.Hooks.fsm.useSearch(tenantId, { applicationNos });
+ const { isLoading, data: checklistData } = Digit.Hooks.fsm.useMDMS(tenantId, "FSM", "Checklist");
+ const mutation = Digit.Hooks.fsm.useApplicationUpdate(tenantId);
+ const [answers, setAnswers] = useState({});
+
+ function handleSubmit(data) {
+ const { rating, comments } = data;
+ const allAnswers = { ...data, ...answers };
+ let checklist = Object.keys(allAnswers).reduce((acc, key) => {
+ if (key === "comments" || key === "rating") {
+ return acc;
+ }
+ acc.push({ code: key, value: Array.isArray(allAnswers[key]) ? allAnswers[key].join(",") : allAnswers[key] });
+ return acc;
+ }, []);
+
+ application.additionalDetails = {
+ CheckList: checklist,
+ };
+
+ history.push(`${parentRoute}/response`, {
+ applicationData: application,
+ key: "update",
+ action: "RATE",
+ actionData: { rating, comments },
+ });
+ }
+
+ const handleSelect = (key) => {
+ return (value) => {
+ setAnswers({ ...answers, [key]: value });
+ };
+ };
+
+ if (isLoading) {
+ return
+ {key} : {what[key]}
+
+ ));
+ };
+
+ const data = auditResponse?.fsmAudit?.map((el, index) => {
+ const user = getUserFromUUID(el.who);
+ return {
+ when: whenList[index],
+ who: `${user?.name} (${user?.type})`,
+ what:
+ index === 0 ? (
+
+ New Request{" "}
+
+ ) : (
+ {getWhat(el.what)}
+ ),
+ };
+ });
+
+ if (isLoading || userList.isLoading) return
+
{t("ES_TITLE_APPLICATION_AUDIT")}
+
{
+ return {
+ style: {
+ padding: "20px 18px",
+ fontSize: "16px",
+ // borderTop: "1px solid grey",
+ // textAlign: "left",
+ // verticalAlign: "middle",
+ },
+ };
+ }}
+ />
+
+ );
+};
+
+export default ApplicationAudit;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/ApplicationDetails/Modal/index.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/ApplicationDetails/Modal/index.js
new file mode 100644
index 00000000000..8402a25e66a
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/ApplicationDetails/Modal/index.js
@@ -0,0 +1,321 @@
+import { Loader, Modal, FormComposer, Toast } from "@egovernments/digit-ui-react-components";
+import React, { useState, useEffect } from "react";
+import { useQueryClient } from "react-query";
+
+import { configAssignDso, configCompleteApplication, configReassignDSO, configAcceptDso, configRejectApplication } from "../config";
+
+const Heading = (props) => {
+ return {props.label} ;
+};
+
+const Close = () => (
+
+
+);
+
+const CloseBtn = (props) => {
+ return (
+
+
+ );
+};
+
+const ActionModal = ({ t, action, tenantId, state, id, closeModal, submitAction, actionData }) => {
+ const { data: dsoData, isLoading: isDsoLoading, isSuccess: isDsoSuccess, error: dsoError } = Digit.Hooks.fsm.useDsoSearch(tenantId);
+ const { isLoading, isSuccess, isError, data: applicationData, error } = Digit.Hooks.fsm.useSearch(
+ tenantId,
+ { applicationNos: id },
+ {
+ staleTime: Infinity,
+ select: (details) => {
+ let { additionalDetails } = details;
+
+ const parseTillObject = (str) => {
+ if (typeof str === "object") return str;
+ else return parseTillObject(JSON.parse(str));
+ };
+
+ additionalDetails = parseTillObject(additionalDetails);
+ return { ...details, additionalDetails };
+ },
+ }
+ );
+ // console.log("find application details here", applicationData)
+ const client = useQueryClient();
+ const stateCode = tenantId.split(".")[0];
+ const { data: vehicleList, isLoading: isVehicleData, isSuccess: isVehicleDataLoaded } = Digit.Hooks.fsm.useMDMS(
+ stateCode,
+ "Vehicle",
+ "VehicleType",
+ { staleTime: Infinity }
+ );
+ const [dsoList, setDsoList] = useState([]);
+ const [vehicleNoList, setVehicleNoList] = useState([]);
+ const [config, setConfig] = useState({});
+ const [dso, setDSO] = useState(null);
+ const [vehicleNo, setVehicleNo] = useState(null);
+ const [vehicleMenu, setVehicleMenu] = useState([]);
+ const [vehicle, setVehicle] = useState(null);
+ const [defaultValues, setDefautValue] = useState({
+ capacity: vehicle?.capacity,
+ wasteCollected: vehicle?.capacity,
+ });
+ // const [toastError, setToastError] = useState(false);
+ const { data: Reason, isLoading: isReasonLoading } = Digit.Hooks.fsm.useMDMS(stateCode, "FSM", "Reason", { staleTime: Infinity }, [
+ "ReassignReason",
+ "RejectionReason",
+ "DeclineReason",
+ "CancelReason",
+ ]);
+
+ // console.log("find mdms data here", Reason);
+
+ const [reassignReason, selectReassignReason] = useState(null);
+ const [rejectionReason, setRejectionReason] = useState(null);
+ const [declineReason, setDeclineReason] = useState(null);
+ const [cancelReason, selectCancelReason] = useState(null);
+
+ const [formValve, setFormValve] = useState(false);
+
+ useEffect(() => {
+ if (isSuccess && isVehicleDataLoaded) {
+ const [vehicle] = vehicleList.filter((item) => item.code === applicationData.vehicleType);
+ setVehicleMenu([vehicle]);
+ setVehicle(vehicle);
+ setDefautValue({
+ capacity: vehicle?.capacity,
+ wasteCollected: vehicle?.capacity,
+ });
+ }
+ }, [isVehicleDataLoaded, isSuccess]);
+
+ useEffect(() => {
+ if (vehicle && isDsoSuccess) {
+ const dsoList = dsoData.filter((dso) => dso?.vehicles?.find((dsoVehicle) => dsoVehicle.type === vehicle.code));
+ setDsoList(dsoList);
+ }
+ }, [vehicle, isDsoSuccess]);
+
+ useEffect(() => {
+ if (isSuccess && isDsoSuccess && applicationData.dsoId) {
+ const [dso] = dsoData.filter((dso) => dso.id === applicationData.dsoId);
+ const vehicleNoList = dso?.vehicles?.filter((vehicle) => vehicle.type === applicationData.vehicleType);
+ setVehicleNoList(vehicleNoList);
+ }
+ }, [isSuccess, isDsoSuccess]);
+
+ useEffect(() => {
+ reassignReason || (actionData && actionData[0] && actionData[0].comment?.length > 0 && actionData[0]?.status === "DSO_REJECTED")
+ ? setFormValve(true)
+ : setFormValve(false);
+ }, [reassignReason]);
+
+ useEffect(() => {
+ setFormValve(rejectionReason ? true : false);
+ }, [rejectionReason]);
+
+ useEffect(() => {
+ setFormValve(declineReason ? true : false);
+ }, [declineReason]);
+
+ useEffect(() => {
+ setFormValve(cancelReason ? true : false);
+ }, [cancelReason]);
+
+ function selectDSO(dsoDetails) {
+ // console.log("find dso details here", dsoDetails);
+ setDSO(dsoDetails);
+ // setVehicleMenu(dsoDetails.vehicles);
+ }
+
+ function selectVehicleNo(vehicleNo) {
+ setVehicleNo(vehicleNo);
+ }
+
+ function selectVehicle(value) {
+ // console.log("find vehicle details here", value)
+ setVehicle(value);
+ setDefautValue({
+ capacity: value?.capacity,
+ wasteCollected: value?.capacity,
+ });
+ }
+
+ // function setTostError(errorMsg) {
+ // setToastError({ label: errorMsg, error: true });
+ // }
+
+ function addCommentToWorkflow(state, workflow, data) {
+ workflow.comments = data.comments ? state.code + "~" + data.comments : state.code;
+ }
+
+ function submit(data) {
+ // console.log("find submit here",data);
+ const workflow = { action: action };
+
+ if (dso) applicationData.dsoId = dso.id;
+ if (vehicleNo && action === "ACCEPT") applicationData.vehicleId = vehicleNo.id;
+ if (vehicleNo && action === "DSO_ACCEPT") applicationData.vehicleId = vehicleNo.id;
+ if (vehicle && action === "ASSIGN") applicationData.vehicleType = vehicle.code;
+ if (data.date) applicationData.possibleServiceDate = new Date(`${data.date}`).getTime();
+ if (data.desluged) applicationData.completedOn = new Date(data.desluged).getTime();
+ if (data.wasteCollected) applicationData.wasteCollected = data.wasteCollected;
+ if (reassignReason) addCommentToWorkflow(reassignReason, workflow, data);
+ if (rejectionReason) addCommentToWorkflow(rejectionReason, workflow, data);
+ if (declineReason) addCommentToWorkflow(declineReason, workflow, data);
+ if (cancelReason) addCommentToWorkflow(cancelReason, workflow, data);
+
+ // console.log("find fsm update object here",{ fsm: applicationData, workflow });
+ submitAction({ fsm: applicationData, workflow });
+ }
+ useEffect(() => {
+ switch (action) {
+ case "DSO_ACCEPT":
+ case "ACCEPT":
+ //TODO: add accept UI
+ setFormValve(vehicleNo ? true : false);
+ return setConfig(
+ configAcceptDso({
+ t,
+ dsoData,
+ dso,
+ vehicle,
+ vehicleNo,
+ vehicleNoList,
+ selectVehicleNo,
+ action,
+ })
+ );
+
+ case "ASSIGN":
+ case "GENERATE_DEMAND":
+ case "FSM_GENERATE_DEMAND":
+ // console.log("find vehicle menu here", vehicleMenu)
+ setFormValve(dso && vehicle ? true : false);
+ return setConfig(
+ configAssignDso({
+ t,
+ dsoData,
+ dso,
+ selectDSO,
+ vehicleMenu,
+ vehicle,
+ selectVehicle,
+ action,
+ })
+ );
+ case "REASSIGN":
+ case "REASSING":
+ case "FSM_REASSING":
+ dso &&
+ vehicle &&
+ (reassignReason || (actionData && actionData[0] && actionData[0].comment?.length > 0 && actionData[0]?.status === "DSO_REJECTED"))
+ ? setFormValve(true)
+ : setFormValve(false);
+ // console.log("find reasiign reason data here",Reason?.ReassignReason)
+ return setConfig(
+ configReassignDSO({
+ t,
+ dsoData,
+ dso,
+ selectDSO,
+ vehicleMenu,
+ vehicle,
+ selectVehicle,
+ reassignReasonMenu: Reason?.ReassignReason,
+ reassignReason,
+ selectReassignReason,
+ action,
+ showReassignReason:
+ actionData && actionData[0] && actionData[0].comment?.length > 0 && actionData[0]?.status === "DSO_REJECTED" ? false : true,
+ })
+ );
+ case "COMPLETE":
+ case "COMPLETED":
+ setFormValve(true);
+ // console.log("find vehicle cpacity", vehicle?.capacity)
+ return setConfig(configCompleteApplication({ t, vehicle, applicationCreatedTime: applicationData?.auditDetails?.createdTime, action }));
+ case "SUBMIT":
+ case "FSM_SUBMIT":
+ return history.push("/digit-ui/employee/fsm/modify-application/" + applicationNumber);
+ case "DECLINE":
+ case "DSO_REJECT":
+ //declinereason
+ // console.log("find action", action, declineReason)
+ setFormValve(declineReason ? true : false);
+ return setConfig(
+ configRejectApplication({
+ t,
+ rejectMenu: Reason?.DeclineReason,
+ setReason: setDeclineReason,
+ reason: declineReason,
+ action,
+ })
+ );
+ case "REJECT":
+ case "SENDBACK":
+ // rejectionReason
+ setFormValve(rejectionReason ? true : false);
+ return setConfig(
+ configRejectApplication({
+ t,
+ rejectMenu: Reason?.RejectionReason,
+ setReason: setRejectionReason,
+ reason: rejectionReason,
+ action,
+ })
+ );
+ case "CANCEL":
+ ///cancellreason
+ setFormValve(cancelReason ? true : false);
+ return setConfig(
+ configRejectApplication({
+ t,
+ rejectMenu: Reason?.CancelReason,
+ setReason: selectCancelReason,
+ reason: cancelReason,
+ action,
+ })
+ );
+
+ case "PAY":
+ case "ADDITIONAL_PAY_REQUEST":
+ case "FSM_PAY":
+ return history.push(`/digit-ui/employee/payment/collect/FSM.TRIP_CHARGES/${applicationNumber}`);
+ default:
+ console.log("default case");
+ break;
+ }
+ }, [action, isDsoLoading, dso, vehicleMenu, rejectionReason, vehicleNo, vehicleNoList, Reason]);
+
+ return action && config.form && !isDsoLoading && !isReasonLoading && isVehicleDataLoaded ? (
+
+ {/* {console.log("find get dso here",getFilteredDsoData(), getFilteredDsoData() && !getFilteredDsoData().length )} */}
+ {getFilteredDsoData(dsoData, vehicle) && !getFilteredDsoData(dsoData, vehicle).length ? (
+ {t("ES_COMMON_NO_DSO_AVAILABLE_WITH_SUCH_VEHICLE")}
+ ) : null}
+
+ ),
+ },
+ {
+ label: t("ES_FSM_ACTION_VEHICLE_CAPACITY_IN_LTRS"),
+ isMandatory: true,
+ type: "text",
+ populators: {
+ name: "capacity",
+ validation: {
+ required: true,
+ },
+ },
+ disable: true,
+ },
+ // {
+ // label: t("ES_FSM_ACTION_SERVICE_DATE"),
+ // isMandatory: true,
+ // type: "date",
+ // populators: {
+ // name: "date",
+ // validation: {
+ // required: true,
+ // },
+ // min: Digit.Utils.date.getDate(),
+ // defaultValue: Digit.Utils.date.getDate(),
+ // },
+ // },
+ {
+ label: t("ES_FSM_ACTION_SERVICE_DATE"),
+ isMandatory: true,
+ type: "custom",
+ populators: {
+ name: "date",
+ validation: {
+ required: true,
+ },
+ customProps: { min: Digit.Utils.date.getDate() },
+ defaultValue: Digit.Utils.date.getDate(),
+ component: (props, customProps) =>
+ {/* {console.log("find get dso here",getFilteredDsoData(), getFilteredDsoData() && !getFilteredDsoData().length )} */}
+ {getFilteredDsoData(dsoData, vehicle) && !getFilteredDsoData(dsoData, vehicle).length ? (
+ {t("ES_COMMON_NO_DSO_AVAILABLE_WITH_SUCH_VEHICLE")}
+ ) : null}
+
+ ),
+ },
+ {
+ label: t("ES_FSM_ACTION_VEHICLE_CAPACITY_IN_LTRS"),
+ type: "text",
+ populators: {
+ name: "capacity",
+ validation: {
+ required: true,
+ },
+ },
+ disable: true,
+ },
+ {
+ label: t("ES_FSM_ACTION_SERVICE_DATE"),
+ isMandatory: true,
+ type: "custom",
+ populators: {
+ name: "date",
+ validation: {
+ required: true,
+ },
+ customProps: { min: Digit.Utils.date.getDate() },
+ defaultValue: Digit.Utils.date.getDate(),
+ component: (props, customProps) =>
+
+
+
{t("CS_FSM_RATE_VIEW")}
+
+
+ {!isLoading ? (
+
+
+ {/* {!DSO && (
+ {t("ES_APPLICATION_DETAILS_VIEW_AUDIT_TRAIL")}}
+ style={{ position: "absolute", top: 0, right: 20 }}
+ onClick={() => {
+ history.push(props.parentRoute + "/application-audit/" + applicationNumber);
+ }}
+ />
+ )} */}
+ {applicationDetails?.applicationDetails.map((detail, index) => (
+
+ {index === 0 ? (
+ {t(detail.title)}
+ ) : (
+ {t(detail.title)}
+ )}
+
+ {detail?.values?.map((value, index) => {
+ if (value.map === true && value.value !== "N/A") {
+ return |
} />;
+ }
+ return (
+ |
+ );
+ })}
+
+
+ ))}
+
+
+
+ {t("ES_APPLICATION_DETAILS_APPLICATION_TIMELINE")}
+
+ {workflowDetails?.data?.timeline && workflowDetails?.data?.timeline?.length === 1 ? (
+
+ {workflowDetails?.data?.timeline &&
+ workflowDetails?.data?.timeline.map((checkpoint, index, arr) => {
+ return (
+
+
+ );
+ })}
+
+ )}
+
+ )}
+
+ {/* {console.log("above show modal", showModal)} */}
+ {showModal ? (
+
+ {displayMenu && workflowDetails?.data?.nextActions ? (
+ action.action)}
+ t={t}
+ onSelect={onActionSelect}
+ />
+ ) : null}
+ setDisplayMenu(!displayMenu)} />
+
+ )}
+
+ ) : (
+
+ );
+};
+
+export default ApplicationDetails;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/DsoDashboard.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/DsoDashboard.js
new file mode 100644
index 00000000000..ebb0d522fb4
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/DsoDashboard.js
@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react";
+import { DashboardBox, Loader, ShippingTruck } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import { useMemo } from "react";
+
+const svgIcon = (
+
+
+);
+
+const DsoDashboard = () => {
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const { t } = useTranslation();
+ const [total, setTotal] = useState("-");
+ const [loader, setLoader] = useState(true);
+ const [isDsoLoaded, setIsDsoLoaded] = useState(false);
+
+
+ // fetch Status codes for DSO_ACTIONS
+
+ const filters = {
+ limit:10,
+ offset:0,
+ uuid: { code: "ASSIGNED_TO_ME", name: t("ES_INBOX_ASSIGNED_TO_ME") },
+ sortBy: "createdTime",
+ sortOrder: "DESC",
+ total: true,
+ };
+
+ const { data:vendorDetails, isFetching: vendorDetailsFetching } = Digit.Hooks.fsm.useVendorDetail();
+
+ useEffect(() => {
+ if (vendorDetails?.vendor) {
+ const { vendor } = vendorDetails;
+ Digit.UserService.setExtraRoleDetails(vendor[0]);
+ setIsDsoLoaded(true);
+ }
+ }, [vendorDetails]);
+
+ const { data: inbox, isFetching: inboxFetching } = Digit.Hooks.fsm.useInbox(tenantId, { ...filters }, {
+ enabled: isDsoLoaded,
+ }, true );
+ const info = useMemo( () => ({
+ [t("ES_COMPLETION_PENDING")]: inbox?.statuses.filter(e => e.applicationstatus === "DSO_INPROGRESS")[0]?.count || 0,
+ [t("ES_VEHICLE_ASSIGNMENT_PENDING")]: inbox?.statuses.filter(e => e.applicationstatus === "PENDING_DSO_APPROVAL")[0]?.count || 0,
+ }),[inbox?.totalCount]);
+
+
+ const links = useMemo(
+ () => [
+ {
+ pathname: "/digit-ui/citizen/fsm/inbox",
+ label: "ES_TITLE_INBOX",
+ total: total,
+ },
+ ],
+ [total]
+ );
+
+ useEffect(() => {
+ if (inbox) {
+ const total = inbox?.totalCount || 0;
+ setTotal(total);
+ if (Object.keys(info).length) setLoader(false);
+ }
+ }, [info, inbox]);
+
+ if (loader) {
+ return
+
+ );
+};
+
+export default DsoDashboard;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/EditApplication/EditForm.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/EditApplication/EditForm.js
new file mode 100644
index 00000000000..e5849fbe164
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/EditApplication/EditForm.js
@@ -0,0 +1,206 @@
+import React, { useState } from "react";
+import { useHistory } from "react-router-dom";
+import { FormComposer, Loader } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import { getVehicleType } from "../../../utils";
+
+const isConventionalSpecticTank = (tankDimension) => tankDimension === "lbd";
+
+const EditForm = ({ tenantId, applicationData, channelMenu, vehicleMenu, sanitationMenu }) => {
+ const { t } = useTranslation();
+ const history = useHistory();
+ const [canSubmit, setSubmitValve] = useState(false);
+ const stateId = tenantId.split(".")[0];
+ const { data: commonFields, isLoading } = Digit.Hooks.fsm.useMDMS(stateId, "FSM", "CommonFieldsConfig");
+ const { data: preFields, isLoading: isApplicantConfigLoading } = Digit.Hooks.fsm.useMDMS(stateId, "FSM", "PreFieldsConfig");
+ const { data: postFields, isLoading: isTripConfigLoading } = Digit.Hooks.fsm.useMDMS(stateId, "FSM", "PostFieldsConfig");
+
+ const defaultValues = {
+ channel: channelMenu.filter((channel) => channel.code === applicationData.source)[0],
+ applicationData: {
+ applicantName: applicationData.citizen.name,
+ mobileNumber: applicationData.citizen.mobileNumber,
+ },
+ tripData: {
+ noOfTrips: applicationData.noOfTrips,
+ amountPerTrip: applicationData.additionalDetails.tripAmount,
+ amount: applicationData.noOfTrips * applicationData.additionalDetails.tripAmount || undefined,
+ vehicleType: vehicleMenu
+ .filter((vehicle) => vehicle?.code === applicationData?.vehicleType)
+ .map((vehicle) => ({ ...vehicle, label: getVehicleType(vehicle, t) }))[0],
+ },
+ propertyType: applicationData.propertyUsage.split(".")[0],
+ subtype: applicationData.propertyUsage,
+ address: {
+ pincode: applicationData.address.pincode,
+ locality: {
+ ...applicationData.address.locality,
+ i18nkey: `${applicationData.tenantId.toUpperCase().split(".").join("_")}_REVENUE_${applicationData.address.locality.code}`,
+ },
+ slum: applicationData.address.slumName,
+ street: applicationData.address.street,
+ doorNo: applicationData.address.doorNo,
+ landmark: applicationData.address.landmark,
+ },
+ pitType: sanitationMenu.filter((type) => type.code === applicationData.sanitationtype)[0],
+ pitDetail: applicationData.pitDetail,
+ };
+
+ const onFormValueChange = (setValue, formData) => {
+ // // setNoOfTrips(formData?.noOfTrips || 1);
+
+ // (async () => {
+ // // console.log("abcd1",vehicle, formData?.propertyType , formData?.subtype)
+
+ // if (formData?.propertyType && formData?.subtype && formData?.address && vehicle?.code && !kill) {
+ // const { capacity } = vehicle;
+ // // console.log("find bill slab form data", formData)
+ // const { slum: slumDetails } = formData.address;
+ // const slum = slumDetails ? "YES" : "NO";
+ // const billingDetails = await Digit.FSMService.billingSlabSearch(tenantId, {
+ // propertyType: formData?.subtype,
+ // capacity,
+ // slum,
+ // });
+
+ // const billSlab = billingDetails?.billingSlab?.length && billingDetails?.billingSlab[0];
+ // if (billSlab?.price) {
+ // setKill(true);
+ // console.log("find bill slab here", billSlab.price);
+ // setValue("amountPerTrip", billSlab.price);
+ // setValue("amount", billSlab.price * formData.noOfTrips);
+ // }
+ // }
+ // })();
+ // // console.log("abcd2",vehicle, formData?.propertyType , formData?.subtype)
+ if (
+ formData?.propertyType &&
+ formData?.subtype &&
+ formData?.address?.locality?.code &&
+ formData?.tripData?.vehicleType &&
+ formData?.tripData?.amountPerTrip
+ ) {
+ setSubmitValve(true);
+ const pitDetailValues = formData?.pitDetail ? Object.values(formData?.pitDetail).filter((value) => value > 0) : null;
+ if (formData?.pitType) {
+ if (pitDetailValues === null || pitDetailValues?.length === 0) {
+ setSubmitValve(true);
+ } else if (isConventionalSpecticTank(formData?.pitType?.dimension) && pitDetailValues?.length >= 3) {
+ setSubmitValve(true);
+ } else if (!isConventionalSpecticTank(formData?.pitType?.dimension) && pitDetailValues?.length >= 2) {
+ setSubmitValve(true);
+ } else setSubmitValve(false);
+ }
+ } else {
+ setSubmitValve(false);
+ }
+ };
+
+ // useEffect(() => {
+ // (async () => {
+
+ // })();
+ // }, [propertyType, subType, vehicle]);
+
+ const onSubmit = (data) => {
+ const applicationChannel = data.channel;
+ const sanitationtype = data?.pitType?.code;
+ const pitDimension = data?.pitDetail;
+ const applicantName = data.applicationData.applicantName;
+ const mobileNumber = data.applicationData.mobileNumber;
+ const pincode = data?.address?.pincode;
+ const street = data?.address?.street?.trim();
+ const doorNo = data?.address?.doorNo?.trim();
+ const slum = data?.address?.slum;
+ const landmark = data?.address?.landmark?.trim();
+ const noOfTrips = data.tripData.noOfTrips;
+ const amount = data.tripData.amountPerTrip;
+ const cityCode = data?.address?.city?.code;
+ const city = data?.address?.city?.name;
+ // const state = data?.address?.city?.state;
+ const localityCode = data?.address?.locality?.code;
+ const localityName = data?.address?.locality?.name;
+ const propertyUsage = data?.subtype;
+ const { height, length, width, diameter } = pitDimension;
+
+ const formData = {
+ ...applicationData,
+ sanitationtype: sanitationtype,
+ source: applicationChannel.code,
+ additionalDetails: {
+ ...applicationData.additionalDetails,
+ tripAmount: amount,
+ },
+ propertyUsage,
+ vehicleType: data.tripData.vehicleType.code,
+ noOfTrips,
+ pitDetail: {
+ ...applicationData.pitDetail,
+ distanceFromRoad: data.distanceFromRoad,
+ height,
+ length,
+ width,
+ diameter,
+ },
+ address: {
+ ...applicationData.address,
+ tenantId: cityCode,
+ landmark,
+ doorNo,
+ street,
+ pincode,
+ slumName: slum,
+ locality: {
+ ...applicationData.address.locality,
+ code: localityCode,
+ name: localityName,
+ },
+ geoLocation: {
+ ...applicationData.address.geoLocation,
+ latitude: data?.address?.latitude ? data?.address?.latitude : applicationData.address.geoLocation.latitude,
+ longitude: data?.address?.longitude ? data?.address?.longitude : applicationData.address.geoLocation.longitude,
+ },
+ },
+ };
+
+ delete formData["responseInfo"];
+
+ window.Digit.SessionStorage.set("propertyType", null);
+ window.Digit.SessionStorage.set("subType", null);
+ Digit.SessionStorage.set("city_property", null);
+ Digit.SessionStorage.set("selected_localities", null);
+ Digit.SessionStorage.set("locality_property", null);
+ // console.log("find form data here", formData);
+ history.replace("/digit-ui/employee/fsm/response", {
+ applicationData: formData,
+ key: "update",
+ action: "SUBMIT",
+ });
+ };
+
+ if (isLoading || isTripConfigLoading || isApplicantConfigLoading) {
+ return {
+ return {
+ ...config,
+ body: config.body.filter((a) => !a.hideInEmployee),
+ };
+ })}
+ fieldStyle={{ marginRight: 0 }}
+ onSubmit={onSubmit}
+ defaultValues={defaultValues}
+ onFormValueChange={onFormValueChange}
+ />
+ );
+};
+
+export default EditForm;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/EditApplication/index.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/EditApplication/index.js
new file mode 100644
index 00000000000..a490a715dcb
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/EditApplication/index.js
@@ -0,0 +1,42 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import EditForm from "./EditForm";
+
+const EditApplication = ({ parentUrl, heading }) => {
+ // const __initPropertyType__ = window.Digit.SessionStorage.get("propertyType");
+ // const __initSubType__ = window.Digit.SessionStorage.get("subType");
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const state = tenantId?.split(".")[0] || "pb";
+
+ let { id: applicationNumber } = useParams();
+ const userInfo = Digit.UserService.getUser();
+
+ const { isLoading: applicationLoading, isError, data: applicationData, error } = Digit.Hooks.fsm.useSearch(
+ tenantId,
+ { applicationNos: applicationNumber, uuid: userInfo.uuid },
+ { staleTime: Infinity }
+ );
+
+ const { isLoading: isVehicleMenuLoading, data: vehicleMenu } = Digit.Hooks.fsm.useMDMS(state, "Vehicle", "VehicleType", { staleTime: Infinity });
+ // console.log("find vehicle menu", vehicleMenu)
+ const { isLoading: isChannelMenuLoading, data: channelMenu } = Digit.Hooks.fsm.useMDMS(tenantId, "FSM", "ApplicationChannel");
+ const { data: sanitationMenu, isLoading: sanitationTypeloading } = Digit.Hooks.fsm.useMDMS(state, "FSM", "PitType");
+
+ return applicationData &&
+ !applicationLoading &&
+ vehicleMenu &&
+ !isVehicleMenuLoading &&
+ channelMenu &&
+ !isChannelMenuLoading &&
+ !sanitationTypeloading &&
+ sanitationMenu ? (
+
+
+
+ );
+ }
+ // }
+};
+
+export default FstpInbox;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/FstpOperatorDetails.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/FstpOperatorDetails.js
new file mode 100644
index 00000000000..9b316089142
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/FstpOperatorDetails.js
@@ -0,0 +1,260 @@
+import React, { Fragment, useState, useEffect } from "react";
+import { useParams, useHistory } from "react-router-dom";
+import TimePicker from "react-time-picker";
+import {
+ Card,
+ CardLabel,
+ CardLabelError,
+ DetailsCard,
+ TextInput,
+ ActionBar,
+ SubmitBar,
+ Loader,
+ Toast,
+ StatusTable,
+ Row,
+ LabelFieldPair,
+} from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import { useQueryClient } from "react-query";
+import CustomTimePicker from "../../components/CustomTimePicker";
+
+const config = {
+ select: (data) => {
+ return data.vehicleTrip[0];
+ },
+};
+
+const FstpOperatorDetails = () => {
+ const { t } = useTranslation();
+ const history = useHistory();
+ const queryClient = useQueryClient();
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ let { id: applicationNos } = useParams();
+ const [filters, setFilters] = useState({ applicationNos });
+ const [isVehicleSearchCompleted, setIsVehicleSearchCompleted] = useState(false);
+ const [searchParams, setSearchParams] = useState({});
+ const [showToast, setShowToast] = useState(null);
+ const [wasteCollected, setWasteCollected] = useState(null);
+ const [errors, setErrors] = useState({});
+ const [tripStartTime, setTripStartTime] = useState(null);
+ const [tripTime, setTripTime] = useState(() => {
+ const today = new Date();
+ const hour = (today.getHours() < 10 ? "0" : "") + today.getHours();
+ const minutes = (today.getMinutes() < 10 ? "0" : "") + today.getMinutes();
+ return `${hour}:${minutes}`;
+ });
+
+ const { isLoading, isSuccess, data: vehicle } = Digit.Hooks.fsm.useVehicleSearch({ tenantId, filters, config });
+ const { isLoading: isSearchLoading, isIdle, data: { data: {table: tripDetails} = {} } = {} } = Digit.Hooks.fsm.useSearchAll(tenantId, searchParams, null, {
+ enabled: !!isVehicleSearchCompleted,
+ });
+
+ const mutation = Digit.Hooks.fsm.useVehicleUpdate(tenantId);
+
+ useEffect(() => {
+ if (isSuccess) {
+ setWasteCollected(vehicle.vehicle.tankCapacity);
+ const applicationNos = vehicle.tripDetails.map((tripData) => tripData.referenceNo).join(",");
+ setSearchParams({ applicationNos });
+ setIsVehicleSearchCompleted(true);
+ }
+ }, [isSuccess]);
+
+ const handleSubmit = (event) => {
+ event.preventDefault();
+ const wasteCombined = tripDetails.reduce((acc, trip) => acc + trip.volume, 0);
+ if (!wasteCollected || wasteCollected > wasteCombined || wasteCollected > vehicle.vehicle.tankCapacity) {
+ setErrors({ wasteRecieved: "ES_FSTP_INVALID_WASTE_AMOUNT" });
+ return;
+ }
+ if (tripStartTime === null) {
+ setErrors({ tripStartTime: "ES_FSTP_INVALID_START_TIME" });
+ return;
+ }
+
+ if (tripTime === null) {
+ setErrors({ tripTime: "ES_FSTP_INVALID_TRIP_TIME" });
+ return;
+ }
+
+ if (tripStartTime === tripTime || tripStartTime > tripTime) {
+ setErrors({ tripTime: "ES_FSTP_INVALID_TRIP_TIME" });
+ return;
+ }
+
+ setErrors({});
+
+ const d = new Date();
+ const timeStamp = Date.parse(new Date(d.toString().split(":")[0].slice(0, -2) + tripTime)) / 1000;
+ const tripStartTimestamp = Date.parse(new Date(d.toString().split(":")[0].slice(0, -2) + tripStartTime)) / 1000;
+ vehicle.tripStartTime = tripStartTimestamp;
+ vehicle.fstpEntryTime = tripStartTimestamp;
+ vehicle.tripEndTime = timeStamp;
+ vehicle.fstpExitTime = timeStamp;
+ vehicle.volumeCarried = wasteCollected;
+ const details = {
+ vehicleTrip: vehicle,
+ workflow: {
+ action: "DISPOSE",
+ },
+ };
+
+ mutation.mutate(details, {
+ onSuccess: handleSuccess,
+ });
+ };
+
+ const closeToast = () => {
+ setShowToast(null);
+ };
+
+ const handleSuccess = () => {
+ /* Show Toast on success */
+ queryClient.invalidateQueries("FSM_VEHICLE_DATA");
+ setShowToast({ key: "success", action: `ES_FSM_DISPOSE_UPDATE_SUCCESS` });
+ setTimeout(() => {
+ closeToast();
+ history.push(`/digit-ui/employee/fsm/fstp-inbox`);
+ }, 5000);
+ };
+
+ const handleChange = (event) => {
+ const { name, value } = event.target;
+ if (name === "tripTime") {
+ setTripTime(value);
+ } else if (name === "wasteRecieved") {
+ setWasteCollected(value);
+ }
+ };
+
+ if (isLoading) {
+ return
+
+
+ {vehicleData.map((row, index) => (
+ |
+ ))}
+ {t(errors.tripStartTime)}
+ {t(errors.wasteRecieved)}
+
+ {t(errors.tripTime)}
+
+
+
+
+ {/*
+ {t("ES_VEHICLE_WASTE_RECIEVED")}
+
+
+ {errors.wasteRecieved && {t(errors.wasteRecieved)} }
+
+
+ {t("ES_COMMON_TIME")}
+
+
+ */}
+
+
+ {t("ES_FSTP_OPERATOR_DETAILS_WASTE_GENERATORS")}
+ {isSearchLoading || isIdle ? (
+
+
+ {tripDetails.map((trip, index) => {
+ return (
+ <>
+ |
+ |
+ |
+ |
+
+ );
+ })}
+
+
+ )}
+ {showToast && (
+
+ {!isSearch && (
+
+ )}
+
+
{
+ return {
+ ...config,
+ body: config.body.filter((a) => !a.hideInEmployee),
+ };
+ })}
+ fieldStyle={{ marginRight: 0 }}
+ onSubmit={onSubmit}
+ defaultValues={defaultValues}
+ onFormValueChange={onFormValueChange}
+ />
+ );
+};
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/configs/ApplicantDetails.js b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/configs/ApplicantDetails.js
new file mode 100644
index 00000000000..b233acf6f5a
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/pages/employee/configs/ApplicantDetails.js
@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import { Dropdown } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+
+const ApplicantDetails = (channelMenu, channel, setChannel, disable = {}) => {
+ const { t } = useTranslation();
+ return {
+ head: t("ES_TITLE_APPLICANT_DETAILS"),
+ body: [
+ {
+ label: t("ES_NEW_APPLICATION_APPLICATION_CHANNEL"),
+ type: "dropdown",
+ populators: (
+ ({ ...vehicle, label: getVehicleType(vehicle, t) }))}
+ optionKey="label"
+ id="vehicle"
+ selected={vehicle}
+ select={setVehicle}
+ t={t}
+ />
+ ),
+ },
+ {
+ label: t("ES_NEW_APPLICATION_PAYMENT_NO_OF_TRIPS"),
+ type: "text",
+ populators: {
+ name: "noOfTrips",
+ error: t("ES_NEW_APPLICATION_NO_OF_TRIPS_INVALID"),
+ validation: { required: true },
+ // defaultValue: 1
+ // defaultValue: customizationConfig && Object.keys(customizationConfig).length > 0 ? customizationConfig?.noOfTrips?.default : 1,
+ },
+ disable: true,
+ // disable: customizationConfig ? !customizationConfig?.noOfTrips?.override : true,
+ },
+ {
+ label: t("ES_NEW_APPLICATION_AMOUNT_PER_TRIP"),
+ type: "text",
+ populators: {
+ name: "amountPerTrip",
+ error: t("ES_NEW_APPLICATION_AMOUNT_INVALID"),
+ validation: { required: true },
+ // defaultValue: vehicle?.amount,
+ },
+ disable: true,
+ // disable: customizationConfig ? !customizationConfig["additionalDetails.tripAmount"]?.override : true,
+ },
+ {
+ label: t("ES_PAYMENT_DETAILS_TOTAL_AMOUNT"),
+ type: "text",
+ populators: {
+ name: "amount",
+ validation: { required: true },
+ // defaultValue: paymentAmount,
+ },
+ disable: true,
+ },
+ ],
+ };
+};
+
+export default TripDetails;
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/propertyType.json b/frontend/micro-ui-internals/packages/modules/fsm/src/propertyType.json
new file mode 100644
index 00000000000..4945820a856
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/propertyType.json
@@ -0,0 +1,60 @@
+{
+ "tenantId": "pb",
+ "moduleName": "PropertyTax",
+ "propertyType": [
+ {
+ "name": "Residential",
+ "code": "Residential",
+ "active": true
+ },
+ {
+ "name": "Commercial",
+ "code": "Commercial",
+ "active": true
+ }
+ ],
+ "propertySubtype": [
+ {
+ "name": "Independent House",
+ "code": "Independent House"
+ },
+ {
+ "name": "Appartment",
+ "code": "Appartment"
+ },
+ {
+ "name": "Row House",
+ "code": "Row House"
+ }
+ ],
+ "PropertyType": [
+ {
+ "name": "CS_PROPERTY_TYPE_VACANT",
+ "code": "VACANT",
+ "active": true
+ },
+ {
+ "name": "CS_PROPERTY_TYPE_BUILTUP",
+ "code": "BUILTUP",
+ "active": true
+ },
+ {
+ "name": "ES_APPLICATION_DETAILS_PROPERTY_SUB_TYPE_BUILTUP.SHAREDPROPERTY",
+ "code": "BUILTUP.SHAREDPROPERTY",
+ "active": true,
+ "propertyType": "BUILTUP"
+ },
+ {
+ "name": "ES_APPLICATION_DETAILS_PROPERTY_SUB_TYPE_BUILTUP.INDEPENDENTPROPERTY",
+ "code": "BUILTUP.INDEPENDENTPROPERTY",
+ "active": true,
+ "propertyType": "BUILTUP"
+ },
+ {
+ "name": "ES_APPLICATION_DETAILS_PROPERTY_SUB_TYPE_VACANT.INDEPENDENTPROPERTY",
+ "code": "VACANT.INDEPENDENTPROPERTY",
+ "active": true,
+ "propertyType": "VACANT"
+ }
+ ]
+}
diff --git a/frontend/micro-ui-internals/packages/modules/fsm/src/utils/index.js b/frontend/micro-ui-internals/packages/modules/fsm/src/utils/index.js
new file mode 100644
index 00000000000..8f93bafae51
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/fsm/src/utils/index.js
@@ -0,0 +1,94 @@
+export const getPropertyTypeLocale = (value) => {
+ return `PROPERTYTYPE_MASTERS_${value?.split(".")[0]}`;
+};
+
+export const getPropertySubtypeLocale = (value) => `PROPERTYTYPE_MASTERS_${value}`;
+
+export const getVehicleType = (vehicle, t) => {
+ return (vehicle?.i18nKey && vehicle?.capacity && `${t(vehicle.i18nKey)} - ${vehicle.capacity} ${t("CS_COMMON_CAPACITY_LTRS")}`) || null;
+};
+
+export const updateConfiguration = ({ config, defaultConfig, detailsConfig, customConfiguration, isDefaultConfig }) => {
+ const fieldSectionNamesInsideConfig = [];
+ const detailsConfigCopy = { ...detailsConfig };
+
+ customConfiguration.forEach((detail) => {
+ // Adding custom fields to FieldSection fields array (body)
+ if (detailsConfigCopy[detail.name] && detail.addFields) {
+ detailsConfigCopy[detail.name].body.push(...detail.addFields);
+ }
+
+ let body = [];
+
+ // adding fields to body array
+ if (detail?.fieldsOrder?.length > 0) {
+ // fields order
+ detail.fieldsOrder.forEach((fieldName) => {
+ if (detailsConfigCopy[detail.name]) {
+ body.push(detailsConfigCopy[detail.name].body.find((value) => value.name === fieldName));
+ }
+ });
+
+ // adding remaining fields to the body array which are not in detail?.fieldsOrder
+ if (detail?.allFields) {
+ detailsConfigCopy[detail.name]?.body?.forEach((field) => {
+ if (!detail?.fieldsOrder?.includes(field.name)) {
+ body.push(detailsConfigCopy[detail.name].body.find((value) => value.name === field.name));
+ }
+ });
+ }
+ } else {
+ body = detailsConfigCopy[detail.name].body;
+ }
+
+ // remove fields
+ if (detail?.removeFields) {
+ detail?.removeFields?.forEach((fieldName) => {
+ body = body.filter((field) => field.name !== fieldName);
+ });
+ }
+
+ // adding FieldSection to config
+ if (detailsConfigCopy[detail.name]) {
+ config.push({
+ head: detailsConfigCopy[detail.name].head,
+ body,
+ });
+ fieldSectionNamesInsideConfig.push(detail.name);
+ }
+ });
+
+ // adding remaining FieldSection to config
+ if (isDefaultConfig) {
+ defaultConfig?.forEach((fieldSectionName) => {
+ if (!fieldSectionNamesInsideConfig.includes(fieldSectionName) && detailsConfigCopy[fieldSectionName]) {
+ config.push(detailsConfigCopy[fieldSectionName]);
+ fieldSectionNamesInsideConfig.push(fieldSectionName);
+ }
+ });
+ }
+};
+
+// How to use above updateConfiguration function
+// let config = [];
+
+// const defaultConfig = ["applicationDetails", "propertyDetails", "locationDetails", "paymentDetails"];
+
+// const { Customizations } = window.Digit;
+// let employeeCustomizations = false;
+
+// if (Customizations?.FSM?.getEmployeeApplicationCustomization) {
+// employeeCustomizations = Customizations?.FSM?.getEmployeeApplicationCustomization(defaultConfig, t);
+// }
+
+// if (employeeCustomizations?.config?.length > 0) {
+// updateConfiguration({
+// config,
+// defaultConfig,
+// detailsConfig,
+// customConfiguration: employeeCustomizations?.config,
+// isDefaultConfig: employeeCustomizations?.defaultConfig,
+// });
+// } else {
+// defaultConfig.forEach((fieldSectionName) => config.push(detailsConfig[fieldSectionName]));
+// }
diff --git a/frontend/micro-ui-internals/packages/modules/hrms/package.json b/frontend/micro-ui-internals/packages/modules/hrms/package.json
new file mode 100644
index 00000000000..16fea812e8b
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/hrms/package.json
@@ -0,0 +1,32 @@
+{
+ "name": "@egovernments/digit-ui-module-hrms",
+ "version": "1.3.0",
+ "description": "HRMS",
+ "license": "MIT",
+ "main": "dist/index.js",
+ "module": "dist/index.modern.js",
+ "source": "src/Module.js",
+ "files": [
+ "dist"
+ ],
+ "scripts": {
+ "start": "microbundle-crl watch --no-compress --format modern,cjs",
+ "build": "microbundle-crl --no-compress --format modern,cjs",
+ "prepublish": "yarn build"
+ },
+ "dependencies": {
+ "@egovernments/digit-ui-libraries": "^1.3.0",
+ "@egovernments/digit-ui-react-components": "^1.3.0",
+ "react": "^17.0.0",
+ "react-dom": "^17.0.0",
+ "react-hook-form": "^6.7.0",
+ "react-i18next": "^11.7.3",
+ "react-query": "^3.2.0",
+ "react-redux": "^7.2.1",
+ "react-router-dom": "^5.2.0",
+ "react-table": "^7.6.1",
+ "redux": "^4.0.5",
+ "redux-thunk": "^2.3.0",
+ "rooks": "^4.4.0"
+ }
+}
diff --git a/frontend/micro-ui-internals/packages/modules/hrms/src/Module.js b/frontend/micro-ui-internals/packages/modules/hrms/src/Module.js
new file mode 100644
index 00000000000..d74a7205b0b
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/hrms/src/Module.js
@@ -0,0 +1,104 @@
+import React from "react";
+import { Switch, useRouteMatch, useLocation, Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { PrivateRoute } from "@egovernments/digit-ui-react-components";
+import Inbox from "./pages/Inbox";
+import HRMSCard from "./components/hrmscard";
+import CreateEmployee from "./pages/createEmployee";
+import EditEmpolyee from "./pages/EditEmployee/index";
+import InboxFilter from "./components/InboxFilter";
+import Jurisdictions from "./components/pageComponents/jurisdiction";
+import Assignments from "./components/pageComponents/assignment";
+import SelectEmployeeId from "./components/pageComponents/SelectEmployeeId";
+import SelectDateofEmployment from "./components/pageComponents/SelectDateofEmployment";
+import SelectEmployeeType from "./components/pageComponents/SelectEmployeeType";
+import SelectEmployeePhoneNumber from "./components/pageComponents/EmployeePhoneNumber";
+import SelectEmployeeName from "./components/pageComponents/SelectEmployeeName";
+import SelectEmployeeEmailId from "./components/pageComponents/SelectEmailId";
+import SelectEmployeeCorrespondenceAddress from "./components/pageComponents/SelectEmployeeCorrespondenceAddress";
+import SelectEmployeeGender from "./components/pageComponents/SelectEmployeeGender";
+import SelectDateofBirthEmployment from "./components/pageComponents/EmployeeDOB";
+import Response from "./pages/Response";
+import HRBanner from "./components/pageComponents/Banner";
+import Details from "./pages/EmployeeDetails";
+import ActionModal from "./components/Modal";
+
+export const HRMSModule = ({ stateCode, userType, tenants }) => {
+ const moduleCode = "HR";
+ const language = Digit.StoreData.getCurrentLanguage();
+ const { isLoading, data: store } = Digit.Services.useStore({ stateCode, moduleCode, language });
+ const mobileView = innerWidth <= 640;
+ const location = useLocation();
+ const { t } = useTranslation();
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const inboxInitialState = {
+ searchParams: {
+ tenantId: tenantId,
+ },
+ };
+ Digit.SessionStorage.set("HRMS_TENANTS", tenants);
+
+ const { path, url } = useRouteMatch();
+
+ if (!Digit.Utils.hrmsAccess()) {
+ return null;
+ }
+ if (userType === "employee") {
+ return (
+
+
+
+
+ {location.pathname === "/digit-ui/employee/hrms/inbox" ? t("HR_COMMON_HEADER") : t("HR_COMMON_HEADER")}
+
+
(
+
+
+ );
+ } else return null;
+};
+
+const componentsToRegister = {
+ HRMSCard,
+ Details,
+ SelectEmployeeEmailId,
+ SelectEmployeeName,
+ SelectEmployeeId,
+ Jurisdictions,
+ Assignments,
+ ActionModal,
+ HRBanner,
+ SelectEmployeePhoneNumber,
+ SelectDateofEmployment,
+ SelectEmployeeType,
+ SelectEmployeeCorrespondenceAddress,
+ SelectEmployeeGender,
+ SelectDateofBirthEmployment,
+ HRMSModule,
+ HRMS_INBOX_FILTER: (props) => {props.label} ;
+ };
+
+ function selectReason(e) {
+ selecteReason(e);
+ }
+ const Close = () => (
+
+
+ );
+
+ const CloseBtn = (props) => {
+ return (
+
+
+ );
+ };
+
+ function selectFile(e) {
+ setFile(e.target.files[0]);
+ }
+ useEffect(() => {
+ setReasons(
+ data?.["egov-hrms"]?.DeactivationReason.map((ele) => {
+ ele["i18key"] = "EGOV_HRMS_DEACTIVATIONREASON_" + ele.code;
+ return ele;
+ })
+ );
+ }, [data]);
+
+ useEffect(() => {
+ (async () => {
+ setError(null);
+ if (file) {
+ if (file.size >= 5242880) {
+ setError(t("CS_MAXIMUM_UPLOAD_SIZE_EXCEEDED"));
+ } else {
+ try {
+ setUploadedFile(null);
+ const response = await Digit.UploadServices.Filestorage("HRMS", file, tenantId?.split(".")[0]);
+ if (response?.data?.files?.length > 0) {
+ setUploadedFile(response?.data?.files[0]?.fileStoreId);
+ } else {
+ setError(t("CS_FILE_UPLOAD_ERROR"));
+ }
+ } catch (err) {
+ setError(t("CS_FILE_UPLOAD_ERROR"));
+ }
+ }
+ }
+ })();
+ }, [file]);
+
+ function submit(data) {
+ // useHRMSUpdate
+ data.effectiveFrom = new Date(data.effectiveFrom).getTime();
+ data.reasonForDeactivation = selectedReason.code;
+ let Employees = [...applicationData.Employees];
+ if (action !== "ACTIVATE_EMPLOYEE_HEAD") {
+ if (file) {
+ let documents = {
+ referenceType: "DEACTIVATION",
+ documentId: uploadedFile,
+ documentName: file.name,
+ };
+ applicationData.Employees[0]["documents"].push(documents);
+ }
+
+ set(Employees[0], 'deactivationDetails[0].effectiveFrom', new Date()?.getTime());
+ set(Employees[0], 'deactivationDetails[0].orderNo', data?.orderNo);
+ set(Employees[0], 'deactivationDetails[0].reasonForDeactivation', data?.reasonForDeactivation);
+ set(Employees[0], 'deactivationDetails[0].remarks', data?.remarks);
+
+ Employees[0].isActive = false;
+ history.replace("/digit-ui/employee/hrms/response", { Employees, key: "UPDATE", action: "DEACTIVATION" });
+ } else {
+ if (file) {
+ let documents = {
+ referenceType: "ACTIVATION",
+ documentId: uploadedFile,
+ documentName: file.name,
+ };
+ applicationData.Employees[0]["documents"].push(documents);
+ }
+
+ set(Employees[0], 'reactivationDetails[0].effectiveFrom', new Date()?.getTime());
+ set(Employees[0], 'reactivationDetails[0].orderNo', data?.orderNo);
+ set(Employees[0], 'reactivationDetails[0].reasonForDeactivation', data?.reasonForDeactivation);
+ set(Employees[0], 'reactivationDetails[0].remarks', data?.remarks);
+ Employees[0].isActive = true;
+
+ history.replace("/digit-ui/employee/hrms/response", { Employees, key: "UPDATE", action: "ACTIVATION" });
+ }
+ }
+
+ return action && config?.form ? (
+
+
{lable}
+ {
select(value, key)} optionKey={optionKey} />}
+
+ {filters?.role?.length > 0 &&
+ filters?.role?.map((value, index) => {
+ return onRemove(index, key)} />;
+ })}
+
+
+
+
+
+
+
+
+
+
+
{t("HR_COMMON_FILTER")}: {" "}
+
+
+ {t("HR_COMMON_CLEAR_ALL")}
+
+ {props.type === "desktop" && (
+
+
+
+
+ )}
+ {props.type === "mobile" && (
+
+
+ )}
+
+
+
+
{t("HR_ULB_LABEL")}
+
x?.name?.localeCompare(y?.name)).map(city => { return { ...city, i18text: Digit.Utils.locale.getCityLocale(city.code) } })]}
+ selected={tenantId}
+ select={settenantId}
+ optionKey={"i18text"}
+ t={t}
+ />
+
+
+
{t("HR_COMMON_TABLE_COL_DEPT")}
+
+
+
+
+ {GetSelectOptions(
+ t("HR_COMMON_TABLE_COL_ROLE"),
+ Digit.Utils.locale.convertToLocaleData(data?.MdmsRes["ACCESSCONTROL-ROLES"]?.roles, 'ACCESSCONTROL_ROLES_ROLES', t),
+ selectedRoles,
+ onSelectRoles,
+ "i18text",
+ onRemove,
+ "role"
+ )}
+
+
+
+
{t("HR_EMP_STATUS_LABEL")}
+
+ {props.type !== "mobile" &&
+ onFilterChange(_searchParams)} label={t("HR_COMMON_APPLY")} />
+
}
+
+
+
+
+ {
+ onFilterChange(_searchParams)
+ props?.onClose?.()
+ }}
+ style={{ flex: 1 }}
+ />
+
+ )}
+
+ );
+};
+
+export default Filter;
diff --git a/frontend/micro-ui-internals/packages/modules/hrms/src/components/Modal/EmployeeActivation.js b/frontend/micro-ui-internals/packages/modules/hrms/src/components/Modal/EmployeeActivation.js
new file mode 100644
index 00000000000..9c063a88d34
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/hrms/src/components/Modal/EmployeeActivation.js
@@ -0,0 +1,71 @@
+import React from "react";
+import { UploadFile, Dropdown } from "@egovernments/digit-ui-react-components";
+import { convertEpochToDate } from "../Utils/index";
+
+export const configEmployeeActiveApplication = ({ t, action, selectFile, uploadedFile, setUploadedFile, selectedReason, Reasons, selectReason,employees={} }) => {
+ employees.deactivationDetails=employees?.deactivationDetails?.sort((y,x)=>x?.auditDetails?.createdDate-y?.auditDetails?.createdDate);
+ return {
+ label: {
+ heading: `HR_ACTIVATE_EMPLOYEE_HEAD`,
+ submit: `HR_ACTIVATE_EMPLOYEE_HEAD`,
+ },
+ form: [
+ {
+ body: [
+ {
+ label: t("HR_ACTIVATION_REASON"),
+ type: "dropdown",
+ isMandatory: true,
+ name: "reasonForDeactivation",
+ populators:
+ {t("TL_APPROVAL_UPLOAD_SUBHEAD")}
+ {
+ setUploadedFile(null);
+ }}
+ message={uploadedFile ? `1 ${t(`HR_ACTION_FILEUPLOADED`)}` : t(`HR_ACTION_NO_FILEUPLOADED`)}
+ />
+
+ ),
+ },
+
+ {
+ label: t("HR_REMARKS"),
+ type: "text",
+ populators: {
+ name: "remarks",
+ },
+ },
+ ],
+ },
+ ],
+ };
+};
diff --git a/frontend/micro-ui-internals/packages/modules/hrms/src/components/Modal/EmployeeAppliaction.js b/frontend/micro-ui-internals/packages/modules/hrms/src/components/Modal/EmployeeAppliaction.js
new file mode 100644
index 00000000000..6001bc5fb51
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/hrms/src/components/Modal/EmployeeAppliaction.js
@@ -0,0 +1,70 @@
+import React from "react";
+import { UploadFile, Dropdown } from "@egovernments/digit-ui-react-components";
+import { convertEpochToDate } from "../Utils/index";
+
+export const configEmployeeApplication = ({ t, action, selectFile, uploadedFile, setUploadedFile, selectedReason, Reasons, selectReason }) => {
+ return {
+ label: {
+ heading: `HR_DEACTIVATE_EMPLOYEE_HEAD`,
+ submit: `HR_DEACTIVATE_EMPLOYEE_HEAD`,
+ },
+ form: [
+ {
+ body: [
+ {
+ label: t("HR_DEACTIVATION_REASON"),
+ type: "dropdown",
+ isMandatory: true,
+ name: "reasonForDeactivation",
+ populators:
+ {t("TL_APPROVAL_UPLOAD_SUBHEAD")}
+ {
+ setUploadedFile(null);
+ }}
+ message={uploadedFile ? `1 ${t(`HR_ACTION_FILEUPLOADED`)}` : t(`HR_ACTION_NO_FILEUPLOADED`)}
+ />
+
+ ),
+ },
+
+ {
+ label: t("HR_REMARKS"),
+ type: "text",
+ populators: {
+ name: "remarks",
+ },
+ },
+ ],
+ },
+ ],
+ };
+};
diff --git a/frontend/micro-ui-internals/packages/modules/hrms/src/components/Modal/index.js b/frontend/micro-ui-internals/packages/modules/hrms/src/components/Modal/index.js
new file mode 100644
index 00000000000..624837a763a
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/hrms/src/components/Modal/index.js
@@ -0,0 +1,8 @@
+import React, { useState, useEffect } from "react";
+import EmployeeAction from "../EmployeeAction";
+
+const ActionModal = (props) => {
+ return
+ {t("CS_MYAPPLICATIONS_NO_APPLICATION")
+ .split("\\n")
+ .map((text, index) => (
+
+ {text}
+
+ ))}
+
+ );
+ } else if (data && data?.length > 0) {
+ result = (
+
+
+ {onSearch && (
+ {
+ setType("SEARCH");
+ setPopup(true);
+ }}
+ />
+ )}
+ {!isSearch && onFilterChange && (
+ {
+ setType("FILTER");
+ setPopup(true);
+ }}
+ />
+ )}
+ {/* {
+ setType("SORT");
+ setPopup(true);
+ }}
+ /> */}
+
+ {result}
+ {popup && (
+
+ {type === "FILTER" && (
+
+ {
+
+ )}
+ {type === "SEARCH" && (
+
+
+ )}
+
+ )}
+
+ );
+};
diff --git a/frontend/micro-ui-internals/packages/modules/hrms/src/components/inbox/ApplicationLinks.js b/frontend/micro-ui-internals/packages/modules/hrms/src/components/inbox/ApplicationLinks.js
new file mode 100644
index 00000000000..efd5a1a2633
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/hrms/src/components/inbox/ApplicationLinks.js
@@ -0,0 +1,43 @@
+import { Card, PersonIcon } from "@egovernments/digit-ui-react-components";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
+const InboxLinks = ({ parentRoute, businessService, allLinks, headerText }) => {
+ const { t } = useTranslation();
+ const [links, setLinks] = useState([]);
+ const { roles: userRoles } = Digit.UserService.getUser().info;
+ useEffect(() => {
+ let linksToShow = allLinks
+ .filter((e) => e.businessService === businessService)
+ .filter(({ roles }) => roles.some((e) => userRoles.map(({ code }) => code).includes(e)) || !roles.length);
+ setLinks(linksToShow);
+ }, []);
+
+ const GetLogo = () => (
+
+
+ {" "}
+
{t(headerText)}
+
+
+ {GetLogo()}
+
+ {links.map(({ link, text, hyperlink = false, accessTo = [] }, index) => {
+ return (
+
+ {hyperlink ? {t(text)} :
+ );
+ })}
+
+
+ );
+};
+
+export default InboxLinks;
\ No newline at end of file
diff --git a/frontend/micro-ui-internals/packages/modules/hrms/src/components/inbox/ApplicationTable.js b/frontend/micro-ui-internals/packages/modules/hrms/src/components/inbox/ApplicationTable.js
new file mode 100644
index 00000000000..cbb999d6b77
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/hrms/src/components/inbox/ApplicationTable.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { Table } from "@egovernments/digit-ui-react-components";
+
+const ApplicationTable = ({ t, columns, data, getCellProps, onNextPage, onPrevPage, currentPage, totalRecords, pageSizeLimit, onPageSizeChange }) => (
+
+);
+
+export default ApplicationTable;
diff --git a/frontend/micro-ui-internals/packages/modules/hrms/src/components/inbox/DesktopInbox.js b/frontend/micro-ui-internals/packages/modules/hrms/src/components/inbox/DesktopInbox.js
new file mode 100644
index 00000000000..b3d43865797
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/hrms/src/components/inbox/DesktopInbox.js
@@ -0,0 +1,189 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import ApplicationTable from "../inbox/ApplicationTable";
+import { Card, Loader } from "@egovernments/digit-ui-react-components";
+import InboxLinks from "../inbox/ApplicationLinks";
+import SearchApplication from "./search";
+import { Link } from "react-router-dom";
+
+const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
+ const { t } = useTranslation();
+ const tenantIds = Digit.SessionStorage.get("HRMS_TENANTS");
+ const GetCell = (value) => {t(value)} ;
+ const GetSlaCell = (value) => {
+ return value == "INACTIVE" ? { t(value )|| ""} : { t(value) || ""} ;
+ };
+ const data = props?.data?.Employees;
+
+ const [FilterComponent, setComp] = useState(() => Digit.ComponentRegistryService?.getComponent(filterComponent));
+
+ const columns = React.useMemo(() => {
+ return [
+ {
+ Header: t("HR_EMP_ID_LABEL"),
+ disableSortBy: true,
+ Cell: ({ row }) => {
+ return (
+
+
+ );
+ },
+ },
+ {
+ Header: t("HR_EMP_NAME_LABEL"),
+ disableSortBy: true,
+ Cell: ({ row }) => {
+ return GetCell(`${row.original?.user?.name}`);
+ },
+ },
+ {
+ Header: t("HR_ROLE_NO_LABEL"),
+ Cell: ({ row }) => {
+ return (
+
+ {" "}
+ {GetCell(`${row.original?.user?.roles.length}`)}
+
+ {row.original?.user?.roles.map((ele, index) => (
+
+ {`${index + 1}. ` + t(`ACCESSCONTROL_ROLES_ROLES_${ele.code}`)}
+ ))}
+
+
+ );
+ },
+ disableSortBy: true,
+ },
+ {
+ Header: t("HR_DESG_LABEL"),
+ disableSortBy: true,
+ Cell: ({ row }) => {
+ return GetCell(
+ `${
+ t(
+ "COMMON_MASTERS_DESIGNATION_" + row.original?.assignments?.sort((a, b) => new Date(a.fromDate) - new Date(b.fromDate))[0]?.designation
+ ) || ""
+ }`
+ );
+ },
+ },
+ {
+ Header: t("HR_DEPT_LABEL"),
+ disableSortBy: true,
+ Cell: ({ row }) => {
+ return GetCell(
+ `${
+ t(
+ "COMMON_MASTERS_DEPARTMENT_" + row.original?.assignments?.sort((a, b) => new Date(a.fromDate) - new Date(b.fromDate))[0]?.department
+ ) || ""
+ }`
+ );
+ },
+ },
+ {
+ Header: t("HR_STATUS_LABEL"),
+ disableSortBy: true,
+ Cell: ({ row }) => {
+ return GetSlaCell(`${row.original?.isActive ? "ACTIVE" : "INACTIVE"}`);
+ },
+ },
+ ];
+ }, []);
+
+ let result;
+ if (props.isLoading) {
+ result =
+ {/* TODO Change localization key */}
+ {t("COMMON_TABLE_NO_RECORD_FOUND")
+ .split("\\n")
+ .map((text, index) => (
+
+ {text}
+
+ ))}
+
+ );
+ } else if (data?.length > 0) {
+ result = (
+ {
+ return {
+ style: {
+ maxWidth: cellInfo.column.Header == t("HR_EMP_ID_LABEL") ? "150px" : "",
+ padding: "20px 18px",
+ fontSize: "16px",
+ minWidth: "150px",
+ },
+ };
+ }}
+ onPageSizeChange={props.onPageSizeChange}
+ currentPage={props.currentPage}
+ onNextPage={props.onNextPage}
+ onPrevPage={props.onPrevPage}
+ pageSizeLimit={props.pageSizeLimit}
+ onSort={props.onSort}
+ disableSort={props.disableSort}
+ onPageSizeChange={props.onPageSizeChange}
+ sortParams={props.sortParams}
+ totalRecords={props.totalRecords}
+ />
+ );
+ }
+
+ return (
+
+ {!props.isSearch && (
+
+ )}
+
+
{t(value)} ;
+const GetSlaCell = (value) => {
+ return value == "INACTIVE" ? { t(value )|| ""} : { t(value) || ""} ;
+};
+ const getData = () => {
+ return data?.Employees?.map((original) => ({
+ [t("HR_EMP_ID_LABEL")]: original?.code,
+ [t("HR_EMP_NAME_LABEL")]: GetCell(original?.user?.name || ""),
+ [t("HR_ROLE_NO_LABEL")]: GetCell(original?.user?.roles.length || ""),
+ [t("HR_DESG_LABEL")]: GetCell(t("COMMON_MASTERS_DESIGNATION_" +original?.assignments?.sort((a, b) => new Date(a.fromDate) - new Date(b.fromDate))[0]?.designation)),
+ [t("HR_DEPT_LABEL")]: GetCell(t(`COMMON_MASTERS_DEPARTMENT_${original?.assignments?.sort((a, b) => new Date(a.fromDate) - new Date(b.fromDate))[0]?.department}`)),
+ [t("HR_STATUS_LABEL")]: GetSlaCell(original?.isActive ? "ACTIVE" : "INACTIVE"),
+ }));
+ };
+ const serviceRequestIdKey = (original) => {return `${searchParams?.tenantId}/${original?.[t("HR_EMP_ID_LABEL")]}`};
+
+ return (
+
+
+
+ {/* {!isSearch &&
} */}
+
+
+
+
+ {t("HR_COMMON_CLEAR_SEARCH")}
+
+ );
+ };
+
+ return (
+
+ );
+};
+
+export default SearchApplication;
diff --git a/frontend/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/Banner.js b/frontend/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/Banner.js
new file mode 100644
index 00000000000..61307199b83
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/Banner.js
@@ -0,0 +1,15 @@
+import React, { useEffect, useState } from "react";
+import { CardLabel, LabelFieldPair } from "@egovernments/digit-ui-react-components";
+const HRBanner = ({ t, config }) => {
+ return (
+
+ {config?.texts?.nosideText!==true &&
+ .
+ }
+
+ {t(config?.texts?.header)}
+
+
+ );
+};
+export default HRBanner;
diff --git a/frontend/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/EmployeeDOB.js b/frontend/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/EmployeeDOB.js
new file mode 100644
index 00000000000..644f1867d4a
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/EmployeeDOB.js
@@ -0,0 +1,53 @@
+import React from "react";
+import { LabelFieldPair, CardLabel, TextInput, CardLabelError, DatePicker } from "@egovernments/digit-ui-react-components";
+import { useLocation } from "react-router-dom";
+import { convertEpochToDate } from "../Utils/index";
+
+const SelectDateofBirthEmployment = ({ t, config, onSelect, formData = {}, userType, register, errors }) => {
+ const { pathname: url } = useLocation();
+ // console.log("find errors here", errors)
+ const inputs = [
+ {
+ label: "HR_BIRTH_DATE_LABEL",
+ type: "date",
+ name: "dob",
+ validation: {
+ isRequired: true,
+ title: t("CORE_COMMON_APPLICANT_NAME_INVALID"),
+ },
+ isMandatory: true,
+ },
+ ];
+
+ function setValue(value, input) {
+ onSelect(config.key, { ...formData[config.key], [input]: value });
+ }
+ return (
+
+ {inputs?.map((input, index) => (
+
+ {errors[input.name] && {t(input.error)} }
+
+
+ {t(input.label)}
+ {input.isMandatory ? " * " : null}
+
+
+ setValue(e, input.name)}
+ disable={false}
+ max={convertEpochToDate(new Date().setFullYear(new Date().getFullYear() - 18))}
+ defaultValue={undefined}
+ {...input.validation}
+ />
+
+
+
+ ))}
+
+91
,
+ error: t("CORE_COMMON_MOBILE_ERROR"),
+ },
+ },
+ ];
+
+ function setValue(value, input) {
+ onSelect(config.key, { ...formData[config.key], [input]: value });
+ }
+ function validate(value, input) {
+ setError(!input.populators.validation.pattern.test(value));
+ }
+
+ return (
+
+ {inputs?.map((input, index) => (
+
+
+
+ {t(input.label)}
+ {input.isMandatory ? " * " : null}
+
+
+
+
+
+91
+
{ setValue(e.target.value, input.name,validate(e.target.value, input))}}
+ disable={false}
+ defaultValue={undefined}
+ onBlur={(e) => validate(e.target.value, input)}
+ {...input.validation}
+ />
+
+
{iserror ? {t(input.populators.error)} :
+ {t("HR_MOBILE_NO_CHECK")}
+ }
+
+
+
+ ))}
+
+ {inputs?.map((input, index) => (
+
+ {errors[input.name] && {t(input.error)} }
+
+
+ {t(input.label)}
+ {input.isMandatory ? " * " : null}
+
+
+ setValue(e, input.name)}
+ disable={false}
+ {...input.validation}
+ defaultValue={undefined}
+ />
+
+
+
+ ))}
+
+ {inputs?.map((input, index) => {
+ let currentValue=formData && formData[config.key] && formData[config.key][input.name]||'';
+ return(
+ {errors[input.name] && {t(input.error)} }
+
+
+ {t(input.label)}
+ {input.isMandatory ? " * " : null}
+
+
+ setValue(e.target.value, input.name)}
+ disable={false}
+ defaultValue={undefined}
+ {...input.validation}
+ />
+ {currentValue&¤tValue.length>0&&!currentValue.match(Digit.Utils.getPattern('Email'))&&{t("CS_PROFILE_EMAIL_ERRORMSG")} }
+
+
+
+ )})}
+
+ {inputs?.map((input, index) => {
+ let currentValue=formData && formData[config.key] && formData[config.key][input.name]||'';
+ return(
+ {errors[input.name] && {t(input.error)} }
+
+
+ {t(input.label)}
+ {input.isMandatory ? " * " : null}
+
+
+ setValue(e.target.value, input.name)}
+ disable={false}
+ defaultValue={undefined}
+ {...input.validation}
+ />
+ {currentValue&¤tValue.length>0&&!currentValue.match(Digit.Utils.getPattern('Address'))&&{t("CORE_COMMON_APPLICANT_ADDRESS_INVALID")} }
+
+
+
+ )})}
+
+ {inputs?.map((input, index) => (
+
+ {errors[input.name] && {t(input.error)} }
+
+
+ {t(input.label)}
+ {input.isMandatory ? " * " : null}
+
+
+ setValue(e, input.name)}
+ disable={false}
+ defaultValue={undefined}
+ t={t}
+ {...input.validation}
+ />
+
+
+
+ ))}
+
+ {inputs?.map((input, index) => (
+
+ {errors[input.name] && {t(input.error)} }
+
+
+ {t(input.label)}
+ {input.isMandatory ? " * " : null}
+
+
+ setValue(e.target.value, input.name)}
+ disable={isEdit}
+ defaultValue={undefined}
+ {...input.validation}
+ />
+
+
+
+ ))}
+
+ {inputs?.map((input, index) => {
+ let currentValue=formData && formData[config.key] && formData[config.key][input.name]||'';
+ return(
+ {errors[input.name] && {t(input.error)} }
+
+
+ {t(input.label)}
+ {input.isMandatory ? " * " : null}
+
+
+ setValue(e.target.value, input.name)}
+ disable={false}
+ defaultValue={undefined}
+ {...input.validation}
+ />
+ {currentValue&¤tValue.length>0&&!currentValue.match(Digit.Utils.getPattern('Name'))&&{t("CORE_COMMON_APPLICANT_NAME_INVALID")} }
+
+
+
+ )})}
+
+
+ {t(input.label)}
+ {input.isMandatory ? " * " : null}
+
+
+ );
+ });
+};
+
+export default SelectEmployeeType;
diff --git a/frontend/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/assignment.js b/frontend/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/assignment.js
new file mode 100644
index 00000000000..0181378dc18
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/assignment.js
@@ -0,0 +1,281 @@
+import { CardLabel, CheckBox, DatePicker, Dropdown, LabelFieldPair, Loader } from "@egovernments/digit-ui-react-components";
+import React, { useEffect, useState } from "react";
+import cleanup from "../Utils/cleanup";
+import { convertEpochToDate } from "../Utils/index";
+
+const Assignments = ({ t, config, onSelect, userType, formData }) => {
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const { data: data = {}, isLoading } = Digit.Hooks.hrms.useHrmsMDMS(tenantId, "egov-hrms", "HRMSRolesandDesignation") || {};
+ const [currentassignemtDate, setCurrentAssiginmentDate] = useState(null);
+ const [assignments, setassignments] = useState(
+ formData?.Assignments || [
+ {
+ key: 1,
+ fromDate: undefined,
+ toDate: undefined,
+ isCurrentAssignment: false,
+ department: null,
+ designation: null,
+ },
+ ]
+ );
+ const reviseIndexKeys = () => {
+ setassignments((prev) => prev.map((unit, index) => ({ ...unit, key: index })));
+ };
+
+ const handleAddUnit = () => {
+ setassignments((prev) => [
+ ...prev,
+ {
+ key: prev.length + 1,
+ fromDate: undefined,
+ toDate: undefined,
+ isCurrentAssignment: false,
+ department: null,
+ designation: null,
+ },
+ ]);
+ };
+
+ const handleRemoveUnit = (unit) => {
+ setassignments((prev) => prev.filter((el) => el.key !== unit.key));
+ if (FormData.errors?.Assignments?.type == unit.key) {
+ clearErrors("Jurisdictions");
+ }
+ reviseIndexKeys();
+ };
+
+ useEffect(() => {
+ var promises = assignments?.map((assignment) => {
+ return assignment
+ ? cleanup({
+ id: assignment?.id,
+ position: assignment?.position,
+ govtOrderNumber: assignment?.govtOrderNumber,
+ tenantid: assignment?.tenantid,
+ auditDetails: assignment?.auditDetails,
+ fromDate: assignment?.fromDate ? new Date(assignment?.fromDate).getTime() : undefined,
+ toDate: assignment?.toDate ? new Date(assignment?.toDate).getTime() : undefined,
+ isCurrentAssignment: assignment?.isCurrentAssignment,
+ department: assignment?.department?.code,
+ designation: assignment?.designation?.code,
+ })
+ : [];
+ });
+
+ Promise.all(promises).then(function (results) {
+ onSelect(
+ config.key,
+ results.filter((value) => Object.keys(value).length !== 0)
+ );
+ });
+
+ assignments.map((ele) => {
+ if (ele.isCurrentAssignment) {
+ setCurrentAssiginmentDate(ele.fromDate);
+ }
+ });
+ }, [assignments]);
+
+ let department = [];
+ let designation = [];
+ const [focusIndex, setFocusIndex] = useState(-1);
+
+ function getdepartmentdata() {
+ return data?.MdmsRes?.["common-masters"]?.Department.map((ele) => {
+ ele["i18key"] = t("COMMON_MASTERS_DEPARTMENT_" + ele.code);
+ return ele;
+ });
+ }
+ function getdesignationdata() {
+ return data?.MdmsRes?.["common-masters"]?.Designation.map((ele) => {
+ ele["i18key"] = t("COMMON_MASTERS_DESIGNATION_" + ele.code);
+ return ele;
+ });
+ }
+ if (isLoading) {
+ return
+ {assignments?.map((assignment, index) => (
+
+ ))}
+
+ {t("HR_ADD_ASSIGNMENT")}
+
+
+
+
+
+
+ {t("HR_ASSIGNMENT")} {index + 1}
+
+
+ {assignments.length > 1 && !assignment?.id && !assignment?.isCurrentAssignment ? (
+ handleRemoveUnit(assignment)} style={{ marginBottom: "16px", padding: "5px", cursor: "pointer", textAlign: "right" }}>
+ X
+
+ ) : null}
+
+
+
+ {`${t("HR_ASMT_FROM_DATE_LABEL")} * `}
+
+ {
+ setassignments((pre) => pre.map((item) => (item.key === assignment.key ? { ...item, fromDate: e } : item)));
+ setFocusIndex(index);
+ }}
+ date={assignment?.fromDate}
+ autoFocus={focusIndex === index}
+ />
+
+
+
+
+ {t("HR_ASMT_TO_DATE_LABEL")}
+ {assignment?.isCurrentAssignment ? "" : " * "}{" "}
+
+
+ {
+ setassignments((pre) => pre.map((item) => (item.key === assignment.key ? { ...item, toDate: e } : item)));
+ setFocusIndex(index);
+ }}
+ date={assignment?.toDate}
+ autoFocus={focusIndex === index}
+ />
+
+
+
+
+
+ .
+
+
+ onAssignmentChange(e.target.checked)}
+ checked={assignment?.isCurrentAssignment}
+ label={t("HR_CURRENTLY_ASSIGNED_HERE_SWITCH_LABEL")}
+ />
+
+
+
+ {`${t("HR_DEPT_LABEL")} * `}
+
+
+
+ {`${t("HR_DESG_LABEL")} * `}
+
+
+
+ {jurisdictions?.map((jurisdiction, index) => (
+
+ {t("HR_ADD_JURISDICTION")}
+
+
+ );
+};
+function Jurisdiction({
+ t,
+ data,
+ jurisdiction,
+ jurisdictions,
+ setjurisdictions,
+ gethierarchylistdata,
+ handleRemoveUnit,
+ hierarchylist,
+ getroledata,
+ roleoption,
+ index,
+}) {
+ const [BoundaryType, selectBoundaryType] = useState([]);
+ const [Boundary, selectboundary] = useState([]);
+ useEffect(() => {
+ selectBoundaryType(
+ data?.MdmsRes?.["egov-location"]["TenantBoundary"]
+ .filter((ele) => {
+ return ele?.hierarchyType?.code == jurisdiction?.hierarchy?.code;
+ })
+ .map((item) => { return { ...item.boundary, i18text: Digit.Utils.locale.convertToLocale(item.boundary.label, 'EGOV_LOCATION_BOUNDARYTYPE') } })
+ );
+ }, [jurisdiction?.hierarchy, data?.MdmsRes]);
+ const tenant = Digit.ULBService.getCurrentTenantId();
+ useEffect(() => {
+ selectboundary(data?.MdmsRes?.tenant?.tenants.filter(city => city.code != tenant.split('.')[0]).map(city => { return { ...city, i18text: Digit.Utils.locale.getCityLocale(city.code) } }));
+ }, [jurisdiction?.boundaryType, data?.MdmsRes]);
+
+ useEffect(() => {
+ if (Boundary?.length > 0) {
+ selectedboundary(Boundary?.filter((ele) => ele.code == jurisdiction?.boundary?.code)[0]);
+ }
+ }, [Boundary]);
+
+ const selectHierarchy = (value) => {
+ setjurisdictions((pre) => pre.map((item) => (item.key === jurisdiction.key ? { ...item, hierarchy: value } : item)));
+ };
+
+ const selectboundaryType = (value) => {
+ setjurisdictions((pre) => pre.map((item) => (item.key === jurisdiction.key ? { ...item, boundaryType: value } : item)));
+ };
+
+ const selectedboundary = (value) => {
+ setjurisdictions((pre) => pre.map((item) => (item.key === jurisdiction.key ? { ...item, boundary: value } : item)));
+ };
+
+ const selectrole = (e, data) => {
+ const index = jurisdiction?.roles.filter((ele) => ele.code == data.code);
+ let res = null;
+ if (index.length) {
+ jurisdiction?.roles.splice(jurisdiction?.roles.indexOf(index[0]), 1);
+ res = jurisdiction.roles;
+ } else {
+ res = [{ ...data }, ...jurisdiction?.roles];
+ }
+
+ // if (checked) selectULB(data.code);
+ setjurisdictions((pre) => pre.map((item) => (item.key === jurisdiction.key ? { ...item, roles: res } : item)));
+ };
+
+
+ const onRemove = (index, key) => {
+ let afterRemove = jurisdiction?.roles.filter((value, i) => {
+ return i !== index;
+ });
+ setjurisdictions((pre) => pre.map((item) => (item.key === jurisdiction.key ? { ...item, roles: afterRemove } : item)));
+
+ };
+ return (
+
+
+
+
+
+ {t("HR_JURISDICTION")} {index + 1}
+
+
+ {jurisdictions.length > 1 ? (
+ handleRemoveUnit(jurisdiction)}
+ style={{ marginBottom: "16px", padding: "5px", cursor: "pointer", textAlign: "right" }}
+ >
+ X
+
+ ) : null}
+
+
+ {`${t("HR_HIERARCHY_LABEL")} * `}
+
+
+ {`${t("HR_BOUNDARY_TYPE_LABEL")} * `}
+
+
+ {`${t("HR_BOUNDARY_LABEL")} * `}
+
+
+
+ {t("HR_COMMON_TABLE_COL_ROLE")} *
+
+
+
+ {jurisdiction?.roles.length > 0 &&
+ jurisdiction?.roles.map((value, index) => {
+ return onRemove(index, value)} />;
+ })}
+
+
+
+
+ {
+ return {
+ ...config,
+ body: config.body.filter((a) => !a.hideInEmployee),
+ };
+ })}
+ fieldStyle={{ marginRight: 0 }}
+ onSubmit={onSubmit}
+ defaultValues={defaultValues}
+ onFormValueChange={onFormValueChange}
+ /> {showToast && (
+ {
+ setShowToast(null);
+ }}
+ />
+ )}
+
+ );
+};
+export default EditForm;
diff --git a/frontend/micro-ui-internals/packages/modules/hrms/src/pages/EditEmployee/index.js b/frontend/micro-ui-internals/packages/modules/hrms/src/pages/EditEmployee/index.js
new file mode 100644
index 00000000000..2cfa645c1be
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/hrms/src/pages/EditEmployee/index.js
@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+import { useParams } from "react-router-dom";
+import EditForm from "./EditForm";
+import { Loader } from "@egovernments/digit-ui-react-components";
+const EditEmpolyee = ({ parentUrl, heading }) => {
+ const isupdate = Digit.SessionStorage.get("isupdate");
+ const { id: employeeId } = useParams();
+ const { tenantId: tenantId } = useParams();
+ const { isLoading, isError, error, data, ...rest } = Digit.Hooks.hrms.useHRMSSearch({ codes: employeeId }, tenantId, isupdate);
+ if (isLoading) {
+ return
+
+ {t("HR_NEW_EMPLOYEE_FORM_HEADER")}
+
+ {!isLoading && data?.Employees.length > 0 ? (
+
+
+
+ {t("HR_EMP_STATUS_LABEL")} }
+ text={
+ data?.Employees?.[0]?.isActive ? {t("ACTIVE")}
: {t("INACTIVE")}
+ }
+ textStyle={{ fontWeight: "bold", maxWidth: "6.5rem" }}
+ />
+
+ {t("HR_PERSONAL_DETAILS_FORM_HEADER")}
+
+ |
+ |
+ |
+ |
+ |
+
+ {t("HR_NEW_EMPLOYEE_FORM_HEADER")}
+
+ |
+ |
+ |
+
+ {data?.Employees?.[0]?.isActive == false ? (
+
+ new Date(a.effectiveFrom) - new Date(b.effectiveFrom))[0]?.effectiveFrom
+ )}
+ />
+ new Date(a.effectiveFrom) - new Date(b.effectiveFrom))[0]
+ .reasonForDeactivation) || "NA"
+ }
+ />
+ new Date(a.effectiveFrom) - new Date(b.effectiveFrom))[0].remarks || "NA"
+ }
+ />
+
+ new Date(a.effectiveFrom) - new Date(b.effectiveFrom))[0]?.orderNo || "NA"}
+ />
+
+ ) : null}
+
+ {data?.Employees?.[0]?.documents ?
+ |
+
+
+ : null}
+ {data?.Employees?.[0]?.jurisdictions.length > 0 ? (
+ {t("HR_JURIS_DET_HEADER")}
+ ) : null}
+
+ {data?.Employees?.[0]?.jurisdictions?.length > 0
+ ? data?.Employees?.[0]?.jurisdictions.map((element, index) => {
+ return (
+
+
+ {" "}
+ {t("HR_JURISDICTION")} {index + 1}
+
+ |
+ |
+ |
+ ele.tenantId == element?.boundary).map((ele) => t(`ACCESSCONTROL_ROLES_ROLES_` + ele?.code))}
+ />
+
+ );
+ })
+ : null}
+ {data?.Employees?.[0]?.assignments.length > 0 ? (
+ {t("HR_ASSIGN_DET_HEADER")}
+ ) : null}
+ {data?.Employees?.[0]?.assignments.map((element, index) => (
+
+
+ {t("HR_ASSIGNMENT")} {index + 1}
+
+ |
+ |
+ |
+ |
+
+ ))}
+
+
+ {displayMenu && data ? (
+ setDisplayMenu(!displayMenu)} />
+
+
+ );
+};
+
+export default Details;
diff --git a/frontend/micro-ui-internals/packages/modules/hrms/src/pages/Inbox.js b/frontend/micro-ui-internals/packages/modules/hrms/src/pages/Inbox.js
new file mode 100644
index 00000000000..6963bd12256
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/hrms/src/pages/Inbox.js
@@ -0,0 +1,154 @@
+import { Header, Loader } from "@egovernments/digit-ui-react-components";
+import React, { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import DesktopInbox from "../components/inbox/DesktopInbox";
+import MobileInbox from "../components/inbox/MobileInbox";
+
+const Inbox = ({ parentRoute, businessService = "HRMS", initialStates = {}, filterComponent, isInbox }) => {
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const { isLoading: isLoading, Errors, data: res } = Digit.Hooks.hrms.useHRMSCount(tenantId);
+
+ const { t } = useTranslation();
+ const [pageOffset, setPageOffset] = useState(initialStates.pageOffset || 0);
+ const [pageSize, setPageSize] = useState(initialStates.pageSize || 10);
+ const [sortParams, setSortParams] = useState(initialStates.sortParams || [{ id: "createdTime", desc: false }]);
+ const [totalRecords, setTotalReacords] = useState(undefined);
+ const [searchParams, setSearchParams] = useState(() => {
+ return initialStates.searchParams || {};
+ });
+
+ let isMobile = window.Digit.Utils.browser.isMobile();
+ let paginationParams = isMobile
+ ? { limit: 100, offset: pageOffset, sortOrder: sortParams?.[0]?.desc ? "DESC" : "ASC" }
+ : { limit: pageSize, offset: pageOffset, sortOrder: sortParams?.[0]?.desc ? "DESC" : "ASC" };
+ const isupdate = Digit.SessionStorage.get("isupdate");
+ const { isLoading: hookLoading, isError, error, data, ...rest } = Digit.Hooks.hrms.useHRMSSearch(
+ searchParams,
+ tenantId,
+ paginationParams,
+ isupdate
+ );
+
+ useEffect(() => {
+ // setTotalReacords(res?.EmployeCount?.totalEmployee);
+ }, [res]);
+
+ useEffect(() => {}, [hookLoading, rest]);
+
+ useEffect(() => {
+ setPageOffset(0);
+ }, [searchParams]);
+
+ const fetchNextPage = () => {
+ setPageOffset((prevState) => prevState + pageSize);
+ };
+
+ const fetchPrevPage = () => {
+ setPageOffset((prevState) => prevState - pageSize);
+ };
+
+ const handleFilterChange = (filterParam) => {
+ let keys_to_delete = filterParam.delete;
+ let _new = { ...searchParams, ...filterParam };
+ if (keys_to_delete) keys_to_delete.forEach((key) => delete _new[key]);
+ filterParam.delete;
+ delete _new.delete;
+ setSearchParams({ ..._new });
+ };
+
+ const handleSort = useCallback((args) => {
+ if (args.length === 0) return;
+ setSortParams(args);
+ }, []);
+
+ const handlePageSizeChange = (e) => {
+ setPageSize(Number(e.target.value));
+ };
+
+ const getSearchFields = () => {
+ return [
+ {
+ label: t("HR_NAME_LABEL"),
+ name: "names",
+ },
+ {
+ label: t("HR_MOB_NO_LABEL"),
+ name: "phone",
+ maxlength: 10,
+ pattern: "[6-9][0-9]{9}",
+ title: t("ES_SEARCH_APPLICATION_MOBILE_INVALID"),
+ componentInFront: "+91",
+ },
+ {
+ label: t("HR_EMPLOYEE_ID_LABEL"),
+ name: "codes",
+ },
+ ];
+ };
+
+ if (isLoading) {
+ return
+ );
+ } else {
+ return (
+
+ {isInbox && {t("HR_HOME_SEARCH_RESULTS_HEADING")} }
+
+ );
+ }
+ }
+};
+
+export default Inbox;
diff --git a/frontend/micro-ui-internals/packages/modules/hrms/src/pages/Response.js b/frontend/micro-ui-internals/packages/modules/hrms/src/pages/Response.js
new file mode 100644
index 00000000000..34dc660794a
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/hrms/src/pages/Response.js
@@ -0,0 +1,106 @@
+import React, { useEffect } from "react";
+import { Card, Banner, CardText, SubmitBar, Loader, LinkButton, ActionBar } from "@egovernments/digit-ui-react-components";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+const GetMessage = (type, action, isSuccess, isEmployee, t) => {
+ return t(`EMPLOYEE_RESPONSE_${action ? action : "CREATE"}_${type}${isSuccess ? "" : "_ERROR"}`);
+};
+
+const GetActionMessage = (action, isSuccess, isEmployee, t) => {
+ return GetMessage("ACTION", action, isSuccess, isEmployee, t);
+};
+
+const GetLabel = (action, isSuccess, isEmployee, t) => {
+ if (isSuccess) {
+ return t("HR_EMPLOYEE_ID_LABEL");
+ }
+ // return GetMessage("LABEL", action, isSuccess, isEmployee, t);
+};
+
+const BannerPicker = (props) => {
+ return (
+
+ {t(DisplayText(state.action, mutation.isSuccess || !!successData, props.parentRoute.includes("employee"), t), t)}
+
+
+
+
+ );
+};
+
+export default Response;
diff --git a/frontend/micro-ui-internals/packages/modules/hrms/src/pages/createEmployee.js b/frontend/micro-ui-internals/packages/modules/hrms/src/pages/createEmployee.js
new file mode 100644
index 00000000000..501fb82c850
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/hrms/src/pages/createEmployee.js
@@ -0,0 +1,205 @@
+import { FormComposer, Toast } from "@egovernments/digit-ui-react-components";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import { newConfig } from "../components/config/config";
+
+const CreateEmployee = () => {
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const [canSubmit, setSubmitValve] = useState(false);
+ const [mobileNumber, setMobileNumber] = useState(null);
+ const [showToast, setShowToast] = useState(null);
+ const [phonecheck, setPhonecheck] = useState(false);
+ const [checkfield, setcheck] = useState(false)
+ const { t } = useTranslation();
+ const history = useHistory();
+
+ const [mutationHappened, setMutationHappened, clear] = Digit.Hooks.useSessionStorage("EMPLOYEE_HRMS_MUTATION_HAPPENED", false);
+ const [errorInfo, setErrorInfo, clearError] = Digit.Hooks.useSessionStorage("EMPLOYEE_HRMS_ERROR_DATA", false);
+ const [successData, setsuccessData, clearSuccessData] = Digit.Hooks.useSessionStorage("EMPLOYEE_HRMS_MUTATION_SUCCESS_DATA", false);
+
+ useEffect(() => {
+ setMutationHappened(false);
+ clearSuccessData();
+ clearError();
+ }, []);
+
+ const checkMailNameNum = (formData) => {
+
+ const email = formData?.SelectEmployeeEmailId?.emailId || '';
+ const name = formData?.SelectEmployeeName?.employeeName || '';
+ const address = formData?.SelectEmployeeCorrespondenceAddress?.correspondenceAddress || '';
+ const validEmail = email.length == 0 ? true : email.match(Digit.Utils.getPattern('Email'));
+ return validEmail && name.match(Digit.Utils.getPattern('Name')) && address.match(Digit.Utils.getPattern('Address'));
+ }
+ useEffect(() => {
+ if (mobileNumber && mobileNumber.length == 10 && mobileNumber.match(Digit.Utils.getPattern('MobileNo'))) {
+ setShowToast(null);
+ Digit.HRMSService.search(tenantId, null, { phone: mobileNumber }).then((result, err) => {
+ if (result.Employees.length > 0) {
+ setShowToast({ key: true, label: "ERR_HRMS_USER_EXIST_MOB" });
+ setPhonecheck(false);
+ } else {
+ setPhonecheck(true);
+ }
+ });
+ } else {
+ setPhonecheck(false);
+ }
+ }, [mobileNumber]);
+
+ const defaultValues = {
+
+ Jurisdictions:
+ [{
+ id: undefined,
+ key: 1,
+ hierarchy: null,
+ boundaryType: null,
+ boundary: {
+ code: tenantId
+ },
+ roles: [],
+ }]
+ }
+
+
+ const onFormValueChange = (setValue = true, formData) => {
+ if (formData?.SelectEmployeePhoneNumber?.mobileNumber) {
+ setMobileNumber(formData?.SelectEmployeePhoneNumber?.mobileNumber);
+ } else {
+ setMobileNumber(formData?.SelectEmployeePhoneNumber?.mobileNumber);
+ }
+ for (let i = 0; i < formData?.Jurisdictions?.length; i++) {
+ let key = formData?.Jurisdictions[i];
+ if (!(key?.boundary && key?.boundaryType && key?.hierarchy && key?.tenantId && key?.roles?.length > 0)) {
+ setcheck(false);
+ break;
+ } else {
+ setcheck(true);
+ }
+ }
+
+ let setassigncheck = false;
+ for (let i = 0; i < formData?.Assignments?.length; i++) {
+ let key = formData?.Assignments[i];
+ if (
+ !(key.department && key.designation && key.fromDate && (formData?.Assignments[i].toDate || formData?.Assignments[i]?.isCurrentAssignment))
+ ) {
+ setassigncheck = false;
+ break;
+ } else if (formData?.Assignments[i].toDate == null && formData?.Assignments[i]?.isCurrentAssignment == false) {
+ setassigncheck = false;
+ break;
+ } else {
+ setassigncheck = true;
+ }
+ }
+ if (
+ formData?.SelectDateofEmployment?.dateOfAppointment &&
+ formData?.SelectEmployeeCorrespondenceAddress?.correspondenceAddress &&
+ formData?.SelectEmployeeGender?.gender.code &&
+ formData?.SelectEmployeeName?.employeeName &&
+ formData?.SelectEmployeeType?.code &&
+ formData?.SelectEmployeePhoneNumber?.mobileNumber &&
+ checkfield &&
+ setassigncheck &&
+ phonecheck &&
+ checkMailNameNum(formData)
+ ) {
+ setSubmitValve(true);
+ } else {
+ setSubmitValve(false);
+ }
+ };
+
+ const navigateToAcknowledgement = (Employees) => {
+ history.replace("/digit-ui/employee/hrms/response", { Employees, key: "CREATE", action: "CREATE" });
+ }
+
+
+ const onSubmit = (data) => {
+ if (data.Jurisdictions.filter(juris => juris.tenantId == tenantId).length == 0) {
+ setShowToast({ key: true, label: "ERR_BASE_TENANT_MANDATORY" });
+ return;
+ }
+ if (!Object.values(data.Jurisdictions.reduce((acc, sum) => {
+ if (sum && sum?.tenantId) {
+ acc[sum.tenantId] = acc[sum.tenantId] ? acc[sum.tenantId] + 1 : 1;
+ }
+ return acc;
+ }, {})).every(s => s == 1)) {
+ setShowToast({ key: true, label: "ERR_INVALID_JURISDICTION" });
+ return;
+ }
+ let roles = data?.Jurisdictions?.map((ele) => {
+ return ele.roles?.map((item) => {
+ item["tenantId"] = ele.boundary;
+ return item;
+ });
+ });
+
+ const mappedroles = [].concat.apply([], roles);
+ let Employees = [
+ {
+ tenantId: tenantId,
+ employeeStatus: "EMPLOYED",
+ assignments: data?.Assignments,
+ code: data?.SelectEmployeeId?.code ? data?.SelectEmployeeId?.code : undefined,
+ dateOfAppointment: new Date(data?.SelectDateofEmployment?.dateOfAppointment).getTime(),
+ employeeType: data?.SelectEmployeeType?.code,
+ jurisdictions: data?.Jurisdictions,
+ user: {
+ mobileNumber: data?.SelectEmployeePhoneNumber?.mobileNumber,
+ name: data?.SelectEmployeeName?.employeeName,
+ correspondenceAddress: data?.SelectEmployeeCorrespondenceAddress?.correspondenceAddress,
+ emailId: data?.SelectEmployeeEmailId?.emailId ? data?.SelectEmployeeEmailId?.emailId : undefined,
+ gender: data?.SelectEmployeeGender?.gender.code,
+ dob: new Date(data?.SelectDateofBirthEmployment?.dob).getTime(),
+ roles: mappedroles,
+ tenantId: tenantId,
+ },
+ serviceHistory: [],
+ education: [],
+ tests: [],
+ },
+ ];
+ if (data?.SelectEmployeeId?.code && data?.SelectEmployeeId?.code?.trim().length > 0) {
+ Digit.HRMSService.search(tenantId, null, { codes: data?.SelectEmployeeId?.code }).then((result, err) => {
+ if (result.Employees.length > 0) {
+ setShowToast({ key: true, label: "ERR_HRMS_USER_EXIST_ID" });
+ return;
+ } else {
+ navigateToAcknowledgement(Employees);
+ }
+ });
+ } else {
+ navigateToAcknowledgement(Employees);
+ }
+ };
+
+ const config = newConfig;
+ return (
+
+ {
+ setShowToast(null);
+ }}
+ />
+ )}
+
+ );
+};
+export default CreateEmployee;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/package.json b/frontend/micro-ui-internals/packages/modules/mCollect/package.json
new file mode 100644
index 00000000000..40d1471e8ad
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/package.json
@@ -0,0 +1,35 @@
+{
+ "name": "@egovernments/digit-ui-module-mcollect",
+ "version": "1.3.0",
+ "license": "MIT",
+ "main": "dist/index.js",
+ "module": "dist/index.modern.js",
+ "source": "src/Module.js",
+ "files": [
+ "dist"
+ ],
+ "scripts": {
+ "start": "microbundle-crl watch --no-compress --format modern,cjs",
+ "build": "microbundle-crl --no-compress --format modern,cjs",
+ "prepublish": "yarn build"
+ },
+ "peerDependencies": {
+ "react": "^17.0.0",
+ "react-router-dom": "^5.2.0"
+ },
+ "dependencies": {
+ "@egovernments/digit-ui-libraries": "^1.3.0",
+ "@egovernments/digit-ui-react-components": "^1.3.0",
+ "lodash.merge": "^4.6.2",
+ "react": "^17.0.0",
+ "react-dom": "^17.0.0",
+ "react-hook-form": "^6.7.0",
+ "react-i18next": "^11.7.3",
+ "react-query": "^3.2.0",
+ "react-redux": "^7.2.1",
+ "react-router-dom": "^5.2.0",
+ "react-table": "^7.6.1",
+ "redux": "^4.0.5",
+ "redux-thunk": "^2.3.0"
+ }
+}
\ No newline at end of file
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/EmployeeChallan.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/EmployeeChallan.js
new file mode 100755
index 00000000000..7ad6567c42b
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/EmployeeChallan.js
@@ -0,0 +1,215 @@
+import { Card, CardSubHeader, Header, Row, StatusTable, SubmitBar, ActionBar, Menu, Toast } from "@egovernments/digit-ui-react-components";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useParams, useHistory, useRouteMatch } from "react-router-dom";
+import { stringReplaceAll, convertEpochToDate } from "./utils";
+import ActionModal from "./components/Modal";
+import { downloadAndPrintChallan, downloadAndPrintReciept } from "./utils";
+
+const EmployeeChallan = (props) => {
+ const { t } = useTranslation();
+ const { challanno } = useParams();
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const [challanBillDetails, setChallanBillDetails] = useState([]);
+ const [totalDueAmount, setTotalDueAmount] = useState(0);
+
+ const [displayMenu, setDisplayMenu] = useState(false);
+ const [showModal, setShowModal] = useState(false);
+ const [selectedAction, setSelectedAction] = useState(null);
+ const history = useHistory();
+ const { url } = useRouteMatch();
+ const [isDisplayDownloadMenu, setIsDisplayDownloadMenu] = useState(false);
+ const [showToast, setShowToast] = useState(null);
+
+ useEffect(() => {
+ switch (selectedAction) {
+ case "CANCEL_CHALLAN":
+ return setShowModal(true);
+ case "UPDATE_CHALLAN":
+ return history.push(`/digit-ui/employee/mcollect/modify-challan/${challanno}`);
+ case "BUTTON_PAY":
+ return history.push(
+ `/digit-ui/employee/payment/collect/${challanDetails?.businessService}/${challanno}/tenantId=${tenantId}?workflow=mcollect`
+ );
+ default:
+ console.log("default case");
+ break;
+ }
+ }, [selectedAction]);
+
+ function onActionSelect(action) {
+ setSelectedAction(action);
+ setDisplayMenu(false);
+ }
+
+ const closeModal = () => {
+ setSelectedAction(null);
+ setShowModal(false);
+ };
+
+ const submitAction = (data) => {
+ Digit.MCollectService.update({ Challan: data?.Challan }, tenantId)
+ .then((result) => {
+ if (result.challans && result.challans.length > 0) {
+ const challan = result.challans[0];
+ let LastModifiedTime = Digit.SessionStorage.set("isMcollectAppChanged", challan.challanNo);
+ history.push(
+ `/digit-ui/employee/mcollect/acknowledgement?purpose=challan&status=success&tenantId=${challan?.tenantId}&serviceCategory=${challan.businessService}&challanNumber=${challan.challanNo}&applicationStatus=${challan.applicationStatus}`,
+ { from: url }
+ );
+ }
+ })
+ .catch((e) => setShowToast({ key: true, label: e?.response?.data?.Errors[0].message }));
+ closeModal();
+ };
+
+ let isMcollectAppChanged = Digit.SessionStorage.get("isMcollectAppChanged");
+
+ const { isLoading, isError, error, data, ...rest } = Digit.Hooks.mcollect.useMCollectSearch({
+ tenantId,
+ filters: { challanNo: challanno },
+ isMcollectAppChanged,
+ });
+ var challanDetails = data?.challans?.filter(function (item) {
+ return item.challanNo === challanno;
+ })[0];
+ let billDetails = [];
+ useEffect(() => {
+ async function fetchMyAPI() {
+ billDetails = [];
+ let res = await Digit.PaymentService.searchBill(tenantId, {
+ consumerCode: data?.challans[0]?.challanNo,
+ service: data?.challans[0]?.businessService,
+ });
+ res?.Bill[0]?.billDetails[0]?.billAccountDetails?.map((bill) => {
+ billDetails.push(bill);
+ });
+ setTotalDueAmount(res?.Bill[0]?.totalAmount);
+ billDetails && billDetails.map((ob) => {
+ if(ob.taxHeadCode.includes("CGST"))
+ ob.order = 3;
+ else if(ob.taxHeadCode.includes("SGST"))
+ ob.order = 4;
+ });
+ billDetails.sort((a, b) => a.order - b.order);
+ setChallanBillDetails(billDetails);
+ }
+ if (data?.challans && data?.challans?.length > 0) {
+ fetchMyAPI();
+ }
+ }, [data]);
+
+ const workflowActions = ["CANCEL_CHALLAN", "UPDATE_CHALLAN", "BUTTON_PAY"];
+
+ function onDownloadActionSelect(action) {
+ action == "CHALLAN" ? downloadAndPrintChallan(challanno) : downloadAndPrintReciept(challanDetails?.businessService, challanno);
+ }
+
+ return (
+
+
+
{`${t("CHALLAN_DETAILS")}`}
+
+
setIsDisplayDownloadMenu(!isDisplayDownloadMenu)} />
+ {isDisplayDownloadMenu ? (
+
+
+
+
+
+ |
+ |
+ );
+ })}
+ {t("UC_TOTAL_DUE_AMOUT_LABEL")}}
+ text={`₹${totalDueAmount}`}
+ textStyle={{ fontSize: "24px", padding: "10px 0px", fontWeight: "700" }}
+ />
+
+ {t("UC_SERVICE_DETAILS_LABEL")}
+
+ |
+ |
+ |
+ |
+ |
+
+ {t("UC_CONSUMER_DETAILS_LABEL")}
+
+ |
+ |
+ |
+ |
+ |
+ |
+
+
+
setShowToast(null)} />}
+ {challanDetails?.applicationStatus == "ACTIVE" && (
+
+ {displayMenu && workflowActions ? setDisplayMenu(!displayMenu)} />
+
+ )}
+
+ );
+};
+
+export default EmployeeChallan;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/Module.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/Module.js
new file mode 100644
index 00000000000..8a57d4b009e
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/Module.js
@@ -0,0 +1,58 @@
+import { Header, HomeLink, Loader, CitizenHomeCard, PTIcon } from "@egovernments/digit-ui-react-components";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useRouteMatch } from "react-router-dom";
+import EmployeeApp from "./pages/employee";
+import MCollectCard from "./components/MCollectCard";
+import InboxFilter from "./components/inbox/NewInboxFilter";
+import CitizenApp from "./pages/citizen";
+
+export const MCollectModule = ({ stateCode, userType, tenants }) => {
+ const moduleCode = "UC";
+ const language = Digit.StoreData.getCurrentLanguage();
+ const { isLoading, data: store } = Digit.Services.useStore({ stateCode, moduleCode, language });
+ Digit.SessionStorage.set("MCollect_TENANTS", tenants);
+ if (isLoading) {
+ return {value} ;
+
+ const GetSlaCell = (value) => {
+ if (isNaN(value)) return 0 ;
+ return value < 0 ? {value} : {value} ;
+ };
+
+ const convertEpochToDate = (dateEpoch) => {
+ if (dateEpoch == null || dateEpoch == undefined || dateEpoch == "") {
+ return "NA";
+ }
+ const dateFromApi = new Date(dateEpoch);
+ let month = dateFromApi.getMonth() + 1;
+ let day = dateFromApi.getDate();
+ let year = dateFromApi.getFullYear();
+ month = (month > 9 ? "" : "0") + month;
+ day = (day > 9 ? "" : "0") + day;
+ return `${day}/${month}/${year}`;
+ };
+ const stringReplaceAll = (str = "", searcher = "", replaceWith = "") => {
+ if (searcher == "") return str;
+ while (str.includes(searcher)) {
+ str = str.replace(searcher, replaceWith);
+ }
+ return str;
+ };
+
+ const GetMobCell = (value) => {value} ;
+ const inboxColumns = () => [
+ {
+ Header: t("UC_CHALLAN_NUMBER"),
+ Cell: ({ row }) => {
+ return (
+
+
+
+
+ );
+ },
+ mobileCell: (original) => GetMobCell(original?.["challanNo"]),
+ },
+ {
+ Header: t("UC_COMMON_TABLE_COL_PAYEE_NAME"),
+ Cell: ({ row }) => {
+ return GetCell(`${row.original?.["name"]}`);
+ },
+ mobileCell: (original) => GetMobCell(original?.["name"]),
+ },
+ {
+ Header: t("UC_SERVICE_CATEGORY_LABEL"),
+ Cell: ({ row }) => {
+ let code = stringReplaceAll(`${row.original?.["businessService"]}`, ".", "_");
+ code = code.toUpperCase();
+ return GetCell(t(`BILLINGSERVICE_BUSINESSSERVICE_${code}`));
+ },
+ mobileCell: (original) => GetMobCell(`BILLINGSERVICE_BUSINESSSERVICE_${original?.["businessService"]}`),
+ },
+ {
+ Header: t("UC_DUE_DATE"),
+ Cell: ({ row }) => {
+ const dueDate = row.original?.dueDate === "NA" ? t("CS_NA") : convertEpochToDate(row.original?.dueDate);
+ return GetCell(t(`${dueDate}`));
+ },
+ mobileCell: (original) => GetMobCell(convertEpochToDate(original?.["dueDate"])),
+ },
+ {
+ Header: t("UC_TOTAL_AMOUNT"),
+ Cell: ({ row }) => {
+ return GetCell(t(`${row.original?.totalAmount}`));
+ },
+ mobileCell: (original) => GetMobCell(original?.["totalAmount"]),
+ },
+ {
+ Header: t("UC_COMMON_TABLE_COL_STATUS"),
+ Cell: ({ row }) => {
+ const wf = row.original?.applicationStatus;
+ return GetCell(t(`${row.original?.applicationStatus}`));
+ },
+ mobileCell: (original) => GetMobCell(original?.workflowData?.state?.["state"]),
+ },
+ {
+ Header: t("UC_TABLE_COL_ACTION"),
+ Cell: ({ row }) => {
+ const amount = row.original?.totalAmount;
+ let action = "ACTIVE";
+ if (amount > 0) action = "COLLECT";
+ if (action == "COLLECT") {
+ return (
+
+
+
+
+ );
+ } else if (row.original?.applicationStatus == "PAID") {
+ return (
+
+ {getActionButton(row.original?.["businessService"], row.original?.["challanNo"])}
+
+ );
+ } else {
+ return GetCell(t(`${"CS_NA"}`));
+ }
+ },
+ mobileCell: (original) => GetMobCell(original?.workflowData?.state?.["state"]),
+ },
+ ];
+
+ let result;
+ if (props.isLoading || props.isLoader) {
+ result =
+ {/* TODO Change localization key */}
+ {t("CS_MYAPPLICATIONS_NO_APPLICATION")
+ .split("\\n")
+ .map((text, index) => (
+
+ {text}
+
+ ))}
+
+ );
+ } else if (data?.length > 0) {
+ result = (
+ {
+ return {
+ style: {
+ minWidth: cellInfo.column.Header === t("ES_INBOX_APPLICATION_NO") ? "240px" : "",
+ padding: "20px 18px",
+ fontSize: "16px",
+ wordBreak:"break-word",
+ overflowWrap: 'break-word',
+ width: "250px"
+ },
+ };
+ }}
+ onPageSizeChange={props.onPageSizeChange}
+ currentPage={props.currentPage}
+ onNextPage={props.onNextPage}
+ onPrevPage={props.onPrevPage}
+ pageSizeLimit={props.pageSizeLimit}
+ onSort={props.onSort}
+ disableSort={props.disableSort}
+ onPageSizeChange={props.onPageSizeChange}
+ sortParams={props.sortParams}
+ totalRecords={props.totalRecords}
+ />
+ );
+ }
+
+ return (
+
+ {!props.isSearch && (
+
+
+
+ {
+
+
+ )}
+
+
+ {populators.componentInFront ? populators.componentInFront : null}
+
+ );
+ case "textarea":
+ return ;
+ case "custom":
+ return
+ {section.head}
+ {section.body.map((field, index) => {
+ return (
+
+ {errors[field.populators.name] && (field.populators?.validate ? errors[field.populators.validate] : true) && (
+ {field.populators.error}
+ )}
+ {field.label ? (
+
+
+ {field.label}
+ {field.isMandatory ? " * " : null}
+
+ {fieldSelector(field.type, field.populators)}
+
+ ) : (
+ {fieldSelector(field.type, field.populators)}
+ )}
+
+ );
+ })}
+ {array.length - 1 === index ? null :
+ );
+ }),
+ [props.config, errors]
+ );
+
+ const isDisabled = props.isDisabled || false;
+
+ return (
+
+ );
+});
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/components/MCollectCard.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/MCollectCard.js
new file mode 100755
index 00000000000..0cd78cfa102
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/MCollectCard.js
@@ -0,0 +1,41 @@
+import { EmployeeModuleCard, PTIcon } from "@egovernments/digit-ui-react-components";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const MCollectCard = () => {
+ if (!Digit.Utils.mCollectAccess()) {
+ return null;
+ }
+ const { t } = useTranslation();
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const { isLoading, isError, error, data, ...rest } = Digit.Hooks.mcollect.useMCollectCount(tenantId);
+
+ const propsForModuleCard = {
+ Icon: {value} ;
+ const convertEpochToDate = (dateEpoch) => {
+ if (dateEpoch == null || dateEpoch == undefined || dateEpoch == "") {
+ return "NA";
+ }
+ const dateFromApi = new Date(dateEpoch);
+ let month = dateFromApi.getMonth() + 1;
+ let day = dateFromApi.getDate();
+ let year = dateFromApi.getFullYear();
+ month = (month > 9 ? "" : "0") + month;
+ day = (day > 9 ? "" : "0") + day;
+ return `${day}/${month}/${year}`;
+ };
+ const stringReplaceAll = (str = "", searcher = "", replaceWith = "") => {
+ if (searcher == "") return str;
+ while (str.includes(searcher)) {
+ str = str.replace(searcher, replaceWith);
+ }
+ return str;
+ };
+ const inboxColumns = (props) => [
+ {
+ Header: t("UC_CHALLAN_NUMBER"),
+ mobileCell: (original) => GetMobCell(original?.["challanNo"]),
+ },
+ {
+ Header: t("UC_COMMON_TABLE_COL_PAYEE_NAME"),
+ mobileCell: (original) => GetMobCell(original?.["name"]),
+ },
+ {
+ Header: t("UC_SERVICE_CATEGORY_LABEL"),
+ mobileCell: (original) => {
+ let code = stringReplaceAll(`${original?.["businessService"]}`, ".", "_");
+ code = code.toUpperCase();
+ return GetMobCell(t(`BILLINGSERVICE_BUSINESSSERVICE_${code}`));
+ },
+ },
+ {
+ Header: t("UC_DUE_DATE"),
+ mobileCell: (original) => GetMobCell(original?.dueDate === "NA" ? t("CS_NA") : convertEpochToDate(original?.dueDate)),
+ },
+ {
+ Header: t("UC_TOTAL_AMOUNT"),
+ mobileCell: (original) => GetMobCell(original?.["totalAmount"]),
+ },
+ {
+ Header: t("UC_COMMON_TABLE_COL_STATUS"),
+ mobileCell: (original) => GetMobCell(original?.applicationStatus),
+ },
+ {
+ Header: t("UC_TABLE_COL_ACTION"),
+ mobileCell: (original) => {
+ const amount = original?.totalAmount;
+ let action = "ACTIVE";
+ if (amount > 0) action = "COLLECT";
+ if (action == "COLLECT") {
+ return (
+
+
+
+
+ );
+ } else if (original?.applicationStatus == "PAID") {
+ return (
+
+ );
+ } else {
+ return GetMobCell(t(`${"CS_NA"}`));
+ }
+ },
+ },
+ ];
+
+ const serviceRequestIdKey = (original) => original?.[t("UC_CHALLAN_NUMBER")]?.props?.children;
+
+ const getData = () => {
+ return data?.map((dataObj) => {
+ const obj = {};
+ const columns = inboxColumns();
+ columns.forEach((el) => {
+ if (el.mobileCell) obj[el.Header] = el.mobileCell(dataObj);
+ });
+ return obj;
+ });
+ };
+
+ return (
+
+ );
+};
+
+export default MobileInbox;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/components/Modal/MCollectActionModal.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/Modal/MCollectActionModal.js
new file mode 100644
index 00000000000..f4668bcecf6
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/Modal/MCollectActionModal.js
@@ -0,0 +1,85 @@
+import { Loader, Modal, FormComposer } from "@egovernments/digit-ui-react-components";
+import React, { useState, useEffect } from "react";
+
+import { configMCollectRejectApplication } from "./MCollectRejectApplication";
+
+const Heading = (props) => {
+ return {props.label} ;
+};
+
+const Close = () => (
+
+
+);
+
+const CloseBtn = (props) => {
+ return (
+
+
+ );
+};
+
+const ActionModal = ({ t, action, tenantId, closeModal, submitAction, applicationData, billData }) => {
+ const [config, setConfig] = useState({});
+ const [defaultValues, setDefaultValues] = useState({});
+
+ function submit(data) {
+ let bdata = [];
+ billData?.map((bill) => {
+ bdata.push({
+ taxHeadCode: bill?.taxHeadCode,
+ amount: bill?.amount,
+ });
+ });
+ submitAction({
+ Challan: {
+ ...applicationData,
+ applicationStatus: "CANCELLED",
+ amount: bdata,
+ },
+ });
+ }
+ useEffect(() => {
+ switch (action) {
+ case "CANCEL_CHALLAN":
+ return setConfig(
+ configMCollectRejectApplication({
+ t,
+ action,
+ })
+ );
+ default:
+ console.log("default case");
+ break;
+ }
+ }, [action]);
+
+ return action && config.form ? (
+
+ {t("UC_BILL_GENERATION_MESSAGE_SUB")}
+
+
+
+
+ );
+};
+export default MCollectWFAcknowledgement;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/components/Modal/index.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/Modal/index.js
new file mode 100644
index 00000000000..d4fdc6ce2a9
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/Modal/index.js
@@ -0,0 +1,8 @@
+import React, { useState, useEffect } from "react";
+import MCollectActionModal from "./MCollectActionModal";
+
+const ActionModal = (props) => {
+ return
+
{headComment}
+
{otherComment}
+
+ {data.date &&
{data.date}
}
+
{data.name}
+ {data.mobileNumber &&
}
+ {data.source &&
{t("ES_APPLICATION_DETAILS_APPLICATION_CHANNEL_" + data.source.toUpperCase())}
}
+ {data.comment &&
}
+
+ {t("CS_MYAPPLICATIONS_NO_APPLICATION")
+ .split("\\n")
+ .map((text, index) => (
+
+ {text}
+
+ ))}
+
+ );
+ } else if (data && data?.length > 0) {
+ result =
+
+ {onSearch && (
+ {
+ setType("SEARCH");
+ setSearchFilterParams({
+ businessService: [],
+ status: []
+ });
+ setPopup(true);
+ }}
+ />
+ )}
+ {!isSearch && onFilterChange && (
+ {
+ setType("FILTER");
+ setSearchFilterParams({
+ businessService: [],
+ status: []
+ });
+ setPopup(true);
+ }}
+ />
+ )}
+ {/* {
+ setType("SORT");
+ setPopup(true);
+ }}
+ /> */}
+
+ {result}
+ {popup && (
+
+ {type === "FILTER" && (
+
+ {
+ )}
+ {/* {type === "SORT" && (
+
+ {
+ )} */}
+ {type === "SEARCH" && (
+
+
+ )}
+
+ )}
+
+ );
+};
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/ApplicationLinks.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/ApplicationLinks.js
new file mode 100755
index 00000000000..6e9ebe79475
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/ApplicationLinks.js
@@ -0,0 +1,45 @@
+import { Card, ShippingTruck } from "@egovernments/digit-ui-react-components";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
+const InboxLinks = ({ parentRoute, businessService, allLinks, headerText }) => {
+ const { t } = useTranslation();
+ const [links, setLinks] = useState([]);
+ const { roles: userRoles } = Digit.UserService.getUser().info;
+ useEffect(() => {
+
+ let linksToShow = allLinks ? allLinks
+ .filter((e) => e.businessService === businessService)
+ .filter(({ roles }) => roles.some((e) => userRoles.map(({ code }) => code).includes(e)) || !roles.length):[];
+ setLinks(linksToShow);
+ }, []);
+
+ const GetLogo = () => (
+
+
+ {" "}
+ {t(headerText)}
+
+ );
+
+ return (
+
+
+ {GetLogo()}
+
+ {links.map(({ link, text, hyperlink = false, accessTo = [] }, index) => {
+ return (
+
+ {hyperlink ? {t(text)} :
+ );
+ })}
+
+
+ );
+};
+
+export default InboxLinks;
\ No newline at end of file
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/ApplicationTable.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/ApplicationTable.js
new file mode 100755
index 00000000000..3259185d568
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/ApplicationTable.js
@@ -0,0 +1,38 @@
+import React from "react";
+import { Table } from "@egovernments/digit-ui-react-components";
+
+const ApplicationTable = ({
+ t,
+ currentPage,
+ columns,
+ data,
+ getCellProps,
+ disableSort,
+ onSort,
+ onNextPage,
+ onPrevPage,
+ onPageSizeChange,
+ pageSizeLimit,
+ sortParams,
+ totalRecords,
+}) => {
+ return (
+
+ );
+};
+
+export default ApplicationTable;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/Filter.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/Filter.js
new file mode 100755
index 00000000000..ee13d2e8007
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/Filter.js
@@ -0,0 +1,78 @@
+import React from "react";
+import { ActionBar, CloseSvg } from "@egovernments/digit-ui-react-components";
+import { ApplyFilterBar } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import Status from "./Status";
+import ServiceCategory from "./ServiceCategory";
+
+const Filter = ({ searchParams, onFilterChange, onSearch, removeParam, ...props }) => {
+ const { t } = useTranslation();
+
+ const onStatusChange = (e, type) => {
+ if (e.target.checked) onFilterChange({ status: [...searchParams?.status, type] });
+ else onFilterChange({ status: searchParams?.status.filter((option) => type.name !== option.name) });
+ };
+
+ const clearAll = () => {
+ onFilterChange({ status: [] });
+ props?.onClose?.();
+ };
+
+ return (
+
+
+
+
+
{t("UC_FILTERS_LABEL")}:
+
+ {t("ES_COMMON_CLEAR_ALL")}
+
+ {props.type === "desktop" && (
+
+ {t("ES_COMMON_CLEAR_ALL")}
+
+ )}
+ {props.type === "mobile" && (
+
+
+ )}
+
+
+
+
+
+
+
+ {
+ if (props.type === "mobile") onSearch({ delete: ["applicationNos"] });
+ else onSearch();
+ }}
+ style={{ flex: 1 }}
+ />
+
+ )}
+
+ );
+};
+
+export default Filter;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/InboxLink.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/InboxLink.js
new file mode 100644
index 00000000000..fdaa26f40ca
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/InboxLink.js
@@ -0,0 +1,49 @@
+import { Card, PTIcon } from "@egovernments/digit-ui-react-components";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
+const InboxLinks = ({ parentRoute, businessService }) => {
+ const { t } = useTranslation();
+ const [links, setLinks] = useState([]);
+ const allLinks = [
+ {
+ text: t("UC_GENERATE_NEW_CHALLAN"),
+ link: "/digit-ui/employee/mcollect/new-application",
+ roles: [],
+ },
+ ];
+
+ useEffect(() => {
+ let linksToShow = allLinks;
+ setLinks(linksToShow);
+ }, []);
+
+ const GetLogo = () => (
+
+
+ {" "}
+
{t("UC_COMMON_HEADER_SEARCH")}
+
+
+ {GetLogo()}
+
+ {links.map(({ link, text, hyperlink = false, accessTo = [] }, index) => {
+ return (
+
+ {hyperlink ? {t(text)} :
+ );
+ })}
+
+
+ );
+};
+
+export default InboxLinks;
\ No newline at end of file
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/NewInboxFilter.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/NewInboxFilter.js
new file mode 100755
index 00000000000..50535fe6a1c
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/NewInboxFilter.js
@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import { Dropdown, RadioButtons, ActionBar, RemoveableTag, CloseSvg, CheckBox, Localities, SubmitBar } from "@egovernments/digit-ui-react-components";
+
+import { useTranslation } from "react-i18next";
+
+import Status from "./Status";
+import ServiceCategory from "./ServiceCategory";
+import _ from "lodash";
+
+const Filter = ({ searchParams, onFilterChange, defaultSearchParams, ...props }) => {
+ const { t } = useTranslation();
+
+ const [_searchParams, setSearchParams] = useState(() => searchParams);
+ const [ clearCheck, setclearCheck] = useState(false);
+
+ const localParamChange = (filterParam) => {
+ setclearCheck(false);
+ let keys_to_delete = filterParam.delete;
+ let _new = { ..._searchParams, ...filterParam };
+ if (keys_to_delete) keys_to_delete.forEach((key) => delete _new[key]);
+ delete filterParam.delete;
+ setSearchParams({ ..._new });
+ };
+
+ const clearAll = () => {
+ setSearchParams(defaultSearchParams);
+ onFilterChange(defaultSearchParams);
+ setclearCheck(true);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
{t("UC_FILTERS_LABEL")}:
+
+
+ {t("ES_COMMON_CLEAR_ALL")}
+
+ {props.type === "desktop" && (
+
+
+
+ {/* {t("ES_COMMON_CLEAR_ALL")} */}
+
+ )}
+ {props.type === "mobile" && (
+
+
+ )}
+
+
+
+ {
+ if (e.target.checked) localParamChange({ status: [..._searchParams?.status, status?.code] });
+ else localParamChange({ status: _searchParams?.status.filter((e) => e !== status?.code) });
+ }}
+ />
+
+
+ {
+ if (e.target.checked) localParamChange({ businessService: [..._searchParams?.businessService, businessService?.code] });
+ else localParamChange({ businessService: _searchParams?.businessService.filter((e) => e !== businessService?.code) });
+ }}
+ />
+
+
+
+ onFilterChange(_searchParams)}
+ label={t("ES_COMMON_APPLY")}
+ />
+
+
+
+
+ );
+};
+
+export default Filter;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/ServiceCategory.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/ServiceCategory.js
new file mode 100755
index 00000000000..fe9f6508228
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/ServiceCategory.js
@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import { Loader } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import ServiceCategoryCount from "./ServiceCategoryCount";
+
+const ServiceCategory = ({ onAssignmentChange, searchParams, businessServices,clearCheck,setclearCheck }) => {
+ const { t } = useTranslation();
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const stateId = tenantId.split(".")[0];
+ const [moreStatus, showMoreStatus] = useState(false);
+ const { data: Menu, isLoading } = Digit.Hooks.mcollect.useMCollectMDMS(stateId, "BillingService", "BusinessService", "[?(@.type=='Adhoc')]");
+
+ const stringReplaceAll = (str = "", searcher = "", replaceWith = "") => {
+ if (searcher == "") return str;
+ while (str.includes(searcher)) {
+ str = str.replace(searcher, replaceWith);
+ }
+ return str;
+ };
+
+ const translateState = (option) => {
+ let code = stringReplaceAll(option.code, ".", "_");
+ code = stringReplaceAll(code, " ", "_");
+ code = code.toUpperCase();
+ return t(`BILLINGSERVICE_BUSINESSSERVICE_${code}`);
+ };
+
+ let menuFirst = [];
+ let meuSecond = [];
+ Menu?.map((option, index) => {
+ if (index < 5) menuFirst.push(option);
+ else meuSecond.push(option);
+ });
+
+ if (isLoading) {
+ return
+
+ {t("UC_SERVICE_CATEGORY_LABEL")}
+
+
+ {menuFirst?.map((option, index) => {
+ return (
+
+ );
+ })}
+ {moreStatus &&
+ meuSecond?.map((option, index) => {
+ return (
+
+ );
+ })}
+
showMoreStatus(!moreStatus)}>
+ {" "}
+ {moreStatus ? t("UC_LESS_LABEL") : t("UC_MORE_LABEL")}{" "}
+
+
onAssignmentChange(e, status)}
+ checked={(() => {
+ //IIFE
+ if(!clearCheck)
+ return searchParams?.applicationStatus.some((e) => e.code === status.code);
+ else
+ { setclearCheck(false);
+ return false;
+ }
+ })()}
+ label={`${t(status.name)}`}
+ styles={{ marginBottom: "10px" }}
+ />
+ );
+};
+
+export default ServiceCategoryCount;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/SortBy.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/SortBy.js
new file mode 100755
index 00000000000..acecdc5e9a6
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/SortBy.js
@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { RadioButtons } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import { CloseSvg } from "@egovernments/digit-ui-react-components";
+
+const SortBy = (props) => {
+ const { t } = useTranslation();
+ const [selectedOption, setSelectedOption] = useState(() => {
+ return props.sortParams?.[0]?.desc
+ ? { code: "DESC", name: t("ES_INBOX_DATE_LATEST_FIRST") }
+ : { code: "ASC", name: t("ES_INBOX_DATE_LATEST_LAST") };
+ });
+
+ function clearAll() {}
+
+ function onSort(option) {
+ props.onSort([{ id: "createdTime", desc: option.code === "DESC" ? true : false }]);
+ props.onClose();
+ }
+
+ return (
+
+
+
+
+
{t("SORT_BY")}:
+
+ {t("ES_COMMON_CLEAR_ALL")}
+
+ {props.type === "desktop" && (
+
+ {t("ES_COMMON_CLEAR_ALL")}
+
+ )}
+ {props.type === "mobile" && (
+
+
+ )}
+
+
+
+
+
+ );
+};
+
+export default SortBy;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/Status.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/Status.js
new file mode 100755
index 00000000000..cdf220ab017
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/Status.js
@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { Loader } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import StatusCount from "./StatusCount";
+
+const Status = ({ onAssignmentChange, searchParams, businessServices,clearCheck,setclearCheck }) => {
+ const { t } = useTranslation();
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const stateId = tenantId.split(".")[0];
+ const { data, isLoading } = Digit.Hooks.mcollect.useMCollectMDMS(stateId, "mCollect", "applicationStatus");
+ const applicationStatus = data?.mCollect?.applicationStatus || [];
+ const translateState = (state) => {
+ return `${state.code || "ACTIVE"}`;
+ };
+ if (isLoading) {
+ return
+
+ {t("UC_COMMON_TABLE_COL_STATUS")}
+
+ {applicationStatus?.map((option, index) => {
+ return (
+
+ );
+ })}
+
onAssignmentChange(e, status)}
+ checked={(() => {
+ //IIFE
+ if(!clearCheck)
+ return searchParams?.applicationStatus.some((e) => e.code === status.code);
+ else{
+ setclearCheck(false);
+ return false;
+ }
+ })()}
+ label={`${t(status.name)}`}
+ />
+ );
+};
+
+export default StatusCount;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/search.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/search.js
new file mode 100755
index 00000000000..8ecca96f47a
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/components/inbox/search.js
@@ -0,0 +1,123 @@
+import React from "react";
+import { useForm, Controller } from "react-hook-form";
+import { TextInput, Label, SubmitBar, LinkLabel, ActionBar, CloseSvg, DatePicker } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+// import _ from "lodash";
+
+const SearchApplication = ({ onSearch, type, onClose, searchFields, searchParams, isInboxPage, defaultSearchParams }) => {
+ const { t } = useTranslation();
+ const { register, handleSubmit, reset, watch, control } = useForm({
+ defaultValues: searchParams,
+ });
+ const mobileView = innerWidth <= 640;
+
+ // console.log(_.isEqual(defaultSearchParams, searchParams), { defaultSearchParams, searchParams }, "params are defaulted");
+
+ const onSubmitInput = (data) => {
+ if (!data.mobileNumber) {
+ delete data.mobileNumber;
+ }
+
+ data.delete = [];
+
+ searchFields.forEach((field) => {
+ if (!data[field.name]) data.delete.push(field.name);
+ });
+
+ onSearch(data);
+ if (type === "mobile") {
+ onClose();
+ }
+ };
+
+ function clearSearch() {
+ const resetValues = searchFields.reduce((acc, field) => ({ ...acc, [field?.name]: "" }), {});
+ reset(resetValues);
+ const _newParams = { ...searchParams };
+ _newParams.delete = [];
+ searchFields.forEach((e) => {
+ _newParams.delete.push(e?.name);
+ });
+
+ onSearch({ ..._newParams });
+ }
+
+ const clearAll = (mobileView) => {
+ const mobileViewStyles = mobileView ? { margin: 0 } : {};
+ return (
+
+ {t("UC_CLEAR_SEARCH_LABEL")}
+
+ );
+ };
+
+ return (
+
+ );
+};
+
+export default SearchApplication;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/citizen/MyChallan/config.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/citizen/MyChallan/config.js
new file mode 100644
index 00000000000..789b0874f68
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/citizen/MyChallan/config.js
@@ -0,0 +1,39 @@
+export const config = [
+ {
+ texts: {
+ header: "CS_SEARCH_RESULTS",
+ actionButtonLabel: "CS_VIEW_DETAILS",
+ },
+ labels: [
+ {
+ label: "UC_AMOUNT_DUE_LABEL",
+ key: "total_due",
+ noteStyle: {
+ fontSize: "24px",
+ fontWeight: "bold",
+ },
+ notePrefix: "₹ ",
+ },
+ {
+ label: "UC_CHALLAN_NO",
+ key: "ChannelNo",
+ },
+ {
+ label: "UC_SERVICE_CATEGORY_LABEL",
+ key: "ServiceCategory",
+ },
+ {
+ label: "UC_BILLING_PERIOD_LABEL",
+ key: "BillingPeriod",
+ },
+ {
+ label: "UC_OWNER_NAME_LABEL",
+ key: "OwnerName",
+ },
+ {
+ label: "UC_DUE_DATE",
+ key: "bil_due__date",
+ },
+ ],
+ },
+];
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/citizen/MyChallan/index.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/citizen/MyChallan/index.js
new file mode 100644
index 00000000000..cfa78e5af3b
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/citizen/MyChallan/index.js
@@ -0,0 +1,38 @@
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Route, Switch, useRouteMatch } from "react-router-dom";
+import { config } from "./config";
+import MyChallanResultsComponent from "./myChallan";
+
+const MyChallans = () => {
+ const { t } = useTranslation();
+ const { path } = useRouteMatch();
+
+ const params = useMemo(() =>
+ config.map(
+ (step) => {
+ const texts = {};
+ for (const key in step.texts) {
+ texts[key] = t(step.texts[key]);
+ }
+ return { ...step, texts };
+ },
+ [config]
+ )
+ );
+
+ return (
+
+
+
+
+ );
+};
+
+export default MyChallans;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/citizen/MyChallan/myChallan.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/citizen/MyChallan/myChallan.js
new file mode 100644
index 00000000000..20e897dfa80
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/citizen/MyChallan/myChallan.js
@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from "react";
+import { Header, ResponseComposer, Loader } from "@egovernments/digit-ui-react-components";
+import PropTypes from "prop-types";
+import Axios from "axios";
+import { useHistory, Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+const MyChallanResult = ({ template, header, actionButtonLabel }) => {
+ const { t } = useTranslation();
+ const history = useHistory();
+ const filters = {};
+ const userInfo = Digit.UserService.getUser();
+ const tenantId = userInfo?.info?.tenantId;
+
+ filters.mobileNumber = userInfo?.info?.mobileNumber;
+
+ //filters.url = "egov-searcher/bill-genie/mcollectbills/_get"
+
+ //const tenantId = Digit.ULBService.getCurrentTenantId();
+
+ const result = Digit.Hooks.mcollect.useMcollectSearchBill({ tenantId, filters });
+ //const result = await Axios.post(`https://qa.digit.org/egov-searcher/bill-genie/mcollectbills/_get?`, {"searchCriteria":{"tenantId":"pb.amritsar","mobileNumber":"7878787878","businesService":"ADVT.Hoardings"},"RequestInfo":{"apiId":"Rainmaker","authToken":"1fff79b7-694d-4b18-8a6f-2dbdac1531aa"}})
+ //let bills = result?.data?.Bills;
+ //const consumerCode = result?.data?.Properties?.map((a) => a.propertyId).join(",");
+
+ /* const paymentDetails = Digit.Hooks.useFetchCitizenBillsForBuissnessService(
+ { consumerCode, businessService: "PT", mobileNumber: mobileNumber },
+ { enabled: consumerCode ? true : false }
+ ); */
+
+ /*
+ if (paymentDetails.isLoading || result.isLoading) {
+ return {t("CS_PT_NO_PROPERTIES_FOUND")}
;
+ } */
+
+ const onSubmit = (data) => {
+ //history.push(`/digit-ui/citizen/payment/my-bills/PT/${data.property_id}`, { tenantId });
+ //history.push(`/digit-ui/citizen/mcollect/bill-details/${data.businesService}/${data?.ChannelNo}`, { tenantId });
+ history.push(`/digit-ui/citizen/payment/my-bills/${data?.businesService}/${data?.ChannelNo}?workflow=mcollect`);
+ };
+
+ const payment = {};
+ function getBillingPeriod(fromPeriod, toPeriod) {
+ if (fromPeriod && toPeriod) {
+ let from =
+ new Date(fromPeriod).getDate() +
+ " " +
+ Digit.Utils.date.monthNames[new Date(fromPeriod).getMonth() + 1] +
+ " " +
+ new Date(fromPeriod).getFullYear();
+ let to =
+ new Date(toPeriod).getDate() + " " + Digit.Utils.date.monthNames[new Date(toPeriod).getMonth() + 1] + " " + new Date(toPeriod).getFullYear();
+ return from + " - " + to;
+ } else return "N/A";
+ }
+
+ /* paymentDetails?.data?.Bill?.forEach((element) => {
+ if (element?.consumerCode) {
+ payment[element?.consumerCode] = {
+ total_due: element?.totalAmount,
+ bil_due__date: new Date(element?.billDate).toDateString(),
+ };
+ }
+ }); */
+
+ const searchResults = result?.data?.Bills?.map((bill) => {
+ return {
+ businesService: bill.businessService,
+ total_due: bill.status === "PAID" ? 0 : bill.totalAmount,
+ OwnerName: bill.payerName || t("CS_NA"),
+ BillingPeriod: getBillingPeriod(bill.billDetails[0].fromPeriod, bill.billDetails[0].toPeriod),
+ //bil_due__date: bill.billDetails[0].expiryDate || 0,
+ bil_due__date: `${
+ new Date(bill.billDetails[0].expiryDate).getDate().toString() +
+ "/" +
+ (new Date(bill.billDetails[0].expiryDate).getMonth() + 1).toString() +
+ "/" +
+ new Date(bill.billDetails[0].expiryDate).getFullYear().toString()
+ }`,
+ ChannelNo: bill?.consumerCode || t("CS_NA"),
+ ServiceCategory: bill.businessService ? bill.businessService.split(".")[bill.businessService.split(".").length - 1] : t("CS_NA"),
+ };
+ });
+
+ return (
+
+
+ {header && (
+
+ {t(header)} ({searchResults?.length})
+
+ )}
+
+
+
+
+
+
{t("UC_NOT_ABLE_TO_FIND_BILL_MSG")}
+
+
+
+
+
+
+
+ );
+};
+
+export default SearchChallan;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/citizen/SearchChallan/searchChallan.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/citizen/SearchChallan/searchChallan.js
new file mode 100644
index 00000000000..07179c46a34
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/citizen/SearchChallan/searchChallan.js
@@ -0,0 +1,183 @@
+import React, { useState, useEffect } from "react";
+import { FormComposer, CardLabelDesc, Loader, Menu } from "@egovernments/digit-ui-react-components";
+import { FormStep, CardLabel, RadioButtons, RadioOrSelect } from "@egovernments/digit-ui-react-components";
+import { TextInput, LabelFieldPair, Dropdown } from "@egovernments/digit-ui-react-components";
+import PropTypes from "prop-types";
+import { useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import useMCollectMDMS from "../../../../../../libraries/src/hooks/mcollect/useMCollectMDMS";
+import ServiceCategory from "../../../components/inbox/ServiceCategory";
+
+const SearchChallan = ({ config: propsConfig, formData }) => {
+ const { t } = useTranslation();
+ let validation = {};
+ const history = useHistory();
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+
+ const [mobileNumber, setMobileNumber] = useState(formData?.mobileNumber || "");
+ const [challanNo, setchallanNumber] = useState(formData?.challanNo || "");
+ const [Servicecateogry, setServicecateogry] = useState(formData?.Servicecateogry || "");
+ const [city, setcity] = useState(formData?.city || "");
+ const allCities = Digit.Hooks.mcollect.usemcollectTenants()?.sort((a, b) => a?.i18nKey?.localeCompare?.(b?.i18nKey));
+ const [mobileNumberError, setmobileNumberError] = useState(null);
+ // moduleCode, type, config = {}, payload = []
+
+ const { data: Menu, isLoading } = Digit.Hooks.mcollect.useMCollectMDMS(tenantId, "BillingService", "BusinessService");
+ if (isLoading) {
+ return
+ {/* */}
+ +91
}
+ isDisabled={!Servicecateogry || !city.code}
+ forcedError={t(mobileNumberError)}
+ //onSkip={onSkip}
+ t={t}
+ >
+ {`${t("UC_CITY_LABEL")}*`}
+ {`${t("UC_SERVICE_CATEGORY_LABEL")}*`}
+ {Menu && (
+ {`${t("UC_SEARCH_MOBILE_NO_LABEL")}`}
+
+
+ +91
+
+
+ {`${t("UC_CHALLAN_NO")}`}
+
+
+
+
+ );
+};
+
+export default CitizenSearchResults;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/citizen/SearchResults/searchResults.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/citizen/SearchResults/searchResults.js
new file mode 100644
index 00000000000..8325ea2af42
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/citizen/SearchResults/searchResults.js
@@ -0,0 +1,102 @@
+import React from "react";
+import { Header, ResponseComposer, Loader } from "@egovernments/digit-ui-react-components";
+import PropTypes from "prop-types";
+import Axios from "axios";
+import { useHistory, Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+const ChallanSearchResults = ({ template, header, actionButtonLabel }) => {
+ const { t } = useTranslation();
+ const history = useHistory();
+ const { mobileNumber, challanNo, Servicecategory,tenantId } = Digit.Hooks.useQueryParams();
+ const filters = {};
+ if (mobileNumber) filters.mobileNumber = mobileNumber;
+ if (challanNo) filters.consumerCode = challanNo;
+ if (Servicecategory) filters.businesService = Servicecategory;
+ //filters.url = "egov-searcher/bill-genie/mcollectbills/_get"
+
+ //const tenantId = Digit.ULBService.getCurrentTenantId();
+ // const userInfo = Digit.UserService.getUser();
+ // let tenantId = userInfo?.info?.permanentCity;
+ // tenantId = tenantId;
+ const result = Digit.Hooks.mcollect.useMcollectSearchBill({ tenantId, filters });
+ //const result = await Axios.post(`https://qa.digit.org/egov-searcher/bill-genie/mcollectbills/_get?`, {"searchCriteria":{"tenantId":"pb.amritsar","mobileNumber":"7878787878","businesService":"ADVT.Hoardings"},"RequestInfo":{"apiId":"Rainmaker","authToken":"1fff79b7-694d-4b18-8a6f-2dbdac1531aa"}})
+ let bills = result?.data?.Bills;
+ //const consumerCode = result?.data?.Properties?.map((a) => a.propertyId).join(",");
+
+ /* const paymentDetails = Digit.Hooks.useFetchCitizenBillsForBuissnessService(
+ { consumerCode, businessService: "PT", mobileNumber: mobileNumber },
+ { enabled: consumerCode ? true : false }
+ ); */
+
+ if (result.isLoading) {
+ return {t("CS_PT_NO_PROPERTIES_FOUND")}
;
+ } */
+
+ const onSubmit = (data) => {
+ //debugger;
+ //history.push(`/digit-ui/citizen/payment/my-bills/PT/${data.property_id}`, { tenantId });
+ //history.push(`/digit-ui/citizen/mcollect/bill-details/${data.businesService}/${data?.ChannelNo}`, { tenantId });
+ history.push(`/digit-ui/citizen/payment/my-bills/${data?.businesService}/${data?.ChannelNo}?workflow=mcollect`);
+ };
+
+ const payment = {};
+
+ /* paymentDetails?.data?.Bill?.forEach((element) => {
+ if (element?.consumerCode) {
+ payment[element?.consumerCode] = {
+ total_due: element?.totalAmount,
+ bil_due__date: new Date(element?.billDate).toDateString(),
+ };
+ }
+ }); */
+
+ const searchResults = result?.data?.Bills?.map((bill) => {
+ return {
+ businesService: bill.businessService,
+ total_due: bill.status === "PAID" ? 0 : bill.totalAmount,
+ OwnerName: bill.payerName || t("CS_NA"),
+ //bil_due__date: bill.billDetails[0].expiryDate || 0,
+ bil_due__date: `${
+ new Date(bill.billDetails[0].expiryDate).getDate().toString() +
+ "/" +
+ (new Date(bill.billDetails[0].expiryDate).getMonth() + 1).toString() +
+ "/" +
+ new Date(bill.billDetails[0].expiryDate).getFullYear().toString()
+ }`,
+ ChannelNo: bill?.consumerCode || t("CS_NA"),
+ ServiceCategory: bill.businessService ? bill.businessService.split(".")[bill.businessService.split(".").length - 1] : t("CS_NA"),
+ };
+ });
+
+ return (
+
+
+ {header && (
+
+ {t(header)} ({searchResults?.length})
+
+ )}
+
+
+
+
+ Back
+
+
+
+ );
+};
+
+export default App;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/CreateChallan.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/CreateChallan.js
new file mode 100755
index 00000000000..5d6f721ecbf
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/CreateChallan.js
@@ -0,0 +1,557 @@
+import React, { useState, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Dropdown, DatePicker, Toast } from "@egovernments/digit-ui-react-components";
+import * as func from "./Utils/Category";
+import { FormComposer } from "../../components/FormComposer";
+import { sortDropdownNames } from "./Utils/Sortbyname";
+import { stringReplaceAll } from "../../utils/index";
+import { useParams, useHistory, useRouteMatch } from "react-router-dom";
+const CreateChallen = ({ ChallanData }) => {
+ const childRef = useRef();
+ const history = useHistory();
+ const { url } = useRouteMatch();
+ let defaultval;
+ let isEdit = false;
+ if (url.includes("modify-challan")) {
+ isEdit = true;
+ }
+
+ let lastModTime = ChallanData ? ChallanData[0].auditDetails.lastModifiedTime : null;
+ const { data: fetchBillData } = ChallanData
+ ? Digit.Hooks.useFetchBillsForBuissnessService(
+ {
+ businessService: ChallanData[0].businessService,
+ consumerCode: ChallanData[0].challanNo,
+ },
+ { lastModTime }
+ )
+ : {};
+
+ const cities = Digit.Hooks.mcollect.usemcollectTenants();
+ const getCities = () => cities?.filter((e) => e.code === Digit.ULBService.getCurrentTenantId()) || [];
+ const { t } = useTranslation();
+ const { data: fetchedLocalities } = Digit.Hooks.useBoundaryLocalities(
+ getCities()[0]?.code,
+ "admin",
+ {
+ enabled: !!getCities()[0],
+ },
+ t
+ );
+
+ const handlePincode = (event) => {
+ const { value } = event.target;
+ setPincode(value);
+ if (!value) {
+ setPincodeNotValid(false);
+ }
+ };
+
+ const isPincodeValid = () => !pincodeNotValid;
+
+ function selectLocality(locality) {
+ setSelectedLocality(locality);
+ }
+
+ function setcategories(category) {
+ setcategoriesType(null);
+ setSelectedcategories(category);
+ }
+
+ function ChangesetToDate(value) {
+ if (new Date(fromDate) < new Date(value)) {
+ setToDate(value);
+ }
+ }
+ function setcategoriesType(categoryType) {
+ setselectedCategoryType(categoryType);
+ }
+
+ function humanized(str, key) {
+ if (Array.isArray(str)) {
+ str = str[0];
+ }
+ str = str.replace("BILLINGSERVICE_BUSINESSSERVICE_", "");
+ str = str.replace(key + "_", "");
+ var frags = str.split("_");
+ for (let i = 0; i < frags.length; i++) {
+ frags[i] = frags[i].charAt(0).toUpperCase() + frags[i].toLowerCase().slice(1);
+ }
+ return frags.join("_");
+ }
+
+ function humanize(str) {
+ var frags = str.split("_");
+ for (let i = 0; i < frags.length; i++) {
+ frags[i] = frags[i].charAt(0).toUpperCase() + frags[i].slice(1);
+ }
+ return frags.join("_");
+ }
+ const [showToast, setShowToast] = useState(null);
+ const [canSubmit, setSubmitValve] = useState(true);
+ const [localities, setLocalities] = useState(fetchedLocalities);
+ const [categoires, setAPIcategories] = useState([]);
+ const [categoiresType, setAPIcategoriesType] = useState([]);
+ const [selectedCategory, setSelectedcategories] = useState(null);
+ const [selectedCategoryType, setselectedCategoryType] = useState(null);
+ const [TaxHeadMaster, setAPITaxHeadMaster] = useState([]);
+ const [TaxHeadMasterFields, setTaxHeadMasterFields] = useState([]);
+ const [selectedLocality, setSelectedLocality] = useState(null);
+ const [pincodeNotValid, setPincodeNotValid] = useState(false);
+ const [fromDate, setFromDate] = useState("");
+ const [toDate, setToDate] = useState("");
+ const tenantId = window.Digit.SessionStorage.get("Employee.tenantId");
+ const [pincode, setPincode] = useState("");
+ const [selectedCity, setSelectedCity] = useState(getCities()[0] ? getCities()[0] : null);
+ const selectCity = async (city) => {
+ return;
+ };
+
+ if (isEdit == true && fetchBillData && ChallanData[0]) {
+ defaultval = {
+ name: ChallanData[0].citizen.name,
+ mobileNumber: ChallanData[0].citizen.mobileNumber,
+ doorNo: ChallanData[0].address.doorNo,
+ buildingName: ChallanData[0].address.buildingName,
+ street: ChallanData[0].address.street,
+ pincode: ChallanData[0].address.pincode,
+ ADVT_HOARDINGS_CGST: "10",
+ comments: ChallanData[0].description,
+ };
+ if (fetchBillData.Bill[0].billDetails[0].billAccountDetails.length > 0) {
+ fetchBillData.Bill[0].billDetails[0].billAccountDetails.map(
+ (ele) => (defaultval[`${ele.taxHeadCode.replaceAll(".", "_")}`] = `${ele.amount}`)
+ );
+ }
+ }
+
+ useEffect(() => {
+ if (isEdit && ChallanData[0] && fetchBillData) {
+ let setlocalit =
+ localities &&
+ localities.filter((el) => {
+ return el["code"] == ChallanData[0].address.locality.code;
+ });
+ localities && setSelectedLocality(setlocalit[0]);
+ let setcategory = categoires.filter((el) => {
+ return el["code"] == `BILLINGSERVICE_BUSINESSSERVICE_${ChallanData[0].businessService.split(".")[0]}`;
+ });
+ setSelectedcategories(setcategory[0]);
+ let setcategorytype = categoiresType.filter((el) => {
+ return el["code"] == `BILLINGSERVICE_BUSINESSSERVICE_${ChallanData[0].businessService.replaceAll(".", "_").toUpperCase()}`;
+ });
+ setselectedCategoryType(setcategorytype[0]);
+ }
+ }, [fetchBillData, ChallanData, categoires]);
+
+ useEffect(() => {
+ if (isEdit && ChallanData[0] && fetchBillData) {
+ let setcategorytype = categoiresType.filter((el) => {
+ return el["code"] == `BILLINGSERVICE_BUSINESSSERVICE_${ChallanData[0].businessService.replaceAll(".", "_").toUpperCase()}`;
+ });
+ setselectedCategoryType(setcategorytype[0]);
+ }
+ }, [categoiresType]);
+
+ useEffect(() => {
+ if (isEdit && ChallanData[0] && fetchBillData && !fromDate && !toDate) {
+ let fromdate = ChallanData[0]
+ ? new Date(ChallanData[0].taxPeriodFrom).getFullYear().toString() +
+ "-" +
+ (new Date(ChallanData[0].taxPeriodFrom).getMonth() + 1) +
+ "-" +
+ new Date(ChallanData[0].taxPeriodFrom).getDate()
+ : null;
+ ChallanData[0] && setFromDate(fromdate);
+ let todate = ChallanData[0]
+ ? new Date(ChallanData[0].taxPeriodTo).getFullYear().toString() +
+ "-" +
+ (new Date(ChallanData[0].taxPeriodTo).getMonth() + 1) +
+ "-" +
+ new Date(ChallanData[0].taxPeriodTo).getDate()
+ : null;
+ ChallanData[0] && setToDate(todate);
+ }
+ });
+
+ useEffect(() => {
+ setAPIcategoriesType(
+ selectedCategory?.child
+ ? selectedCategory.child.map((ele) => {
+ if (!ele.code.includes("BILLINGSERVICE_BUSINESSSERVICE_")) {
+ ele.code = "BILLINGSERVICE_BUSINESSSERVICE_" + ele.code.split(".").join("_").toUpperCase();
+ }
+ return ele;
+ })
+ : []
+ );
+ }, [selectedCategory]);
+
+ useEffect(() => {
+ let selectedCatBusinesService = selectedCategoryType?stringReplaceAll(selectedCategoryType?.businessService.split(".")[1]," ","_"):"";
+ setTaxHeadMasterFields(
+ TaxHeadMaster.filter((ele) => {
+ let temp = selectedCategory.code.replace("BILLINGSERVICE_BUSINESSSERVICE_", "");
+ return (
+ selectedCategoryType &&
+ selectedCategoryType.code.split(temp + "_")[1] &&
+ (ele.service == temp + "." + humanize(selectedCategoryType.code.split(temp + "_")[1].toLowerCase()) ||
+ ele.service == temp + "." + selectedCatBusinesService)
+ );
+ })
+ );
+ }, [selectedCategoryType]);
+
+ useEffect(() => {
+ setLocalities(fetchedLocalities);
+ }, [fetchedLocalities]);
+
+ useEffect(() => {
+ Digit.MDMSService.getPaymentRules(tenantId, "[?(@.type=='Adhoc')]").then((value) => {
+ setAPIcategories(
+ func.setServiceCategory(value.MdmsRes.BillingService.BusinessService).map((ele) => {
+ ele.code = "BILLINGSERVICE_BUSINESSSERVICE_" +stringReplaceAll(ele.code.toUpperCase()," ","_");
+ return ele;
+ })
+ );
+ setAPITaxHeadMaster(value.MdmsRes.BillingService.TaxHeadMaster);
+ });
+ }, [tenantId]);
+
+ useEffect(() => {
+ if (selectedCategory && selectedCategoryType && fromDate != "" && toDate != "" && selectedLocality != null) {
+ setSubmitValve(true);
+ } else {
+ setSubmitValve(false);
+ }
+ }, [selectedCategory, selectedCategoryType, selectedLocality, fromDate, toDate]);
+
+ useEffect(() => {
+ const city = cities ? cities.find((obj) => obj.pincode?.find((item) => item == pincode)) : [];
+ if (city?.code) {
+ setPincodeNotValid(false);
+ setSelectedCity(city);
+ setSelectedLocality(null);
+ const __localityList = fetchedLocalities;
+ const __filteredLocalities = __localityList.filter((city) => city["pincode"] == pincode);
+ setLocalities(__filteredLocalities);
+ } else if (pincode === "" || pincode === null) {
+ setPincodeNotValid(false);
+ setLocalities(fetchedLocalities);
+ } else {
+ setPincodeNotValid(true);
+ }
+ }, [pincode]);
+
+ const onSubmit = (data) => {
+ TaxHeadMasterFields.map((ele) => {
+ return { taxHeadCode: ele.code, amount: data[ele.code.split(".").join("_")] };
+ });
+ let Challan = {};
+ if (!isEdit) {
+ let temp = selectedCategory.code.replace("BILLINGSERVICE_BUSINESSSERVICE_", "");
+ Challan = {
+ citizen: {
+ name: data.name,
+ mobileNumber: data.mobileNumber,
+ },
+ //businessService: selectedCategoryType ? temp + "." + humanized(selectedCategoryType.code, temp) : "",
+ businessService:selectedCategoryType?(temp + "." + stringReplaceAll(selectedCategoryType?.businessService.split(".")[1]," ","_")) : "",
+ consumerType: temp,
+ description: data.comments,
+ taxPeriodFrom: Date.parse(fromDate),
+ taxPeriodTo: Date.parse(toDate),
+ tenantId: tenantId,
+ address: {
+ buildingName: data.buildingName,
+ doorNo: data.doorNo,
+ street: data.street,
+ locality: { code: selectedLocality.code },
+ },
+ amount: TaxHeadMasterFields.map((ele) => {
+ return {
+ taxHeadCode: ele.code,
+ amount: data[ele.code.split(".").join("_")] ? data[ele.code.split(".").join("_")] : 0,
+ };
+ }),
+ };
+ } else {
+ Challan = {
+ accountId: ChallanData[0].accountId,
+ citizen: ChallanData[0].citizen,
+ applicationStatus: ChallanData[0].applicationStatus,
+ auditDetails: ChallanData[0].auditDetails,
+ id: ChallanData[0].id,
+ businessService: ChallanData[0].businessService,
+ challanNo: ChallanData[0].challanNo,
+ consumerType: selectedCategory?.code,
+ description: data.comments,
+ taxPeriodFrom: Date.parse(fromDate),
+ taxPeriodTo: Date.parse(toDate),
+ tenantId: tenantId,
+ address: ChallanData[0].address,
+ amount: TaxHeadMasterFields.map((ele) => {
+ return {
+ taxHeadCode: ele.code,
+ amount: data[ele.code.split(".").join("_")] ? data[ele.code.split(".").join("_")] : 0,
+ };
+ }),
+ };
+ }
+
+ if (isEdit) {
+ Digit.MCollectService.update({ Challan: Challan }, tenantId)
+ .then((result, err) => {
+ if (result.challans && result.challans.length > 0) {
+ const challan = result.challans[0];
+ let LastModifiedTime = Digit.SessionStorage.set("isMcollectAppChanged", challan.auditDetails.lastModifiedTime);
+ Digit.MCollectService.generateBill(challan.challanNo, tenantId, challan.businessService, "challan").then((response) => {
+ if (response.Bill && response.Bill.length > 0) {
+ history.push(
+ `/digit-ui/employee/mcollect/acknowledgement?purpose=challan&status=success&tenantId=${tenantId}&billNumber=${
+ response.Bill[0].billNumber
+ }&serviceCategory=${response.Bill[0].businessService}&challanNumber=${response.Bill[0].consumerCode}&isEdit=${true}`,
+ { from: url }
+ );
+ }
+ });
+ }
+ })
+ .catch((e) => setShowToast({ key: true, label: e?.response?.data?.Errors[0].message }));
+ } else {
+ Digit.MCollectService.create({ Challan: Challan }, tenantId)
+ .then((result, err) => {
+ if (result.challans && result.challans.length > 0) {
+ const challan = result.challans[0];
+ Digit.MCollectService.generateBill(challan.challanNo, tenantId, challan.businessService, "challan").then((response) => {
+ if (response.Bill && response.Bill.length > 0) {
+ history.push(
+ `/digit-ui/employee/mcollect/acknowledgement?purpose=challan&status=success&tenantId=${tenantId}&billNumber=${response.Bill[0].billNumber}&serviceCategory=${response.Bill[0].businessService}&challanNumber=${response.Bill[0].consumerCode}`,
+ { from: url }
+ );
+ }
+ });
+ }
+ })
+ .catch((e) => setShowToast({ key: true, label: e?.response?.data?.Errors[0].message }));
+ }
+ };
+ function setconfig() {
+ const config = [
+ {
+ head: t("CONSUMERDETAILS"),
+ body: [
+ {
+ label: t("UC_CONS_NAME_LABEL"),
+ isMandatory: true,
+ type: "text",
+ populators: {
+ name: "name",
+ disable: isEdit,
+ validation: {
+ required: true,
+ pattern: /^[A-Za-z]/,
+ },
+ error: t("CS_ADDCOMPLAINT_NAME_ERROR"),
+ },
+ },
+ {
+ label: t("UC_MOBILE_NUMBER"),
+ isMandatory: true,
+ type: "text",
+ populators: {
+ name: "mobileNumber",
+ disable: isEdit,
+ validation: {
+ required: true,
+ pattern: /^[6-9]\d{9}$/,
+ },
+ componentInFront: +91
,
+ error: t("CORE_COMMON_MOBILE_ERROR"),
+ },
+ },
+ {
+ label: t("UC_DOOR_NO_LABEL"),
+ type: "text",
+ populators: {
+ name: "doorNo",
+ disable: isEdit,
+ },
+ },
+ {
+ label: t("UC_BLDG_NAME_LABEL"),
+ type: "text",
+ populators: {
+ name: "buildingName",
+ disable: isEdit,
+ },
+ },
+ {
+ label: t("UC_SRT_NAME_LABEL"),
+ type: "text",
+ populators: {
+ name: "street",
+ disable: isEdit,
+ },
+ },
+ {
+ label: t("UC_PINCODE_LABEL"),
+ type: "text",
+ populators: {
+ name: "pincode",
+ disable: isEdit,
+ validation: { pattern: /^[1-9][0-9]{5}$/, validate: isPincodeValid },
+ error: t("UC_PINCODE_INVALID"),
+ onChange: handlePincode,
+ },
+ },
+ {
+ label: t("UC_MOHALLA_LABEL"),
+ type: "dropdown",
+ isMandatory: true,
+ name: "Mohalla",
+ dependency: localities ? true : false,
+ populators: (
+ ₹
,
+ },
+ }));
+ if (temp.length > 0) {
+ tempConfig[1].body = [...tempConfig[1].body, ...temp];
+ }
+ }
+ return tempConfig;
+ } else {
+ return config;
+ }
+ }
+
+ return (
+
+ setShowToast(null)} />}
+
+ );
+};
+export default CreateChallen;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/EditChallan/index.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/EditChallan/index.js
new file mode 100644
index 00000000000..66147809b6a
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/EditChallan/index.js
@@ -0,0 +1,16 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+//import EditForm from "./EditForm";
+import CreateChallen from "../CreateChallan";
+
+const EditChallan = () => {
+ let filters = {};
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const { t } = useTranslation();
+ let { challanNo: challanNo } = useParams();
+ let isMcollectAppChanged = Digit.SessionStorage.get("isMcollectAppChanged");
+ const { isLoading, data: result } = Digit.Hooks.mcollect.useMCollectSearch({ tenantId, filters: { challanNo }, isMcollectAppChanged });
+ return result && !isLoading ?
+ {params?.applicationStatus === "CANCELLED" ? (
+
+ {t("UC_BILL_CANCELLED_SUCCESS_SUB_MESSAGE")}
+ {"generatePdfKey" ? (
+
+
+
+ {t("UC_PRINT_CHALLAN_LABEL")}
+
+
+
+ ) : (
+
+ {t("UC_BILL_GENERATION_MESSAGE_SUB")}
+ {"generatePdfKey" ? (
+
+
+
+ {t("UC_PRINT_CHALLAN_LABEL")}
+
+
+
+ )}
+
+ );
+ } else {
+ return (
+
+ {isInbox && {t("UC_SEARCH_MCOLLECT_HEADER")} }
+
+ );
+ }
+ }
+};
+
+export default Inbox;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/Utils/Category.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/Utils/Category.js
new file mode 100755
index 00000000000..3f195e1fc44
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/Utils/Category.js
@@ -0,0 +1,35 @@
+import get from "lodash/get";
+import set from "lodash/set";
+export const setServiceCategory = (businessServiceData, dispatch, state, setCategory = true) => {
+ String.prototype.replaceAt = function (index, replacement) {
+ return this.substr(0, index) + replacement + this.substr(index + replacement.length);
+ };
+ let nestedServiceData = {};
+ businessServiceData.forEach((item) => {
+ if (item.code.includes("BILLINGSERVICE_BUSINESSSERVICE_")) {
+ let str = item.code.replace("BILLINGSERVICE_BUSINESSSERVICE_", "");
+ var frags = str.split("_");
+ for (let i = 0; i < frags.length; i++) {
+ frags[i] = frags[i].charAt(0).toUpperCase() + frags[i].toLowerCase().slice(1);
+ }
+ frags[0] = frags[0].toUpperCase();
+ item.code = frags.join("_");
+ item.code = item.code.replaceAt(item.code.indexOf("_"), ".");
+ }
+ if (item.code && item.code.indexOf(".") > 0) {
+ if (nestedServiceData[item.code.split(".")[0]]) {
+ let child = get(nestedServiceData, `${item.code.split(".")[0]}.child`, []);
+ child.push(item);
+ set(nestedServiceData, `${item.code.split(".")[0]}.child`, child);
+ } else {
+ set(nestedServiceData, `${item.code.split(".")[0]}.code`, item.code.split(".")[0]);
+ set(nestedServiceData, `${item.code.split(".")[0]}.child[0]`, item);
+ }
+ } else {
+ set(nestedServiceData, `${item.code}`, item);
+ }
+ });
+
+ let serviceCategories = Object.values(nestedServiceData).filter((item) => item.code);
+ return serviceCategories;
+};
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/Utils/Sortbyname.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/Utils/Sortbyname.js
new file mode 100644
index 00000000000..65bec6288a2
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/Utils/Sortbyname.js
@@ -0,0 +1,3 @@
+export const sortDropdownNames = (options, optionkey, locilizationkey) => {
+ return options.sort((a, b) => locilizationkey(a[optionkey]).localeCompare(locilizationkey(b[optionkey])));
+};
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/Utils/getQueryParams.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/Utils/getQueryParams.js
new file mode 100644
index 00000000000..c678c75b51b
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/Utils/getQueryParams.js
@@ -0,0 +1,9 @@
+export const getQueryStringParams = (query) => {
+ return query
+ ? (/^[?#]/.test(query) ? query.slice(1) : query).split("&").reduce((params, param) => {
+ let [key, value] = param.split("=");
+ params[key] = value ? decodeURIComponent(value.replace(/\+/g, " ")) : "";
+ return params;
+ }, {})
+ : {};
+};
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/index.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/index.js
new file mode 100755
index 00000000000..ad1945f5d47
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/pages/employee/index.js
@@ -0,0 +1,89 @@
+import React from "react";
+import { MCollectLinks } from "../../Module";
+import Inbox from "./Inbox";
+import { Switch, useLocation, Link } from "react-router-dom";
+import { PrivateRoute } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import EmployeeChallan from "../../EmployeeChallan";
+import CreateChallen from "../employee/CreateChallan";
+import MCollectAcknowledgement from "../employee/EmployeeChallanAcknowledgement";
+import EditChallan from "../employee/EditChallan/index";
+
+const EmployeeApp = ({ path, url, userType }) => {
+ const { t } = useTranslation();
+ const location = useLocation();
+ const mobileView = innerWidth <= 640;
+
+ const inboxInitialState = {
+ searchParams: {
+ // uuid: { code: "ASSIGNED_TO_ALL", name: "ES_INBOX_ASSIGNED_TO_ALL" },
+ // services: ["PT.CREATE"],
+ status: [],
+ businessService: [],
+ // locality: [],
+ },
+ };
+
+ const combineTaxDueInSearchData = async (searchData, _break, _next) => {
+ let returnData;
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ let businessService = ["PT"].join();
+ let consumerCode = searchData.map((e) => e.propertyId).join();
+ try {
+ const res = await Digit.PaymentService.fetchBill(tenantId, { consumerCode, businessService });
+ let obj = {};
+ res.Bill.forEach((e) => {
+ obj[e.consumerCode] = e.totalAmount;
+ });
+ returnData = searchData.map((e) => ({ ...e, due_tax: "₹ " + (obj[e.propertyId] || 0) }));
+ } catch (er) {
+ const err = er?.response?.data;
+ if (["EG_BS_BILL_NO_DEMANDS_FOUND", "EMPTY_DEMANDS"].includes(err?.Errors?.[0].code)) {
+ returnData = searchData.map((e) => ({ ...e, due_tax: "₹ " + 0 }));
+ }
+ }
+ return _next(returnData);
+ };
+
+ const searchMW = [{ combineTaxDueInSearchData }];
+
+ return (
+
+
+
+
+ {location.pathname === "/digit-ui/employee/mcollect/inbox" ? t("UC_SEARCH_HEADER") : t("UC_COMMON_HEADER_SEARCH")}
+
+
(
+ (
+
+
+ );
+};
+
+export default EmployeeApp;
diff --git a/frontend/micro-ui-internals/packages/modules/mCollect/src/utils/index.js b/frontend/micro-ui-internals/packages/modules/mCollect/src/utils/index.js
new file mode 100644
index 00000000000..a4fe6825128
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/mCollect/src/utils/index.js
@@ -0,0 +1,103 @@
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+export const printReciept = async (businessService, receiptNumber) => {
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const state = tenantId?.split(".")[0];
+ const payments = await Digit.PaymentService.getReciept(tenantId, businessService, { consumerCodes: receiptNumber });
+ let response = { filestoreIds: [payments.Payments[0]?.fileStoreId] };
+
+ if (!payments.Payments[0]?.fileStoreId) {
+ response = await Digit.PaymentService.generatePdf(state, { Payments: payments.Payments }, "consolidatedreceipt");
+ }
+ const fileStore = await Digit.PaymentService.printReciept(state, { fileStoreIds: response.filestoreIds[0] });
+ window.open(fileStore[response.filestoreIds[0]], "_blank");
+};
+
+export const getActionButton = (businessService, receiptNumber) => {
+ const { t } = useTranslation();
+ return (
+ {
+ // printReciept(businessService, receiptNumber);
+ downloadAndPrintReciept(businessService, receiptNumber);
+ }}
+ >
+ {" "}
+ {t(`${"UC_DOWNLOAD_RECEIPT"}`)}{" "}
+
+ );
+};
+
+export const stringReplaceAll = (str = "", searcher = "", replaceWith = "") => {
+ if (searcher == "") return str;
+ while (str.includes(searcher)) {
+ str = str.replace(searcher, replaceWith);
+ }
+ return str;
+};
+
+export const convertEpochToDate = (dateEpoch) => {
+ if (dateEpoch == null || dateEpoch == undefined || dateEpoch == "") {
+ return "NA";
+ }
+ const dateFromApi = new Date(dateEpoch);
+ let month = dateFromApi.getMonth() + 1;
+ let day = dateFromApi.getDate();
+ let year = dateFromApi.getFullYear();
+ month = (month > 9 ? "" : "0") + month;
+ day = (day > 9 ? "" : "0") + day;
+ return `${day}/${month}/${year}`;
+};
+
+export const downloadPdf = (blob, fileName) => {
+ const link = document.createElement("a");
+ // create a blobURI pointing to our Blob
+ link.href = URL.createObjectURL(blob);
+ link.download = fileName;
+ // some browser needs the anchor to be in the doc
+ document.body.append(link);
+ link.click();
+ link.remove();
+ // in case the Blob uses a lot of memory
+ setTimeout(() => URL.revokeObjectURL(link.href), 7000);
+};
+
+export const printPdf = (blob) => {
+ const fileURL = URL.createObjectURL(blob);
+ var myWindow = window.open(fileURL);
+ if (myWindow != undefined) {
+ myWindow.addEventListener("load", (event) => {
+ myWindow.focus();
+ myWindow.print();
+ });
+ }
+};
+
+export const downloadAndPrintChallan = async (challanNo, mode = "download") => {
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const response = await Digit.MCollectService.downloadPdf(challanNo, tenantId);
+ const responseStatus = parseInt(response.status, 10);
+ if (responseStatus === 201 || responseStatus === 200) {
+ mode == "print"
+ ? printPdf(new Blob([response.data], { type: "application/pdf" }))
+ : downloadPdf(new Blob([response.data], { type: "application/pdf" }), `CHALLAN-${challanNo}.pdf`);
+ }
+};
+
+export const downloadAndPrintReciept = async (bussinessService, consumerCode, mode = "download") => {
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const response = await Digit.MCollectService.receipt_download(bussinessService, consumerCode, tenantId);
+ const responseStatus = parseInt(response.status, 10);
+ if (responseStatus === 201 || responseStatus === 200) {
+ let fileName =
+ mode == "print"
+ ? printPdf(new Blob([response.data], { type: "application/pdf" }))
+ : downloadPdf(new Blob([response.data], { type: "application/pdf" }), `CHALLAN-${consumerCode}.pdf`);
+ }
+};
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/README.md b/frontend/micro-ui-internals/packages/modules/pgr/README.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/package.json b/frontend/micro-ui-internals/packages/modules/pgr/package.json
new file mode 100644
index 00000000000..161fc1e46df
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/package.json
@@ -0,0 +1,35 @@
+{
+ "name": "@egovernments/digit-ui-module-pgr",
+ "version": "1.3.0",
+ "license": "MIT",
+ "main": "dist/index.js",
+ "module": "dist/index.modern.js",
+ "source": "src/Module.js",
+ "files": [
+ "dist"
+ ],
+ "scripts": {
+ "start": "microbundle-crl watch --no-compress --format modern,cjs",
+ "build": "microbundle-crl --no-compress --format modern,cjs",
+ "prepublish": "yarn build"
+ },
+ "peerDependencies": {
+ "react": "^17.0.0",
+ "react-router-dom": "^5.2.0"
+ },
+ "dependencies": {
+ "@egovernments/digit-ui-libraries": "^1.3.0",
+ "@egovernments/digit-ui-react-components": "^1.3.0",
+ "lodash.merge": "^4.6.2",
+ "react": "^17.0.0",
+ "react-dom": "^17.0.0",
+ "react-hook-form": "^6.7.0",
+ "react-i18next": "^11.7.3",
+ "react-query": "^3.6.1",
+ "react-redux": "^7.2.1",
+ "react-router-dom": "^5.2.0",
+ "react-table": "^7.6.1",
+ "redux": "^4.0.5",
+ "redux-thunk": "^2.3.0"
+ }
+}
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/EmployeeApp.js b/frontend/micro-ui-internals/packages/modules/pgr/src/EmployeeApp.js
new file mode 100644
index 00000000000..3cbbdc4f52a
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/EmployeeApp.js
@@ -0,0 +1,13 @@
+import React from "react";
+import { AppContainer, EmployeeAppContainer } from "@egovernments/digit-ui-react-components";
+
+import Complaint from "./pages/employee/index";
+const App = () => {
+ return (
+
+
+ );
+};
+
+export default App;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/Icons.js b/frontend/micro-ui-internals/packages/modules/pgr/src/Icons.js
new file mode 100644
index 00000000000..c932e7ad466
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/Icons.js
@@ -0,0 +1,8 @@
+import React from "react";
+
+export const Close = () => (
+
+
+);
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/Module.js b/frontend/micro-ui-internals/packages/modules/pgr/src/Module.js
new file mode 100644
index 00000000000..0d91d20a9cf
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/Module.js
@@ -0,0 +1,64 @@
+import React, { useEffect } from "react";
+import PGRCard from "./components/PGRCard";
+
+import getRootReducer from "./redux/reducers";
+import CitizenApp from "./pages/citizen";
+
+import EmployeeApp from "./EmployeeApp";
+import { ComplaintIcon, CitizenHomeCard, Loader } from "@egovernments/digit-ui-react-components";
+import { PGR_CITIZEN_CREATE_COMPLAINT } from "./constants/Citizen";
+import { useTranslation } from "react-i18next";
+import { LOCALE } from "./constants/Localization";
+export const PGRReducers = getRootReducer;
+
+const PGRModule = ({ stateCode, userType, tenants }) => {
+ const moduleCode = "PGR";
+ const language = Digit.StoreData.getCurrentLanguage();
+ const { isLoading, data: store } = Digit.Services.useStore({ stateCode, moduleCode, language });
+
+ if (isLoading) {
+ return
+
+ {t(`SERVICEDEFS.${serviceCode.toUpperCase()}`)}
+
+
+
{(closedStatus.includes(applicationStatus) ? t("CS_COMMON_CLOSED") : t("CS_COMMON_OPEN")).toUpperCase()}
+
+
+ );
+};
+
+export default Complaint;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/components/DesktopInbox.js b/frontend/micro-ui-internals/packages/modules/pgr/src/components/DesktopInbox.js
new file mode 100644
index 00000000000..a81aba6a4c8
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/components/DesktopInbox.js
@@ -0,0 +1,143 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { Card, Loader } from "@egovernments/digit-ui-react-components";
+import ComplaintsLink from "./inbox/ComplaintLinks";
+import ComplaintTable from "./inbox/ComplaintTable";
+import Filter from "./inbox/Filter";
+import SearchComplaint from "./inbox/search";
+import { LOCALE } from "../constants/Localization";
+
+const DesktopInbox = ({
+ data,
+ onFilterChange,
+ onSearch,
+ isLoading,
+ searchParams,
+ onNextPage,
+ onPrevPage,
+ currentPage,
+ pageSizeLimit,
+ onPageSizeChange,
+ totalRecords,
+}) => {
+ const { t } = useTranslation();
+ const GetCell = (value) => {value} ;
+ const GetSlaCell = (value) => {
+ return value < 0 ? {value || ""} : {value || ""} ;
+ };
+
+ const columns = React.useMemo(
+ () => [
+ {
+ Header: t("CS_COMMON_COMPLAINT_NO"),
+ Cell: ({ row }) => {
+ return (
+
+ );
+ },
+ },
+ {
+ Header: t("WF_INBOX_HEADER_LOCALITY"),
+ Cell: ({ row }) => {
+ return GetCell(t(Digit.Utils.locale.getLocalityCode(row.original["locality"], row.original["tenantId"])));
+ },
+ },
+ {
+ Header: t("CS_COMPLAINT_DETAILS_CURRENT_STATUS"),
+ Cell: ({ row }) => {
+ return GetCell(t(`CS_COMMON_${row.original["status"]}`));
+ },
+ },
+ {
+ Header: t("WF_INBOX_HEADER_CURRENT_OWNER"),
+ Cell: ({ row }) => {
+ return GetCell(row.original["taskOwner"]);
+ },
+ },
+ {
+ Header: t("WF_INBOX_HEADER_SLA_DAYS_REMAINING"),
+ Cell: ({ row }) => {
+ return GetSlaCell(row.original["sla"]);
+ },
+ },
+ ],
+ [t]
+ );
+
+ let result;
+ if (isLoading) {
+ result =
+ {t(LOCALE.NO_COMPLAINTS_EMPLOYEE)
+ .split("\\n")
+ .map((text, index) => (
+
+ {text}
+
+ ))}
+
+ );
+ } else if (data.length > 0) {
+ result = (
+ {
+ return {
+ style: {
+ minWidth: cellInfo.column.Header === t("CS_COMMON_COMPLAINT_NO") ? "240px" : "",
+ padding: "20px 18px",
+ fontSize: "16px",
+ },
+ };
+ }}
+ onNextPage={onNextPage}
+ onPrevPage={onPrevPage}
+ totalRecords={totalRecords}
+ onPageSizeChagne={onPageSizeChange}
+ currentPage={currentPage}
+ pageSizeLimit={pageSizeLimit}
+ />
+ );
+ } else {
+ result = (
+
+ {t(LOCALE.ERROR_LOADING_RESULTS)
+ .split("\\n")
+ .map((text, index) => (
+
+ {text}
+
+ ))}
+
+ );
+ }
+
+ return (
+
+ );
+};
+
+export default DesktopInbox;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/components/FormComposer.js b/frontend/micro-ui-internals/packages/modules/pgr/src/components/FormComposer.js
new file mode 100644
index 00000000000..785f9cde039
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/components/FormComposer.js
@@ -0,0 +1,86 @@
+import React, { useMemo } from "react";
+import { useForm } from "react-hook-form";
+import {
+ BreakLine,
+ Card,
+ CardLabel,
+ CardLabelError,
+ CardSubHeader,
+ CardSectionHeader,
+ TextArea,
+ TextInput,
+ ActionBar,
+ SubmitBar,
+ LabelFieldPair,
+} from "@egovernments/digit-ui-react-components";
+
+import { useTranslation } from "react-i18next";
+
+export const FormComposer = (props) => {
+ const { register, handleSubmit, errors } = useForm();
+ const { t } = useTranslation();
+
+ function onSubmit(data) {
+ props.onSubmit(data);
+ }
+
+ const fieldSelector = (type, populators) => {
+ switch (type) {
+ case "text":
+ return (
+
+ {populators.componentInFront ? populators.componentInFront : null}
+
+ );
+ case "textarea":
+ return ;
+ default:
+ return populators.dependency !== false ? populators : null;
+ }
+ };
+
+ const formFields = useMemo(
+ () =>
+ props.config?.map((section, index, array) => {
+ return (
+
+ {section.head}
+ {section.body.map((field, index) => {
+ return (
+
+ {errors[field.populators.name] && (field.populators?.validate ? errors[field.populators.validate] : true) && (
+ {field.populators.error}
+ )}
+
+
+ {field.label}
+ {field.isMandatory ? " * " : null}
+
+ {fieldSelector(field.type, field.populators)}
+
+
+ );
+ })}
+ {array.length - 1 === index ? null :
+ );
+ }),
+ [props.config, errors]
+ );
+
+ const isDisabled = props.isDisabled || false;
+
+ return (
+
+ );
+};
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/components/MobileInbox.js b/frontend/micro-ui-internals/packages/modules/pgr/src/components/MobileInbox.js
new file mode 100644
index 00000000000..34e8f9eadbf
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/components/MobileInbox.js
@@ -0,0 +1,64 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Loader, Card } from "@egovernments/digit-ui-react-components";
+import { ComplaintCard } from "./inbox/ComplaintCard";
+import ComplaintsLink from "./inbox/ComplaintLinks";
+import { LOCALE } from "../constants/Localization";
+import PropTypes from "prop-types";
+
+const GetSlaCell = (value) => {
+ return value < 0 ? {value} : {value} ;
+};
+
+const MobileInbox = ({ data, onFilterChange, onSearch, isLoading, searchParams }) => {
+ const { t } = useTranslation();
+ const localizedData = data?.map(({ locality, tenantId, serviceRequestId, complaintSubType, sla, status, taskOwner }) => ({
+ [t("CS_COMMON_COMPLAINT_NO")]: serviceRequestId,
+ [t("CS_ADDCOMPLAINT_COMPLAINT_SUB_TYPE")]: t(`SERVICEDEFS.${complaintSubType.toUpperCase()}`),
+ [t("WF_INBOX_HEADER_LOCALITY")]: t(Digit.Utils.locale.getLocalityCode(locality, tenantId)),
+ [t("CS_COMPLAINT_DETAILS_CURRENT_STATUS")]: t(`CS_COMMON_${status}`),
+ [t("WF_INBOX_HEADER_CURRENT_OWNER")]: taskOwner,
+ [t("WF_INBOX_HEADER_SLA_DAYS_REMAINING")]: GetSlaCell(sla),
+ // status,
+ }));
+
+ let result;
+ if (isLoading) {
+ result =
+
+
+ const propsForCSR =[
+ {
+ label: t("ES_PGR_NEW_COMPLAINT"),
+ link: `/digit-ui/employee/pgr/complaint/create`
+ }
+ ]
+
+ const propsForModuleCard = {
+ Icon:
+ {t(`${LOCALIZATION_KEY.CS_COMPLAINT_DETAILS}_COMPLAINT_TIMELINE`)}
+ {timeline && timeline.length > 0 ? (
+
+ {timeline.map(({ status, caption, auditDetails, timeLineActions, performedAction }, index, array) => {
+ return getCheckPoint({ status, caption, auditDetails, timeLineActions, index, array, performedAction });
+ })}
+
+ ) : (
+
+ );
+};
+
+export default TimeLine;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/components/inbox/ComplaintCard.js b/frontend/micro-ui-internals/packages/modules/pgr/src/components/inbox/ComplaintCard.js
new file mode 100644
index 00000000000..13a625a7c3e
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/components/inbox/ComplaintCard.js
@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+
+import { FilterAction, Card, DetailsCard, PopUp, SearchAction } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import Filter from "./Filter";
+import SearchComplaint from "./search";
+import { LOCALE } from "../../constants/Localization";
+
+export const ComplaintCard = ({ data, onFilterChange, onSearch, serviceRequestIdKey, searchParams }) => {
+ const { t } = useTranslation();
+ const [popup, setPopup] = useState(false);
+ const [selectedComponent, setSelectedComponent] = useState(null);
+ const [filterCount, setFilterCount] = useState(Digit.inboxFilterCount || 1);
+
+ const handlePopupAction = (type) => {
+ if (type === "SEARCH") {
+ setSelectedComponent(
+ {t(LOCALE.NO_COMPLAINTS_EMPLOYEE)
+ .split("\\n")
+ .map((text, index) => (
+
+ {text}
+
+ ))}
+
+ );
+ } else if (data && data?.length > 0) {
+ result =
+ {t(LOCALE.ERROR_LOADING_RESULTS)
+ .split("\\n")
+ .map((text, index) => (
+
+ {text}
+
+ ))}
+
+ );
+ }
+
+ return (
+
+
+ handlePopupAction("SEARCH")} />
+ handlePopupAction("FILTER")} />
+ {/*
+ {result}
+ {popup && (
+
+ {selectedComponent}
+
+ )}
+
+ );
+};
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/components/inbox/ComplaintLinks.js b/frontend/micro-ui-internals/packages/modules/pgr/src/components/inbox/ComplaintLinks.js
new file mode 100644
index 00000000000..bc6d989b3c6
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/components/inbox/ComplaintLinks.js
@@ -0,0 +1,68 @@
+import { Card } from "@egovernments/digit-ui-react-components";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+const ComplaintsLink = ({ isMobile, data }) => {
+ const { t } = useTranslation();
+
+ const allLinks = [
+ { text: "ES_PGR_NEW_COMPLAINT", link: "/digit-ui/employee/pgr/complaint/create", accessTo: ["CSR"] },
+ // { text: "Reports", link: "/employee" },
+ // { text: "Dashboard", link: "/employee" },
+ ];
+
+ const [links, setLinks] = useState([]);
+
+ useEffect(() => {
+ let linksToShow = [];
+ allLinks.forEach((link) => {
+ if (link.accessTo) {
+ if (Digit.UserService.hasAccess(link.accessTo)) {
+ linksToShow.push(link);
+ }
+ } else {
+ linksToShow.push(link);
+ }
+ });
+ setLinks(linksToShow);
+ }, []);
+
+ // useEffect(() => {
+ // if (isMobile) {
+ // const mobileLinks = links.filter((link) => {
+ // return link.text !== "Dashboard";
+ // });
+ // setLinks(mobileLinks);
+ // }
+ // }, []);
+
+ const GetLogo = () => (
+
+
+
+
+ {" "}
+
{t("ES_PGR_HEADER_COMPLAINT")}
+
+
+ {GetLogo()}
+
+ {links.map(({ link, text }, index) => (
+
+
+ ))}
+
+
+ );
+};
+
+export default ComplaintsLink;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/components/inbox/ComplaintTable.js b/frontend/micro-ui-internals/packages/modules/pgr/src/components/inbox/ComplaintTable.js
new file mode 100644
index 00000000000..7facec2f239
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/components/inbox/ComplaintTable.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { Table } from "@egovernments/digit-ui-react-components";
+
+const ComplaintTable = ({ t, columns, data, getCellProps, onNextPage, onPrevPage, currentPage, totalRecords, pageSizeLimit, onPageSizeChange }) => (
+
+);
+
+export default ComplaintTable;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/components/inbox/Filter.js b/frontend/micro-ui-internals/packages/modules/pgr/src/components/inbox/Filter.js
new file mode 100644
index 00000000000..0a57aa77329
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/components/inbox/Filter.js
@@ -0,0 +1,228 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Dropdown, RadioButtons, ActionBar, RemoveableTag, RoundedLabel } from "@egovernments/digit-ui-react-components";
+import { ApplyFilterBar, CloseSvg } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import Status from "./Status";
+
+let pgrQuery = {};
+let wfQuery = {};
+
+const Filter = (props) => {
+ let { uuid } = Digit.UserService.getUser().info;
+ const { searchParams } = props;
+ const { t } = useTranslation();
+ const isAssignedToMe = searchParams?.filters?.wfFilters?.assignee && searchParams?.filters?.wfFilters?.assignee[0]?.code ? true : false;
+
+ const assignedToOptions = useMemo(
+ () => [
+ { code: "ASSIGNED_TO_ME", name: t("ASSIGNED_TO_ME") },
+ { code: "ASSIGNED_TO_ALL", name: t("ASSIGNED_TO_ALL") },
+ ],
+ [t]
+ );
+
+ const [selectAssigned, setSelectedAssigned] = useState(isAssignedToMe ? assignedToOptions[0] : assignedToOptions[1]);
+
+ useEffect(() => setSelectedAssigned(isAssignedToMe ? assignedToOptions[0] : assignedToOptions[1]), [t]);
+
+ const [selectedComplaintType, setSelectedComplaintType] = useState(null);
+ const [selectedLocality, setSelectedLocality] = useState(null);
+ const [pgrfilters, setPgrFilters] = useState(
+ searchParams?.filters?.pgrfilters || {
+ serviceCode: [],
+ locality: [],
+ applicationStatus: [],
+ }
+ );
+
+ const [wfFilters, setWfFilters] = useState(
+ searchParams?.filters?.wfFilters || {
+ assignee: [{ code: uuid }],
+ }
+ );
+
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ // let localities = Digit.Hooks.pgr.useLocalities({ city: tenantId });
+ const { data: localities } = Digit.Hooks.useBoundaryLocalities(tenantId, "admin", {}, t);
+ let serviceDefs = Digit.Hooks.pgr.useServiceDefs(tenantId, "PGR");
+
+ const onRadioChange = (value) => {
+ setSelectedAssigned(value);
+ uuid = value.code === "ASSIGNED_TO_ME" ? uuid : "";
+ setWfFilters({ ...wfFilters, assignee: [{ code: uuid }] });
+ };
+
+ useEffect(() => {
+ let count = 0;
+ for (const property in pgrfilters) {
+ if (Array.isArray(pgrfilters[property])) {
+ count += pgrfilters[property].length;
+ let params = pgrfilters[property].map((prop) => prop.code).join();
+ if (params) {
+ pgrQuery[property] = params;
+ }
+ else{
+ delete pgrQuery?.[property]
+ }
+ }
+ }
+ for (const property in wfFilters) {
+ if (Array.isArray(wfFilters[property])) {
+ let params = wfFilters[property].map((prop) => prop.code).join();
+ if (params) {
+ wfQuery[property] = params;
+ } else {
+ wfQuery = {};
+ }
+ }
+ }
+ count += wfFilters?.assignee?.length || 0;
+
+ if (props.type !== "mobile") {
+ handleFilterSubmit();
+ }
+
+ Digit.inboxFilterCount = count;
+ // console.log("pgrQuery::::>", pgrQuery, "wfQuery::::>", wfQuery);
+ }, [pgrfilters, wfFilters]);
+
+ const ifExists = (list, key) => {
+ return list.filter((object) => object.code === key.code).length;
+ };
+ function applyFiltersAndClose() {
+ handleFilterSubmit();
+ props.onClose();
+ }
+ function complaintType(_type) {
+ const type = { i18nKey: t("SERVICEDEFS." + _type.serviceCode.toUpperCase()), code: _type.serviceCode };
+ if (!ifExists(pgrfilters.serviceCode, type)) {
+ setPgrFilters({ ...pgrfilters, serviceCode: [...pgrfilters.serviceCode, type] });
+ }
+ }
+
+ function onSelectLocality(value, type) {
+ if (!ifExists(pgrfilters.locality, value)) {
+ setPgrFilters({ ...pgrfilters, locality: [...pgrfilters.locality, value] });
+ }
+ }
+
+ useEffect(() => {
+ if (pgrfilters.serviceCode.length > 1) {
+ setSelectedComplaintType({ i18nKey: `${pgrfilters.serviceCode.length} selected` });
+ } else {
+ setSelectedComplaintType(pgrfilters.serviceCode[0]);
+ }
+ }, [pgrfilters.serviceCode]);
+
+ useEffect(() => {
+ if (pgrfilters.locality.length > 1) {
+ setSelectedLocality({ name: `${pgrfilters.locality.length} selected` });
+ } else {
+ setSelectedLocality(pgrfilters.locality[0]);
+ }
+ }, [pgrfilters.locality]);
+
+ const onRemove = (index, key) => {
+ let afterRemove = pgrfilters[key].filter((value, i) => {
+ return i !== index;
+ });
+ setPgrFilters({ ...pgrfilters, [key]: afterRemove });
+ };
+
+ const handleAssignmentChange = (e, type) => {
+ if (e.target.checked) {
+ setPgrFilters({ ...pgrfilters, applicationStatus: [...pgrfilters.applicationStatus, { code: type.code }] });
+ } else {
+ const filteredStatus = pgrfilters.applicationStatus.filter((value) => {
+ return value.code !== type.code;
+ });
+ setPgrFilters({ ...pgrfilters, applicationStatus: filteredStatus });
+ }
+ };
+
+ function clearAll() {
+ let pgrReset = { serviceCode: [], locality: [], applicationStatus: [] };
+ let wfRest = { assigned: [{ code: [] }] };
+ setPgrFilters(pgrReset);
+ setWfFilters(wfRest);
+ pgrQuery = {};
+ wfQuery = {};
+ setSelectedAssigned("");
+ setSelectedComplaintType(null);
+ setSelectedLocality(null);
+ }
+
+ const handleFilterSubmit = () => {
+ props.onFilterChange({ pgrQuery: pgrQuery, wfQuery: wfQuery, wfFilters, pgrfilters });
+ };
+
+ const GetSelectOptions = (lable, options, selected = null, select, optionKey, onRemove, key) => {
+ selected = selected || { [optionKey]: " ", code: "" };
+ return (
+
+
{lable}
+ {
select(value, key)} optionKey={optionKey} />}
+
+
+ {pgrfilters[key].length > 0 &&
+ pgrfilters[key].map((value, index) => {
+ return onRemove(index, key)} />;
+ })}
+
+
+
+
+
+
{t("ES_COMMON_FILTER_BY")}:
+
+ {t("ES_COMMON_CLEAR_ALL")}
+
+ {props.type === "desktop" && (
+
+ {t("ES_COMMON_CLEAR_ALL")}
+
+ )}
+ {props.type === "mobile" && (
+
+
+ )}
+
+
+
+
+ {GetSelectOptions(
+ t("CS_COMPLAINT_DETAILS_COMPLAINT_SUBTYPE"),
+ serviceDefs,
+ selectedComplaintType,
+ complaintType,
+ "i18nKey",
+ onRemove,
+ "serviceCode"
+ )}
+
+
{GetSelectOptions(t("CS_PGR_LOCALITY"), localities, selectedLocality, onSelectLocality, "i18nkey", onRemove, "locality")}
+ {
}
+
+
+
+ {props.type === "mobile" && (
+
+
+ );
+};
+
+export default Filter;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/components/inbox/Status.js b/frontend/micro-ui-internals/packages/modules/pgr/src/components/inbox/Status.js
new file mode 100644
index 00000000000..1980ab00ae3
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/components/inbox/Status.js
@@ -0,0 +1,27 @@
+import React from "react";
+import { CheckBox, Loader } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+
+const Status = ({ complaints, onAssignmentChange, pgrfilters }) => {
+ const { t } = useTranslation();
+ const complaintsWithCount = Digit.Hooks.pgr.useComplaintStatusCount(complaints);
+ let hasFilters = pgrfilters?.applicationStatus?.length;
+ return (
+
+
{t("ES_PGR_FILTER_STATUS")}
+ {complaintsWithCount.length === 0 &&
}
+ {complaintsWithCount.map((option, index) => {
+ return (
+
onAssignmentChange(e, option)}
+ checked={hasFilters ? (pgrfilters.applicationStatus.filter((e) => e.code === option.code).length !== 0 ? true : false) : false}
+ label={`${option.name} (${option.count || 0})`}
+ />
+ );
+ })}
+
+ {t("ES_COMMON_CLEAR_SEARCH")}
+
+ );
+ };
+
+ function setComplaint(e) {
+ setComplaintNo(e.target.value);
+ }
+
+ function setMobile(e) {
+ setMobileNo(e.target.value);
+ }
+
+ return (
+
+ );
+};
+
+export default SearchComplaint;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/components/timelineInstances/PendingForAssignment.js b/frontend/micro-ui-internals/packages/modules/pgr/src/components/timelineInstances/PendingForAssignment.js
new file mode 100644
index 00000000000..03e3f2b1240
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/components/timelineInstances/PendingForAssignment.js
@@ -0,0 +1,8 @@
+import React from "react";
+import { CheckPoint } from "@egovernments/digit-ui-react-components";
+
+const PendingForAssignment = ({ isCompleted, text, complaintFiledDate }) => {
+ return {text} ;
+
+export default PendingForReassignment;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/components/timelineInstances/StarRated.js b/frontend/micro-ui-internals/packages/modules/pgr/src/components/timelineInstances/StarRated.js
new file mode 100644
index 00000000000..23efde2d31a
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/components/timelineInstances/StarRated.js
@@ -0,0 +1,6 @@
+import React from "react";
+import { Rating } from "@egovernments/digit-ui-react-components";
+
+const StarRated = ({ text, rating }) => {}} />;
+
+export default StarRated;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/components/timelineInstances/pendingAtLme.js b/frontend/micro-ui-internals/packages/modules/pgr/src/components/timelineInstances/pendingAtLme.js
new file mode 100644
index 00000000000..08f89738eea
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/components/timelineInstances/pendingAtLme.js
@@ -0,0 +1,14 @@
+import { TelePhone, CheckPoint } from "@egovernments/digit-ui-react-components";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const PendingAtLME = ({ name, isCompleted, mobile, text }) => {
+ let { t } = useTranslation();
+ return name && mobile ? (
+ {t(`CS_COMMON_${action}`)}
+
+ );
+ }
+ });
+ return {actions}} />;
+ } else if (action === "RATE" && rating) {
+ return (
+ {t(`CS_COMMON_${action}`)}
+
+ );
+ }
+ });
+ return {actions}} />;
+ }
+};
+
+export default Rejected;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/components/timelineInstances/reopen.js b/frontend/micro-ui-internals/packages/modules/pgr/src/components/timelineInstances/reopen.js
new file mode 100644
index 00000000000..59b1bd8681e
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/components/timelineInstances/reopen.js
@@ -0,0 +1,14 @@
+import { GreyOutText } from "@egovernments/digit-ui-react-components";
+import React from "react";
+const Reopen = ({ text, reopenDate }) => {
+ // let { t } = useTranslation();
+ // let reopenDate = ConvertTimestampToDate(obj.auditDetails.createdTime);
+ return (
+
+ {text}
+ {reopenDate}
+
+ );
+};
+
+export default Reopen;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/components/timelineInstances/resolved.js b/frontend/micro-ui-internals/packages/modules/pgr/src/components/timelineInstances/resolved.js
new file mode 100644
index 00000000000..4bcc1a9954c
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/components/timelineInstances/resolved.js
@@ -0,0 +1,51 @@
+import React from "react";
+import { ActionLinks, CheckPoint } from "@egovernments/digit-ui-react-components";
+import { Link } from "react-router-dom";
+import StarRated from "./StarRated";
+import { useTranslation } from "react-i18next";
+import Reopen from "./reopen";
+//const GetTranslatedAction = (action, t) => t(`CS_COMMON_${action}`);
+
+const Resolved = ({ action, nextActions, rating, serviceRequestId, reopenDate, isCompleted }) => {
+ const { t } = useTranslation();
+
+ if (action === "RESOLVE") {
+ let actions =
+ nextActions &&
+ nextActions.map((action, index) => {
+ if (action && action !== "COMMENT") {
+ return (
+ {t(`CS_COMMON_${action}`)}
+
+ );
+ }
+ });
+ return {actions}} />;
+ } else if (action === "RATE" && rating) {
+ return (
+ {t(`CS_COMMON_${action}`)}
+
+ );
+ }
+ });
+ return {actions}} />;
+ }
+};
+
+export default Resolved;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/constants/Citizen.js b/frontend/micro-ui-internals/packages/modules/pgr/src/constants/Citizen.js
new file mode 100644
index 00000000000..2c550d45bc5
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/constants/Citizen.js
@@ -0,0 +1,3 @@
+// Session Storage Keys
+export const PGR_CITIZEN_CREATE_COMPLAINT = "PGR_CITIZEN_CREATE_COMPLAINT";
+export const PGR_CITIZEN_COMPLAINT_CONFIG = "PGR_CITIZEN_COMPLAINT_CONFIG";
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/constants/Employee.js b/frontend/micro-ui-internals/packages/modules/pgr/src/constants/Employee.js
new file mode 100644
index 00000000000..46173a9a280
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/constants/Employee.js
@@ -0,0 +1,2 @@
+export const PGR_EMPLOYEE_COMPLAINT_DETAILS = "/complaint/details/";
+export const PGR_EMPLOYEE_CREATE_COMPLAINT = "/complaint/create";
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/constants/Localization.js b/frontend/micro-ui-internals/packages/modules/pgr/src/constants/Localization.js
new file mode 100644
index 00000000000..91e8479942a
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/constants/Localization.js
@@ -0,0 +1,20 @@
+export const LOCALIZATION_KEY = {
+ CS_COMPLAINT_DETAILS: "CS_COMPLAINT_DETAILS",
+ CS_COMMON: "CS_COMMON",
+ CS_COMPLAINT: "CS_COMPLAINT",
+ CS_FEEDBACK: "CS_FEEDBACK",
+ CS_HEADER: "CS_HEADER",
+ CS_HOME: "CS_HOME",
+ CS_ADDCOMPLAINT: "CS_ADDCOMPLAINT",
+ CS_REOPEN: "CS_REOPEN",
+ CS_CREATECOMPLAINT: "CS_CREATECOMPLAINT",
+ PT_COMMONS: "PT_COMMONS",
+ CORE_COMMON: "CORE_COMMON",
+};
+
+export const LOCALE = {
+ MY_COMPLAINTS: "CS_HOME_MY_COMPLAINTS",
+ NO_COMPLAINTS: "CS_MYCOMPLAINTS_NO_COMPLAINTS",
+ NO_COMPLAINTS_EMPLOYEE: "CS_MYCOMPLAINTS_NO_COMPLAINTS_EMPLOYEE",
+ ERROR_LOADING_RESULTS: "CS_COMMON_ERROR_LOADING_RESULTS",
+};
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/constants/Routes.js b/frontend/micro-ui-internals/packages/modules/pgr/src/constants/Routes.js
new file mode 100644
index 00000000000..c1170e2f607
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/constants/Routes.js
@@ -0,0 +1,37 @@
+export const PGR_BASE = "/digit-ui/pgr/citizen/";
+
+const CREATE_COMPLAINT_PATH = "/create-complaint/";
+const REOPEN_COMPLAINT_PATH = "/reopen/";
+import { PGR_EMPLOYEE_COMPLAINT_DETAILS, PGR_EMPLOYEE_CREATE_COMPLAINT } from "./Employee";
+
+export const PgrRoutes = {
+ ComplaintsPage: "/complaints",
+ RatingAndFeedBack: "/rate/:id*",
+ ComplaintDetailsPage: "/complaint/details/:id",
+ ReasonPage: `/:id`,
+ UploadPhoto: `/upload-photo/:id`,
+ AddtionalDetails: `/addional-details/:id`,
+ CreateComplaint: "/create-complaint",
+ ReopenComplaint: "/reopen",
+ Response: "/response",
+
+ CreateComplaintStart: "",
+ SubType: `/subtype`,
+ LocationSearch: `/location`,
+ Pincode: `/pincode`,
+ Address: `/address`,
+ Landmark: `/landmark`,
+ UploadPhotos: `/upload-photos`,
+ Details: `/details`,
+ CreateComplaintResponse: `/response`,
+};
+
+export const Employee = {
+ Inbox: "/inbox",
+ ComplaintDetails: PGR_EMPLOYEE_COMPLAINT_DETAILS,
+ CreateComplaint: PGR_EMPLOYEE_CREATE_COMPLAINT,
+ Response: "/response",
+ Home: "/digit-ui/employee",
+};
+
+export const getRoute = (match, route) => `${match.path}${route}`;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/ComplaintDetails.js b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/ComplaintDetails.js
new file mode 100644
index 00000000000..fcc5a90b73c
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/ComplaintDetails.js
@@ -0,0 +1,168 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { LOCALIZATION_KEY } from "../../constants/Localization";
+
+import {
+ Card,
+ Header,
+ CardSubHeader,
+ StatusTable,
+ Row,
+ TextArea,
+ SubmitBar,
+ DisplayPhotos,
+ ImageViewer,
+ Loader,
+ Toast,
+} from "@egovernments/digit-ui-react-components";
+
+import TimeLine from "../../components/TimeLine";
+
+const WorkflowComponent = ({ complaintDetails, id, getWorkFlow }) => {
+ const tenantId = complaintDetails.service.tenantId;
+ const workFlowDetails = Digit.Hooks.useWorkflowDetails({ tenantId: tenantId, id, moduleCode: "PGR" });
+ useEffect(() => {
+ getWorkFlow(workFlowDetails.data);
+ }, [workFlowDetails.data]);
+
+ useEffect(() => {
+ workFlowDetails.revalidate();
+ }, []);
+
+ return (
+ !workFlowDetails.isLoading && (
+ Error ;
+ }
+
+ return (
+
+ {t(`${LOCALIZATION_KEY.CS_HEADER}_COMPLAINT_SUMMARY`)}
+
+ {Object.keys(complaintDetails).length > 0 ? (
+
+
+ {t(`SERVICEDEFS.${complaintDetails.audit.serviceCode.toUpperCase()}`)}
+
+ {Object.keys(complaintDetails.details).map((flag, index, arr) => (
+ (typeof val === "object" ? t(val?.code) : t(val)))
+ : t(complaintDetails.details[flag]) || "N/A"
+ }
+ last={index === arr.length - 1}
+ />
+ ))}
+
+ {complaintDetails.thumbnails && complaintDetails.thumbnails.length !== 0 ? (
+ zoomImage(source, index)} />
+ ) : null}
+ {imageZoom ?
+ {complaintDetails?.service &&
+
+ {t(`${LOCALIZATION_KEY.CS_COMMON}_COMMENTS`)}
+
+
+
+
+ );
+};
+
+export default RatingAndFeedBack;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/Rating/SelectRating.js b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/Rating/SelectRating.js
new file mode 100644
index 00000000000..ecef198854b
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/Rating/SelectRating.js
@@ -0,0 +1,64 @@
+import React, { useCallback, useState } from "react";
+import { useDispatch } from "react-redux";
+import { RatingCard, CardLabelError } from "@egovernments/digit-ui-react-components";
+import { useParams, Redirect, useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { updateComplaints } from "../../../redux/actions/index";
+
+const SelectRating = ({ parentRoute }) => {
+ const { t } = useTranslation();
+ const { id } = useParams();
+ const dispatch = useDispatch();
+ // console.log("parent route", parentRoute);
+ const history = useHistory();
+
+ let tenantId = Digit.ULBService.getCurrentTenantId();
+ const complaintDetails = Digit.Hooks.pgr.useComplaintDetails({ tenantId: tenantId, id: id }).complaintDetails;
+ const updateComplaint = useCallback((complaintDetails) => dispatch(updateComplaints(complaintDetails)), [dispatch]);
+ const [submitError, setError] = useState(false)
+
+ function log(data) {
+ if (complaintDetails && data.rating > 0 ) {
+ complaintDetails.service.rating = data.rating;
+ complaintDetails.service.additionalDetail = data.CS_FEEDBACK_WHAT_WAS_GOOD.join(",");
+ complaintDetails.workflow = {
+ action: "RATE",
+ comments: data.comments,
+ verificationDocuments: [],
+ };
+ // console.log("updtaed complaint details", complaintDetails);
+ updateComplaint({ service: complaintDetails.service, workflow: complaintDetails.workflow });
+ history.push(`${parentRoute}/response`);
+ }
+ else{
+ setError(true)
+ }
+ }
+
+ const config = {
+ texts: {
+ header: "CS_COMPLAINT_RATE_HELP_TEXT",
+ submitBarLabel: "CS_COMMONS_NEXT",
+ },
+ inputs: [
+ {
+ type: "rate",
+ maxRating: 5,
+ label: t("CS_COMPLAINT_RATE_TEXT"),
+ error: submitError ? {t("CS_FEEDBACK_ENTER_RATING_ERROR")} : null
+ },
+ {
+ type: "checkbox",
+ label: "CS_FEEDBACK_WHAT_WAS_GOOD",
+ checkLabels: [t("CS_FEEDBACK_SERVICES"), t("CS_FEEDBACK_RESOLUTION_TIME"), t("CS_FEEDBACK_QUALITY_OF_WORK"), t("CS_FEEDBACK_OTHERS")],
+ },
+ {
+ type: "textarea",
+ label: t("CS_COMMON_COMMENTS"),
+ name: "comments",
+ },
+ ],
+ };
+ return
+
+ {t(`${LOCALIZATION_KEY.CS_ADDCOMPLAINT}_PROVIDE_ADDITIONAL_DETAILS`)}
+ {t(`${LOCALIZATION_KEY.CS_ADDCOMPLAINT}_ADDITIONAL_DETAILS_TEXT`)}
+
+
+
+
+
+ );
+};
+
+export default AddtionalDetails;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/ReopenComplaint/Reason.js b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/ReopenComplaint/Reason.js
new file mode 100644
index 00000000000..a67b9b52c1c
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/ReopenComplaint/Reason.js
@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useHistory, useParams } from "react-router-dom";
+import { BackButton, Card, CardHeader, CardLabelError, CardText, RadioButtons, SubmitBar } from "@egovernments/digit-ui-react-components";
+
+import { LOCALIZATION_KEY } from "../../../constants/Localization";
+import { getRoute, PgrRoutes, PGR_BASE } from "../../../constants/Routes";
+
+const ReasonPage = (props) => {
+ const history = useHistory();
+ const { t } = useTranslation();
+ const { id } = useParams();
+ const [selected, setSelected] = useState(null);
+ const [valid, setValid] = useState(true);
+
+ const onRadioChange = (value) => {
+ let reopenDetails = Digit.SessionStorage.get(`reopen.${id}`);
+ Digit.SessionStorage.set(`reopen.${id}`, { ...reopenDetails, reason: value });
+ setSelected(value);
+ };
+
+ function onSave() {
+ if (selected === null) {
+ setValid(false);
+ } else {
+ history.push(`${props.match.path}/upload-photo/${id}`);
+ }
+ }
+
+ return (
+
+ {t(`${LOCALIZATION_KEY.CS_REOPEN}_COMPLAINT`)}
+
+ {/* Select the option related to your complaint from the list given below.
+ If the complaint type you are looking for is not listed select others.{" "} */}
+ {/* {t(`${TRANSLATION_KEY}_OPTION_ONE`)} */}
+
+ {valid ? null : {t(`${LOCALIZATION_KEY.CS_ADDCOMPLAINT}_ERROR_REOPEN_REASON`)} }
+ setSelected(value)}
+ options={[
+ t(`${LOCALIZATION_KEY.CS_REOPEN}_OPTION_ONE`),
+ t(`${LOCALIZATION_KEY.CS_REOPEN}_OPTION_TWO`),
+ t(`${LOCALIZATION_KEY.CS_REOPEN}_OPTION_THREE`),
+ t(`${LOCALIZATION_KEY.CS_REOPEN}_OPTION_FOUR`),
+ ]}
+ />
+
+
+ );
+};
+
+export default ReasonPage;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/ReopenComplaint/UploadPhoto.js b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/ReopenComplaint/UploadPhoto.js
new file mode 100644
index 00000000000..aad353274d4
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/ReopenComplaint/UploadPhoto.js
@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from "react";
+import { Link, useHistory, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { Card, SubmitBar, BackButton, ImageUploadHandler, CardLabelError, LinkButton } from "@egovernments/digit-ui-react-components";
+
+import { LOCALIZATION_KEY } from "../../../constants/Localization";
+
+const UploadPhoto = (props) => {
+ const { t } = useTranslation();
+ const history = useHistory();
+ let { id } = useParams();
+ const [verificationDocuments, setVerificationDocuments] = useState(null);
+ const [valid, setValid] = useState(true);
+
+ const handleUpload = (ids) => {
+ setDocState(ids);
+ };
+
+ const setDocState = (ids) => {
+ if (ids?.length) {
+ const documents = ids.map((id) => ({
+ documentType: "PHOTO",
+ fileStoreId: id,
+ documentUid: "",
+ additionalDetails: {},
+ }));
+ setVerificationDocuments(documents);
+ }
+ };
+
+ function save() {
+ if (verificationDocuments === null) {
+ setValid(false);
+ } else {
+ history.push(`${props.match.path}/addional-details/${id}`);
+ }
+ }
+
+ function skip() {
+ history.push(`${props.match.path}/addional-details/${id}`);
+ }
+
+ useEffect(() => {
+ let reopenDetails = Digit.SessionStorage.get(`reopen.${id}`);
+ Digit.SessionStorage.set(`reopen.${id}`, { ...reopenDetails, verificationDocuments });
+ }, [verificationDocuments, id]);
+
+ return (
+
+
+ {t(`${LOCALIZATION_KEY.CS_ADDCOMPLAINT}_UPLOAD_ERROR_MESSAGE`)} }
+
+
+ );
+};
+
+export default UploadPhoto;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/ReopenComplaint/index.js b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/ReopenComplaint/index.js
new file mode 100644
index 00000000000..0c5c3cf843e
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/ReopenComplaint/index.js
@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Route, Switch, useRouteMatch } from "react-router-dom";
+// import UserOnboarding from "../UserOnboarding/index";
+import { PgrRoutes, getRoute } from "../../../constants/Routes";
+import ReasonPage from "./Reason";
+import UploadPhoto from "./UploadPhoto";
+import AddtionalDetails from "./AddtionalDetails";
+import Response from "../Response";
+
+const ReopenComplaint = ({ match, history, parentRoute }) => {
+ // console.log("match:", match);
+ // console.log("sddddddadasds", getRoute(match, PgrRoutes.ReasonPage), match, parentRoute);
+ // const _match = useRouteMatch()
+ return (
+
+
+ );
+};
+
+export { ReopenComplaint };
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/Response.js b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/Response.js
new file mode 100644
index 00000000000..4fb8221e170
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/Response.js
@@ -0,0 +1,60 @@
+import React from "react";
+import { Card, Banner, CardText, SubmitBar } from "@egovernments/digit-ui-react-components";
+import { Link } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { PgrRoutes, getRoute } from "../../constants/Routes";
+import { useTranslation } from "react-i18next";
+
+const GetActionMessage = ({ action }) => {
+ const { t } = useTranslation();
+ switch (action) {
+ case "REOPEN":
+ return t(`CS_COMMON_COMPLAINT_REOPENED`);
+ case "RATE":
+ return t("CS_COMMON_THANK_YOU");
+ default:
+ return t(`CS_COMMON_COMPLAINT_SUBMITTED`);
+ }
+};
+
+const BannerPicker = ({ response }) => {
+ const { complaints } = response;
+ const { t } = useTranslation();
+ if (complaints && complaints.response && complaints.response.responseInfo) {
+ return (
+ {t("CS_COMMON_RATING_SUBMIT_TEXT")} : {t("CS_COMMON_TRACK_COMPLAINT_TEXT")} ;
+ }
+};
+
+const Response = (props) => {
+ const { t } = useTranslation();
+ const appState = useSelector((state) => state)["pgr"];
+ // console.log("inside response", appState);
+ return (
+
+ {appState.complaints.response &&
+ );
+};
+
+export default Response;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/index.js b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/index.js
new file mode 100644
index 00000000000..f34f9c69f65
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/citizen/index.js
@@ -0,0 +1,38 @@
+import React from "react";
+import { ReopenComplaint } from "./ReopenComplaint/index";
+import SelectRating from "./Rating/SelectRating";
+import { PgrRoutes, getRoute } from "../../constants/Routes";
+import { useRouteMatch, Switch, useLocation } from "react-router-dom";
+import { AppContainer, BackButton, PrivateRoute } from "@egovernments/digit-ui-react-components";
+
+import { CreateComplaint } from "./Create";
+import { ComplaintsList } from "./ComplaintsList";
+import ComplaintDetailsPage from "./ComplaintDetails";
+import Response from "./Response";
+import { useTranslation } from "react-i18next";
+
+const App = () => {
+ const { t } = useTranslation();
+ const { path, url, ...match } = useRouteMatch();
+ const location = useLocation();
+ return (
+
+ {!location.pathname.includes("/response") && {t("CS_COMMON_BACK")} }
+
+ {/* */}
+ */}
+
+
+ );
+};
+
+export default App;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/pages/employee/ComplaintDetails.js b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/employee/ComplaintDetails.js
new file mode 100644
index 00000000000..2d771733889
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/employee/ComplaintDetails.js
@@ -0,0 +1,440 @@
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import {
+ BreakLine,
+ Card,
+ CardLabel,
+ CardLabelDesc,
+ CardSubHeader,
+ ConnectingCheckPoints,
+ CheckPoint,
+ DisplayPhotos,
+ MediaRow,
+ LastRow,
+ Row,
+ StatusTable,
+ PopUp,
+ HeaderBar,
+ ImageViewer,
+ TextInput,
+ TextArea,
+ UploadFile,
+ ButtonSelector,
+ Toast,
+ ActionBar,
+ Menu,
+ SubmitBar,
+ Dropdown,
+ Loader,
+ Modal,
+ SectionalDropdown,
+} from "@egovernments/digit-ui-react-components";
+
+import { Close } from "../../Icons";
+import { useTranslation } from "react-i18next";
+import { isError, useQueryClient } from "react-query";
+
+const MapView = (props) => {
+ return (
+
+ {/*
*/}
+
+
{props.label} ;
+};
+
+const CloseBtn = (props) => {
+ return (
+
+
+ );
+};
+
+const TLCaption = ({ data }) => {
+ const { t } = useTranslation();
+ return (
+
+ {data.date &&
{data.date}
}
+
{data.name}
+
{data.mobileNumber}
+ {data.source &&
{t("ES_COMMON_FILED_VIA_" + data.source.toUpperCase())}
}
+
close(popup)} />}
+ actionCancelLabel={t("CS_COMMON_CANCEL")}
+ actionCancelOnSubmit={() => close(popup)}
+ actionSaveLabel={
+ selectedAction === "ASSIGN" || selectedAction === "REASSIGN"
+ ? t("CS_COMMON_ASSIGN")
+ : selectedAction === "REJECT"
+ ? t("CS_COMMON_REJECT")
+ : selectedAction === "REOPEN"
+ ? t("CS_COMMON_REOPEN")
+ : t("CS_COMMON_RESOLVE")
+ }
+ actionSaveOnSubmit={() => {
+ onAssign(selectedEmployee, comments, uploadedFile);
+ }}
+ error={error}
+ setError={setError}
+ >
+
+ {selectedAction === "REJECT" || selectedAction === "RESOLVE" || selectedAction === "REOPEN" ? null : (
+
+ {t("CS_COMMON_EMPLOYEE_NAME")}
+ {employeeData &&
+ )}
+ {selectedAction === "REOPEN" ? (
+
+ {t("CS_REOPEN_COMPLAINT")}
+
+ ) : null}
+ {t("CS_COMMON_EMPLOYEE_COMMENTS")}
+
+ {t("CS_ACTION_SUPPORTING_DOCUMENTS")}
+ {t(`CS_UPLOAD_RESTRICTIONS`)}
+ {
+ setUploadedFile(null);
+ }}
+ message={uploadedFile ? `1 ${t(`CS_ACTION_FILEUPLOADED`)}` : t(`CS_ACTION_NO_FILEUPLOADED`)}
+ />
+
+
+ );
+};
+
+export const ComplaintDetails = (props) => {
+ let { id } = useParams();
+ const { t } = useTranslation();
+ const [fullscreen, setFullscreen] = useState(false);
+ const [imageZoom, setImageZoom] = useState(null);
+ // const [actionCalled, setActionCalled] = useState(false);
+ const [toast, setToast] = useState(false);
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const { isLoading, complaintDetails, revalidate: revalidateComplaintDetails } = Digit.Hooks.pgr.useComplaintDetails({ tenantId, id });
+ // console.log("find complaint details here", complaintDetails);
+ const workflowDetails = Digit.Hooks.useWorkflowDetails({ tenantId, id, moduleCode: "PGR", role: "EMPLOYEE" });
+ const [displayMenu, setDisplayMenu] = useState(false);
+ const [popup, setPopup] = useState(false);
+ const [selectedAction, setSelectedAction] = useState(null);
+ const [assignResponse, setAssignResponse] = useState(null);
+ const [loader, setLoader] = useState(false);
+ const [rerender, setRerender] = useState(1);
+ const client = useQueryClient();
+ function popupCall(option) {
+ console.log("option", option);
+ setDisplayMenu(false);
+ setPopup(true);
+ }
+
+ useEffect(() => {
+ (async () => {
+ const assignWorkflow = await Digit?.WorkflowService?.getByBusinessId(tenantId, id);
+ console.log("assign", assignWorkflow);
+ })();
+ }, [complaintDetails]);
+
+ const refreshData = async () => {
+ await client.refetchQueries(["fetchInboxData"]);
+ await workflowDetails.revalidate();
+ await revalidateComplaintDetails();
+ };
+
+ useEffect(() => {
+ (async () => {
+ if (complaintDetails) {
+ setLoader(true);
+ await refreshData();
+ setLoader(false);
+ }
+ })();
+ }, []);
+
+ // useEffect(() => {
+ // console.log("action", props.action);
+ // setActionCalled(props.action);
+ // }, [props.action]);
+
+ function zoomView() {
+ setFullscreen(!fullscreen);
+ }
+
+ function close(state) {
+ switch (state) {
+ case fullscreen:
+ setFullscreen(!fullscreen);
+ break;
+ case popup:
+ setPopup(!popup);
+ break;
+ default:
+ console.log(state);
+ break;
+ }
+ }
+
+ function zoomImage(imageSource, index) {
+ setImageZoom(complaintDetails.images[index - 1]);
+ }
+
+ function onCloseImageZoom() {
+ setImageZoom(null);
+ }
+
+ function onActionSelect(action) {
+ setSelectedAction(action);
+ switch (action) {
+ case "ASSIGN":
+ setPopup(true);
+ setDisplayMenu(false);
+ break;
+ case "REASSIGN":
+ setPopup(true);
+ setDisplayMenu(false);
+ break;
+ case "RESOLVE":
+ setPopup(true);
+ setDisplayMenu(false);
+ break;
+ case "REJECT":
+ setPopup(true);
+ setDisplayMenu(false);
+ break;
+ case "REOPEN":
+ setPopup(true);
+ setDisplayMenu(false);
+ break;
+ default:
+ console.log("action not known");
+ setDisplayMenu(false);
+ }
+ }
+
+ async function onAssign(selectedEmployee, comments, uploadedFile) {
+ setPopup(false);
+ const response = await Digit.Complaint.assign(complaintDetails, selectedAction, selectedEmployee, comments, uploadedFile, tenantId);
+ console.log("find response complaint assign here", response);
+ setAssignResponse(response);
+ setToast(true);
+ setLoader(true);
+ await refreshData();
+ setLoader(false);
+ setRerender(rerender + 1);
+ setTimeout(() => setToast(false), 10000);
+ }
+
+ function closeToast() {
+ setToast(false);
+ }
+
+ if (isLoading || workflowDetails.isLoading || loader) {
+ return {workflowDetails.error} ;
+
+ const getTimelineCaptions = (checkpoint) => {
+ // console.log("tl", checkpoint);
+ if (checkpoint.status === "COMPLAINT_FILED" && complaintDetails?.audit) {
+ const caption = {
+ date: Digit.DateUtils.ConvertTimestampToDate(complaintDetails.audit.details.createdTime),
+ name: complaintDetails.audit.citizen.name,
+ mobileNumber: complaintDetails.audit.citizen.mobileNumber,
+ source: complaintDetails.audit.source,
+ };
+ return
+
+ {t(`CS_HEADER_COMPLAINT_SUMMARY`)}
+ {t(`CS_COMPLAINT_DETAILS_COMPLAINT_DETAILS`)}
+ {isLoading ? (
+
+ {complaintDetails &&
+ Object.keys(complaintDetails?.details).map((k, i, arr) => (
+ (typeof val === "object" ? t(val?.code) : t(val)))
+ : t(complaintDetails?.details[k]) || "N/A"
+ }
+ last={arr.length - 1 === i}
+ />
+ ))}
+
+ {1 === 1 ? null : (
+
+
+ )}
+
+ )}
+ {complaintDetails?.thumbnails && complaintDetails?.thumbnails?.length !== 0 ? (
+ zoomImage(source, index)} />
+ ) : null}
+
+ {t(`CS_COMPLAINT_DETAILS_COMPLAINT_TIMELINE`)}
+
+ {workflowDetails?.data?.timeline && workflowDetails?.data?.timeline?.length === 1 ? (
+
+ {workflowDetails?.data?.timeline &&
+ workflowDetails?.data?.timeline.map((checkpoint, index, arr) => {
+ return (
+
+
+ );
+ })}
+
+ )}
+
+ )}
+
+ {fullscreen ? (
+
+
+
} end={
close(fullscreen)} />} />
+
+
+
+ ) : null}
+ {imageZoom ?
+ {displayMenu && workflowDetails?.data?.nextActions ? (
+ action.action)} t={t} onSelect={onActionSelect} />
+ ) : null}
+ setDisplayMenu(!displayMenu)} />
+
+ )}
+
+ );
+};
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/pages/employee/CreateComplaint/index.js b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/employee/CreateComplaint/index.js
new file mode 100644
index 00000000000..6aa3556e05e
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/employee/CreateComplaint/index.js
@@ -0,0 +1,256 @@
+import React, { useState, useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+import { Dropdown } from "@egovernments/digit-ui-react-components";
+import { useRouteMatch, useHistory } from "react-router-dom";
+import { useQueryClient } from "react-query";
+
+import { FormComposer } from "../../../components/FormComposer";
+import { createComplaint } from "../../../redux/actions/index";
+
+export const CreateComplaint = ({ parentUrl }) => {
+ const cities = Digit.Hooks.pgr.useTenants();
+ const { t } = useTranslation();
+
+ const getCities = () => cities?.filter((e) => e.code === Digit.ULBService.getCurrentTenantId()) || [];
+
+ const [complaintType, setComplaintType] = useState({});
+ const [subTypeMenu, setSubTypeMenu] = useState([]);
+ const [subType, setSubType] = useState({});
+ const [pincode, setPincode] = useState("");
+ const [selectedCity, setSelectedCity] = useState(getCities()[0] ? getCities()[0] : null);
+
+ const { data: fetchedLocalities } = Digit.Hooks.useBoundaryLocalities(
+ getCities()[0]?.code,
+ "admin",
+ {
+ enabled: !!getCities()[0],
+ },
+ t
+ );
+
+ const [localities, setLocalities] = useState(fetchedLocalities);
+ const [selectedLocality, setSelectedLocality] = useState(null);
+ const [canSubmit, setSubmitValve] = useState(false);
+ const [pincodeNotValid, setPincodeNotValid] = useState(false);
+ const [params, setParams] = useState({});
+ const tenantId = window.Digit.SessionStorage.get("Employee.tenantId");
+ const menu = Digit.Hooks.pgr.useComplaintTypes({ stateCode: tenantId });
+ const dispatch = useDispatch();
+ const match = useRouteMatch();
+ const history = useHistory();
+ const serviceDefinitions = Digit.GetServiceDefinitions;
+ const client = useQueryClient();
+
+ useEffect(() => {
+ if (complaintType?.key && subType?.key && selectedCity?.code && selectedLocality?.code) {
+ setSubmitValve(true);
+ } else {
+ setSubmitValve(false);
+ }
+ }, [complaintType, subType, selectedCity, selectedLocality]);
+
+ useEffect(() => {
+ setLocalities(fetchedLocalities);
+ }, [fetchedLocalities]);
+
+ useEffect(() => {
+ const city = cities.find((obj) => obj.pincode?.find((item) => item == pincode));
+ if (city?.code === getCities()[0]?.code) {
+ setPincodeNotValid(false);
+ setSelectedCity(city);
+ setSelectedLocality(null);
+ const __localityList = fetchedLocalities;
+ const __filteredLocalities = __localityList.filter((city) => city["pincode"] == pincode);
+ setLocalities(__filteredLocalities);
+ } else if (pincode === "" || pincode === null) {
+ setPincodeNotValid(false);
+ setLocalities(fetchedLocalities);
+ } else {
+ setPincodeNotValid(true);
+ }
+ }, [pincode]);
+
+ async function selectedType(value) {
+ if (value.key !== complaintType.key) {
+ if (value.key === "Others") {
+ // console.log("let me know if others is selected");
+ setSubType({ name: "" });
+ setComplaintType(value);
+ setSubTypeMenu([{ key: "Others", name: t("SERVICEDEFS.OTHERS") }]);
+ } else {
+ setSubType({ name: "" });
+ setComplaintType(value);
+ setSubTypeMenu(await serviceDefinitions.getSubMenu(tenantId, value, t));
+ }
+ }
+ }
+
+ function selectedSubType(value) {
+ setSubType(value);
+ }
+
+ // city locality logic
+ const selectCity = async (city) => {
+ // if (selectedCity?.code !== city.code) {}
+ return;
+ };
+
+ function selectLocality(locality) {
+ setSelectedLocality(locality);
+ }
+
+ //On SUbmit
+ const onSubmit = async (data) => {
+ if (!canSubmit) return;
+ console.log("submit data", data, subType, selectedCity, selectedLocality);
+ const cityCode = selectedCity.code;
+ const city = selectedCity.city.name;
+ const district = selectedCity.city.name;
+ const region = selectedCity.city.name;
+ const localityCode = selectedLocality.code;
+ const localityName = selectedLocality.name;
+ const landmark = data.landmark;
+ const { key } = subType;
+ const complaintType = key;
+ const mobileNumber = data.mobileNumber;
+ const name = data.name;
+ const formData = { ...data, cityCode, city, district, region, localityCode, localityName, landmark, complaintType, mobileNumber, name };
+ await dispatch(createComplaint(formData));
+ await client.refetchQueries(["fetchInboxData"]);
+ history.push(parentUrl + "/response");
+ };
+
+ const handlePincode = (event) => {
+ const { value } = event.target;
+ setPincode(value);
+ if (!value) {
+ setPincodeNotValid(false);
+ }
+ };
+
+ const isPincodeValid = () => !pincodeNotValid;
+
+ const config = [
+ {
+ head: t("ES_CREATECOMPLAINT_PROVIDE_COMPLAINANT_DETAILS"),
+ body: [
+ {
+ label: t("ES_CREATECOMPLAINT_MOBILE_NUMBER"),
+ isMandatory: true,
+ type: "text",
+ populators: {
+ name: "mobileNumber",
+ validation: {
+ required: true,
+ pattern: /^[6-9]\d{9}$/,
+ },
+ componentInFront: +91
,
+ error: t("CORE_COMMON_MOBILE_ERROR"),
+ },
+ },
+ {
+ label: t("ES_CREATECOMPLAINT_COMPLAINT_NAME"),
+ isMandatory: true,
+ type: "text",
+ populators: {
+ name: "name",
+ validation: {
+ required: true,
+ pattern: /^[A-Za-z]/,
+ },
+ error: t("CS_ADDCOMPLAINT_NAME_ERROR"),
+ },
+ },
+ ],
+ },
+ {
+ head: t("CS_COMPLAINT_DETAILS_COMPLAINT_DETAILS"),
+ body: [
+ {
+ label: t("CS_COMPLAINT_DETAILS_COMPLAINT_TYPE"),
+ isMandatory: true,
+ type: "dropdown",
+ populators:
+
+
+ );
+ }
+ } else {
+ return
+ {appState.complaints.response && {t("ES_COMMON_TRACK_COMPLAINT_TEXT")}
+
+ );
+};
+
+export default Response;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/pages/employee/index.js b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/employee/index.js
new file mode 100644
index 00000000000..dfc268f52ed
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/pages/employee/index.js
@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import { Switch, Route, useRouteMatch, useLocation } from "react-router-dom";
+import { ActionBar, Menu, SubmitBar, BreadCrumb } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import { ComplaintDetails } from "./ComplaintDetails";
+import { CreateComplaint } from "./CreateComplaint";
+import Inbox from "./Inbox";
+import { Employee } from "../../constants/Routes";
+import Response from "./Response";
+
+const Complaint = () => {
+ const [displayMenu, setDisplayMenu] = useState(false);
+ const [popup, setPopup] = useState(false);
+ const match = useRouteMatch();
+ const { t } = useTranslation();
+
+ const breadcrumConfig = {
+ home: {
+ content: t("CS_COMMON_HOME"),
+ path: Employee.Home,
+ },
+ inbox: {
+ content: t("CS_COMMON_INBOX"),
+ path: match.url + Employee.Inbox,
+ },
+ createComplaint: {
+ content: t("CS_PGR_CREATE_COMPLAINT"),
+ path: match.url + Employee.CreateComplaint,
+ },
+ complaintDetails: {
+ content: t("CS_PGR_COMPLAINT_DETAILS"),
+ path: match.url + Employee.ComplaintDetails + ":id",
+ },
+ response: {
+ content: t("CS_PGR_RESPONSE"),
+ path: match.url + Employee.Response,
+ },
+ };
+ function popupCall(option) {
+ console.log("option", option);
+ setDisplayMenu(false);
+ setPopup(true);
+ }
+
+ let location = useLocation().pathname;
+
+ return (
+
+
+ {!location.includes(Employee.Response) && (
+
+ }
+ />
+
+ )}
+
+
+
+ {/*
+ {displayMenu ? setDisplayMenu(!displayMenu)} />
+ */}
+
+ );
+};
+
+export default Complaint;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/redux/actions/complaint.js b/frontend/micro-ui-internals/packages/modules/pgr/src/redux/actions/complaint.js
new file mode 100644
index 00000000000..3d35bc2a58f
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/redux/actions/complaint.js
@@ -0,0 +1,42 @@
+import { CREATE_COMPLAINT } from "./types";
+
+const createComplaint = ({
+ cityCode,
+ complaintType,
+ description,
+ landmark,
+ city,
+ district,
+ region,
+ state,
+ pincode,
+ localityCode,
+ localityName,
+ uploadedImages,
+ mobileNumber,
+ name,
+}) => async (dispatch, getState) => {
+ const response = await Digit.Complaint.create({
+ cityCode,
+ complaintType,
+ description,
+ landmark,
+ city,
+ district,
+ region,
+ state,
+ pincode,
+ localityCode,
+ localityName,
+ uploadedImages,
+ mobileNumber,
+ name,
+ });
+ console.log("from actions", response);
+ dispatch({
+ type: CREATE_COMPLAINT,
+ payload: response,
+ });
+};
+
+export default createComplaint;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/redux/actions/index.js b/frontend/micro-ui-internals/packages/modules/pgr/src/redux/actions/index.js
new file mode 100644
index 00000000000..e9f6985b863
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/redux/actions/index.js
@@ -0,0 +1,54 @@
+import {
+ APPLY_FILTER,
+ APPLY_INBOX_FILTER,
+ FETCH_BUSINESS_SERVICE_BY_ID,
+ FETCH_COMPLAINTS,
+ FETCH_LOCALITIES,
+ UPDATE_COMPLAINT,
+ FETCH_ALL_BUSINESSS_SERVICES,
+} from "./types";
+//import { LocalizationService } from "../../@egovernments/digit-utils/services/Localization/service";
+//import { LocationService } from "../../@egovernments/digit-utils/services/Location";
+//import { LocalityService } from "../../@egovernments/digit-utils/services/Localities";
+import createComplaint from "./complaint";
+
+export const fetchLocalities = (city) => async (dispatch, getState) => {
+ city = city.toLowerCase();
+ const { stateInfo } = getState();
+ let response = await Digit.LocationService.getLocalities(`${stateInfo.code}.${city}`);
+ let localityList = Digit.LocalityService.get(response.TenantBoundary[0]);
+ dispatch({
+ type: FETCH_LOCALITIES,
+ payload: { localityList },
+ });
+};
+
+export const updateComplaints = (data) => async (dispatch) => {
+ let ServiceWrappers = await Digit.PGRService.update(data);
+
+ dispatch({
+ type: UPDATE_COMPLAINT,
+ payload: ServiceWrappers,
+ });
+};
+
+export const fetchBusinessServiceByTenant = (tenantId, businessServices) => async (dispatch) => {
+ const businessServiceResponse = await Digit.WorkflowService.init(tenantId, businessServices);
+ const businessService = businessServiceResponse.BusinessServices;
+ dispatch({
+ type: FETCH_ALL_BUSINESSS_SERVICES,
+ payload: { businessService },
+ });
+};
+
+export const applyInboxFilters = (filters) => async (dispatch) => {
+ console.log("filters in action:", filters);
+ let response = await Digit.PGRService.inboxFilter(filters);
+ console.log("response>>", response);
+ dispatch({
+ type: APPLY_INBOX_FILTER,
+ payload: { response },
+ });
+};
+
+export { createComplaint };
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/redux/actions/types.js b/frontend/micro-ui-internals/packages/modules/pgr/src/redux/actions/types.js
new file mode 100644
index 00000000000..0b706733621
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/redux/actions/types.js
@@ -0,0 +1,16 @@
+//TODO: Make these immutable
+export const FETCH_CITIES = "FETCH_CITIES";
+export const FETCH_LOCALITIES = "FETCH_LOCALITIES";
+export const FETCH_LOCALIZATION_KEYS_PGR = "FETCH_LOCALIZATION_KEYS_PGR";
+export const UPDATE_I18NSTORE_CITY_PGR = "UPDATE_I18nStore_CITY_PGR";
+export const FETCH_LOCALITY_LOCALIZATION_KEYS_PGR = "FETCH_LOCALITY_LOCALIZATION_KEYS_PGR";
+export const CREATE_LOCALITY_DROPDOWN = "CREATE_LOCALITY_DROPDOWN";
+export const UPDATE_I18nStore_LOCALITY_PGR = "UPDATE_I18nStore_LOCALITY_PGR";
+export const CHANGE_LANGUAGE = "CHANGE_LANGUAGE";
+export const FETCH_LANGUAGES = "FETCH_LANGUAGES";
+export const FETCH_COMPLAINTS = "FETCH_COMPLAINTS";
+export const FETCH_ALL_BUSINESSS_SERVICES = "FETCH_ALL_BUSINESSS_SERVICES";
+export const FETCH_BUSINESS_SERVICE_BY_ID = "FETCH_BUSINESS_SERVICE_BY_ID";
+export const UPDATE_COMPLAINT = "UPDATE_COMPLAINT";
+export const CREATE_COMPLAINT = "CREATE_COMPLAINT";
+export const APPLY_INBOX_FILTER = "APPLY_INBOX_FILTER";
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/redux/reducers/complaintReducer.js b/frontend/micro-ui-internals/packages/modules/pgr/src/redux/reducers/complaintReducer.js
new file mode 100644
index 00000000000..92bffc66a43
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/redux/reducers/complaintReducer.js
@@ -0,0 +1,18 @@
+import { APPLY_INBOX_FILTER, CREATE_COMPLAINT, FETCH_COMPLAINTS, UPDATE_COMPLAINT } from "../actions/types";
+
+function complaintReducer(state = {}, action) {
+ switch (action.type) {
+ case CREATE_COMPLAINT:
+ return { ...state, response: action.payload };
+ case FETCH_COMPLAINTS:
+ return { ...state, list: action.payload.complaints };
+ case UPDATE_COMPLAINT:
+ return { ...state, response: action.payload };
+ case APPLY_INBOX_FILTER:
+ return { ...state, response: action.payload.response.instances };
+ default:
+ return state;
+ }
+}
+
+export default complaintReducer;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/redux/reducers/index.js b/frontend/micro-ui-internals/packages/modules/pgr/src/redux/reducers/index.js
new file mode 100644
index 00000000000..40f634f19c8
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/redux/reducers/index.js
@@ -0,0 +1,9 @@
+import { combineReducers } from "redux";
+import complaintReducer from "./complaintReducer";
+
+const getRootReducer = () =>
+ combineReducers({
+ complaints: complaintReducer,
+ });
+
+export default getRootReducer;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/redux/store.js b/frontend/micro-ui-internals/packages/modules/pgr/src/redux/store.js
new file mode 100644
index 00000000000..57eb63e5a60
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/redux/store.js
@@ -0,0 +1,14 @@
+import { createStore, compose, applyMiddleware } from "redux";
+// import { composeWithDevTools } from "redux-devtools-extension";
+import thunk from "redux-thunk";
+import getRootReducer from "./reducers";
+
+const middleware = [thunk];
+const getStore = (defaultStore) => {
+ return createStore(
+ getRootReducer(defaultStore),
+ // composeWithDevTools(applyMiddleware(...middleware)) // :
+ compose(applyMiddleware(...middleware))
+ );
+};
+export default getStore;
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/selectors/complaint.js b/frontend/micro-ui-internals/packages/modules/pgr/src/selectors/complaint.js
new file mode 100644
index 00000000000..cc3decc505e
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/selectors/complaint.js
@@ -0,0 +1,3 @@
+export const selectComplaints = (state) => state.pgr.complaints.list || [];
+
+export const selectComplaintById = (state, id) => state.pgr.complaints.list.filter((complaint) => complaint.service.serviceRequestId === id);
diff --git a/frontend/micro-ui-internals/packages/modules/pgr/src/selectors/processInstance.js b/frontend/micro-ui-internals/packages/modules/pgr/src/selectors/processInstance.js
new file mode 100644
index 00000000000..d58cc569e48
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pgr/src/selectors/processInstance.js
@@ -0,0 +1 @@
+export const selectWorkflow = (state) => (state.businessService && state.businessService.businessService) || {};
diff --git a/frontend/micro-ui-internals/packages/modules/pt/README.md b/frontend/micro-ui-internals/packages/modules/pt/README.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/frontend/micro-ui-internals/packages/modules/pt/package.json b/frontend/micro-ui-internals/packages/modules/pt/package.json
new file mode 100644
index 00000000000..b24f39acd7b
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/package.json
@@ -0,0 +1,35 @@
+{
+ "name": "@egovernments/digit-ui-module-pt",
+ "version": "1.3.0",
+ "license": "MIT",
+ "main": "dist/index.js",
+ "module": "dist/index.modern.js",
+ "source": "src/Module.js",
+ "files": [
+ "dist"
+ ],
+ "scripts": {
+ "start": "microbundle-crl watch --no-compress --format modern,cjs",
+ "build": "microbundle-crl --no-compress --format modern,cjs",
+ "prepublish": "yarn build"
+ },
+ "peerDependencies": {
+ "react": "^17.0.0",
+ "react-router-dom": "^5.2.0"
+ },
+ "dependencies": {
+ "@egovernments/digit-ui-libraries": "^1.3.0",
+ "@egovernments/digit-ui-react-components": "^1.3.0",
+ "lodash.merge": "^4.6.2",
+ "react": "^17.0.0",
+ "react-dom": "^17.0.0",
+ "react-hook-form": "^6.7.0",
+ "react-i18next": "^11.7.3",
+ "react-query": "^3.6.1",
+ "react-redux": "^7.2.1",
+ "react-router-dom": "^5.2.0",
+ "react-table": "^7.6.1",
+ "redux": "^4.0.5",
+ "redux-thunk": "^2.3.0"
+ }
+}
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/Module.js b/frontend/micro-ui-internals/packages/modules/pt/src/Module.js
new file mode 100644
index 00000000000..26141919dae
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/Module.js
@@ -0,0 +1,180 @@
+import { Header, CitizenHomeCard, PTIcon } from "@egovernments/digit-ui-react-components";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useRouteMatch } from "react-router-dom";
+import Area from "./pageComponents/Area";
+import GroundFloorDetails from "./pageComponents/GroundFloorDetails";
+import IsAnyPartOfThisFloorUnOccupied from "./pageComponents/IsAnyPartOfThisFloorUnOccupied";
+import IsResidential from "./pageComponents/IsResidential";
+import IsThisFloorSelfOccupied from "./pageComponents/IsThisFloorSelfOccupied";
+import Proof from "./pageComponents/Proof";
+import PropertyBasementDetails from "./pageComponents/PropertyBasementDetails";
+import PropertyFloorDetails from "./pageComponents/PropertyFloorDetails";
+import PropertyTax from "./pageComponents/PropertyTax";
+import PropertyType from "./pageComponents/PropertyType";
+import PropertyUsageType from "./pageComponents/PropertyUsageType";
+import ProvideSubUsageType from "./pageComponents/ProvideSubUsageType";
+import ProvideSubUsageTypeOfRentedArea from "./pageComponents/ProvideSubUsageTypeOfRentedArea";
+import PTWFApplicationTimeline from "./pageComponents/PTWFApplicationTimeline";
+import PTSelectAddress from "./pageComponents/PTSelectAddress";
+import PTSelectGeolocation from "./pageComponents/PTSelectGeolocation";
+import PTSelectStreet from "./pageComponents/PTSelectStreet";
+import PTSelectPincode from "./pageComponents/PTSelectPincode";
+import RentalDetails from "./pageComponents/RentalDetails";
+import SelectInistitutionOwnerDetails from "./pageComponents/SelectInistitutionOwnerDetails";
+import SelectOwnerAddress from "./pageComponents/SelectOwnerAddress";
+import SelectOwnerDetails from "./pageComponents/SelectOwnerDetails";
+import SelectOwnerShipDetails from "./pageComponents/SelectOwnerShipDetails";
+import SelectProofIdentity from "./pageComponents/SelectProofIdentity";
+import SelectSpecialOwnerCategoryType from "./pageComponents/SelectSpecialOwnerCategoryType";
+import SelectSpecialProofIdentity from "./pageComponents/SelectSpecialProofIdentity";
+import Units from "./pageComponents/Units";
+import SelectAltContactNumber from "./pageComponents/SelectAltContactNumber";
+import SelectDocuments from "./pageComponents/SelectDocuments";
+import UnOccupiedArea from "./pageComponents/UnOccupiedArea";
+import PTEmployeeOwnershipDetails from "./pageComponents/OwnerDetailsEmployee";
+import CitizenApp from "./pages/citizen";
+import SearchPropertyCitizen from "./pages/citizen/SearchProperty/searchProperty";
+import SearchResultCitizen from "./pages/citizen/SearchResults";
+
+import PropertyInformation from "./pages/citizen/MyProperties/propertyInformation";
+import PTWFCaption from "./pageComponents/PTWFCaption";
+import PTWFReason from "./pageComponents/PTWFReason";
+import ProvideFloorNo from "./pageComponents/ProvideFloorNo";
+import propertyOwnerHistory from "./pages/citizen/MyProperties/propertyOwnerHistory";
+import TransferDetails from "./pages/citizen/MyProperties/propertyOwnerHistory";
+import TransfererDetails from "./pageComponents/Mutate/TransfererDetails";
+import OwnerMutate from "./pageComponents/Mutate/Owner";
+import PTComments from "./pageComponents/Mutate/Comments";
+import IsMutationPending from "./pageComponents/Mutate/IsMutationPending";
+import UnderStateAquire from "./pageComponents/Mutate/underStateAquire";
+import PropertyMarketValue from "./pageComponents/Mutate/PropertyMarketValue";
+import PTReasonForTransfer from "./pageComponents/Mutate/ReasonForTransfer";
+import PTRegistrationDocument from "./pageComponents/Mutate/RegistrationDocument";
+import TransferProof from "./pageComponents/Mutate/transferReasonDocument";
+
+import EmployeeApp from "./pages/employee";
+import PTCard from "./components/PTCard";
+import InboxFilter from "./components/inbox/NewInboxFilter";
+import EmptyResultInbox from "./components/empty-result";
+import { TableConfig } from "./config/inbox-table-config";
+
+const componentsToRegister = {
+ PropertyTax,
+ PTSelectPincode,
+ PTSelectAddress,
+ PTSelectStreet,
+ Proof,
+ SelectOwnerShipDetails,
+ SelectOwnerDetails,
+ SelectSpecialOwnerCategoryType,
+ SelectOwnerAddress,
+ SelectInistitutionOwnerDetails,
+ SelectProofIdentity,
+ SelectSpecialProofIdentity,
+ PTSelectGeolocation,
+ PTWFApplicationTimeline,
+ PTWFCaption,
+ PTWFReason,
+ IsThisFloorSelfOccupied,
+ ProvideSubUsageType,
+ RentalDetails,
+ ProvideSubUsageTypeOfRentedArea,
+ IsAnyPartOfThisFloorUnOccupied,
+ UnOccupiedArea,
+ Area,
+ IsResidential,
+ PropertyType,
+ PropertyUsageType,
+ GroundFloorDetails,
+ PropertyFloorDetails,
+ PropertyBasementDetails,
+ PropertyInformation,
+ ProvideFloorNo,
+ propertyOwnerHistory,
+ TransferDetails,
+ Units,
+ SelectAltContactNumber,
+ SelectDocuments,
+ PTEmployeeOwnershipDetails,
+ SearchPropertyCitizen,
+ SearchResultCitizen,
+ TransfererDetails,
+ OwnerMutate,
+ PTComments,
+ IsMutationPending,
+ PropertyMarketValue,
+ PTReasonForTransfer,
+ PTRegistrationDocument,
+ UnderStateAquire,
+ TransferProof,
+};
+
+const addComponentsToRegistry = () => {
+ Object.entries(componentsToRegister).forEach(([key, value]) => {
+ Digit.ComponentRegistryService.setComponent(key, value);
+ });
+};
+
+export const PTModule = ({ stateCode, userType, tenants }) => {
+ const { path, url } = useRouteMatch();
+
+ const moduleCode = "PT";
+ const language = Digit.StoreData.getCurrentLanguage();
+ const { isLoading, data: store } = Digit.Services.useStore({ stateCode, moduleCode, language });
+
+ addComponentsToRegistry();
+
+ Digit.SessionStorage.set("PT_TENANTS", tenants);
+
+ if (userType === "employee") {
+ return
+ {t("CS_MYAPPLICATIONS_NO_APPLICATION")
+ .split("\\n")
+ .map((text, index) => (
+
+ {text}
+
+ ))}
+
+ ) : (
+ {
+ return {
+ style: {
+ minWidth: cellInfo.column.Header === t("ES_INBOX_APPLICATION_NO") ? "240px" : "",
+ padding: "20px 18px",
+ fontSize: "16px",
+ },
+ };
+ }}
+ onPageSizeChange={props.onPageSizeChange}
+ currentPage={props.currentPage}
+ onNextPage={props.onNextPage}
+ onPrevPage={props.onPrevPage}
+ pageSizeLimit={props.pageSizeLimit}
+ onSort={props.onSort}
+ disableSort={props.disableSort}
+ onPageSizeChange={props.onPageSizeChange}
+ sortParams={props.sortParams}
+ totalRecords={props.totalRecords}
+ />
+ );
+ }
+
+ return (
+
+ {!props.isSearch && (
+
+ )}
+
+
{
+ props.onSearch(d);
+ setClearSearchCalled(false);
+ }}
+ type="desktop"
+ searchFields={props.searchFields}
+ isInboxPage={!props?.isSearch}
+ searchParams={props.searchParams}
+ clearSearch={() => setClearSearchCalled(true)}
+ />
+
+ {result}
+
+
+
+
{headComment}
+
{otherComment}
+
+ {data.date &&
{data.date}
}
+
{data.name}
+ {data.mobileNumber &&
}
+ {data.source &&
{t("ES_APPLICATION_DETAILS_APPLICATION_CHANNEL_" + data.source.toUpperCase())}
}
+ {data.comment &&
}
+
+ {props.data ? (
+
+ {t("PT_NO_MATCHING_PROPERTY_FOUND")}
+
+
+
+ ) : null}
+
+ );
+};
+
+export default EmptyResultInbox;
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/ApplicationCard.js b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/ApplicationCard.js
new file mode 100644
index 00000000000..ce2e7559314
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/ApplicationCard.js
@@ -0,0 +1,124 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import { Card, DetailsCard, Loader, PopUp, SearchAction } from "@egovernments/digit-ui-react-components";
+import { FilterAction } from "@egovernments/digit-ui-react-components";
+import SearchApplication from "./search";
+import SortBy from "./SortBy";
+
+export const ApplicationCard = ({
+ t,
+ data,
+ onFilterChange,
+ onSearch,
+ onSort,
+ serviceRequestIdKey,
+ isFstpOperator,
+ isLoading,
+ isSearch,
+ searchParams,
+ searchFields,
+ sortParams,
+ linkPrefix,
+ removeParam,
+ filterComponent,
+}) => {
+ const [type, setType] = useState(isSearch ? "SEARCH" : "");
+ const [popup, setPopup] = useState(isSearch ? true : false);
+ const [_sortparams, setSortParams] = useState(sortParams);
+ const [FilterComp] = useState(() => Digit.ComponentRegistryService?.getComponent(filterComponent));
+
+ const onSearchFilter = (params) => {
+ onFilterChange(params);
+ setPopup(false);
+ };
+
+ useEffect(() => {
+ if (type) setPopup(true);
+ }, [type]);
+
+ const handlePopupClose = () => {
+ setPopup(false);
+ setType("");
+ setSortParams(sortParams);
+ };
+
+ if (isLoading) {
+ return
+ {t("CS_MYAPPLICATIONS_NO_APPLICATION")
+ .split("\\n")
+ .map((text, index) => (
+
+ {text}
+
+ ))}
+
+ );
+ } else if (data && data?.length > 0) {
+ result =
+
+ {onSearch && (
+ {
+ setType("SEARCH");
+ setPopup(true);
+ }}
+ />
+ )}
+ {!isSearch && onFilterChange && (
+ {
+ setType("FILTER");
+ setPopup(true);
+ }}
+ />
+ )}
+ {
+ setType("SORT");
+ setPopup(true);
+ }}
+ />
+
+ {result}
+ {popup && (
+
+ {type === "FILTER" && (
+
+ {
+ )}
+ {type === "SORT" && (
+
+ {
+ )}
+ {type === "SEARCH" && (
+
+
+ )}
+
+ )}
+
+ );
+};
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/ApplicationLinks.js b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/ApplicationLinks.js
new file mode 100644
index 00000000000..8777685a7b8
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/ApplicationLinks.js
@@ -0,0 +1,67 @@
+import { Card, ShippingTruck } from "@egovernments/digit-ui-react-components";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
+const ApplicationLinks = ({ linkPrefix }) => {
+ const { t } = useTranslation();
+
+ const allLinks = [
+ {
+ text: t("ES_TITLE_NEW_REGISTRATION"),
+ link: "/digit-ui/employee/pt/new-application",
+ },
+ {
+ text: t("ES_TITILE_SEARCH_APPLICATION"),
+ link: `${linkPrefix}/search`,
+ },
+ ];
+
+ const [links, setLinks] = useState([]);
+
+ const { roles } = Digit.UserService.getUser().info;
+
+ const hasAccess = (accessTo) => {
+ return roles.filter((role) => accessTo.includes(role.code)).length;
+ };
+
+ useEffect(() => {
+ let linksToShow = [];
+ allLinks.forEach((link) => {
+ if (link.accessTo) {
+ if (hasAccess(link.accessTo)) {
+ linksToShow.push(link);
+ }
+ } else {
+ linksToShow.push(link);
+ }
+ });
+ setLinks(linksToShow);
+ }, []);
+
+ const GetLogo = () => (
+
+
+ {" "}
+ {t("ES_TITLE_PROPERTY_TAX")}
+
+ );
+
+ return (
+
+
+ {GetLogo()}
+
+ {links.map(({ link, text }, index) => (
+
+
+ ))}
+
+
+ );
+};
+
+export default ApplicationLinks;
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/ApplicationTable.js b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/ApplicationTable.js
new file mode 100644
index 00000000000..3259185d568
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/ApplicationTable.js
@@ -0,0 +1,38 @@
+import React from "react";
+import { Table } from "@egovernments/digit-ui-react-components";
+
+const ApplicationTable = ({
+ t,
+ currentPage,
+ columns,
+ data,
+ getCellProps,
+ disableSort,
+ onSort,
+ onNextPage,
+ onPrevPage,
+ onPageSizeChange,
+ pageSizeLimit,
+ sortParams,
+ totalRecords,
+}) => {
+ return (
+
+ );
+};
+
+export default ApplicationTable;
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/InboxLink.js b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/InboxLink.js
new file mode 100644
index 00000000000..922e8f3c36a
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/InboxLink.js
@@ -0,0 +1,66 @@
+import { Card, PropertyHouse } from "@egovernments/digit-ui-react-components";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+const InboxLinks = ({ parentRoute, businessService }) => {
+ const { t } = useTranslation();
+
+ const allLinks = [
+ {
+ text: "ES_TITLE_NEW_REGISTRATION",
+ link: "/digit-ui/employee/pt/new-application",
+ businessService: "PT",
+ roles: ["PT_CEMP"],
+ },
+ {
+ text: "PT_SEARCH_PROPERTY",
+ link: `/digit-ui/employee/pt/search`,
+ businessService: "PT",
+ roles: [],
+ },
+ // { text: "PT_REPORTS", hyperLink: true, link: "/digit-ui/employee/integration/dss/propertytax", roles: [], businessService: "PT" },
+ // { text: "PT_DASHBOARD", link: "/digit-ui/employee/", roles: [], businessService: "PT" },
+ ];
+
+ const [links, setLinks] = useState([]);
+
+ const { roles: userRoles } = Digit.UserService.getUser().info;
+
+ useEffect(() => {
+ let linksToShow = allLinks
+ .filter((e) => e.businessService === businessService)
+ .filter(({ roles }) => roles.some((e) => userRoles.map(({ code }) => code).includes(e)) || !roles?.length);
+ setLinks(linksToShow);
+ }, []);
+
+ const GetLogo = () => (
+
+
+ {" "}
+
{t("ES_TITLE_PROPERTY_TAX")}
+
+
+
+ {GetLogo()}
+ {/*
*/}
+
+ {links.map(({ link, text, hyperlink = false, roles = [] }, index) => {
+ return (
+
+ {hyperlink ? {text} :
+ );
+ })}
+
+
+
+ );
+};
+
+export default InboxLinks;
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/NewInboxFilter.js b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/NewInboxFilter.js
new file mode 100644
index 00000000000..2005757b874
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/NewInboxFilter.js
@@ -0,0 +1,171 @@
+import React, { useEffect, useState } from "react";
+import { Dropdown, RadioButtons, ActionBar, RemoveableTag, CloseSvg, CheckBox, Localities, SubmitBar } from "@egovernments/digit-ui-react-components";
+import { useQueryClient } from "react-query";
+import { useTranslation } from "react-i18next";
+
+import Status from "./Status";
+import _ from "lodash";
+
+const Filter = ({ searchParams, onFilterChange, defaultSearchParams, statusMap, moduleCode, ...props }) => {
+ const { t } = useTranslation();
+ const client = useQueryClient();
+
+ const [_searchParams, setSearchParams] = useState(() => ({ ...searchParams, services: [] }));
+
+ const ApplicationTypeMenu = [
+ {
+ label: "ES_PT_NEW_PROPERTY",
+ value: "PT.CREATE",
+ },
+ {
+ label: "ES_PT_TRANSFER_OWNERSHIP",
+ value: "PT.MUTATION",
+ },
+ {
+ label: "ES_PT_UPDATE_PROPERTY",
+ value: "PT.UPDATE",
+ },
+ ];
+
+ const localParamChange = (filterParam) => {
+ let keys_to_delete = filterParam.delete;
+ let _new = { ..._searchParams, ...filterParam };
+ if (keys_to_delete) keys_to_delete.forEach((key) => delete _new[key]);
+ delete filterParam.delete;
+ setSearchParams({ ..._new });
+ };
+
+ const applyLocalFilters = () => {
+ if (_searchParams.services.length === 0) onFilterChange({ ..._searchParams, services: ApplicationTypeMenu.map((e) => e.value) });
+ else onFilterChange(_searchParams);
+ };
+
+ const clearAll = () => {
+ setSearchParams({ ...defaultSearchParams, services: [] });
+ onFilterChange({ ...defaultSearchParams });
+ };
+
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+
+ const onServiceSelect = (e, label) => {
+ if (e.target.checked) localParamChange({ services: Array.isArray(_searchParams.services) ? [..._searchParams.services, label] : [label] });
+ else
+ localParamChange({
+ services: _searchParams.services.filter((o) => o !== label),
+ applicationStatus: _searchParams.applicationStatus?.filter((e) => e.stateBusinessService !== label),
+ });
+ };
+
+ const selectLocality = (d) => {
+ localParamChange({ locality: [..._searchParams?.locality, d] });
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
{t("ES_COMMON_FILTER_BY")}:
+
+
+ {t("ES_COMMON_CLEAR_ALL")}
+
+ {props.type === "desktop" && (
+
+
+
+ {/* {t("ES_COMMON_CLEAR_ALL")} */}
+
+ )}
+ {props.type === "mobile" && (
+
+
+ )}
+
+
+
localParamChange({ uuid: d })}
+ selectedOption={_searchParams?.uuid}
+ t={t}
+ optionsKey="name"
+ options={[
+ { code: "ASSIGNED_TO_ME", name: "ES_INBOX_ASSIGNED_TO_ME" },
+ { code: "ASSIGNED_TO_ALL", name: "ES_INBOX_ASSIGNED_TO_ALL" },
+ ]}
+ />
+
+
+ {t("ES_INBOX_LOCALITY")}:
+
+
+
+ {_searchParams?.locality?.map((locality, index) => {
+ return (
+ {
+ localParamChange({ locality: _searchParams?.locality.filter((loc) => loc.code !== locality.code) });
+ }}
+ />
+ );
+ })}
+
+
+
+ {t("ES_PT_APP_TYPE")}
+
+ {ApplicationTypeMenu.map((e, index) => {
+ const checked = _searchParams?.services?.includes(e.value);
+ return (
+
onServiceSelect(event, e.value)}
+ />
+ );
+ })}
+
+ {
+ if (e.target.checked) localParamChange({ applicationStatus: [..._searchParams?.applicationStatus, status] });
+ else {
+ let applicationStatus = _searchParams?.applicationStatus.filter((e) => e.state !== status.state);
+ localParamChange({ applicationStatus });
+ }
+ }}
+ />
+
+
+ applyLocalFilters()} label={t("ES_COMMON_APPLY")} />
+
+
+
+
+ );
+};
+
+export default Filter;
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/SortBy.js b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/SortBy.js
new file mode 100644
index 00000000000..acecdc5e9a6
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/SortBy.js
@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { RadioButtons } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import { CloseSvg } from "@egovernments/digit-ui-react-components";
+
+const SortBy = (props) => {
+ const { t } = useTranslation();
+ const [selectedOption, setSelectedOption] = useState(() => {
+ return props.sortParams?.[0]?.desc
+ ? { code: "DESC", name: t("ES_INBOX_DATE_LATEST_FIRST") }
+ : { code: "ASC", name: t("ES_INBOX_DATE_LATEST_LAST") };
+ });
+
+ function clearAll() {}
+
+ function onSort(option) {
+ props.onSort([{ id: "createdTime", desc: option.code === "DESC" ? true : false }]);
+ props.onClose();
+ }
+
+ return (
+
+
+
+
+
{t("SORT_BY")}:
+
+ {t("ES_COMMON_CLEAR_ALL")}
+
+ {props.type === "desktop" && (
+
+ {t("ES_COMMON_CLEAR_ALL")}
+
+ )}
+ {props.type === "mobile" && (
+
+
+ )}
+
+
+
+
+
+ );
+};
+
+export default SortBy;
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/Status.js b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/Status.js
new file mode 100644
index 00000000000..d8e99932a9f
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/Status.js
@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from "react";
+import { Loader } from "@egovernments/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import StatusCount from "./StatusCount";
+
+const Status = ({ onAssignmentChange, searchParams, businessServices, statusMap, moduleCode }) => {
+ const { t } = useTranslation();
+
+ const [moreStatus, showMoreStatus] = useState(false);
+
+ const { data: statusData, isLoading } = Digit.Hooks.useApplicationStatusGeneral({ businessServices }, {});
+
+ const { userRoleStates, otherRoleStates } = statusData || {};
+
+ const map = {
+ "PT.CREATE": "ES_PT_NEW_PROPERTY",
+ "PT.MUTATION": "ES_PT_TRANSFER_OWNERSHIP",
+ "PT.UPDATE": "ES_PT_UPDATE_PROPERTY",
+ };
+
+ const translateState = (state, t) => {
+ return `${t(map[state.stateBusinessService])}` + " - " + t(`ES_PT_COMMON_STATUS_${state.state || "CREATED"}`);
+ // return t(`ES_PT_COMMON_STATUS_${state.state || "CREATED"}`);
+ };
+
+ // useEffect(() => {
+ // if (statusData) {
+ // let a = statusData.userRoleStates
+ // ?.filter((e) => !e.isTerminateState)
+ // .reduce((acc, state) => {
+ // if (!acc[state.state]) acc[state.state] = [state];
+ // else acc[state.state]?.push(state);
+ // return acc;
+ // }, {});
+ // console.log(statusData, a, "status data");
+ // }
+ // }, [statusData]);
+
+ if (isLoading) {
+ return
;
+ }
+
+ return userRoleStates?.filter((e) => !e.isTerminateState).length ? (
+
+
+ {t("ES_INBOX_STATUS")}
+
+ {userRoleStates
+ ?.filter((e) => !e.isTerminateState)
+ ?.slice(0, 4)
+ ?.map((option, index) => {
+ return (
+
+ );
+ })}
+ {userRoleStates?.filter((e) => !e.isTerminateState)?.slice(4).length > 0 ? (
+
+ {moreStatus &&
+ userRoleStates
+ ?.filter((e) => !e.isTerminateState)
+ ?.slice(4)
+ ?.map((option, index) => {
+ return (
+ showMoreStatus(!moreStatus)}>
+ {" "}
+ {moreStatus ? t("ES_COMMON_LESS") : t("ES_COMMON_MORE")}{" "}
+
+
+ ) : null}
+
+ ) : null;
+};
+
+export default Status;
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/StatusCount.js b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/StatusCount.js
new file mode 100644
index 00000000000..6cc3b449d76
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/StatusCount.js
@@ -0,0 +1,26 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { CheckBox } from "@egovernments/digit-ui-react-components";
+
+const StatusCount = ({ status, searchParams, onAssignmentChange, statusMap, businessServices }) => {
+ const { t } = useTranslation();
+
+ // console.log(
+ // status,
+ // statusMap?.find((e) => e.statusid === status.uuid),
+ // "inside status count"
+ // );
+
+ return (
+
onAssignmentChange({ ...e, state: status.state }, status)}
+ checked={(() => {
+ return searchParams?.applicationStatus.some((e) => e.uuid === status.uuid);
+ })()}
+ label={`${status.name} (${statusMap?.find((e) => e.statusid === status.uuid)?.count || "-"})`}
+ />
+ );
+};
+
+export default StatusCount;
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/search.js b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/search.js
new file mode 100644
index 00000000000..09f8899c19d
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/components/inbox/search.js
@@ -0,0 +1,206 @@
+import React, { useEffect, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import {
+ TextInput,
+ Label,
+ SubmitBar,
+ LinkLabel,
+ ActionBar,
+ CloseSvg,
+ DatePicker,
+ MobileNumber,
+ Dropdown,
+ Localities,
+} from "@egovernments/digit-ui-react-components";
+
+import { useTranslation } from "react-i18next";
+
+const fieldComponents = {
+ date: DatePicker,
+ mobileNumber: MobileNumber,
+ Locality: (props) => (
+ (a.i18nkey < b.i18nkey ? -1 : 1)}
+ />
+ ),
+};
+
+const SearchApplication = ({ onSearch, type, onClose, searchFields, searchParams, isInboxPage, defaultSearchParams, clearSearch: _clearSearch }) => {
+ const { t } = useTranslation();
+ const { handleSubmit, reset, watch, control, setError, clearErrors, formState, setValue } = useForm({
+ defaultValues: isInboxPage ? searchParams : { locality: null, city: null, ...searchParams },
+ });
+
+ const form = watch();
+
+ const formValueEmpty = () => {
+ let isEmpty = true;
+ Object.keys(form).forEach((key) => {
+ if (!["locality", "city"].includes(key) && form[key]) isEmpty = false;
+ });
+
+ if (searchFields?.find((e) => e.name === "locality") && !form?.locality?.code) isEmpty = true;
+ return isEmpty;
+ };
+
+ const mobileView = innerWidth <= 640;
+
+ useEffect(() => {
+ searchFields.forEach(({ pattern, name, maxLength, minLength, errorMessages, ...el }) => {
+ const value = form[name];
+ const error = formState.errors[name];
+ if (pattern) {
+ if (!new RegExp(pattern).test(value) && !error)
+ setError(name, { type: "pattern", message: t(errorMessages?.pattern) || t(`PATTERN_${name.toUpperCase()}_FAILED`) });
+ else if (new RegExp(pattern).test(value) && error?.type === "pattern") clearErrors([name]);
+ }
+ if (minLength) {
+ if (value?.length < minLength && !error)
+ setError(name, { type: "minLength", message: t(errorMessages?.minLength || `MINLENGTH_${name.toUpperCase()}_FAILED`) });
+ else if (value?.length >= minLength && error?.type === "minLength") clearErrors([name]);
+ }
+ if (maxLength) {
+ if (value?.length > maxLength && !error)
+ setError(name, { type: "maxLength", message: t(errorMessages?.maxLength || `MAXLENGTH_${name.toUpperCase()}_FAILED`) });
+ else if (value?.length <= maxLength && error?.type === "maxLength") clearErrors([name]);
+ }
+ });
+ }, [form, formState, setError, clearErrors]);
+
+ // console.log(_.isEqual(defaultSearchParams, searchParams), { defaultSearchParams, searchParams }, "params are defaulted");
+
+ const onSubmitInput = (data) => {
+ if (!data.mobileNumber) {
+ delete data.mobileNumber;
+ }
+
+ data.delete = [];
+
+ searchFields.forEach((field) => {
+ if (!data[field.name]) data.delete.push(field.name);
+ });
+
+ onSearch(data);
+ if (type === "mobile") {
+ onClose();
+ }
+ };
+
+ function clearSearch() {
+ const resetValues = searchFields.reduce((acc, field) => ({ ...acc, [field?.name]: "" }), {});
+ reset(resetValues);
+ if (isInboxPage) {
+ const _newParams = { ...searchParams };
+ _newParams.delete = [];
+ searchFields.forEach((e) => {
+ _newParams.delete.push(e?.name);
+ });
+ onSearch({ ..._newParams });
+ } else {
+ _clearSearch();
+ }
+ }
+
+ const clearAll = (mobileView) => {
+ const mobileViewStyles = mobileView ? { margin: 0 } : {};
+ return (
+
+ {t("ES_COMMON_CLEAR_SEARCH")}
+
+ );
+ };
+
+ return (
+
+ );
+};
+
+export default SearchApplication;
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/config/Create/config.js b/frontend/micro-ui-internals/packages/modules/pt/src/config/Create/config.js
new file mode 100644
index 00000000000..d94e81723cb
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/config/Create/config.js
@@ -0,0 +1,568 @@
+export const newConfig = [
+ {
+ head: "ES_NEW_APPLICATION_LOCATION_DETAILS",
+ body: [
+ // {
+ // route: "info",
+ // component: "PropertyTax",
+ // nextStep: "map",
+ // hideInEmployee: true,
+ // key: "Documents",
+ // },
+ {
+ route: "map",
+ component: "PTSelectGeolocation",
+ nextStep: "pincode",
+ hideInEmployee: true,
+ key: "address",
+ texts: {
+ header: "PT_GEOLOCATON_HEADER",
+ cardText: "PT_GEOLOCATION_TEXT",
+ nextText: "PT_COMMON_NEXT",
+ skipAndContinueText: "CORE_COMMON_SKIP_CONTINUE",
+ },
+ },
+ {
+ route: "pincode",
+ component: "PTSelectPincode",
+ texts: {
+ headerCaption: "PT_PROPERTY_LOCATION_CAPTION",
+ header: "PT_PINCODE_LABEL",
+ cardText: "PT_PINCODE_TEXT",
+ submitBarLabel: "PT_COMMON_NEXT",
+ skipText: "CORE_COMMON_SKIP_CONTINUE",
+ },
+ withoutLabel: true,
+ key: "address",
+ nextStep: "address",
+ type: "component",
+ },
+ {
+ route: "address",
+ component: "PTSelectAddress",
+ withoutLabel: true,
+ texts: {
+ headerCaption: "PT_PROPERTY_LOCATION_CAPTION",
+ header: "CS_FILE_APPLICATION_PROPERTY_LOCATION_ADDRESS_TEXT",
+ cardText: "CS_FILE_APPLICATION_PROPERTY_LOCATION_CITY_MOHALLA_TEXT",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "address",
+ nextStep: "street",
+ isMandatory: true,
+ type: "component",
+ },
+ {
+ type: "component",
+ route: "street",
+ component: "PTSelectStreet",
+ key: "address",
+ withoutLabel: true,
+ texts: {
+ headerCaption: "PT_PROPERTY_LOCATION_CAPTION",
+ header: "CS_FILE_APPLICATION_PROPERTY_LOCATION_ADDRESS_TEXT",
+ cardText: "PT_STREET_TEXT",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ nextStep: "landmark",
+ },
+ {
+ type: "component",
+ route: "landmark",
+ component: "SelectLandmark",
+ withoutLabel: true,
+ texts: {
+ headerCaption: "PT_PROPERTY_LOCATION_CAPTION",
+ header: "CS_FILE_APPLICATION_PROPERTY_LOCATION_PROVIDE_LANDMARK_TITLE",
+ cardText: "CS_FILE_APPLICATION_PROPERTY_LOCATION_PROVIDE_LANDMARK_TEXT",
+ submitBarLabel: "PT_COMMON_NEXT",
+ skipText: "CORE_COMMON_SKIP_CONTINUE",
+ },
+ key: "address",
+ nextStep: "proof",
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "proof",
+ component: "Proof",
+ withoutLabel: true,
+ texts: {
+ headerCaption: "PT_PROPERTY_LOCATION_CAPTION",
+ header: "PT_PROOF_OF_ADDRESS_HEADER",
+ cardText: "",
+ nextText: "PT_COMMONS_NEXT",
+ submitBarLabel: "PT_COMMONS_NEXT",
+ },
+ key: "address",
+ nextStep: "owner-ship-details@0",
+ hideInEmployee: true,
+ },
+ ],
+ },
+ {
+ head: "ES_NEW_APPLICATION_PROPERTY_ASSESSMENT",
+ body: [
+ {
+ route: "info",
+ component: "PropertyTax",
+ nextStep: "isResidential",
+ hideInEmployee: true,
+ key: "Documents",
+ },
+ {
+ type: "component",
+ route: "isResidential",
+ isMandatory: true,
+ component: "IsResidential",
+ texts: {
+ headerCaption: "",
+ header: "PT_PROPERTY_DETAILS_RESIDENTIAL_PROPERTY_HEADER",
+ cardText: "PT_PROPERTY_DETAILS_RESIDENTIAL_PROPERTY_TEXT",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "isResdential",
+ withoutLabel: true,
+ hideInEmployee: true,
+ //nextStep: "property-usage-type",
+ nextStep: {
+ PT_COMMON_YES: "property-type",
+ PT_COMMON_NO: "property-usage-type",
+ },
+ },
+ {
+ type: "component",
+ route: "property-usage-type",
+ isMandatory: true,
+ component: "PropertyUsageType",
+ texts: {
+ headerCaption: "PT_ASSESMENT_INFO_USAGE_TYPE",
+ header: "PT_PROPERTY_DETAILS_USAGE_TYPE_HEADER",
+ cardText: "PT_PROPERTY_DETAILS_USAGE_TYPE_TEXT",
+ submitBarLabel: "PT_COMMONS_NEXT",
+ },
+ nextStep: "property-type",
+ key: "usageCategoryMajor",
+ withoutLabel: true,
+ },
+ {
+ type: "component",
+ isMandatory: true,
+ component: "ProvideSubUsageType",
+ key: "usageCategoryMinor",
+ withoutLabel: true,
+ },
+ {
+ type: "component",
+ route: "provide-sub-usage-type",
+ isMandatory: true,
+ component: "ProvideSubUsageType",
+ texts: {
+ headerCaption: "PT_ASSESMENT_INFO_USAGE_TYPE",
+ header: "PT_ASSESSMENT_FLOW_SUBUSAGE_HEADER",
+ cardText: "PT_ASSESSMENT_FLOW_SUBUSAGE_TEXT",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "units",
+ withoutLabel: true,
+ //nextStep: "is-any-part-of-this-floor-unoccupied",
+ nextStep: {
+ yes: "is-any-part-of-this-floor-unoccupied",
+ no: "provide-sub-usage-type-of-rented-area",
+ },
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "property-type",
+ isMandatory: true,
+ component: "PropertyType",
+ texts: {
+ headerCaption: "",
+ header: "PT_ASSESMENT1_PROPERTY_TYPE",
+ cardText: "",
+ submitBarLabel: "PT_COMMONS_NEXT",
+ },
+ //nextStep: "number-of-floors",
+ nextStep: {
+ COMMON_PROPTYPE_BUILTUP_INDEPENDENTPROPERTY: "number-of-floors",
+ COMMON_PROPTYPE_BUILTUP_SHAREDPROPERTY: "provide-floor-no",
+ COMMON_PROPTYPE_VACANT: "area",
+ },
+ key: "PropertyType",
+ withoutLabel: true,
+ },
+ {
+ type: "component",
+ isMandatory: true,
+ component: "Area",
+ key: "landarea",
+ withoutLabel: true,
+ },
+ {
+ type: "component",
+ route: "area",
+ isMandatory: true,
+ component: "Area",
+ texts: {
+ headerCaption: "",
+ header: "PT_ASSESSMENT_FLOW_AREA_HEADER",
+ cardText: "PT_SELFOCCUPIED_AREA",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "units",
+ withoutLabel: true,
+ //nextStep: "provide-sub-usage-type-of-rented-area",
+ nextStep: { yes: "rental-details", no: "provide-sub-usage-type", vacant: "map" },
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "number-of-floors",
+ isMandatory: true,
+ component: "PropertyFloorDetails",
+ texts: {
+ headerCaption: "",
+ header: "BPA_SCRUTINY_DETAILS_NUMBER_OF_FLOORS_LABEL",
+ cardText: "PT_PROPERTY_DETAILS_NO_OF_FLOORS_TEXT",
+ submitBarLabel: "PT_COMMONS_NEXT",
+ },
+ nextStep: "number-of-basements@0",
+ key: "noOfFloors",
+ withoutLabel: true,
+ },
+ {
+ type: "component",
+ component: "Units",
+ key: "units",
+ withoutLabel: true,
+ },
+ {
+ type: "component",
+ route: "provide-floor-no",
+ isMandatory: true,
+ component: "ProvideFloorNo",
+ texts: {
+ headerCaption: "",
+ header: "PT_FLOOR_NUMBER_HEADER",
+ cardText: "",
+ submitBarLabel: "PT_COMMONS_NEXT",
+ },
+ nextStep: "floordetails",
+ key: "Floorno",
+ withoutLabel: true,
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "is-this-floor-self-occupied",
+ isMandatory: true,
+ component: "IsThisFloorSelfOccupied",
+ texts: {
+ headerCaption: "",
+ header: "PT_ASSESSMENT_FLOW_FLOOR_OCC_HEADER",
+ cardText: "PT_ASSESSMENT_FLOW_FLOOR_OCC_TEXT",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "units",
+ withoutLabel: true,
+ //nextStep: "provide-sub-usage-type",
+ nextStep: {
+ PT_YES_IT_IS_SELFOCCUPIED: "provide-sub-usage-type",
+ PT_YES_IT_IS_SELFOCCUPIED1: "is-any-part-of-this-floor-unoccupied",
+ PT_PARTIALLY_RENTED_OUT: "area",
+ PT_PARTIALLY_RENTED_OUT1: "area",
+ PT_FULLY_RENTED_OUT: "provide-sub-usage-type-of-rented-area",
+ PT_FULLY_RENTED_OUT1: "rental-details",
+ },
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "number-of-basements@0",
+ isMandatory: true,
+ component: "PropertyBasementDetails",
+ texts: {
+ headerCaption: "",
+ header: "PT_PROPERTY_DETAILS_NO_OF_BASEMENTS_HEADER",
+ cardText: "",
+ submitBarLabel: "PT_COMMONS_NEXT",
+ },
+ nextStep: {
+ PT_NO_BASEMENT_OPTION: "floordetails",
+ PT_ONE_BASEMENT_OPTION: "floordetails",
+ PT_TWO_BASEMENT_OPTION: "floordetails",
+ },
+ //nextStep: "floordetails@0",
+ key: "noOofBasements",
+ withoutLabel: true,
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "floordetails",
+ isMandatory: true,
+ component: "GroundFloorDetails",
+ texts: {
+ headerCaption: "",
+ cardText: "PT_PROPERTY_DETAILS_FLOOR_DETAILS_TEXT",
+ submitBarLabel: "Next",
+ },
+ nextStep: "is-this-floor-self-occupied",
+ key: "units",
+ withoutLabel: true,
+ hideInEmployee: true,
+ },
+
+ {
+ type: "component",
+ route: "rental-details",
+ isMandatory: true,
+ component: "RentalDetails",
+ texts: {
+ //headerCaption: "PT_GROUND_FLOOR_DETAILS_LABEL",
+ header: "PT_ASSESSMENT_FLOW_RENTAL_DETAIL_HEADER",
+ cardText: "",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "units",
+ withoutLabel: true,
+ nextStep: "is-any-part-of-this-floor-unoccupied",
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "provide-sub-usage-type-of-rented-area",
+ isMandatory: true,
+ component: "ProvideSubUsageTypeOfRentedArea",
+ texts: {
+ headerCaption: "PT_ASSESMENT_INFO_USAGE_TYPE",
+ header: "PT_ASSESSMENT_FLOW_RENT_SUB_USAGE_HEADER",
+ cardText: "PT_ASSESSMENT_FLOW_SUBUSAGE_TEXT",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "units",
+ withoutLabel: true,
+ nextStep: "rental-details",
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "is-any-part-of-this-floor-unoccupied",
+ isMandatory: true,
+ component: "IsAnyPartOfThisFloorUnOccupied",
+ texts: {
+ //headerCaption: "PT_GROUND_FLOOR_DETAILS_LABEL",
+ header: "PT_ASSESSMENT_FLOW_ISUNOCCUPIED_HEADER",
+ cardText: "PT_ASSESSMENT_FLOW_ISUNOCCUPIED_TEXT",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "units",
+ withoutLabel: true,
+ //nextStep: "un-occupied-area",
+ nextStep: {
+ PT_COMMON_NO: "map",
+ PT_COMMON_YES: "un-occupied-area",
+ },
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "un-occupied-area",
+ isMandatory: true,
+ component: "UnOccupiedArea",
+ texts: {
+ //headerCaption: "PT_GROUND_FLOOR_DETAILS_LABEL",
+ header: "PT_ASSESSMENT_FLOW_UNOCCUPIED_AREA_HEADER",
+ cardText: "PT_ASSESSMENT_FLOW_UNOCCUPIED_AREA_TEXT",
+ submitBarLabel: "PT_COMMON_NEXT",
+ skipText: "",
+ },
+ key: "units",
+ withoutLabel: true,
+ nextStep: "map",
+ hideInEmployee: true,
+ },
+ ],
+ },
+ {
+ head: "ES_NEW_APPLICATION_OWNERSHIP_DETAILS",
+ body: [
+ {
+ type: "component",
+ route: "owner-ship-details@0",
+ isMandatory: true,
+ component: "SelectOwnerShipDetails",
+ texts: {
+ headerCaption: "PT_PROPERTIES_OWNERSHIP",
+ header: "PT_PROVIDE_OWNERSHIP_DETAILS",
+ cardText: "PT_PROVIDE_OWNERSHI_DETAILS_SUB_TEXT",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "ownershipCategory",
+ withoutLabel: true,
+ nextStep: {
+ INSTITUTIONALPRIVATE: "inistitution-details",
+ INSTITUTIONALGOVERNMENT: "inistitution-details",
+ "INDIVIDUAL.SINGLEOWNER": "owner-details",
+ "INDIVIDUAL.MULTIPLEOWNERS": "owner-details",
+ },
+ },
+ {
+ isMandatory: true,
+ type: "component",
+ route: "owner-details",
+ key: "owners",
+ component: "SelectOwnerDetails",
+ texts: {
+ headerCaption: "",
+ header: "PT_OWNERSHIP_INFO_SUB_HEADER",
+ cardText: "PT_FORM3_HEADER_MESSAGE",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ withoutLabel: true,
+ nextStep: "special-owner-category",
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "special-owner-category",
+ isMandatory: true,
+ component: "SelectSpecialOwnerCategoryType",
+ texts: {
+ headerCaption: "PT_OWNERS_DETAILS",
+ header: "PT_SPECIAL_OWNER_CATEGORY",
+ cardText: "PT_FORM3_HEADER_MESSAGE",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "owners",
+ withoutLabel: true,
+ nextStep: "owner-address",
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "owner-address",
+ isMandatory: true,
+ component: "SelectOwnerAddress",
+ texts: {
+ headerCaption: "PT_OWNERS_DETAILS",
+ header: "PT_OWNERS_ADDRESS",
+ cardText: "",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "owners",
+ withoutLabel: true,
+ nextStep: "special-owner-category-proof",
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ component: "SelectAltContactNumber",
+ key: "owners",
+ withoutLabel: true,
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "special-owner-category-proof",
+ isMandatory: true,
+ component: "SelectSpecialProofIdentity",
+ texts: {
+ headerCaption: "PT_OWNERS_DETAILS",
+ header: "PT_SPECIAL_OWNER_CATEGORY_PROOF_HEADER",
+ cardText: "",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "owners",
+ withoutLabel: true,
+ nextStep: "proof-of-identity",
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "proof-of-identity",
+ isMandatory: true,
+ component: "SelectProofIdentity",
+ texts: {
+ headerCaption: "PT_OWNERS_DETAILS",
+ header: "PT_PROOF_IDENTITY_HEADER",
+ cardText: "",
+ submitBarLabel: "PT_COMMON_NEXT",
+ addMultipleText: "PT_COMMON_ADD_APPLICANT_LABEL",
+ },
+ key: "owners",
+ withoutLabel: true,
+ nextStep: null,
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "inistitution-details",
+ isMandatory: true,
+ component: "SelectInistitutionOwnerDetails",
+ texts: {
+ headerCaption: "",
+ header: "PT_INSTITUTION_DETAILS_HEADER",
+ cardText: "PT_FORM3_HEADER_MESSAGE",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "owners",
+ withoutLabel: true,
+ nextStep: "institutional-owner-address",
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "institutional-owner-address",
+ isMandatory: true,
+ component: "SelectOwnerAddress",
+ texts: {
+ headerCaption: "PT_OWNERS_DETAILS",
+ header: "PT_OWNERS_ADDRESS",
+ cardText: "",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "owners",
+ withoutLabel: true,
+ nextStep: "institutional-proof-of-identity",
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "institutional-proof-of-identity",
+ isMandatory: true,
+ component: "SelectProofIdentity",
+ texts: {
+ headerCaption: "PT_OWNERS_DETAILS",
+ header: "PT_PROOF_IDENTITY_HEADER",
+ cardText: "",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "owners",
+ withoutLabel: true,
+ //nextStep: "",
+ nextStep: null,
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ component: "PTEmployeeOwnershipDetails",
+ key: "owners",
+ withoutLabel: true,
+ hideInCitizen: true,
+ },
+ ],
+ },
+ {
+ head: "ES_NEW_APPLICATION_DOCUMENTS_REQUIRED",
+ body: [
+ {
+ component: "SelectDocuments",
+ withoutLabel: true,
+ key: "documents",
+ type: "component",
+ },
+ ],
+ },
+];
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/config/Mutate/config.js b/frontend/micro-ui-internals/packages/modules/pt/src/config/Mutate/config.js
new file mode 100644
index 00000000000..d22b1e86a44
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/config/Mutate/config.js
@@ -0,0 +1,497 @@
+export const newConfigMutate = [
+ {
+ head: "PT_MUTATION_TRANSFEROR_DETAILS",
+ body: [
+ {
+ route: "info",
+ component: "PropertyTax",
+ nextStep: "transferer-details",
+ hideInEmployee: true,
+ key: "_Documents",
+ isMutation: true,
+ hideInEmployee: true,
+ },
+ // {
+ // component: "TransfererDetails",
+ // key: "TransfererDetails",
+ // texts: {
+ // header: "PT_GEOLOCATON_HEADER",
+ // cardText: "PT_GEOLOCATION_TEXT",
+ // nextText: "PT_COMMON_NEXT",
+ // skipAndContinueText: "CORE_COMMON_SKIP_CONTINUE",
+ // },
+ // },
+ {
+ route: "search-property",
+ component: "SearchPropertyCitizen",
+ nextStep: "search-results",
+ key: "searchParams",
+ texts: {
+ header: "SEARCH_PROPERTY",
+ submitButtonLabel: "PT_HOME_SEARCH_RESULTS_BUTTON_SEARCH",
+ text: "CS_PT_HOME_SEARCH_RESULTS_DESC",
+ },
+ inputs: [
+ {
+ label: "PT_HOME_SEARCH_RESULTS_OWN_MOB_LABEL",
+ type: "mobileNumber",
+ name: "mobileNumber",
+ error: "ERR_HRMS_INVALID_USER_ID",
+ },
+ {
+ label: "PT_PROPERTY_UNIQUE_ID",
+ description: "CS_PROPERTY_ID_FORMAT_MUST_BE",
+ type: "text",
+ name: "propertyId",
+ error: "ERR_HRMS_WRONG_PASSWORD",
+ },
+ {
+ label: "PT_EXISTING_PROPERTY_ID",
+ type: "text",
+ name: "oldPropertyId",
+ error: "ERR_HRMS_INVALID_CITY",
+ },
+ ],
+ action: "MUTATION",
+ hideInEmployee: true,
+ },
+ {
+ route: "search-results",
+ component: "SearchResultCitizen",
+ key: "searchResult",
+ nextStep: "transferer-details",
+ nextStep: "info",
+ action: "MUTATION",
+ hideInEmployee: true,
+ texts: {
+ header: "CS_SEARCH_RESULTS",
+ actionButtonLabel: "PT_OWNERSHIP_TRANSFER",
+ nextText: "PT_COMMON_NEXT",
+ },
+ labels: [
+ {
+ label: "PT_TOTAL_DUES",
+ key: "total_due",
+ noteStyle: {
+ fontSize: "24px",
+ fontWeight: "bold",
+ },
+ // notePrefix: "₹ ",
+ },
+ {
+ label: "PT_PROPERTY_PTUID",
+ key: "property_id",
+ },
+ {
+ label: "PT_OWNERSHIP_INFO_NAME",
+ key: "owner_name",
+ },
+ {
+ label: "PT_PROPERTY_ADDRESS_SUB_HEADER",
+ key: "property_address",
+ },
+ {
+ label: "PT_DUE_DATE",
+ key: "bil_due__date",
+ },
+ ],
+ },
+ {
+ route: "transferer-details",
+ nextStep: "owner-ship-details@0",
+ key: "transfererDetails",
+ type: "component",
+ withoutLabel: true,
+ component: "TransfererDetails",
+ texts: {
+ nextText: "PT_COMMON_NEXT",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ labels: [
+ {
+ label: "PT_OWNERSHIP_INSTI_NAME",
+ keyPath: ["searchResult", "property", "institution", "name"],
+ ownershipType: "INSTITUTIONAL",
+ },
+ {
+ label: "PT_OWNERSHIP_INFO_DESIGNATION",
+ keyPath: ["searchResult", "property", "institution", "designation"],
+ ownershipType: "INSTITUTIONAL",
+ },
+ {
+ label: "PT_INSTI_OWNERSHIP_TYPE",
+ keyPath: ["searchResult", "property", "institution", "type"],
+ ownershipType: "INSTITUTIONAL",
+ },
+ {
+ label: "PT_OWNERSHIP_INFO_NAME_OF_AUTH",
+ keyPath: ["searchResult", "property", "institution", "nameOfAuthorizedPerson"],
+ ownershipType: "INSTITUTIONAL",
+ },
+ {
+ label: "PT_OWNERSHIP_INFO_TEL_NO",
+ keyPath: ["searchResult", "property", "owners", "_index_", "altContactNumber"],
+ ownershipType: "INSTITUTIONAL",
+ },
+ {
+ label: "PT_OWNERSHIP_INFO_NAME",
+ keyPath: ["searchResult", "property", "owners", "_index_", "name"],
+ ownershipType: "INDIVIDUAL",
+ },
+ {
+ label: "PT_GUARDIAN_NAME",
+ keyPath: ["searchResult", "property", "owners", "_index_", "fatherOrHusbandName"],
+ ownershipType: "INDIVIDUAL",
+ },
+ {
+ label: "PT_OWNERSHIP_INFO_MOBILE_NO",
+ keyPath: ["searchResult", "property", "owners", "_index_", "mobileNumber"],
+ ownershipType: "ALL",
+ },
+ {
+ label: "PT_OWNERSHIP_INFO_EMAIL_ID",
+ keyPath: ["searchResult", "property", "owners", "_index_", "emailId"],
+ ownershipType: "INDIVIDUAL",
+ },
+ {
+ label: "PT_OWNERSHIP_INFO_USER_CATEGORY",
+ keyPath: ["searchResult", "property", "owners", "_index_", "ownerType"],
+ ownershipType: "INDIVIDUAL",
+ },
+ {
+ label: "PT_OWNERSHIP_INFO_CORR_ADDR",
+ keyPath: ["searchResult", "property", "owners", "_index_", "correspondenceAddress"],
+ ownershipType: "ALL",
+ },
+ ],
+ },
+ // ownership or transferee
+
+ // mutation starts here
+ ],
+ },
+ {
+ head: "PT_MUTATION_TRANSFEREE_DETAILS_HEADER",
+ body: [
+ {
+ type: "component",
+ route: "owner-ship-details@0",
+ isMandatory: true,
+ component: "SelectOwnerShipDetails",
+ texts: {
+ headerCaption: "PT_MUTATION_TRANSFEREE_DETAILS_HEADER",
+ header: "PT_PROVIDE_OWNERSHIP_DETAILS",
+ cardText: "PT_PROVIDE_OWNERSHI_DETAILS_SUB_TEXT",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "ownershipCategory",
+ withoutLabel: true,
+ nextStep: {
+ INSTITUTIONALPRIVATE: "inistitution-details",
+ INSTITUTIONALGOVERNMENT: "inistitution-details",
+ "INDIVIDUAL.SINGLEOWNER": "multiple-owners",
+ "INDIVIDUAL.MULTIPLEOWNERS": "multiple-owners",
+ },
+ },
+ {
+ route: "multiple-owners",
+ component: "OwnerMutate",
+ withoutLabel: true,
+ nextStep: "is-mutatation-pending",
+ key: "Owners",
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "inistitution-details",
+ isMandatory: true,
+ component: "SelectInistitutionOwnerDetails",
+ texts: {
+ headerCaption: "",
+ header: "PT_INSTITUTION_DETAILS_HEADER",
+ cardText: "PT_FORM3_HEADER_MESSAGE",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "owners",
+ withoutLabel: true,
+ nextStep: "institutional-owner-address",
+ hideInEmployee: true,
+ },
+ {
+ isMandatory: true,
+ type: "component",
+ route: "owner-details",
+ key: "owners",
+ component: "SelectOwnerDetails",
+ texts: {
+ headerCaption: "PT_MUTATION_TRANSFEREE_DETAILS_HEADER",
+ header: "PT_OWNERSHIP_INFO_SUB_HEADER",
+ cardText: "PT_FORM3_HEADER_MESSAGE",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ withoutLabel: true,
+ nextStep: "special-owner-category",
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "special-owner-category",
+ isMandatory: true,
+ component: "SelectSpecialOwnerCategoryType",
+ texts: {
+ headerCaption: "PT_OWNERS_DETAILS",
+ header: "PT_SPECIAL_OWNER_CATEGORY",
+ cardText: "PT_FORM3_HEADER_MESSAGE",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "owners",
+ withoutLabel: true,
+ nextStep: "owner-address",
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "owner-address",
+ isMandatory: true,
+ component: "SelectOwnerAddress",
+ texts: {
+ headerCaption: "PT_OWNERS_DETAILS",
+ header: "PT_OWNERS_ADDRESS",
+ cardText: "",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "owners",
+ withoutLabel: true,
+ nextStep: "special-owner-category-proof",
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ component: "SelectAltContactNumber",
+ key: "owners",
+ withoutLabel: true,
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "special-owner-category-proof",
+ isMandatory: true,
+ component: "SelectSpecialProofIdentity",
+ texts: {
+ headerCaption: "PT_OWNERS_DETAILS",
+ header: "PT_SPECIAL_OWNER_CATEGORY_PROOF_HEADER",
+ cardText: "",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "owners",
+ withoutLabel: true,
+ nextStep: "proof-of-identity",
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "proof-of-identity",
+ isMandatory: true,
+ component: "SelectProofIdentity",
+ texts: {
+ headerCaption: "PT_OWNERS_DETAILS",
+ header: "PT_PROOF_IDENTITY_HEADER",
+ cardText: "",
+ submitBarLabel: "PT_COMMON_NEXT",
+ addMultipleText: "PT_COMMON_ADD_APPLICANT_LABEL",
+ },
+ key: "owners",
+ withoutLabel: true,
+ nextStep: null,
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "inistitution-details",
+ isMandatory: true,
+ component: "SelectInistitutionOwnerDetails",
+ texts: {
+ headerCaption: "",
+ header: "PT_INSTITUTION_DETAILS_HEADER",
+ cardText: "PT_FORM3_HEADER_MESSAGE",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "owners",
+ withoutLabel: true,
+ nextStep: "institutional-owner-address",
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "institutional-owner-address",
+ isMandatory: true,
+ component: "SelectOwnerAddress",
+ texts: {
+ headerCaption: "PT_OWNERS_DETAILS",
+ header: "PT_OWNERS_ADDRESS",
+ cardText: "",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "owners",
+ withoutLabel: true,
+ nextStep: "institutional-proof-of-identity",
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ route: "institutional-proof-of-identity",
+ isMandatory: true,
+ component: "SelectProofIdentity",
+ texts: {
+ headerCaption: "PT_OWNERS_DETAILS",
+ header: "PT_PROOF_IDENTITY_HEADER",
+ cardText: "",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ key: "owners",
+ withoutLabel: true,
+ nextStep: "is-mutatation-pending",
+ hideInEmployee: true,
+ },
+ {
+ type: "component",
+ component: "PTEmployeeOwnershipDetails",
+ key: "owners",
+ withoutLabel: true,
+ hideInCitizen: true,
+ },
+ ],
+ },
+ {
+ head: "PT_MUTATION_DETAILS",
+ body: [
+ {
+ key: "additionalDetails",
+ texts: {
+ headerCaption: "PT_MUTATION_DETAILS",
+ header: "PT_MUTATION_COURT_PENDING_OR_NOT",
+ cardText: "PT_MUTATION_PENDING_MESSAGE",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ route: "is-mutatation-pending",
+ withoutLabel: true,
+ component: "IsMutationPending",
+ nextStep: "is-under-govt-aquisition",
+ type: "component",
+ // nextStep: "reason",
+ },
+ {
+ key: "additionalDetails",
+ route: "is-under-govt-aquisition",
+ withoutLabel: true,
+ texts: {
+ headerCaption: "PT_MUTATION_DETAILS",
+ header: "PT_MUTATION_STATE_ACQUISITION",
+ cardText: "PT_STATE_AQUISTION_MESSAGE",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ component: "UnderStateAquire",
+ nextStep: "reason",
+ type: "component",
+ },
+ ],
+ },
+ {
+ head: "PT_MUTATION_REGISTRATION_DETAILS",
+ body: [
+ {
+ key: "additionalDetails",
+ route: "reason",
+ texts: {
+ headerCaption: "PT_MUTATION_DETAILS",
+ header: "PT_MUTATION_TRANSFER_REASON",
+ // cardText: "PT_FORM3_HEADER_MESSAGE",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ withoutLabel: true,
+ component: "PTReasonForTransfer",
+ nextStep: "market-value",
+ type: "component",
+ },
+ {
+ key: "additionalDetails",
+ route: "market-value",
+ texts: {
+ headerCaption: "PT_MUTATION_DETAILS",
+ header: "PT_MUTATION_MARKET_VALUE",
+ cardText: "PT_MARKET_VALUE_MESSAGE",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ withoutLabel: true,
+ component: "PropertyMarketValue",
+ nextStep: "registration-doc",
+ type: "component",
+ },
+ {
+ key: "additionalDetails",
+ route: "registration-doc",
+ texts: {
+ headerCaption: "PT_MUTATION_DETAILS",
+ header: "PT_MUTATION_DOCUMENT_DETAILS",
+ cardText: "PT_REGISTRATION_DOC_MESSAGE",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ withoutLabel: true,
+ component: "PTRegistrationDocument",
+ nextStep: "comments",
+ type: "component",
+ },
+ {
+ key: "additionalDetails",
+ route: "comments",
+ withoutLabel: true,
+ component: "PTComments",
+ texts: {
+ headerCaption: "PT_MUTATION_DETAILS",
+ header: "PT_MUTATION_REMARKS",
+ cardText: "PT_REMARKS_MESSAGE",
+ submitBarLabel: "PT_COMMON_NEXT",
+ },
+ nextStep: "transfer-reason-doc",
+ type: "component",
+ },
+ {
+ type: "component",
+ route: "transfer-reason-doc",
+ component: "TransferProof",
+ withoutLabel: true,
+ texts: {
+ headerCaption: "PT_TRANSFER_DOC_CAPTION",
+ header: "PT_TRANSFER_DOC_HEADER",
+ cardText: "PT_TRANSFER_DOC_MESSAGE",
+ nextText: "PT_COMMONS_NEXT",
+ submitBarLabel: "PT_COMMONS_NEXT",
+ },
+ key: "transferReasonProof",
+ hideInEmployee: true,
+ nextStep: "address-proof",
+ },
+ {
+ type: "component",
+ route: "address-proof",
+ component: "Proof",
+ withoutLabel: true,
+ texts: {
+ headerCaption: "PT_PROPERTY_LOCATION_CAPTION",
+ header: "Proof of Address",
+ cardText: "",
+ nextText: "PT_COMMONS_NEXT",
+ submitBarLabel: "PT_COMMONS_NEXT",
+ },
+ key: "addressProof",
+ hideInEmployee: true,
+ },
+ {
+ component: "SelectDocuments",
+ withoutLabel: true,
+ key: "documents",
+ type: "component",
+ },
+ ],
+ },
+];
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/config/inbox-table-config.js b/frontend/micro-ui-internals/packages/modules/pt/src/config/inbox-table-config.js
new file mode 100644
index 00000000000..94c97b81b74
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/config/inbox-table-config.js
@@ -0,0 +1,155 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const GetCell = (value) => {value} ;
+
+const GetSlaCell = (value) => {
+ if (isNaN(value)) return 0 ;
+ return value < 0 ? {value} : {value} ;
+};
+
+const GetMobCell = (value) => {value} ;
+
+export const TableConfig = (t) => ({
+ PT: {
+ searchColumns: (props) => [
+ {
+ Header: t("ES_INBOX_UNIQUE_PROPERTY_ID"),
+ // accessor: "searchData.propertyId",
+ disableSortBy: true,
+ Cell: ({ row }) => {
+ return (
+
+
+
+
+ );
+ },
+ mobileCell: (original) => GetMobCell(original?.searchData?.["propertyId"]),
+ },
+ {
+ Header: t("ES_INBOX_OWNER_NAME"),
+ disableSortBy: true,
+ Cell: ({ row }) => {
+ const owners = row.original?.searchData["owners"] || [];
+ const status = row.original?.searchData.status;
+ const creationReason = row.original?.searchData.creationReason;
+ const sortedOwners = [...owners.filter((a, b) => a.status === "ACTIVE"), ...owners.filter((a, b) => a.status !== "ACTIVE")];
+ const _owner = status === "INWORKFLOW" && creationReason === "MUTATION" ? sortedOwners.reverse() : sortedOwners;
+
+ return GetCell(`${_owner?.[0].name}`);
+ },
+ mobileCell: (original) => GetMobCell(original?.searchData?.["owners"]?.[0].name),
+ },
+ {
+ Header: t("ES_INBOX_LOCALITY"),
+ Cell: ({ row }) => {
+ const tenantId = row.original?.searchData?.tenantId;
+ return GetCell(t(`${tenantId.replace(".", "_").toUpperCase()}_REVENUE_${row.original?.searchData?.address?.locality?.code}`));
+ },
+ disableSortBy: true,
+ mobileCell: (original) => GetMobCell(original?.searchData?.address?.locality?.name),
+ },
+ {
+ Header: t("ES_SEARCH_PROPERTY_STATUS"),
+ Cell: ({ row }) => {
+ // console.log(row.original?.searchData?.status,">>>>>>>>>")
+ return GetCell(t(row.original?.searchData?.status));
+ },
+ disableSortBy: true,
+ mobileCell: (original) => GetMobCell(original?.searchData?.status),
+ },
+ {
+ Header: t("ES_SEARCH_TAX_DUE"),
+ Cell: ({ row }) => {
+ return GetCell("₹ " + row.original?.searchData?.due_tax);
+ },
+ disableSortBy: true,
+ mobileCell: (original) => GetMobCell("₹ " + original?.searchData?.due_tax),
+ },
+ {
+ Header: t("ES_SEARCH_ACTION"),
+ Cell: ({ row }) => {
+ return (
+
+ {row.original?.searchData?.due_tax > 0 ? (
+
+
+ ) : null}
+
+ );
+ },
+ disableSortBy: true,
+ // mobileCell: (original) => GetMobCell(original?.searchData?.["propertyId"]),
+ },
+ ],
+ inboxColumns: (props) => [
+ {
+ Header: t("ES_INBOX_UNIQUE_PROPERTY_ID"),
+ Cell: ({ row }) => {
+ return (
+
+
+
+
+ );
+ },
+ mobileCell: (original) => GetMobCell(original?.searchData?.["propertyId"]),
+ },
+ {
+ Header: t("ES_INBOX_OWNER"),
+ Cell: ({ row }) => {
+ // console.log(row.original?.searchData["owner"]);
+ return GetCell(`${row.original?.searchData?.["owners"]?.[0].name}`);
+ },
+ mobileCell: (original) => GetMobCell(original?.searchData?.["owners"]?.[0].name),
+ },
+ {
+ Header: t("ES_INBOX_APPLICATION_TYPE"),
+ Cell: ({ row }) => {
+ const map = {
+ "PT.CREATE": "ES_PT_NEW_PROPERTY",
+ "PT.MUTATION": "ES_PT_TRANSFER_OWNERSHIP",
+ "PT.UPDATE": "ES_PT_UPDATE_PROPERTY",
+ };
+ return GetCell(t(`${map[row.original?.workflowData?.businessService]}`));
+ },
+ mobileCell: (original) => {
+ const map = {
+ "PT.CREATE": "ES_PT_NEW_PROPERTY",
+ "PT.MUTATION": "ES_PT_TRANSFER_OWNERSHIP",
+ "PT.UPDATE": "ES_PT_UPDATE_PROPERTY",
+ };
+
+ return GetMobCell(t(map[original?.workflowData?.businessService]));
+ },
+ },
+ {
+ Header: t("ES_INBOX_STATUS"),
+ Cell: ({ row }) => {
+ const wf = row.original?.workflowData;
+ return GetCell(t(`ES_PT_COMMON_STATUS_${wf?.state?.["state"]}`));
+ },
+ mobileCell: (original) => GetMobCell(t(`ES_PT_COMMON_STATUS_${original?.workflowData?.state?.["state"]}`)),
+ },
+ {
+ Header: t("ES_INBOX_SLA_DAYS_REMAINING"),
+ accessor: "createdTime",
+ Cell: ({ row }) => {
+ const wf = row.original.workflowData;
+ const math = Math.round((wf?.businesssServiceSla || 0) / (24 * 60 * 60 * 1000)) || "-";
+ return GetSlaCell(math);
+ },
+ mobileCell: (original) => GetSlaCell(Math.round((original?.workflowData?.["businesssServiceSla"] || 0) / (24 * 60 * 60 * 1000))),
+ },
+ ],
+ serviceRequestIdKey: (original) => original?.[t("ES_INBOX_UNIQUE_PROPERTY_ID")]?.props?.children,
+ },
+});
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/getPTAcknowledgementData.js b/frontend/micro-ui-internals/packages/modules/pt/src/getPTAcknowledgementData.js
new file mode 100644
index 00000000000..feba993d023
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/getPTAcknowledgementData.js
@@ -0,0 +1,289 @@
+import {
+ getFixedFilename,
+ getPropertyTypeLocale,
+ getPropertyOwnerTypeLocale,
+ getPropertyUsageTypeLocale,
+ getPropertySubUsageTypeLocale,
+ getPropertyOccupancyTypeLocale,
+ getMohallaLocale,
+ pdfDocumentName,
+ pdfDownloadLink,
+ getCityLocale,
+} from "./utils";
+
+const capitalize = (text) => text.substr(0, 1).toUpperCase() + text.substr(1);
+const ulbCamel = (ulb) => ulb.toLowerCase().split(" ").map(capitalize).join(" ");
+
+const getOwner = (application, t, customTitle) => {
+ console.log(customTitle, application, "inside owner details");
+ let owners = [];
+ if(customTitle.includes("TRANSFEROR"))
+ owners = [...(application?.owners.filter((owner) => owner.status == "INACTIVE") || [])];
+ else
+ owners = [...(application?.owners.filter((owner) => owner.status == "ACTIVE") || [])];
+ if (application?.ownershipCategory == "INDIVIDUAL.SINGLEOWNER") {
+ return {
+ title: t(customTitle || "PT_OWNERSHIP_INFO_SUB_HEADER"),
+ values: [
+ { title: t("PT_OWNERSHIP_INFO_NAME"), value: owners[0]?.name || t("CS_NA") },
+ { title: t("PT_OWNERSHIP_INFO_MOBILE_NO"), value: owners[0]?.mobileNumber || t("CS_NA") },
+ { title: t("PT_SEARCHPROPERTY_TABEL_GUARDIANNAME"), value: owners[0]?.fatherOrHusbandName || t("CS_NA") },
+ { title: t("PT_OWNERSHIP_INFO_GENDER"), value: t(owners[0]?.gender) || t("CS_NA") },
+ { title: t("PT_FORM3_OWNERSHIP_TYPE"), value: t(application?.ownershipCategory) || t("CS_NA") },
+ { title: t("PT_OWNERSHIP_INFO_EMAIL_ID"), value: owners[0]?.emailId || t("CS_NA") },
+ { title: t("PT_OWNERSHIP_INFO_USER_CATEGORY"), value: t(getPropertyOwnerTypeLocale(owners[0]?.ownerType)) || t("CS_NA") },
+ { title: t("PT_OWNERSHIP_INFO_CORR_ADDR"), value: owners[0]?.permanentAddress || t("CS_NA") },
+ ],
+ };
+ } else if (application?.ownershipCategory.includes("INDIVIDUAL")) {
+ let values = [];
+ owners.map((owner) => {
+ let doc = [
+ { title: t("PT_OWNERSHIP_INFO_NAME"), value: owner?.name || t("CS_NA") },
+ { title: t("PT_OWNERSHIP_INFO_MOBILE_NO"), value: owner?.mobileNumber || t("CS_NA") },
+ { title: t("PT_SEARCHPROPERTY_TABEL_GUARDIANNAME"), value: owner?.fatherOrHusbandName || t("CS_NA") },
+ { title: t("PT_OWNERSHIP_INFO_GENDER"), value: t(owner?.gender) || t("CS_NA") },
+ { title: t("PT_FORM3_OWNERSHIP_TYPE"), value: t(application?.ownershipCategory) || t("CS_NA") },
+ { title: t("PT_OWNERSHIP_INFO_EMAIL_ID"), value: owner?.emailId || t("CS_NA") },
+ { title: t("PT_OWNERSHIP_INFO_USER_CATEGORY"), value: t(getPropertyOwnerTypeLocale(owner?.ownerType)) || t("CS_NA") },
+ { title: t("PT_OWNERSHIP_INFO_CORR_ADDR"), value: owner?.permanentAddress || t("CS_NA") },
+ ];
+ values.push(...doc);
+ });
+ return {
+ title: t(customTitle || "PT_OWNERSHIP_INFO_SUB_HEADER"),
+ values: values,
+ };
+ } else if (application?.ownershipCategory.includes("INSTITUTIONAL")) {
+ return {
+ title: t("PT_OWNERSHIP_INFO_SUB_HEADER"),
+ values: [
+ { title: t("PT_COMMON_INSTITUTION_NAME"), value: application?.institution?.name || t("CS_NA") },
+ { title: t("PT_TYPE_OF_INSTITUTION"), value: application?.institution?.type || t("CS_NA") },
+ { title: t("PT_OWNER_NAME"), value: application?.institution?.nameOfAuthorizedPerson || t("CS_NA") },
+ { title: t("PT_COMMON_AUTHORISED_PERSON_DESIGNATION"), value: application?.institution?.designation || t("CS_NA") },
+ { title: t("PT_FORM3_MOBILE_NUMBER"), value: owners[0]?.mobileNumber || t("CS_NA") },
+ { title: t("PT_OWNERSHIP_INFO_TEL_PHONE_NO"), value: owners[0]?.altContactNumber || t("CS_NA") },
+ { title: t("PT_OWNERSHIP_INFO_CORR_ADDR"), value: owners[0]?.correspondenceAddress || t("CS_NA") },
+ { title: t("PT_FORM3_OWNERSHIP_TYPE"), value: t(application?.ownershipCategory) || t("CS_NA") },
+ ],
+ };
+ } else {
+ return {
+ title: t("PT_OWNERSHIP_INFO_SUB_HEADER"),
+ values: [{ title: t("PT_NO_OWNERS"), value: t("CS_NA") }],
+ };
+ }
+};
+
+const getAssessmentInfo = (application, t) => {
+ let values = [
+ { title: t("PT_ASSESMENT_INFO_USAGE_TYPE"), value: t(getPropertyUsageTypeLocale(application?.usageCategory)) || t("CS_NA") },
+ { title: t("PT_ASSESMENT_INFO_TYPE_OF_BUILDING"), value: t(getPropertyTypeLocale(application?.propertyType)) || t("CS_NA") },
+ { title: t("PT_ASSESMENT_INFO_PLOT_SIZE"), value: t(application?.landArea) || t("CS_NA") },
+ { title: t("PT_ASSESMENT_INFO_NO_OF_FLOOR"), value: t(application?.noOfFloors) || t("CS_NA") },
+ ];
+ application.units = application?.units?.filter((unit) => unit.active == true) || [];
+ let flrno,
+ i = 0;
+ flrno = application.units && application.units[0]?.floorNo;
+ application.units.map((unit) => {
+ let doc = [
+ {
+ title: (flrno !== unit?.floorNo ? (i = 1) : (i = i + 1)) && i === 1 ? t(`PROPERTYTAX_FLOOR_${unit?.floorNo}`) : "",
+ },
+ {
+ title: t(""),
+ },
+ {
+ title: t(""),
+ },
+ {
+ title: t(""),
+ },
+ { title: t("PT_UNIT")+" "+ i },
+ {
+ title: t(""),
+ },
+ {
+ title: t(""),
+ },
+ {
+ title: t(""),
+ },
+ {
+ title: (flrno = unit?.floorNo) > -3 ? t("PT_ASSESSMENT_UNIT_USAGE_TYPE") : "",
+ value: (flrno = unit?.floorNo) > -3 ? t(getPropertySubUsageTypeLocale(unit?.usageCategory)) || t("CS_NA") : "",
+ },
+ {
+ title: (flrno = unit?.floorNo) > -3 ? t("PT_ASSESMENT_INFO_OCCUPLANCY") : "",
+ value: (flrno = unit?.floorNo) > -3 ? t(getPropertyOccupancyTypeLocale(unit?.occupancyType)) || t("CS_NA") : "",
+ },
+ {
+ title: (flrno = unit?.floorNo) > -3 ? t("PT_FORM2_BUILT_AREA") : "",
+ value: (flrno = unit?.floorNo) > -3 ? t(unit?.constructionDetail?.builtUpArea) || t("CS_NA") : "",
+ },
+ {
+ title:
+ (flrno = unit?.floorNo) > -3
+ ? t(getPropertyOccupancyTypeLocale(unit?.occupancyType)) === "Rented"
+ ? t("PT_FORM2_TOTAL_ANNUAL_RENT")
+ : t("")
+ : "",
+ value:
+ (flrno = unit?.floorNo) > -3
+ ? t(getPropertyOccupancyTypeLocale(unit?.occupancyType)) === "Rented"
+ ? (unit?.arv && `₹${t(unit?.arv)}`) || "NA"
+ : t("")
+ : "",
+ },
+ ];
+
+ values.push(...doc);
+ });
+ return {
+ title: t("PT_ASSESMENT_INFO_SUB_HEADER"),
+ values: values,
+ };
+};
+
+const getMutationDetails = (application, t) => {
+ return {
+ title: t("PT_MUTATION_DETAILS"),
+ values: [
+ {
+ title: t("PT_MUTATION_COURT_PENDING_OR_NOT"),
+ value: application?.additionalDetails?.isMutationInCourt
+ ? t(`PT_MUTATION_PENDING_${application?.additionalDetails.isMutationInCourt}`)
+ : t("CS_NA"),
+ },
+ { title: t("PT_MUTATION_COURT_CASE_DETAILS"), value: application?.additionalDetails?.caseDetails || t("CS_NA") },
+ { title: t("PT_MUTATION_STATE_ACQUISITION"), value: application?.additionalDetails?.isPropertyUnderGovtPossession ? t(`PT_MUTATION_STATE_ACQUISITION_${application?.additionalDetails?.isPropertyUnderGovtPossession}`) : t("CS_NA") },
+ { title: t("PT_MUTATION_GOVT_ACQUISITION_DETAILS"), value: application?.additionalDetails?.govtAcquisitionDetails || t("CS_NA") },
+ ],
+ };
+};
+
+const mutationRegistrationDetails = (application, t) => {
+ return {
+ title: t("PT_MUTATION_REGISTRATION_DETAILS"),
+ values: [
+ {
+ title: t("PT_MUTATION_TRANSFER_REASON"),
+ value: t(`PROPERTYTAX_REASONFORTRANSFER_${application?.additionalDetails?.reasonForTransfer.replaceAll(".", "_")}`),
+ },
+ { title: t("PT_MUTATION_MARKET_VALUE"), value: application?.additionalDetails?.marketValue || t("CS_NA") },
+ { title: t("PT_MUTATION_DOCUMENT_NO"), value: application?.additionalDetails?.documentNumber || t("CS_NA") },
+ { title: t("PT_MUTATION_DOCUMENT_VALUE"), value: application?.additionalDetails?.documentValue || t("CS_NA") },
+ {
+ title: t("PT_MUTATION_DOCUMENT_ISSUE_DATE"),
+ value: application?.additionalDetails?.documentDate ? new Date(application?.additionalDetails?.documentDate).toDateString() : t("CS_NA"),
+ },
+ {
+ title: t(""),
+ },
+ { title: t("PT_MUTATION_REMARKS"), value: application?.additionalDetails?.remarks || t("CS_NA") },
+ ],
+ };
+};
+
+const getPTAcknowledgementData = async (application, tenantInfo, t) => {
+ console.log(application, "inside acknowledgement data");
+ const filesArray = application?.documents?.map((value) => value?.fileStoreId);
+ const res = await Digit.UploadServices.Filefetch(filesArray, application?.tenantId.split(".")[0]);
+
+ if (application.creationReason === "MUTATION") {
+ return {
+ t: t,
+ tenantId: tenantInfo?.code,
+ name: `${t(tenantInfo?.i18nKey)} ${ulbCamel(t(`ULBGRADE_${tenantInfo?.city?.ulbGrade.toUpperCase().replace(" ", "_").replace(".", "_")}`))}`,
+ email: tenantInfo?.emailId,
+ phoneNumber: tenantInfo?.contactNumber,
+ heading: t("PT_ACKNOWLEDGEMENT"),
+ details: [
+ {
+ title: t("CS_TITLE_APPLICATION_DETAILS"),
+ values: [
+ { title: t("PT_APPLICATION_NO"), value: application?.acknowldgementNumber },
+ { title: t("PT_PROPERRTYID"), value: application?.propertyId },
+ {
+ title: t("CS_APPLICATION_DETAILS_APPLICATION_DATE"),
+ value: Digit.DateUtils.ConvertTimestampToDate(application?.auditDetails?.createdTime, "dd/MM/yyyy"),
+ },
+ ],
+ },
+ {
+ title: t("PT_PROPERTY_ADDRESS_SUB_HEADER"),
+ values: [
+ { title: t("PT_PROPERTY_ADDRESS_PINCODE"), value: application?.address?.pincode || t("CS_NA") },
+ { title: t("PT_PROPERTY_ADDRESS_CITY"), value: t(getCityLocale(application?.tenantId)) || t("CS_NA") },
+ {
+ title: t("PT_PROPERTY_ADDRESS_MOHALLA"),
+ value: t(`${getMohallaLocale(application?.address?.locality?.code, application?.tenantId)}`) || t("CS_NA"),
+ },
+ { title: t("PT_PROPERTY_ADDRESS_STREET_NAME"), value: application?.address?.street || t("CS_NA") },
+ { title: t("PT_PROPERTY_ADDRESS_HOUSE_NO"), value: application?.address?.doorNo || t("CS_NA") },
+ { title: t("PT_PROPERTY_ADDRESS_LANDMARK"), value: application?.address?.landmark || t("CS_NA") },
+ ],
+ },
+ getOwner(application, t, "PT_MUTATION_TRANSFEROR_DETAILS"),
+ getOwner(application, t, "PT_MUTATION_TRANSFEREE_DETAILS_HEADER"),
+ getMutationDetails(application, t),
+ mutationRegistrationDetails(application, t),
+ ],
+ };
+ }
+
+ return {
+ t: t,
+ tenantId: tenantInfo?.code,
+ name: `${t(tenantInfo?.i18nKey)} ${ulbCamel(t(`ULBGRADE_${tenantInfo?.city?.ulbGrade.toUpperCase().replace(" ", "_").replace(".", "_")}`))}`,
+ email: tenantInfo?.emailId,
+ phoneNumber: tenantInfo?.contactNumber,
+ heading: t("PT_ACKNOWLEDGEMENT"),
+ details: [
+ {
+ title: t("CS_TITLE_APPLICATION_DETAILS"),
+ values: [
+ { title: t("PT_APPLICATION_NO"), value: application?.acknowldgementNumber },
+ { title: t("PT_PROPERRTYID"), value: application?.propertyId },
+ {
+ title: t("CS_APPLICATION_DETAILS_APPLICATION_DATE"),
+ value: Digit.DateUtils.ConvertTimestampToDate(application?.auditDetails?.createdTime, "dd/MM/yyyy"),
+ },
+ ],
+ },
+ getOwner(application, t),
+ getAssessmentInfo(application, t),
+ {
+ title: t("PT_PROPERTY_ADDRESS_SUB_HEADER"),
+ values: [
+ { title: t("PT_PROPERTY_ADDRESS_PINCODE"), value: application?.address?.pincode || t("CS_NA") },
+ { title: t("PT_PROPERTY_ADDRESS_CITY"), value: t(getCityLocale(application?.tenantId)) || t("CS_NA") },
+ {
+ title: t("PT_PROPERTY_ADDRESS_MOHALLA"),
+ value: t(`${getMohallaLocale(application?.address?.locality?.code, application?.tenantId)}`) || t("CS_NA"),
+ },
+ { title: t("PT_PROPERTY_ADDRESS_STREET_NAME"), value: application?.address?.street || t("CS_NA") },
+ { title: t("PT_PROPERTY_ADDRESS_HOUSE_NO"), value: application?.address?.doorNo || t("CS_NA") },
+ application?.channel === "CITIZEN" ? { title: t("PT_PROPERTY_ADDRESS_LANDMARK"), value: application?.address?.landmark || t("CS_NA") }: {},
+ ],
+ },
+ {
+ title: t("PT_COMMON_DOCS"),
+ values:
+ application.documents.length > 0
+ ? application.documents.map((document, index) => {
+ let documentLink = pdfDownloadLink(res?.data, document?.fileStoreId);
+ return {
+ title: t(document?.documentType || t("CS_NA")),
+ value: pdfDocumentName(documentLink, index) || t("CS_NA"),
+ };
+ })
+ : "NA",
+ },
+ ],
+ };
+};
+
+export default getPTAcknowledgementData;
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/Area.js b/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/Area.js
new file mode 100644
index 00000000000..e7b193098ea
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/Area.js
@@ -0,0 +1,160 @@
+import { CardLabel, FormStep, LabelFieldPair, TextInput, CardLabelError } from "@egovernments/digit-ui-react-components";
+import React, { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+
+const Area = ({ t, config, onSelect, value, userType, formData, setError: setFormError, clearErrors: clearFormErrors, formState, onBlur }) => {
+ //let index = window.location.href.charAt(window.location.href.length - 1);
+ let index = window.location.href.split("/").pop();
+ let validation = {};
+ const onSkip = () => onSelect();
+ let floorarea;
+ let setfloorarea;
+ if (!isNaN(index)) {
+ [floorarea, setfloorarea] = useState(formData.units && formData.units[index] && formData.units[index].floorarea);
+ } else {
+ [floorarea, setfloorarea] = useState(formData.landarea?.floorarea);
+ }
+ const [error, setError] = useState(null);
+ const [unitareaerror, setunitareaerror] = useState(null);
+ const [areanotzeroerror, setareanotzeroerror] = useState(null);
+
+ const { pathname } = useLocation();
+ const presentInModifyApplication = pathname.includes("modify");
+
+ function setPropertyfloorarea(e) {
+ setfloorarea(e.target.value);
+ setunitareaerror(null);
+ setareanotzeroerror(null);
+ if (formData?.PropertyType?.code === "BUILTUP.INDEPENDENTPROPERTY" && parseInt(formData?.units[index]?.builtUpArea) < e.target.value) {
+ setunitareaerror("PT_TOTUNITAREA_LESS_THAN_BUILTUP_ERR_MSG");
+ }
+ if (formData?.PropertyType?.code === "BUILTUP.SHAREDPROPERTY" && parseInt(formData?.floordetails?.builtUpArea) < e.target.value) {
+ setunitareaerror("PT_SELFOCCUPIED_AREA_LESS_THAN_BUILTUP");
+ }
+ if (parseInt(e.target.value) == 0) {
+ setareanotzeroerror("PT_AREA_NOT_0_MSG");
+ }
+ }
+
+ const goNext = () => {
+ if (!isNaN(index)) {
+ let unit = formData.units && formData.units[index];
+ //units["RentalArea"] = RentArea;
+ //units["AnnualRent"] = AnnualRent;
+ if (
+ (formData?.isResdential?.i18nKey === "PT_COMMON_YES" || formData?.usageCategoryMajor?.i18nKey == "PROPERTYTAX_BILLING_SLAB_NONRESIDENTIAL") &&
+ formData?.PropertyType?.i18nKey !== "COMMON_PROPTYPE_VACANT"
+ ) {
+ sessionStorage.setItem("area", "yes");
+ } else {
+ sessionStorage.setItem("area", "no");
+ }
+
+ let floordet = { ...unit, floorarea };
+ onSelect(config.key, floordet, false, index);
+ } else {
+ if (
+ (formData?.isResdential?.i18nKey === "PT_COMMON_YES" || formData?.usageCategoryMajor?.i18nKey == "PROPERTYTAX_BILLING_SLAB_NONRESIDENTIAL") &&
+ formData?.PropertyType?.i18nKey !== "COMMON_PROPTYPE_VACANT"
+ ) {
+ sessionStorage.setItem("area", "yes");
+ } else if (formData?.PropertyType?.code === "VACANT") {
+ sessionStorage.setItem("area", "vacant");
+ } else {
+ sessionStorage.setItem("area", "no");
+ }
+
+ onSelect("landarea", { floorarea });
+ }
+ };
+ //const onSkip = () => onSelect();
+
+ function onChange(e) {
+ if (e.target.value.length > 1024) {
+ setError("CS_COMMON_LANDMARK_MAX_LENGTH");
+ } else {
+ setError(null);
+ setfloorarea(e.target.value);
+ }
+ }
+
+ useEffect(() => {
+ if (userType === "employee") {
+ if (!Number(floorarea)) setFormError(config.key, { type: "required", message: t("CORE_COMMON_REQUIRED_ERRMSG") });
+ else if (isNaN(floorarea)) setFormError(config.key, { type: "invalid", message: t("ERR_DEFAULT_INPUT_FIELD_MSG") });
+ else clearFormErrors(config.key);
+ onSelect(config.key, floorarea);
+ }
+ }, [floorarea]);
+
+ useEffect(() => {
+ if (presentInModifyApplication && userType === "employee") {
+ // console.log(formData?.originalData?.superBuiltUpArea, "inside landArea");
+ setfloorarea(formData?.originalData?.landArea);
+ }
+ }, []);
+
+ const inputs = [
+ {
+ label: "PT_PLOT_SIZE_SQUARE_FEET_LABEL",
+ type: "text",
+ name: "area",
+ validation: {},
+ },
+ ];
+
+ if (userType === "employee") {
+ return inputs?.map((input, index) => {
+ return (
+
+
+ {t(input.label) + " *"}
+
+
+
+ {formState.touched[config.key] ? (
+
+ {formState.errors?.[config.key]?.message}
+
+ ) : null}
+
+ );
+ });
+ }
+
+ return (
+
+ {`${t("PT_PLOT_SIZE_SQUARE_FEET_LABEL")}`}
+
+ );
+};
+
+export default Area;
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/GroundFloorDetails.js b/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/GroundFloorDetails.js
new file mode 100644
index 00000000000..d16d1965065
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/GroundFloorDetails.js
@@ -0,0 +1,123 @@
+import { CardLabel, CitizenInfoLabel, FormStep, TextInput } from "@egovernments/digit-ui-react-components";
+import React, { useState } from "react";
+
+const GroundFloorDetails = ({ t, config, onSelect, value, userType, formData }) => {
+ //let index = window.location.href.charAt(window.location.href.length - 1);
+ let index = window.location.href.split("/").pop();
+ let validation = {};
+ const onSkip = () => onSelect();
+ //const [plotSize, setplotSize] = useState(formData.units && formData.units[index] && formData.units[index].plotSize);
+ //const [builtUpArea, setbuiltUpArea] = useState(formData.units && formData.units[index] && formData.units[index].builtUpArea);
+ //const [plotSize, setplotSize] = useState(formData.plotSize);
+ //const [builtUpArea, setbuiltUpArea] = useState(formData.builtUpArea);
+ let plotSize, builtUpArea, setplotSize, setbuiltUpArea;
+ if (!isNaN(index)) {
+ [plotSize, setplotSize] = useState(formData.units && formData.units[index] && formData.units[index].plotSize);
+ [builtUpArea, setbuiltUpArea] = useState(formData.units && formData.units[index] && formData.units[index].builtUpArea);
+ } else {
+ [plotSize, setplotSize] = useState(formData.floordetails?.plotSize);
+ [builtUpArea, setbuiltUpArea] = useState(formData.floordetails?.builtUpArea);
+ }
+ const [builtupplotsizeeroor, setbuiltupplotsizeeroor] = useState(null);
+ const [areanotzeroerror, setareanotzeroerror] = useState(null);
+ function setPropertyplotSize(e) {
+ setplotSize(e.target.value);
+ setbuiltupplotsizeeroor(null);
+ setareanotzeroerror(null);
+ if (e.target.value && parseInt(builtUpArea) > parseInt(e.target.value)) {
+ setbuiltupplotsizeeroor("PT_BUILTUPAREA_PLOTSIZE_ERROR_MSG");
+ }
+ if (parseInt(e.target.value) == 0) {
+ setareanotzeroerror("PT_AREA_NOT_0_MSG");
+ }
+ }
+ function setPropertybuiltUpArea(e) {
+ setbuiltUpArea(e.target.value);
+ setbuiltupplotsizeeroor(null);
+ setareanotzeroerror(null);
+ if (formData?.PropertyType?.i18nKey === "COMMON_PROPTYPE_BUILTUP_INDEPENDENTPROPERTY" && index != "0") {
+ if (formData?.units[0]?.plotSize && parseInt(e.target.value) > parseInt(formData?.units[0]?.plotSize)) {
+ setbuiltupplotsizeeroor("PT_BUILTUPAREA_PLOTSIZE_ERROR_MSG");
+ }
+ } else {
+ if (plotSize && parseInt(e.target.value) > parseInt(plotSize)) {
+ setbuiltupplotsizeeroor("PT_BUILTUPAREA_PLOTSIZE_ERROR_MSG");
+ }
+ }
+ if (parseInt(e.target.value) == 0) {
+ setareanotzeroerror("PT_AREA_NOT_0_MSG");
+ }
+ }
+
+ const getheader = () => {
+ if (formData?.PropertyType?.i18nKey === "COMMON_PROPTYPE_BUILTUP_SHAREDPROPERTY") {
+ return "PT_FLOOR_DETAILS_HEADER";
+ } else {
+ return `PROPERTYTAX_FLOOR_${index}_DETAILS`;
+ }
+ };
+
+ const goNext = () => {
+ //let index = window.location.href.charAt(window.location.href.length - 1);
+ if (!isNaN(index)) {
+ let unit = (formData.units && formData.units[index]) || null;
+ if (unit !== null) {
+ unit["builtUpArea"] = builtUpArea;
+ unit["plotSize"] = plotSize;
+ onSelect(config.key, unit, "", index);
+ } else {
+ let floordet = { plotSize, builtUpArea };
+ sessionStorage.setItem("propertyArea", "multiple");
+ onSelect(config.key, floordet, "", index);
+ }
+ } else {
+ sessionStorage.setItem("propertyArea", "multiple");
+ onSelect("floordetails", { plotSize, builtUpArea });
+ }
+ };
+
+ return (
+
+
+ {(index === "0" || isNaN(index)) && (
+
+ {`${t("PT_FLOOR_DETAILS_PLOT_SIZE_LABEL")}`}
+
+ )}
+ {`${t("PT_FLOOR_DETAILS_BUILT_UP_AREA_LABEL")}`}
+
+ {
+ );
+};
+
+export default GroundFloorDetails;
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/IsAnyPartOfThisFloorUnOccupied.js b/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/IsAnyPartOfThisFloorUnOccupied.js
new file mode 100644
index 00000000000..48ebe5d24e3
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/IsAnyPartOfThisFloorUnOccupied.js
@@ -0,0 +1,93 @@
+import React, { useState } from "react";
+import { FormStep, RadioOrSelect, RadioButtons } from "@egovernments/digit-ui-react-components";
+
+const IsAnyPartOfThisFloorUnOccupied = ({ t, config, onSelect, userType, formData }) => {
+ let index = window.location.href.split("/").pop();
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const stateId = tenantId.split(".")[0];
+ let IsAnyPartOfThisFloorUnOccupied, setSelfOccupied;
+ if (!isNaN(index)) {
+ [IsAnyPartOfThisFloorUnOccupied, setSelfOccupied] = useState(
+ formData.units && formData.units[index] && formData.units[index].IsAnyPartOfThisFloorUnOccupied
+ );
+ } else {
+ [IsAnyPartOfThisFloorUnOccupied, setSelfOccupied] = useState(formData?.IsAnyPartOfThisFloorUnOccupied);
+ }
+ //const { data: Menu, isLoading } = Digit.Hooks.pt.usePropertyMDMS(stateId, "PropertyTax", "OwnerType");
+
+ const data = [
+ {
+ //i18nKey: "Yes",
+ i18nKey: "PT_COMMON_YES",
+ code: "UNOCCUPIED",
+ },
+ {
+ //i18nKey: "No",
+ i18nKey: "PT_COMMON_NO",
+ code: "UNOCCUPIED",
+ },
+ ];
+ const onSkip = () => onSelect();
+
+ function selectSelfOccupied(value) {
+ setSelfOccupied(value);
+ }
+
+ const getheaderCaption = () => {
+ if (formData?.PropertyType?.i18nKey === "COMMON_PROPTYPE_BUILTUP_SHAREDPROPERTY") {
+ return "PT_FLOOR_DETAILS_HEADER";
+ } else {
+ return `PROPERTYTAX_FLOOR_${index}_DETAILS`;
+ }
+ };
+
+ function goNext() {
+ //let index = window.location.href.charAt(window.location.href.length - 1);
+ let index = window.location.href.split("/").pop();
+ if (!isNaN(index)) {
+ sessionStorage.setItem("IsAnyPartOfThisFloorUnOccupied", IsAnyPartOfThisFloorUnOccupied.i18nKey);
+ let unit = formData.units && formData.units[index];
+ let floordet = { ...unit, IsAnyPartOfThisFloorUnOccupied };
+ onSelect(config.key, floordet, false, index);
+ if (IsAnyPartOfThisFloorUnOccupied.i18nKey === "PT_COMMON_NO") {
+ if (formData?.noOfFloors?.i18nKey === "PT_GROUND_PLUS_ONE_OPTION" && index < 1 && index > -1) {
+ let newIndex1 = parseInt(index) + 1;
+ onSelect("floordetails", {}, true, newIndex1, true);
+ } else if (formData?.noOfFloors?.i18nKey === "PT_GROUND_PLUS_TWO_OPTION" && index < 2 && index > -1) {
+ let newIndex2 = parseInt(index) + 1;
+ onSelect("floordetails", {}, true, newIndex2, true);
+ } else if (
+ (formData?.noOofBasements?.i18nKey === "PT_ONE_BASEMENT_OPTION" || formData?.noOofBasements?.i18nKey === "PT_TWO_BASEMENT_OPTION") &&
+ index > -1
+ ) {
+ onSelect("floordetails", {}, true, "-1", true);
+ } else if (formData?.noOofBasements?.i18nKey === "PT_TWO_BASEMENT_OPTION" && index != -2) {
+ onSelect("floordetails", {}, true, "-2", true);
+ }
+ }
+ } else {
+ sessionStorage.setItem("IsAnyPartOfThisFloorUnOccupied", IsAnyPartOfThisFloorUnOccupied.i18nKey);
+ onSelect("IsAnyPartOfThisFloorUnOccupied", IsAnyPartOfThisFloorUnOccupied);
+ }
+ }
+ return (
+
+
+ );
+};
+
+export default IsAnyPartOfThisFloorUnOccupied;
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/IsResidential.js b/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/IsResidential.js
new file mode 100644
index 00000000000..e240de42867
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/IsResidential.js
@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { TypeSelectCard } from "@egovernments/digit-ui-react-components";
+import { FormStep, RadioOrSelect, RadioButtons } from "@egovernments/digit-ui-react-components";
+
+const IsResidential = ({ t, config, onSelect, userType, formData }) => {
+ const [isResdential, setisResdential] = useState(formData?.isResdential);
+ const menu = [
+ { i18nKey: "PT_COMMON_YES", code: "RESIDENTIAL" },
+ { i18nKey: "PT_COMMON_NO", code: "NONRESIDENTIAL" },
+ ];
+
+ const onSkip = () => onSelect();
+
+ // const propertyOwnerShipCategory = Digit.Hooks.pt.useMDMS("pb", "PropertyTax", "OwnerShipCategory", {});
+ function selectisResdential(value) {
+ setisResdential(value);
+ }
+
+ function goNext() {
+ if (isResdential.i18nKey === "PT_COMMON_NO") {
+ sessionStorage.setItem("isResdential", isResdential.i18nKey);
+ onSelect(config.key, isResdential);
+ } else {
+ sessionStorage.setItem("isResdential", isResdential.i18nKey);
+ onSelect(config.key, isResdential);
+ //onSelect("usageCategoryMajor", { i18nKey: "PROPERTYTAX_BILLING_SLAB_RESIDENTIAL" });
+ }
+ }
+ return (
+
+
+ );
+};
+export default IsResidential;
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/IsThisFloorSelfOccupied.js b/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/IsThisFloorSelfOccupied.js
new file mode 100644
index 00000000000..d0c82eb1140
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/IsThisFloorSelfOccupied.js
@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { FormStep, RadioOrSelect, RadioButtons } from "@egovernments/digit-ui-react-components";
+
+const IsThisFloorSelfOccupied = ({ t, config, onSelect, userType, formData }) => {
+ let index = window.location.href.split("/").pop();
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const stateId = tenantId.split(".")[0];
+ //const [selfOccupied, setSelfOccupied] = useState(formData?.IsThisFloorSelfOccupied);
+ let selfOccupied, setSelfOccupied;
+ if (!isNaN(index)) {
+ [selfOccupied, setSelfOccupied] = useState(formData.units && formData.units[index] && formData.units[index].selfOccupied);
+ } else {
+ [selfOccupied, setSelfOccupied] = useState(formData?.selfOccupied);
+ }
+ const data = [
+ {
+ //i18nKey: "Fully rented out",
+ i18nKey: "PT_FULLY_RENTED_OUT",
+ code: "RENTED",
+ },
+ {
+ //i18nKey: "Partially rented out",
+ i18nKey: "PT_PARTIALLY_RENTED_OUT",
+ code: "RENTED",
+ },
+ {
+ //i18nKey: "Yes, It is fully Self Occupied",
+ i18nKey: "PT_YES_IT_IS_SELFOCCUPIED",
+ code: "SELFOCCUPIED",
+ },
+ ];
+ const onSkip = () => onSelect();
+
+ function selectSelfOccupied(value) {
+ setSelfOccupied(value);
+ }
+
+ function goNext() {
+ //let index = window.location.href.charAt(window.location.href.length - 1);
+ let index = window.location.href.split("/").pop();
+ if (formData?.isResdential?.i18nKey === "PT_COMMON_YES" || formData?.usageCategoryMajor?.i18nKey == "PROPERTYTAX_BILLING_SLAB_NONRESIDENTIAL") {
+ let temp = selfOccupied.i18nKey + "1";
+ sessionStorage.setItem("IsThisFloorSelfOccupied", temp);
+ } else {
+ sessionStorage.setItem("IsThisFloorSelfOccupied", selfOccupied.i18nKey);
+ }
+ //onSelect(config.key, selfOccupied, false, index);
+ if (!isNaN(index)) {
+ //sessionStorage.setItem("IsAnyPartOfThisFloorUnOccupied", IsAnyPartOfThisFloorUnOccupied.i18nKey);
+ let unit = formData.units && formData.units[index];
+ let floordet = { ...unit, selfOccupied };
+ onSelect(config.key, floordet, false, index);
+ } else {
+ //sessionStorage.setItem("IsAnyPartOfThisFloorUnOccupied", IsAnyPartOfThisFloorUnOccupied.i18nKey);
+ onSelect("selfOccupied", selfOccupied);
+ }
+ }
+ return (
+
+
+ );
+};
+
+export default IsThisFloorSelfOccupied;
diff --git a/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/Mutate/Comments.js b/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/Mutate/Comments.js
new file mode 100644
index 00000000000..1c0114a4828
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/modules/pt/src/pageComponents/Mutate/Comments.js
@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { TextInput, FormStep, TextArea, LabelFieldPair, CardLabel } from "@egovernments/digit-ui-react-components";
+
+const Comments = (props) => {
+ const { t, config, onSelect, userType, formData } = props;
+
+ const [remarks, setSelected] = useState(formData?.[config.key]?.remarks);
+
+ const goNext = () => {
+ onSelect(config.key, { ...formData?.[config.key], remarks });
+ };
+ const onSkip = () => {};
+
+ if (userType === "employee") {
+ return (
+
+
+
+ {t("PT_MUTATION_REMARKS")}
+
+
+
+ );
+};
+
+TextArea.propTypes = {
+ userType: PropTypes.string,
+ name: PropTypes.string.isRequired,
+ ref: PropTypes.func,
+ value: PropTypes.string,
+ onChange: PropTypes.func,
+ id: PropTypes.string,
+};
+
+TextArea.defaultProps = {
+ ref: undefined,
+ onChange: undefined,
+};
+
+export default TextArea;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/atoms/TextArea.stories.js b/frontend/micro-ui-internals/packages/react-components/src/atoms/TextArea.stories.js
new file mode 100644
index 00000000000..afe730836cd
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/atoms/TextArea.stories.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+import TextArea from "./TextArea";
+
+export default {
+ title: "Atom/TextArea",
+ component: TextArea,
+};
+
+const Template = (args) =>
;
+
+export const Default = Template.bind({});
+Default.args = {
+ name: "Description",
+ ref: undefined,
+ value: "This is a description",
+ onChange: undefined,
+};
diff --git a/frontend/micro-ui-internals/packages/react-components/src/atoms/TextInput.js b/frontend/micro-ui-internals/packages/react-components/src/atoms/TextInput.js
new file mode 100644
index 00000000000..dc74971ff70
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/atoms/TextInput.js
@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+const TextInput = (props) => {
+ const user_type = Digit.SessionStorage.get("userType");
+ const [date, setDate] = useState();
+ const data = props?.watch
+ ? {
+ fromDate: props?.watch("fromDate"),
+ toDate: props?.watch("toDate"),
+ }
+ : {};
+
+ const handleDate = (event) => {
+ const { value } = event.target;
+ setDate(getDDMMYYYY(value));
+ };
+
+ return (
+
+
+ {props.isMandatory ? (
+
+
+ );
+};
+
+TextInput.propTypes = {
+ userType: PropTypes.string,
+ isMandatory: PropTypes.bool,
+ name: PropTypes.string,
+ placeholder: PropTypes.string,
+ onChange: PropTypes.func,
+ ref: PropTypes.func,
+ value: PropTypes.any,
+};
+
+TextInput.defaultProps = {
+ isMandatory: false,
+};
+
+function DatePicker(props) {
+ useEffect(() => {
+ if (props?.shouldUpdate) {
+ props?.setDate(getDDMMYYYY(props?.data[props.name], "yyyymmdd"));
+ }
+ }, [props?.data]);
+
+ useEffect(() => {
+ props.setDate(getDDMMYYYY(props?.defaultValue));
+ }, []);
+
+ return (
+
+ );
+}
+
+function getDDMMYYYY(date) {
+ if (!date) return "";
+
+ return new Date(date).toLocaleString("en-In").split(",")[0];
+}
+
+export default TextInput;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/atoms/TextInput.stories.js b/frontend/micro-ui-internals/packages/react-components/src/atoms/TextInput.stories.js
new file mode 100644
index 00000000000..660bf3007bd
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/atoms/TextInput.stories.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+import TextInput from "./TextInput";
+
+export default {
+ title: "Atom/TextInput",
+ component: TextInput,
+};
+
+const Template = (args) =>
;
+
+export const Default = Template.bind({});
+
+Default.args = {
+ isMandatory: false,
+ name: "name",
+ placeholder: "Name",
+ value: "",
+};
diff --git a/frontend/micro-ui-internals/packages/react-components/src/atoms/Toast.js b/frontend/micro-ui-internals/packages/react-components/src/atoms/Toast.js
new file mode 100644
index 00000000000..12305da8847
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/atoms/Toast.js
@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { RoundedCheck, DeleteBtn } from "./svgindex";
+
+const Toast = (props) => {
+ if (props.error) {
+ return (
+
+
{props.label}
+ {/*
+ );
+ }
+
+ return (
+
+
{props.label}
+
+ );
+};
+
+Toast.propTypes = {
+ label: PropTypes.string,
+ onClose: PropTypes.func,
+};
+
+Toast.defaultProps = {
+ label: "",
+ onClose: undefined,
+};
+
+export default Toast;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/atoms/Toast.stories.js b/frontend/micro-ui-internals/packages/react-components/src/atoms/Toast.stories.js
new file mode 100644
index 00000000000..c646a286b86
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/atoms/Toast.stories.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+import Toast from "./Toast";
+
+export default {
+ title: "Atom/Toast",
+ component: Toast,
+};
+
+const Template = (args) =>
;
+
+export const Default = Template.bind({});
+
+Default.args = {
+ label: "Successful",
+};
diff --git a/frontend/micro-ui-internals/packages/react-components/src/atoms/TopBar.js b/frontend/micro-ui-internals/packages/react-components/src/atoms/TopBar.js
new file mode 100644
index 00000000000..3b0e979719d
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/atoms/TopBar.js
@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import Hamburger from "./Hamburger";
+
+const TopBar = ({ img, isMobile, logoUrl, onLogout, toggleSidebar, ulb, userDetails }) => {
+
+ return (
+
+
+ {isMobile &&
}
+
+
+
+ );
+};
+
+TopBar.propTypes = {
+ img: PropTypes.string,
+};
+
+TopBar.defaultProps = {
+ img: undefined,
+};
+
+export default TopBar;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/atoms/TopBar.stories.js b/frontend/micro-ui-internals/packages/react-components/src/atoms/TopBar.stories.js
new file mode 100644
index 00000000000..c97c3a7ba13
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/atoms/TopBar.stories.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+import TopBar from "./TopBar";
+
+export default {
+ title: "Atom/TopBaR",
+ component: TopBar,
+};
+
+const Template = (args) =>
;
+
+export const Default = Template.bind({});
+
+Default.args = {
+ img: undefined,
+};
diff --git a/frontend/micro-ui-internals/packages/react-components/src/atoms/UploadFile.js b/frontend/micro-ui-internals/packages/react-components/src/atoms/UploadFile.js
new file mode 100644
index 00000000000..de52b1f0af8
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/atoms/UploadFile.js
@@ -0,0 +1,111 @@
+import React, { useEffect, useRef, useState, Fragment } from "react";
+import ButtonSelector from "./ButtonSelector";
+import { Close } from "./svgindex";
+import { useTranslation } from "react-i18next";
+
+const getCitizenStyles = (value) => {
+ let citizenStyles = {};
+ if (value == "propertyCreate") {
+ citizenStyles = {
+ textStyles: {
+ whiteSpace: "nowrap",
+ width: "100%",
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+ },
+ tagStyles: {
+ width: "90%",
+ },
+ inputStyles: {
+ width: "44%",
+ },
+ buttonStyles: {
+ height: "auto",
+ minHeight: "2rem",
+ width: "40%",
+ },
+ tagContainerStyles: {
+ width: "60%",
+ },
+ };
+ } else {
+ citizenStyles = {
+ textStyles: {},
+ tagStyles: {},
+ inputStyles: {},
+ buttonStyles: {},
+ tagContainerStyles: {},
+ };
+ }
+ return citizenStyles;
+};
+
+const UploadFile = (props) => {
+ const { t } = useTranslation();
+ const inpRef = useRef();
+ const [hasFile, setHasFile] = useState(false);
+ let extraStyles = {};
+ const handleChange = () => {
+ if (inpRef.current.files[0]) setHasFile(true);
+ else setHasFile(false);
+ };
+ switch (props.extraStyleName) {
+ case "propertyCreate":
+ extraStyles = getCitizenStyles("propertyCreate");
+ break;
+ default:
+ extraStyles = getCitizenStyles("");
+ }
+
+ const handleDelete = () => {
+ inpRef.current.value = "";
+ props.onDelete();
+ };
+
+ useEffect(() => handleChange(), [props.message]);
+
+ const showHint = props?.showHint || false;
+
+ return (
+
+ {showHint && {t(props?.hintText)}
}
+
+
+
+ {!hasFile || props.error ? (
+
{props.message}
+ ) : (
+
+
+
+ {inpRef.current.files[0]?.name?.slice(0, 20)}
+
+ handleDelete()}>
+
+
+
+ )}
+
+
props.onUpload(e)}
+ />
+
+ );
+};
+
+export default UploadFile;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/atoms/UploadImages.js b/frontend/micro-ui-internals/packages/react-components/src/atoms/UploadImages.js
new file mode 100644
index 00000000000..973bdd3467c
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/atoms/UploadImages.js
@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { CameraSvg } from "./svgindex";
+import { DeleteBtn } from "./svgindex";
+
+const MiniUpload = (props) => {
+ return (
+
+
+ );
+};
+
+const UploadImages = (props) => {
+ if (props.thumbnails && props.thumbnails.length > 0) {
+ return (
+
+ {props.thumbnails.map((thumbnail, index) => {
+ return (
+
+
props.onDelete(thumbnail)} className="delete" fill="#d4351c" />
+
+ );
+ })}
+ {props.thumbnails.length < 3 ?
: null}
+
+ );
+ } else {
+ return (
+
props.onUpload(e)}>
+
+ );
+ }
+};
+
+UploadImages.propTypes = {
+ thumbnail: PropTypes.array,
+ onUpload: PropTypes.func,
+};
+
+UploadImages.defaultProps = {
+ thumbnail: [],
+ onUpload: undefined,
+};
+
+export default UploadImages;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/atoms/UploadImages.stories.js b/frontend/micro-ui-internals/packages/react-components/src/atoms/UploadImages.stories.js
new file mode 100644
index 00000000000..bd5e1a09d9b
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/atoms/UploadImages.stories.js
@@ -0,0 +1,21 @@
+import React from "react";
+
+import UploadImages from "./UploadImages";
+
+export default {
+ title: "Atom/UploadImages",
+ component: UploadImages,
+};
+
+const Template = (args) =>
;
+
+export const NoImages = Template.bind({});
+NoImages.args = {};
+
+export const Images = Template.bind({});
+Images.args = {
+ thumbnails: [
+ "https://randomwordgenerator.com/img/picture-generator/5ee6d1454b53b10ff3d8992cc12c30771037dbf85254794e722679d49445_640.jpg",
+ "https://randomwordgenerator.com/img/picture-generator/57e0d1444250a414f1dc8460962e33791c3ad6e04e50744077297bd59445c2_640.jpg",
+ ],
+};
diff --git a/frontend/micro-ui-internals/packages/react-components/src/atoms/svgindex.js b/frontend/micro-ui-internals/packages/react-components/src/atoms/svgindex.js
new file mode 100644
index 00000000000..4552fb6bd19
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/atoms/svgindex.js
@@ -0,0 +1,591 @@
+import React from "react";
+const ArrowLeft = ({ className }) => (
+
+
+);
+
+const ArrowDown = ({ className, onClick, styles, disable }) => (
+
+
+);
+
+
+const ArrowBack = ({ className, onClick }) => (
+
+
+);
+
+const ArrowForward = ({ className, onClick }) => (
+
+
+);
+
+const ArrowToFirst = ({ className, onClick }) => (
+
+
+);
+
+const ArrowToLast = ({ className, onClick }) => (
+
+
+);
+
+const CameraSvg = ({ className }) => (
+
+
+);
+
+const DeleteBtn = ({ className, onClick, fill }) => (
+
+
+);
+
+const SuccessSvg = ({ className }) => (
+
+
+);
+
+const ErrorSvg = ({ className }) => (
+
+
+);
+
+const StarFilled = ({ className, id, onClick, styles, percentage = 100 }) => (
+
+
+
+
+
+
+
+
+);
+
+const StarEmpty = ({ className, onClick, styles }) => (
+
+
+);
+//TODO: URGENT REMOVE THIS!!!!!!!!!!
+const DocumentSVG = ({ className }) => (
+
+
+
+
+
+
+
+
+
+
+);
+
+const SearchIconSvg = ({ className }) => (
+
+
+);
+
+const CheckSvg = ({ className }) => (
+
+
+);
+
+const RoundedCheck = ({ className }) => (
+
+
+);
+
+const Calender = ({ className, onClick }) => (
+
+
+);
+
+const Phone = ({ className }) => (
+
+
+);
+
+const FilterSvg = ({ className }) => (
+
+
+);
+
+const Close = ({ className }) => (
+
+
+);
+
+const Feedback = ({ className }) => (
+
+
+);
+
+// Download Icon
+const GetApp = ({ className }) => (
+
+
+);
+
+const HamburgerIcon = ({ className, styles, color = "#fdfdfd" }) => (
+
+
+);
+
+export const HomeIcon = ({ className, styles }) => (
+
+
+);
+
+export const LanguageIcon = ({ className, styles }) => (
+
+
+);
+
+export const LogoutIcon = ({ className, styles }) => (
+
+
+);
+
+const CalendarIcon = (props) => (
+
+
+);
+
+const SortDown = (style) => (
+
+
+);
+
+const SortUp = (style) => (
+
+
+);
+
+const ArrowRightInbox = ({ style }) => (
+
+
+);
+
+const ShippingTruck = (style) => (
+
+
+);
+
+function CloseSvg({ onClick }) {
+ return (
+
+
+ );
+}
+
+const UpwardArrow = ({ color = "#00703C", rotate = 0, marginRight = 0 }) => (
+
+
+);
+
+const DownwardArrow = (props) => (
+
+);
+
+const DownloadIcon = ({ styles, className, onClick }) => (
+
+
+);
+
+const PrimaryDownlaodIcon = () => (
+
+
+);
+
+const Ellipsis = ({ className, onClick }) => (
+
+
+);
+
+const Poll = () => (
+
+
+);
+
+const Details = () => (
+
+
+);
+
+const FilterIcon = ({ onClick }) => (
+
+
+);
+
+const RefreshIcon = () => (
+
+
+);
+
+const PrintIcon = () => (
+
+
+);
+function PropertyHouse(style) {
+ return (
+
+
+ );
+}
+
+const InfoBannerIcon = () => {
+ return (
+
+
+ );
+};
+const ShareIcon = ({ styles, className }) => (
+
+
+);
+
+const RupeeIcon = ({ className }) => (
+
+
+);
+
+const ComplaintIcon = ({ className }) => (
+
+
+);
+
+const DropIcon = ({ className }) => (
+
+
+);
+
+const Person = (style) => (
+
+
+);
+
+const WhatsappIcon = () => (
+
+
+);
+
+const EmailIcon = () => (
+
+
+);
+
+const CaseIcon = ({ className }) =>
+
+
+const PersonIcon = () =>
+
+
+const ReceiptIcon = () =>
+
+
+const AnnouncementIcon = () =>
+
+
+const PTIcon = ({ className }) =>
+
+
+const CitizenTruck = ({ className }) => (
+
+ );
+
+export {
+ AnnouncementIcon,
+ ReceiptIcon,
+ ArrowLeft,
+ ArrowDown,
+ CameraSvg,
+ DeleteBtn,
+ DownloadIcon,
+ Ellipsis,
+ SuccessSvg,
+ ErrorSvg,
+ StarFilled,
+ StarEmpty,
+ SearchIconSvg,
+ CheckSvg,
+ RoundedCheck,
+ Calender,
+ Phone,
+ FilterSvg,
+ Close,
+ Feedback,
+ GetApp,
+ HamburgerIcon,
+ ArrowBack,
+ ArrowForward,
+ ArrowRightInbox,
+ SortDown,
+ SortUp,
+ ShippingTruck,
+ CloseSvg,
+ CalendarIcon,
+ UpwardArrow,
+ DownwardArrow,
+ Poll,
+ FilterIcon,
+ RefreshIcon,
+ Details,
+ PrintIcon,
+ PropertyHouse,
+ PrimaryDownlaodIcon,
+ InfoBannerIcon,
+ ShareIcon,
+ RupeeIcon,
+ ComplaintIcon,
+ DropIcon,
+ Person,
+ WhatsappIcon,
+ EmailIcon,
+ DocumentSVG,
+ ArrowToFirst,
+ ArrowToLast,
+ CaseIcon,
+ PersonIcon,
+ PTIcon,
+ CitizenTruck
+};
diff --git a/frontend/micro-ui-internals/packages/react-components/src/context/index.js b/frontend/micro-ui-internals/packages/react-components/src/context/index.js
new file mode 100644
index 00000000000..e6cbdea09b1
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/context/index.js
@@ -0,0 +1 @@
+const ComponentProvider = React.createContext();
diff --git a/frontend/micro-ui-internals/packages/react-components/src/hoc/FormComposer.js b/frontend/micro-ui-internals/packages/react-components/src/hoc/FormComposer.js
new file mode 100644
index 00000000000..16fcd8d892d
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/hoc/FormComposer.js
@@ -0,0 +1,218 @@
+import React, { useEffect, useMemo, useState, Fragment } from "react";
+import { useForm, Controller } from "react-hook-form";
+import BreakLine from "../atoms/BreakLine";
+import Card from "../atoms/Card";
+import CardLabel from "../atoms/CardLabel";
+import CardText from "../atoms/CardText";
+// import CardLabelError from "../atoms/CardLabelError";
+import CardSubHeader from "../atoms/CardSubHeader";
+import CardSectionHeader from "../atoms/CardSectionHeader";
+import CardLabelDesc from "../atoms/CardLabelDesc";
+import CardLabelError from "../atoms/CardLabelError";
+import TextArea from "../atoms/TextArea";
+import TextInput from "../atoms/TextInput";
+import ActionBar from "../atoms/ActionBar";
+import SubmitBar from "../atoms/SubmitBar";
+import LabelFieldPair from "../atoms/LabelFieldPair";
+
+import { useTranslation } from "react-i18next";
+import MobileNumber from "../atoms/MobileNumber";
+
+export const FormComposer = (props) => {
+ const { register, handleSubmit, setValue, getValues, watch, control, formState, errors, setError, clearErrors, unregister } = useForm({
+ defaultValues: props.defaultValues,
+ });
+ const { t } = useTranslation();
+ const formData = watch();
+
+ useEffect(() => {
+ props.getFormAccessors && props.getFormAccessors({ setValue, getValues });
+ }, []);
+
+ function onSubmit(data) {
+ props.onSubmit(data);
+ }
+
+ function onSecondayActionClick(data) {
+ props.onSecondayActionClick();
+ }
+
+ useEffect(() => {
+ props.onFormValueChange && props.onFormValueChange(setValue, formData, formState);
+ }, [formData]);
+
+ const fieldSelector = (type, populators, isMandatory, disable = false, component, config) => {
+ switch (type) {
+ case "text":
+ case "date":
+ case "number":
+ case "password":
+ // if (populators.defaultValue) setTimeout(setValue(populators?.name, populators.defaultValue));
+ return (
+
+ {populators.componentInFront ? (
+ {populators.componentInFront}
+ ) : null}
+
+ );
+ case "textarea":
+ // if (populators.defaultValue) setTimeout(setValue(populators?.name, populators.defaultValue));
+ return (
+
+ );
+ case "mobileNumber":
+ return (
+
populators.component({ ...props, setValue }, populators.customProps)}
+ defaultValue={populators.defaultValue}
+ name={populators?.name}
+ control={control}
+ />
+ );
+ case "component":
+ const Component = typeof component === "string" ? Digit.ComponentRegistryService.getComponent(component) : component;
+ return (
+ (
+
+ {section.head && {t(section.head)} }
+ {section.body.map((field, index) => {
+ if (props.inline)
+ return (
+
+ {!field.withoutLabel && (
+
+ {t(field.label)}
+ {field.isMandatory ? " * " : null}
+
+ )}
+
+ {errors && errors[field.populators?.name] && Object.keys(errors[field.populators?.name]).length ? (
+ {field.populators.error}
+ ) : null}
+
+ {fieldSelector(field.type, field.populators, field.isMandatory, field?.disable, field?.component, field)}
+ {field?.description && (
+
+ {t(field.description)}
+
+ )}
+
+
+ );
+ return (
+
+
+ {!field.withoutLabel && (
+
+ {t(field.label)}
+ {field.isMandatory ? " * " : null}
+
+ )}
+
+ {fieldSelector(field.type, field.populators, field.isMandatory, field?.disable, field?.component, field)}
+
+
+ {field?.populators?.name && errors && errors[field?.populators?.name] && Object.keys(errors[field?.populators?.name]).length ? (
+
+ {field?.populators?.error}
+
+ ) : null}
+
+ );
+ })}
+ {!props.noBreakLine && (array.length - 1 === index ? null :
+ );
+ }),
+ [props.config, formData]
+ );
+
+ const getCardStyles = () => {
+ let styles = props.cardStyle || {};
+ if (props.noBoxShadow) styles = { ...styles, boxShadow: "none" };
+ return styles;
+ };
+
+ const isDisabled = props.isDisabled || false;
+
+ return (
+
+ );
+};
diff --git a/frontend/micro-ui-internals/packages/react-components/src/hoc/Modal.js b/frontend/micro-ui-internals/packages/react-components/src/hoc/Modal.js
new file mode 100644
index 00000000000..bfba6e70085
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/hoc/Modal.js
@@ -0,0 +1,49 @@
+import React, { useEffect } from "react";
+
+import PopUp from "../atoms/PopUp";
+import HeaderBar from "../atoms/HeaderBar";
+import ButtonSelector from "../atoms/ButtonSelector";
+import Toast from "../atoms/Toast";
+
+const Modal = ({
+ headerBarMain,
+ headerBarEnd,
+ popupStyles,
+ children,
+ actionCancelLabel,
+ actionCancelOnSubmit,
+ actionSaveLabel,
+ actionSaveOnSubmit,
+ error,
+ setError,
+ formId,
+ isDisabled,
+ hideSubmit,
+}) => {
+ /**
+ * TODO: It needs to be done from the desgin changes
+ */
+ useEffect(() => {
+ document.body.style.overflowY = 'hidden';
+ return () =>{
+ document.body.style.overflowY = 'auto';
+ }
+ }, [])
+ return (
+
+
+
+
+ {children}
+
+ {actionCancelLabel ?
+
+
setError(null)} error />}
+
+ );
+};
+
+export default Modal;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/hoc/ResponseComposer.js b/frontend/micro-ui-internals/packages/react-components/src/hoc/ResponseComposer.js
new file mode 100644
index 00000000000..5f3cf936fd8
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/hoc/ResponseComposer.js
@@ -0,0 +1,56 @@
+import React from "react";
+import Card from "../atoms/Card";
+import KeyNote from "../atoms/KeyNote";
+import SubmitBar from "../atoms/SubmitBar";
+import PropTypes from "prop-types";
+
+import { useTranslation } from "react-i18next";
+
+const ResponseComposer = ({ data, template, actionButtonLabel, onSubmit }) => {
+ const { t } = useTranslation();
+ return (
+
+ {data.map((result, i) => {
+ return (
+
+ {template.map((field, j) => {
+ return (
+ {
+ onSubmit(result);
+ }}
+ />
+ )}
+
+ );
+ })}
+
+ );
+};
+
+ResponseComposer.propTypes = {
+ data: PropTypes.array,
+ template: PropTypes.array,
+ actionButtonLabel: PropTypes.string,
+ onSubmit: PropTypes.func,
+};
+
+ResponseComposer.defaultProps = {
+ data: [],
+ template: [],
+ actionButtonLabel: "",
+ onSubmit: () => {},
+};
+
+export default ResponseComposer;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/hoc/SubformComposer.js b/frontend/micro-ui-internals/packages/react-components/src/hoc/SubformComposer.js
new file mode 100644
index 00000000000..f2a6b9e42af
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/hoc/SubformComposer.js
@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import BreakLine from "../atoms/BreakLine";
+import Card from "../atoms/Card";
+import CardLabel from "../atoms/CardLabel";
+import CardText from "../atoms/CardText";
+// import CardLabelError from "../atoms/CardLabelError";
+import CardSubHeader from "../atoms/CardSubHeader";
+import CardSectionHeader from "../atoms/CardSectionHeader";
+import CardLabelDesc from "../atoms/CardLabelDesc";
+import CardLabelError from "../atoms/CardLabelError";
+import ActionBar from "../atoms/ActionBar";
+import SubmitBar from "../atoms/SubmitBar";
+import LabelFieldPair from "../atoms/LabelFieldPair";
+
+import { useTranslation } from "react-i18next";
+import TextInput from "../atoms/TextInput";
+import Dropdown from "../atoms/Dropdown";
+import MobileNumber from "../atoms/MobileNumber";
+import DatePicker from "../atoms/DatePicker";
+import TextArea from "../atoms/TextArea";
+
+export const SubFormComposer = ({
+ userType,
+ setValue,
+ onSelect,
+ config,
+ data,
+ formData,
+ register,
+ errors,
+ props,
+ setError,
+ clearErrors,
+ formState,
+ onBlur,
+ control,
+}) => {};
diff --git a/frontend/micro-ui-internals/packages/react-components/src/index.js b/frontend/micro-ui-internals/packages/react-components/src/index.js
new file mode 100644
index 00000000000..a7777b335db
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/index.js
@@ -0,0 +1,234 @@
+import ActionBar from "./atoms/ActionBar";
+import ActionLinks from "./atoms/ActionLinks";
+import AppContainer from "./atoms/AppContainer";
+import ApplyFilterBar from "./atoms/ApplyFilterBar";
+import BackButton from "./atoms/BackButton";
+import Banner from "./atoms/Banner";
+import Body from "./atoms/Body";
+import BreadCrumb from "./atoms/BreadCrumb";
+import BreakLine from "./atoms/BreakLine";
+import ButtonSelector from "./atoms/ButtonSelector";
+import Card from "./atoms/Card";
+import CardCaption from "./atoms/CardCaption";
+import CardHeader from "./atoms/CardHeader";
+import CardLabel from "./atoms/CardLabel";
+import CardLabelDesc from "./atoms/CardLabelDesc";
+import CardLabelError from "./atoms/CardLabelError";
+import CardSectionHeader from "./atoms/CardSectionHeader";
+import CardSubHeader from "./atoms/CardSubHeader";
+import CardText from "./atoms/CardText";
+import CardTextButton from "./atoms/CardTextButton";
+import CheckBox from "./atoms/CheckBox";
+import CitizenHomeCard from "./atoms/CitizenHomeCard";
+import CitizenInfoLabel from "./atoms/CitizenInfoLabel";
+import { CheckPoint, ConnectingCheckPoints } from "./atoms/ConnectingCheckPoints";
+import CustomButton from "./atoms/CustomButton";
+import DatePicker from "./atoms/DatePicker";
+import DateWrap from "./atoms/DateWrap";
+import DisplayPhotos from "./atoms/DisplayPhotos";
+import Dropdown from "./atoms/Dropdown";
+import EllipsisMenu from "./atoms/EllipsisMenu";
+import EmployeeAppContainer from "./atoms/EmployeeAppContainer";
+import EmployeeModuleCard from "./atoms/EmployeeModuleCard";
+import GreyOutText from "./atoms/GreyOutText";
+import Hamburger from "./atoms/Hamburger";
+import Header from "./atoms/Header";
+import HeaderBar from "./atoms/HeaderBar";
+import HomeLink from "./atoms/HomeLink";
+import { ImageUploadHandler } from "./atoms/ImageUploadHandler";
+import ImageViewer from "./atoms/ImageViewer";
+import InfoBanner from "./atoms/InfoBanner";
+import KeyNote from "./atoms/KeyNote";
+import Label from "./atoms/Label";
+import LabelFieldPair from "./atoms/LabelFieldPair";
+import LinkButton from "./atoms/LinkButton";
+import LinkLabel from "./atoms/LinkLabel";
+import { Loader } from "./atoms/Loader";
+import LocationSearch from "./atoms/LocationSearch";
+import Menu from "./atoms/Menu";
+import MobileNumber from "./atoms/MobileNumber";
+import MultiLink from "./atoms/MultiLink";
+import MultiSelectDropdown from "./atoms/MultiSelectDropdown";
+import NavBar from "./atoms/NavBar";
+import OTPInput from "./atoms/OTPInput";
+import PopUp from "./atoms/PopUp";
+import { PrivateRoute } from "./atoms/PrivateRoute";
+import RadioButtons from "./atoms/RadioButtons";
+import Rating from "./atoms/Rating";
+import RoundedLabel from "./atoms/RoundedLabel";
+import SectionalDropdown from "./atoms/SectionalDropdown";
+import { LastRow, MediaRow, Row, StatusTable } from "./atoms/StatusTable";
+import SubmitBar from "./atoms/SubmitBar";
+import {
+ AnnouncementIcon, ArrowDown, ArrowLeft, ArrowRightInbox, Calender, CaseIcon, CitizenTruck, CloseSvg, ComplaintIcon, Details, DocumentSVG, DownloadIcon, DownwardArrow, DropIcon, Ellipsis, EmailIcon, FilterIcon, GetApp, HomeIcon,
+ LanguageIcon,
+ LogoutIcon, Person, PersonIcon, Poll, PrintIcon, PropertyHouse, PTIcon, ReceiptIcon, RefreshIcon, RupeeIcon, SearchIconSvg, ShareIcon, ShippingTruck, SortDown,
+ SortUp, UpwardArrow, WhatsappIcon
+} from "./atoms/svgindex";
+import Table from "./atoms/Table";
+import TelePhone from "./atoms/TelePhone";
+import TextArea from "./atoms/TextArea";
+import TextInput from "./atoms/TextInput";
+import Toast from "./atoms/Toast";
+import TopBar from "./atoms/TopBar";
+import UploadFile from "./atoms/UploadFile";
+import UploadImages from "./atoms/UploadImages";
+import { FormComposer } from "./hoc/FormComposer";
+import Modal from "./hoc/Modal";
+import ResponseComposer from "./hoc/ResponseComposer";
+import CityMohalla from "./molecules/CityMohalla";
+import DashboardBox from "./molecules/DashboardBox";
+import DetailsCard from "./molecules/DetailsCard";
+import FilterAction from "./molecules/FilterAction";
+import FormStep from "./molecules/FormStep";
+import InputCard from "./molecules/InputCard";
+import Localities from "./molecules/Localities";
+import LocationSearchCard from "./molecules/LocationSearchCard";
+import PitDimension from "./molecules/PitDimension";
+import RadioOrSelect from "./molecules/RadioOrSelect";
+import RatingCard from "./molecules/RatingCard";
+import RemoveableTag from "./molecules/RemoveableTag";
+import SearchAction from "./molecules/SearchAction";
+import { SearchField, SearchForm } from "./molecules/SearchForm";
+import TextInputCard from "./molecules/TextInputCard";
+import TypeSelectCard from "./molecules/TypeSelectCard";
+
+
+
+export {
+ Body,
+ Loader,
+ TopBar,
+ HomeLink,
+ AppContainer,
+ EmployeeAppContainer,
+ Header,
+ ActionBar,
+ Menu,
+ LinkLabel,
+ BackButton,
+ BreakLine,
+ Card,
+ CardCaption,
+ CardHeader,
+ CardText,
+ CardLabel,
+ CardLabelDesc,
+ CardLabelError,
+ CardTextButton,
+ RadioButtons,
+ DashboardBox,
+ Dropdown,
+ TextInput,
+ TextArea,
+ Banner,
+ CardSubHeader,
+ CardSectionHeader,
+ SubmitBar,
+ ButtonSelector,
+ LinkButton,
+ StatusTable,
+ Row,
+ LastRow,
+ MediaRow,
+ DisplayPhotos,
+ ConnectingCheckPoints,
+ CheckPoint,
+ Rating,
+ CheckBox,
+ OTPInput,
+ LocationSearch,
+ UploadFile,
+ UploadImages,
+ ImageViewer,
+ ImageUploadHandler,
+ TypeSelectCard,
+ LocationSearchCard,
+ TextInputCard,
+ CityMohalla,
+ DetailsCard,
+ Label,
+ Table,
+ PopUp,
+ HeaderBar,
+ Toast,
+ DateWrap,
+ KeyNote,
+ TelePhone,
+ GreyOutText,
+ ActionLinks,
+ PrivateRoute,
+ SectionalDropdown,
+ RoundedLabel,
+ LabelFieldPair,
+ BreadCrumb,
+ DatePicker,
+ InfoBanner,
+ MobileNumber,
+ EllipsisMenu,
+ CitizenHomeCard,
+ EmployeeModuleCard,
+ // Icons
+ GetApp,
+ ArrowLeft,
+ HomeIcon,
+ LanguageIcon,
+ LogoutIcon,
+ NavBar,
+ Hamburger,
+ CustomButton,
+ CitizenInfoLabel,
+ SearchIconSvg,
+ ArrowRightInbox,
+ ArrowDown,
+ SortDown,
+ SortUp,
+ ShippingTruck,
+ CloseSvg,
+ PropertyHouse,
+ MultiLink,
+ MultiSelectDropdown,
+ CaseIcon,
+ PTIcon,
+ // Molecule
+ InputCard,
+ FormStep,
+ RatingCard,
+ SearchAction,
+ FilterAction,
+ ApplyFilterBar,
+ RemoveableTag,
+ RadioOrSelect,
+ Localities,
+ SearchForm,
+ SearchField,
+ // hoc
+ FormComposer,
+ ResponseComposer,
+ PitDimension,
+ Modal,
+ UpwardArrow,
+ DownwardArrow,
+ DownloadIcon,
+ Ellipsis,
+ RefreshIcon,
+ Poll,
+ Details,
+ // Icons
+ FilterIcon,
+ PrintIcon,
+ ShareIcon,
+ Calender,
+ DropIcon,
+ RupeeIcon,
+ ComplaintIcon,
+ Person,
+ WhatsappIcon,
+ EmailIcon,
+ DocumentSVG,
+ PersonIcon,
+ ReceiptIcon,
+ AnnouncementIcon,
+ CitizenTruck
+};
+
diff --git a/frontend/micro-ui-internals/packages/react-components/src/molecules/CityMohalla.js b/frontend/micro-ui-internals/packages/react-components/src/molecules/CityMohalla.js
new file mode 100644
index 00000000000..d992bddaa28
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/molecules/CityMohalla.js
@@ -0,0 +1,76 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import Card from "../atoms/Card";
+import CardHeader from "../atoms/CardHeader";
+import CardText from "../atoms/CardText";
+import SubmitBar from "../atoms/SubmitBar";
+import CardSubHeader from "../atoms/CardSubHeader";
+import CardLabel from "../atoms/CardLabel";
+import Dropdown from "../atoms/Dropdown";
+
+const CityMohalla = ({
+ header,
+ subHeader,
+ cardText,
+ cardLabelCity,
+ cardLabelMohalla,
+ nextText,
+ selectedCity,
+ cities,
+ localities,
+ selectCity,
+ selectLocalities,
+ onSave,
+ selectedLocality,
+}) => {
+ return (
+
+ {subHeader}
+ {header}
+
+ {/* Choose the locality/mohalla of the complaint from the list given below. */}
+ {cardText}
+
+ {cardLabelCity}*
+ {cardLabelMohalla} *
+
+ );
+};
+
+CityMohalla.propTypes = {
+ header: PropTypes.string,
+ subHeader: PropTypes.string,
+ cardText: PropTypes.string,
+ cardLabelCity: PropTypes.string,
+ cardLabelMohalla: PropTypes.string,
+ nextText: PropTypes.string,
+ selectedCity: PropTypes.string,
+ cities: PropTypes.array,
+ localities: PropTypes.array,
+ selectCity: PropTypes.string,
+ selectedLocality: PropTypes.string,
+ selectLocalities: PropTypes.func,
+ onSave: PropTypes.func,
+};
+
+CityMohalla.defaultProps = {
+ header: "",
+ subHeader: "",
+ cardText: "",
+ cardLabelCity: "",
+ cardLabelMohalla: "",
+ nextText: "",
+ selectedCity: "",
+ cities: [],
+ localities: [],
+ selectCity: "",
+ selectedLocality: "",
+ selectLocalities: undefined,
+ onSave: undefined,
+};
+
+export default CityMohalla;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/molecules/CityMohalla.stories.js b/frontend/micro-ui-internals/packages/react-components/src/molecules/CityMohalla.stories.js
new file mode 100644
index 00000000000..b367b2e0f81
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/molecules/CityMohalla.stories.js
@@ -0,0 +1,26 @@
+import React from "react";
+
+import CityMohalla from "./CityMohalla";
+
+export default {
+ title: "Molecule/CityMohalla",
+ component: CityMohalla,
+};
+
+const Template = (args) =>
+
+
+);
+
+const DashboardBox = ({ t = (val) => val, svgIcon, header, info, subHeader, links, total }) => {
+ const mobileView = innerWidth <= 640;
+ const employeeCardStyles = mobileView
+ ? {
+ width: "96vw",
+ margin: "8px auto",
+ }
+ : {
+ width: "328px",
+ };
+ return (
+
+
+
+
+ {/*
+ */}
+ {svgIcon}
+
+
{t(header)}
+
+
+
+ {Object.keys(info).map((key, index) => {
+ return (
+
+ {t(info[key])}
+ {t(key)}
+
+ );
+ })}
+
+
+
+
+ {links.map((link, index) => (
+
+ {t(link.label)}
+
+ {!isNaN(link.total) && {link.total} }
+ {
+ ))}
+
+
+
+
+ {label}
+
+ {name}
+
+ );
+};
+
+const DetailsCard = ({ data, serviceRequestIdKey, linkPrefix, handleSelect, selectedItems, keyForSelected }) => {
+ if (linkPrefix && serviceRequestIdKey) {
+ return (
+
+ {data.map((object, itemIndex) => {
+ return (
+
+
+ {Object.keys(object).map((name, index) => {
+ return
+
+ );
+ })}
+
+ {data.map((object, itemIndex) => {
+ if (serviceRequestIdKey && linkPrefix) {
+ return (
+
+
+ {Object.keys(object).map((name, index) => {
+ return
+
+ );
+ }
+ return (
+
handleSelect(object)}
+ >
+ {Object.keys(object).map((name, index) => {
+ return
+ );
+ })}
+
+ {text}
+
+);
+
+export default FilterAction;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/molecules/FormStep.js b/frontend/micro-ui-internals/packages/react-components/src/molecules/FormStep.js
new file mode 100644
index 00000000000..b4893ff2e05
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/molecules/FormStep.js
@@ -0,0 +1,108 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+import PropTypes from "prop-types";
+import TextArea from "../atoms/TextArea";
+import CardLabel from "../atoms/CardLabel";
+import CardLabelError from "../atoms/CardLabelError";
+import TextInput from "../atoms/TextInput";
+import InputCard from "./InputCard";
+
+const FormStep = ({
+ t,
+ children,
+ config,
+ onSelect,
+ onSkip,
+ value,
+ onChange,
+ isDisabled,
+ _defaultValues = {},
+ forcedError,
+ componentInFront,
+ onAdd,
+ cardStyle = {},
+ isMultipleAllow = false,
+ showErrorBelowChildren = false,
+}) => {
+ const { register, watch, errors, handleSubmit } = useForm({
+ defaultValues: _defaultValues,
+ });
+
+ // console.log("config", config);
+ const goNext = (data) => {
+ // console.log("data", data);
+ onSelect(data);
+ };
+
+ var isDisable = isDisabled ? true : config.canDisable && Object.keys(errors).filter((i) => errors[i]).length;
+
+ const inputs = config.inputs?.map((input, index) => {
+ if (input.type === "text") {
+ return (
+
+ {t(input.label)}
+ {errors[input.name] && {t(input.error)} }
+
+ {componentInFront ? {componentInFront} : null}
+
+
+ );
+ }
+ if (input.type === "textarea")
+ return (
+
+ {t(input.label)}
+
+
+ );
+ });
+
+ return (
+
+ );
+};
+
+FormStep.propTypes = {
+ config: PropTypes.shape({}),
+ onSelect: PropTypes.func,
+ onSkip: PropTypes.func,
+ onAdd: PropTypes.func,
+ t: PropTypes.func,
+};
+
+FormStep.defaultProps = {
+ config: {},
+ onSelect: undefined,
+ onSkip: undefined,
+ onAdd: undefined,
+ t: (value) => value,
+};
+
+export default FormStep;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/molecules/FormStep.stories.js b/frontend/micro-ui-internals/packages/react-components/src/molecules/FormStep.stories.js
new file mode 100644
index 00000000000..33618f20523
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/molecules/FormStep.stories.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+import FormStep from "./FormStep";
+
+export default {
+ title: "Molecule/FormStep",
+ component: FormStep,
+};
+
+const Template = (args) =>
+ {texts.headerCaption && {t(texts.headerCaption)} }
+ {t(texts.header)}
+ {t(texts.cardText)}
+ {children}
+
+ );
+};
+
+InputCard.propTypes = {
+ text: PropTypes.object,
+ submit: PropTypes.bool,
+ onNext: PropTypes.func,
+ onSkip: PropTypes.func,
+ onAdd: PropTypes.func,
+ t: PropTypes.func,
+};
+
+InputCard.defaultProps = {
+ texts: {},
+ submit: false,
+ onNext: undefined,
+ onSkip: undefined,
+ onAdd: undefined,
+ t: (value) => value,
+};
+
+export default InputCard;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/molecules/InputCard.stories.js b/frontend/micro-ui-internals/packages/react-components/src/molecules/InputCard.stories.js
new file mode 100644
index 00000000000..0b94f76fda2
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/molecules/InputCard.stories.js
@@ -0,0 +1,22 @@
+import React from "react";
+
+import InputCard from "./InputCard";
+
+export default {
+ title: "Molecule/InputCard",
+ component: InputCard,
+};
+
+const Template = (args) => ABCD
+};
+
+export default Localities;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/molecules/LocationSearchCard.js b/frontend/micro-ui-internals/packages/react-components/src/molecules/LocationSearchCard.js
new file mode 100644
index 00000000000..44162ec9901
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/molecules/LocationSearchCard.js
@@ -0,0 +1,80 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+
+import Card from "../atoms/Card";
+import CardHeader from "../atoms/CardHeader";
+import CardText from "../atoms/CardText";
+import CardLabelError from "../atoms/CardLabelError";
+import LocationSearch from "../atoms/LocationSearch";
+import SubmitBar from "../atoms/SubmitBar";
+import LinkButton from "../atoms/LinkButton";
+
+const LocationSearchCard = ({
+ header,
+ cardText,
+ nextText,
+ t,
+ skipAndContinueText,
+ forcedError,
+ skip,
+ onSave,
+ onChange,
+ position,
+ disabled,
+ cardBodyStyle = {},
+ isPTDefault,
+ PTdefaultcoord,
+}) => {
+ let isDisabled = false || disabled;
+ const onLocationChange = (val, location) => {
+ isDisabled = val ? false : true;
+ onChange(val, location);
+ };
+
+ return (
+
+ {header}
+
+
+ {/* Click and hold to drop the pin to complaint location. If you are not
+ able to pin the location you can skip the continue for next step. */}
+ {cardText}
+
+
+ {t(forcedError)} }
+
+
+ );
+};
+
+LocationSearchCard.propTypes = {
+ header: PropTypes.string,
+ cardText: PropTypes.string,
+ nextText: PropTypes.string,
+ skipAndContinueText: PropTypes.string,
+ skip: PropTypes.func,
+ onSave: PropTypes.func,
+ onChange: PropTypes.func,
+ position: PropTypes.any,
+ isPTDefault: PropTypes.any,
+ PTdefaultcoord: PropTypes.any,
+};
+
+LocationSearchCard.defaultProps = {
+ header: "",
+ cardText: "",
+ nextText: "",
+ skipAndContinueText: "",
+ skip: () => {},
+ onSave: null,
+ onChange: () => {},
+ position: undefined,
+ isPTDefault: false,
+ PTdefaultcoord: {},
+};
+
+export default LocationSearchCard;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/molecules/LocationSearchCard.stories.js b/frontend/micro-ui-internals/packages/react-components/src/molecules/LocationSearchCard.stories.js
new file mode 100644
index 00000000000..96517792e00
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/molecules/LocationSearchCard.stories.js
@@ -0,0 +1,20 @@
+import React from "react";
+
+import LocationSearchCard from "./LocationSearchCard";
+
+export default {
+ title: "Molecule/LocationSearchCard",
+ component: LocationSearchCard,
+};
+
+const Template = (args) =>
+
+
+ {t("CS_FILE_PROPERTY_DIAMETER")}
+
+
+
x
+
+
+ {t("CS_FILE_PROPERTY_HEIGHT")}
+
+
+
+
+
+ {t("CS_FILE_PROPERTY_LENGTH")}
+
+
+
x
+
+
+ {t("CS_FILE_PROPERTY_WIDTH")}
+
+
+
x
+
+
+ {t("CS_FILE_PROPERTY_HEIGHT")}
+
+
+
+ {options?.length < 5 ? (
+
+ );
+};
+
+export default RadioOrSelect;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/molecules/RatingCard.js b/frontend/micro-ui-internals/packages/react-components/src/molecules/RatingCard.js
new file mode 100644
index 00000000000..d3c36cc066b
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/molecules/RatingCard.js
@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import PropTypes from "prop-types";
+
+import TextArea from "../atoms/TextArea";
+import CardLabel from "../atoms/CardLabel";
+import Rating from "../atoms/Rating";
+import CheckBox from "../atoms/CheckBox";
+import Card from "../atoms/Card";
+import CardHeader from "../atoms/CardHeader";
+import SubmitBar from "../atoms/SubmitBar";
+import RadioButtons from "../atoms/RadioButtons";
+
+const RatingCard = ({ config, onSelect, t }) => {
+ const { register, watch, handleSubmit } = useForm();
+ const [comments, setComments] = useState("");
+ const [rating, setRating] = useState(0);
+
+ const onSubmit = (data) => {
+ data.rating = rating;
+ onSelect(data);
+ };
+
+ const feedback = (e, ref, index) => {
+ setRating(index);
+ };
+
+ const segments = config.inputs?.map((input, index) => {
+ if (input.type === "rate") {
+ return (
+
+ {t(input.label)}
+ {input?.error}
+ feedback(e, ref, i)} />
+
+ );
+ }
+
+ if (input.type === "checkbox") {
+ return (
+
+ {t(input.label)}
+ {input.checkLabels &&
+ input.checkLabels.map((label, index) =>
+ );
+ }
+
+ if (input.type === "radio") {
+ return (
+
+ {t(input.label)}
+
+ );
+ }
+
+ if (input.type === "textarea") {
+ return (
+
+ {t(input.label)}
+
+
+ );
+ }
+ });
+ return (
+
+ );
+};
+
+RatingCard.propTypes = {
+ config: PropTypes.object,
+ onSubmit: PropTypes.func,
+ t: PropTypes.func,
+};
+
+RatingCard.defaultProps = {
+ config: {},
+ onSubmit: undefined,
+ t: (value) => value,
+};
+
+export default RatingCard;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/molecules/RatingCard.stories.js b/frontend/micro-ui-internals/packages/react-components/src/molecules/RatingCard.stories.js
new file mode 100644
index 00000000000..ee8a52c619e
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/molecules/RatingCard.stories.js
@@ -0,0 +1,37 @@
+import React from "react";
+
+import RatingCard from "./RatingCard";
+
+export default {
+ title: "Molecule/RatingCard",
+ component: RatingCard,
+};
+
+const Template = (args) =>
+ {text}
+
+
+
+);
+
+export default RemoveableTag;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/molecules/SearchAction.js b/frontend/micro-ui-internals/packages/react-components/src/molecules/SearchAction.js
new file mode 100644
index 00000000000..76cf79eb347
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/molecules/SearchAction.js
@@ -0,0 +1,10 @@
+import React from "react";
+import { SearchIconSvg } from "../atoms/svgindex";
+
+const SearchAction = ({ text, handleActionClick }) => (
+
+ {text}
+
+);
+
+export default SearchAction;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/molecules/SearchForm.js b/frontend/micro-ui-internals/packages/react-components/src/molecules/SearchForm.js
new file mode 100644
index 00000000000..75b65d74e90
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/molecules/SearchForm.js
@@ -0,0 +1,13 @@
+import React from "react"
+
+export const SearchField = ({children, className}) => {
+ return
+ {children}
+
+}
+
+export const SearchForm = ({ children, onSubmit, handleSubmit }) => {
+ return
+}
diff --git a/frontend/micro-ui-internals/packages/react-components/src/molecules/TextInputCard.js b/frontend/micro-ui-internals/packages/react-components/src/molecules/TextInputCard.js
new file mode 100644
index 00000000000..0e31686b2b8
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/molecules/TextInputCard.js
@@ -0,0 +1,58 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
+
+import Card from "../atoms/Card";
+import CardHeader from "../atoms/CardHeader";
+import CardText from "../atoms/CardText";
+import SubmitBar from "../atoms/SubmitBar";
+import LinkButton from "../atoms/LinkButton";
+import CardSubHeader from "../atoms/CardSubHeader";
+import CardLabel from "../atoms/CardLabel";
+import TextInput from "../atoms/TextInput";
+
+const TextInputCard = ({ header, subHeader, cardText, cardLabel, nextText, skipAndContinueText, skip, onSave, onSkip, textInput }) => {
+ return (
+
+ {subHeader}
+ {header}
+
+ {/* If you know the pincode of the complaint address, provide below. It will
+ help us identify complaint location easily or you can skip and continue */}
+ {cardText}
+
+ {cardLabel}
+
+ );
+};
+
+TextInputCard.propTypes = {
+ header: PropTypes.string,
+ subHeader: PropTypes.string,
+ cardText: PropTypes.string,
+ cardLabel: PropTypes.string,
+ nextText: PropTypes.string,
+ skipAndContinueText: PropTypes.string,
+ skip: PropTypes.bool,
+ onSave: PropTypes.func,
+ onSkip: PropTypes.func,
+ textInput: PropTypes.string,
+};
+
+TextInputCard.defaultProps = {
+ header: "",
+ subHeader: "",
+ cardText: "",
+ cardLabel: "",
+ nextText: "",
+ skipAndContinueText: "",
+ skip: true,
+ onSave: undefined,
+ onSkip: undefined,
+ textInput: "",
+};
+
+export default TextInputCard;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/molecules/TextInputCard.stories.js b/frontend/micro-ui-internals/packages/react-components/src/molecules/TextInputCard.stories.js
new file mode 100644
index 00000000000..4ca37c090f7
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/molecules/TextInputCard.stories.js
@@ -0,0 +1,23 @@
+import React from "react";
+
+import TextInputCard from "./TextInputCard";
+
+export default {
+ title: "Molecule/TextInputCard",
+ component: TextInputCard,
+};
+
+const Template = (args) =>
+ {t(headerCaption)}
+ {t(header)}
+ {t(cardText)}
+ {menu ?
+ );
+};
+
+TypeSelectCard.propTypes = {
+ headerCaption: PropTypes.string,
+ header: PropTypes.string,
+ cardText: PropTypes.string,
+ submitBarLabel: PropTypes.string,
+ selectedOption: PropTypes.any,
+ menu: PropTypes.any,
+ optionsKey: PropTypes.string,
+ selected: PropTypes.func,
+ onSave: PropTypes.func,
+ t: PropTypes.func,
+};
+
+TypeSelectCard.defaultProps = {};
+
+export default TypeSelectCard;
diff --git a/frontend/micro-ui-internals/packages/react-components/src/molecules/TypeSelectCard.stories.js b/frontend/micro-ui-internals/packages/react-components/src/molecules/TypeSelectCard.stories.js
new file mode 100644
index 00000000000..dce755e4c4c
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/molecules/TypeSelectCard.stories.js
@@ -0,0 +1,22 @@
+import React from "react";
+
+import TypeSelectCard from "./TypeSelectCard";
+
+export default {
+ title: "Molecule/TypeSelectCard",
+ component: TypeSelectCard,
+};
+
+const Template = (args) =>
+ {label}
+
+ );
+};
+
+Button.propTypes = {
+ /**
+ * Is this the principal call to action on the page?
+ */
+ primary: PropTypes.bool,
+ /**
+ * What background color to use
+ */
+ backgroundColor: PropTypes.string,
+ /**
+ * How large should the button be?
+ */
+ size: PropTypes.oneOf(["small", "medium", "large"]),
+ /**
+ * Button contents
+ */
+ label: PropTypes.string.isRequired,
+ /**
+ * Optional click handler
+ */
+ onClick: PropTypes.func,
+};
+
+Button.defaultProps = {
+ backgroundColor: null,
+ primary: false,
+ size: "medium",
+ onClick: undefined,
+};
diff --git a/frontend/micro-ui-internals/packages/react-components/src/stories/Button.stories.js b/frontend/micro-ui-internals/packages/react-components/src/stories/Button.stories.js
new file mode 100644
index 00000000000..44d09366da1
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/stories/Button.stories.js
@@ -0,0 +1,36 @@
+import React from "react";
+
+import { Button } from "./Button";
+
+export default {
+ title: "Example/Button",
+ component: Button,
+ argTypes: {
+ backgroundColor: { control: "color" },
+ },
+};
+
+const Template = (args) => Configure
+
+
+
+Learn
+
+
+
+
+ Tip Edit the Markdown in{' '}
+ src/stories/Introduction.stories.mdx
+
diff --git a/frontend/micro-ui-internals/packages/react-components/src/stories/Page.js b/frontend/micro-ui-internals/packages/react-components/src/stories/Page.js
new file mode 100644
index 00000000000..8a72b86033e
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/stories/Page.js
@@ -0,0 +1,64 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { Header } from "./Header";
+import "./page.css";
+
+export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => (
+
+
+
+
+ Pages in Storybook
+
+ We recommend building UIs with a{" "}
+
+ component-driven
+ {" "}
+ process starting with atomic components and ending with pages.
+
+
+ Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some
+ handy patterns for managing page data in Storybook:
+
+
+ Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories
+ Assemble data in the page component from your services. You can mock these services out using Storybook.
+
+
+ Get a guided tutorial on component-driven development at{" "}
+
+ Learn Storybook
+
+ . Read more in the{" "}
+
+ docs
+
+ .
+
+
+
Tip Adjust the width of the canvas with the{" "}
+
+
+
+
+ Viewports addon in the toolbar
+
+
+);
+Page.propTypes = {
+ user: PropTypes.shape({}),
+ onLogin: PropTypes.func.isRequired,
+ onLogout: PropTypes.func.isRequired,
+ onCreateAccount: PropTypes.func.isRequired,
+};
+
+Page.defaultProps = {
+ user: null,
+};
diff --git a/frontend/micro-ui-internals/packages/react-components/src/stories/Page.stories.js b/frontend/micro-ui-internals/packages/react-components/src/stories/Page.stories.js
new file mode 100644
index 00000000000..cdb90c402d5
--- /dev/null
+++ b/frontend/micro-ui-internals/packages/react-components/src/stories/Page.stories.js
@@ -0,0 +1,21 @@
+import React from "react";
+
+import { Page } from "./Page";
+import * as HeaderStories from "./Header.stories";
+
+export default {
+ title: "Example/Page",
+ component: Page,
+};
+
+const Template = (args) => illustration/code-brackets illustration/colors illustration/comments illustration/direction illustration/flow illustration/plugin illustration/repo illustration/stackalt
+
+
+ 
+ 
{
+ window.open("https://www.digit.org/", "_blank").focus();
+ }}
+ />
+