(
+
+ )}
+ value={formData.autocomplete || ""}
+ onChange={(e, newValue) =>
+ setFormData({ ...formData, autocomplete: newValue })
+ }
+ fullWidth
+ className="mt-2"
+ />
+ );
+ default:
+ return null;
+ }
+ };
+
+ return (
+ <>
+
+ {/* Your header content here */}
+
+
+
+
+ Token Registry
+
+
+ ,
+ }}
+ className="data-grid"
+ />
+
+
+
+
+
+
+
+
+ Add Item
+
+
+
+
+
+
+
+ );
+}
+
+export default CodeExtension;
diff --git a/src/components/Dashboard/Dynamictable.js b/src/components/Dashboard/Dynamictable.js
index d460466..587cecc 100644
--- a/src/components/Dashboard/Dynamictable.js
+++ b/src/components/Dashboard/Dynamictable.js
@@ -1,161 +1,161 @@
-import React, { useState, useEffect } from "react";
-import axios from "axios";
-import { useLocation, useNavigate } from "react-router-dom";
-import {
- Button,
- IconButton,
- Table,
- TableBody,
- TableCell,
- TableContainer,
- TableHead,
- TableRow,
- Paper,
- Typography,
- Box,
-} from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
-import BuildIcon from "@mui/icons-material/Build";
-import AddIcon from "@mui/icons-material/Add";
-
-// Define the API base URL using the environment variable
-const api = process.env.REACT_APP_API_BASE_URL;
-
-const DynamicTable = () => {
- const [forms, setForms] = useState([]);
- const location = useLocation();
- const navigate = useNavigate();
-
- useEffect(() => {
- if (location.state && location.state.formData) {
- setForms((prevForms) => [...prevForms, location.state.formData]);
- } else {
- fetchForms();
- }
- }, [location.state]);
-
- const fetchForms = async () => {
- const token = localStorage.getItem("token"); // Get token from local storage
- try {
- const response = await axios.get(`${api}/api/form_setup`, {
- headers: {
- Authorization: `Bearer ${token}`,
- },
- });
- if (Array.isArray(response.data)) {
- setForms(response.data);
- } else {
- console.error("Unexpected response format:", response.data);
- setForms([]);
- }
- } catch (error) {
- console.error("Error fetching data:", error);
- setForms([]);
- }
- };
-
- const handleDelete = async (id) => {
- const token = localStorage.getItem("token"); // Get token from local storage
- try {
- await axios.delete(`${api}/api/form_setup/${id}`, {
- headers: {
- Authorization: `Bearer ${token}`,
- },
- });
- fetchForms();
- } catch (error) {
- console.error("Error deleting form:", error);
- }
- };
-
- const handleBuild = async (id) => {
- const token = localStorage.getItem("token"); // Get token from local storage
- try {
- await axios.post(
- `${api}/api/dynamic_form_build`,
- { id },
- {
- headers: {
- Authorization: `Bearer ${token}`,
- },
- }
- );
- } catch (error) {
- console.error("Error building form:", error);
- }
- };
-
- const handleAdd = () => {
- navigate("/form");
- };
-
- return (
-
-
- Dynamic Form
-
- }
- onClick={handleAdd}
- className="mb-5 bg-blue-500 hover:bg-blue-600"
- >
- Add
-
-
-
-
-
- Go To
- Form Name
- Form Description
- Related To
- Page Event
- Button Caption
- Go To Form
- Action
-
-
-
- {forms.map((form, index) => (
-
-
- }
- onClick={() => handleBuild(form.id)}
- className="border-blue-500 text-blue-500 hover:bg-blue-100"
- >
- Build
-
-
- {form.formName}
- {form.formDescription}
- {form.relatedTo}
- {form.pageEvent}
- {form.buttonCaption}
- {form.goToForm}
-
- handleDelete(form.id)}
- className="text-red-500 hover:text-red-700"
- >
-
-
-
-
- ))}
-
-
-
-
- );
-};
-
-export default DynamicTable;
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { useLocation, useNavigate } from "react-router-dom";
+import {
+ Button,
+ IconButton,
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+ Paper,
+ Typography,
+ Box,
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import BuildIcon from "@mui/icons-material/Build";
+import AddIcon from "@mui/icons-material/Add";
+
+// Define the API base URL using the environment variable
+const api = process.env.REACT_APP_API_BASE_URL;
+
+const DynamicTable = () => {
+ const [forms, setForms] = useState([]);
+ const location = useLocation();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (location.state && location.state.formData) {
+ setForms((prevForms) => [...prevForms, location.state.formData]);
+ } else {
+ fetchForms();
+ }
+ }, [location.state]);
+
+ const fetchForms = async () => {
+ const token = localStorage.getItem("authToken"); // Get token from local storage
+ try {
+ const response = await axios.get(`${api}/api/form_setup`, {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ });
+ if (Array.isArray(response.data)) {
+ setForms(response.data);
+ } else {
+ console.error("Unexpected response format:", response.data);
+ setForms([]);
+ }
+ } catch (error) {
+ console.error("Error fetching data:", error);
+ setForms([]);
+ }
+ };
+
+ const handleDelete = async (id) => {
+ const token = localStorage.getItem("authToken"); // Get token from local storage
+ try {
+ await axios.delete(`${api}/api/form_setup/${id}`, {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ });
+ fetchForms();
+ } catch (error) {
+ console.error("Error deleting form:", error);
+ }
+ };
+
+ const handleBuild = async (id) => {
+ const token = localStorage.getItem("authToken"); // Get token from local storage
+ try {
+ await axios.post(
+ `${api}/api/dynamic_form_build`,
+ { id },
+ {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ }
+ );
+ } catch (error) {
+ console.error("Error building form:", error);
+ }
+ };
+
+ const handleAdd = () => {
+ navigate("/form");
+ };
+
+ return (
+
+
+ Dynamic Form
+
+ }
+ onClick={handleAdd}
+ className="mb-5 bg-blue-500 hover:bg-blue-600"
+ >
+ Add
+
+
+
+
+
+ Go To
+ Form Name
+ Form Description
+ Related To
+ Page Event
+ Button Caption
+ Go To Form
+ Action
+
+
+
+ {forms.map((form, index) => (
+
+
+ }
+ onClick={() => handleBuild(form.id)}
+ className="border-blue-500 text-blue-500 hover:bg-blue-100"
+ >
+ Build
+
+
+ {form.formName}
+ {form.formDescription}
+ {form.relatedTo}
+ {form.pageEvent}
+ {form.buttonCaption}
+ {form.goToForm}
+
+ handleDelete(form.id)}
+ className="text-red-500 hover:text-red-700"
+ >
+
+
+
+
+ ))}
+
+
+
+
+ );
+};
+
+export default DynamicTable;
diff --git a/src/components/Dashboard/Extension.js b/src/components/Dashboard/Extension.js
index 0a54001..03c45c1 100644
--- a/src/components/Dashboard/Extension.js
+++ b/src/components/Dashboard/Extension.js
@@ -1,93 +1,93 @@
-import React, { useState } from 'react';
-import { TextField, Button, Typography, Select, MenuItem } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
-
-const Extension = ({ onSubmit }) => {
- const [formData, setFormData] = useState({
- type: '',
- fieldName: '',
- mapping: '',
- dataType: ''
- });
-
- const navigate = useNavigate();
-
- const handleChange = (e) => {
- const { name, value } = e.target;
- setFormData({ ...formData, [name]: value });
- };
-
- const handleSubmit = (e) => {
- e.preventDefault();
- if (typeof onSubmit === 'function') {
- onSubmit(formData.dataType);
- }
- // Navigate to CodeExtension page with the form data
- navigate('/Codeextension', { state: { formData } });
- };
-
- return (
-
- );
-};
-
-export default Extension;
+import React, { useState } from 'react';
+import { TextField, Button, Typography, Select, MenuItem } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+const Extension = ({ onSubmit }) => {
+ const [formData, setFormData] = useState({
+ type: '',
+ fieldName: '',
+ mapping: '',
+ dataType: ''
+ });
+
+ const navigate = useNavigate();
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setFormData({ ...formData, [name]: value });
+ };
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ if (typeof onSubmit === 'function') {
+ onSubmit(formData.dataType);
+ }
+ // Navigate to CodeExtension page with the form data
+ navigate('/CodeExtension', { state: { formData } });
+ };
+
+ return (
+
+ );
+};
+
+export default Extension;
diff --git a/src/components/Dashboard/Form.js b/src/components/Dashboard/Form.js
index 5eb195d..9f3cf4e 100644
--- a/src/components/Dashboard/Form.js
+++ b/src/components/Dashboard/Form.js
@@ -1,217 +1,217 @@
-import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { v4 as uuidv4 } from "uuid";
-
-function DynamicForm() {
- const [components, setComponents] = useState([
- {
- id: uuidv4(),
- label: "",
- type: "",
- mapping: "",
- readonly: false,
- values: "",
- },
- ]);
- const [formDetails, setFormDetails] = useState({
- formName: "",
- formDescription: "",
- relatedTo: "",
- pageEvent: "",
- buttonName: "",
- });
- const navigate = useNavigate();
-
- const handleFormChange = (e) => {
- const { name, value } = e.target;
- setFormDetails({ ...formDetails, [name]: value });
- };
-
- const handleComponentChange = (index, field, value) => {
- const updatedComponents = components.map((component, i) =>
- i === index ? { ...component, [field]: value } : component
- );
- setComponents(updatedComponents);
- };
-
- const addComponent = () => {
- setComponents([
- ...components,
- {
- id: uuidv4(),
- label: "",
- type: "",
- mapping: "",
- readonly: false,
- values: "",
- },
- ]);
- };
-
- const removeComponent = (index) => {
- setComponents(components.filter((_, i) => i !== index));
- };
-
- const handleSubmit = (e) => {
- e.preventDefault();
- const formData = { ...formDetails, components };
- navigate("/Dynamictable", { state: { formData } }); // Navigate to DynamicTable with formData
- };
-
- return (
-
-
- Dynamic Form Setup
-
-
-
+
+ Dynamic Form Setup
+
+
+
-
INDEX {index}
-
{index}.
-
-
Welcome to the Dashboard!
-
-
-
-
-
-
- {/* Add BarChart component */}
-
-
-
+
+
Welcome Back!
+
Last updated: {new Date().toLocaleDateString()}
+
+
+ {/* Stats Grid */}
+
+
+
+
+
+
+
+ {/* Recent Activity */}
+
+
Recent Activity
+
+ {[1, 2, 3].map((item) => (
+
+
+
+
System update completed
+
2 hours ago
+
+
+ ))}
+
+
+
+ {/* Quick Actions */}
+
+
+
Quick Actions
+
+
+
+
+
+
+
+
+
System Status
+
+
+ CPU Usage
+ 45%
+
+
+
+ Memory Usage
+ 62%
+
+
+
+
+
+
-
handleThreeDotsClick(row.menuItemId)}>
-
-
- {selectedMenuItem === row.menuItemId && (
-
-
-
-
- )}
-
-
-
- (
-
- ),
- }}
- pageSize={10}
- onGridReady={(gridApi) => {
- apiRef.current = gridApi;
- }}
- className="bg-gray-400"
- />
-
- {/* Your modals and other components */}
- {isModalOpen && (
-
-
-
Add New Menu Item
- {/* Modal content here */}
-
-
-
- )}
- {isUpdateModalOpen && (
-
-
-
Update Menu Item
- {/* Modal content here */}
-
-
-
- )}
-
+
handleThreeDotsClick(row.menuItemId)}>
+ {/* Using react-icons */}
+
+ {selectedMenuItem === row.menuItemId && (
+
+
+
+
+ )}
+
+
+
+ (
+
+ ),
+ }}
+ pageSize={10}
+ onGridReady={(gridApi) => {
+ apiRef.current = gridApi;
+ }}
+ className="bg-gray-400"
+ />
+
+ {/* Your modals and other components */}
+ {isModalOpen && (
+
+
+
Add New Menu Item
+ {/* Modal content here */}
+
+
+
+ )}
+ {isUpdateModalOpen && (
+
+
+
Update Menu Item
+ {/* Modal content here */}
+
+
+
+ )}
+
-
handleThreeDotsClick(row.menuItemId)}
- >
-
-
- {selectedMenuItem === row.menuItemId && (
-
- {/* Implement your actions buttons here */}
-
- )}
-
-
- Menu Maintenance
-
-
- (
- setIsModalOpen(true)}
- />
- ),
- }}
- pageSize={10}
- onGridReady={(gridApi) => {
- apiRef.current = gridApi;
- }}
- sx={{
- "& .MuiDataGrid-columnHeaders": {
- backgroundColor: "rgba(107, 114, 128, 0.5)", // Tailwind CSS bg-gray-400 with opacity
- },
- "& .MuiDataGrid-columnHeaderTitle": {
- fontWeight: "bold",
- },
- }}
- className=" border border-gray-200 shadow-lg rounded-lg bg-gray-400"
- />
-
- {/* Your modals and other components */}
- {isModalOpen && (
-
-
-
Modal Title
- {/* Modal content here */}
-
-
-
- )}
-
+
handleThreeDotsClick(row.menuItemId)}
+ >
+
+
+ {selectedMenuItem === row.menuItemId && (
+
+ {/* Implement your actions buttons here */}
+
+ )}
+
+
+ Menu Maintenance
+
+
+ (
+ setIsModalOpen(true)}
+ />
+ ),
+ }}
+ pageSize={10}
+ onGridReady={(gridApi) => {
+ apiRef.current = gridApi;
+ }}
+ sx={{
+ "& .MuiDataGrid-columnHeaders": {
+ backgroundColor: "rgba(107, 114, 128, 0.5)", // Tailwind CSS bg-gray-400 with opacity
+ },
+ "& .MuiDataGrid-columnHeaderTitle": {
+ fontWeight: "bold",
+ },
+ }}
+ className="border border-gray-200 shadow-lg rounded-lg bg-gray-400"
+ />
+
+ {/* Your modals and other components */}
+ {isModalOpen && (
+
+
+
Modal Title
+ {/* Modal content here */}
+
+
+
+ )}
+
-
{report.reportName}
-
{report.description}
-
- Active: {report.active ? "Yes" : "No"}
-
-
Is SQL: {report.isSql ? "Yes" : "No"}
-
-
-
Reports
-
- {loading ? (
-
Loading...
- ) : (
-
- {reports.map((report) => (
-
- ))}
-
- )}
-
+
{report.reportName}
+
{report.description}
+
+ Active: {report.active ? "Yes" : "No"}
+
+
Is SQL: {report.isSql ? "Yes" : "No"}
+
+
+
Reports
+
+ {loading ? (
+
Loading...
+ ) : (
+
+ {reports.map((report) => (
+
+ ))}
+
+ )}
+
-
-
{title}
-
{content}
-
-
- handleCardClick('User Maintance')} />
- handleCardClick('User Group Maintance')} />
- handleCardClick('Menu Maintance')} />
- handleCardClick('Menu Access Control')} />
- handleCardClick('System Parameters')} />
- handleCardClick('Access Type')} />
- handleCardClick('Api Registery')} />
- handleCardClick('Token Registery')} />
- handleCardClick('Code Extension')} />
- handleCardClick('Dynamic Table')} />
-
-
+
+
{title}
+
{content}
+
+
+ handleCardClick('User Maintance')} />
+ handleCardClick('User Group Maintance')} />
+ handleCardClick('Menu Maintance')} />
+ handleCardClick('Menu Access Control')} />
+ handleCardClick('System Parameters')} />
+ {/* handleCardClick('Access Type')} /> */}
+ handleCardClick('Api Registery')} />
+ handleCardClick('Token Registery')} />
+ handleCardClick('Code Extension')} />
+ handleCardClick('Dynamic Table')} />
+
+
- System Parameters
-
-
-
- );
-};
-
-export default SystemParameterForm;
+import React, { useState } from "react";
+import { Button, Container, Grid, TextField } from "@mui/material";
+
+const SystemParameterForm = () => {
+ const [formData, setFormData] = useState({
+ schedulerTimer: "",
+ leaseTaxCode: "",
+ vesselConfirmationProcessLimit: "",
+ rowToDisplay: "",
+ linkToDisplay: "",
+ rowToAdd: "",
+ lovRowToDisplay: "",
+ lovLinkToDisplay: "",
+ oldServerName: "",
+ oldBase: "",
+ oldAdminUser: "",
+ oldServerPort: "",
+ userDefaultGroup: "",
+ defaultDepartment: "",
+ defaultPosition: "",
+ singleCharge: "",
+ firstDayOfWeek: "",
+ hourPerShift: "",
+ cnBillingFrequency: "",
+ billingDepartmentCode: "",
+ basePriceList: "",
+ nonContainerServiceOrderAutoApprovalDeptCode: "",
+ ediMAESchedulerOnOff: "",
+ ediSchedulerOnOff: "",
+ companyDisplayName: "",
+ });
+
+ const handleInputChange = (event) => {
+ const { name, value } = event.target;
+ setFormData((prevState) => ({
+ ...prevState,
+ [name]: value,
+ }));
+ };
+
+ const handleFileChange = (event) => {
+ setFormData((prevState) => ({
+ ...prevState,
+ logo: event.target.files[0],
+ }));
+ };
+
+ const handleSubmit = (event) => {
+ event.preventDefault();
+ alert("Form submitted successfully!");
+ console.log("Form Data:", formData);
+ };
+
+ const handleClear = () => {
+ setFormData({
+ schedulerTimer: "",
+ leaseTaxCode: "",
+ vesselConfirmationProcessLimit: "",
+ rowToDisplay: "",
+ linkToDisplay: "",
+ rowToAdd: "",
+ lovRowToDisplay: "",
+ lovLinkToDisplay: "",
+ oldServerName: "",
+ oldBase: "",
+ oldAdminUser: "",
+ oldServerPort: "",
+ userDefaultGroup: "",
+ defaultDepartment: "",
+ defaultPosition: "",
+ singleCharge: "",
+ firstDayOfWeek: "",
+ hourPerShift: "",
+ cnBillingFrequency: "",
+ billingDepartmentCode: "",
+ basePriceList: "",
+ nonContainerServiceOrderAutoApprovalDeptCode: "",
+ ediMAESchedulerOnOff: "",
+ ediSchedulerOnOff: "",
+ companyDisplayName: "",
+ });
+ };
+
+ return (
+
+
+ System Parameters
+
+
+
+ );
+};
+
+export default SystemParameterForm;
diff --git a/src/components/Dashboard/Test/Apitest.js b/src/components/Dashboard/Test/Apitest.js
deleted file mode 100644
index f72eb19..0000000
--- a/src/components/Dashboard/Test/Apitest.js
+++ /dev/null
@@ -1,427 +0,0 @@
-import React, { useEffect, useState } from "react";
-import axios from "axios";
-import {
- Button,
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- Snackbar,
- Alert,
- Typography,
- TextField,
- Table,
- TableBody,
- TableCell,
- TableContainer,
- TableHead,
- TableRow,
- TablePagination,
- Paper,
- IconButton,
- InputAdornment
-} from "@mui/material";
-import { makeStyles } from '@mui/styles';
-import SearchIcon from '@mui/icons-material/Search';
-
-const API_URL = "http://34.198.218.30:30179/entityBuilder/Gaurav_testing";
-const token = localStorage.getItem("authToken");
-// Custom styles using makeStyles
-const useStyles = makeStyles((theme) => ({
- tableHeader: {
- backgroundColor: "#000000",
- color: "#ffffff",
- },
- searchContainer: {
- display: 'flex',
- alignItems: 'center',
- marginBottom: theme.spacing(2),
- },
- searchInput: {
- marginRight: theme.spacing(2),
- flex: 1,
- },
- tableContainer: {
- marginTop: theme.spacing(2),
- },
- dialogContent: {
- display: 'flex',
- flexDirection: 'column',
- gap: theme.spacing(2),
- },
- formControl: {
- marginBottom: theme.spacing(2),
- },
- button: {
- margin: theme.spacing(1),
- },
-}));
-
-const EntityTable = () => {
- const classes = useStyles();
- const [data, setData] = useState([]);
- const [filteredData, setFilteredData] = useState([]);
- const [newEntity, setNewEntity] = useState({
- name: "",
- email: "",
- mobno: "",
- address: "",
- pincode: "",
- });
- const [editEntity, setEditEntity] = useState(null);
- const [showEditModal, setShowEditModal] = useState(false);
- const [showAddModal, setShowAddModal] = useState(false);
- const [showDeleteModal, setShowDeleteModal] = useState(false);
- const [deleteEntityId, setDeleteEntityId] = useState(null);
- const [currentPage, setCurrentPage] = useState(0);
- const [itemsPerPage] = useState(5); // Adjust this value as needed
- const [searchQuery, setSearchQuery] = useState("");
- const [openSnackbar, setOpenSnackbar] = useState(false);
- const [snackbarMessage, setSnackbarMessage] = useState("");
- const [snackbarSeverity, setSnackbarSeverity] = useState("success");
-
- const handlePageChange = (event, newPage) => {
- setCurrentPage(newPage);
- };
-
- useEffect(() => {
- fetchData();
- }, []);
-
- useEffect(() => {
- handleSearch();
- }, [searchQuery, data]);
-
- const fetchData = async () => {
- try {
- const response = await axios.get(API_URL, {
- headers: { Authorization: `Bearer ${token}` },
- });
- setData(response.data);
- } catch (error) {
- console.error("Error fetching data:", error);
- }
- };
-
- const handleDelete = async () => {
- try {
- await axios.delete(`${API_URL}/${deleteEntityId}`, {
- headers: { Authorization: `Bearer ${token}` },
- });
- fetchData();
- setSnackbarMessage("Successfully deleted!");
- setSnackbarSeverity("success");
- setOpenSnackbar(true);
- setShowDeleteModal(false);
- } catch (error) {
- console.error("Error deleting data:", error);
- setSnackbarMessage("Failed to delete!");
- setSnackbarSeverity("error");
- setOpenSnackbar(true);
- }
- };
-
- const handleAdd = async () => {
- try {
- await axios.post(API_URL, newEntity, {
- headers: { Authorization: `Bearer ${token}` },
- });
- fetchData();
- setNewEntity({
- name: "",
- email: "",
- mobno: "",
- address: "",
- pincode: "",
- });
- setShowAddModal(false);
- setSnackbarMessage("Successfully added!");
- setSnackbarSeverity("success");
- setOpenSnackbar(true);
- } catch (error) {
- console.error("Error adding data:", error);
- setSnackbarMessage("Failed to add!");
- setSnackbarSeverity("error");
- setOpenSnackbar(true);
- }
- };
-
- const handleChange = (e) => {
- const { name, value } = e.target;
- setNewEntity({ ...newEntity, [name]: value });
- };
-
- const handleEditChange = (e) => {
- const { name, value } = e.target;
- setEditEntity({ ...editEntity, [name]: value });
- };
-
- const handleEdit = (entity) => {
- setEditEntity(entity);
- setShowEditModal(true);
- };
-
- const handleUpdate = async () => {
- try {
- await axios.put(`${API_URL}/${editEntity.id}`, editEntity, {
- headers: { Authorization: `Bearer ${token}` },
- });
- fetchData();
- setShowEditModal(false);
- setSnackbarMessage("Successfully updated!");
- setSnackbarSeverity("success");
- setOpenSnackbar(true);
- } catch (error) {
- console.error("Error updating data:", error);
- setSnackbarMessage("Failed to update!");
- setSnackbarSeverity("error");
- setOpenSnackbar(true);
- }
- };
-
- const handleSearch = () => {
- const filtered = data.filter(
- (entity) =>
- entity.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
- entity.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
- entity.mobno.toLowerCase().includes(searchQuery.toLowerCase()) ||
- entity.address.toLowerCase().includes(searchQuery.toLowerCase()) ||
- entity.pincode.toLowerCase().includes(searchQuery.toLowerCase())
- );
- setFilteredData(filtered);
- };
-
- return (
-
-
- Entity Table
-
-
-
- setSearchQuery(e.target.value)}
- InputProps={{
- endAdornment: (
-
-
-
-
-
- ),
- }}
- />
-
-
-
-
-
- ID
- Name
- Email
- Mobile No
- Address
- Pincode
- Actions
-
-
-
- {filteredData.slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage).map((entity) => (
-
- {entity.id}
- {entity.name}
- {entity.email}
- {entity.mobno}
- {entity.address}
- {entity.pincode}
-
-
-
-
-
- ))}
-
-
-
-
-
-
-
-
setOpenSnackbar(false)}
- >
- setOpenSnackbar(false)} severity={snackbarSeverity}>
- {snackbarMessage}
-
-
-
-
handleThreeDotsClick(row.id)}
- >
-
-
- {selectedMenuItem === row.id && (
-
-
-
-
- )}
-
-
-
- Token Registry
-
-
- (
- setIsModalOpen(true)}
- />
- ),
- }}
- pageSize={10}
- onGridReady={(gridApi) => {
- apiRef.current = gridApi;
- }}
- className="data-grid"
- />
-
-
- {/* Add your modals and other components here */}
-
+
handleThreeDotsClick(row.id)}
+ >
+ {/* Updated icon from react-icons */}
+
+ {selectedMenuItem === row.id && (
+
+
+
+
+ )}
+
+
+
+ Token Registry
+
+
+ (
+ setIsModalOpen(true)}
+ />
+ ),
+ }}
+ pageSize={10}
+ onGridReady={(gridApi) => {
+ apiRef.current = gridApi;
+ }}
+ className="data-grid"
+ />
+
+
+ {/* Add your modals and other components here */}
+
-
-
-
User ID: {user.userId}
-
Username: {user.username}
-
Full Name: {user.fullName}
-
-
Email: {user.email}
-
-
Mob Number: {user.mobno}
-
User grp name: {user.usergrpname}
-
-
-
handleChange('userId', e.target.value)}
- />
-
-
-
handleChange('username', e.target.value)}
- />
-
-
-
handleChange('email', e.target.value)}
- />
-
-
-
handleChange('fullName', e.target.value)}
- />
-
-
handleChange('mobno', e.target.value)}
- />
-
-
handleChange('usergrpname', e.target.value)}
- />
-
-
-
-
+
+
+
User ID: {user.userId}
+
Username: {user.username}
+
Full Name: {user.fullName}
+
+
Email: {user.email}
+
+
Mob Number: {user.mobno}
+
User grp name: {user.usergrpname}
+
+
+
handleChange('userId', e.target.value)}
+ />
+
+
+
handleChange('username', e.target.value)}
+ />
+
+
+
handleChange('email', e.target.value)}
+ />
+
+
+
handleChange('fullName', e.target.value)}
+ />
+
+
handleChange('mobno', e.target.value)}
+ />
+
+
handleChange('usergrpname', e.target.value)}
+ />
+
+
+
+
-
-
-
-
- setNewUserData((prevData) => ({ ...prevData, groupName: e.target.value }))}
- />
-
-
- setNewUserData((prevData) => ({ ...prevData, groupDesc: e.target.value }))}
- />
-
-
- setNewUserData((prevData) => ({ ...prevData, createBy: e.target.value }))}
- />
-
-
- setNewUserData((prevData) => ({ ...prevData, createDate: e.target.value }))}
- />
-
-
- setNewUserData((prevData) => ({ ...prevData, updateDate: e.target.value }))}
- />
-
-
- setNewUserData((prevData) => ({ ...prevData, updateBy: e.target.value }))}
- />
-
-
- setNewUserData((prevData) => ({ ...prevData, status: e.target.value }))}
- />
-
-
- setNewUserData((prevData) => ({ ...prevData, groupLevel: e.target.value }))}
- />
-
-
- setNewUserData((prevData) => ({ ...prevData, createDateFormatted: e.target.value }))}
- />
-
-
- setNewUserData((prevData) => ({ ...prevData, updateDateFormatted: e.target.value }))}
- />
-
-
-
-
-
+
+
+
+
+ setNewUserData((prevData) => ({ ...prevData, groupName: e.target.value }))}
+ />
+
+
+ setNewUserData((prevData) => ({ ...prevData, groupDesc: e.target.value }))}
+ />
+
+
+ setNewUserData((prevData) => ({ ...prevData, createBy: e.target.value }))}
+ />
+
+
+ setNewUserData((prevData) => ({ ...prevData, createDate: e.target.value }))}
+ />
+
+
+ setNewUserData((prevData) => ({ ...prevData, updateDate: e.target.value }))}
+ />
+
+
+ setNewUserData((prevData) => ({ ...prevData, updateBy: e.target.value }))}
+ />
+
+
+ setNewUserData((prevData) => ({ ...prevData, status: e.target.value }))}
+ />
+
+
+ setNewUserData((prevData) => ({ ...prevData, groupLevel: e.target.value }))}
+ />
+
+
+ setNewUserData((prevData) => ({ ...prevData, createDateFormatted: e.target.value }))}
+ />
+
+
+ setNewUserData((prevData) => ({ ...prevData, updateDateFormatted: e.target.value }))}
+ />
+
+
+
+
+
-
handleThreeDotsClick(row.usrGrp)}
- >
-
-
- {selectedUserGroup === row.usrGrp && (
-
-
- {/* You can include other actions here */}
-
- )}
-
-
- User Group Maintenance
-
-
-
- (
-
- ),
- }}
- pageSize={10}
- onGridReady={(gridApi) => {
- apiRef.current = gridApi;
- }}
- className="bg-gray-400"
- />
-
- {/* Your modals and other components */}
- {isModalOpen && (
-
-
-
Modal Title
- {/* Modal content here */}
-
-
-
- )}
-
+
handleThreeDotsClick(row.usrGrp)}
+ >
+
+
+ {selectedUserGroup === row.usrGrp && (
+
+
+ {/* You can include other actions here */}
+
+ )}
+
+
+ User Group Maintenance
+
+
+
+ (
+
+ ),
+ }}
+ pageSize={10}
+ onGridReady={(gridApi) => {
+ apiRef.current = gridApi;
+ }}
+ className="bg-gray-400"
+ />
+
+ {/* Your modals and other components */}
+ {isModalOpen && (
+
+
+
Modal Title
+ {/* Modal content here */}
+
+
+
+ )}
+
-
handleThreeDotsClick(row.userId)}
- >
-
-
- {selectedUser === row.userId && (
-
-
-
-
- )}
-
- User Maintenance
-
- (
-
- ),
- }}
- pageSize={10}
- onGridReady={(gridApi) => {
- apiRef.current = gridApi;
- }}
- />
- {isModalOpen && (
- setIsModalOpen(false)}
- />
- )}
- {isUpdateModalOpen && (
- setIsUpdateModalOpen(false)}
- />
- )}
-
- );
-}
-
-export default UserMaintance;
+import React, { useState, useEffect, useRef } from "react";
+import { Box, Button } from "@mui/material";
+import { DataGrid, GridToolbarContainer } from "@mui/x-data-grid";
+import { BsThreeDotsVertical } from "react-icons/bs";
+import Modal from "./Modal"; // Import your Modal component
+import UpdateModal from "./UpdateModal"; // Import your UpdateModal component
+import "./UserMaintance.css";
+
+const api = process.env.REACT_APP_API_BASE_URL;
+
+function CustomToolbar({ apiRef, handleThreeDotsClick, handleModal }) {
+ const handleGoToPage1 = () => {
+ if (apiRef.current) {
+ apiRef.current.setPage(1);
+ }
+ };
+
+ return (
+
+
+
+
+ );
+}
+
+function UserMaintance() {
+ const [users, setUsers] = useState([]);
+ const [selectedUser, setSelectedUser] = useState(null);
+ const [selectedUserForUpdate, setSelectedUserForUpdate] = useState(null);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false);
+ const [newUser, setNewUser] = useState({
+ userId: "",
+ username: "",
+ fullName: "",
+ email: "",
+
+ usrGrpName: "",
+ });
+ const apiRef = useRef(null);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ const token = localStorage.getItem("token");
+ console.log("object", token);
+ try {
+ const response = await fetch(`${api}/api/getAllAppUser`, {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ });
+ const data = await response.json();
+ const usersWithIds = data.map((user, index) => ({
+ ...user,
+ id: index + 1,
+ }));
+ setUsers(usersWithIds);
+ } catch (error) {
+ console.error("Error fetching data:", error);
+ }
+ };
+
+ fetchData();
+ }, []);
+
+ const handleThreeDotsClick = (userId) => {
+ setSelectedUser(userId === selectedUser ? null : userId);
+ };
+
+ const handleDelete = (userId) => {
+ console.log("Delete user with ID:", userId);
+ };
+
+ const handleUpdate = (user) => {
+ setSelectedUserForUpdate(user);
+ setIsUpdateModalOpen(true);
+ };
+
+ const handleModal = () => {
+ setIsModalOpen(true);
+ };
+
+ const handleModalSave = (data) => {
+ setUsers((prevUsers) => [
+ ...prevUsers,
+ { ...data, id: prevUsers.length + 1 },
+ ]);
+ setIsModalOpen(false);
+ };
+
+ const handleUpdateSave = () => {
+ setIsUpdateModalOpen(false);
+ };
+
+ const columns = [
+ { field: "userId", headerName: "User ID", width: 200 },
+ { field: "username", headerName: "Username", width: 200 },
+ { field: "fullName", headerName: "Full Name", width: 200 },
+ { field: "email", headerName: "Email", width: 200 },
+ { field: "usrGrpName", headerName: "User Group", width: 150 },
+ {
+ field: "actions",
+ headerName: "Actions",
+ width: 100,
+ renderCell: ({ row }) => (
+
+
handleThreeDotsClick(row.userId)}
+ >
+
+
+ {selectedUser === row.userId && (
+
+
+
+
+ )}
+
+ User Maintenance
+
+ (
+
+ ),
+ }}
+ pageSize={10}
+ onGridReady={(gridApi) => {
+ apiRef.current = gridApi;
+ }}
+ />
+ {isModalOpen && (
+ setIsModalOpen(false)}
+ />
+ )}
+ {isUpdateModalOpen && (
+ setIsUpdateModalOpen(false)}
+ />
+ )}
+
+ );
+}
+
+export default UserMaintance;
diff --git a/src/components/Dashboard/dashboard.css b/src/components/Dashboard/dashboard.css
index b1b6834..33fc210 100644
--- a/src/components/Dashboard/dashboard.css
+++ b/src/components/Dashboard/dashboard.css
@@ -1,123 +1,126 @@
-/* Global Styles */
-body {
- font-family: 'Roboto', sans-serif;
- background-color: #f4f6f8;
- color: #333;
- margin: 0;
- padding: 0;
-}
-
-.dashboard {
- display: flex;
- flex-direction: column;
- height: 100vh;
-}
-
-/* Horizontal Navbar */
-.horizontal-navbar {
- display: flex;
- justify-content: space-between;
- align-items: center;
- background-color: #2c3e50;
- color: #ecf0f1;
- padding: 10px 20px;
-}
-
-.horizontal-navbar h3 {
- margin: 0;
- font-size: 24px;
-}
-
-.nav {
- display: flex;
- gap: 20px;
-}
-
-.nav-link {
- color: #ecf0f1;
- text-decoration: none;
- font-size: 18px;
- transition: color 0.3s;
-}
-
-.nav-link:hover {
- color: #3498db;
-}
-
-button {
- background-color: #e74c3c;
- color: #ecf0f1;
- border: none;
- padding: 10px 20px;
- border-radius: 5px;
- cursor: pointer;
- transition: background-color 0.3s;
-}
-
-button:hover {
- background-color: #c0392b;
-}
-
-/* Content */
-.content {
- display: flex;
- flex: 1;
- overflow: hidden;
-}
-
-.sidebar-content-wrapper {
- display: flex;
- flex: 1;
- overflow: hidden;
-}
-
-/* Sidebar */
-.sidebar {
- width: 250px;
- background-color: #34495e;
- color: #ecf0f1;
- transition: width 0.3s;
- overflow: auto;
-}
-
-.sidebar.collapsed {
- width: 80px;
-}
-
-.sidebar-content-wrapper .sidebar ul {
- list-style: none;
- padding: 0;
- margin: 0;
-}
-
-.sidebar-content-wrapper .sidebar ul li {
- padding: 15px 20px;
- cursor: pointer;
- transition: background-color 0.3s;
-}
-
-.sidebar-content-wrapper .sidebar ul li:hover {
- background-color: #2c3e50;
-}
-
-.sidebar-content-wrapper .sidebar ul li.active {
- background-color: #3498db;
-}
-
-.sidebar-content-wrapper .sidebar .toggle-btn {
- text-align: center;
- padding: 10px;
- cursor: pointer;
-}
-
-/* Main Content */
-.main-content {
- flex: 1;
- padding: 20px;
- background-color: #ecf0f1;
- overflow-y: auto;
-}
-
-.main-content h3 {
- margin-top: 0;
-}
+/* Global Styles */
+body {
+ font-family: 'Roboto', sans-serif;
+ background-color: #f4f6f8;
+ color: #333;
+ margin: 0;
+ padding: 0;
+}
+
+.dashboard {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+}
+
+/* Horizontal Navbar */
+.horizontal-navbar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: #2c3e50;
+ color: #ecf0f1;
+ padding: 10px 20px;
+}
+
+.horizontal-navbar h3 {
+ margin: 0;
+ font-size: 24px;
+}
+
+.nav {
+ display: flex;
+ gap: 20px;
+}
+
+.nav-link {
+ color: #ecf0f1;
+ text-decoration: none;
+ font-size: 18px;
+ transition: color 0.3s;
+}
+
+.nav-link:hover {
+ color: #3498db;
+}
+
+button {
+ background-color: #e74c3c;
+ color: #ecf0f1;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+button:hover {
+ background-color: #c0392b;
+}
+
+/* Content */
+.content {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+}
+
+.sidebar-content-wrapper {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+}
+
+/* Sidebar */
+.sidebar {
+ width: 250px;
+ background-color: #34495e;
+ color: #ecf0f1;
+ transition: width 0.3s;
+ overflow: auto;
+}
+
+.sidebar.collapsed {
+ width: 80px;
+}
+
+.sidebar-content-wrapper .sidebar ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.sidebar-content-wrapper .sidebar ul li {
+ padding: 15px 20px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+.sidebar-content-wrapper .sidebar ul li:hover {
+ background-color: #2c3e50;
+}
+
+.sidebar-content-wrapper .sidebar ul li.active {
+ background-color: #3498db;
+}
+
+.sidebar-content-wrapper .sidebar .toggle-btn {
+ text-align: center;
+ padding: 10px;
+ cursor: pointer;
+}
+
+/* Main Content */
+.main-content {
+ flex: 1;
+ padding: 20px;
+ background-color: #ecf0f1;
+ overflow-y: auto;
+}
+
+.main-content h3 {
+ margin-top: 0;
+}
+
+
+
diff --git a/src/components/Dashboard/dashboard.js b/src/components/Dashboard/dashboard.js
index f9e4870..940b947 100644
--- a/src/components/Dashboard/dashboard.js
+++ b/src/components/Dashboard/dashboard.js
@@ -1,177 +1,202 @@
-import React, { useState, useEffect } from "react";
-import Sidebar from "./sidebar";
-import { useNavigate } from "react-router-dom";
-import UserMaintanceComponent from "./UserMaintance";
-import UserGroupMaintanceComponent from "./UserGroupMaintance/UserGroupMaintance";
-import MenuMaintanceComponent from "./MenuMaintance/MenuMaintance";
-import MenuAccessControlComponent from "./MenuAccessControl/MenuAccessControl";
-import SystemParametersComponent from "./SystemParameters/SystemParameters";
-import AccessTypeComponent from "./AccessType/AccessType";
-import ApiRegistery from "./ApiRegistery/ApiRegistery";
-import TokenRegistery from "./TokenRegistery/TokenRegistery";
-import HomePage from "./HomePage";
-import Setup from "./Setup.js";
-import Report from "./Report";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
- faCog,
- faUsers,
- faSignOutAlt,
- faHome,
-} from "@fortawesome/free-solid-svg-icons";
-
-const Dashboard = () => {
- const navigate = useNavigate();
- const [menus, setMenus] = useState([]);
- const [selectedUserMaintance, setSelectedUserMaintance] = useState(null);
- const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
- const [content, setContent] = useState("");
-
- useEffect(() => {
- const fetchMenusData = async () => {
- const token = localStorage.getItem("token");
-
- const apiUrl = `${process.env.REACT_APP_API_BASE_URL}/fndMenu/menuloadbyuser`;
- console.log("Fetching menus from API:", apiUrl);
-
- try {
- const response = await fetch(apiUrl, {
- headers: {
- Authorization: `Bearer ${token}`,
- },
- });
-
- if (response.ok) {
- const menuData = await response.json();
- setMenus(menuData);
- } else {
- const errorText = await response.text();
- console.error(
- "Failed to fetch menus. Status:",
- response.status,
- "Response:",
- errorText
- );
- }
- } catch (error) {
- console.error("Error during menu fetch:", error);
- }
- };
-
- fetchMenusData();
- }, [navigate]);
-
- const handleMenuItemClick = (menuItem) => {
- setSelectedUserMaintance(menuItem);
- setContent(menuItem.menuItemDesc); // Update content based on clicked menu item
- };
-
- const handleHomeClick = () => {
- setSelectedUserMaintance(null);
- setContent("Home");
- };
-
- const handleSetupClick = () => {
- setSelectedUserMaintance(null);
- setContent("Setup");
- };
-
- const handleReportClick = () => {
- setSelectedUserMaintance(null);
- setContent("Report");
- };
-
- const handleSidebarToggle = () => {
- setSidebarCollapsed(!sidebarCollapsed);
- };
-
- const handleLogout = () => {
- localStorage.removeItem("authToken");
- localStorage.removeItem("user");
- navigate("/");
- };
-
- return (
-
-
-
Dashboard
-
-
-
-
-
-
-
-
-
-
-
-
-
- {content === "Setup" ? (
-
- ) : content === "Home" ? (
-
- ) : content === "Report" ? (
-
- ) : selectedUserMaintance ? (
-
-
- {selectedUserMaintance.menuItemDesc}
-
- {selectedUserMaintance.menuItemDesc === "User Maintance" ? (
-
- ) : selectedUserMaintance.menuItemDesc ===
- "User Group Maintance" ? (
-
- ) : selectedUserMaintance.menuItemDesc === "Menu Maintance" ? (
-
- ) : selectedUserMaintance.menuItemDesc ===
- "Menu Access Control" ? (
-
- ) : selectedUserMaintance.menuItemDesc === "System Parameters" ? (
-
- ) : selectedUserMaintance.menuItemDesc === "Access Type" ? (
-
- ) : selectedUserMaintance.menuItemDesc === "Api Registery" ? (
-
- ) : selectedUserMaintance.menuItemDesc === "Token Registery" ? (
-
- ) : null}
-
- ) : (
-
- )}
-
-
-
+ {/* Top Navigation Bar */}
+
+
+
Dashboard
+
+
+
+
+
+
+
+ {/* Sidebar */}
+
+
+
+
+
+
+
+ {/* Main Content Area */}
+
+
+ {content === "Setup" ? (
+
+
+
+ ) : content === "Home" ? (
+
+
+
+ ) : content === "Report" ? (
+
+
+
+ ) : selectedUserMaintance ? (
+
+
+ {selectedUserMaintance.menuItemDesc}
+
+ {selectedUserMaintance.menuItemDesc === "User Maintance" ? (
+
+ ) : selectedUserMaintance.menuItemDesc === "User Group Maintance" ? (
+
+ ) : selectedUserMaintance.menuItemDesc === "Menu Maintance" ? (
+
+ ) : selectedUserMaintance.menuItemDesc === "Menu Access Control" ? (
+
+ ) : selectedUserMaintance.menuItemDesc === "System Parameters" ? (
+
+ ) : selectedUserMaintance.menuItemDesc === "Api Registery" ? (
+
+ ) : selectedUserMaintance.menuItemDesc === "Token Registery" ? (
+
+ ) : null}
+
+ ) : (
+
+
+
+ )}
+
+
+
+
-
-
- {!collapsed &&
Cloudnsure
}
-
-
-
+
+ {isOpen ? (
+
Menu
+ ) : (
+
+ )}
+
+
+ {isOpen && (
+
+ )}
+
-
-
-
-
Create Account
-
-
-
- Already have an account?{' '}
-
-
-
-
-
+ {/* Background Elements */}
+
+ {/* Subtle geometric shapes */}
+
+
+
+
+ {/* Grid pattern */}
+
+
+
+ {/* Main Content */}
+
+ {/* Background Logo */}
+
+
+ {/* Create Account Card */}
+
+ {/* Card Background */}
+
+ {/* Header Section */}
+
+
+
+
+
+
+
+
+
+
+
Create Account
+
Join our community today
+
+
+
+
+ {/* Form Section */}
+
+ {/* Error Message */}
+ {errorMessage && (
+
+ {errorMessage}
+
+ )}
+
+ {/* Avatar Upload */}
+
+
+
+
+
+
Click to upload your photo
+
+
+ {/* Form Fields */}
+
+ {/* Email Field */}
+
+
+
+
+
+
+
setEmail(e.target.value)}
+ className="w-full pl-12 pr-4 py-4 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200"
+ placeholder="Enter your email"
+ />
+
+
+
+ {/* Password Field */}
+
+
+
+
+
+
+
setPassword(e.target.value)}
+ className="w-full pl-12 pr-12 py-4 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200"
+ placeholder="Create a strong password"
+ />
+
+
+
+ {/* Password Strength Indicator */}
+ {password && (
+
+
+
+
+ {getPasswordStrengthText()}
+
+
+
+
+
= 8 ? 'bg-green-400' : 'bg-gray-300'}`}>
+
At least 8 characters
+
+
+
+
One uppercase letter
+
+
+
+
+ )}
+
+
+ {/* Re-enter Password Field */}
+
+
+
+
+
+
+
setReEnterPassword(e.target.value)}
+ className={`w-full pl-12 pr-12 py-4 bg-gray-50 border rounded-xl focus:outline-none focus:ring-2 focus:border-transparent transition-all duration-200 ${
+ reEnterPassword && password !== reEnterPassword
+ ? 'border-red-300 focus:ring-red-500'
+ : reEnterPassword && password === reEnterPassword
+ ? 'border-green-300 focus:ring-green-500'
+ : 'border-gray-200 focus:ring-purple-500'
+ }`}
+ placeholder="Confirm your password"
+ />
+
+ {reEnterPassword && password === reEnterPassword && (
+
+
+
+ )}
+
+ {reEnterPassword && password !== reEnterPassword && (
+
Passwords do not match
+ )}
+
+
+
+ {/* Create Account Button */}
+
+
+ {/* Login Link */}
+
+
Already have an account?
+
+
+
+
+
+
+
-
-
-
-
Forgot Password
-
- Enter your email address and we'll send you a link to reset your password.
-
-
- {message && (
-
- {message}
-
- )}
-
- Remember your password?{' '}
-
-
-
-
+
+
+
+
+
+ {particles.map((particle) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Forgot Password?
+
Don't worry! Enter your email address and we'll send you a secure link to reset your password.
+
+
+
+ {message && (
+
+ {messageType === 'error' ? (
+
+ ) : (
+
+ )}
+
{message}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
setEmail(e.target.value)}
+ className="w-full pl-12 pr-4 py-4 bg-transparent text-gray-800 placeholder-gray-500 focus:outline-none"
+ placeholder="Enter your email address"
+ required
+ autoFocus
+ />
+
+
+
+
+
+
+
+
+
Remember your password?
+
+
+
+
+
+
+
-
-
-
-
Log in
- {errorMessage &&
{errorMessage}
}
-
-
-
- Don't have an account?{' '}
-
-
-
-
-
+
+
+
+
+
+ {particles.map((particle) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Welcome Back
+
Sign in to your account
+
+
+
+ {errorMessage && (
+
+ {errorMessage}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
setUsername(e.target.value)}
+ className="w-full pl-12 pr-4 py-4 bg-transparent text-gray-800 placeholder-gray-500 focus:outline-none"
+ placeholder="Enter your username"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
setPassword(e.target.value)}
+ className="w-full pl-12 pr-12 py-4 bg-transparent text-gray-800 placeholder-gray-500 focus:outline-none"
+ placeholder="Enter your password"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Don't have an account?
+
+
+
+
+
+
+