Summary screen1

health/micro-ui/web/micro-ui-internals/example/public/index.html

@@ -18,7 +18,7 @@
  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
 
  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
- <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].70-campaign/dist/index.css" />
+ <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].71-campaign/dist/index.css" />
 
  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
 

health/micro-ui/web/micro-ui-internals/packages/css/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@egovernments/digit-ui-css",
- "version": "1.0.70-campaign",
+ "version": "1.0.71-campaign",
  "license": "MIT",
  "main": "dist/index.css",
  "author": "Jagankumar <[email protected]>",

health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplan.scss

@@ -0,0 +1,99 @@
+.search-tabs-container {
+ display: flex;
+ justify-content: space-between;
+ background-color: #eee;
+
+ .search-tab-head {
+ padding: 10px 35px;
+ font-weight: 700;
+ font-size: 1rem;
+ border: 1px solid #d6d5d4;
+ border-radius: 0.5rem 0.5rem 0 0;
+ }
+
+ .search-tab-head-selected {
+ padding: 10px 35px;
+ color: rgb(244, 119, 56);
+ background-color: #fff;
+ border: 1px solid #f47738;
+ border-radius: 0.5rem 0.5rem 0 0;
+ border-bottom: 4px solid rgb(244, 119, 56);
+ font-weight: 700;
+ font-size: 1.125rem;
+ margin-bottom: -1rem;
+ }
+
+ .search-tab-head-selected:focus {
+ outline: 0;
+ }
+ }
+
+/* Parent container */
+.dm-parent-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.5rem 1rem;
+ background-color: #fff;
+ margin: 0.5rem 0;
+ }
+
+ /* Uploaded file container (left side) */
+ .dm-uploaded-file-container-sub {
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ }
+
+ .dm-icon {
+ margin-right: 0.5rem; /* Space between icon and filename */
+ }
+
+ .dm-file-name {
+ color: #505a5f;
+ font-weight: 700;
+ font-size: 0.875rem; /* Smaller text size */
+ }
+
+ /* Actions container (right side) */
+ .dm-actions-container {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem; /* Space between edit and delete buttons */
+ }
+
+ /* Edit container */
+ .dm-campaign-preview-edit-container {
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ }
+
+ .dm-campaign-preview-edit-container span {
+ /*margin-right: 0.25rem;*/
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: #dc5a32; /* Orange color for the text */
+ }
+
+ /* Button styles */
+ .dm-workbench-download-template-btn {
+ border: 1px solid #dc5a32; /* Orange border */
+ background-color: transparent;
+ color: #dc5a32; /* Orange text */
+ padding: 0.25rem 0.5rem;
+ border-radius: 4px;
+ font-size: 0.875rem; /* Small font size */
+ font-weight: 500;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ /* Hover effect for the button */
+ .dm-hover:hover {
+ background-color: #fbe9e6;
+ border-color: #dc5a32;
+ }
+

health/micro-ui/web/micro-ui-internals/packages/css/src/index.scss

@@ -9,5 +9,10 @@
 @import "tailwindcss/utilities";
 
 @import "./components/microplanning.scss";
+@import "./components/microplan.scss";
+
 @import "./pages/employee/index.scss";
 @import "./pages/employee/campaign.scss";
+@import "./pages/employee/formulaConfig.scss";
+
+

health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/formulaConfig.scss

@@ -0,0 +1,30 @@
+.formula-label-field{
+ display: flex;
+ gap:1.5rem;
+ }
+ .equals-icon {
+ font-family: 'Roboto Condensed'; /* Set font family */
+ font-size: 2.5rem; /* Set font size to 2.5rem */
+ font-weight: 700; /* Set font weight */
+ line-height: 2.93rem; /* Set line height to 2.93rem */
+ text-align: left; /* Align text to the left */
+
+ width: 1.31rem; /* Set width to 1.31rem */
+ height: 2.38rem; /* Set height to 2.38rem */
+ gap: 0; /* Set gap to 0rem */
+ opacity: 100; /* Set opacity to 0 */
+ }
+
+ .formula-label-field > span {
+ width: 20rem;
+ font-size: 1.2rem;
+ margin-right: 2rem;
+ font-weight: bold;
+ }
+
+/* styles.css */
+.header-comp-blue {
+ margin-top: 0; /* Set margin-top to 0 */
+ font-size: 2rem; /* Set font size to 1.5rem */
+ color: #0B4B66 !important; /* Set text color */
+}

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/Module.js

@@ -9,6 +9,17 @@ import CampaignDetails from "./components/CampaignDetails";
 import { ProviderContext } from "./utils/context";
 import BoundarySelection from "./components/BoundarySelection";
 import HypothesisWrapper from "./components/HypothesisWrapper";
+import DataMgmt from "./components/DataMgmt";
+import SummaryMicroplanDetails from "./components/SummaryMicroplanDetails";
+import FormulaConfiguration from "./components/FormulaConfig";
+import UserAccessManagement from "./components/UserAccessManagement";
+import FileComponent from "./components/FileComponent";
+import DataMgmtTable from "./components/DataMgmtTable";
+import HeaderComp from "./components/HeaderComp";
+import ThreeInputComp from "./components/ThreeInputComp";
+import HeaderPlusThreeInput from "./components/HeaderPlusThreeInput";
+import SummaryScreen3 from "./pages/employee/SummaryScreen3";
+
 
 export const MicroplanModule = ({ stateCode, userType, tenants }) => {
  const { path, url } = useRouteMatch();
@@ -43,6 +54,16 @@ const componentsToRegister = {
  MicroplanDetails,
  BoundarySelection,
  HypothesisWrapper,
+ DataMgmt,
+ SummaryMicroplanDetails,
+ FormulaConfiguration,
+ UserAccessManagement,
+ FileComponent,
+ DataMgmtTable,
+ HeaderComp,
+ ThreeInputComp,
+ HeaderPlusThreeInput,
+ SummaryScreen3
 
 };
 

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/DataMgmt.js

@@ -0,0 +1,165 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { EditIcon } from "@egovernments/digit-ui-react-components";
+import { DeleteIconv2 } from "@egovernments/digit-ui-react-components";
+import { FileIcon } from "@egovernments/digit-ui-react-components";
+import { Button } from "@egovernments/digit-ui-react-components";
+import { Card } from "@egovernments/digit-ui-react-components";
+import { CardSubHeader } from "@egovernments/digit-ui-react-components";
+import { InboxSearchComposer } from "@egovernments/digit-ui-react-components";
+import { datamgmtconfig } from "../configs/datamgmtconfigs";
+import { Table } from '@egovernments/digit-ui-react-components';
+
+
+const FileComponent = ({ file, index, handleFileDelete, handleRedirect, setShowPreview }) => {
+
+ const datamgmtConfigs = datamgmtconfig();
+ console.log(datamgmtConfigs);
+ const { t } = useTranslation();
+ const columns = [
+ { Header: 'Vehicle type', accessor: 'vehicleType' },
+ { Header: 'Manufacturer', accessor: 'manufacturer' },
+ { Header: 'Model', accessor: 'model' },
+ { Header: 'Capacity(in Bales)', accessor: 'cap' },
+
+ ];
+
+ const data = [
+ { vehicleType: 'Truck', manufacturer: "Draft", model: 'Household',cap:"70" },
+ { vehicleType: 'Motorcycle', manufacturer: "Draft", model: 'Household',cap:"2" },
+ { vehicleType: 'Motorcycle', manufacturer: "Draft", model: 'Household', cap:"2" },
+ ];
+ return (
+ <div>
+ <Card>
+ {/* First card */}
+ <div className="view-composer-header-section">
+ <CardSubHeader style={{ marginTop: 0, fontSize: "1.5rem", color: " #0B4B66", marginBottom: "0rem" }}>Population</CardSubHeader>
+
+ </div>
+ <div className="dm-parent-container">
+ {/* Left side: File Icon */}
+ <div
+ className="dm-uploaded-file-container-sub"
+ onClick={() => setShowPreview(true)}
+ >
+ <FileIcon className="dm-icon" />
+ <div>Filename.xlsx</div>
+ </div>
+
+ {/* Right side: Edit and Delete Buttons */}
+ <div className="dm-actions-container">
+ {/* Edit Icon and Button */}
+ <div className="dm-campaign-preview-edit-container" onClick={() => handleRedirect(1)}>
+ {/* <span>{t("CAMPAIGN_EDIT")}</span> */}
+ <Button
+ label={t("WBH_EDIT")}
+ variation="secondary"
+ icon={<EditIcon styles={{ height: "1.25rem", width: "2.5rem" }} />}
+ type="button"
+ className="dm-workbench-download-template-btn dm-hover"
+ onButtonClick={(e) => {
+ // e.stopPropagation();
+ // handleFileDelete(file, index);
+ // setShowPreview(false);
+ }}
+ />
+ </div>
+
+ {/* Delete Button */}
+ <Button
+ label={t("WBH_DELETE")}
+ variation="secondary"
+ icon={<DeleteIconv2 styles={{ height: "1.25rem", width: "2.5rem" }} />}
+ type="button"
+ className="dm-workbench-download-template-btn dm-hover"
+ onButtonClick={(e) => {
+ // e.stopPropagation();
+ // handleFileDelete(file, index);
+ // setShowPreview(false);
+ }}
+ />
+ </div>
+ </div>
+ </Card>
+ {/* Second card */}
+ <Card>
+ <div className="view-composer-header-section">
+ <CardSubHeader style={{ marginTop: 0, fontSize: "1.5rem", color: " #0B4B66", marginBottom: "0rem" }}>Facilities</CardSubHeader>
+
+ </div>
+ <div className="dm-parent-container">
+ {/* Left side: File Icon */}
+ <div
+ className="dm-uploaded-file-container-sub"
+ onClick={() => setShowPreview(true)}
+ >
+ <FileIcon className="dm-icon" />
+ <div>File1name.xlsx</div>
+ </div>
+
+ {/* Right side: Edit and Delete Buttons */}
+ <div className="dm-actions-container">
+ {/* Edit Icon and Button */}
+ <div className="dm-campaign-preview-edit-container" onClick={() => handleRedirect(1)}>
+ {/* <span>{t("CAMPAIGN_EDIT")}</span> */}
+ <Button
+ label={t("WBH_EDIT")}
+ variation="secondary"
+ icon={<EditIcon styles={{ height: "1.25rem", width: "2.5rem" }} />}
+ type="button"
+ className="dm-workbench-download-template-btn dm-hover"
+ onButtonClick={(e) => {
+ // e.stopPropagation();
+ // handleFileDelete(file, index);
+ // setShowPreview(false);
+ }}
+ />
+ </div>
+
+ {/* Delete Button */}
+ <Button
+ label={t("WBH_DELETE")}
+ variation="secondary"
+ icon={<DeleteIconv2 styles={{ height: "1.25rem", width: "2.5rem" }} />}
+ type="button"
+ className="dm-workbench-download-template-btn dm-hover"
+ onButtonClick={(e) => {
+ // e.stopPropagation();
+ // handleFileDelete(file, index);
+ // setShowPreview(false);
+ }}
+ />
+ </div>
+ </div>
+ </Card>
+ <Card>
+ <div className="view-composer-header-section">
+ <CardSubHeader style={{ marginTop: 0, fontSize: "1.5rem", color: " #0B4B66", marginBottom: "0rem" }}>Vehicles</CardSubHeader>
+ </div>
+ <Table
+ columns={columns} data={data}
+ getCellProps={(cellInfo) => {
+ return {
+ style: {
+ padding: "20px 18px",
+ fontSize: "16px",
+ whiteSpace: "normal",
+ },
+ };
+ }}
+ t={t}
+ />
+
+
+
+
+
+
+
+ </Card>
+ </div>
+ );
+};
+
+export default FileComponent;