material
This commit is contained in:
Gaurav Kumar
9374
package-lock.json
generated
9374
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
34
package.json
34
package.json
@@ -2,15 +2,12 @@
|
|||||||
"name": "log",
|
"name": "log",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
|
||||||
"start": "react-scripts start",
|
|
||||||
"build": "react-scripts build",
|
|
||||||
"test": "react-scripts test",
|
|
||||||
"eject": "react-scripts eject"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emotion/react": "^11.11.3",
|
"@emotion/react": "^11.11.3",
|
||||||
"@emotion/styled": "^11.11.0",
|
"@emotion/styled": "^11.11.0",
|
||||||
|
"@fortawesome/fontawesome-svg-core": "^6.7.2",
|
||||||
|
"@fortawesome/free-solid-svg-icons": "^6.7.2",
|
||||||
|
"@fortawesome/react-fontawesome": "^0.2.2",
|
||||||
"@mui/icons-material": "^5.15.20",
|
"@mui/icons-material": "^5.15.20",
|
||||||
"@mui/material": "^5.15.20",
|
"@mui/material": "^5.15.20",
|
||||||
"@mui/styles": "^5.16.4",
|
"@mui/styles": "^5.16.4",
|
||||||
@@ -20,19 +17,36 @@
|
|||||||
"@testing-library/jest-dom": "^5.17.0",
|
"@testing-library/jest-dom": "^5.17.0",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
"ajv": "^6.12.6",
|
||||||
|
"ajv-keywords": "^3.5.2",
|
||||||
"axios": "^1.6.7",
|
"axios": "^1.6.7",
|
||||||
"lucide-react": "^0.511.0",
|
"chart.js": "^4.4.9",
|
||||||
"mdb-react-ui-kit": "^7.1.0",
|
"mdb-react-ui-kit": "^7.1.0",
|
||||||
|
"moment": "^2.30.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-barcode": "^1.5.3",
|
"react-barcode": "^1.5.3",
|
||||||
"react-data-grid": "^7.0.0-beta.44",
|
"react-chartjs-2": "^5.3.0",
|
||||||
|
"react-data-grid": "^6.1.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-google-recaptcha": "^3.1.0",
|
"react-google-recaptcha": "^3.1.0",
|
||||||
"react-icons": "^5.2.1",
|
"react-grid-layout": "^1.5.1",
|
||||||
|
"react-hook-form": "^7.57.0",
|
||||||
|
"react-hot-toast": "^2.5.2",
|
||||||
|
"react-i18next": "^15.5.2",
|
||||||
"react-qr-code": "^2.0.14",
|
"react-qr-code": "^2.0.14",
|
||||||
"react-router-dom": "^6.21.3",
|
"react-router-dom": "^6.21.3",
|
||||||
"react-scripts": "^5.0.1",
|
"react-scripts": "^5.0.1",
|
||||||
"web-vitals": "^2.1.4"
|
"react-toastify": "^11.0.5",
|
||||||
|
"schema-utils": "^3.3.0",
|
||||||
|
"web-vitals": "^2.1.4",
|
||||||
|
"webpack-dev-server": "^4.15.1",
|
||||||
|
"xlsx": "^0.18.5"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": [
|
"extends": [
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
// postcss.config.js
|
// postcss.config.js
|
||||||
module.exports = {
|
module.exports = {
|
||||||
plugins: {
|
plugins: {
|
||||||
tailwindcss: {},
|
tailwindcss: {},
|
||||||
autoprefixer: {},
|
autoprefixer: {},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -10,7 +10,7 @@
|
|||||||
content="Web site created using create-react-app"
|
content="Web site created using create-react-app"
|
||||||
/>
|
/>
|
||||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
<!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
|
||||||
<!--
|
<!--
|
||||||
manifest.json provides metadata used when your web app is installed on a
|
manifest.json provides metadata used when your web app is installed on a
|
||||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||||
@@ -25,7 +25,7 @@
|
|||||||
work correctly both with client-side routing and a non-root public URL.
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
<title>React App</title>
|
<title>CloudnSure</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
|||||||
117
src/APIRequestService/APIServices.js
Normal file
117
src/APIRequestService/APIServices.js
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
import { getToken } from '../../src/utils/tokenService';
|
||||||
|
|
||||||
|
const BASE_URL = process.env.REACT_APP_API_BASE_URL;
|
||||||
|
|
||||||
|
const apiClient = axios.create({
|
||||||
|
baseURL: BASE_URL,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// Add a request interceptor to include Authorization header
|
||||||
|
apiClient.interceptors.request.use(
|
||||||
|
(config) => {
|
||||||
|
const token = getToken();
|
||||||
|
if (token) {
|
||||||
|
console.log("token: ",token);
|
||||||
|
config.headers['Authorization'] = `Bearer ${token}`;
|
||||||
|
}
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
(error) => Promise.reject(error)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Generic error handler function
|
||||||
|
const handleError = (error) => {
|
||||||
|
let errorMessage = 'An unknown error occurred';
|
||||||
|
console.error('Error Details:', error);
|
||||||
|
|
||||||
|
if (error.response) {
|
||||||
|
// HTTP errors
|
||||||
|
switch (error.response.status) {
|
||||||
|
case 401:
|
||||||
|
errorMessage = 'Unauthorized - Please login again.';
|
||||||
|
break;
|
||||||
|
case 403:
|
||||||
|
errorMessage = 'Forbidden - Access denied.';
|
||||||
|
break;
|
||||||
|
case 404:
|
||||||
|
errorMessage = 'Service not found.';
|
||||||
|
break;
|
||||||
|
case 408:
|
||||||
|
errorMessage = 'Request timed out.';
|
||||||
|
break;
|
||||||
|
case 500:
|
||||||
|
errorMessage = 'Internal server error.';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
errorMessage = `Unexpected error: ${error.response.statusText || 'Server Error'}`;
|
||||||
|
}
|
||||||
|
} else if (error.request) {
|
||||||
|
// No response received
|
||||||
|
errorMessage = 'No response from server. Please check your connection.';
|
||||||
|
} else {
|
||||||
|
// Other errors
|
||||||
|
errorMessage = error.message || 'An unexpected error occurred.';
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.reject(errorMessage); // Return error message as rejected promise
|
||||||
|
};
|
||||||
|
|
||||||
|
// Define the reusable methods
|
||||||
|
// const apiService = {
|
||||||
|
// get: (url, params) =>
|
||||||
|
// apiClient
|
||||||
|
// .get(url, { params: params || {} })
|
||||||
|
// .catch(handleError), // Attach error handler
|
||||||
|
// post: (url, body = {}) =>
|
||||||
|
// apiClient
|
||||||
|
// .post(url, body)
|
||||||
|
// .catch(handleError), // Attach error handler
|
||||||
|
// put: (url, body = {}) =>
|
||||||
|
// apiClient
|
||||||
|
// .put(url, body)
|
||||||
|
// .catch(handleError), // Attach error handler
|
||||||
|
// delete: (url) =>
|
||||||
|
// apiClient
|
||||||
|
// .delete(url)
|
||||||
|
// .catch(handleError), // Attach error handler
|
||||||
|
// };
|
||||||
|
|
||||||
|
const apiService = {
|
||||||
|
get: (url, params) =>
|
||||||
|
apiClient
|
||||||
|
.get(url, { params: params || {} })
|
||||||
|
.catch(handleError), // Attach error handler
|
||||||
|
|
||||||
|
post: (url, body = {}, options = {}) =>
|
||||||
|
apiClient
|
||||||
|
.post(url, body, options) // Pass options such as headers
|
||||||
|
.catch(handleError), // Attach error handler
|
||||||
|
|
||||||
|
put: (url, body = {}, options = {}) =>
|
||||||
|
apiClient
|
||||||
|
.put(url, body, options) // Pass options such as headers
|
||||||
|
.catch(handleError), // Attach error handler
|
||||||
|
|
||||||
|
delete: (url, options = {}) =>
|
||||||
|
apiClient
|
||||||
|
.delete(url, options) // Pass options such as headers
|
||||||
|
.catch(handleError), // Attach error handler
|
||||||
|
};
|
||||||
|
// Add at the bottom of APIService.js
|
||||||
|
|
||||||
|
export const getSubmenuItems = async (id) => {
|
||||||
|
const response = await apiService.get(`/api1/submenu1/${id}`);
|
||||||
|
return response.data;
|
||||||
|
};
|
||||||
|
export const addSubmenuItem = async (menuId, submenuData) => {
|
||||||
|
const response = await apiService.post(`/api1/menu/${menuId}/submenu`, submenuData);
|
||||||
|
return response.data;
|
||||||
|
};
|
||||||
|
export const updateMenuItem = (id, formData) => apiService.put(`/api1/submenu1/${id}`, formData);
|
||||||
|
export const deleteMenuItem = (id) => apiService.delete(`/api1/menu/${id}`);
|
||||||
|
|
||||||
|
|
||||||
|
export default apiService;
|
||||||
340
src/ApiServices/DashboardBuilderServices.js
Normal file
340
src/ApiServices/DashboardBuilderServices.js
Normal file
@@ -0,0 +1,340 @@
|
|||||||
|
// import axios from 'axios';
|
||||||
|
|
||||||
|
// class DashboardService {
|
||||||
|
|
||||||
|
// constructor() {
|
||||||
|
// this.baseURL = 'https://your-api-url'; // Set your base URL for API
|
||||||
|
// this.getAllURL = '/get_module_id';
|
||||||
|
// this.addDataURl = '/Savedata';
|
||||||
|
// this.deleteFieldURL = '/delete_by_header_id';
|
||||||
|
// this.getbyidURL = '/get_dashboard_headerbyid';
|
||||||
|
// this.editURL = '/update_Dashbord1_Line';
|
||||||
|
// this.updateURL = '/update_Dashbord1_Lineby_id';
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Get all dashboards
|
||||||
|
// getAllDash() {
|
||||||
|
// return axios.get(`${this.baseURL}/get_Dashboard_header`)
|
||||||
|
// .then(response => response.data)
|
||||||
|
// .catch(error => {
|
||||||
|
// console.error('Error fetching all dashboards:', error);
|
||||||
|
// throw error;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Get dashboards by module ID
|
||||||
|
// getAllByModuleId(module_id, page = 0, size = 1000) {
|
||||||
|
// return axios.get(`${this.baseURL}${this.getAllURL}`, {
|
||||||
|
// params: {
|
||||||
|
// page,
|
||||||
|
// size,
|
||||||
|
// module_id
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .then(response => response.data)
|
||||||
|
// .catch(error => {
|
||||||
|
// console.error('Error fetching dashboards by module ID:', error);
|
||||||
|
// throw error;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Create new dashboard
|
||||||
|
// create(data) {
|
||||||
|
// return axios.post(`${this.baseURL}${this.addDataURl}`, data)
|
||||||
|
// .then(response => response.data)
|
||||||
|
// .catch(error => {
|
||||||
|
// console.error('Error creating dashboard:', error);
|
||||||
|
// throw error;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Delete dashboard field
|
||||||
|
// deleteField(id) {
|
||||||
|
// return axios.delete(`${this.baseURL}${this.deleteFieldURL}/${id}`)
|
||||||
|
// .then(response => response.data)
|
||||||
|
// .catch(error => {
|
||||||
|
// console.error('Error deleting dashboard field:', error);
|
||||||
|
// throw error;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Get dashboard by ID
|
||||||
|
// getById(id) {
|
||||||
|
// return axios.get(`${this.baseURL}${this.getbyidURL}/${id}`)
|
||||||
|
// .then(response => response.data)
|
||||||
|
// .catch(error => {
|
||||||
|
// console.error('Error fetching dashboard by ID:', error);
|
||||||
|
// throw error;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Add or Edit dashboard
|
||||||
|
// addToDB(line) {
|
||||||
|
// return axios.put(`${this.baseURL}${this.editURL}`, line)
|
||||||
|
// .then(response => response.data)
|
||||||
|
// .catch(error => {
|
||||||
|
// console.error('Error updating dashboard line:', error);
|
||||||
|
// throw error;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Update dashboard line data by ID
|
||||||
|
// updateLineData(id, line) {
|
||||||
|
// return axios.put(`${this.baseURL}${this.updateURL}/${id}`, line)
|
||||||
|
// .then(response => response.data)
|
||||||
|
// .catch(error => {
|
||||||
|
// console.error('Error updating dashboard line data:', error);
|
||||||
|
// throw error;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Get dashboard count by module ID
|
||||||
|
// getCount(moduleId) {
|
||||||
|
// return axios.get(`${this.baseURL}/get_dashboard/${moduleId}`)
|
||||||
|
// .then(response => response.data)
|
||||||
|
// .catch(error => {
|
||||||
|
// console.error('Error fetching dashboard count:', error);
|
||||||
|
// throw error;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Update dashboard header
|
||||||
|
// updateDash(dashboardHeader) {
|
||||||
|
// return axios.put(`${this.baseURL}/update_dashboard_header`, dashboardHeader)
|
||||||
|
// .then(response => response.data)
|
||||||
|
// .catch(error => {
|
||||||
|
// console.error('Error updating dashboard header:', error);
|
||||||
|
// throw error;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Schedule methods
|
||||||
|
// saveData(data) {
|
||||||
|
// return axios.post(`${this.baseURL}/DashboardSchedule/DashboardSchedule`, data)
|
||||||
|
// .then(response => response.data)
|
||||||
|
// .catch(error => {
|
||||||
|
// console.error('Error saving schedule data:', error);
|
||||||
|
// throw error;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// getDetails() {
|
||||||
|
// return axios.get(`${this.baseURL}/DashboardSchedule/DashboardSchedule`)
|
||||||
|
// .then(response => response.data)
|
||||||
|
// .catch(error => {
|
||||||
|
// console.error('Error fetching schedule details:', error);
|
||||||
|
// throw error;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// getDetailsById(id) {
|
||||||
|
// return axios.get(`${this.baseURL}/DashboardSchedule/DashboardSchedule/${id}`)
|
||||||
|
// .then(response => response.data)
|
||||||
|
// .catch(error => {
|
||||||
|
// console.error('Error fetching schedule details by ID:', error);
|
||||||
|
// throw error;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// deleteById(id) {
|
||||||
|
// return axios.delete(`${this.baseURL}/DashboardSchedule/DashboardSchedule/${id}`)
|
||||||
|
// .then(response => response.data)
|
||||||
|
// .catch(error => {
|
||||||
|
// console.error('Error deleting schedule by ID:', error);
|
||||||
|
// throw error;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// updateData(data, id) {
|
||||||
|
// return axios.put(`${this.baseURL}/DashboardSchedule/DashboardSchedule/${id}`, data)
|
||||||
|
// .then(response => response.data)
|
||||||
|
// .catch(error => {
|
||||||
|
// console.error('Error updating schedule data:', error);
|
||||||
|
// throw error;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Toggle functionality
|
||||||
|
// updateToggle(value) {
|
||||||
|
// // Logic for toggle update (e.g. update a state, or some other action)
|
||||||
|
// console.log('Toggle updated to:', value);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export default new DashboardService();
|
||||||
|
|
||||||
|
|
||||||
|
import apiService from '../APIRequestService/APIServices';
|
||||||
|
|
||||||
|
class DashboardBuilderService {
|
||||||
|
constructor() {
|
||||||
|
this.getAllURL = '/get_module_id';
|
||||||
|
this.addDataURL = '/Savedata';
|
||||||
|
this.deleteFieldURL = '/delete_by_header_id';
|
||||||
|
this.getByIdURL = '/get_dashboard_headerbyid';
|
||||||
|
this.editURL = '/update_Dashbord1_Line';
|
||||||
|
this.updateURL = '/update_Dashbord1_Lineby_id';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get all dashboards
|
||||||
|
// getAllDash() {
|
||||||
|
// return apiService.get('/get_Dashboard_header')
|
||||||
|
// .then(response => response.data)
|
||||||
|
|
||||||
|
// .catch(error => {
|
||||||
|
// console.error('Error fetching all dashboards:', error);
|
||||||
|
// throw error;
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
async getAllDash() {
|
||||||
|
console.log('Entering getAllDash');
|
||||||
|
try {
|
||||||
|
const response = await apiService.get('/get_Dashboard_header');
|
||||||
|
console.log('Service Response:', response);
|
||||||
|
if (!response || !response.data) {
|
||||||
|
throw new Error('Unexpected API response format.');
|
||||||
|
}
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching dashboards:', error);
|
||||||
|
throw new Error('Failed to fetch dashboards. Please try again later.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Get dashboards by module ID
|
||||||
|
getAllByModuleId(module_id, page = 0, size = 1000) {
|
||||||
|
return apiService.get(this.getAllURL, {
|
||||||
|
params: { page, size, module_id }
|
||||||
|
})
|
||||||
|
.then(response => response.data)
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error fetching dashboards by module ID:', error);
|
||||||
|
throw error;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create new dashboard
|
||||||
|
create(data) {
|
||||||
|
return apiService.post(this.addDataURL, data)
|
||||||
|
.then(response => response.data)
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error creating dashboard:', error);
|
||||||
|
throw error;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete dashboard field
|
||||||
|
deleteField(id) {
|
||||||
|
return apiService.delete(`${this.deleteFieldURL}/${id}`)
|
||||||
|
.then(response => response.data)
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error deleting dashboard field:', error);
|
||||||
|
throw error;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get dashboard by ID
|
||||||
|
getById(id) {
|
||||||
|
return apiService.get(`${this.getByIdURL}/${id}`)
|
||||||
|
.then(response => response.data)
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error fetching dashboard by ID:', error);
|
||||||
|
throw error;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add or Edit dashboard
|
||||||
|
addToDB(line) {
|
||||||
|
return apiService.put(this.editURL, line)
|
||||||
|
.then(response => response.data)
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error updating dashboard line:', error);
|
||||||
|
throw error;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update dashboard line data by ID
|
||||||
|
updateLineData(id, line) {
|
||||||
|
return apiService.put(`${this.updateURL}/${id}`, line)
|
||||||
|
.then(response => response.data)
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error updating dashboard line data:', error);
|
||||||
|
throw error;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get dashboard count by module ID
|
||||||
|
getCount(moduleId) {
|
||||||
|
return apiService.get(`/get_dashboard/${moduleId}`)
|
||||||
|
.then(response => response.data)
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error fetching dashboard count:', error);
|
||||||
|
throw error;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update dashboard header
|
||||||
|
updateDash(dashboardHeader) {
|
||||||
|
return apiService.put('/update_dashboard_header', dashboardHeader)
|
||||||
|
.then(response => response.data)
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error updating dashboard header:', error);
|
||||||
|
throw error;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Schedule methods
|
||||||
|
saveData(data) {
|
||||||
|
return apiService.post('/DashboardSchedule/DashboardSchedule', data)
|
||||||
|
.then(response => response.data)
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error saving schedule data:', error);
|
||||||
|
throw error;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getDetails() {
|
||||||
|
return apiService.get('/DashboardSchedule/DashboardSchedule')
|
||||||
|
.then(response => response.data)
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error fetching schedule details:', error);
|
||||||
|
throw error;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getDetailsById(id) {
|
||||||
|
return apiService.get(`/DashboardSchedule/DashboardSchedule/${id}`)
|
||||||
|
.then(response => response.data)
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error fetching schedule details by ID:', error);
|
||||||
|
throw error;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteById(id) {
|
||||||
|
return apiService.delete(`/DashboardSchedule/DashboardSchedule/${id}`)
|
||||||
|
.then(response => response.data)
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error deleting schedule by ID:', error);
|
||||||
|
throw error;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
updateData(data, id) {
|
||||||
|
return apiService.put(`/DashboardSchedule/DashboardSchedule/${id}`, data)
|
||||||
|
.then(response => response.data)
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error updating schedule data:', error);
|
||||||
|
throw error;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Toggle functionality
|
||||||
|
updateToggle(value) {
|
||||||
|
console.log('Toggle updated to:', value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new DashboardBuilderService();
|
||||||
34
src/ApiServices/MenuAccessControlAPI.js
Normal file
34
src/ApiServices/MenuAccessControlAPI.js
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
import apiService from '../APIRequestService/APIServices';
|
||||||
|
|
||||||
|
|
||||||
|
// Exporting the function as named export
|
||||||
|
// export const getByUsrGrpId = async (usrgrp) => {
|
||||||
|
// try {
|
||||||
|
// const response = await apiService.get(`/api1/getusracces1/${usrgrp}`);
|
||||||
|
// if (!response.ok) {
|
||||||
|
// throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
// }
|
||||||
|
// console.log(response.data);
|
||||||
|
// return response.data;
|
||||||
|
// } catch (error) {
|
||||||
|
// console.error('Error fetching user groups:', error);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
export const getByUsrGrpId = async (usrgrp) => {
|
||||||
|
if (!usrgrp) {
|
||||||
|
console.error("Error: usrgrp is not defined or is null.");
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const response = await apiService.get(`/api1/getusracces1/${usrgrp}`);
|
||||||
|
if (response.status < 200 || response.status >= 300) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
console.log("Fetched data successfully:", response.data);
|
||||||
|
return response.data; // Return the data if successfully fetched
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching user groups:", error.message || error);
|
||||||
|
throw error; // Re-throw the error to handle it in the caller function
|
||||||
|
}
|
||||||
|
};
|
||||||
23
src/ApiServices/SytemparameterApi.js
Normal file
23
src/ApiServices/SytemparameterApi.js
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import apiService from '../APIRequestService/APIServices';
|
||||||
|
|
||||||
|
export const getSysParameter = async (id) => {
|
||||||
|
try {
|
||||||
|
const response = await apiService.get(`/sysparam/getSysParams/${id}`);
|
||||||
|
return response.data; // Return only the data part of the response
|
||||||
|
} catch (error) {
|
||||||
|
throw error; // Let the error be handled by the calling component
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const addSysParameter = async (formdata) => {
|
||||||
|
try {
|
||||||
|
const response = await apiService.put(`/sysparam/updateSysParams/${1}`,formdata);
|
||||||
|
console.log("add response data ",response.data)
|
||||||
|
return response.data; // Return only the data part of the response
|
||||||
|
} catch (error) {
|
||||||
|
throw error; // Let the error be handled by the calling component
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
48
src/ApiServices/Usermaintenanceapi.js
Normal file
48
src/ApiServices/Usermaintenanceapi.js
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
import apiService from '../APIRequestService/APIServices';
|
||||||
|
|
||||||
|
const API_BASE_URL = process.env.REACT_APP_API_BASE_URL;
|
||||||
|
|
||||||
|
export const getAllUsers = async () => {
|
||||||
|
try {
|
||||||
|
const response = await apiService.get(`${API_BASE_URL}/api/getAllAppUser`);
|
||||||
|
console.log(response.data);
|
||||||
|
return response;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching user groups:', error);
|
||||||
|
throw error; // Consider re-throwing the error for handling in components
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const createUser = async (data) => {
|
||||||
|
try {
|
||||||
|
const response = await apiService.post(`${API_BASE_URL}/api/addOneAppUser`, data);
|
||||||
|
console.log(response.data);
|
||||||
|
return response;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating user:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const updateUser = async (userData) => {
|
||||||
|
try {
|
||||||
|
const { userId, ...data } = userData;
|
||||||
|
const response = await apiService.put(`${API_BASE_URL}/api/updateAppUser/${userId}`, data);
|
||||||
|
console.log(response.data);
|
||||||
|
return response;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error updating user:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const deleteUser = async (id) => {
|
||||||
|
try {
|
||||||
|
const response = await apiService.delete(`${API_BASE_URL}/api/deleteAppUser/${id}`);
|
||||||
|
console.log(response.data);
|
||||||
|
return response;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting user:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
153
src/ApiServices/menumaintananceapi.js
Normal file
153
src/ApiServices/menumaintananceapi.js
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
import apiService from '../../src/APIRequestService/APIServices';
|
||||||
|
|
||||||
|
export const fetchMenuItems = async () => {
|
||||||
|
console.log("applying fetch menu items");
|
||||||
|
try {
|
||||||
|
const response = await apiService.get('/api1/submenu1');
|
||||||
|
console.log("response", response);
|
||||||
|
|
||||||
|
if (response.status !== 200) {
|
||||||
|
throw new Error(`Error: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!response.data || !Array.isArray(response.data)) {
|
||||||
|
throw new Error('Unexpected data format, expected an array');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Fetched Menu Items:', response.data);
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching menu items:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const addMenuItem = async (formData) => {
|
||||||
|
try {
|
||||||
|
const payload = {
|
||||||
|
menuItemDesc: formData.menuItemDesc,
|
||||||
|
menuId: 0,
|
||||||
|
itemSeq: formData.itemSeq || 0,
|
||||||
|
moduleName: formData.moduleName || "",
|
||||||
|
main_menu_action_name: formData.main_menu_action_name || "#",
|
||||||
|
main_menu_icon_name: formData.main_menu_icon_name || "fa-circle",
|
||||||
|
status: formData.status === "true"
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log("Final payload:", payload);
|
||||||
|
const response = await apiService.post('/api1/Sec_menuDet/', payload);
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error adding menu item:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const updateMenuItem = async (id, formData) => {
|
||||||
|
try {
|
||||||
|
const payload = {
|
||||||
|
menuItemId: Number(id),
|
||||||
|
menuItemDesc: formData.menuItemDesc,
|
||||||
|
menuId: formData.menuId || 0,
|
||||||
|
itemSeq: formData.itemSeq || 0,
|
||||||
|
moduleName: formData.moduleName || "",
|
||||||
|
main_menu_action_name: formData.main_menu_action_name || "#",
|
||||||
|
main_menu_icon_name: formData.main_menu_icon_name || "fa-circle",
|
||||||
|
status: formData.status === "Enable" || formData.status === true
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log("Updating menu item #"+id, payload);
|
||||||
|
const response = await apiService.post('/api1/Sec_menuDet/', payload);
|
||||||
|
console.log("Update successful:", response.data);
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Update failed:', {
|
||||||
|
id: id,
|
||||||
|
error: error.response?.data || error.message
|
||||||
|
});
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const deleteMenuItem = async (id) => {
|
||||||
|
try {
|
||||||
|
const response = await apiService.delete(`/api1/menu/${id}`);
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getSubmenuItems = async (id) => {
|
||||||
|
try {
|
||||||
|
const response = await apiService.get(`/api1/submenu1/${id}`);
|
||||||
|
console.log("get submenu response: ", response.data);
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const addSubmenuItem = async (parentMenuId, formData) => {
|
||||||
|
try {
|
||||||
|
const payload = {
|
||||||
|
menuItemDesc: formData.menuItemDesc,
|
||||||
|
menuId: Number(parentMenuId),
|
||||||
|
itemSeq: formData.itemSeq || 0,
|
||||||
|
moduleName: formData.moduleName || "",
|
||||||
|
main_menu_action_name: formData.main_menu_action_name || "#",
|
||||||
|
main_menu_icon_name: formData.main_menu_icon_name || "fa-circle",
|
||||||
|
status: formData.status === "Enable"
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log("Adding submenu with payload:", payload);
|
||||||
|
const response = await apiService.post('/api1/Sec_menuDet/', payload);
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error adding submenu:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const updateSubmenuItem = async (submenuId, formData) => {
|
||||||
|
const payload = {
|
||||||
|
menuItemId: Number(submenuId),
|
||||||
|
menuItemDesc: formData.menuItemDesc,
|
||||||
|
menuId: Number(formData.menuId),
|
||||||
|
itemSeq: formData.itemSeq || 0,
|
||||||
|
moduleName: formData.moduleName || "",
|
||||||
|
main_menu_action_name: formData.main_menu_action_name || "#",
|
||||||
|
main_menu_icon_name: formData.main_menu_icon_name || "fa-circle",
|
||||||
|
status: formData.status === "Enable" || formData.status === true
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log("Updating submenu with payload:", payload);
|
||||||
|
const response = await apiService.post('/api1/Sec_menuDet/', payload);
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error updating submenu:', {
|
||||||
|
error: error.response?.data || error.message,
|
||||||
|
payload: payload
|
||||||
|
});
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const deleteSubmenuItem = async (submenuId) => {
|
||||||
|
try {
|
||||||
|
console.log("Deleting submenu with ID:", submenuId);
|
||||||
|
const response = await apiService.post('/api1/Sec_menuDet/', {
|
||||||
|
menuItemId: Number(submenuId)
|
||||||
|
});
|
||||||
|
console.log("Delete successful:", response.data);
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting submenu:', {
|
||||||
|
status: error.response?.status,
|
||||||
|
error: error.response?.data || error.message,
|
||||||
|
submenuId: submenuId
|
||||||
|
});
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -46,4 +46,3 @@
|
|||||||
/* .login-container input[type="checkbox"] {
|
/* .login-container input[type="checkbox"] {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
} */
|
} */
|
||||||
|
|
||||||
|
|||||||
131
src/App.js
131
src/App.js
@@ -1,38 +1,115 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Routes, Route } from "react-router-dom";
|
import { SystemParameterProvider } from './context/SystemParameterContext';
|
||||||
import { BrowserRouter as Router } from 'react-router-dom';
|
import {
|
||||||
|
BrowserRouter,
|
||||||
|
Routes,
|
||||||
|
Route,
|
||||||
|
Navigate
|
||||||
|
} from "react-router-dom";
|
||||||
|
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
||||||
|
import CssBaseline from '@mui/material/CssBaseline';
|
||||||
|
import { ToastContainer } from "react-toastify";
|
||||||
|
import "react-toastify/dist/ReactToastify.css";
|
||||||
|
|
||||||
|
// Import components
|
||||||
import Login from "./components/Login/Login";
|
import Login from "./components/Login/Login";
|
||||||
import Dashboard from "./components/Dashboard/dashboard";
|
import Dashboard from "./components/Dashboard/dashboard";
|
||||||
import UserMaintance from "./components/Dashboard/UserMaintance";
|
import HomePage from "./components/Dashboard/HomePage";
|
||||||
import UserGroupMaintance from "./components/Dashboard/UserGroupMaintance/UserGroupMaintance";
|
import Setup from "./components/Dashboard/Setup";
|
||||||
|
import UserMaintenance from "./components/Dashboard/UserMaintance";
|
||||||
|
import UserGroupMaintenance from "./components/Dashboard/UserGroupMaintance/UserGroupMaintance";
|
||||||
|
import MenuMaintenance from "./components/Dashboard/MenuMaintance/MenuMaintance";
|
||||||
|
import MenuAccessControl from "./components/Dashboard/MenuAccessControl/MenuAccessControl";
|
||||||
|
import SystemParameters from "./components/Dashboard/SystemParameters/SystemParameters";
|
||||||
|
import AccessType from "./components/Dashboard/AccessType/AccessType";
|
||||||
|
import ApiRegistry from "./components/Dashboard/ApiRegistery/ApiRegistery";
|
||||||
|
import TokenRegistry from "./components/Dashboard/TokenRegistery/TokenRegistery";
|
||||||
import CodeExtension from "./components/Dashboard/Codeextension";
|
import CodeExtension from "./components/Dashboard/Codeextension";
|
||||||
import Extension from "./components/Dashboard/Extension";
|
|
||||||
import DynamicTable from "./components/Dashboard/Dynamictable";
|
import DynamicTable from "./components/Dashboard/Dynamictable";
|
||||||
import Form from "./components/Dashboard/Form";
|
import Report from "./components/Dashboard/reports/Report";
|
||||||
import ForgotPassword from "./components/Login/ForgotPassword";
|
import SequenceGenerator from "./components/Dashboard/document sequence/sequencegenerator";
|
||||||
import CreateAccount from "./components/Login/CreateAccount";
|
import About from "./components/Dashboard/dropdown/about";
|
||||||
import DashboardBuilder from "./components/Dashboard/DashboardBuilder";
|
import Profile from "./components/Dashboard/dropdown/profile";
|
||||||
|
import DashboardRunner from "./components/dashboardnew/dashboardrunner/dashboardrunner";
|
||||||
|
import DashboardRunnerAll from "./components/dashboardnew/dashboardrunner/dashboardrunnerall";
|
||||||
|
import DashboardNewAll from "./components/dashboardnew/dashboardbuildernewall";
|
||||||
|
import DashboardNewAdd from "./components/dashboardnew/dashboardadd/dashboardbuilderadd";
|
||||||
|
import DashboardNewEdit from "./components/dashboardnew/editdashboard/editformdashboard";
|
||||||
|
import EditNewDash from "./components/dashboardnew/editdashboard/editdashboard";
|
||||||
|
import SubMenuMaintenance from "./components/Dashboard/sub menu/submenumaintanence";
|
||||||
|
const theme = createTheme({
|
||||||
|
palette: {
|
||||||
|
primary: {
|
||||||
|
main: '#1976d2',
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
main: '#dc004e',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<ThemeProvider theme={theme}>
|
||||||
<Router>
|
<CssBaseline />
|
||||||
<Routes>
|
<SystemParameterProvider>
|
||||||
<Route path="/" element={<Login />} />
|
<BrowserRouter>
|
||||||
<Route path="/Dashboard" element={<Dashboard />} />
|
<ToastContainer
|
||||||
<Route path="/UserGroupMaintance" element={<UserGroupMaintance />} />
|
position="top-right"
|
||||||
<Route path="/Dashboard/UserMaintance" element={<UserMaintance />} />
|
autoClose={1500}
|
||||||
<Route path="/CodeExtension" element={<CodeExtension />} />
|
hideProgressBar={false}
|
||||||
<Route path="/Dashboard/DashboardBuilder" element={<DashboardBuilder />} />
|
newestOnTop
|
||||||
<Route path="/Extension" element={<Extension />} />
|
closeOnClick
|
||||||
<Route path="/Dynamictable" element={<DynamicTable />} />
|
rtl={false}
|
||||||
<Route path="/Form" element={<Form />} />
|
pauseOnFocusLoss
|
||||||
<Route path="/ForgotPassword" element={<ForgotPassword />} />
|
draggable
|
||||||
<Route path="/CreateAccount" element={<CreateAccount />} />
|
pauseOnHover
|
||||||
</Routes>
|
/>
|
||||||
</Router>
|
|
||||||
</div>
|
<Routes>
|
||||||
|
<Route path="/" element={<Login />} />
|
||||||
|
|
||||||
|
{/* Main dashboard route */}
|
||||||
|
<Route path="/dashboard" element={<Dashboard />}>
|
||||||
|
<Route index element={<HomePage />} />
|
||||||
|
|
||||||
|
{/* Setup section with all maintenance routes */}
|
||||||
|
<Route path="setup" element={<Setup />}>
|
||||||
|
<Route index element={<div>Select a setup option from the menu</div>} />
|
||||||
|
<Route path="user-maintenance" element={<UserMaintenance />} />
|
||||||
|
<Route path="user-group-maintenance" element={<UserGroupMaintenance />} />
|
||||||
|
<Route path="menu-maintenance" element={<MenuMaintenance />} />
|
||||||
|
<Route path="sub-menu-maintenance/:menuItemId" element={<SubMenuMaintenance/>} />
|
||||||
|
|
||||||
|
<Route path="menu-access-control" element={<MenuAccessControl />} />
|
||||||
|
<Route path="system-parameters" element={<SystemParameters />} />
|
||||||
|
<Route path="access-type" element={<AccessType />} />
|
||||||
|
<Route path="api-registry" element={<ApiRegistry />} />
|
||||||
|
<Route path="token-registry" element={<TokenRegistry />} />
|
||||||
|
<Route path="document-sequence" element={<SequenceGenerator />} />
|
||||||
|
{/* Additional components */}
|
||||||
|
<Route path="code-extension" element={<CodeExtension />} />
|
||||||
|
<Route path="dynamic-table" element={<DynamicTable />} />
|
||||||
|
|
||||||
|
</Route>
|
||||||
|
<Route path="dashboard-runner-all" element={<DashboardRunnerAll/>}/>
|
||||||
|
<Route path="dashboard-new-all" element={<DashboardNewAll/>}/>
|
||||||
|
<Route path="dashboard-new-add" element={<DashboardNewAdd/>}/>
|
||||||
|
<Route path="dashboard-new-edit/:id" element={<DashboardNewEdit/>}/>
|
||||||
|
<Route path="edit-new-dash/:id" element={<EditNewDash/>}/>
|
||||||
|
<Route path="dashrunner/:id" element={ <DashboardRunner/>}/>
|
||||||
|
|
||||||
|
<Route path="reports" element={<Report />} />
|
||||||
|
<Route path="about" element={<About />} />
|
||||||
|
<Route path="profile" element={<Profile />} />
|
||||||
|
</Route>
|
||||||
|
|
||||||
|
<Route path="*" element={<Navigate to="/" replace />} />
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
|
</SystemParameterProvider>
|
||||||
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
@@ -1,26 +1,26 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
class ErrorBoundary extends Component {
|
class ErrorBoundary extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = { hasError: false };
|
this.state = { hasError: false };
|
||||||
}
|
}
|
||||||
|
|
||||||
static getDerivedStateFromError(error) {
|
static getDerivedStateFromError(error) {
|
||||||
return { hasError: true };
|
return { hasError: true };
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidCatch(error, errorInfo) {
|
componentDidCatch(error, errorInfo) {
|
||||||
console.error("Error Boundary Caught an Error", error, errorInfo);
|
console.error("Error Boundary Caught an Error", error, errorInfo);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
if (this.state.hasError) {
|
if (this.state.hasError) {
|
||||||
return <h1>Something went wrong.</h1>;
|
return <h1>Something went wrong.</h1>;
|
||||||
}
|
}
|
||||||
|
|
||||||
return this.props.children;
|
return this.props.children;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ErrorBoundary;
|
export default ErrorBoundary;
|
||||||
|
|||||||
469
src/components/Dashboard/AccessType/AccessType.js
Normal file
469
src/components/Dashboard/AccessType/AccessType.js
Normal file
@@ -0,0 +1,469 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Container,
|
||||||
|
Checkbox,
|
||||||
|
Modal,
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableContainer,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
Paper,
|
||||||
|
TextField,
|
||||||
|
FormControlLabel,
|
||||||
|
Typography,
|
||||||
|
Pagination,
|
||||||
|
IconButton,
|
||||||
|
InputAdornment,
|
||||||
|
Menu,
|
||||||
|
MenuItem,
|
||||||
|
Box,
|
||||||
|
Divider
|
||||||
|
} from "@mui/material";
|
||||||
|
import {
|
||||||
|
Edit as EditIcon,
|
||||||
|
Delete as DeleteIcon,
|
||||||
|
Add as AddIcon,
|
||||||
|
Menu as MenuIcon,
|
||||||
|
Close as CloseIcon,
|
||||||
|
Search as SearchIcon,
|
||||||
|
Check as CheckIcon,
|
||||||
|
Book as BookIcon
|
||||||
|
} from "@mui/icons-material";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
|
import { CircularProgress } from "@mui/material";
|
||||||
|
|
||||||
|
const api =process.env.REACT_APP_API_BASE_URL;
|
||||||
|
|
||||||
|
function AccessTypeManagement() {
|
||||||
|
const [accessTypes, setAccessTypes] = useState([]);
|
||||||
|
const [showAddEditModal, setShowAddEditModal] = useState(false);
|
||||||
|
const [currentAccessType, setCurrentAccessType] = useState({
|
||||||
|
typeId: "",
|
||||||
|
typeName: "",
|
||||||
|
description: "",
|
||||||
|
isActive: false
|
||||||
|
});
|
||||||
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
|
const [recordsPerPage, setRecordsPerPage] = useState(10);
|
||||||
|
const [visibleColumns, setVisibleColumns] = useState({
|
||||||
|
typeId: true,
|
||||||
|
typeName: true,
|
||||||
|
description: true,
|
||||||
|
isActive: true,
|
||||||
|
actions: true
|
||||||
|
});
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [anchorEl, setAnchorEl] = useState(null);
|
||||||
|
const [columnsAnchorEl, setColumnsAnchorEl] = useState(null);
|
||||||
|
|
||||||
|
const openColumnsMenu = (event) => {
|
||||||
|
setColumnsAnchorEl(event.currentTarget);
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeColumnsMenu = () => {
|
||||||
|
setColumnsAnchorEl(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const openRecordsMenu = (event) => {
|
||||||
|
setAnchorEl(event.currentTarget);
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeRecordsMenu = () => {
|
||||||
|
setAnchorEl(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchAccessTypes = async () => {
|
||||||
|
const token = localStorage.getItem("token");
|
||||||
|
const apiUrl = `${api}/token/access_type/Accesstype`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(apiUrl, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
setAccessTypes(data);
|
||||||
|
setLoading(false);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching access types:", error);
|
||||||
|
toast.error("Failed to fetch access types");
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchAccessTypes();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const toggleColumn = (column) => {
|
||||||
|
setVisibleColumns((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[column]: !prev[column],
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputChange = (event) => {
|
||||||
|
const { name, value, checked, type } = event.target;
|
||||||
|
setCurrentAccessType((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[name]: type === "checkbox" ? checked : value,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const token = localStorage.getItem("token");
|
||||||
|
const apiUrl = isEditing
|
||||||
|
? `${api}/access_type/Accesstype/${currentAccessType.id}`
|
||||||
|
: `${api}/access_type/Accesstype`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const method = isEditing ? "PUT" : "POST";
|
||||||
|
const response = await fetch(apiUrl, {
|
||||||
|
method,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
body: JSON.stringify(currentAccessType),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (isEditing) {
|
||||||
|
setAccessTypes(accessTypes.map(type =>
|
||||||
|
type.id === currentAccessType.id ? data : type
|
||||||
|
));
|
||||||
|
toast.success("Access type updated successfully!");
|
||||||
|
} else {
|
||||||
|
setAccessTypes([...accessTypes, data]);
|
||||||
|
toast.success("Access type added successfully!");
|
||||||
|
}
|
||||||
|
|
||||||
|
setShowAddEditModal(false);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error submitting access type:", error);
|
||||||
|
toast.error("Failed to submit access type");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (id) => {
|
||||||
|
const token = localStorage.getItem("token");
|
||||||
|
const apiUrl = `${api}/access_type/Accesstype/${id}`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(apiUrl, {
|
||||||
|
method: "DELETE",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
setAccessTypes(accessTypes.filter(type => type.id !== id));
|
||||||
|
toast.success("Access type deleted successfully!");
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error deleting access type:", error);
|
||||||
|
toast.error("Failed to delete access type");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const openModal = (type = { typeId: "", typeName: "", description: "", isActive: false }) => {
|
||||||
|
setIsEditing(!!type.id);
|
||||||
|
setCurrentAccessType(type);
|
||||||
|
setShowAddEditModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setShowAddEditModal(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredAccessTypes = accessTypes.filter(item =>
|
||||||
|
item.typeName && item.typeName.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
const slicedAccessTypes = filteredAccessTypes.slice(
|
||||||
|
(currentPage - 1) * recordsPerPage,
|
||||||
|
currentPage * recordsPerPage
|
||||||
|
);
|
||||||
|
|
||||||
|
const totalPages = Math.ceil(filteredAccessTypes.length / recordsPerPage);
|
||||||
|
|
||||||
|
const handlePageChange = (event, value) => {
|
||||||
|
setCurrentPage(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRecordsPerPageChange = (number) => {
|
||||||
|
setRecordsPerPage(number);
|
||||||
|
setCurrentPage(1);
|
||||||
|
closeRecordsMenu();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Container maxWidth="xl" sx={{ mt: 4 }}>
|
||||||
|
{loading ? (
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '200px' }}>
|
||||||
|
<CircularProgress />
|
||||||
|
</Box>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 3 }}>
|
||||||
|
<Typography variant="h4" component="h1" sx={{ fontWeight: 'bold' }}>
|
||||||
|
Access Type
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
|
||||||
|
<TextField
|
||||||
|
placeholder="Search"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
InputProps={{
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<SearchIcon />
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
sx: {
|
||||||
|
borderRadius: '10px',
|
||||||
|
boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
|
||||||
|
width: '100%',
|
||||||
|
maxWidth: '528px',
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
sx={{ flexGrow: 1, maxWidth: '528px' }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Box>
|
||||||
|
<IconButton onClick={() => openModal()} sx={{ mr: 2, color: 'primary.main' }}>
|
||||||
|
<AddIcon />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton onClick={openColumnsMenu} sx={{ color: 'primary.main' }}>
|
||||||
|
<MenuIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<TableContainer component={Paper} sx={{ boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)', mb: 3 }}>
|
||||||
|
<Table>
|
||||||
|
<TableHead sx={{ backgroundColor: '#f8f9fa' }}>
|
||||||
|
<TableRow>
|
||||||
|
{Object.entries(visibleColumns).map(([key, visible]) =>
|
||||||
|
visible && (
|
||||||
|
<TableCell key={key} sx={{ fontWeight: 'bold' }}>
|
||||||
|
{key.charAt(0).toUpperCase() + key.slice(1)}
|
||||||
|
</TableCell>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{slicedAccessTypes.length === 0 ? (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={Object.keys(visibleColumns).filter(key => visibleColumns[key]).length} align="center">
|
||||||
|
No Data Available
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
) : (
|
||||||
|
slicedAccessTypes.map((type) => (
|
||||||
|
<TableRow key={type.id}>
|
||||||
|
{Object.entries(visibleColumns).map(([key, visible]) =>
|
||||||
|
visible && (
|
||||||
|
<TableCell key={key}>
|
||||||
|
{key === "actions" ? (
|
||||||
|
<Box>
|
||||||
|
<IconButton onClick={() => openModal(type)} sx={{ color: 'success.main', mr: 1 }}>
|
||||||
|
<EditIcon />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton onClick={() => handleDelete(type.id)} sx={{ color: 'error.main' }}>
|
||||||
|
<DeleteIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
) : key === "isActive" ? (
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
sx={{
|
||||||
|
color: type.isActive ? 'success.main' : 'error.main',
|
||||||
|
backgroundColor: type.isActive ? 'rgba(0, 200, 83, 0.1)' : 'rgba(255, 0, 0, 0.1)',
|
||||||
|
px: 1,
|
||||||
|
py: 0.5,
|
||||||
|
borderRadius: 1,
|
||||||
|
display: 'inline-block'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{type.isActive ? "Active" : "Inactive"}
|
||||||
|
</Typography>
|
||||||
|
) : (
|
||||||
|
type[key]
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 2 }}>
|
||||||
|
<Box>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
onClick={openColumnsMenu}
|
||||||
|
startIcon={<MenuIcon />}
|
||||||
|
sx={{ mr: 2 }}
|
||||||
|
>
|
||||||
|
Manage Columns
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Menu
|
||||||
|
anchorEl={columnsAnchorEl}
|
||||||
|
open={Boolean(columnsAnchorEl)}
|
||||||
|
onClose={closeColumnsMenu}
|
||||||
|
>
|
||||||
|
{Object.keys(visibleColumns).map((column) => (
|
||||||
|
<MenuItem key={column} onClick={() => toggleColumn(column)}>
|
||||||
|
<Checkbox checked={visibleColumns[column]} />
|
||||||
|
<Typography>
|
||||||
|
{column.charAt(0).toUpperCase() + column.slice(1)}
|
||||||
|
</Typography>
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Menu>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
onClick={openRecordsMenu}
|
||||||
|
startIcon={<BookIcon />}
|
||||||
|
>
|
||||||
|
Records
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Menu
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
open={Boolean(anchorEl)}
|
||||||
|
onClose={closeRecordsMenu}
|
||||||
|
>
|
||||||
|
{[5, 10, 20, 50].map((number) => (
|
||||||
|
<MenuItem
|
||||||
|
key={number}
|
||||||
|
onClick={() => handleRecordsPerPageChange(number)}
|
||||||
|
selected={recordsPerPage === number}
|
||||||
|
>
|
||||||
|
{number}
|
||||||
|
{recordsPerPage === number && <CheckIcon sx={{ ml: 1 }} />}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Menu>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Pagination
|
||||||
|
count={totalPages}
|
||||||
|
page={currentPage}
|
||||||
|
onChange={handlePageChange}
|
||||||
|
color="primary"
|
||||||
|
shape="rounded"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Add/Edit Modal */}
|
||||||
|
<Modal
|
||||||
|
open={showAddEditModal}
|
||||||
|
onClose={handleClose}
|
||||||
|
aria-labelledby="modal-modal-title"
|
||||||
|
aria-describedby="modal-modal-description"
|
||||||
|
>
|
||||||
|
<Box sx={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
width: 400,
|
||||||
|
bgcolor: 'background.paper',
|
||||||
|
boxShadow: 24,
|
||||||
|
p: 4,
|
||||||
|
borderRadius: 1
|
||||||
|
}}>
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||||
|
<Typography id="modal-modal-title" variant="h6" component="h2">
|
||||||
|
{isEditing ? "Edit Access Type" : "Add Access Type"}
|
||||||
|
</Typography>
|
||||||
|
<IconButton onClick={handleClose}>
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Divider sx={{ mb: 3 }} />
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Type Name"
|
||||||
|
name="typeName"
|
||||||
|
value={currentAccessType.typeName}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
required
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Description"
|
||||||
|
name="description"
|
||||||
|
value={currentAccessType.description}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Checkbox
|
||||||
|
name="isActive"
|
||||||
|
checked={currentAccessType.isActive}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="Active?"
|
||||||
|
sx={{ mb: 3 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2 }}>
|
||||||
|
<Button variant="outlined" onClick={handleClose}>
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
<Button variant="contained" type="submit">
|
||||||
|
{isEditing ? "Update" : "Add"}
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</form>
|
||||||
|
</Box>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AccessTypeManagement;
|
||||||
@@ -1,138 +1,468 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
import React, { useState, useEffect, useRef } from "react";
|
import {
|
||||||
import { Box, Button } from "@mui/material";
|
Button,
|
||||||
import { DataGrid, GridToolbarContainer } from "@mui/x-data-grid";
|
IconButton,
|
||||||
import { BsThreeDotsVertical } from "react-icons/bs"; // Importing react-icons
|
Modal,
|
||||||
|
TextField,
|
||||||
const api = process.env.REACT_APP_API_BASE_URL;
|
Checkbox,
|
||||||
|
FormControlLabel,
|
||||||
function CustomToolbar({ apiRef, handleModal }) {
|
Table,
|
||||||
const handleGoToPage1 = () => {
|
TableBody,
|
||||||
if (apiRef.current) {
|
TableCell,
|
||||||
apiRef.current.setPage(1);
|
TableContainer,
|
||||||
}
|
TableHead,
|
||||||
};
|
TableRow,
|
||||||
|
Paper,
|
||||||
return (
|
Pagination,
|
||||||
<GridToolbarContainer className="flex justify-between p-2 bg-gray-200">
|
Menu,
|
||||||
<Button
|
MenuItem,
|
||||||
onClick={handleGoToPage1}
|
Box,
|
||||||
className="bg-blue-500 text-white px-4 py-2 rounded shadow hover:bg-blue-600"
|
Typography,
|
||||||
>
|
InputAdornment,
|
||||||
Go to page 1
|
Tooltip,
|
||||||
</Button>
|
Dialog,
|
||||||
<Button
|
DialogTitle,
|
||||||
onClick={handleModal}
|
DialogContent,
|
||||||
className="bg-green-500 text-white px-4 py-2 rounded shadow hover:bg-green-600"
|
DialogActions,
|
||||||
>
|
FormControl,
|
||||||
Add item
|
Select,
|
||||||
</Button>
|
InputLabel,
|
||||||
</GridToolbarContainer>
|
CircularProgress,
|
||||||
);
|
} from "@mui/material";
|
||||||
}
|
import {
|
||||||
|
Edit as EditIcon,
|
||||||
function ApiRegistery() {
|
Delete as DeleteIcon,
|
||||||
const [menuItems, setMenuItems] = useState([]);
|
Add as AddIcon,
|
||||||
const [selectedMenuItem, setSelectedMenuItem] = useState(null);
|
Menu as MenuIcon,
|
||||||
// eslint-disable-next-line
|
Close as CloseIcon,
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
Search as SearchIcon,
|
||||||
const apiRef = useRef(null);
|
} from "@mui/icons-material";
|
||||||
|
import { styled } from "@mui/material/styles";
|
||||||
useEffect(() => {
|
import { toast } from "react-toastify";
|
||||||
const fetchData = async () => {
|
import { fetchRegistry, addRegistry, updateRegistry, deleteRegistry } from "./Apiregistryapi";
|
||||||
const token = localStorage.getItem("token"); // Get token from local storage
|
|
||||||
try {
|
const StyledTableRow = styled(TableRow)(({ theme }) => ({
|
||||||
const response = await fetch(
|
'&:nth-of-type(odd)': {
|
||||||
`${api}/Api_registery_header/Api_registery_header`,
|
backgroundColor: theme.palette.action.hover,
|
||||||
{
|
},
|
||||||
headers: {
|
'&:hover': {
|
||||||
Authorization: `Bearer ${token}`,
|
backgroundColor: theme.palette.action.selected,
|
||||||
},
|
},
|
||||||
}
|
}));
|
||||||
);
|
|
||||||
const data = await response.json();
|
const APIRegistry = () => {
|
||||||
setMenuItems(data);
|
const [apiEntries, setApiEntries] = useState([]);
|
||||||
} catch (error) {
|
const [openModal, setOpenModal] = useState(false);
|
||||||
console.error("Error fetching data:", error);
|
const [currentApiEntry, setCurrentApiEntry] = useState({
|
||||||
}
|
table_name: "",
|
||||||
};
|
isActive: false,
|
||||||
|
});
|
||||||
fetchData();
|
const [loading, setLoading] = useState(true);
|
||||||
}, []);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
const handleThreeDotsClick = (menuItemId) => {
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
setSelectedMenuItem(menuItemId === selectedMenuItem ? null : menuItemId);
|
const [recordsPerPage, setRecordsPerPage] = useState(10);
|
||||||
};
|
const [visibleColumns, setVisibleColumns] = useState({
|
||||||
|
id: true,
|
||||||
const columns = [
|
table_name: true,
|
||||||
{
|
createdAt: true,
|
||||||
field: "id",
|
updatedAt: true,
|
||||||
headerName: "ID",
|
isActive: true,
|
||||||
width: 300,
|
actions: true,
|
||||||
headerClassName: "custom-header",
|
});
|
||||||
cellClassName: "custom-cell",
|
const [columnsAnchorEl, setColumnsAnchorEl] = useState(null);
|
||||||
},
|
const [recordsAnchorEl, setRecordsAnchorEl] = useState(null);
|
||||||
{
|
const columnsMenuOpen = Boolean(columnsAnchorEl);
|
||||||
field: "table_name",
|
const recordsMenuOpen = Boolean(recordsAnchorEl);
|
||||||
headerName: "Table Name",
|
|
||||||
width: 350,
|
useEffect(() => {
|
||||||
headerClassName: "custom-header",
|
const loadData = async () => {
|
||||||
cellClassName: "custom-cell",
|
try {
|
||||||
},
|
setLoading(true);
|
||||||
{
|
const data = await fetchRegistry();
|
||||||
field: "actions",
|
setApiEntries(data || []);
|
||||||
headerName: "Actions",
|
} catch (error) {
|
||||||
width: 150,
|
toast.error("Failed to fetch API entries");
|
||||||
renderCell: ({ row }) => (
|
console.error("Error loading data:", error);
|
||||||
<div className="relative">
|
} finally {
|
||||||
<div
|
setLoading(false);
|
||||||
className="cursor-pointer"
|
}
|
||||||
onClick={() => handleThreeDotsClick(row.id)}
|
};
|
||||||
>
|
|
||||||
<BsThreeDotsVertical /> {/* Using react-icons */}
|
loadData();
|
||||||
</div>
|
}, []);
|
||||||
{selectedMenuItem === row.id && (
|
|
||||||
<div className="absolute right-0 mt-2 py-2 w-48 bg-white rounded-lg shadow-xl">
|
const handleColumnsMenuClick = (event) => {
|
||||||
<button className="block px-4 py-2 text-gray-800 hover:bg-gray-200 w-full text-left">
|
setColumnsAnchorEl(event.currentTarget);
|
||||||
Edit
|
};
|
||||||
</button>
|
|
||||||
<button className="block px-4 py-2 text-gray-800 hover:bg-gray-200 w-full text-left">
|
const handleRecordsMenuClick = (event) => {
|
||||||
Delete
|
setRecordsAnchorEl(event.currentTarget);
|
||||||
</button>
|
};
|
||||||
</div>
|
|
||||||
)}
|
const handleMenuClose = () => {
|
||||||
</div>
|
setColumnsAnchorEl(null);
|
||||||
),
|
setRecordsAnchorEl(null);
|
||||||
},
|
};
|
||||||
];
|
|
||||||
|
const toggleColumn = (column) => {
|
||||||
return (
|
setVisibleColumns((prev) => ({
|
||||||
<div className="flex justify-center mt-5">
|
...prev,
|
||||||
<Box className="w-full max-w-7xl">
|
[column]: !prev[column],
|
||||||
<div className="bg-white p-4 rounded shadow-md">
|
}));
|
||||||
<h1 className="text-2xl font-bold mb-4 text-white bg-gray-400 p-3">
|
};
|
||||||
API Registry
|
|
||||||
</h1>
|
const handleInputChange = (event) => {
|
||||||
<DataGrid
|
const { name, value, type, checked } = event.target;
|
||||||
rows={menuItems}
|
setCurrentApiEntry((prev) => ({
|
||||||
columns={columns}
|
...prev,
|
||||||
components={{
|
[name]: type === 'checkbox' ? checked : value,
|
||||||
Toolbar: () => (
|
}));
|
||||||
<CustomToolbar
|
};
|
||||||
apiRef={apiRef}
|
|
||||||
handleModal={() => setIsModalOpen(true)}
|
const handleSearch = (query) => {
|
||||||
/>
|
setSearchQuery(query);
|
||||||
),
|
setCurrentPage(1);
|
||||||
}}
|
};
|
||||||
pageSize={10}
|
|
||||||
onGridReady={(gridApi) => {
|
const handleSubmit = async (event) => {
|
||||||
apiRef.current = gridApi;
|
event.preventDefault();
|
||||||
}}
|
try {
|
||||||
/>
|
setLoading(true);
|
||||||
</div>
|
let response;
|
||||||
</Box>
|
|
||||||
</div>
|
if (isEditing) {
|
||||||
);
|
response = await updateRegistry(currentApiEntry.id, currentApiEntry);
|
||||||
}
|
toast.success("API entry updated successfully!");
|
||||||
|
} else {
|
||||||
export default ApiRegistery;
|
response = await addRegistry(currentApiEntry);
|
||||||
|
toast.success("API entry added successfully!");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Refresh the data
|
||||||
|
const data = await fetchRegistry();
|
||||||
|
setApiEntries(data || []);
|
||||||
|
setOpenModal(false);
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(error.message || "Failed to save API entry");
|
||||||
|
console.error("Save error:", error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenModal = (entry = {
|
||||||
|
table_name: "",
|
||||||
|
isActive: false,
|
||||||
|
}) => {
|
||||||
|
setIsEditing(!!entry.id);
|
||||||
|
setCurrentApiEntry(entry);
|
||||||
|
setOpenModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCloseModal = () => {
|
||||||
|
setOpenModal(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (id) => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
await deleteRegistry(id);
|
||||||
|
const data = await fetchRegistry();
|
||||||
|
setApiEntries(data || []);
|
||||||
|
toast.success("API entry deleted successfully!");
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(error.message || "Failed to delete API entry");
|
||||||
|
console.error("Delete error:", error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRecordsPerPageChange = (value) => {
|
||||||
|
setRecordsPerPage(value);
|
||||||
|
setCurrentPage(1);
|
||||||
|
handleMenuClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Filter and pagination logic
|
||||||
|
const filteredAPIEntries = apiEntries.filter(item =>
|
||||||
|
item.table_name?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
const totalPages = Math.ceil(filteredAPIEntries.length / recordsPerPage);
|
||||||
|
const slicedAPIEntries = filteredAPIEntries.slice(
|
||||||
|
(currentPage - 1) * recordsPerPage,
|
||||||
|
currentPage * recordsPerPage
|
||||||
|
);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<Box display="flex" justifyContent="center" alignItems="center" height="80vh">
|
||||||
|
<CircularProgress />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ marginTop: "11rem", padding: 3 }}>
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
|
||||||
|
<Typography variant="h4" component="h1" sx={{ fontWeight: 'bold' }}>
|
||||||
|
API Registry
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, alignItems: 'center', my: 3, gap: 2 }}>
|
||||||
|
<TextField
|
||||||
|
placeholder="Search"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => handleSearch(e.target.value)}
|
||||||
|
InputProps={{
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<SearchIcon />
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
sx={{
|
||||||
|
width: { xs: '100%', md: '60%' },
|
||||||
|
maxWidth: '528px',
|
||||||
|
'& .MuiOutlinedInput-root': {
|
||||||
|
borderRadius: '10px',
|
||||||
|
boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||||
|
<Tooltip title="Add API Entry">
|
||||||
|
<IconButton onClick={() => handleOpenModal()} color="primary">
|
||||||
|
<AddIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title="Menu">
|
||||||
|
<IconButton onClick={handleColumnsMenuClick} color="primary">
|
||||||
|
<MenuIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<TableContainer component={Paper} sx={{ boxShadow: 3, mb: 3 }}>
|
||||||
|
<Table>
|
||||||
|
<TableHead sx={{ bgcolor: 'primary.main' }}>
|
||||||
|
<TableRow>
|
||||||
|
{Object.entries(visibleColumns)
|
||||||
|
.filter(([_, visible]) => visible)
|
||||||
|
.map(([key]) => (
|
||||||
|
<TableCell key={key} sx={{ color: 'white', fontWeight: 'bold' }}>
|
||||||
|
{key.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{slicedAPIEntries.length === 0 ? (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell
|
||||||
|
colSpan={Object.values(visibleColumns).filter(Boolean).length}
|
||||||
|
align="center"
|
||||||
|
>
|
||||||
|
No Data Available
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
) : (
|
||||||
|
slicedAPIEntries.map((entry) => (
|
||||||
|
<StyledTableRow key={entry.id}>
|
||||||
|
{Object.entries(visibleColumns)
|
||||||
|
.filter(([_, visible]) => visible)
|
||||||
|
.map(([key]) => (
|
||||||
|
<TableCell key={key}>
|
||||||
|
{key === "actions" ? (
|
||||||
|
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||||
|
<Tooltip title="Edit">
|
||||||
|
<IconButton
|
||||||
|
onClick={() => handleOpenModal(entry)}
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
<EditIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title="Delete">
|
||||||
|
<IconButton
|
||||||
|
onClick={() => handleDelete(entry.id)}
|
||||||
|
color="error"
|
||||||
|
>
|
||||||
|
<DeleteIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</Box>
|
||||||
|
) : key === "isActive" ? (
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
color: entry.isActive ? 'success.main' : 'error.main',
|
||||||
|
bgcolor: entry.isActive ? 'success.light' : 'error.light',
|
||||||
|
px: 1,
|
||||||
|
py: 0.5,
|
||||||
|
borderRadius: 1,
|
||||||
|
display: 'inline-block',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{entry.isActive ? "Active" : "Inactive"}
|
||||||
|
</Typography>
|
||||||
|
) : (
|
||||||
|
entry[key]
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</StyledTableRow>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 3 }}>
|
||||||
|
<Box>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
onClick={handleColumnsMenuClick}
|
||||||
|
startIcon={<MenuIcon />}
|
||||||
|
>
|
||||||
|
Manage Columns
|
||||||
|
</Button>
|
||||||
|
<Menu
|
||||||
|
anchorEl={columnsAnchorEl}
|
||||||
|
open={columnsMenuOpen}
|
||||||
|
onClose={handleMenuClose}
|
||||||
|
>
|
||||||
|
{Object.entries(visibleColumns).map(([column, visible]) => (
|
||||||
|
<MenuItem key={column} onClick={() => toggleColumn(column)}>
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Checkbox
|
||||||
|
checked={visible}
|
||||||
|
onChange={() => toggleColumn(column)}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label={column.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}
|
||||||
|
/>
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Menu>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||||
|
<Typography variant="body2">
|
||||||
|
Rows per page:
|
||||||
|
</Typography>
|
||||||
|
<FormControl size="small" sx={{ minWidth: 80 }}>
|
||||||
|
<Select
|
||||||
|
value={recordsPerPage}
|
||||||
|
onChange={(e) => handleRecordsPerPageChange(e.target.value)}
|
||||||
|
displayEmpty
|
||||||
|
inputProps={{ 'aria-label': 'Without label' }}
|
||||||
|
>
|
||||||
|
{[5, 10, 20, 50].map((number) => (
|
||||||
|
<MenuItem key={number} value={number}>
|
||||||
|
{number}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<Pagination
|
||||||
|
count={totalPages}
|
||||||
|
page={currentPage}
|
||||||
|
onChange={(_, value) => setCurrentPage(value)}
|
||||||
|
color="primary"
|
||||||
|
showFirstButton
|
||||||
|
showLastButton
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Dialog open={openModal} onClose={handleCloseModal} fullWidth maxWidth="sm">
|
||||||
|
<DialogTitle>
|
||||||
|
{isEditing ? "Edit API Entry" : "Add API Entry"}
|
||||||
|
<IconButton
|
||||||
|
aria-label="close"
|
||||||
|
onClick={handleCloseModal}
|
||||||
|
sx={{
|
||||||
|
position: 'absolute',
|
||||||
|
right: 8,
|
||||||
|
top: 8,
|
||||||
|
color: (theme) => theme.palette.grey[500],
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="Table Name"
|
||||||
|
name="table_name"
|
||||||
|
value={currentApiEntry.table_name}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
required
|
||||||
|
error={!currentApiEntry.table_name}
|
||||||
|
helperText={!currentApiEntry.table_name ? "Table name is required" : ""}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="Created At"
|
||||||
|
name="createdAt"
|
||||||
|
type="datetime-local"
|
||||||
|
value={currentApiEntry.createdAt || ''}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
InputLabelProps={{
|
||||||
|
shrink: true,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="Updated At"
|
||||||
|
name="updatedAt"
|
||||||
|
type="datetime-local"
|
||||||
|
value={currentApiEntry.updatedAt || ''}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
InputLabelProps={{
|
||||||
|
shrink: true,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Checkbox
|
||||||
|
name="isActive"
|
||||||
|
checked={currentApiEntry.isActive}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="Active?"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={handleCloseModal}>Cancel</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleSubmit}
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
disabled={!currentApiEntry.table_name}
|
||||||
|
>
|
||||||
|
{isEditing ? "Update" : "Add"}
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default APIRegistry;
|
||||||
54
src/components/Dashboard/ApiRegistery/Apiregistryapi.js
Normal file
54
src/components/Dashboard/ApiRegistery/Apiregistryapi.js
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
import apiService from '../../../APIRequestService/APIServices';
|
||||||
|
|
||||||
|
export const fetchRegistry = async () => {
|
||||||
|
try {
|
||||||
|
const response = await apiService.get('/Api_registery_header/Api_registery_header');
|
||||||
|
if (response.data && Array.isArray(response.data)) {
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
throw new Error('Invalid response format');
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error in fetchRegistry:", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const addRegistry = async (payload) => {
|
||||||
|
try {
|
||||||
|
const response = await apiService.post('/Api_registery_header/Api_registery_header', {
|
||||||
|
table_name: payload.table_name,
|
||||||
|
createdAt: payload.createdAt || new Date().toISOString(),
|
||||||
|
updatedAt: payload.updatedAt || new Date().toISOString(),
|
||||||
|
isActive: payload.isActive || false
|
||||||
|
});
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error in addRegistry:", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const updateRegistry = async (id, payload) => {
|
||||||
|
try {
|
||||||
|
const response = await apiService.put(`/Api_registery_header/Api_registery_header/${id}`, {
|
||||||
|
table_name: payload.table_name,
|
||||||
|
createdAt: payload.createdAt,
|
||||||
|
updatedAt: new Date().toISOString(), // Always update the updatedAt timestamp
|
||||||
|
isActive: payload.isActive
|
||||||
|
});
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error in updateRegistry:", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const deleteRegistry = async (id) => {
|
||||||
|
try {
|
||||||
|
const response = await apiService.delete(`/Api_registery_header/Api_registery_header/${id}`);
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error in deleteRegistry:", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
142
src/components/Dashboard/CardList.js
Normal file
142
src/components/Dashboard/CardList.js
Normal file
@@ -0,0 +1,142 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
|
import { faUser, faUsers, faUtensils, faLock, faCogs, faKey } from '@fortawesome/free-solid-svg-icons';
|
||||||
|
import { Card, CardContent, Typography, Box } from '@mui/material';
|
||||||
|
|
||||||
|
const CardItem = ({ title, content, icon, path }) => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
sx={{
|
||||||
|
width: 300,
|
||||||
|
height: 150,
|
||||||
|
m: 2,
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: 'transform 0.2s',
|
||||||
|
'&:hover': {
|
||||||
|
transform: 'scale(1.05)',
|
||||||
|
boxShadow: '10px 10px 10px 10px rgba(25,118,210,0.15)'
|
||||||
|
},
|
||||||
|
boxShadow: '10px 10px 10px 10px rgba(0,0,0,0.05)',
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
borderRadius: '8px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center'
|
||||||
|
}}
|
||||||
|
onClick={() => navigate(path)}
|
||||||
|
>
|
||||||
|
<CardContent sx={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
width: '100%',
|
||||||
|
padding: '16px !important'
|
||||||
|
}}>
|
||||||
|
<Box sx={{
|
||||||
|
backgroundColor: '#1976d2',
|
||||||
|
borderRadius: '50%',
|
||||||
|
width: 50,
|
||||||
|
height: 50,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginRight: 2,
|
||||||
|
color: 'white'
|
||||||
|
}}>
|
||||||
|
<FontAwesomeIcon icon={icon} style={{ fontSize: '1.2rem' }} />
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<Typography variant="subtitle1" component="div" fontWeight="bold">
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body2" color="text.secondary">
|
||||||
|
{content}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const CardList = () => {
|
||||||
|
const cards = [
|
||||||
|
{
|
||||||
|
title: "User Maintenance",
|
||||||
|
content: "Manage users",
|
||||||
|
icon: faUser,
|
||||||
|
path: "/dashboard/setup/user-maintenance"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "User Group Maintenance",
|
||||||
|
content: "Manage user groups",
|
||||||
|
icon: faUsers,
|
||||||
|
path: "/dashboard/setup/user-group-maintenance"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Menu Maintenance",
|
||||||
|
content: "Manage menus",
|
||||||
|
icon: faUtensils,
|
||||||
|
path: "/dashboard/setup/menu-maintenance"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Menu Access Control",
|
||||||
|
content: "Control menu access",
|
||||||
|
icon: faLock,
|
||||||
|
path: "/dashboard/setup/menu-access-control"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "System Parameters",
|
||||||
|
content: "Configure system parameters",
|
||||||
|
icon: faCogs,
|
||||||
|
path: "/dashboard/setup/system-parameters"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Access Type",
|
||||||
|
content: "Manage access types",
|
||||||
|
icon: faKey,
|
||||||
|
path: "/dashboard/setup/access-type"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Document Sequence",
|
||||||
|
content: "generate sequence",
|
||||||
|
icon: faCogs,
|
||||||
|
path: "/dashboard/setup/document-sequence"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Api Registry",
|
||||||
|
content: "Manage APIs",
|
||||||
|
icon: faUser,
|
||||||
|
path: "/dashboard/setup/api-registry"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Token Registry",
|
||||||
|
content: "Manage tokens",
|
||||||
|
icon: faKey,
|
||||||
|
path: "/dashboard/setup/token-registry"
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{
|
||||||
|
display: 'flex',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '2rem',
|
||||||
|
//backgroundColor: '#f5f5f5',
|
||||||
|
// minHeight: '100vh'
|
||||||
|
}}>
|
||||||
|
{cards.map((card, index) => (
|
||||||
|
<CardItem
|
||||||
|
key={index}
|
||||||
|
title={card.title}
|
||||||
|
content={card.content}
|
||||||
|
icon={card.icon}
|
||||||
|
path={card.path}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CardList;
|
||||||
@@ -1,64 +1,64 @@
|
|||||||
.modal-overlay {
|
.modal-overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close {
|
.close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close:hover {
|
.close:hover {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
.popup {
|
.popup {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-content {
|
.popup-content {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
width: 400px; /* Adjust width as needed */
|
width: 400px; /* Adjust width as needed */
|
||||||
}
|
}
|
||||||
|
|
||||||
.close {
|
.close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close:hover {
|
.close:hover {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1,301 +1,302 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect, useRef } from "react";
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Button,
|
Button,
|
||||||
Modal,
|
Modal,
|
||||||
TextField,
|
TextField,
|
||||||
Typography,
|
Typography,
|
||||||
FormControl,
|
FormControl,
|
||||||
FormControlLabel,
|
FormControlLabel,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
Radio,
|
Radio,
|
||||||
RadioGroup,
|
RadioGroup,
|
||||||
Autocomplete,
|
Autocomplete,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import { DataGrid, GridToolbarContainer } from "@mui/x-data-grid";
|
import { DataGrid, GridToolbarContainer } from "@mui/x-data-grid";
|
||||||
import { FaEllipsisV } from "react-icons/fa"; // Importing react-icons instead of Font Awesome
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import AirplanemodeActiveIcon from "@mui/icons-material/AirplanemodeActive";
|
import { faEllipsisV } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { Link } from "react-router-dom";
|
import AirplanemodeActiveIcon from "@mui/icons-material/AirplanemodeActive";
|
||||||
import Extension from "./Extension";
|
import { Link } from "react-router-dom";
|
||||||
|
import Extension from "./Extension";
|
||||||
function CustomToolbar({ handleModal }) {
|
|
||||||
return (
|
function CustomToolbar({ handleModal }) {
|
||||||
<GridToolbarContainer className="flex justify-between p-2 bg-gray-200">
|
return (
|
||||||
<Button
|
<GridToolbarContainer className="flex justify-between p-2 bg-gray-200">
|
||||||
className="bg-blue-500 text-white px-4 py-2 rounded shadow hover:bg-blue-600"
|
<Button
|
||||||
onClick={handleModal}
|
className="bg-blue-500 text-white px-4 py-2 rounded shadow hover:bg-blue-600"
|
||||||
>
|
onClick={handleModal}
|
||||||
+
|
>
|
||||||
</Button>
|
+
|
||||||
</GridToolbarContainer>
|
</Button>
|
||||||
);
|
</GridToolbarContainer>
|
||||||
}
|
);
|
||||||
|
}
|
||||||
function CodeExtension() {
|
|
||||||
const [menuItems, setMenuItems] = useState([]);
|
function CodeExtension() {
|
||||||
const [selectedMenuItem, setSelectedMenuItem] = useState(null);
|
const [menuItems, setMenuItems] = useState([]);
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
const [selectedMenuItem, setSelectedMenuItem] = useState(null);
|
||||||
const [formData, setFormData] = useState({
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
name: "",
|
const [formData, setFormData] = useState({
|
||||||
email: "",
|
name: "",
|
||||||
testing: "",
|
email: "",
|
||||||
dataType: "",
|
testing: "",
|
||||||
});
|
dataType: "",
|
||||||
|
});
|
||||||
useEffect(() => {
|
|
||||||
const fetchData = async () => {
|
useEffect(() => {
|
||||||
const token = localStorage.getItem("authToken"); // Get token from local storage
|
const fetchData = async () => {
|
||||||
try {
|
const token = localStorage.getItem("token"); // Get token from local storage
|
||||||
const response = await fetch(`${process.env.REACT_APP_API_BASE_URL}/api/extension`, {
|
try {
|
||||||
headers: {
|
const response = await fetch(`${process.env.REACT_APP_API_BASE_URL}/api/extension`, {
|
||||||
Authorization: `Bearer ${token}`,
|
headers: {
|
||||||
},
|
Authorization: `Bearer ${token}`,
|
||||||
});
|
},
|
||||||
const data = await response.json();
|
});
|
||||||
setMenuItems(data);
|
const data = await response.json();
|
||||||
} catch (error) {
|
setMenuItems(data);
|
||||||
console.error("Error fetching data:", error);
|
} catch (error) {
|
||||||
}
|
console.error("Error fetching data:", error);
|
||||||
};
|
}
|
||||||
|
};
|
||||||
fetchData();
|
|
||||||
}, []);
|
fetchData();
|
||||||
|
}, []);
|
||||||
const handleThreeDotsClick = (menuItemId) => {
|
|
||||||
setSelectedMenuItem(menuItemId === selectedMenuItem ? null : menuItemId);
|
const handleThreeDotsClick = (menuItemId) => {
|
||||||
};
|
setSelectedMenuItem(menuItemId === selectedMenuItem ? null : menuItemId);
|
||||||
|
};
|
||||||
const handleModalOpen = () => {
|
|
||||||
setIsModalOpen(true);
|
const handleModalOpen = () => {
|
||||||
};
|
setIsModalOpen(true);
|
||||||
|
};
|
||||||
const handleModalClose = () => {
|
|
||||||
setIsModalOpen(false);
|
const handleModalClose = () => {
|
||||||
setFormData({
|
setIsModalOpen(false);
|
||||||
name: "",
|
setFormData({
|
||||||
email: "",
|
name: "",
|
||||||
testing: "",
|
email: "",
|
||||||
dataType: "",
|
testing: "",
|
||||||
});
|
dataType: "",
|
||||||
};
|
});
|
||||||
|
};
|
||||||
const handleChange = (e) => {
|
|
||||||
const { name, value } = e.target;
|
const handleChange = (e) => {
|
||||||
setFormData({ ...formData, [name]: value });
|
const { name, value } = e.target;
|
||||||
};
|
setFormData({ ...formData, [name]: value });
|
||||||
|
};
|
||||||
const handleFormSubmit = (submittedDataType) => {
|
|
||||||
setFormData({ ...formData, dataType: submittedDataType });
|
const handleFormSubmit = (submittedDataType) => {
|
||||||
handleModalOpen();
|
setFormData({ ...formData, dataType: submittedDataType });
|
||||||
};
|
handleModalOpen();
|
||||||
|
};
|
||||||
const columns = [
|
|
||||||
{ field: "goto", headerName: "Goto", width: 200 },
|
const columns = [
|
||||||
{ field: "field_name", headerName: "Field Name", width: 250 },
|
{ field: "goto", headerName: "Goto", width: 200 },
|
||||||
{ field: "mapping", headerName: "Mapping", width: 200 },
|
{ field: "field_name", headerName: "Field Name", width: 250 },
|
||||||
{ field: "data_type", headerName: "Data Type", width: 200 },
|
{ field: "mapping", headerName: "Mapping", width: 200 },
|
||||||
{
|
{ field: "data_type", headerName: "Data Type", width: 200 },
|
||||||
field: "actions",
|
{
|
||||||
headerName: "Actions",
|
field: "actions",
|
||||||
width: 150,
|
headerName: "Actions",
|
||||||
renderCell: ({ row }) => (
|
width: 150,
|
||||||
<div className="relative">
|
renderCell: ({ row }) => (
|
||||||
<div
|
<div className="relative">
|
||||||
className="cursor-pointer"
|
<div
|
||||||
onClick={() => handleThreeDotsClick(row.id)}
|
className="cursor-pointer"
|
||||||
>
|
onClick={() => handleThreeDotsClick(row.id)}
|
||||||
<FaEllipsisV /> {/* Using react-icons instead of Font Awesome */}
|
>
|
||||||
</div>
|
<FontAwesomeIcon icon={faEllipsisV} />
|
||||||
{selectedMenuItem === row.id && (
|
</div>
|
||||||
<div className="absolute right-0 mt-2 py-2 w-48 bg-white rounded-lg shadow-xl">
|
{selectedMenuItem === row.id && (
|
||||||
{/* Implement your actions buttons here */}
|
<div className="absolute right-0 mt-2 py-2 w-48 bg-white rounded-lg shadow-xl">
|
||||||
</div>
|
{/* Implement your actions buttons here */}
|
||||||
)}
|
</div>
|
||||||
</div>
|
)}
|
||||||
),
|
</div>
|
||||||
},
|
),
|
||||||
];
|
},
|
||||||
|
];
|
||||||
const renderInputField = () => {
|
|
||||||
switch (formData.dataType) {
|
const renderInputField = () => {
|
||||||
case "date":
|
switch (formData.dataType) {
|
||||||
return (
|
case "date":
|
||||||
<TextField
|
return (
|
||||||
label="Date"
|
<TextField
|
||||||
name="date"
|
label="Date"
|
||||||
type="date"
|
name="date"
|
||||||
value={formData.date}
|
type="date"
|
||||||
onChange={handleChange}
|
value={formData.date}
|
||||||
fullWidth
|
onChange={handleChange}
|
||||||
className="mt-2"
|
fullWidth
|
||||||
/>
|
className="mt-2"
|
||||||
);
|
/>
|
||||||
case "textfield":
|
);
|
||||||
return (
|
case "textfield":
|
||||||
<TextField
|
return (
|
||||||
label="Text Field"
|
<TextField
|
||||||
name="textfield"
|
label="Text Field"
|
||||||
value={formData.textfield}
|
name="textfield"
|
||||||
onChange={handleChange}
|
value={formData.textfield}
|
||||||
fullWidth
|
onChange={handleChange}
|
||||||
className="mt-2"
|
fullWidth
|
||||||
/>
|
className="mt-2"
|
||||||
);
|
/>
|
||||||
case "longtext":
|
);
|
||||||
return (
|
case "longtext":
|
||||||
<TextField
|
return (
|
||||||
label="Long Text"
|
<TextField
|
||||||
name="longtext"
|
label="Long Text"
|
||||||
value={formData.longtext}
|
name="longtext"
|
||||||
onChange={handleChange}
|
value={formData.longtext}
|
||||||
multiline
|
onChange={handleChange}
|
||||||
rows={4}
|
multiline
|
||||||
fullWidth
|
rows={4}
|
||||||
className="mt-2"
|
fullWidth
|
||||||
/>
|
className="mt-2"
|
||||||
);
|
/>
|
||||||
case "checkbox":
|
);
|
||||||
return (
|
case "checkbox":
|
||||||
<FormControlLabel
|
return (
|
||||||
className="mt-2"
|
<FormControlLabel
|
||||||
control={
|
className="mt-2"
|
||||||
<Checkbox
|
control={
|
||||||
checked={formData.checkbox || false}
|
<Checkbox
|
||||||
onChange={(e) =>
|
checked={formData.checkbox || false}
|
||||||
setFormData({ ...formData, checkbox: e.target.checked })
|
onChange={(e) =>
|
||||||
}
|
setFormData({ ...formData, checkbox: e.target.checked })
|
||||||
/>
|
}
|
||||||
}
|
/>
|
||||||
label="Checkbox"
|
}
|
||||||
/>
|
label="Checkbox"
|
||||||
);
|
/>
|
||||||
case "radiobutton":
|
);
|
||||||
return (
|
case "radiobutton":
|
||||||
<FormControl component="fieldset" className="mt-2">
|
return (
|
||||||
<RadioGroup
|
<FormControl component="fieldset" className="mt-2">
|
||||||
name="radiobutton"
|
<RadioGroup
|
||||||
value={formData.radiobutton || ""}
|
name="radiobutton"
|
||||||
onChange={(e) =>
|
value={formData.radiobutton || ""}
|
||||||
setFormData({ ...formData, radiobutton: e.target.value })
|
onChange={(e) =>
|
||||||
}
|
setFormData({ ...formData, radiobutton: e.target.value })
|
||||||
>
|
}
|
||||||
<FormControlLabel
|
>
|
||||||
value="option1"
|
<FormControlLabel
|
||||||
control={<Radio />}
|
value="option1"
|
||||||
label="Option 1"
|
control={<Radio />}
|
||||||
/>
|
label="Option 1"
|
||||||
<FormControlLabel
|
/>
|
||||||
value="option2"
|
<FormControlLabel
|
||||||
control={<Radio />}
|
value="option2"
|
||||||
label="Option 2"
|
control={<Radio />}
|
||||||
/>
|
label="Option 2"
|
||||||
</RadioGroup>
|
/>
|
||||||
</FormControl>
|
</RadioGroup>
|
||||||
);
|
</FormControl>
|
||||||
case "autocomplete":
|
);
|
||||||
return (
|
case "autocomplete":
|
||||||
<Autocomplete
|
return (
|
||||||
options={["Option 1", "Option 2", "Option 3"]}
|
<Autocomplete
|
||||||
renderInput={(params) => (
|
options={["Option 1", "Option 2", "Option 3"]}
|
||||||
<TextField {...params} label="Autocomplete" />
|
renderInput={(params) => (
|
||||||
)}
|
<TextField {...params} label="Autocomplete" />
|
||||||
value={formData.autocomplete || ""}
|
)}
|
||||||
onChange={(e, newValue) =>
|
value={formData.autocomplete || ""}
|
||||||
setFormData({ ...formData, autocomplete: newValue })
|
onChange={(e, newValue) =>
|
||||||
}
|
setFormData({ ...formData, autocomplete: newValue })
|
||||||
fullWidth
|
}
|
||||||
className="mt-2"
|
fullWidth
|
||||||
/>
|
className="mt-2"
|
||||||
);
|
/>
|
||||||
default:
|
);
|
||||||
return null;
|
default:
|
||||||
}
|
return null;
|
||||||
};
|
}
|
||||||
|
};
|
||||||
return (
|
|
||||||
<>
|
return (
|
||||||
<Box className="fixed top-0 left-0 w-full z-10 bg-white shadow">
|
<>
|
||||||
{/* Your header content here */}
|
<Box className="fixed top-0 left-0 w-full z-10 bg-white shadow">
|
||||||
</Box>
|
{/* Your header content here */}
|
||||||
<Box className="flex justify-center items-center min-h-screen bg-gray-100 py-4">
|
</Box>
|
||||||
<Box className="w-full max-w-6xl bg-white p-4 rounded shadow-md">
|
<Box className="flex justify-center items-center min-h-screen bg-gray-100 py-4">
|
||||||
<Typography
|
<Box className="w-full max-w-6xl bg-white p-4 rounded shadow-md">
|
||||||
variant="h4"
|
<Typography
|
||||||
className="text-center mb-4 text-3xl text-white bg-gray-400 p-3"
|
variant="h4"
|
||||||
>
|
className="text-center mb-4 text-3xl text-white bg-gray-400 p-3"
|
||||||
Token Registry
|
>
|
||||||
</Typography>
|
Token Registry
|
||||||
<div className="bg-gray-50 p-2 rounded shadow-inner">
|
</Typography>
|
||||||
<DataGrid
|
<div className="bg-gray-50 p-2 rounded shadow-inner">
|
||||||
rows={menuItems}
|
<DataGrid
|
||||||
columns={columns}
|
rows={menuItems}
|
||||||
pageSize={10}
|
columns={columns}
|
||||||
components={{
|
pageSize={10}
|
||||||
Toolbar: () => <CustomToolbar handleModal={handleModalOpen} />,
|
components={{
|
||||||
}}
|
Toolbar: () => <CustomToolbar handleModal={handleModalOpen} />,
|
||||||
className="data-grid"
|
}}
|
||||||
/>
|
className="data-grid"
|
||||||
</div>
|
/>
|
||||||
<Modal open={isModalOpen} onClose={handleModalClose} centered>
|
</div>
|
||||||
<Box className="w-full max-w-lg bg-white p-4 rounded shadow-md fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
<Modal open={isModalOpen} onClose={handleModalClose} centered>
|
||||||
<Extension onSubmit={handleFormSubmit} />
|
<Box className="w-full max-w-lg bg-white p-4 rounded shadow-md fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
||||||
<Typography variant="h5" className="flex items-center mb-4">
|
<Extension onSubmit={handleFormSubmit} />
|
||||||
<Link to="/Extension">
|
<Typography variant="h5" className="flex items-center mb-4">
|
||||||
<AirplanemodeActiveIcon className="mr-2" />
|
<Link to="/Extension">
|
||||||
</Link>
|
<AirplanemodeActiveIcon className="mr-2" />
|
||||||
Add Item
|
</Link>
|
||||||
</Typography>
|
Add Item
|
||||||
<form
|
</Typography>
|
||||||
onSubmit={(e) => {
|
<form
|
||||||
e.preventDefault();
|
onSubmit={(e) => {
|
||||||
handleFormSubmit(formData.dataType);
|
e.preventDefault();
|
||||||
}}
|
handleFormSubmit(formData.dataType);
|
||||||
>
|
}}
|
||||||
<div className="mb-2">
|
>
|
||||||
<TextField
|
<div className="mb-2">
|
||||||
label="Name"
|
<TextField
|
||||||
name="name"
|
label="Name"
|
||||||
value={formData.name}
|
name="name"
|
||||||
onChange={handleChange}
|
value={formData.name}
|
||||||
fullWidth
|
onChange={handleChange}
|
||||||
/>
|
fullWidth
|
||||||
</div>
|
/>
|
||||||
<div className="mb-2">
|
</div>
|
||||||
<TextField
|
<div className="mb-2">
|
||||||
label="Email"
|
<TextField
|
||||||
name="email"
|
label="Email"
|
||||||
value={formData.email}
|
name="email"
|
||||||
onChange={handleChange}
|
value={formData.email}
|
||||||
fullWidth
|
onChange={handleChange}
|
||||||
/>
|
fullWidth
|
||||||
</div>
|
/>
|
||||||
<div className="mb-2">
|
</div>
|
||||||
<TextField
|
<div className="mb-2">
|
||||||
label="Testing"
|
<TextField
|
||||||
name="testing"
|
label="Testing"
|
||||||
value={formData.testing}
|
name="testing"
|
||||||
onChange={handleChange}
|
value={formData.testing}
|
||||||
fullWidth
|
onChange={handleChange}
|
||||||
/>
|
fullWidth
|
||||||
</div>
|
/>
|
||||||
{renderInputField()}
|
</div>
|
||||||
<div className="mt-4">
|
{renderInputField()}
|
||||||
<Button
|
<div className="mt-4">
|
||||||
type="submit"
|
<Button
|
||||||
variant="contained"
|
type="submit"
|
||||||
color="primary"
|
variant="contained"
|
||||||
fullWidth
|
color="primary"
|
||||||
>
|
fullWidth
|
||||||
Submit
|
>
|
||||||
</Button>
|
Submit
|
||||||
</div>
|
</Button>
|
||||||
</form>
|
</div>
|
||||||
</Box>
|
</form>
|
||||||
</Modal>
|
</Box>
|
||||||
</Box>
|
</Modal>
|
||||||
</Box>
|
</Box>
|
||||||
</>
|
</Box>
|
||||||
);
|
</>
|
||||||
}
|
);
|
||||||
|
}
|
||||||
export default CodeExtension;
|
|
||||||
|
export default CodeExtension;
|
||||||
|
|||||||
@@ -1,161 +1,161 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import { useLocation, useNavigate } from "react-router-dom";
|
import { useLocation, useNavigate } from "react-router-dom";
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
IconButton,
|
IconButton,
|
||||||
Table,
|
Table,
|
||||||
TableBody,
|
TableBody,
|
||||||
TableCell,
|
TableCell,
|
||||||
TableContainer,
|
TableContainer,
|
||||||
TableHead,
|
TableHead,
|
||||||
TableRow,
|
TableRow,
|
||||||
Paper,
|
Paper,
|
||||||
Typography,
|
Typography,
|
||||||
Box,
|
Box,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import DeleteIcon from "@mui/icons-material/Delete";
|
import DeleteIcon from "@mui/icons-material/Delete";
|
||||||
import BuildIcon from "@mui/icons-material/Build";
|
import BuildIcon from "@mui/icons-material/Build";
|
||||||
import AddIcon from "@mui/icons-material/Add";
|
import AddIcon from "@mui/icons-material/Add";
|
||||||
|
|
||||||
// Define the API base URL using the environment variable
|
// Define the API base URL using the environment variable
|
||||||
const api = process.env.REACT_APP_API_BASE_URL;
|
const api = process.env.REACT_APP_API_BASE_URL;
|
||||||
|
|
||||||
const DynamicTable = () => {
|
const DynamicTable = () => {
|
||||||
const [forms, setForms] = useState([]);
|
const [forms, setForms] = useState([]);
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (location.state && location.state.formData) {
|
if (location.state && location.state.formData) {
|
||||||
setForms((prevForms) => [...prevForms, location.state.formData]);
|
setForms((prevForms) => [...prevForms, location.state.formData]);
|
||||||
} else {
|
} else {
|
||||||
fetchForms();
|
fetchForms();
|
||||||
}
|
}
|
||||||
}, [location.state]);
|
}, [location.state]);
|
||||||
|
|
||||||
const fetchForms = async () => {
|
const fetchForms = async () => {
|
||||||
const token = localStorage.getItem("authToken"); // Get token from local storage
|
const token = localStorage.getItem("token"); // Get token from local storage
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(`${api}/api/form_setup`, {
|
const response = await axios.get(`${api}/api/form_setup`, {
|
||||||
headers: {
|
headers: {
|
||||||
Authorization: `Bearer ${token}`,
|
Authorization: `Bearer ${token}`,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
if (Array.isArray(response.data)) {
|
if (Array.isArray(response.data)) {
|
||||||
setForms(response.data);
|
setForms(response.data);
|
||||||
} else {
|
} else {
|
||||||
console.error("Unexpected response format:", response.data);
|
console.error("Unexpected response format:", response.data);
|
||||||
setForms([]);
|
setForms([]);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error fetching data:", error);
|
console.error("Error fetching data:", error);
|
||||||
setForms([]);
|
setForms([]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDelete = async (id) => {
|
const handleDelete = async (id) => {
|
||||||
const token = localStorage.getItem("authToken"); // Get token from local storage
|
const token = localStorage.getItem("token"); // Get token from local storage
|
||||||
try {
|
try {
|
||||||
await axios.delete(`${api}/api/form_setup/${id}`, {
|
await axios.delete(`${api}/api/form_setup/${id}`, {
|
||||||
headers: {
|
headers: {
|
||||||
Authorization: `Bearer ${token}`,
|
Authorization: `Bearer ${token}`,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
fetchForms();
|
fetchForms();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error deleting form:", error);
|
console.error("Error deleting form:", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleBuild = async (id) => {
|
const handleBuild = async (id) => {
|
||||||
const token = localStorage.getItem("authToken"); // Get token from local storage
|
const token = localStorage.getItem("token"); // Get token from local storage
|
||||||
try {
|
try {
|
||||||
await axios.post(
|
await axios.post(
|
||||||
`${api}/api/dynamic_form_build`,
|
`${api}/api/dynamic_form_build`,
|
||||||
{ id },
|
{ id },
|
||||||
{
|
{
|
||||||
headers: {
|
headers: {
|
||||||
Authorization: `Bearer ${token}`,
|
Authorization: `Bearer ${token}`,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error building form:", error);
|
console.error("Error building form:", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleAdd = () => {
|
const handleAdd = () => {
|
||||||
navigate("/form");
|
navigate("/form");
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box className="p-5 bg-gray-100 min-h-screen">
|
<Box className="p-5 bg-gray-100 min-h-screen">
|
||||||
<Typography
|
<Typography
|
||||||
variant="h4"
|
variant="h4"
|
||||||
gutterBottom
|
gutterBottom
|
||||||
className="text-center text-white bg-gray-700 text-3xl p-3 mb-5 rounded"
|
className="text-center text-white bg-gray-700 text-3xl p-3 mb-5 rounded"
|
||||||
>
|
>
|
||||||
Dynamic Form
|
Dynamic Form
|
||||||
</Typography>
|
</Typography>
|
||||||
<Button
|
<Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
color="primary"
|
color="primary"
|
||||||
startIcon={<AddIcon />}
|
startIcon={<AddIcon />}
|
||||||
onClick={handleAdd}
|
onClick={handleAdd}
|
||||||
className="mb-5 bg-blue-500 hover:bg-blue-600"
|
className="mb-5 bg-blue-500 hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
Add
|
Add
|
||||||
</Button>
|
</Button>
|
||||||
<TableContainer component={Paper} className="overflow-x-auto">
|
<TableContainer component={Paper} className="overflow-x-auto">
|
||||||
<Table>
|
<Table>
|
||||||
<TableHead className="bg-gray-300 text-black">
|
<TableHead className="bg-gray-300 text-black">
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell>Go To</TableCell>
|
<TableCell>Go To</TableCell>
|
||||||
<TableCell>Form Name</TableCell>
|
<TableCell>Form Name</TableCell>
|
||||||
<TableCell>Form Description</TableCell>
|
<TableCell>Form Description</TableCell>
|
||||||
<TableCell>Related To</TableCell>
|
<TableCell>Related To</TableCell>
|
||||||
<TableCell>Page Event</TableCell>
|
<TableCell>Page Event</TableCell>
|
||||||
<TableCell>Button Caption</TableCell>
|
<TableCell>Button Caption</TableCell>
|
||||||
<TableCell>Go To Form</TableCell>
|
<TableCell>Go To Form</TableCell>
|
||||||
<TableCell>Action</TableCell>
|
<TableCell>Action</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{forms.map((form, index) => (
|
{forms.map((form, index) => (
|
||||||
<TableRow key={index}>
|
<TableRow key={index}>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<Button
|
<Button
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
startIcon={<BuildIcon />}
|
startIcon={<BuildIcon />}
|
||||||
onClick={() => handleBuild(form.id)}
|
onClick={() => handleBuild(form.id)}
|
||||||
className="border-blue-500 text-blue-500 hover:bg-blue-100"
|
className="border-blue-500 text-blue-500 hover:bg-blue-100"
|
||||||
>
|
>
|
||||||
Build
|
Build
|
||||||
</Button>
|
</Button>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>{form.formName}</TableCell>
|
<TableCell>{form.formName}</TableCell>
|
||||||
<TableCell>{form.formDescription}</TableCell>
|
<TableCell>{form.formDescription}</TableCell>
|
||||||
<TableCell>{form.relatedTo}</TableCell>
|
<TableCell>{form.relatedTo}</TableCell>
|
||||||
<TableCell>{form.pageEvent}</TableCell>
|
<TableCell>{form.pageEvent}</TableCell>
|
||||||
<TableCell>{form.buttonCaption}</TableCell>
|
<TableCell>{form.buttonCaption}</TableCell>
|
||||||
<TableCell>{form.goToForm}</TableCell>
|
<TableCell>{form.goToForm}</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<IconButton
|
<IconButton
|
||||||
color="secondary"
|
color="secondary"
|
||||||
onClick={() => handleDelete(form.id)}
|
onClick={() => handleDelete(form.id)}
|
||||||
className="text-red-500 hover:text-red-700"
|
className="text-red-500 hover:text-red-700"
|
||||||
>
|
>
|
||||||
<DeleteIcon />
|
<DeleteIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
</TableContainer>
|
</TableContainer>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DynamicTable;
|
export default DynamicTable;
|
||||||
|
|||||||
@@ -1,93 +1,93 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { TextField, Button, Typography, Select, MenuItem } from '@mui/material';
|
import { TextField, Button, Typography, Select, MenuItem } from '@mui/material';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
const Extension = ({ onSubmit }) => {
|
const Extension = ({ onSubmit }) => {
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
type: '',
|
type: '',
|
||||||
fieldName: '',
|
fieldName: '',
|
||||||
mapping: '',
|
mapping: '',
|
||||||
dataType: ''
|
dataType: ''
|
||||||
});
|
});
|
||||||
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const handleChange = (e) => {
|
const handleChange = (e) => {
|
||||||
const { name, value } = e.target;
|
const { name, value } = e.target;
|
||||||
setFormData({ ...formData, [name]: value });
|
setFormData({ ...formData, [name]: value });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSubmit = (e) => {
|
const handleSubmit = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (typeof onSubmit === 'function') {
|
if (typeof onSubmit === 'function') {
|
||||||
onSubmit(formData.dataType);
|
onSubmit(formData.dataType);
|
||||||
}
|
}
|
||||||
// Navigate to CodeExtension page with the form data
|
// Navigate to CodeExtension page with the form data
|
||||||
navigate('/CodeExtension', { state: { formData } });
|
navigate('/Codeextension', { state: { formData } });
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ maxWidth: '600px', margin: '0 auto' }}>
|
<div style={{ maxWidth: '600px', margin: '0 auto' }}>
|
||||||
<Typography variant="h4" gutterBottom>Add Item</Typography>
|
<Typography variant="h4" gutterBottom>Add Item</Typography>
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<div>
|
<div>
|
||||||
<Select
|
<Select
|
||||||
label="Type"
|
label="Type"
|
||||||
name="type"
|
name="type"
|
||||||
value={formData.type}
|
value={formData.type}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
fullWidth
|
fullWidth
|
||||||
required
|
required
|
||||||
>
|
>
|
||||||
<MenuItem value="Header">Header</MenuItem>
|
<MenuItem value="Header">Header</MenuItem>
|
||||||
<MenuItem value="Line">Line</MenuItem>
|
<MenuItem value="Line">Line</MenuItem>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<TextField
|
<TextField
|
||||||
label="Field Name"
|
label="Field Name"
|
||||||
name="fieldName"
|
name="fieldName"
|
||||||
value={formData.fieldName}
|
value={formData.fieldName}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
fullWidth
|
fullWidth
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Select
|
<Select
|
||||||
label="Mapping"
|
label="Mapping"
|
||||||
name="mapping"
|
name="mapping"
|
||||||
value={formData.mapping}
|
value={formData.mapping}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
fullWidth
|
fullWidth
|
||||||
required
|
required
|
||||||
>
|
>
|
||||||
{[...Array(15).keys()].map(num => (
|
{[...Array(15).keys()].map(num => (
|
||||||
<MenuItem key={num + 1} value={`EXTN${num + 1}`}>{`EXTN${num + 1}`}</MenuItem>
|
<MenuItem key={num + 1} value={`EXTN${num + 1}`}>{`EXTN${num + 1}`}</MenuItem>
|
||||||
))}
|
))}
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Select
|
<Select
|
||||||
label="Data Type"
|
label="Data Type"
|
||||||
name="dataType"
|
name="dataType"
|
||||||
value={formData.dataType}
|
value={formData.dataType}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
fullWidth
|
fullWidth
|
||||||
required
|
required
|
||||||
>
|
>
|
||||||
<MenuItem value="textfield">Textfield</MenuItem>
|
<MenuItem value="textfield">Textfield</MenuItem>
|
||||||
<MenuItem value="longtext">Longtext</MenuItem>
|
<MenuItem value="longtext">Longtext</MenuItem>
|
||||||
<MenuItem value="date">Date</MenuItem>
|
<MenuItem value="date">Date</MenuItem>
|
||||||
<MenuItem value="checkbox">Checkbox</MenuItem>
|
<MenuItem value="checkbox">Checkbox</MenuItem>
|
||||||
<MenuItem value="radiobutton">Radiobutton</MenuItem>
|
<MenuItem value="radiobutton">Radiobutton</MenuItem>
|
||||||
<MenuItem value="autocomplete">Autocomplete</MenuItem>
|
<MenuItem value="autocomplete">Autocomplete</MenuItem>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
<Button type="submit" variant="contained" sx={{ mt: 2 }}>Submit</Button>
|
<Button type="submit" variant="contained" sx={{ mt: 2 }}>Submit</Button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Extension;
|
export default Extension;
|
||||||
|
|||||||
@@ -1,217 +1,217 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { v4 as uuidv4 } from "uuid";
|
import { v4 as uuidv4 } from "uuid";
|
||||||
|
|
||||||
function Form() {
|
function DynamicForm() {
|
||||||
const [components, setComponents] = useState([
|
const [components, setComponents] = useState([
|
||||||
{
|
{
|
||||||
id: uuidv4(),
|
id: uuidv4(),
|
||||||
label: "",
|
label: "",
|
||||||
type: "",
|
type: "",
|
||||||
mapping: "",
|
mapping: "",
|
||||||
readonly: false,
|
readonly: false,
|
||||||
values: "",
|
values: "",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
const [formDetails, setFormDetails] = useState({
|
const [formDetails, setFormDetails] = useState({
|
||||||
formName: "",
|
formName: "",
|
||||||
formDescription: "",
|
formDescription: "",
|
||||||
relatedTo: "",
|
relatedTo: "",
|
||||||
pageEvent: "",
|
pageEvent: "",
|
||||||
buttonName: "",
|
buttonName: "",
|
||||||
});
|
});
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const handleFormChange = (e) => {
|
const handleFormChange = (e) => {
|
||||||
const { name, value } = e.target;
|
const { name, value } = e.target;
|
||||||
setFormDetails({ ...formDetails, [name]: value });
|
setFormDetails({ ...formDetails, [name]: value });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleComponentChange = (index, field, value) => {
|
const handleComponentChange = (index, field, value) => {
|
||||||
const updatedComponents = components.map((component, i) =>
|
const updatedComponents = components.map((component, i) =>
|
||||||
i === index ? { ...component, [field]: value } : component
|
i === index ? { ...component, [field]: value } : component
|
||||||
);
|
);
|
||||||
setComponents(updatedComponents);
|
setComponents(updatedComponents);
|
||||||
};
|
};
|
||||||
|
|
||||||
const addComponent = () => {
|
const addComponent = () => {
|
||||||
setComponents([
|
setComponents([
|
||||||
...components,
|
...components,
|
||||||
{
|
{
|
||||||
id: uuidv4(),
|
id: uuidv4(),
|
||||||
label: "",
|
label: "",
|
||||||
type: "",
|
type: "",
|
||||||
mapping: "",
|
mapping: "",
|
||||||
readonly: false,
|
readonly: false,
|
||||||
values: "",
|
values: "",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
};
|
};
|
||||||
|
|
||||||
const removeComponent = (index) => {
|
const removeComponent = (index) => {
|
||||||
setComponents(components.filter((_, i) => i !== index));
|
setComponents(components.filter((_, i) => i !== index));
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSubmit = (e) => {
|
const handleSubmit = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const formData = { ...formDetails, components };
|
const formData = { ...formDetails, components };
|
||||||
navigate("/Dynamictable", { state: { formData } }); // Navigate to DynamicTable with formData
|
navigate("/Dynamictable", { state: { formData } }); // Navigate to DynamicTable with formData
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-5 min-h-screen">
|
<div className="p-5 min-h-screen">
|
||||||
<h1 className="text-3xl font-bold text-center text-white bg-gray-400 mb-8 p-3">
|
<h1 className="text-3xl font-bold text-center text-white bg-gray-400 mb-8 p-3">
|
||||||
Dynamic Form Setup
|
Dynamic Form Setup
|
||||||
</h1>
|
</h1>
|
||||||
<form onSubmit={handleSubmit} className="space-y-6">
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<label className="text-gray-700">Form Name</label>
|
<label className="text-gray-700">Form Name</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
name="formName"
|
name="formName"
|
||||||
value={formDetails.formName}
|
value={formDetails.formName}
|
||||||
onChange={handleFormChange}
|
onChange={handleFormChange}
|
||||||
className="mt-1 p-2 border rounded"
|
className="mt-1 p-2 border rounded"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<label className="text-gray-700">Form Description</label>
|
<label className="text-gray-700">Form Description</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
name="formDescription"
|
name="formDescription"
|
||||||
value={formDetails.formDescription}
|
value={formDetails.formDescription}
|
||||||
onChange={handleFormChange}
|
onChange={handleFormChange}
|
||||||
className="mt-1 p-2 border rounded"
|
className="mt-1 p-2 border rounded"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<label className="text-gray-700">Related To</label>
|
<label className="text-gray-700">Related To</label>
|
||||||
<select
|
<select
|
||||||
name="relatedTo"
|
name="relatedTo"
|
||||||
value={formDetails.relatedTo}
|
value={formDetails.relatedTo}
|
||||||
onChange={handleFormChange}
|
onChange={handleFormChange}
|
||||||
className="mt-1 p-2 border rounded"
|
className="mt-1 p-2 border rounded"
|
||||||
>
|
>
|
||||||
<option value="">
|
<option value="">
|
||||||
<em>None</em>
|
<em>None</em>
|
||||||
</option>
|
</option>
|
||||||
<option value="Menu">Menu</option>
|
<option value="Menu">Menu</option>
|
||||||
<option value="Related to">Related to</option>
|
<option value="Related to">Related to</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<label className="text-gray-700">Page Event</label>
|
<label className="text-gray-700">Page Event</label>
|
||||||
<select
|
<select
|
||||||
name="pageEvent"
|
name="pageEvent"
|
||||||
value={formDetails.pageEvent}
|
value={formDetails.pageEvent}
|
||||||
onChange={handleFormChange}
|
onChange={handleFormChange}
|
||||||
className="mt-1 p-2 border rounded"
|
className="mt-1 p-2 border rounded"
|
||||||
>
|
>
|
||||||
<option value="Onclick">Onclick</option>
|
<option value="Onclick">Onclick</option>
|
||||||
<option value="Onblur">Onblur</option>
|
<option value="Onblur">Onblur</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<label className="text-gray-700">Button Name</label>
|
<label className="text-gray-700">Button Name</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
name="buttonName"
|
name="buttonName"
|
||||||
value={formDetails.buttonName}
|
value={formDetails.buttonName}
|
||||||
onChange={handleFormChange}
|
onChange={handleFormChange}
|
||||||
className="mt-1 p-2 border rounded"
|
className="mt-1 p-2 border rounded"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h2 className="text-2xl font-semibold text-gray-700 mt-8">
|
<h2 className="text-2xl font-semibold text-gray-700 mt-8">
|
||||||
Component Details
|
Component Details
|
||||||
</h2>
|
</h2>
|
||||||
{components.map((component, index) => (
|
{components.map((component, index) => (
|
||||||
<div
|
<div
|
||||||
key={component.id}
|
key={component.id}
|
||||||
className="grid grid-cols-1 md:grid-cols-5 gap-4 items-center mt-4"
|
className="grid grid-cols-1 md:grid-cols-5 gap-4 items-center mt-4"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Label"
|
placeholder="Label"
|
||||||
value={component.label}
|
value={component.label}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
handleComponentChange(index, "label", e.target.value)
|
handleComponentChange(index, "label", e.target.value)
|
||||||
}
|
}
|
||||||
className="p-2 border rounded col-span-1"
|
className="p-2 border rounded col-span-1"
|
||||||
/>
|
/>
|
||||||
<select
|
<select
|
||||||
value={component.type}
|
value={component.type}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
handleComponentChange(index, "type", e.target.value)
|
handleComponentChange(index, "type", e.target.value)
|
||||||
}
|
}
|
||||||
className="p-2 border rounded col-span-1"
|
className="p-2 border rounded col-span-1"
|
||||||
>
|
>
|
||||||
<option value="">
|
<option value="">
|
||||||
<em>None</em>
|
<em>None</em>
|
||||||
</option>
|
</option>
|
||||||
<option value="textfield">TextField</option>
|
<option value="textfield">TextField</option>
|
||||||
<option value="checkbox">Checkbox</option>
|
<option value="checkbox">Checkbox</option>
|
||||||
<option value="select">Select</option>
|
<option value="select">Select</option>
|
||||||
</select>
|
</select>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Mapping"
|
placeholder="Mapping"
|
||||||
value={component.mapping}
|
value={component.mapping}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
handleComponentChange(index, "mapping", e.target.value)
|
handleComponentChange(index, "mapping", e.target.value)
|
||||||
}
|
}
|
||||||
className="p-2 border rounded col-span-1"
|
className="p-2 border rounded col-span-1"
|
||||||
/>
|
/>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={component.readonly}
|
checked={component.readonly}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
handleComponentChange(index, "readonly", e.target.checked)
|
handleComponentChange(index, "readonly", e.target.checked)
|
||||||
}
|
}
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
/>
|
/>
|
||||||
<label>Readonly</label>
|
<label>Readonly</label>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Enter Values"
|
placeholder="Enter Values"
|
||||||
value={component.values}
|
value={component.values}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
handleComponentChange(index, "values", e.target.value)
|
handleComponentChange(index, "values", e.target.value)
|
||||||
}
|
}
|
||||||
className="p-2 border rounded col-span-1"
|
className="p-2 border rounded col-span-1"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => removeComponent(index)}
|
onClick={() => removeComponent(index)}
|
||||||
className="text-red-500 hover:text-red-700"
|
className="text-red-500 hover:text-red-700"
|
||||||
>
|
>
|
||||||
{/* <DeleteIcon /> */}
|
{/* <DeleteIcon /> */}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
<div className="flex justify-between mt-6">
|
<div className="flex justify-between mt-6">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={addComponent}
|
onClick={addComponent}
|
||||||
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
|
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
Add Component
|
Add Component
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
|
className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
|
||||||
>
|
>
|
||||||
Submit
|
Submit
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Form;
|
export default DynamicForm;
|
||||||
|
|||||||
@@ -1,50 +1,50 @@
|
|||||||
/* HomePage.css */
|
/* HomePage.css */
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.heading {
|
.heading {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-container {
|
.card-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap; /* Allow cards to wrap to the next line */
|
flex-wrap: wrap; /* Allow cards to wrap to the next line */
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
background-color: #9ee2f5;
|
background-color: #9ee2f5;
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
width: 30%; /* Adjust card width for larger screens */
|
width: 30%; /* Adjust card width for larger screens */
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-container {
|
.chart-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.card {
|
.card {
|
||||||
width: 45%; /* Adjust card width for screens up to 768px */
|
width: 45%; /* Adjust card width for screens up to 768px */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
.card {
|
.card {
|
||||||
width: 100%; /* Make cards occupy full width on screens up to 480px */
|
width: 100%; /* Make cards occupy full width on screens up to 480px */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,113 +1,37 @@
|
|||||||
// HomePage.js
|
// HomePage.js
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { FaUsers, FaCog, FaChartBar, FaShieldAlt } from 'react-icons/fa';
|
import { BarChart } from '@mui/x-charts/BarChart'; // Import BarChart component
|
||||||
|
|
||||||
const StatCard = ({ icon: Icon, title, value, color }) => (
|
const Card = ({ index }) => {
|
||||||
<div className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-200">
|
return (
|
||||||
<div className="flex items-center space-x-4">
|
<div className="bg-white border border-gray-300 rounded-lg shadow-md p-6 m-4 cursor-pointer transition-transform transform hover:scale-105 hover:shadow-lg flex flex-col items-center justify-center text-center">
|
||||||
<div className={`p-3 rounded-lg ${color}`}>
|
<h3 className="text-lg font-semibold mb-2">INDEX {index}</h3>
|
||||||
<Icon className="w-6 h-6 text-white" />
|
<p className="text-gray-600">{index}.</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
);
|
||||||
<h3 className="text-gray-500 text-sm font-medium">{title}</h3>
|
};
|
||||||
<p className="text-2xl font-bold text-gray-800">{value}</p>
|
|
||||||
</div>
|
const HomePage = () => {
|
||||||
</div>
|
return (
|
||||||
</div>
|
<div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4">
|
||||||
);
|
<h2 className="text-3xl font-semibold text-gray-700 mb-6">Welcome to the Dashboard!</h2>
|
||||||
|
<div className="flex flex-wrap justify-center">
|
||||||
const HomePage = () => {
|
<Card index={1} />
|
||||||
return (
|
<Card index={2} />
|
||||||
<div className="space-y-6">
|
<Card index={3} />
|
||||||
<div className="flex items-center justify-between">
|
</div>
|
||||||
<h1 className="text-3xl font-bold text-gray-800">Welcome Back!</h1>
|
<div className="w-full mt-8 flex justify-center">
|
||||||
<div className="text-sm text-gray-500">Last updated: {new Date().toLocaleDateString()}</div>
|
{/* Add BarChart component */}
|
||||||
</div>
|
<BarChart
|
||||||
|
xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
|
||||||
{/* Stats Grid */}
|
series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
width={700}
|
||||||
<StatCard
|
height={400}
|
||||||
icon={FaUsers}
|
/>
|
||||||
title="Total Users"
|
</div>
|
||||||
value="1,234"
|
</div>
|
||||||
color="bg-gradient-to-r from-purple-500 to-indigo-500"
|
);
|
||||||
/>
|
};
|
||||||
<StatCard
|
|
||||||
icon={FaCog}
|
export default HomePage;
|
||||||
title="Active Systems"
|
|
||||||
value="12"
|
|
||||||
color="bg-gradient-to-r from-blue-500 to-cyan-500"
|
|
||||||
/>
|
|
||||||
<StatCard
|
|
||||||
icon={FaChartBar}
|
|
||||||
title="Reports Generated"
|
|
||||||
value="456"
|
|
||||||
color="bg-gradient-to-r from-indigo-500 to-purple-500"
|
|
||||||
/>
|
|
||||||
<StatCard
|
|
||||||
icon={FaShieldAlt}
|
|
||||||
title="Security Score"
|
|
||||||
value="98%"
|
|
||||||
color="bg-gradient-to-r from-green-500 to-emerald-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Recent Activity */}
|
|
||||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
|
||||||
<h2 className="text-xl font-semibold text-gray-800 mb-4">Recent Activity</h2>
|
|
||||||
<div className="space-y-4">
|
|
||||||
{[1, 2, 3].map((item) => (
|
|
||||||
<div key={item} className="flex items-center space-x-4 p-4 rounded-lg hover:bg-gray-50 transition-colors">
|
|
||||||
<div className="w-2 h-2 rounded-full bg-purple-500"></div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<p className="text-gray-800">System update completed</p>
|
|
||||||
<p className="text-sm text-gray-500">2 hours ago</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Quick Actions */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
||||||
<div className="bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl shadow-lg p-6 text-white">
|
|
||||||
<h2 className="text-xl font-semibold mb-4">Quick Actions</h2>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<button className="w-full bg-white/10 hover:bg-white/20 text-white font-medium py-2 px-4 rounded-lg transition-colors">
|
|
||||||
Generate Report
|
|
||||||
</button>
|
|
||||||
<button className="w-full bg-white/10 hover:bg-white/20 text-white font-medium py-2 px-4 rounded-lg transition-colors">
|
|
||||||
Add New User
|
|
||||||
</button>
|
|
||||||
<button className="w-full bg-white/10 hover:bg-white/20 text-white font-medium py-2 px-4 rounded-lg transition-colors">
|
|
||||||
System Settings
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-gradient-to-br from-blue-500 to-cyan-600 rounded-xl shadow-lg p-6 text-white">
|
|
||||||
<h2 className="text-xl font-semibold mb-4">System Status</h2>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span>CPU Usage</span>
|
|
||||||
<span className="font-medium">45%</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-full bg-white/20 rounded-full h-2">
|
|
||||||
<div className="bg-white h-2 rounded-full" style={{ width: '45%' }}></div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span>Memory Usage</span>
|
|
||||||
<span className="font-medium">62%</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-full bg-white/20 rounded-full h-2">
|
|
||||||
<div className="bg-white h-2 rounded-full" style={{ width: '62%' }}></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default HomePage;
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
|
||||||
.custom-header, .custom-cell {
|
.custom-header, .custom-cell {
|
||||||
font-family: 'PT Serif", serif ';
|
font-family: 'PT Serif", serif ';
|
||||||
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,7 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
|
||||||
.custom-header, .custom-cell {
|
.custom-header, .custom-cell {
|
||||||
font-family: 'PT Serif", serif ';
|
font-family: 'PT Serif", serif ';
|
||||||
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,178 +1,643 @@
|
|||||||
import React, { useState, useEffect, useRef } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { Box, Button } from "@mui/material";
|
import {
|
||||||
import { DataGrid, GridToolbarContainer } from "@mui/x-data-grid";
|
Box,
|
||||||
import { BsThreeDotsVertical } from "react-icons/bs"; // Importing react-icons
|
Button,
|
||||||
import "./MenuMaintance.css";
|
Container,
|
||||||
|
Paper,
|
||||||
const api = process.env.REACT_APP_API_BASE_URL;
|
Table,
|
||||||
|
TableBody,
|
||||||
function CustomToolbar({ apiRef, handleThreeDotsClick, handleModal }) {
|
TableCell,
|
||||||
const handleGoToPage1 = () => {
|
TableContainer,
|
||||||
if (apiRef.current) {
|
TableHead,
|
||||||
apiRef.current.setPage(1);
|
TableRow,
|
||||||
}
|
TextField,
|
||||||
};
|
Typography,
|
||||||
|
IconButton,
|
||||||
return (
|
Tooltip,
|
||||||
<GridToolbarContainer>
|
Menu,
|
||||||
<Button onClick={handleGoToPage1}>Go to page 1</Button>
|
MenuItem,
|
||||||
<Button onClick={handleModal}>+</Button>
|
Checkbox,
|
||||||
</GridToolbarContainer>
|
Pagination,
|
||||||
);
|
Select,
|
||||||
}
|
FormControl,
|
||||||
|
InputLabel,
|
||||||
function MenuMaintenance() {
|
Modal,
|
||||||
const [menuItems, setMenuItems] = useState([]);
|
FormGroup,
|
||||||
const [selectedMenuItem, setSelectedMenuItem] = useState(null);
|
FormControlLabel,
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
Switch,
|
||||||
const apiRef = useRef(null);
|
CircularProgress,
|
||||||
|
Chip,
|
||||||
useEffect(() => {
|
Grid,
|
||||||
const fetchData = async () => {
|
InputAdornment
|
||||||
const token = localStorage.getItem("authToken");
|
} from "@mui/material";
|
||||||
try {
|
import {
|
||||||
const response = await fetch(`${api}/api1/submenu1`, {
|
Edit as EditIcon,
|
||||||
headers: {
|
Delete as DeleteIcon,
|
||||||
Authorization: `Bearer ${token}`,
|
Add as AddIcon,
|
||||||
},
|
Menu as MenuIcon,
|
||||||
});
|
ArrowBack as ArrowBackIcon,
|
||||||
|
Close as CloseIcon,
|
||||||
if (!response.ok) {
|
Download as DownloadIcon,
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
Upload as UploadIcon,
|
||||||
}
|
InsertDriveFile as ExcelIcon,
|
||||||
|
Search as SearchIcon,
|
||||||
const data = await response.json();
|
CheckCircle as CheckCircleIcon
|
||||||
// Flatten the nested subMenus array
|
} from "@mui/icons-material";
|
||||||
const flattenedData = data.flatMap((menuItem) => [
|
import { toast } from "react-toastify";
|
||||||
menuItem,
|
import { useNavigate } from "react-router-dom";
|
||||||
...menuItem.subMenus,
|
import * as XLSX from "xlsx";
|
||||||
]);
|
import {
|
||||||
// Set unique IDs for each menu item
|
fetchMenuItems,
|
||||||
const menuItemsWithIds = flattenedData.map((menuItem, index) => ({
|
addMenuItem,
|
||||||
...menuItem,
|
updateMenuItem,
|
||||||
id: index + 1,
|
deleteMenuItem,
|
||||||
}));
|
getSubmenuItems,
|
||||||
setMenuItems(menuItemsWithIds);
|
addSubmenuItem,
|
||||||
} catch (error) {
|
updateSubmenuItem,
|
||||||
console.error("Error fetching data:", error);
|
deleteSubmenuItem
|
||||||
}
|
} from "../../../ApiServices/menumaintananceapi";
|
||||||
};
|
|
||||||
|
function MenuMaintenance() {
|
||||||
fetchData();
|
const [menuItems, setMenuItems] = useState([]);
|
||||||
}, []);
|
const [subMenuItems, setSubMenuItems] = useState([]);
|
||||||
|
const [showAddEditPopup, setShowAddEditPopup] = useState(false);
|
||||||
const handleThreeDotsClick = (menuItemId) => {
|
const [currentMenuItem, setCurrentMenuItem] = useState({
|
||||||
setSelectedMenuItem(menuItemId === selectedMenuItem ? null : menuItemId);
|
menuItemDesc: "",
|
||||||
};
|
menuId: 0,
|
||||||
|
itemSeq: "",
|
||||||
const columns = [
|
moduleName: "",
|
||||||
{
|
main_menu_action_name: "",
|
||||||
field: "menuItemId",
|
main_menu_icon_name: "",
|
||||||
headerName: "Menu Item ID",
|
status: "true"
|
||||||
width: 200,
|
});
|
||||||
headerClassName: "custom-header",
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
cellClassName: "custom-cell",
|
const [recordsPerPage, setRecordsPerPage] = useState(10);
|
||||||
},
|
const [visibleColumns, setVisibleColumns] = useState({
|
||||||
{
|
menuItemDesc: true,
|
||||||
field: "menuItemDesc",
|
menu_id: true,
|
||||||
headerName: "Menu Item Description",
|
itemSeq: true,
|
||||||
width: 250,
|
moduleName: true,
|
||||||
headerClassName: "custom-header",
|
main_menu_action_name: true,
|
||||||
cellClassName: "custom-cell",
|
main_menu_icon_name: true,
|
||||||
},
|
status: true,
|
||||||
{
|
});
|
||||||
field: "moduleName",
|
const [isSubMenu, setIsSubMenu] = useState(false);
|
||||||
headerName: "Module Name",
|
const [parentMenuItemId, setParentMenuItemId] = useState(null);
|
||||||
width: 200,
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
headerClassName: "custom-header",
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
cellClassName: "custom-cell",
|
const [loading, setLoading] = useState(true);
|
||||||
},
|
const [showModal, setShowModal] = useState(false);
|
||||||
{
|
const [error, setError] = useState(null);
|
||||||
field: "main_menu_action_name",
|
const [anchorEl, setAnchorEl] = useState(null);
|
||||||
headerName: "Main Menu Action",
|
const [pageAnchorEl, setPageAnchorEl] = useState(null);
|
||||||
width: 200,
|
const navigate = useNavigate();
|
||||||
headerClassName: "custom-header",
|
|
||||||
cellClassName: "custom-cell",
|
useEffect(() => {
|
||||||
},
|
setTimeout(() => {
|
||||||
{
|
setLoading(false);
|
||||||
field: "main_menu_icon_name",
|
}, 3000);
|
||||||
headerName: "Main Menu Icon",
|
}, []);
|
||||||
width: 200,
|
|
||||||
headerClassName: "custom-header",
|
useEffect(() => {
|
||||||
cellClassName: "custom-cell",
|
const fetchData = async () => {
|
||||||
},
|
try {
|
||||||
{
|
console.log("Fetching Menu Items...");
|
||||||
field: "actions",
|
const data = await fetchMenuItems();
|
||||||
headerName: "Actions",
|
setMenuItems(data);
|
||||||
width: 150,
|
console.log("Fetched Menu Items:", data);
|
||||||
renderCell: ({ row }) => (
|
toast.success("Menu items fetched successfully!");
|
||||||
<div className="relative">
|
} catch (error) {
|
||||||
<div
|
console.error("Fetching error:", error);
|
||||||
className="three-dots"
|
setError(error.message);
|
||||||
onClick={() => handleThreeDotsClick(row.menuItemId)}
|
toast.error("Error fetching menu items.");
|
||||||
>
|
}
|
||||||
<BsThreeDotsVertical
|
};
|
||||||
className="cursor-pointer text-gray-800 hover:text-gray-600"
|
|
||||||
/>
|
fetchData();
|
||||||
</div>
|
}, []);
|
||||||
{selectedMenuItem === row.menuItemId && (
|
|
||||||
<div className="absolute bg-white border border-gray-200 shadow-lg p-4 mt-2 rounded-lg">
|
const toggleColumn = (column) => {
|
||||||
{/* Implement your actions buttons here */}
|
setVisibleColumns((prev) => ({
|
||||||
</div>
|
...prev,
|
||||||
)}
|
[column]: !prev[column],
|
||||||
</div>
|
}));
|
||||||
),
|
};
|
||||||
},
|
|
||||||
];
|
const openAddEditPopup = (menuItem = {}) => {
|
||||||
|
setIsEditing(!!menuItem.menuItemId);
|
||||||
return (
|
setCurrentMenuItem(menuItem);
|
||||||
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
|
setParentMenuItemId(isSubMenu ? menuItem.menuItemId : null);
|
||||||
<div className="text-3xl text-center text-black mb-3 bg-slate-400">
|
setShowAddEditPopup(true);
|
||||||
Menu Maintenance
|
};
|
||||||
</div>
|
|
||||||
<Box
|
const handleOpenModal = () => setShowModal(true);
|
||||||
className="w-full p-4 md:w-3/4 lg:w-2/3 xl:w-1/2"
|
const handleCloseModal = () => setShowModal(false);
|
||||||
sx={{ height: 500, width: "100%" }}
|
|
||||||
>
|
const handleFileChange = (event) => {
|
||||||
<DataGrid
|
const file = event.target.files[0];
|
||||||
rows={menuItems}
|
if (file) {
|
||||||
columns={columns}
|
console.log("Selected file:", file.name);
|
||||||
components={{
|
}
|
||||||
Toolbar: () => (
|
};
|
||||||
<CustomToolbar
|
|
||||||
apiRef={apiRef}
|
const exportToExcel = () => {
|
||||||
handleThreeDotsClick={handleThreeDotsClick}
|
const worksheet = XLSX.utils.json_to_sheet([]);
|
||||||
handleModal={() => setIsModalOpen(true)}
|
const workbook = XLSX.utils.book_new();
|
||||||
/>
|
XLSX.utils.book_append_sheet(workbook, worksheet, "UserDetails");
|
||||||
),
|
XLSX.writeFile(workbook, "MenuMaintenance.xlsx");
|
||||||
}}
|
};
|
||||||
pageSize={10}
|
|
||||||
onGridReady={(gridApi) => {
|
const handleInputChange = (event) => {
|
||||||
apiRef.current = gridApi;
|
const { name, value } = event.target;
|
||||||
}}
|
const processedValue = name === "status" ? value === "true" : value;
|
||||||
sx={{
|
setCurrentMenuItem((prev) => ({ ...prev, [name]: processedValue }));
|
||||||
"& .MuiDataGrid-columnHeaders": {
|
};
|
||||||
backgroundColor: "rgba(107, 114, 128, 0.5)", // Tailwind CSS bg-gray-400 with opacity
|
|
||||||
},
|
const handleSearch = (query) => {
|
||||||
"& .MuiDataGrid-columnHeaderTitle": {
|
setSearchQuery(query);
|
||||||
fontWeight: "bold",
|
};
|
||||||
},
|
|
||||||
}}
|
const handleSubmit = async (event) => {
|
||||||
className="border border-gray-200 shadow-lg rounded-lg bg-gray-400"
|
event.preventDefault();
|
||||||
/>
|
try {
|
||||||
</Box>
|
if (isEditing) {
|
||||||
{/* Your modals and other components */}
|
const updatedItem = await updateMenuItem(currentMenuItem.menuItemId, currentMenuItem);
|
||||||
{isModalOpen && (
|
setMenuItems(menuItems.map(item =>
|
||||||
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
|
item.menuItemId === currentMenuItem.menuItemId ? updatedItem : item
|
||||||
<div className="bg-white p-8 rounded-lg shadow-lg">
|
));
|
||||||
<h2 className="text-xl font-bold mb-4">Modal Title</h2>
|
toast.success("Menu item updated successfully!");
|
||||||
{/* Modal content here */}
|
} else {
|
||||||
<Button onClick={() => setIsModalOpen(false)}>Close</Button>
|
const addedItem = await addMenuItem(currentMenuItem);
|
||||||
</div>
|
setMenuItems([...menuItems, addedItem]);
|
||||||
</div>
|
toast.success("Menu item added successfully!");
|
||||||
)}
|
}
|
||||||
</div>
|
setShowAddEditPopup(false);
|
||||||
);
|
} catch (error) {
|
||||||
}
|
toast.error(`Operation failed: ${error.message}`);
|
||||||
|
console.error("Submit error:", error);
|
||||||
export default MenuMaintenance;
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (menuItemId) => {
|
||||||
|
if (isSubMenu) {
|
||||||
|
setSubMenuItems(
|
||||||
|
subMenuItems.filter((item) => item.menuItemId !== menuItemId)
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
await deleteMenuItem(menuItemId);
|
||||||
|
setMenuItems(menuItems.filter((item) => item.menuItemId !== menuItemId));
|
||||||
|
}
|
||||||
|
toast.success("Menu item deleted successfully!");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRecordsPerPageChange = (number) => {
|
||||||
|
setRecordsPerPage(number);
|
||||||
|
setPageAnchorEl(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubMenuClick = (menuItemId) => {
|
||||||
|
navigate(`/dashboard/setup/sub-menu-maintenance/${menuItemId}`);
|
||||||
|
fetchSubMenuItems(menuItemId);
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchSubMenuItems = async (menuItemId) => {
|
||||||
|
try {
|
||||||
|
const data = await getSubmenuItems(menuItemId);
|
||||||
|
console.log("Fetched Sub-Menu Items:", data);
|
||||||
|
setSubMenuItems(data);
|
||||||
|
setIsSubMenu(true);
|
||||||
|
setParentMenuItemId(menuItemId);
|
||||||
|
toast.success("Sub-menu items fetched successfully!");
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching sub-menu items:", error);
|
||||||
|
toast.error("Failed to fetch sub-menu items.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMainMenuClick = (menuId) => {
|
||||||
|
console.log("Selected Menu ID:", menuId);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackToMainMenu = () => {
|
||||||
|
setIsSubMenu(false);
|
||||||
|
setSubMenuItems([]);
|
||||||
|
setParentMenuItemId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const totalPages = Math.ceil(menuItems.length / recordsPerPage);
|
||||||
|
const handlePageChange = (event, pageNumber) => {
|
||||||
|
setCurrentPage(pageNumber);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setShowAddEditPopup(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const slicedMenus = (isSubMenu ? subMenuItems : menuItems)
|
||||||
|
.filter(
|
||||||
|
(menuItem) =>
|
||||||
|
menuItem.menuItemDesc &&
|
||||||
|
menuItem.menuItemDesc.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
)
|
||||||
|
.slice((currentPage - 1) * recordsPerPage, currentPage * recordsPerPage);
|
||||||
|
|
||||||
|
const handleMenuOpen = (event) => {
|
||||||
|
setAnchorEl(event.currentTarget);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMenuClose = () => {
|
||||||
|
setAnchorEl(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePageMenuOpen = (event) => {
|
||||||
|
setPageAnchorEl(event.currentTarget);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePageMenuClose = () => {
|
||||||
|
setPageAnchorEl(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ mt: -2 }}>
|
||||||
|
{loading ? (
|
||||||
|
<Box display="flex" justifyContent="center" alignItems="center" height="80vh">
|
||||||
|
<CircularProgress />
|
||||||
|
</Box>
|
||||||
|
) : (
|
||||||
|
<Container maxWidth="xl" sx={{ mt: 5 }}>
|
||||||
|
<Box display="flex" justifyContent="space-between" alignItems="center" mb={4}>
|
||||||
|
<Typography variant="h4" component="h1" sx={{ fontWeight: 'bold' }}>
|
||||||
|
Menu Maintenance
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Grid container spacing={2} alignItems="center" my={3}>
|
||||||
|
<Grid item xs={12} md={8} lg={6}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
placeholder="Search"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => handleSearch(e.target.value)}
|
||||||
|
InputProps={{
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<SearchIcon sx={{ color: '#fff' }} />
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
sx: {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
borderRadius: '10px',
|
||||||
|
boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
|
||||||
|
'& .MuiOutlinedInput-notchedOutline': {
|
||||||
|
border: 'none'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
sx={{
|
||||||
|
maxWidth: 528
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={12} md={4} lg={6} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||||
|
{isSubMenu && (
|
||||||
|
<IconButton onClick={handleBackToMainMenu} sx={{ mr: 2 }}>
|
||||||
|
<ArrowBackIcon sx={{ color: '#747264', fontSize: '1.5rem' }} />
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Tooltip title="Add Menu">
|
||||||
|
<IconButton onClick={() => openAddEditPopup()} sx={{ mr: 2 }}>
|
||||||
|
<AddIcon sx={{ color: '#747264', fontSize: '1.5rem' }} />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<Tooltip title="Download template">
|
||||||
|
<IconButton sx={{ mr: 2 }}>
|
||||||
|
<DownloadIcon sx={{ color: '#747264', fontSize: '1.5rem' }} />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<Tooltip title="Import">
|
||||||
|
<IconButton onClick={handleOpenModal} sx={{ mr: 2 }}>
|
||||||
|
<UploadIcon sx={{ color: '#747264', fontSize: '1.5rem' }} />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<Tooltip title="XLSX">
|
||||||
|
<IconButton onClick={exportToExcel} sx={{ mr: 2 }}>
|
||||||
|
<ExcelIcon sx={{ color: '#747264', fontSize: '1.5rem' }} />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Modal open={showModal} onClose={handleCloseModal}>
|
||||||
|
<Box sx={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
width: 400,
|
||||||
|
bgcolor: 'background.paper',
|
||||||
|
boxShadow: 24,
|
||||||
|
p: 4,
|
||||||
|
borderRadius: 1
|
||||||
|
}}>
|
||||||
|
<Typography variant="h6" component="h2" mb={2}>
|
||||||
|
Import File
|
||||||
|
</Typography>
|
||||||
|
<FormControl fullWidth>
|
||||||
|
<InputLabel>Select a file to import:</InputLabel>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
accept=".xlsx, .xls, .csv"
|
||||||
|
onChange={handleFileChange}
|
||||||
|
style={{ marginBottom: 16 }}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 2 }}>
|
||||||
|
<Button onClick={handleCloseModal} sx={{ mr: 2 }}>Cancel</Button>
|
||||||
|
<Button variant="contained" onClick={handleCloseModal}>Upload</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<TableContainer component={Paper} sx={{ boxShadow: 3 }}>
|
||||||
|
<Table>
|
||||||
|
<TableHead sx={{ backgroundColor: '#f8f9fa' }}>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>No</TableCell>
|
||||||
|
{Object.entries(visibleColumns).map(
|
||||||
|
([key, visible]) =>
|
||||||
|
visible && (
|
||||||
|
<TableCell key={key}>
|
||||||
|
{key.charAt(0).toUpperCase() + key.slice(1)}
|
||||||
|
</TableCell>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
<TableCell>Actions</TableCell>
|
||||||
|
{!isSubMenu && <TableCell>Sub-Menu</TableCell>}
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
|
||||||
|
<TableBody>
|
||||||
|
{slicedMenus.length === 0 ? (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell
|
||||||
|
colSpan={
|
||||||
|
1 +
|
||||||
|
Object.keys(visibleColumns).filter(
|
||||||
|
(key) => visibleColumns[key]
|
||||||
|
).length +
|
||||||
|
(isSubMenu ? 1 : 2)
|
||||||
|
}
|
||||||
|
align="center"
|
||||||
|
>
|
||||||
|
No menu items found. Please add new items.
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
) : (
|
||||||
|
slicedMenus.map((menuItem, index) => (
|
||||||
|
<TableRow
|
||||||
|
key={`${menuItem.menuItemId}-${index}`}
|
||||||
|
hover
|
||||||
|
onClick={() => handleMainMenuClick(menuItem.menuItemId)}
|
||||||
|
>
|
||||||
|
<TableCell>{index + 1}</TableCell>
|
||||||
|
{Object.keys(visibleColumns).map(
|
||||||
|
(key) =>
|
||||||
|
visibleColumns[key] && (
|
||||||
|
<TableCell key={key}>
|
||||||
|
{key === "status" ? (
|
||||||
|
<Chip
|
||||||
|
label={menuItem.status ? "Enabled" : "Disabled"}
|
||||||
|
color={menuItem.status ? "success" : "error"}
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
menuItem[key]
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
<TableCell align="center">
|
||||||
|
<IconButton
|
||||||
|
onClick={() => openAddEditPopup(menuItem)}
|
||||||
|
sx={{ color: 'green' }}
|
||||||
|
>
|
||||||
|
<EditIcon />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton
|
||||||
|
onClick={() => handleDelete(menuItem.menuItemId)}
|
||||||
|
sx={{ color: 'error.main' }}
|
||||||
|
>
|
||||||
|
<DeleteIcon />
|
||||||
|
</IconButton>
|
||||||
|
</TableCell>
|
||||||
|
{!isSubMenu && (
|
||||||
|
<TableCell align="center">
|
||||||
|
<IconButton
|
||||||
|
onClick={() => handleSubMenuClick(menuItem.menuItemId)}
|
||||||
|
sx={{ color: '#0B4C6A' }}
|
||||||
|
>
|
||||||
|
<MenuIcon />
|
||||||
|
</IconButton>
|
||||||
|
</TableCell>
|
||||||
|
)}
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
|
||||||
|
<Grid container spacing={2} mt={4}>
|
||||||
|
<Grid item xs={12} md={6}>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
onClick={handleMenuOpen}
|
||||||
|
sx={{ textTransform: 'none' }}
|
||||||
|
>
|
||||||
|
Manage Columns
|
||||||
|
</Button>
|
||||||
|
<Menu
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
open={Boolean(anchorEl)}
|
||||||
|
onClose={handleMenuClose}
|
||||||
|
>
|
||||||
|
{Object.keys(visibleColumns).map((column) => (
|
||||||
|
<MenuItem key={column} onClick={() => toggleColumn(column)}>
|
||||||
|
<Checkbox checked={visibleColumns[column]} />
|
||||||
|
{column.charAt(0).toUpperCase() + column.slice(1).toLowerCase()}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Menu>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={12} md={6} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
onClick={handlePageMenuOpen}
|
||||||
|
sx={{ textTransform: 'none' }}
|
||||||
|
>
|
||||||
|
<ExcelIcon />
|
||||||
|
</Button>
|
||||||
|
<Menu
|
||||||
|
anchorEl={pageAnchorEl}
|
||||||
|
open={Boolean(pageAnchorEl)}
|
||||||
|
onClose={handlePageMenuClose}
|
||||||
|
>
|
||||||
|
{[1, 5, 10, 20, 50].map((number) => (
|
||||||
|
<MenuItem
|
||||||
|
key={number}
|
||||||
|
onClick={() => handleRecordsPerPageChange(number)}
|
||||||
|
>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
|
||||||
|
<span>{number}</span>
|
||||||
|
{recordsPerPage === number && (
|
||||||
|
<CheckCircleIcon sx={{ ml: 'auto', color: 'success.main' }} />
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Menu>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
|
||||||
|
<Pagination
|
||||||
|
count={totalPages}
|
||||||
|
page={currentPage}
|
||||||
|
onChange={handlePageChange}
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
open={showAddEditPopup}
|
||||||
|
onClose={handleClose}
|
||||||
|
aria-labelledby="modal-modal-title"
|
||||||
|
aria-describedby="modal-modal-description"
|
||||||
|
>
|
||||||
|
<Box sx={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
width: '80%',
|
||||||
|
maxWidth: 800,
|
||||||
|
bgcolor: 'background.paper',
|
||||||
|
boxShadow: 24,
|
||||||
|
p: 4,
|
||||||
|
borderRadius: 1
|
||||||
|
}}>
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
|
||||||
|
<Typography id="modal-modal-title" variant="h6" component="h2">
|
||||||
|
{isEditing ? "Edit Menu Item" : "Add New Menu Item"}
|
||||||
|
</Typography>
|
||||||
|
<IconButton onClick={handleClose}>
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box component="form" onSubmit={handleSubmit}>
|
||||||
|
<Grid container spacing={2}>
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Menu ID*"
|
||||||
|
name="menuId"
|
||||||
|
value={0}
|
||||||
|
InputProps={{
|
||||||
|
readOnly: true,
|
||||||
|
}}
|
||||||
|
variant="standard"
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Menu Item Name*"
|
||||||
|
name="menuItemDesc"
|
||||||
|
value={currentMenuItem.menuItemDesc || ""}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Sequence"
|
||||||
|
name="itemSeq"
|
||||||
|
type="number"
|
||||||
|
value={currentMenuItem.itemSeq || ""}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Module Name"
|
||||||
|
name="moduleName"
|
||||||
|
value={currentMenuItem.moduleName || ""}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Menu Action Link"
|
||||||
|
name="main_menu_action_name"
|
||||||
|
value={currentMenuItem.main_menu_action_name || ""}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Menu Icon Name"
|
||||||
|
name="main_menu_icon_name"
|
||||||
|
value={currentMenuItem.main_menu_icon_name || ""}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
placeholder="e.g., fa-home"
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={12}>
|
||||||
|
<FormControl fullWidth>
|
||||||
|
<InputLabel>Status</InputLabel>
|
||||||
|
<Select
|
||||||
|
name="status"
|
||||||
|
value={currentMenuItem.status ? "true" : "false"}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
label="Status"
|
||||||
|
>
|
||||||
|
<MenuItem value="true">Enable</MenuItem>
|
||||||
|
<MenuItem value="false">Disable</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 3 }}>
|
||||||
|
<Button onClick={handleClose} sx={{ mr: 2 }}>Cancel</Button>
|
||||||
|
<Button type="submit" variant="contained">
|
||||||
|
{isEditing ? "UPDATE" : "ADD"}
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Modal>
|
||||||
|
</Container>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MenuMaintenance;
|
||||||
@@ -1,101 +1,101 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import './Model.css';
|
import './Model.css';
|
||||||
|
|
||||||
const Modal = ({ setNewUser, newUser, onSave }) => {
|
const Modal = ({ setNewUser, newUser, onSave }) => {
|
||||||
const [newUserState, setNewUserState] = useState(newUser);
|
const [newUserState, setNewUserState] = useState(newUser);
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
|
|
||||||
const handleSave = () => {
|
const handleSave = () => {
|
||||||
const data = { ...newUserState };
|
const data = { ...newUserState };
|
||||||
onSave(data); // Pass the new data to the parent component
|
onSave(data); // Pass the new data to the parent component
|
||||||
setIsModalOpen(false); // Close the modal after saving
|
setIsModalOpen(false); // Close the modal after saving
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
setIsModalOpen(false);
|
setIsModalOpen(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOpenModal = () => {
|
const handleOpenModal = () => {
|
||||||
setIsModalOpen(true);
|
setIsModalOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<button onClick={handleOpenModal}>ADD ITEM</button>
|
<button onClick={handleOpenModal}>ADD ITEM</button>
|
||||||
|
|
||||||
{isModalOpen && (
|
{isModalOpen && (
|
||||||
<div className='modalWrapper'>
|
<div className='modalWrapper'>
|
||||||
<div className='modal'>
|
<div className='modal'>
|
||||||
<button className="closeBtn" onClick={handleClose}>X</button>
|
<button className="closeBtn" onClick={handleClose}>X</button>
|
||||||
|
|
||||||
<div className="input-group">
|
<div className="input-group">
|
||||||
<label htmlFor="userId">User ID:</label>
|
<label htmlFor="userId">User ID:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="userId"
|
id="userId"
|
||||||
value={newUserState.userId}
|
value={newUserState.userId}
|
||||||
onChange={(e) => setNewUserState({ ...newUserState, userId: e.target.value })}
|
onChange={(e) => setNewUserState({ ...newUserState, userId: e.target.value })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="input-group">
|
<div className="input-group">
|
||||||
<label htmlFor="username">Username:</label>
|
<label htmlFor="username">Username:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="username"
|
id="username"
|
||||||
value={newUserState.username}
|
value={newUserState.username}
|
||||||
onChange={(e) => setNewUserState({ ...newUserState, username: e.target.value })}
|
onChange={(e) => setNewUserState({ ...newUserState, username: e.target.value })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="input-group">
|
<div className="input-group">
|
||||||
<label htmlFor="fullName">Full Name:</label>
|
<label htmlFor="fullName">Full Name:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="fullName"
|
id="fullName"
|
||||||
value={newUserState.fullName}
|
value={newUserState.fullName}
|
||||||
onChange={(e) => setNewUserState({ ...newUserState, fullName: e.target.value })}
|
onChange={(e) => setNewUserState({ ...newUserState, fullName: e.target.value })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="input-group">
|
<div className="input-group">
|
||||||
<label htmlFor="email">Email:</label>
|
<label htmlFor="email">Email:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="email"
|
id="email"
|
||||||
value={newUserState.email}
|
value={newUserState.email}
|
||||||
onChange={(e) => setNewUserState({ ...newUserState, email: e.target.value })}
|
onChange={(e) => setNewUserState({ ...newUserState, email: e.target.value })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="input-group">
|
<div className="input-group">
|
||||||
<label htmlFor="mobileNumber">Mobile Number:</label>
|
<label htmlFor="mobileNumber">Mobile Number:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="mobileNumber"
|
id="mobileNumber"
|
||||||
value={newUserState.mobileNumber}
|
value={newUserState.mobileNumber}
|
||||||
onChange={(e) => setNewUserState({ ...newUserState, mobileNumber: e.target.value })}
|
onChange={(e) => setNewUserState({ ...newUserState, mobileNumber: e.target.value })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="input-group">
|
<div className="input-group">
|
||||||
<label htmlFor="userGroup">User Group:</label>
|
<label htmlFor="userGroup">User Group:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="userGroup"
|
id="userGroup"
|
||||||
value={newUserState.userGroup}
|
value={newUserState.userGroup}
|
||||||
onChange={(e) => setNewUserState({ ...newUserState, userGroup: e.target.value })}
|
onChange={(e) => setNewUserState({ ...newUserState, userGroup: e.target.value })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button onClick={handleSave}>Save</button>
|
<button onClick={handleSave}>Save</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Modal;
|
export default Modal;
|
||||||
|
|||||||
@@ -1,69 +1,69 @@
|
|||||||
|
|
||||||
|
|
||||||
.modalWrapper {
|
.modalWrapper {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: rgba(0, 0, 0, 0.5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.closeBtn {
|
.closeBtn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: #4caf50;
|
background-color: #4caf50;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.savedData {
|
.savedData {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.savedData h2 {
|
.savedData h2 {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.savedData p {
|
.savedData p {
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1,29 +1,29 @@
|
|||||||
|
|
||||||
|
|
||||||
.card-list {
|
.card-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap; /* Allow cards to wrap to the next line */
|
flex-wrap: wrap; /* Allow cards to wrap to the next line */
|
||||||
justify-content: center; /* Horizontally center the cards */
|
justify-content: center; /* Horizontally center the cards */
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 10px; /* Adjust margin for better spacing */
|
margin: 10px; /* Adjust margin for better spacing */
|
||||||
width: calc(33.33% - 20px); /* Adjust card width based on container width */
|
width: calc(33.33% - 20px); /* Adjust card width based on container width */
|
||||||
max-width: 200px; /* Set maximum card width */
|
max-width: 200px; /* Set maximum card width */
|
||||||
height: 150px; /* Adjust card height */
|
height: 150px; /* Adjust card height */
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.card {
|
.card {
|
||||||
width: calc(50% - 20px); /* Two cards per row on smaller screens */
|
width: calc(50% - 20px); /* Two cards per row on smaller screens */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
.card {
|
.card {
|
||||||
width: calc(100% - 20px); /* Single card per row on mobile devices */
|
width: calc(100% - 20px); /* Single card per row on mobile devices */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1,78 +1,21 @@
|
|||||||
import React, { useState } from 'react';
|
import React from 'react';
|
||||||
import { FaUser, FaUsers, FaUtensils, FaLock, FaCogs, FaKey } from 'react-icons/fa';
|
import { Outlet, useNavigate } from 'react-router-dom';
|
||||||
import UserMaintance from './UserMaintance';
|
import CardList from './CardList'; // Import the CardList component
|
||||||
import UserGroupMaintance from './UserGroupMaintance/UserGroupMaintance';
|
|
||||||
import MenuMaintance from './MenuMaintance/MenuMaintance';
|
const Setup = () => {
|
||||||
import MenuAccessControl from './MenuAccessControl/MenuAccessControl';
|
const navigate = useNavigate();
|
||||||
import SystemParameters from './SystemParameters/SystemParameters';
|
|
||||||
import ApiRegistery from './ApiRegistery/ApiRegistery';
|
return (
|
||||||
import TokenRegistery from './TokenRegistery/TokenRegistery';
|
<div style={{ padding: '20px' }}>
|
||||||
import Codeextension from './Codeextension.js';
|
|
||||||
import DynamicTable from './Dynamictable.js';
|
{/* Show CardList when at /dashboard/setup */}
|
||||||
|
{window.location.pathname === '/dashboard/setup' ? (
|
||||||
const Card = ({ title, content, icon: Icon, onClick }) => (
|
<CardList />
|
||||||
<div onClick={onClick} className="bg-white border border-gray-300 rounded-lg shadow-md p-6 m-4 cursor-pointer transition-transform transform hover:scale-105 hover:shadow-lg flex flex-col items-center justify-center text-center">
|
) : (
|
||||||
<Icon className="text-4xl text-gray-800 mb-4" />
|
<Outlet />
|
||||||
<h3 className="text-lg font-semibold">{title}</h3>
|
)}
|
||||||
<p className="text-gray-600">{content}</p>
|
</div>
|
||||||
</div>
|
);
|
||||||
);
|
};
|
||||||
|
|
||||||
const CardList = () => {
|
export default Setup;
|
||||||
const [showUserMaintance, setShowUserMaintance] = useState(false);
|
|
||||||
const [showUserGroupMaintance, setShowUserGroupMaintance] = useState(false);
|
|
||||||
const [showMenuMaintance, setShowMenuMaintance] = useState(false);
|
|
||||||
const [showMenuAccessControl, setShowMenuAccessControl] = useState(false);
|
|
||||||
const [showSystemParameters, setShowSystemParameters] = useState(false);
|
|
||||||
// const [showAccessType, setShowAccessType] = useState(false);
|
|
||||||
const [showApiRegistery, setShowApiRegistery] = useState(false);
|
|
||||||
const [showTokenRegistery, setShowTokenRegistery] = useState(false);
|
|
||||||
const [showCodeExtension, setShowCodeExtension] = useState(false);
|
|
||||||
const [showDynamicTable, setShowDynamicTable] = useState(false);
|
|
||||||
|
|
||||||
const handleCardClick = (menuItemDesc) => {
|
|
||||||
setShowUserMaintance(menuItemDesc === 'User Maintance');
|
|
||||||
setShowUserGroupMaintance(menuItemDesc === 'User Group Maintance');
|
|
||||||
setShowMenuMaintance(menuItemDesc === 'Menu Maintance');
|
|
||||||
setShowMenuAccessControl(menuItemDesc === 'Menu Access Control');
|
|
||||||
setShowSystemParameters(menuItemDesc === 'System Parameters');
|
|
||||||
// setShowAccessType(menuItemDesc === 'Access Type');
|
|
||||||
setShowApiRegistery(menuItemDesc === 'Api Registery');
|
|
||||||
setShowTokenRegistery(menuItemDesc === 'Token Registery');
|
|
||||||
setShowCodeExtension(menuItemDesc === 'Code Extension');
|
|
||||||
setShowDynamicTable(menuItemDesc === 'Dynamic Table');
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{!showUserMaintance && !showUserGroupMaintance && !showMenuMaintance && !showMenuAccessControl && !showSystemParameters && !showApiRegistery && !showTokenRegistery && !showCodeExtension && !showDynamicTable && (
|
|
||||||
<div className="min-h-screen flex items-center justify-center bg-gray-100 p-4">
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
||||||
<Card title="User Maintance" content="Manage users" icon={FaUser} onClick={() => handleCardClick('User Maintance')} />
|
|
||||||
<Card title="User Group Maintance" content="Manage user groups" icon={FaUsers} onClick={() => handleCardClick('User Group Maintance')} />
|
|
||||||
<Card title="Menu Maintance" content="Manage menus" icon={FaUtensils} onClick={() => handleCardClick('Menu Maintance')} />
|
|
||||||
<Card title="Menu Access Control" content="Control menu access" icon={FaLock} onClick={() => handleCardClick('Menu Access Control')} />
|
|
||||||
<Card title="System Parameters" content="Configure system parameters" icon={FaCogs} onClick={() => handleCardClick('System Parameters')} />
|
|
||||||
{/* <Card title="Access Type" content="Manage access types" icon={FaKey} onClick={() => handleCardClick('Access Type')} /> */}
|
|
||||||
<Card title="Api Registery" content="Manage APIs" icon={FaUser} onClick={() => handleCardClick('Api Registery')} />
|
|
||||||
<Card title="Token Registery" content="Manage tokens" icon={FaKey} onClick={() => handleCardClick('Token Registery')} />
|
|
||||||
<Card title="Code Extension" content="Extend code functionalities" icon={FaLock} onClick={() => handleCardClick('Code Extension')} />
|
|
||||||
<Card title="Dynamic Table" content="Dynamic data tables" icon={FaKey} onClick={() => handleCardClick('Dynamic Table')} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{showUserMaintance && <UserMaintance />}
|
|
||||||
{showUserGroupMaintance && <UserGroupMaintance />}
|
|
||||||
{showMenuMaintance && <MenuMaintance />}
|
|
||||||
{showMenuAccessControl && <MenuAccessControl />}
|
|
||||||
{showSystemParameters && <SystemParameters />}
|
|
||||||
{/* {showAccessType && <AccessType />} */}
|
|
||||||
{showApiRegistery && <ApiRegistery />}
|
|
||||||
{showTokenRegistery && <TokenRegistery />}
|
|
||||||
{showCodeExtension && <Codeextension />}
|
|
||||||
{showDynamicTable && <DynamicTable />}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CardList;
|
|
||||||
@@ -1,128 +1,219 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { Button, Container, Grid, TextField } from "@mui/material";
|
import {
|
||||||
|
Button,
|
||||||
const SystemParameterForm = () => {
|
Container,
|
||||||
const [formData, setFormData] = useState({
|
Grid,
|
||||||
schedulerTimer: "",
|
TextField,
|
||||||
leaseTaxCode: "",
|
Typography,
|
||||||
vesselConfirmationProcessLimit: "",
|
Paper,
|
||||||
rowToDisplay: "",
|
Box,
|
||||||
linkToDisplay: "",
|
LinearProgress
|
||||||
rowToAdd: "",
|
} from "@mui/material";
|
||||||
lovRowToDisplay: "",
|
import { toast } from "react-toastify";
|
||||||
lovLinkToDisplay: "",
|
import { addSysParameter } from "../../../ApiServices/SytemparameterApi";
|
||||||
oldServerName: "",
|
import { useSystemParameters } from "../../../context/SystemParameterContext";
|
||||||
oldBase: "",
|
|
||||||
oldAdminUser: "",
|
const SystemParameterForm = () => {
|
||||||
oldServerPort: "",
|
const { systemParameters, loading: contextLoading } = useSystemParameters();
|
||||||
userDefaultGroup: "",
|
|
||||||
defaultDepartment: "",
|
const [formData, setFormData] = useState({
|
||||||
defaultPosition: "",
|
schedulerTime: "",
|
||||||
singleCharge: "",
|
leaseTaxCode: "",
|
||||||
firstDayOfWeek: "",
|
vesselConfProcessLimit: "",
|
||||||
hourPerShift: "",
|
rowToDisplay: "",
|
||||||
cnBillingFrequency: "",
|
linkToDisplay: "",
|
||||||
billingDepartmentCode: "",
|
rowToAdd: "",
|
||||||
basePriceList: "",
|
lovRowToDisplay: "",
|
||||||
nonContainerServiceOrderAutoApprovalDeptCode: "",
|
lovLinkToDisplay: "",
|
||||||
ediMAESchedulerOnOff: "",
|
oidserverName: "",
|
||||||
ediSchedulerOnOff: "",
|
oidBase: "",
|
||||||
companyDisplayName: "",
|
oidAdminUser: "",
|
||||||
});
|
oidServerPort: "",
|
||||||
|
userDefaultGroup: "",
|
||||||
const handleInputChange = (event) => {
|
defaultDepartment: "",
|
||||||
const { name, value } = event.target;
|
defaultPosition: "",
|
||||||
setFormData((prevState) => ({
|
singleCharge: "",
|
||||||
...prevState,
|
firstDayOftheWeek: "",
|
||||||
[name]: value,
|
hourPerShift: "",
|
||||||
}));
|
cnBillingFrequency: "",
|
||||||
};
|
billingDepartmentCode: "",
|
||||||
|
basePriceList: "",
|
||||||
const handleFileChange = (event) => {
|
nonContainerServiceOrder: "",
|
||||||
setFormData((prevState) => ({
|
ediMaeSchedulerONOFF: "",
|
||||||
...prevState,
|
ediSchedulerONOFF: "",
|
||||||
logo: event.target.files[0],
|
upload_Logo: null,
|
||||||
}));
|
company_Display_Name: "",
|
||||||
};
|
});
|
||||||
|
|
||||||
const handleSubmit = (event) => {
|
useEffect(() => {
|
||||||
event.preventDefault();
|
if (systemParameters) {
|
||||||
alert("Form submitted successfully!");
|
setFormData((prevForm) => ({
|
||||||
console.log("Form Data:", formData);
|
...prevForm,
|
||||||
};
|
...systemParameters,
|
||||||
|
}));
|
||||||
const handleClear = () => {
|
}
|
||||||
setFormData({
|
}, [systemParameters]);
|
||||||
schedulerTimer: "",
|
|
||||||
leaseTaxCode: "",
|
const handleInputChange = (event) => {
|
||||||
vesselConfirmationProcessLimit: "",
|
const { name, value } = event.target;
|
||||||
rowToDisplay: "",
|
setFormData((prevState) => ({
|
||||||
linkToDisplay: "",
|
...prevState,
|
||||||
rowToAdd: "",
|
[name]: value,
|
||||||
lovRowToDisplay: "",
|
}));
|
||||||
lovLinkToDisplay: "",
|
};
|
||||||
oldServerName: "",
|
|
||||||
oldBase: "",
|
const handleFileChange = (event) => {
|
||||||
oldAdminUser: "",
|
setFormData((prevState) => ({
|
||||||
oldServerPort: "",
|
...prevState,
|
||||||
userDefaultGroup: "",
|
upload_Logo: event.target.files[0],
|
||||||
defaultDepartment: "",
|
}));
|
||||||
defaultPosition: "",
|
};
|
||||||
singleCharge: "",
|
|
||||||
firstDayOfWeek: "",
|
const handleSubmit = async (event) => {
|
||||||
hourPerShift: "",
|
event.preventDefault();
|
||||||
cnBillingFrequency: "",
|
|
||||||
billingDepartmentCode: "",
|
try {
|
||||||
basePriceList: "",
|
console.log("Form Data:", formData);
|
||||||
nonContainerServiceOrderAutoApprovalDeptCode: "",
|
const sysParamData = await addSysParameter(formData);
|
||||||
ediMAESchedulerOnOff: "",
|
console.log("API Response:", sysParamData);
|
||||||
ediSchedulerOnOff: "",
|
toast.success("Form submitted successfully!");
|
||||||
companyDisplayName: "",
|
} catch (error) {
|
||||||
});
|
console.error("Error:", error.response ? error.response.data : error.message);
|
||||||
};
|
toast.error("Failed to submit the form. Please try again.");
|
||||||
|
}
|
||||||
return (
|
};
|
||||||
<Container className="mt-5">
|
|
||||||
<p className="bg-gray-400 text-center text-white text-3xl m-3 p-2">
|
const handleClear = () => {
|
||||||
System Parameters
|
setFormData({
|
||||||
</p>
|
schedulerTime: "",
|
||||||
<form onSubmit={handleSubmit} className="m-5 p-5">
|
leaseTaxCode: "",
|
||||||
<Grid container spacing={3}>
|
vesselConfProcessLimit: "",
|
||||||
{Object.keys(formData).map((key, index) => (
|
rowToDisplay: "",
|
||||||
<Grid item xs={12} sm={6} key={index}>
|
linkToDisplay: "",
|
||||||
<TextField
|
rowToAdd: "",
|
||||||
fullWidth
|
lovRowToDisplay: "",
|
||||||
label={key
|
lovLinkToDisplay: "",
|
||||||
.split(/(?=[A-Z])/)
|
oidserverName: "",
|
||||||
.join(" ")
|
oidBase: "",
|
||||||
.replace(/\b\w/g, (l) => l.toUpperCase())}
|
oidAdminUser: "",
|
||||||
name={key}
|
oidServerPort: "",
|
||||||
value={formData[key]}
|
userDefaultGroup: "",
|
||||||
onChange={handleInputChange}
|
defaultDepartment: "",
|
||||||
variant="outlined"
|
defaultPosition: "",
|
||||||
/>
|
singleCharge: "",
|
||||||
</Grid>
|
firstDayOftheWeek: "",
|
||||||
))}
|
hourPerShift: "",
|
||||||
<Grid item xs={12}>
|
cnBillingFrequency: "",
|
||||||
<input type="file" onChange={handleFileChange} />
|
billingDepartmentCode: "",
|
||||||
</Grid>
|
basePriceList: "",
|
||||||
</Grid>
|
nonContainerServiceOrder: "",
|
||||||
<div style={{ textAlign: "end", marginTop: 20 }}>
|
ediMaeSchedulerONOFF: "",
|
||||||
<Button
|
ediSchedulerONOFF: "",
|
||||||
variant="contained"
|
upload_Logo: null,
|
||||||
color="primary"
|
company_Display_Name: "",
|
||||||
type="submit"
|
});
|
||||||
style={{ marginRight: 10 }}
|
};
|
||||||
>
|
|
||||||
Save
|
const formatLabel = (key) => {
|
||||||
</Button>
|
return key
|
||||||
<Button variant="outlined" color="primary" onClick={handleClear}>
|
.split(/(?=[A-Z])/)
|
||||||
Clear
|
.join(" ")
|
||||||
</Button>
|
.replace(/\b\w/g, (l) => l.toUpperCase());
|
||||||
</div>
|
};
|
||||||
</form>
|
|
||||||
</Container>
|
return (
|
||||||
);
|
<Container maxWidth="lg" sx={{ mt: 10, mb: 4 }}>
|
||||||
};
|
{contextLoading ? (
|
||||||
|
<LinearProgress />
|
||||||
export default SystemParameterForm;
|
) : (
|
||||||
|
<Paper elevation={3} sx={{ p: 4 }}>
|
||||||
|
<Typography
|
||||||
|
variant="h4"
|
||||||
|
component="h1"
|
||||||
|
align="center"
|
||||||
|
sx={{
|
||||||
|
mb: 4,
|
||||||
|
color: 'primary.main',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
System Parameter Settings
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Box component="form" onSubmit={handleSubmit}>
|
||||||
|
<Grid container spacing={3}>
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<Typography variant="h6" color="text.secondary">
|
||||||
|
Setup Code
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<Typography variant="h6" color="text.secondary">
|
||||||
|
Value
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{Object.keys(formData).map((key, index) =>
|
||||||
|
key !== "upload_Logo" ? (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<Grid item xs={6} sx={{ display: 'flex', alignItems: 'center' }}>
|
||||||
|
<Typography>{formatLabel(key)}</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
name={key}
|
||||||
|
value={formData[key]}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
variant="outlined"
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</React.Fragment>
|
||||||
|
) : (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
<Grid item xs={6} sx={{ display: 'flex', alignItems: 'center' }}>
|
||||||
|
<Typography>Upload Logo</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
type="file"
|
||||||
|
onChange={handleFileChange}
|
||||||
|
variant="outlined"
|
||||||
|
size="small"
|
||||||
|
InputProps={{
|
||||||
|
inputProps: {
|
||||||
|
accept: "image/*"
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</React.Fragment>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 4 }}>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
type="submit"
|
||||||
|
sx={{ mr: 2 }}
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
onClick={handleClear}
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Paper>
|
||||||
|
)}
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SystemParameterForm;
|
||||||
427
src/components/Dashboard/Test/Apitest.js
Normal file
427
src/components/Dashboard/Test/Apitest.js
Normal file
@@ -0,0 +1,427 @@
|
|||||||
|
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 (
|
||||||
|
<div className="container mt-5">
|
||||||
|
<Typography variant="h4" gutterBottom>
|
||||||
|
Entity Table
|
||||||
|
</Typography>
|
||||||
|
<div className={classes.searchContainer}>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
onClick={() => setShowAddModal(true)}
|
||||||
|
className={classes.button}
|
||||||
|
>
|
||||||
|
Add Entity
|
||||||
|
</Button>
|
||||||
|
<TextField
|
||||||
|
className={classes.searchInput}
|
||||||
|
label="Search"
|
||||||
|
variant="outlined"
|
||||||
|
size="small"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
InputProps={{
|
||||||
|
endAdornment: (
|
||||||
|
<InputAdornment position="end">
|
||||||
|
<IconButton>
|
||||||
|
<SearchIcon />
|
||||||
|
</IconButton>
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<TableContainer component={Paper} className={classes.tableContainer}>
|
||||||
|
<Table>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow className={classes.tableHeader}>
|
||||||
|
<TableCell>ID</TableCell>
|
||||||
|
<TableCell>Name</TableCell>
|
||||||
|
<TableCell>Email</TableCell>
|
||||||
|
<TableCell>Mobile No</TableCell>
|
||||||
|
<TableCell>Address</TableCell>
|
||||||
|
<TableCell>Pincode</TableCell>
|
||||||
|
<TableCell>Actions</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{filteredData.slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage).map((entity) => (
|
||||||
|
<TableRow key={entity.id}>
|
||||||
|
<TableCell>{entity.id}</TableCell>
|
||||||
|
<TableCell>{entity.name}</TableCell>
|
||||||
|
<TableCell>{entity.email}</TableCell>
|
||||||
|
<TableCell>{entity.mobno}</TableCell>
|
||||||
|
<TableCell>{entity.address}</TableCell>
|
||||||
|
<TableCell>{entity.pincode}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="warning"
|
||||||
|
size="small"
|
||||||
|
className={classes.button}
|
||||||
|
onClick={() => handleEdit(entity)}
|
||||||
|
>
|
||||||
|
Update
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="error"
|
||||||
|
size="small"
|
||||||
|
className={classes.button}
|
||||||
|
onClick={() => {
|
||||||
|
setDeleteEntityId(entity.id);
|
||||||
|
setShowDeleteModal(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
<TablePagination
|
||||||
|
rowsPerPageOptions={[5, 10, 25]}
|
||||||
|
component="div"
|
||||||
|
count={filteredData.length}
|
||||||
|
rowsPerPage={itemsPerPage}
|
||||||
|
page={currentPage}
|
||||||
|
onPageChange={handlePageChange}
|
||||||
|
/>
|
||||||
|
<Dialog open={showEditModal} onClose={() => setShowEditModal(false)}>
|
||||||
|
<DialogTitle>Edit Entity</DialogTitle>
|
||||||
|
<DialogContent className={classes.dialogContent}>
|
||||||
|
<TextField
|
||||||
|
label="Name"
|
||||||
|
variant="outlined"
|
||||||
|
fullWidth
|
||||||
|
name="name"
|
||||||
|
value={editEntity?.name || ""}
|
||||||
|
onChange={handleEditChange}
|
||||||
|
className={classes.formControl}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Email"
|
||||||
|
variant="outlined"
|
||||||
|
fullWidth
|
||||||
|
name="email"
|
||||||
|
value={editEntity?.email || ""}
|
||||||
|
onChange={handleEditChange}
|
||||||
|
className={classes.formControl}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Mobile No"
|
||||||
|
variant="outlined"
|
||||||
|
fullWidth
|
||||||
|
name="mobno"
|
||||||
|
value={editEntity?.mobno || ""}
|
||||||
|
onChange={handleEditChange}
|
||||||
|
className={classes.formControl}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Address"
|
||||||
|
variant="outlined"
|
||||||
|
fullWidth
|
||||||
|
name="address"
|
||||||
|
value={editEntity?.address || ""}
|
||||||
|
onChange={handleEditChange}
|
||||||
|
className={classes.formControl}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Pincode"
|
||||||
|
variant="outlined"
|
||||||
|
fullWidth
|
||||||
|
name="pincode"
|
||||||
|
value={editEntity?.pincode || ""}
|
||||||
|
onChange={handleEditChange}
|
||||||
|
className={classes.formControl}
|
||||||
|
/>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={() => setShowEditModal(false)} color="primary">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleUpdate} color="primary">
|
||||||
|
Update
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
<Dialog open={showAddModal} onClose={() => setShowAddModal(false)}>
|
||||||
|
<DialogTitle>Add Entity</DialogTitle>
|
||||||
|
<DialogContent className={classes.dialogContent}>
|
||||||
|
<TextField
|
||||||
|
label="Name"
|
||||||
|
variant="outlined"
|
||||||
|
fullWidth
|
||||||
|
name="name"
|
||||||
|
value={newEntity.name}
|
||||||
|
onChange={handleChange}
|
||||||
|
className={classes.formControl}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Email"
|
||||||
|
variant="outlined"
|
||||||
|
fullWidth
|
||||||
|
name="email"
|
||||||
|
value={newEntity.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
className={classes.formControl}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Mobile No"
|
||||||
|
variant="outlined"
|
||||||
|
fullWidth
|
||||||
|
name="mobno"
|
||||||
|
value={newEntity.mobno}
|
||||||
|
onChange={handleChange}
|
||||||
|
className={classes.formControl}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Address"
|
||||||
|
variant="outlined"
|
||||||
|
fullWidth
|
||||||
|
name="address"
|
||||||
|
value={newEntity.address}
|
||||||
|
onChange={handleChange}
|
||||||
|
className={classes.formControl}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Pincode"
|
||||||
|
variant="outlined"
|
||||||
|
fullWidth
|
||||||
|
name="pincode"
|
||||||
|
value={newEntity.pincode}
|
||||||
|
onChange={handleChange}
|
||||||
|
className={classes.formControl}
|
||||||
|
/>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={() => setShowAddModal(false)} color="primary">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleAdd} color="primary">
|
||||||
|
Add
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
<Dialog open={showDeleteModal} onClose={() => setShowDeleteModal(false)}>
|
||||||
|
<DialogTitle>Confirm Delete</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<Typography>Are you sure you want to delete this entity?</Typography>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={() => setShowDeleteModal(false)} color="primary">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleDelete} color="primary">
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
<Snackbar
|
||||||
|
open={openSnackbar}
|
||||||
|
autoHideDuration={6000}
|
||||||
|
onClose={() => setOpenSnackbar(false)}
|
||||||
|
>
|
||||||
|
<Alert onClose={() => setOpenSnackbar(false)} severity={snackbarSeverity}>
|
||||||
|
{snackbarMessage}
|
||||||
|
</Alert>
|
||||||
|
</Snackbar>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EntityTable;
|
||||||
@@ -1,145 +1,746 @@
|
|||||||
import React, { useState, useEffect, useRef } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { Box, Button } from "@mui/material";
|
import {
|
||||||
import { DataGrid, GridToolbarContainer } from "@mui/x-data-grid";
|
Button,
|
||||||
import { BsThreeDotsVertical } from "react-icons/bs"; // Importing react-icons
|
Modal,
|
||||||
|
FormControl,
|
||||||
const api = process.env.REACT_APP_API_BASE_URL;
|
InputLabel,
|
||||||
|
Select,
|
||||||
function CustomToolbar({ apiRef, handleModal }) {
|
MenuItem,
|
||||||
const handleGoToPage1 = () => {
|
TextField,
|
||||||
if (apiRef.current) {
|
Table,
|
||||||
apiRef.current.setPage(1);
|
TableBody,
|
||||||
}
|
TableCell,
|
||||||
};
|
TableContainer,
|
||||||
|
TableHead,
|
||||||
return (
|
TableRow,
|
||||||
<GridToolbarContainer className="flex flex-wrap justify-between p-2 bg-gray-100 border-b border-gray-200">
|
Paper,
|
||||||
<Button
|
Pagination,
|
||||||
onClick={handleGoToPage1}
|
IconButton,
|
||||||
className="bg-blue-500 text-white px-4 py-2 rounded shadow hover:bg-blue-600 m-1"
|
Checkbox,
|
||||||
>
|
FormControlLabel,
|
||||||
Go to page 1
|
Chip,
|
||||||
</Button>
|
Box,
|
||||||
<Button
|
Typography,
|
||||||
onClick={handleModal}
|
Card,
|
||||||
className="bg-green-500 text-white px-4 py-2 rounded shadow hover:bg-green-600 m-1"
|
CardHeader,
|
||||||
>
|
CardContent,
|
||||||
+
|
Divider,
|
||||||
</Button>
|
Grid,
|
||||||
</GridToolbarContainer>
|
TextareaAutosize,
|
||||||
);
|
Popover,
|
||||||
}
|
List,
|
||||||
|
ListItem,
|
||||||
function TokenRegistry() {
|
ListItemText,
|
||||||
const [menuItems, setMenuItems] = useState([]);
|
ListItemIcon,
|
||||||
const [selectedMenuItem, setSelectedMenuItem] = useState(null);
|
Dialog,
|
||||||
const [, setIsModalOpen] = useState(false);
|
DialogTitle,
|
||||||
const apiRef = useRef(null);
|
DialogContent,
|
||||||
|
DialogActions,
|
||||||
useEffect(() => {
|
DialogContentText,
|
||||||
const fetchData = async () => {
|
CircularProgress
|
||||||
const token = localStorage.getItem("token"); // Get token from local storage
|
} from "@mui/material";
|
||||||
try {
|
import {
|
||||||
const response = await fetch(
|
Edit as EditIcon,
|
||||||
`${api}/apiregistery/getall`,
|
Delete as DeleteIcon,
|
||||||
{
|
Add as AddIcon,
|
||||||
headers: {
|
Menu as MenuIcon,
|
||||||
Authorization: `Bearer ${token}`,
|
Close as CloseIcon,
|
||||||
},
|
Search as SearchIcon,
|
||||||
}
|
LibraryBooks as LibraryBooksIcon,
|
||||||
);
|
CheckCircle as CheckCircleIcon
|
||||||
const data = await response.json();
|
} from "@mui/icons-material";
|
||||||
setMenuItems(data);
|
import { toast } from "react-toastify";
|
||||||
} catch (error) {
|
import * as tokenRegistryAPI from './tokenregistryapi';
|
||||||
console.error("Error fetching data:", error);
|
|
||||||
}
|
function TOKENRegistry() {
|
||||||
};
|
const [tokens, setTokens] = useState([]);
|
||||||
|
const [showAddEditModal, setShowAddEditModal] = useState(false);
|
||||||
fetchData();
|
const [showGenerateTokenModal, setShowGenerateTokenModal] = useState(false);
|
||||||
}, []);
|
const [newTokenName, setNewTokenName] = useState("");
|
||||||
|
const [generatedToken, setGeneratedToken] = useState("");
|
||||||
const handleThreeDotsClick = (menuItemId) => {
|
const [currentToken, setCurrentToken] = useState({
|
||||||
setSelectedMenuItem(menuItemId === selectedMenuItem ? null : menuItemId);
|
id: "",
|
||||||
};
|
tokenName: "",
|
||||||
|
tokenValue: "",
|
||||||
const columns = [
|
isActive: true,
|
||||||
{
|
scopes: []
|
||||||
field: "table_id",
|
});
|
||||||
headerName: "Table ID",
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
width: 200,
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
headerClassName: "custom-header",
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
cellClassName: "custom-cell",
|
const [recordsPerPage, setRecordsPerPage] = useState(10);
|
||||||
},
|
const [visibleColumns, setVisibleColumns] = useState({
|
||||||
{
|
id: true,
|
||||||
field: "token_name",
|
tokenName: true,
|
||||||
headerName: "Token Name",
|
tokenValue: true,
|
||||||
width: 250,
|
scopes: true,
|
||||||
headerClassName: "custom-header",
|
isActive: true,
|
||||||
cellClassName: "custom-cell",
|
actions: true
|
||||||
},
|
});
|
||||||
{
|
const [loading, setLoading] = useState(true);
|
||||||
field: "token",
|
const [selectedScope, setSelectedScope] = useState("");
|
||||||
headerName: "Token",
|
const [selectedScopes, setSelectedScopes] = useState([]);
|
||||||
width: 200,
|
const [availableScopes] = useState([
|
||||||
headerClassName: "custom-header",
|
{ value: 'read', label: 'Read Access' },
|
||||||
cellClassName: "custom-cell",
|
{ value: 'write', label: 'Write Access' },
|
||||||
},
|
{ value: 'delete', label: 'Delete Access' },
|
||||||
{
|
{ value: 'admin', label: 'Admin Access' },
|
||||||
field: "actions",
|
]);
|
||||||
headerName: "Actions",
|
const [anchorEl, setAnchorEl] = useState(null);
|
||||||
width: 150,
|
const [columnsAnchorEl, setColumnsAnchorEl] = useState(null);
|
||||||
renderCell: ({ row }) => (
|
const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
|
||||||
<div className="relative">
|
const [tokenToDelete, setTokenToDelete] = useState(null);
|
||||||
<div
|
|
||||||
className="cursor-pointer"
|
useEffect(() => {
|
||||||
onClick={() => handleThreeDotsClick(row.id)}
|
fetchTokens();
|
||||||
>
|
}, []);
|
||||||
<BsThreeDotsVertical /> {/* Updated icon from react-icons */}
|
|
||||||
</div>
|
const fetchTokens = async () => {
|
||||||
{selectedMenuItem === row.id && (
|
setLoading(true);
|
||||||
<div className="absolute right-0 mt-2 py-2 w-48 bg-white rounded-lg shadow-xl">
|
try {
|
||||||
<button className="block px-4 py-2 text-gray-800 hover:bg-gray-200 w-full text-left">
|
const data = await tokenRegistryAPI.fetchAllTokens();
|
||||||
Edit
|
setTokens(data);
|
||||||
</button>
|
} catch (error) {
|
||||||
<button className="block px-4 py-2 text-gray-800 hover:bg-gray-200 w-full text-left">
|
handleApiError(error, "fetch tokens");
|
||||||
Delete
|
} finally {
|
||||||
</button>
|
setLoading(false);
|
||||||
</div>
|
}
|
||||||
)}
|
};
|
||||||
</div>
|
|
||||||
),
|
const handleApiError = (error, action) => {
|
||||||
},
|
if (error.message === 'Unauthorized') {
|
||||||
];
|
toast.error("Your session has expired. Please log in again.");
|
||||||
|
} else {
|
||||||
return (
|
toast.error(`Failed to ${action}`);
|
||||||
<div className="flex justify-center mt-5 px-2 md:px-0">
|
console.error(`Error ${action}:`, error);
|
||||||
<Box className="w-full max-w-7xl bg-gray-50 p-4 md:p-6 rounded shadow-md">
|
}
|
||||||
<p className="text-2xl md:text-3xl text-center text-white bg-gray-400 mb-4 p-3">
|
};
|
||||||
Token Registry
|
|
||||||
</p>
|
const toggleColumn = (column) => {
|
||||||
<div className="bg-white p-2 md:p-4 rounded shadow-md">
|
setVisibleColumns(prev => ({
|
||||||
<DataGrid
|
...prev,
|
||||||
rows={menuItems}
|
[column]: !prev[column],
|
||||||
columns={columns}
|
}));
|
||||||
components={{
|
};
|
||||||
Toolbar: () => (
|
|
||||||
<CustomToolbar
|
const handleInputChange = (event) => {
|
||||||
apiRef={apiRef}
|
const { name, value, type, checked } = event.target;
|
||||||
handleModal={() => setIsModalOpen(true)}
|
setCurrentToken(prev => ({
|
||||||
/>
|
...prev,
|
||||||
),
|
[name]: type === "checkbox" ? checked : value
|
||||||
}}
|
}));
|
||||||
pageSize={10}
|
};
|
||||||
onGridReady={(gridApi) => {
|
|
||||||
apiRef.current = gridApi;
|
const handleSearch = (query) => {
|
||||||
}}
|
setSearchQuery(query);
|
||||||
className="data-grid"
|
setCurrentPage(1);
|
||||||
/>
|
};
|
||||||
</div>
|
|
||||||
</Box>
|
const handleClose = () => {
|
||||||
{/* Add your modals and other components here */}
|
setShowAddEditModal(false);
|
||||||
</div>
|
setShowGenerateTokenModal(false);
|
||||||
);
|
setGeneratedToken("");
|
||||||
}
|
setNewTokenName("");
|
||||||
|
setSelectedScopes([]);
|
||||||
export default TokenRegistry;
|
};
|
||||||
|
|
||||||
|
const handleRecordsPerPageChange = (number) => {
|
||||||
|
setRecordsPerPage(number);
|
||||||
|
setCurrentPage(1);
|
||||||
|
setAnchorEl(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredTokens = tokens.filter(
|
||||||
|
(item) =>
|
||||||
|
item.tokenName &&
|
||||||
|
item.tokenName.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
const totalPages = Math.ceil(filteredTokens.length / recordsPerPage);
|
||||||
|
const handlePageChange = (event, pageNumber) => {
|
||||||
|
setCurrentPage(pageNumber);
|
||||||
|
};
|
||||||
|
|
||||||
|
const slicedTokens = filteredTokens.slice(
|
||||||
|
(currentPage - 1) * recordsPerPage,
|
||||||
|
currentPage * recordsPerPage
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSubmit = async (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
try {
|
||||||
|
if (isEditing) {
|
||||||
|
await tokenRegistryAPI.updateToken(currentToken.id, currentToken);
|
||||||
|
toast.success("Token updated successfully!");
|
||||||
|
} else {
|
||||||
|
await tokenRegistryAPI.createToken(currentToken);
|
||||||
|
toast.success("Token added successfully!");
|
||||||
|
}
|
||||||
|
setShowAddEditModal(false);
|
||||||
|
fetchTokens();
|
||||||
|
} catch (error) {
|
||||||
|
handleApiError(error, isEditing ? "update token" : "add token");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const openModal = (token = { id: "", tokenName: "", tokenValue: "", isActive: false, scopes: [] }) => {
|
||||||
|
setIsEditing(!!token.id);
|
||||||
|
setCurrentToken(token);
|
||||||
|
setSelectedScopes(token.scopes || []);
|
||||||
|
setShowAddEditModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteClick = (id) => {
|
||||||
|
setTokenToDelete(id);
|
||||||
|
setDeleteConfirmOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteConfirm = async () => {
|
||||||
|
try {
|
||||||
|
await tokenRegistryAPI.deleteToken(tokenToDelete);
|
||||||
|
toast.success('Token deleted successfully');
|
||||||
|
fetchTokens();
|
||||||
|
} catch (error) {
|
||||||
|
handleApiError(error, "delete token");
|
||||||
|
} finally {
|
||||||
|
setDeleteConfirmOpen(false);
|
||||||
|
setTokenToDelete(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const addScope = () => {
|
||||||
|
if (selectedScope && !selectedScopes.includes(selectedScope)) {
|
||||||
|
setSelectedScopes([...selectedScopes, selectedScope]);
|
||||||
|
setSelectedScope("");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeScope = (scopeToRemove) => {
|
||||||
|
setSelectedScopes(selectedScopes.filter(scope => scope !== scopeToRemove));
|
||||||
|
};
|
||||||
|
|
||||||
|
const generateNewToken = async () => {
|
||||||
|
if (!newTokenName.trim()) {
|
||||||
|
toast.error("Please enter a token name");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await tokenRegistryAPI.generateToken({
|
||||||
|
name: newTokenName,
|
||||||
|
scopes: selectedScopes
|
||||||
|
});
|
||||||
|
setGeneratedToken(data.tokenValue);
|
||||||
|
toast.success("Token generated successfully!");
|
||||||
|
fetchTokens();
|
||||||
|
} catch (error) {
|
||||||
|
handleApiError(error, "generate token");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMenuClick = (event) => {
|
||||||
|
setAnchorEl(event.currentTarget);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMenuClose = () => {
|
||||||
|
setAnchorEl(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleColumnsMenuClick = (event) => {
|
||||||
|
setColumnsAnchorEl(event.currentTarget);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleColumnsMenuClose = () => {
|
||||||
|
setColumnsAnchorEl(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ marginTop: "1rem", padding: 2 }}>
|
||||||
|
{loading ? (
|
||||||
|
<Box display="flex" justifyContent="center" alignItems="center" minHeight="200px">
|
||||||
|
<CircularProgress />
|
||||||
|
</Box>
|
||||||
|
) : (
|
||||||
|
<Box>
|
||||||
|
{/* Token Generation Card */}
|
||||||
|
<Card sx={{ mb: 4, boxShadow: 3 }}>
|
||||||
|
<CardHeader
|
||||||
|
title="Token Management"
|
||||||
|
action={
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={() => setShowGenerateTokenModal(true)}
|
||||||
|
sx={{ backgroundColor: '#1976d2', color: 'white' }}
|
||||||
|
>
|
||||||
|
Generate New Token
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<CardContent>
|
||||||
|
<Typography variant="body1">
|
||||||
|
Manage your API tokens here. Generate new tokens or delete existing ones.
|
||||||
|
</Typography>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Box display="flex" justifyContent="space-between" alignItems="center" mb={4}>
|
||||||
|
<Typography variant="h4" component="h1" sx={{ fontWeight: 'bold' }}>
|
||||||
|
Token Registry
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Grid container spacing={2} alignItems="center" mb={3}>
|
||||||
|
<Grid item xs={12} md={8} lg={6}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
variant="outlined"
|
||||||
|
placeholder="Search"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => handleSearch(e.target.value)}
|
||||||
|
InputProps={{
|
||||||
|
startAdornment: (
|
||||||
|
<SearchIcon sx={{ color: 'action.active', mr: 1 }} />
|
||||||
|
),
|
||||||
|
sx: {
|
||||||
|
borderRadius: '10px',
|
||||||
|
boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={12} md={4} lg={6} display="flex" justifyContent="flex-end">
|
||||||
|
<IconButton
|
||||||
|
onClick={() => openModal()}
|
||||||
|
color="primary"
|
||||||
|
sx={{ mr: 2 }}
|
||||||
|
>
|
||||||
|
<AddIcon />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton
|
||||||
|
onClick={handleColumnsMenuClick}
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
<MenuIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<TableContainer component={Paper} sx={{ boxShadow: 3 }}>
|
||||||
|
<Table>
|
||||||
|
<TableHead sx={{ backgroundColor: '#f5f5f5' }}>
|
||||||
|
<TableRow>
|
||||||
|
{Object.keys(visibleColumns).filter(key => visibleColumns[key]).map(key => (
|
||||||
|
<TableCell key={key}>
|
||||||
|
{key.charAt(0).toUpperCase() + key.slice(1)}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{slicedTokens.length === 0 ? (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell
|
||||||
|
colSpan={Object.keys(visibleColumns).filter(key => visibleColumns[key]).length}
|
||||||
|
align="center"
|
||||||
|
>
|
||||||
|
No Data Available
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
) : (
|
||||||
|
slicedTokens.map((token, index) => (
|
||||||
|
<TableRow key={index} hover>
|
||||||
|
{Object.keys(visibleColumns).filter(key => visibleColumns[key]).map(key => (
|
||||||
|
<TableCell key={key}>
|
||||||
|
{key === "actions" ? (
|
||||||
|
<>
|
||||||
|
<IconButton
|
||||||
|
onClick={() => openModal(token)}
|
||||||
|
color="primary"
|
||||||
|
sx={{ mr: 1 }}
|
||||||
|
>
|
||||||
|
<EditIcon />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton
|
||||||
|
onClick={() => handleDeleteClick(token.id)}
|
||||||
|
color="error"
|
||||||
|
>
|
||||||
|
<DeleteIcon />
|
||||||
|
</IconButton>
|
||||||
|
</>
|
||||||
|
) : key === "isActive" ? (
|
||||||
|
<Chip
|
||||||
|
label={token.isActive ? "Active" : "Inactive"}
|
||||||
|
color={token.isActive ? "success" : "error"}
|
||||||
|
size="small"
|
||||||
|
sx={{
|
||||||
|
backgroundColor: token.isActive ? '#d4f7d4' : '#f7d4d4',
|
||||||
|
color: token.isActive ? 'green' : 'red'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : key === "scopes" ? (
|
||||||
|
<Box>
|
||||||
|
{token.scopes && token.scopes.map(scope => {
|
||||||
|
const scopeInfo = availableScopes.find(s => s.value === scope);
|
||||||
|
return (
|
||||||
|
<Chip
|
||||||
|
key={scope}
|
||||||
|
label={scopeInfo?.label || scope}
|
||||||
|
color="primary"
|
||||||
|
size="small"
|
||||||
|
sx={{ mr: 1, mb: 1 }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Box>
|
||||||
|
) : (
|
||||||
|
token[key]
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
|
||||||
|
{/* Manage Columns */}
|
||||||
|
<Popover
|
||||||
|
open={Boolean(columnsAnchorEl)}
|
||||||
|
anchorEl={columnsAnchorEl}
|
||||||
|
onClose={handleColumnsMenuClose}
|
||||||
|
anchorOrigin={{
|
||||||
|
vertical: 'bottom',
|
||||||
|
horizontal: 'right',
|
||||||
|
}}
|
||||||
|
transformOrigin={{
|
||||||
|
vertical: 'top',
|
||||||
|
horizontal: 'right',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<List>
|
||||||
|
{Object.keys(visibleColumns).map((column) => (
|
||||||
|
<ListItem key={column} dense button onClick={() => toggleColumn(column)}>
|
||||||
|
<ListItemIcon>
|
||||||
|
<Checkbox
|
||||||
|
edge="start"
|
||||||
|
checked={visibleColumns[column]}
|
||||||
|
tabIndex={-1}
|
||||||
|
disableRipple
|
||||||
|
/>
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary={column.charAt(0).toUpperCase() + column.slice(1).toLowerCase()} />
|
||||||
|
</ListItem>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
</Popover>
|
||||||
|
|
||||||
|
{/* Records Per Page */}
|
||||||
|
<Box display="flex" justifyContent="flex-end" mt={2}>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
startIcon={<LibraryBooksIcon />}
|
||||||
|
onClick={handleMenuClick}
|
||||||
|
sx={{ border: '2px solid', borderRadius: '8px', boxShadow: 1 }}
|
||||||
|
>
|
||||||
|
{recordsPerPage}
|
||||||
|
</Button>
|
||||||
|
<Popover
|
||||||
|
open={Boolean(anchorEl)}
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
onClose={handleMenuClose}
|
||||||
|
anchorOrigin={{
|
||||||
|
vertical: 'bottom',
|
||||||
|
horizontal: 'right',
|
||||||
|
}}
|
||||||
|
transformOrigin={{
|
||||||
|
vertical: 'top',
|
||||||
|
horizontal: 'right',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<List>
|
||||||
|
{[1, 5, 10, 20, 50].map((number) => (
|
||||||
|
<ListItem
|
||||||
|
key={number}
|
||||||
|
dense
|
||||||
|
button
|
||||||
|
onClick={() => handleRecordsPerPageChange(number)}
|
||||||
|
sx={{ minWidth: '100px' }}
|
||||||
|
>
|
||||||
|
<ListItemText primary={number} />
|
||||||
|
{recordsPerPage === number && <CheckCircleIcon color="primary" />}
|
||||||
|
</ListItem>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
</Popover>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box display="flex" justifyContent="center" mt={2}>
|
||||||
|
<Pagination
|
||||||
|
count={totalPages}
|
||||||
|
page={currentPage}
|
||||||
|
onChange={handlePageChange}
|
||||||
|
color="primary"
|
||||||
|
showFirstButton
|
||||||
|
showLastButton
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Generate Token Modal */}
|
||||||
|
<Dialog open={showGenerateTokenModal} onClose={handleClose} fullWidth maxWidth="sm">
|
||||||
|
<DialogTitle>
|
||||||
|
Generate New Token
|
||||||
|
<IconButton
|
||||||
|
onClick={handleClose}
|
||||||
|
sx={{
|
||||||
|
position: 'absolute',
|
||||||
|
right: 8,
|
||||||
|
top: 8,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<Box component="form" sx={{ mt: 1 }}>
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="Token Name"
|
||||||
|
value={newTokenName}
|
||||||
|
onChange={(e) => setNewTokenName(e.target.value)}
|
||||||
|
required
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Typography variant="subtitle1" gutterBottom>
|
||||||
|
Token Scopes
|
||||||
|
</Typography>
|
||||||
|
<Box display="flex" alignItems="center" mb={2}>
|
||||||
|
<FormControl fullWidth sx={{ mr: 2 }}>
|
||||||
|
<InputLabel>Select a scope</InputLabel>
|
||||||
|
<Select
|
||||||
|
value={selectedScope}
|
||||||
|
onChange={(e) => setSelectedScope(e.target.value)}
|
||||||
|
label="Select a scope"
|
||||||
|
>
|
||||||
|
<MenuItem value=""><em>Select a scope</em></MenuItem>
|
||||||
|
{availableScopes.map(scope => (
|
||||||
|
<MenuItem key={scope.value} value={scope.value}>
|
||||||
|
{scope.label}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
onClick={addScope}
|
||||||
|
disabled={!selectedScope}
|
||||||
|
>
|
||||||
|
Add Scope
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
<Typography variant="caption" display="block" gutterBottom>
|
||||||
|
Select and add the permissions this token should have
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{/* Display selected scopes as chips */}
|
||||||
|
{selectedScopes.length > 0 && (
|
||||||
|
<Box sx={{ mt: 2 }}>
|
||||||
|
{selectedScopes.map(scope => {
|
||||||
|
const scopeInfo = availableScopes.find(s => s.value === scope);
|
||||||
|
return (
|
||||||
|
<Chip
|
||||||
|
key={scope}
|
||||||
|
label={scopeInfo?.label || scope}
|
||||||
|
color="primary"
|
||||||
|
onDelete={() => removeScope(scope)}
|
||||||
|
sx={{ mr: 1, mb: 1 }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{generatedToken && (
|
||||||
|
<Box sx={{ mt: 2 }}>
|
||||||
|
<Typography variant="subtitle1" gutterBottom>
|
||||||
|
Generated Token
|
||||||
|
</Typography>
|
||||||
|
<TextareaAutosize
|
||||||
|
minRows={3}
|
||||||
|
value={generatedToken}
|
||||||
|
readOnly
|
||||||
|
style={{ width: '100%', padding: '8px', borderRadius: '4px', borderColor: '#ccc' }}
|
||||||
|
/>
|
||||||
|
<Typography variant="caption" display="block" gutterBottom>
|
||||||
|
Copy this token and store it securely. You won't be able to see it again.
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={handleClose}>Close</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={generateNewToken}
|
||||||
|
disabled={!newTokenName.trim()}
|
||||||
|
>
|
||||||
|
Generate Token
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Add/Edit Token Modal */}
|
||||||
|
<Dialog open={showAddEditModal} onClose={handleClose} fullWidth maxWidth="sm">
|
||||||
|
<DialogTitle>
|
||||||
|
{isEditing ? "Edit Token" : "Add Token"}
|
||||||
|
<IconButton
|
||||||
|
onClick={handleClose}
|
||||||
|
sx={{
|
||||||
|
position: 'absolute',
|
||||||
|
right: 8,
|
||||||
|
top: 8,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="Token Name"
|
||||||
|
name="tokenName"
|
||||||
|
value={currentToken.tokenName}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
required
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="Token Value"
|
||||||
|
name="tokenValue"
|
||||||
|
value={currentToken.tokenValue}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
required
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Typography variant="subtitle1" gutterBottom>
|
||||||
|
Token Scopes
|
||||||
|
</Typography>
|
||||||
|
<Box display="flex" alignItems="center" mb={2}>
|
||||||
|
<FormControl fullWidth sx={{ mr: 2 }}>
|
||||||
|
<InputLabel>Select a scope</InputLabel>
|
||||||
|
<Select
|
||||||
|
value={selectedScope}
|
||||||
|
onChange={(e) => setSelectedScope(e.target.value)}
|
||||||
|
label="Select a scope"
|
||||||
|
>
|
||||||
|
<MenuItem value=""><em>Select a scope</em></MenuItem>
|
||||||
|
{availableScopes.map(scope => (
|
||||||
|
<MenuItem key={scope.value} value={scope.value}>
|
||||||
|
{scope.label}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
onClick={() => {
|
||||||
|
if (selectedScope && !currentToken.scopes.includes(selectedScope)) {
|
||||||
|
setCurrentToken(prev => ({
|
||||||
|
...prev,
|
||||||
|
scopes: [...prev.scopes, selectedScope]
|
||||||
|
}));
|
||||||
|
setSelectedScope("");
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={!selectedScope}
|
||||||
|
>
|
||||||
|
Add Scope
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
<Typography variant="caption" display="block" gutterBottom>
|
||||||
|
Select and add the permissions this token should have
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{/* Display selected scopes as chips */}
|
||||||
|
{currentToken.scopes && currentToken.scopes.length > 0 && (
|
||||||
|
<Box sx={{ mt: 2 }}>
|
||||||
|
{currentToken.scopes.map(scope => {
|
||||||
|
const scopeInfo = availableScopes.find(s => s.value === scope);
|
||||||
|
return (
|
||||||
|
<Chip
|
||||||
|
key={scope}
|
||||||
|
label={scopeInfo?.label || scope}
|
||||||
|
color="primary"
|
||||||
|
onDelete={() => {
|
||||||
|
setCurrentToken(prev => ({
|
||||||
|
...prev,
|
||||||
|
scopes: prev.scopes.filter(s => s !== scope)
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
sx={{ mr: 1, mb: 1 }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Checkbox
|
||||||
|
checked={currentToken.isActive}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
name="isActive"
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="Active?"
|
||||||
|
sx={{ mt: 2 }}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={handleClose}>Close</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={handleSubmit}
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
{isEditing ? "Update Token" : "Add Token"}
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Delete Confirmation Dialog */}
|
||||||
|
<Dialog
|
||||||
|
open={deleteConfirmOpen}
|
||||||
|
onClose={() => setDeleteConfirmOpen(false)}
|
||||||
|
>
|
||||||
|
<DialogTitle>Confirm Delete</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogContentText>
|
||||||
|
Are you sure you want to delete this token?
|
||||||
|
</DialogContentText>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={() => setDeleteConfirmOpen(false)}>Cancel</Button>
|
||||||
|
<Button onClick={handleDeleteConfirm} color="error" autoFocus>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TOKENRegistry;
|
||||||
88
src/components/Dashboard/TokenRegistery/tokenregistryapi.js
Normal file
88
src/components/Dashboard/TokenRegistery/tokenregistryapi.js
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
// src/services/tokenRegistryAPI.js
|
||||||
|
import axios from 'axios';
|
||||||
|
import { getToken } from '../../../utils/tokenService';
|
||||||
|
|
||||||
|
// Create axios instance with base configuration
|
||||||
|
const apiClient = axios.create({
|
||||||
|
baseURL: process.env.REACT_APP_API_URL || 'http://157.66.191.31:33730/back/',
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add request interceptor to inject token
|
||||||
|
apiClient.interceptors.request.use((config) => {
|
||||||
|
const token = getToken();
|
||||||
|
if (token) {
|
||||||
|
config.headers.Authorization = `Bearer ${token}`;
|
||||||
|
}
|
||||||
|
return config;
|
||||||
|
}, (error) => {
|
||||||
|
return Promise.reject(error);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Response interceptor for error handling
|
||||||
|
apiClient.interceptors.response.use(
|
||||||
|
(response) => response.data,
|
||||||
|
(error) => {
|
||||||
|
if (error.response) {
|
||||||
|
// Handle specific status codes
|
||||||
|
if (error.response.status === 401) {
|
||||||
|
// Handle unauthorized (token expired)
|
||||||
|
console.error('Authentication failed');
|
||||||
|
}
|
||||||
|
throw new Error(error.response.data.message || 'Request failed');
|
||||||
|
}
|
||||||
|
throw new Error(error.message || 'Network error');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export const fetchAllTokens = async () => {
|
||||||
|
try {
|
||||||
|
return await apiClient.get('apiregistery/getall');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Fetch tokens error:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const generateToken = async (token_name) => {
|
||||||
|
try {
|
||||||
|
return await apiClient.post(
|
||||||
|
'apiregistery/generateToken',
|
||||||
|
new URLSearchParams({ token_name }),
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/x-www-form-urlencoded'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Generate token error:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const createToken = async (tokenData) => {
|
||||||
|
try {
|
||||||
|
return await apiClient.post('apiregistery/create', tokenData);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Create token error:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const updateToken = async (id, tokenData) => {
|
||||||
|
try {
|
||||||
|
return await apiClient.put(`apiregistery/update/${id}`, tokenData);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Update token error:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const deleteToken = async (id) => {
|
||||||
|
try {
|
||||||
|
return await apiClient.delete(`apiregistery/delete/${id}`);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Delete token error:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -1,41 +1,41 @@
|
|||||||
/* UpdateModal.css */
|
/* UpdateModal.css */
|
||||||
|
|
||||||
.modalWrapper {
|
.modalWrapper {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: rgba(0, 0, 0, 0.5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: #4caf50;
|
background-color: #4caf50;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1,107 +1,139 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import {
|
||||||
const UpdateModal = ({ user, onUpdate, onClose }) => {
|
TextField,
|
||||||
const [updatedUser, setUpdatedUser] = useState(() => ({ ...user }));
|
Button,
|
||||||
|
Dialog,
|
||||||
useEffect(() => {
|
DialogActions,
|
||||||
console.log('Updated user state:', updatedUser);
|
DialogContent,
|
||||||
}, [updatedUser]);
|
DialogTitle,
|
||||||
|
CircularProgress
|
||||||
const handleChange = (field, value) => {
|
} from '@mui/material';
|
||||||
const updatedData = { ...updatedUser, [field]: value };
|
|
||||||
setUpdatedUser(updatedData);
|
const UpdateModal = ({ user, onUpdate, onClose, open }) => {
|
||||||
};
|
const [updatedUser, setUpdatedUser] = useState({});
|
||||||
const handleSave = () => {
|
const [loading, setLoading] = useState(false);
|
||||||
onUpdate(updatedUser);
|
const [error, setError] = useState(null);
|
||||||
onClose();
|
|
||||||
};
|
// Initialize form with user data when modal opens or user changes
|
||||||
|
useEffect(() => {
|
||||||
// const handleUpdate = () => {
|
if (user) {
|
||||||
// console.log('Before update:', updatedUser);
|
setUpdatedUser({ ...user });
|
||||||
// onUpdate(updatedUser);
|
}
|
||||||
|
}, [user, open]);
|
||||||
// onClose();
|
|
||||||
|
const handleChange = (field, value) => {
|
||||||
|
setUpdatedUser(prev => ({
|
||||||
// // Use a callback function with setUpdatedUser to ensure the state is updated
|
...prev,
|
||||||
// setUpdatedUser((prev) => {
|
[field]: value
|
||||||
// const updatedData = { ...prev };
|
}));
|
||||||
// console.log('Updated data:', updatedData);
|
};
|
||||||
|
|
||||||
// onUpdate(updatedData); // Pass the updatedData to onUpdate
|
const handleSave = async () => {
|
||||||
// onClose();
|
if (!updatedUser.userId) {
|
||||||
// return updatedData; // Return the updatedData to setUpdatedUser
|
setError('User ID is required');
|
||||||
// });
|
return;
|
||||||
|
}
|
||||||
// // Set the updatedUser state directly to ensure the UI reflects the changes
|
|
||||||
// setUpdatedUser(updatedUser);
|
setLoading(true);
|
||||||
// };
|
setError(null);
|
||||||
|
|
||||||
return (
|
try {
|
||||||
<div className="modalWrapper">
|
await onUpdate(updatedUser);
|
||||||
<div className="modal">
|
onClose();
|
||||||
<button className="closeBtn" onClick={onClose}>
|
} catch (err) {
|
||||||
X
|
console.error('Update failed:', err);
|
||||||
</button>
|
setError(err.message || 'Failed to update user');
|
||||||
<div>User ID: {user.userId}</div>
|
} finally {
|
||||||
<div>Username: {user.username}</div>
|
setLoading(false);
|
||||||
<div>Full Name: {user.fullName}</div>
|
}
|
||||||
|
};
|
||||||
<div>Email: {user.email}</div>
|
|
||||||
|
if (!user) {
|
||||||
<div>Mob Number: {user.mobno}</div>
|
return null; // Or render a loading state/message
|
||||||
<div>User grp name: {user.usergrpname}</div>
|
}
|
||||||
|
|
||||||
<label htmlFor="updatedUserId">User ID:</label>
|
return (
|
||||||
<input
|
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
|
||||||
id="updatedUserId"
|
<DialogTitle>Update User</DialogTitle>
|
||||||
type="text"
|
<DialogContent>
|
||||||
value={updatedUser.userId}
|
{error && (
|
||||||
onChange={(e) => handleChange('userId', e.target.value)}
|
<div style={{ color: 'red', marginBottom: '16px' }}>
|
||||||
/>
|
{error}
|
||||||
|
</div>
|
||||||
<label htmlFor="updatedUsername">Username:</label>
|
)}
|
||||||
<input
|
|
||||||
id="updatedUsername"
|
<TextField
|
||||||
type="text"
|
margin="dense"
|
||||||
value={updatedUser.username}
|
label="User ID"
|
||||||
onChange={(e) => handleChange('username', e.target.value)}
|
fullWidth
|
||||||
/>
|
variant="outlined"
|
||||||
|
value={updatedUser.userId || ''}
|
||||||
<label htmlFor="updatedEmail">Email:</label>
|
onChange={(e) => handleChange('userId', e.target.value)}
|
||||||
<input
|
disabled // Typically IDs shouldn't be editable
|
||||||
id="updatedEmail"
|
/>
|
||||||
type="text"
|
|
||||||
value={updatedUser.email}
|
<TextField
|
||||||
onChange={(e) => handleChange('email', e.target.value)}
|
margin="dense"
|
||||||
/>
|
label="Username"
|
||||||
|
fullWidth
|
||||||
<label htmlFor="updatedFullName">Full Name:</label>
|
variant="outlined"
|
||||||
<input
|
value={updatedUser.username || ''}
|
||||||
id="updatedFullName"
|
onChange={(e) => handleChange('username', e.target.value)}
|
||||||
type="text"
|
required
|
||||||
value={updatedUser.fullName}
|
/>
|
||||||
onChange={(e) => handleChange('fullName', e.target.value)}
|
|
||||||
/>
|
<TextField
|
||||||
<label htmlFor="updatedMobno">Mob No:</label>
|
margin="dense"
|
||||||
<input
|
label="Full Name"
|
||||||
id="updatedmobno"
|
fullWidth
|
||||||
type="number"
|
variant="outlined"
|
||||||
value={updatedUser.mobno}
|
value={updatedUser.fullName || ''}
|
||||||
onChange={(e) => handleChange('mobno', e.target.value)}
|
onChange={(e) => handleChange('fullName', e.target.value)}
|
||||||
/>
|
/>
|
||||||
<label htmlFor="updatedusergrpname">User grp name:</label>
|
|
||||||
<input
|
<TextField
|
||||||
id="updatedusergrpname"
|
margin="dense"
|
||||||
type="text"
|
label="Email"
|
||||||
value={updatedUser.usergrpname}
|
fullWidth
|
||||||
onChange={(e) => handleChange('usergrpname', e.target.value)}
|
variant="outlined"
|
||||||
/>
|
type="email"
|
||||||
|
value={updatedUser.email || ''}
|
||||||
<button onClick={handleSave}>SAVE</button>
|
onChange={(e) => handleChange('email', e.target.value)}
|
||||||
</div>
|
/>
|
||||||
</div>
|
|
||||||
);
|
<TextField
|
||||||
};
|
margin="dense"
|
||||||
|
label="Mobile Number"
|
||||||
export default UpdateModal;
|
fullWidth
|
||||||
|
variant="outlined"
|
||||||
|
value={updatedUser.mobno || ''}
|
||||||
|
onChange={(e) => handleChange('mobno', e.target.value)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
margin="dense"
|
||||||
|
label="User Group"
|
||||||
|
fullWidth
|
||||||
|
variant="outlined"
|
||||||
|
value={updatedUser.usergrpname || ''}
|
||||||
|
onChange={(e) => handleChange('usergrpname', e.target.value)}
|
||||||
|
/>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={onClose} color="secondary">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleSave}
|
||||||
|
color="primary"
|
||||||
|
variant="contained"
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? <CircularProgress size={24} /> : 'Save'}
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UpdateModal;
|
||||||
@@ -1,69 +1,69 @@
|
|||||||
.modalWrapper {
|
.modalWrapper {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: rgba(0, 0, 0, 0.5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||||
width: 300px;
|
width: 300px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.closeBtn {
|
.closeBtn {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #333;
|
color: #333;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: #4caf50;
|
background-color: #4caf50;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
background-color: #45a049;
|
background-color: #45a049;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:last-child {
|
button:last-child {
|
||||||
background-color: #36bbf4;
|
background-color: #36bbf4;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:last-child:hover {
|
button:last-child:hover {
|
||||||
background-color: #2f8cd3;
|
background-color: #2f8cd3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1,146 +1,146 @@
|
|||||||
// AddUserGroupModal.js
|
// AddUserGroupModal.js
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import './Modelitem.css';
|
import './Modelitem.css';
|
||||||
|
|
||||||
const AddUserGroupModal = ({ showModal, handleCloseModal, onSave }) => {
|
const AddUserGroupModal = ({ showModal, handleCloseModal, onSave }) => {
|
||||||
const [newUserData, setNewUserData] = useState({
|
const [newUserData, setNewUserData] = useState({
|
||||||
groupName: '',
|
groupName: '',
|
||||||
groupDesc: '',
|
groupDesc: '',
|
||||||
createBy: '',
|
createBy: '',
|
||||||
createDate: '',
|
createDate: '',
|
||||||
updateDate: '',
|
updateDate: '',
|
||||||
updateBy: '',
|
updateBy: '',
|
||||||
status: '',
|
status: '',
|
||||||
groupLevel: '',
|
groupLevel: '',
|
||||||
createDateFormatted: '',
|
createDateFormatted: '',
|
||||||
updateDateFormatted: '',
|
updateDateFormatted: '',
|
||||||
// Add more fields as needed
|
// Add more fields as needed
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
const handleSave = () => {
|
const handleSave = () => {
|
||||||
// Format date fields before saving
|
// Format date fields before saving
|
||||||
const formattedData = {
|
const formattedData = {
|
||||||
...newUserData,
|
...newUserData,
|
||||||
createDate: new Date(newUserData.createDate).toISOString(),
|
createDate: new Date(newUserData.createDate).toISOString(),
|
||||||
updateDate: new Date(newUserData.updateDate).toISOString(),
|
updateDate: new Date(newUserData.updateDate).toISOString(),
|
||||||
};
|
};
|
||||||
|
|
||||||
onSave(formattedData); // Pass the new data to the parent component
|
onSave(formattedData); // Pass the new data to the parent component
|
||||||
handleCloseModal(); // Close the modal after saving
|
handleCloseModal(); // Close the modal after saving
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
setNewUserData({
|
setNewUserData({
|
||||||
groupName: '',
|
groupName: '',
|
||||||
groupDesc: '',
|
groupDesc: '',
|
||||||
createBy: '',
|
createBy: '',
|
||||||
createDate: '',
|
createDate: '',
|
||||||
updateDate: '',
|
updateDate: '',
|
||||||
updateBy: '',
|
updateBy: '',
|
||||||
status: '',
|
status: '',
|
||||||
groupLevel: '',
|
groupLevel: '',
|
||||||
createDateFormatted: '',
|
createDateFormatted: '',
|
||||||
updateDateFormatted: '',
|
updateDateFormatted: '',
|
||||||
// Reset other fields as needed
|
// Reset other fields as needed
|
||||||
});
|
});
|
||||||
handleCloseModal();
|
handleCloseModal();
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{showModal && (
|
{showModal && (
|
||||||
<div className='modalWrapper'>
|
<div className='modalWrapper'>
|
||||||
<div className='modal'>
|
<div className='modal'>
|
||||||
<button className="closeBtn" onClick={handleCancel}>X</button>
|
<button className="closeBtn" onClick={handleCancel}>X</button>
|
||||||
|
|
||||||
<label htmlFor="groupName">Group Name:</label>
|
<label htmlFor="groupName">Group Name:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="groupName"
|
id="groupName"
|
||||||
value={newUserData.groupName}
|
value={newUserData.groupName}
|
||||||
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, groupName: e.target.value }))}
|
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, groupName: e.target.value }))}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<label htmlFor="groupDesc">Group Description:</label>
|
<label htmlFor="groupDesc">Group Description:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="groupDesc"
|
id="groupDesc"
|
||||||
value={newUserData.groupDesc}
|
value={newUserData.groupDesc}
|
||||||
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, groupDesc: e.target.value }))}
|
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, groupDesc: e.target.value }))}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<label htmlFor="createBy">Create By:</label>
|
<label htmlFor="createBy">Create By:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="createBy"
|
id="createBy"
|
||||||
value={newUserData.createBy}
|
value={newUserData.createBy}
|
||||||
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, createBy: e.target.value }))}
|
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, createBy: e.target.value }))}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<label htmlFor="createDate">Create Date:</label>
|
<label htmlFor="createDate">Create Date:</label>
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
id="createDate"
|
id="createDate"
|
||||||
value={newUserData.createDate}
|
value={newUserData.createDate}
|
||||||
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, createDate: e.target.value }))}
|
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, createDate: e.target.value }))}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<label htmlFor="updateDate">Update Date:</label>
|
<label htmlFor="updateDate">Update Date:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="updateDate"
|
id="updateDate"
|
||||||
value={newUserData.updateDate}
|
value={newUserData.updateDate}
|
||||||
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, updateDate: e.target.value }))}
|
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, updateDate: e.target.value }))}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<label htmlFor="updateBy">Update By:</label>
|
<label htmlFor="updateBy">Update By:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="updateBy"
|
id="updateBy"
|
||||||
value={newUserData.updateBy}
|
value={newUserData.updateBy}
|
||||||
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, updateBy: e.target.value }))}
|
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, updateBy: e.target.value }))}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<label htmlFor="status">Status:</label>
|
<label htmlFor="status">Status:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="status"
|
id="status"
|
||||||
value={newUserData.status}
|
value={newUserData.status}
|
||||||
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, status: e.target.value }))}
|
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, status: e.target.value }))}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<label htmlFor="groupLevel">Group Level:</label>
|
<label htmlFor="groupLevel">Group Level:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="groupLevel"
|
id="groupLevel"
|
||||||
value={newUserData.groupLevel}
|
value={newUserData.groupLevel}
|
||||||
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, groupLevel: e.target.value }))}
|
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, groupLevel: e.target.value }))}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<label htmlFor="createDateFormatted">Create Date Formatted:</label>
|
<label htmlFor="createDateFormatted">Create Date Formatted:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="createDateFormatted"
|
id="createDateFormatted"
|
||||||
value={newUserData.createDateFormatted}
|
value={newUserData.createDateFormatted}
|
||||||
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, createDateFormatted: e.target.value }))}
|
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, createDateFormatted: e.target.value }))}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<label htmlFor="updateDateFormatted">Update Date Formatted:</label>
|
<label htmlFor="updateDateFormatted">Update Date Formatted:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="updateDateFormatted"
|
id="updateDateFormatted"
|
||||||
value={newUserData.updateDateFormatted}
|
value={newUserData.updateDateFormatted}
|
||||||
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, updateDateFormatted: e.target.value }))}
|
onChange={(e) => setNewUserData((prevData) => ({ ...prevData, updateDateFormatted: e.target.value }))}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<button onClick={handleSave}>Save</button>
|
<button onClick={handleSave}>Save</button>
|
||||||
<button onClick={handleCancel}>Cancel</button>
|
<button onClick={handleCancel}>Cancel</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AddUserGroupModal;
|
export default AddUserGroupModal;
|
||||||
|
|||||||
@@ -1,7 +1,133 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
|
||||||
.custom-header, .custom-cell {
|
.custom-header, .custom-cell {
|
||||||
font-family: 'PT Serif", serif ';
|
font-family: 'PT Serif", serif ';
|
||||||
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* UserGroupMaintenance.css */
|
||||||
|
|
||||||
|
.user-group-maintenance-container {
|
||||||
|
padding: 2rem;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title {
|
||||||
|
font-family: 'PT Serif', serif;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-grid-container {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-toolbar {
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-button {
|
||||||
|
font-family: 'PT Serif', serif;
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-weight: 600;
|
||||||
|
background-color: #1976d2;
|
||||||
|
color: white;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-button:hover {
|
||||||
|
background-color: #1565c0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-button {
|
||||||
|
background-color: #4caf50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-button:hover {
|
||||||
|
background-color: #388e3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-header {
|
||||||
|
font-family: 'PT Serif', serif;
|
||||||
|
font-weight: 700;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-cell {
|
||||||
|
font-family: 'PT Serif', serif;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.three-dots {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.5rem;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
z-index: 100;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover button {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
text-align: left;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: 'PT Serif', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover button:hover {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal styles */
|
||||||
|
.modal-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background-color: white;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 500px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
font-family: 'PT Serif', serif;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,221 +1,223 @@
|
|||||||
import React, { useState, useEffect, useRef } from "react";
|
import React, { useState, useEffect, useRef } from "react";
|
||||||
import { Box, Button } from "@mui/material";
|
import { Box, Button, Typography } from "@mui/material";
|
||||||
import { DataGrid, GridToolbarContainer } from "@mui/x-data-grid";
|
import { DataGrid, GridToolbarContainer } from "@mui/x-data-grid";
|
||||||
import { BsThreeDotsVertical } from "react-icons/bs";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import "./UserGroupMaintance.css";
|
import { faEllipsisV } from "@fortawesome/free-solid-svg-icons";
|
||||||
// eslint-disable-next-line
|
import "./UserGroupMaintance.css";
|
||||||
const api = process.env.REACT_APP_API_BASE_URL;
|
|
||||||
|
const api = process.env.REACT_APP_API_BASE_URL;
|
||||||
function CustomToolbar({ apiRef, handleModal }) {
|
|
||||||
const handleGoToPage1 = () => {
|
function CustomToolbar({ apiRef, handleModal }) {
|
||||||
if (apiRef.current) {
|
const handleGoToPage1 = () => {
|
||||||
apiRef.current.setPage(1);
|
if (apiRef.current) {
|
||||||
}
|
apiRef.current.setPage(1);
|
||||||
};
|
}
|
||||||
|
};
|
||||||
return (
|
|
||||||
<GridToolbarContainer>
|
return (
|
||||||
<Button onClick={handleGoToPage1}>Go to page 1</Button>
|
<GridToolbarContainer className="grid-toolbar">
|
||||||
<Button onClick={handleModal}>+</Button>
|
<Button
|
||||||
</GridToolbarContainer>
|
variant="contained"
|
||||||
);
|
className="toolbar-button"
|
||||||
}
|
onClick={handleGoToPage1}
|
||||||
|
>
|
||||||
function UserMaintance() {
|
Go to page 1
|
||||||
const [userGroups, setUserGroups] = useState([]);
|
</Button>
|
||||||
const [selectedUserGroup, setSelectedUserGroup] = useState(null);
|
<Button
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
variant="contained"
|
||||||
const apiRef = useRef(null);
|
className="toolbar-button add-button"
|
||||||
// eslint-disable-next-line
|
onClick={handleModal}
|
||||||
useEffect(() => {
|
>
|
||||||
const fetchData = async () => {
|
Add User Group
|
||||||
const token = localStorage.getItem("token");
|
</Button>
|
||||||
try {
|
</GridToolbarContainer>
|
||||||
const response = await fetch(`${api}/api/getAllUsrGrp`, {
|
);
|
||||||
headers: { authorization: `bearer ${token}` },
|
}
|
||||||
});
|
|
||||||
const data = await response.json();
|
function UserMaintance() {
|
||||||
const userGroupsWithIds = data.map((group, index) => ({
|
const [userGroups, setUserGroups] = useState([]);
|
||||||
...group,
|
const [selectedUserGroup, setSelectedUserGroup] = useState(null);
|
||||||
id: index + 1,
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
}));
|
const apiRef = useRef(null);
|
||||||
setUserGroups(userGroupsWithIds);
|
|
||||||
} catch (error) {
|
useEffect(() => {
|
||||||
console.error("Error fetching data:", error);
|
const fetchData = async () => {
|
||||||
}
|
const token = localStorage.getItem("token");
|
||||||
};
|
try {
|
||||||
|
const response = await fetch(`${api}/api/getAllUsrGrp`, {
|
||||||
fetchData();
|
headers: { authorization: `bearer ${token}` },
|
||||||
}, []);
|
});
|
||||||
|
const data = await response.json();
|
||||||
const handleThreeDotsClick = (usrGrp) => {
|
const userGroupsWithIds = data.map((group, index) => ({
|
||||||
setSelectedUserGroup(usrGrp === selectedUserGroup ? null : usrGrp);
|
...group,
|
||||||
};
|
id: index + 1,
|
||||||
|
}));
|
||||||
const handleDelete = async (usrGrp) => {
|
setUserGroups(userGroupsWithIds);
|
||||||
try {
|
} catch (error) {
|
||||||
const response = await fetch(`${api}/api/delete_usrgrp/${usrGrp}`, {
|
console.error("Error fetching data:", error);
|
||||||
method: "DELETE",
|
}
|
||||||
});
|
};
|
||||||
if (response.ok) {
|
|
||||||
setUserGroups(userGroups.filter((group) => group.usrGrp !== usrGrp));
|
fetchData();
|
||||||
console.log("User group deleted successfully:", usrGrp);
|
}, []);
|
||||||
} else {
|
|
||||||
console.error("Failed to delete user group:", response.statusText);
|
const handleThreeDotsClick = (usrGrp) => {
|
||||||
}
|
setSelectedUserGroup(usrGrp === selectedUserGroup ? null : usrGrp);
|
||||||
} catch (error) {
|
};
|
||||||
console.error("Error deleting user group:", error);
|
|
||||||
}
|
const handleDelete = async (usrGrp) => {
|
||||||
};
|
try {
|
||||||
|
const response = await fetch(`${api}/api/delete_usrgrp/${usrGrp}`, {
|
||||||
const handleModal = () => {
|
method: "DELETE",
|
||||||
setIsModalOpen(true);
|
});
|
||||||
};
|
if (response.ok) {
|
||||||
|
setUserGroups(userGroups.filter((group) => group.usrGrp !== usrGrp));
|
||||||
const columns = [
|
console.log("User group deleted successfully:", usrGrp);
|
||||||
{
|
} else {
|
||||||
field: "usrGrp",
|
console.error("Failed to delete user group:", response.statusText);
|
||||||
headerName: "User Group ID",
|
}
|
||||||
width: 150,
|
} catch (error) {
|
||||||
headerClassName: "custom-header",
|
console.error("Error deleting user group:", error);
|
||||||
cellClassName: "custom-cell",
|
}
|
||||||
},
|
};
|
||||||
{
|
|
||||||
field: "groupName",
|
const handleModal = () => {
|
||||||
headerName: "Group Name",
|
setIsModalOpen(true);
|
||||||
width: 150,
|
};
|
||||||
headerClassName: "custom-header",
|
|
||||||
cellClassName: "custom-cell",
|
const columns = [
|
||||||
},
|
{
|
||||||
{
|
field: "usrGrp",
|
||||||
field: "groupDesc",
|
headerName: "User Group ID",
|
||||||
headerName: "Group Description",
|
width: 150,
|
||||||
width: 150,
|
headerClassName: "custom-header",
|
||||||
headerClassName: "custom-header",
|
cellClassName: "custom-cell",
|
||||||
cellClassName: "custom-cell",
|
},
|
||||||
},
|
{
|
||||||
{
|
field: "groupName",
|
||||||
field: "createby",
|
headerName: "Group Name",
|
||||||
headerName: "Create By",
|
width: 150,
|
||||||
width: 100,
|
headerClassName: "custom-header",
|
||||||
headerClassName: "custom-header",
|
cellClassName: "custom-cell",
|
||||||
cellClassName: "custom-cell",
|
},
|
||||||
},
|
{
|
||||||
{
|
field: "groupDesc",
|
||||||
field: "createdate",
|
headerName: "Group Description",
|
||||||
headerName: "Create Date",
|
width: 150,
|
||||||
width: 100,
|
headerClassName: "custom-header",
|
||||||
headerClassName: "custom-header",
|
cellClassName: "custom-cell",
|
||||||
cellClassName: "custom-cell",
|
},
|
||||||
},
|
{
|
||||||
{
|
field: "createby",
|
||||||
field: "updatedate",
|
headerName: "Create By",
|
||||||
headerName: "Update Date",
|
width: 100,
|
||||||
width: 100,
|
headerClassName: "custom-header",
|
||||||
headerClassName: "custom-header",
|
cellClassName: "custom-cell",
|
||||||
cellClassName: "custom-cell",
|
},
|
||||||
},
|
{
|
||||||
{
|
field: "createdate",
|
||||||
field: "updateby",
|
headerName: "Create Date",
|
||||||
headerName: "Update By",
|
width: 100,
|
||||||
width: 100,
|
headerClassName: "custom-header",
|
||||||
headerClassName: "custom-header",
|
cellClassName: "custom-cell",
|
||||||
cellClassName: "custom-cell",
|
},
|
||||||
},
|
{
|
||||||
{
|
field: "updatedate",
|
||||||
field: "status",
|
headerName: "Update Date",
|
||||||
headerName: "Status",
|
width: 100,
|
||||||
width: 100,
|
headerClassName: "custom-header",
|
||||||
headerClassName: "custom-header",
|
cellClassName: "custom-cell",
|
||||||
cellClassName: "custom-cell",
|
},
|
||||||
},
|
{
|
||||||
{
|
field: "updateby",
|
||||||
field: "grouplevel",
|
headerName: "Update By",
|
||||||
headerName: "Group Level",
|
width: 100,
|
||||||
width: 100,
|
headerClassName: "custom-header",
|
||||||
headerClassName: "custom-header",
|
cellClassName: "custom-cell",
|
||||||
cellClassName: "custom-cell",
|
},
|
||||||
},
|
{
|
||||||
{
|
field: "status",
|
||||||
field: "createdateformated",
|
headerName: "Status",
|
||||||
headerName: "Create Date Formated",
|
width: 100,
|
||||||
width: 100,
|
headerClassName: "custom-header",
|
||||||
headerClassName: "custom-header",
|
cellClassName: "custom-cell",
|
||||||
cellClassName: "custom-cell",
|
},
|
||||||
},
|
{
|
||||||
{
|
field: "grouplevel",
|
||||||
field: "updatedateformated",
|
headerName: "Group Level",
|
||||||
headerName: "Update Date Formated",
|
width: 100,
|
||||||
width: 100,
|
headerClassName: "custom-header",
|
||||||
headerClassName: "custom-header",
|
cellClassName: "custom-cell",
|
||||||
cellClassName: "custom-cell",
|
},
|
||||||
},
|
{
|
||||||
|
field: "actions",
|
||||||
// Add other columns as needed
|
headerName: "Actions",
|
||||||
{
|
width: 150,
|
||||||
field: "actions",
|
renderCell: ({ row }) => (
|
||||||
headerName: "Actions",
|
<div style={{ position: 'relative' }}>
|
||||||
width: 150,
|
<div
|
||||||
renderCell: ({ row }) => (
|
className="three-dots"
|
||||||
<div>
|
onClick={() => handleThreeDotsClick(row.usrGrp)}
|
||||||
<div
|
>
|
||||||
className="three-dots"
|
<FontAwesomeIcon icon={faEllipsisV} />
|
||||||
onClick={() => handleThreeDotsClick(row.usrGrp)}
|
</div>
|
||||||
>
|
{selectedUserGroup === row.usrGrp && (
|
||||||
<BsThreeDotsVertical />
|
<div className="popover">
|
||||||
</div>
|
<button onClick={() => handleDelete(row.usrGrp)}>Delete</button>
|
||||||
{selectedUserGroup === row.usrGrp && (
|
</div>
|
||||||
<div className="popover">
|
)}
|
||||||
<button onClick={() => handleDelete(row.usrGrp)}>Delete</button>
|
</div>
|
||||||
{/* You can include other actions here */}
|
),
|
||||||
</div>
|
},
|
||||||
)}
|
];
|
||||||
</div>
|
|
||||||
),
|
return (
|
||||||
},
|
<div className="user-group-maintenance-container">
|
||||||
];
|
<Typography variant="h4" className="main-title" gutterBottom>
|
||||||
|
User Group Maintenance
|
||||||
return (
|
</Typography>
|
||||||
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
|
|
||||||
<div className="text-center text-3xl text-white bg-gray-400 p-2 rounded-lg">
|
<Box className="data-grid-container" sx={{ height: 500, width: '100%' }}>
|
||||||
User Group Maintenance
|
<DataGrid
|
||||||
</div>
|
rows={userGroups}
|
||||||
|
columns={columns}
|
||||||
<Box
|
components={{
|
||||||
className="w-full p-4 md:w-3/4 lg:w-2/3 xl:w-1/2 bg-white border border-gray-200 shadow-lg rounded-lg"
|
Toolbar: () => (
|
||||||
sx={{ height: 500, width: "100%" }}
|
<CustomToolbar
|
||||||
>
|
apiRef={apiRef}
|
||||||
<DataGrid
|
handleModal={handleModal}
|
||||||
rows={userGroups}
|
/>
|
||||||
columns={columns}
|
),
|
||||||
components={{
|
}}
|
||||||
Toolbar: () => (
|
pageSize={10}
|
||||||
<CustomToolbar
|
rowsPerPageOptions={[10]}
|
||||||
apiRef={apiRef}
|
onGridReady={(gridApi) => {
|
||||||
handleThreeDotsClick={handleThreeDotsClick}
|
apiRef.current = gridApi;
|
||||||
handleModal={handleModal}
|
}}
|
||||||
/>
|
/>
|
||||||
),
|
</Box>
|
||||||
}}
|
|
||||||
pageSize={10}
|
{isModalOpen && (
|
||||||
onGridReady={(gridApi) => {
|
<div className="modal-overlay">
|
||||||
apiRef.current = gridApi;
|
<div className="modal-content">
|
||||||
}}
|
<Typography variant="h5" className="modal-title">
|
||||||
className="bg-gray-400"
|
Add New User Group
|
||||||
/>
|
</Typography>
|
||||||
</Box>
|
{/* Modal form content here */}
|
||||||
{/* Your modals and other components */}
|
<div className="modal-actions">
|
||||||
{isModalOpen && (
|
<Button
|
||||||
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 p-4">
|
variant="contained"
|
||||||
<div className="bg-white p-8 rounded-lg shadow-lg max-w-lg w-full">
|
onClick={() => setIsModalOpen(false)}
|
||||||
<h2 className="text-xl font-bold mb-4">Modal Title</h2>
|
className="toolbar-button"
|
||||||
{/* Modal content here */}
|
>
|
||||||
<Button onClick={() => setIsModalOpen(false)}>Close</Button>
|
Close
|
||||||
</div>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
)}
|
||||||
}
|
</div>
|
||||||
|
);
|
||||||
export default UserMaintance;
|
}
|
||||||
|
|
||||||
|
export default UserMaintance;
|
||||||
@@ -1,132 +1,132 @@
|
|||||||
/* .container {
|
/* .container {
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
max-width: 2000px;
|
max-width: 2000px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 2000px;
|
max-width: 2000px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
table th,
|
table th,
|
||||||
table td {
|
table td {
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
table th {
|
table th {
|
||||||
background-color: #f2f2f2;
|
background-color: #f2f2f2;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type='text'] {
|
input[type='text'] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
background-color: #007bff;
|
background-color: #007bff;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
background-color: #0056b3;
|
background-color: #0056b3;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-content input {
|
.modal-content input {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-content button {
|
.modal-content button {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.update-modal {
|
.update-modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.update-modal-content {
|
.update-modal-content {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.update-modal-content input {
|
.update-modal-content input {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.update-modal-content button {
|
.update-modal-content button {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
.spinner {
|
.spinner {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border: 4px solid rgba(0, 0, 0, 0.1);
|
border: 4px solid rgba(0, 0, 0, 0.1);
|
||||||
border-left-color: #7983ff;
|
border-left-color: #7983ff;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: spin 1s linear infinite;
|
animation: spin 1s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
to {
|
to {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
} */
|
} */
|
||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
|
||||||
.custom-header, .custom-cell {
|
.custom-header, .custom-cell {
|
||||||
font-family: 'PT Serif", serif ';
|
font-family: 'PT Serif", serif ';
|
||||||
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,168 +1,499 @@
|
|||||||
import React, { useState, useEffect, useRef } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { Box, Button } from "@mui/material";
|
import {
|
||||||
import { DataGrid, GridToolbarContainer } from "@mui/x-data-grid";
|
Box,
|
||||||
import { BsThreeDotsVertical } from "react-icons/bs";
|
Button,
|
||||||
import Modal from "./Modal"; // Import your Modal component
|
TextField,
|
||||||
import UpdateModal from "./UpdateModal"; // Import your UpdateModal component
|
Table,
|
||||||
import "./UserMaintance.css";
|
TableBody,
|
||||||
|
TableCell,
|
||||||
const api = process.env.REACT_APP_API_BASE_URL;
|
TableContainer,
|
||||||
|
TableHead,
|
||||||
function CustomToolbar({ apiRef, handleThreeDotsClick, handleModal }) {
|
TableRow,
|
||||||
const handleGoToPage1 = () => {
|
Paper,
|
||||||
if (apiRef.current) {
|
IconButton,
|
||||||
apiRef.current.setPage(1);
|
Menu,
|
||||||
}
|
MenuItem,
|
||||||
};
|
Checkbox,
|
||||||
|
FormControlLabel,
|
||||||
return (
|
Pagination,
|
||||||
<GridToolbarContainer>
|
Modal,
|
||||||
<Button onClick={handleGoToPage1}>Go to page 1</Button>
|
Dialog,
|
||||||
<Button onClick={handleModal}>+</Button>
|
DialogTitle,
|
||||||
</GridToolbarContainer>
|
DialogContent,
|
||||||
);
|
DialogActions,
|
||||||
}
|
FormGroup,
|
||||||
|
Switch,
|
||||||
function UserMaintance() {
|
Tooltip,
|
||||||
const [users, setUsers] = useState([]);
|
Typography,
|
||||||
const [selectedUser, setSelectedUser] = useState(null);
|
InputAdornment,
|
||||||
const [selectedUserForUpdate, setSelectedUserForUpdate] = useState(null);
|
Select,
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
FormControl,
|
||||||
const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false);
|
InputLabel,
|
||||||
const [newUser, setNewUser] = useState({
|
CircularProgress,
|
||||||
userId: "",
|
} from "@mui/material";
|
||||||
username: "",
|
import {
|
||||||
fullName: "",
|
Add,
|
||||||
email: "",
|
Search,
|
||||||
|
Settings,
|
||||||
usrGrpName: "",
|
Edit,
|
||||||
});
|
Delete,
|
||||||
const apiRef = useRef(null);
|
Download,
|
||||||
|
Upload,
|
||||||
useEffect(() => {
|
Close,
|
||||||
const fetchData = async () => {
|
Visibility,
|
||||||
const token = localStorage.getItem("token");
|
VisibilityOff,
|
||||||
console.log("object", token);
|
Check,
|
||||||
try {
|
} from "@mui/icons-material";
|
||||||
const response = await fetch(`${api}/api/getAllAppUser`, {
|
import { toast } from "react-toastify";
|
||||||
headers: {
|
import * as XLSX from "xlsx";
|
||||||
Authorization: `Bearer ${token}`,
|
import { getAllUsers, createUser, updateUser, deleteUser } from "../../ApiServices/Usermaintenanceapi";
|
||||||
},
|
|
||||||
});
|
function UserMaintenanceView() {
|
||||||
const data = await response.json();
|
// State management
|
||||||
const usersWithIds = data.map((user, index) => ({
|
const [users, setUsers] = useState([]);
|
||||||
...user,
|
const [loading, setLoading] = useState(true);
|
||||||
id: index + 1,
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
}));
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
setUsers(usersWithIds);
|
const [recordsPerPage, setRecordsPerPage] = useState(10);
|
||||||
} catch (error) {
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
console.error("Error fetching data:", error);
|
const [isImportModalOpen, setIsImportModalOpen] = useState(false);
|
||||||
}
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
};
|
const [anchorEl, setAnchorEl] = useState(null);
|
||||||
|
const [columnMenuAnchor, setColumnMenuAnchor] = useState(null);
|
||||||
fetchData();
|
|
||||||
}, []);
|
// User data state
|
||||||
|
const [userData, setUserData] = useState({
|
||||||
const handleThreeDotsClick = (userId) => {
|
userId: "",
|
||||||
setSelectedUser(userId === selectedUser ? null : userId);
|
username: "",
|
||||||
};
|
fullName: "",
|
||||||
|
email: "",
|
||||||
const handleDelete = (userId) => {
|
mob_no: "",
|
||||||
console.log("Delete user with ID:", userId);
|
active: true,
|
||||||
};
|
usrGrpId: "",
|
||||||
|
});
|
||||||
const handleUpdate = (user) => {
|
|
||||||
setSelectedUserForUpdate(user);
|
// Column visibility configuration
|
||||||
setIsUpdateModalOpen(true);
|
const [visibleColumns, setVisibleColumns] = useState({
|
||||||
};
|
userId: true,
|
||||||
|
username: true,
|
||||||
const handleModal = () => {
|
fullName: true,
|
||||||
setIsModalOpen(true);
|
email: true,
|
||||||
};
|
mob_no: true,
|
||||||
|
active: true,
|
||||||
const handleModalSave = (data) => {
|
usrGrpId: true,
|
||||||
setUsers((prevUsers) => [
|
actions: true,
|
||||||
...prevUsers,
|
});
|
||||||
{ ...data, id: prevUsers.length + 1 },
|
|
||||||
]);
|
// Fetch users on component mount
|
||||||
setIsModalOpen(false);
|
useEffect(() => {
|
||||||
};
|
const fetchUsers = async () => {
|
||||||
|
try {
|
||||||
const handleUpdateSave = () => {
|
setLoading(true);
|
||||||
setIsUpdateModalOpen(false);
|
const response = await getAllUsers();
|
||||||
};
|
setUsers(response.data || []);
|
||||||
|
} catch (error) {
|
||||||
const columns = [
|
console.error("Error fetching users:", error);
|
||||||
{ field: "userId", headerName: "User ID", width: 200 },
|
toast.error("Failed to fetch users");
|
||||||
{ field: "username", headerName: "Username", width: 200 },
|
} finally {
|
||||||
{ field: "fullName", headerName: "Full Name", width: 200 },
|
setLoading(false);
|
||||||
{ field: "email", headerName: "Email", width: 200 },
|
}
|
||||||
{ field: "usrGrpName", headerName: "User Group", width: 150 },
|
};
|
||||||
{
|
|
||||||
field: "actions",
|
fetchUsers();
|
||||||
headerName: "Actions",
|
}, []);
|
||||||
width: 100,
|
|
||||||
renderCell: ({ row }) => (
|
// Filter users based on search query
|
||||||
<div>
|
const filteredUsers = users.filter((user) =>
|
||||||
<div
|
user.username.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
className="three-dots"
|
);
|
||||||
onClick={() => handleThreeDotsClick(row.userId)}
|
|
||||||
>
|
// Pagination logic
|
||||||
<BsThreeDotsVertical />
|
const totalPages = Math.ceil(filteredUsers.length / recordsPerPage);
|
||||||
</div>
|
const paginatedUsers = filteredUsers.slice(
|
||||||
{selectedUser === row.userId && (
|
(currentPage - 1) * recordsPerPage,
|
||||||
<div className="popover">
|
currentPage * recordsPerPage
|
||||||
<button onClick={() => handleDelete(row.userId)}>Delete</button>
|
);
|
||||||
<button onClick={() => handleUpdate(row)}>Update</button>
|
|
||||||
</div>
|
// Column toggle handler
|
||||||
)}
|
const toggleColumn = (column) => {
|
||||||
</div>
|
setVisibleColumns((prev) => ({
|
||||||
),
|
...prev,
|
||||||
},
|
[column]: !prev[column],
|
||||||
];
|
}));
|
||||||
|
};
|
||||||
return (
|
|
||||||
<Box
|
// Modal handlers
|
||||||
sx={{ height: "calc(100vh - 150px)", width: "100%", overflowX: "auto" }}
|
const handleOpenModal = (user = null) => {
|
||||||
>
|
if (user) {
|
||||||
<div className="text-center text-3xl text-white bg-gray-400">
|
setUserData(user);
|
||||||
User Maintenance
|
setIsEditing(true);
|
||||||
</div>
|
} else {
|
||||||
<DataGrid
|
setUserData({
|
||||||
className="bg-gray-400"
|
userId: "",
|
||||||
rows={users}
|
username: "",
|
||||||
columns={columns}
|
fullName: "",
|
||||||
components={{
|
email: "",
|
||||||
Toolbar: () => (
|
mob_no: "",
|
||||||
<CustomToolbar
|
active: true,
|
||||||
apiRef={apiRef}
|
usrGrpId: "",
|
||||||
handleThreeDotsClick={handleThreeDotsClick}
|
});
|
||||||
handleModal={handleModal}
|
setIsEditing(false);
|
||||||
/>
|
}
|
||||||
),
|
setIsModalOpen(true);
|
||||||
}}
|
};
|
||||||
pageSize={10}
|
|
||||||
onGridReady={(gridApi) => {
|
const handleCloseModal = () => {
|
||||||
apiRef.current = gridApi;
|
setIsModalOpen(false);
|
||||||
}}
|
};
|
||||||
/>
|
|
||||||
{isModalOpen && (
|
// Form input handler
|
||||||
<Modal
|
const handleInputChange = (e) => {
|
||||||
setNewUser={setNewUser}
|
const { name, value, type, checked } = e.target;
|
||||||
newUser={newUser}
|
setUserData((prev) => ({
|
||||||
onSave={handleModalSave}
|
...prev,
|
||||||
onClose={() => setIsModalOpen(false)}
|
[name]: type === "checkbox" ? checked : value,
|
||||||
/>
|
}));
|
||||||
)}
|
};
|
||||||
{isUpdateModalOpen && (
|
|
||||||
<UpdateModal
|
// Form submission handler
|
||||||
user={selectedUserForUpdate}
|
const handleSubmit = async (e) => {
|
||||||
onUpdate={handleUpdateSave}
|
e.preventDefault();
|
||||||
onClose={() => setIsUpdateModalOpen(false)}
|
try {
|
||||||
/>
|
if (isEditing) {
|
||||||
)}
|
await updateUser(userData);
|
||||||
</Box>
|
toast.success("User updated successfully");
|
||||||
);
|
} else {
|
||||||
}
|
await createUser(userData);
|
||||||
|
toast.success("User added successfully");
|
||||||
export default UserMaintance;
|
}
|
||||||
|
// Refresh user list
|
||||||
|
const response = await getAllUsers();
|
||||||
|
setUsers(response.data || []);
|
||||||
|
handleCloseModal();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error saving user:", error);
|
||||||
|
toast.error("There was an error while submitting the USER.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Delete user handler
|
||||||
|
const handleDelete = async (userId) => {
|
||||||
|
try {
|
||||||
|
await deleteUser(userId);
|
||||||
|
setUsers(users.filter((user) => user.userId !== userId));
|
||||||
|
toast.success("User deleted successfully");
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error deleting user:", error);
|
||||||
|
toast.error("Failed to delete user");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Excel export handler
|
||||||
|
const exportToExcel = () => {
|
||||||
|
const worksheet = XLSX.utils.json_to_sheet(users);
|
||||||
|
const workbook = XLSX.utils.book_new();
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, "UserDetails");
|
||||||
|
XLSX.writeFile(workbook, "UserMaintenance.xlsx");
|
||||||
|
};
|
||||||
|
|
||||||
|
// Excel import handlers
|
||||||
|
const handleFileChange = (e) => {
|
||||||
|
// Implement your file import logic here
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleImport = () => {
|
||||||
|
// Implement your import logic here
|
||||||
|
toast.success("File imported successfully");
|
||||||
|
setIsImportModalOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<Box display="flex" justifyContent="center" alignItems="center" minHeight="80vh">
|
||||||
|
<CircularProgress />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ p: 3, marginTop: "7rem" }}>
|
||||||
|
{/* Header and Search */}
|
||||||
|
<Box sx={{ display: "flex", justifyContent: "space-between", mb: 3 }}>
|
||||||
|
<Typography variant="h4">User Maintenance</Typography>
|
||||||
|
|
||||||
|
<Box sx={{ display: "flex", gap: 2 }}>
|
||||||
|
<TextField
|
||||||
|
size="small"
|
||||||
|
placeholder="Search"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
InputProps={{
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<Search />
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Tooltip title="Download template">
|
||||||
|
<IconButton onClick={exportToExcel}>
|
||||||
|
<Download />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<Tooltip title="Import users">
|
||||||
|
<IconButton onClick={() => setIsImportModalOpen(true)}>
|
||||||
|
<Upload />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
startIcon={<Add />}
|
||||||
|
onClick={() => handleOpenModal()}
|
||||||
|
>
|
||||||
|
Add User
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Table */}
|
||||||
|
<TableContainer component={Paper}>
|
||||||
|
<Table>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
{Object.entries(visibleColumns).map(
|
||||||
|
([key, visible]) =>
|
||||||
|
visible && (
|
||||||
|
<TableCell key={key}>
|
||||||
|
{key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " ")}
|
||||||
|
</TableCell>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{paginatedUsers.length === 0 ? (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={Object.keys(visibleColumns).length} align="center">
|
||||||
|
No users found
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
) : (
|
||||||
|
paginatedUsers.map((user) => (
|
||||||
|
<TableRow key={user.userId}>
|
||||||
|
{Object.entries(visibleColumns).map(([key, visible]) => {
|
||||||
|
if (!visible) return null;
|
||||||
|
|
||||||
|
if (key === "actions") {
|
||||||
|
return (
|
||||||
|
<TableCell key={key}>
|
||||||
|
<Tooltip title="Edit">
|
||||||
|
<IconButton onClick={() => handleOpenModal(user)}>
|
||||||
|
<Edit color="primary" />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title="Delete">
|
||||||
|
<IconButton onClick={() => handleDelete(user.userId)}>
|
||||||
|
<Delete color="error" />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</TableCell>
|
||||||
|
);
|
||||||
|
} else if (key === "active") {
|
||||||
|
return (
|
||||||
|
<TableCell key={key}>
|
||||||
|
<Switch
|
||||||
|
checked={user.active}
|
||||||
|
readOnly
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return <TableCell key={key}>{user[key]}</TableCell>;
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
|
||||||
|
{/* Pagination and Column Controls */}
|
||||||
|
<Box sx={{ display: "flex", justifyContent: "space-between", mt: 2 }}>
|
||||||
|
<Box>
|
||||||
|
<Button
|
||||||
|
onClick={(e) => setColumnMenuAnchor(e.currentTarget)}
|
||||||
|
startIcon={<Settings />}
|
||||||
|
>
|
||||||
|
Manage Columns
|
||||||
|
</Button>
|
||||||
|
<Menu
|
||||||
|
anchorEl={columnMenuAnchor}
|
||||||
|
open={Boolean(columnMenuAnchor)}
|
||||||
|
onClose={() => setColumnMenuAnchor(null)}
|
||||||
|
>
|
||||||
|
{Object.keys(visibleColumns).map((column) => (
|
||||||
|
<MenuItem key={column}>
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Checkbox
|
||||||
|
checked={visibleColumns[column]}
|
||||||
|
onChange={() => toggleColumn(column)}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label={column.charAt(0).toUpperCase() + column.slice(1).replace(/_/g, " ")}
|
||||||
|
/>
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Menu>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
|
||||||
|
<FormControl size="small" sx={{ minWidth: 120 }}>
|
||||||
|
<InputLabel>Rows per page</InputLabel>
|
||||||
|
<Select
|
||||||
|
value={recordsPerPage}
|
||||||
|
label="Rows per page"
|
||||||
|
onChange={(e) => {
|
||||||
|
setRecordsPerPage(e.target.value);
|
||||||
|
setCurrentPage(1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{[5, 10, 25, 50].map((option) => (
|
||||||
|
<MenuItem key={option} value={option}>
|
||||||
|
{option}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<Pagination
|
||||||
|
count={totalPages}
|
||||||
|
page={currentPage}
|
||||||
|
onChange={(e, page) => setCurrentPage(page)}
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Add/Edit User Modal */}
|
||||||
|
<Dialog open={isModalOpen} onClose={handleCloseModal} fullWidth maxWidth="sm">
|
||||||
|
<DialogTitle>
|
||||||
|
{isEditing ? "Edit User" : "Add New User"}
|
||||||
|
<IconButton
|
||||||
|
onClick={handleCloseModal}
|
||||||
|
sx={{
|
||||||
|
position: "absolute",
|
||||||
|
right: 8,
|
||||||
|
top: 8,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Close />
|
||||||
|
</IconButton>
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="Username"
|
||||||
|
name="username"
|
||||||
|
value={userData.username}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="Full Name"
|
||||||
|
name="fullName"
|
||||||
|
value={userData.fullName}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="Email"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
value={userData.email}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="Mobile Number"
|
||||||
|
name="mob_no"
|
||||||
|
value={userData.mob_no}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="User Group"
|
||||||
|
name="usrGrpId"
|
||||||
|
value={userData.usrGrpId}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
|
<FormGroup>
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Switch
|
||||||
|
name="active"
|
||||||
|
checked={userData.active}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="Active"
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={handleCloseModal}>Cancel</Button>
|
||||||
|
<Button onClick={handleSubmit} variant="contained">
|
||||||
|
{isEditing ? "Save Changes" : "Add User"}
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Import Modal */}
|
||||||
|
<Dialog open={isImportModalOpen} onClose={() => setIsImportModalOpen(false)}>
|
||||||
|
<DialogTitle>
|
||||||
|
Import Users
|
||||||
|
<IconButton
|
||||||
|
onClick={() => setIsImportModalOpen(false)}
|
||||||
|
sx={{
|
||||||
|
position: "absolute",
|
||||||
|
right: 8,
|
||||||
|
top: 8,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Close />
|
||||||
|
</IconButton>
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
accept=".xlsx, .xls, .csv"
|
||||||
|
onChange={handleFileChange}
|
||||||
|
/>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={() => setIsImportModalOpen(false)}>Cancel</Button>
|
||||||
|
<Button onClick={handleImport} variant="contained">
|
||||||
|
Import
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default UserMaintenanceView;
|
||||||
@@ -1,126 +1,123 @@
|
|||||||
/* Global Styles */
|
/* Global Styles */
|
||||||
body {
|
body {
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
background-color: #f4f6f8;
|
background-color: #f4f6f8;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard {
|
.dashboard {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Horizontal Navbar */
|
/* Horizontal Navbar */
|
||||||
.horizontal-navbar {
|
.horizontal-navbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: #2c3e50;
|
background-color: #2c3e50;
|
||||||
color: #ecf0f1;
|
color: #ecf0f1;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.horizontal-navbar h3 {
|
.horizontal-navbar h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
color: #ecf0f1;
|
color: #ecf0f1;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
transition: color 0.3s;
|
transition: color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link:hover {
|
.nav-link:hover {
|
||||||
color: #3498db;
|
color: #3498db;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: #e74c3c;
|
background-color: #e74c3c;
|
||||||
color: #ecf0f1;
|
color: #ecf0f1;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
background-color: #c0392b;
|
background-color: #c0392b;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Content */
|
/* Content */
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-content-wrapper {
|
.sidebar-content-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sidebar */
|
/* Sidebar */
|
||||||
.sidebar {
|
.sidebar {
|
||||||
width: 250px;
|
width: 250px;
|
||||||
background-color: #34495e;
|
background-color: #34495e;
|
||||||
color: #ecf0f1;
|
color: #ecf0f1;
|
||||||
transition: width 0.3s;
|
transition: width 0.3s;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar.collapsed {
|
.sidebar.collapsed {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-content-wrapper .sidebar ul {
|
.sidebar-content-wrapper .sidebar ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-content-wrapper .sidebar ul li {
|
.sidebar-content-wrapper .sidebar ul li {
|
||||||
padding: 15px 20px;
|
padding: 15px 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-content-wrapper .sidebar ul li:hover {
|
.sidebar-content-wrapper .sidebar ul li:hover {
|
||||||
background-color: #2c3e50;
|
background-color: #2c3e50;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-content-wrapper .sidebar ul li.active {
|
.sidebar-content-wrapper .sidebar ul li.active {
|
||||||
background-color: #3498db;
|
background-color: #3498db;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-content-wrapper .sidebar .toggle-btn {
|
.sidebar-content-wrapper .sidebar .toggle-btn {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Main Content */
|
/* Main Content */
|
||||||
.main-content {
|
.main-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background-color: #ecf0f1;
|
background-color: #ecf0f1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content h3 {
|
.main-content h3 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,202 +1,606 @@
|
|||||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
import React, { useState, useEffect } from "react";
|
||||||
import React, { useState, useEffect } from "react";
|
import { useNavigate, Link, Routes, Route, Outlet } from "react-router-dom";
|
||||||
import Sidebar from "./sidebar";
|
import {
|
||||||
import { useNavigate } from "react-router-dom";
|
Box,
|
||||||
import UserMaintanceComponent from "./UserMaintance";
|
Divider,
|
||||||
import UserGroupMaintanceComponent from "./UserGroupMaintance/UserGroupMaintance";
|
Drawer,
|
||||||
import MenuMaintanceComponent from "./MenuMaintance/MenuMaintance";
|
IconButton,
|
||||||
import MenuAccessControlComponent from "./MenuAccessControl/MenuAccessControl";
|
List,
|
||||||
import SystemParametersComponent from "./SystemParameters/SystemParameters";
|
ListItem,
|
||||||
// import AccessTypeComponent from "./AccessType/AccessType";
|
ListItemButton,
|
||||||
import ApiRegistery from "./ApiRegistery/ApiRegistery";
|
ListItemIcon,
|
||||||
import TokenRegistery from "./TokenRegistery/TokenRegistery";
|
ListItemText,
|
||||||
import HomePage from "./HomePage";
|
Collapse,
|
||||||
import Setup from "./Setup.js";
|
useTheme,
|
||||||
import Report from "./Report";
|
styled,
|
||||||
import { FaCog, FaUsers, FaSignOutAlt, FaHome, FaChartBar } from "react-icons/fa";
|
Menu,
|
||||||
|
MenuItem,
|
||||||
const Dashboard = () => {
|
Avatar,
|
||||||
const navigate = useNavigate();
|
Typography,
|
||||||
const [menus, setMenus] = useState([]);
|
Tooltip
|
||||||
const [selectedUserMaintance, setSelectedUserMaintance] = useState(null);
|
} from '@mui/material';
|
||||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
import {
|
||||||
const [content, setContent] = useState("");
|
ChevronLeft,
|
||||||
|
ChevronRight,
|
||||||
useEffect(() => {
|
ExpandMore,
|
||||||
const fetchMenusData = async () => {
|
ExpandLess,
|
||||||
const token = localStorage.getItem("authtoken");
|
Description as DescriptionIcon,
|
||||||
|
Error as ErrorIcon,
|
||||||
const apiUrl = `${process.env.REACT_APP_API_BASE_URL}/fndMenu/menuloadbyuser`;
|
Storage as StorageIcon,
|
||||||
console.log("Fetching menus from API:", apiUrl);
|
SwapHoriz as SwapHorizIcon,
|
||||||
|
Home as HomeIcon,
|
||||||
try {
|
Settings as SettingsIcon,
|
||||||
const response = await fetch(apiUrl, {
|
GridView as GridViewIcon,
|
||||||
method: "GET",
|
BarChart as BarChartIcon,
|
||||||
headers: {
|
Apps as AppsIcon,
|
||||||
"Content-Type": "application/json",
|
Person as PersonIcon,
|
||||||
Authorization: `Bearer ${token}`,
|
Language as LanguageIcon,
|
||||||
},
|
LockReset as LockResetIcon,
|
||||||
});
|
Logout as LogoutIcon,
|
||||||
|
Info as InfoIcon,
|
||||||
if (response.ok) {
|
Menu as MenuIcon
|
||||||
const menuData = await response.json();
|
} from '@mui/icons-material';
|
||||||
setMenus(menuData);
|
import UserMaintanceComponent from "./UserMaintance";
|
||||||
} else {
|
import UserGroupMaintanceComponent from "./UserGroupMaintance/UserGroupMaintance";
|
||||||
const errorText = await response.text();
|
import MenuMaintanceComponent from "./MenuMaintance/MenuMaintance";
|
||||||
console.error(
|
import MenuAccessControlComponent from "./MenuAccessControl/MenuAccessControl";
|
||||||
"Failed to fetch menus. Status:",
|
import SystemParametersComponent from "./SystemParameters/SystemParameters";
|
||||||
response.status,
|
import AccessTypeComponent from "./AccessType/AccessType";
|
||||||
"Response:",
|
import ApiRegistery from "./ApiRegistery/ApiRegistery";
|
||||||
errorText
|
import TokenRegistery from "./TokenRegistery/TokenRegistery";
|
||||||
);
|
import HomePage from "./HomePage";
|
||||||
}
|
import Setup from "./Setup";
|
||||||
} catch (error) {
|
import Report from "./reports/Report";
|
||||||
console.error("Error during menu fetch:", error);
|
import SequenceGenerator from "./document sequence/sequencegenerator";
|
||||||
}
|
import About from "./dropdown/about";
|
||||||
};
|
import Profile from "./dropdown/profile";
|
||||||
|
import DashboardRunnerAll from "./../dashboardnew/dashboardrunner/dashboardrunnerall";
|
||||||
fetchMenusData();
|
import DashboardNewAll from "../dashboardnew/dashboardbuildernewall";
|
||||||
}, [navigate]);
|
import DashboardNewAdd from "../dashboardnew/dashboardadd/dashboardbuilderadd";
|
||||||
|
import DashboardNewEdit from "../dashboardnew/editdashboard/editformdashboard";
|
||||||
const handleMenuItemClick = (menuItem) => {
|
import EditNewDash from "../dashboardnew/editdashboard/editdashboard";
|
||||||
setSelectedUserMaintance(menuItem);
|
import DashboardRunner from "../dashboardnew/dashboardrunner/dashboardrunner";
|
||||||
setContent(menuItem.menuItemDesc); // Update content based on clicked menu item
|
import SubMenuMaintenance from "./sub menu/submenumaintanence";
|
||||||
};
|
|
||||||
|
|
||||||
const handleHomeClick = () => {
|
const Dashboard = () => {
|
||||||
setSelectedUserMaintance(null);
|
const navigate = useNavigate();
|
||||||
setContent("Home");
|
const theme = useTheme();
|
||||||
};
|
const [menus, setMenus] = useState([]);
|
||||||
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
|
||||||
const handleSetupClick = () => {
|
const [openTransaction, setOpenTransaction] = useState(false);
|
||||||
setSelectedUserMaintance(null);
|
const [anchorEl, setAnchorEl] = useState(null);
|
||||||
setContent("Setup");
|
const [submenuAnchorEl, setSubmenuAnchorEl] = useState(null);
|
||||||
};
|
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
||||||
|
const [currentUser, setCurrentUser] = useState(null);
|
||||||
const handleReportClick = () => {
|
|
||||||
setSelectedUserMaintance(null);
|
const drawerWidth = 220;
|
||||||
setContent("Report");
|
const collapsedWidth = 60;
|
||||||
};
|
|
||||||
|
useEffect(() => {
|
||||||
const handleSidebarToggle = () => {
|
const user = JSON.parse(localStorage.getItem("user"));
|
||||||
setSidebarCollapsed(!sidebarCollapsed);
|
setCurrentUser(user);
|
||||||
};
|
|
||||||
|
const fetchMenusData = async () => {
|
||||||
const handleLogout = () => {
|
const token = localStorage.getItem("token");
|
||||||
localStorage.removeItem("authToken");
|
|
||||||
localStorage.removeItem("user");
|
const apiUrl = `${process.env.REACT_APP_API_BASE_URL}/fndMenu/menuloadbyuser`;
|
||||||
navigate("/");
|
console.log("Fetching menus from API:", apiUrl);
|
||||||
};
|
|
||||||
|
try {
|
||||||
return (
|
const response = await fetch(apiUrl, {
|
||||||
<div className="flex flex-col h-screen bg-gradient-to-br from-purple-50 via-white to-blue-50">
|
headers: {
|
||||||
{/* Top Navigation Bar */}
|
Authorization: `Bearer ${token}`,
|
||||||
<div className="flex justify-between items-center bg-gradient-to-r from-purple-600 to-indigo-600 text-white p-4 shadow-lg">
|
},
|
||||||
<div className="flex items-center space-x-4">
|
});
|
||||||
<h3 className="text-2xl font-bold">Dashboard</h3>
|
|
||||||
<div className="h-6 w-px bg-white/30"></div>
|
if (response.ok) {
|
||||||
<nav className="flex space-x-6">
|
const menuData = await response.json();
|
||||||
<button
|
setMenus(menuData);
|
||||||
onClick={handleHomeClick}
|
} else {
|
||||||
className="flex items-center space-x-2 hover:text-purple-200 transition-colors"
|
const errorText = await response.text();
|
||||||
>
|
console.error(
|
||||||
<FaHome className="w-5 h-5" />
|
"Failed to fetch menus. Status:",
|
||||||
<span>Home</span>
|
response.status,
|
||||||
</button>
|
"Response:",
|
||||||
<button
|
errorText
|
||||||
onClick={handleSetupClick}
|
);
|
||||||
className="flex items-center space-x-2 hover:text-purple-200 transition-colors"
|
}
|
||||||
>
|
} catch (error) {
|
||||||
<FaCog className="w-5 h-5" />
|
console.error("Error during menu fetch:", error);
|
||||||
<span>Setup</span>
|
}
|
||||||
</button>
|
};
|
||||||
<button
|
|
||||||
onClick={handleReportClick}
|
fetchMenusData();
|
||||||
className="flex items-center space-x-2 hover:text-purple-200 transition-colors"
|
}, [navigate]);
|
||||||
>
|
|
||||||
<FaChartBar className="w-5 h-5" />
|
const handleHomeClick = () => {
|
||||||
<span>Reports</span>
|
navigate('/dashboard');
|
||||||
</button>
|
};
|
||||||
</nav>
|
|
||||||
</div>
|
const handleSetupClick = () => {
|
||||||
<button
|
navigate('/dashboard/setup');
|
||||||
className="flex items-center space-x-2 bg-white/10 hover:bg-white/20 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-200"
|
};
|
||||||
onClick={handleLogout}
|
|
||||||
>
|
const handleReportClick = () => {
|
||||||
<FaSignOutAlt className="w-5 h-5" />
|
navigate('/dashboard/reports');
|
||||||
<span>Logout</span>
|
};
|
||||||
</button>
|
|
||||||
</div>
|
const handleMenuItemClick = (menu) => {
|
||||||
|
const routeMap = {
|
||||||
<div className="flex flex-1 overflow-hidden">
|
"User Maintance": "/dashboard/setup/user-maintenance",
|
||||||
{/* Sidebar */}
|
"User Group Maintance": "/dashboard/setup/user-group-maintenance",
|
||||||
<div
|
"Menu Maintance": "/dashboard/setup/menu-maintenance",
|
||||||
className={`bg-gradient-to-b from-purple-700 to-indigo-800 text-white transition-all duration-300 ${
|
"Menu Access Control": "/dashboard/setup/menu-access-control",
|
||||||
sidebarCollapsed ? "w-16" : "w-64"
|
"System Parameters": "/dashboard/setup/system-parameters",
|
||||||
} min-w-16 shadow-xl`}
|
"Access Type": "/dashboard/setup/access-type",
|
||||||
>
|
"Api Registery": "/dashboard/setup/api-registry",
|
||||||
<div className="flex justify-end p-2">
|
"Token Registery": "/dashboard/setup/token-registry",
|
||||||
<button
|
"sequence generator": "/dashboard/setup/document-sequence",
|
||||||
onClick={handleSidebarToggle}
|
};
|
||||||
className="text-white/80 hover:text-white bg-white/10 hover:bg-white/20 p-2 rounded-lg transition-all duration-200"
|
|
||||||
>
|
if (routeMap[menu.menuItemDesc]) {
|
||||||
{sidebarCollapsed ? ">>" : "<<"}
|
navigate(routeMap[menu.menuItemDesc]);
|
||||||
</button>
|
}
|
||||||
</div>
|
};
|
||||||
<Sidebar
|
|
||||||
menus={menus}
|
const handleSidebarToggle = () => {
|
||||||
handleMenuItemClick={handleMenuItemClick}
|
setSidebarCollapsed(!sidebarCollapsed);
|
||||||
collapsed={sidebarCollapsed}
|
};
|
||||||
setCollapsed={setSidebarCollapsed}
|
|
||||||
/>
|
const handleTransactionToggle = () => {
|
||||||
</div>
|
setOpenTransaction(!openTransaction);
|
||||||
|
};
|
||||||
{/* Main Content Area */}
|
|
||||||
<div className="flex-1 p-6 overflow-auto bg-gradient-to-br from-purple-50 via-white to-blue-50">
|
const handleMenuOpen = (event) => {
|
||||||
<div className="max-w-7xl mx-auto">
|
setAnchorEl(event.currentTarget);
|
||||||
{content === "Setup" ? (
|
};
|
||||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
|
||||||
<Setup />
|
const handleMenuClose = () => {
|
||||||
</div>
|
setAnchorEl(null);
|
||||||
) : content === "Home" ? (
|
};
|
||||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
|
||||||
<HomePage />
|
const handleSubmenuOpen = (event) => {
|
||||||
</div>
|
setSubmenuAnchorEl(event.currentTarget);
|
||||||
) : content === "Report" ? (
|
};
|
||||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
|
||||||
<Report />
|
const handleSubmenuClose = () => {
|
||||||
</div>
|
setSubmenuAnchorEl(null);
|
||||||
) : selectedUserMaintance ? (
|
};
|
||||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
|
||||||
<h3 className="text-2xl font-bold text-gray-800 mb-6 pb-2 border-b border-purple-100">
|
const handleLogout = () => {
|
||||||
{selectedUserMaintance.menuItemDesc}
|
localStorage.removeItem("authToken");
|
||||||
</h3>
|
localStorage.removeItem("user");
|
||||||
{selectedUserMaintance.menuItemDesc === "User Maintance" ? (
|
navigate("/");
|
||||||
<UserMaintanceComponent />
|
handleMenuClose();
|
||||||
) : selectedUserMaintance.menuItemDesc === "User Group Maintance" ? (
|
};
|
||||||
<UserGroupMaintanceComponent />
|
|
||||||
) : selectedUserMaintance.menuItemDesc === "Menu Maintance" ? (
|
const handleLanguageSelect = (lang) => {
|
||||||
<MenuMaintanceComponent />
|
localStorage.setItem("appLanguage", lang);
|
||||||
) : selectedUserMaintance.menuItemDesc === "Menu Access Control" ? (
|
handleSubmenuClose();
|
||||||
<MenuAccessControlComponent />
|
handleMenuClose();
|
||||||
) : selectedUserMaintance.menuItemDesc === "System Parameters" ? (
|
window.location.reload();
|
||||||
<SystemParametersComponent />
|
};
|
||||||
) : selectedUserMaintance.menuItemDesc === "Api Registery" ? (
|
|
||||||
<ApiRegistery />
|
const toggleMobileSidebar = () => {
|
||||||
) : selectedUserMaintance.menuItemDesc === "Token Registery" ? (
|
setMobileSidebarOpen(!mobileSidebarOpen);
|
||||||
<TokenRegistery />
|
};
|
||||||
) : null}
|
|
||||||
</div>
|
const DrawerHeader = styled('div')(({ theme }) => ({
|
||||||
) : (
|
display: 'flex',
|
||||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
alignItems: 'center',
|
||||||
<HomePage />
|
justifyContent: 'flex-end',
|
||||||
</div>
|
padding: theme.spacing(0, 1),
|
||||||
)}
|
...theme.mixins.toolbar,
|
||||||
</div>
|
}));
|
||||||
</div>
|
|
||||||
</div>
|
return (
|
||||||
</div>
|
<div className="flex flex-col h-screen">
|
||||||
);
|
{/* Navbar - fixed at the top */}
|
||||||
};
|
<div className="h-16 flex-shrink-0 bg-gray-800 text-white p-4 z-10">
|
||||||
|
<div className="flex justify-between items-center h-full">
|
||||||
export default Dashboard;
|
<div className="flex items-center">
|
||||||
|
<IconButton
|
||||||
|
color="inherit"
|
||||||
|
onClick={toggleMobileSidebar}
|
||||||
|
sx={{ display: { xs: 'block', lg: 'none' }, mr: 2 }}
|
||||||
|
>
|
||||||
|
<MenuIcon />
|
||||||
|
</IconButton>
|
||||||
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
||||||
|
Dashboard
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop Navigation Icons */}
|
||||||
|
<Box sx={{ display: { xs: 'none', lg: 'flex' }, gap: 2 }}>
|
||||||
|
<Tooltip title="Home">
|
||||||
|
<IconButton color="inherit" onClick={handleHomeClick}>
|
||||||
|
<HomeIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title="Settings">
|
||||||
|
<IconButton color="inherit" onClick={handleSetupClick}>
|
||||||
|
<SettingsIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title="Dashboard">
|
||||||
|
<IconButton color="inherit" onClick={() => navigate('/dashboard/dashboard-runner-all')}>
|
||||||
|
<GridViewIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title="Reports">
|
||||||
|
<IconButton color="inherit" onClick={handleReportClick}>
|
||||||
|
<BarChartIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* User Dropdown */}
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||||
|
<Tooltip title="Account settings">
|
||||||
|
<IconButton
|
||||||
|
onClick={handleMenuOpen}
|
||||||
|
size="small"
|
||||||
|
sx={{ ml: 2 }}
|
||||||
|
aria-controls={anchorEl ? 'account-menu' : undefined}
|
||||||
|
aria-haspopup="true"
|
||||||
|
aria-expanded={anchorEl ? 'true' : undefined}
|
||||||
|
>
|
||||||
|
<Avatar sx={{ width: 32, height: 32, bgcolor: 'primary.main' }}>
|
||||||
|
<PersonIcon fontSize="small" />
|
||||||
|
</Avatar>
|
||||||
|
<Typography variant="body1" sx={{ ml: 1, color: 'white', display: { xs: 'none', lg: 'block' } }}>
|
||||||
|
{currentUser ? currentUser.fullname || currentUser.username || currentUser.email : "Guest"}
|
||||||
|
</Typography>
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* User Menu */}
|
||||||
|
<Menu
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
id="account-menu"
|
||||||
|
open={Boolean(anchorEl)}
|
||||||
|
onClose={handleMenuClose}
|
||||||
|
onClick={handleMenuClose}
|
||||||
|
PaperProps={{
|
||||||
|
elevation: 0,
|
||||||
|
sx: {
|
||||||
|
overflow: 'visible',
|
||||||
|
filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
|
||||||
|
mt: 1.5,
|
||||||
|
'& .MuiAvatar-root': {
|
||||||
|
width: 32,
|
||||||
|
height: 32,
|
||||||
|
ml: -0.5,
|
||||||
|
mr: 1,
|
||||||
|
},
|
||||||
|
'&:before': {
|
||||||
|
content: '""',
|
||||||
|
display: 'block',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
right: 14,
|
||||||
|
width: 10,
|
||||||
|
height: 10,
|
||||||
|
bgcolor: 'background.paper',
|
||||||
|
transform: 'translateY(-50%) rotate(45deg)',
|
||||||
|
zIndex: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
|
||||||
|
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
|
||||||
|
>
|
||||||
|
<MenuItem onClick={() => navigate('/dashboard/about')}>
|
||||||
|
<ListItemIcon>
|
||||||
|
<InfoIcon fontSize="small" />
|
||||||
|
</ListItemIcon>
|
||||||
|
About
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem onClick={() => navigate('/dashboard/profile')}>
|
||||||
|
<ListItemIcon>
|
||||||
|
<PersonIcon fontSize="small" />
|
||||||
|
</ListItemIcon>
|
||||||
|
My Profile
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem onClick={() => navigate('/dashboard/dashboard-runner-all')}>
|
||||||
|
<ListItemIcon>
|
||||||
|
<GridViewIcon fontSize="small" />
|
||||||
|
</ListItemIcon>
|
||||||
|
Activity
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
onClick={handleSubmenuOpen}
|
||||||
|
onMouseEnter={handleSubmenuOpen}
|
||||||
|
>
|
||||||
|
<ListItemIcon>
|
||||||
|
<LanguageIcon fontSize="small" />
|
||||||
|
</ListItemIcon>
|
||||||
|
Choose Language
|
||||||
|
{Boolean(submenuAnchorEl) ? <ExpandLess sx={{ ml: 1 }} /> : <ExpandMore sx={{ ml: 1 }} />}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem onClick={() => navigate('/admin/resetpassword')}>
|
||||||
|
<ListItemIcon>
|
||||||
|
<LockResetIcon fontSize="small" />
|
||||||
|
</ListItemIcon>
|
||||||
|
Reset Password
|
||||||
|
</MenuItem>
|
||||||
|
<Divider />
|
||||||
|
<MenuItem onClick={handleLogout}>
|
||||||
|
<ListItemIcon>
|
||||||
|
<LogoutIcon fontSize="small" />
|
||||||
|
</ListItemIcon>
|
||||||
|
Logout
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
|
||||||
|
{/* Language Submenu */}
|
||||||
|
<Menu
|
||||||
|
anchorEl={submenuAnchorEl}
|
||||||
|
open={Boolean(submenuAnchorEl)}
|
||||||
|
onClose={handleSubmenuClose}
|
||||||
|
MenuListProps={{
|
||||||
|
onMouseLeave: handleSubmenuClose,
|
||||||
|
'aria-labelledby': 'language-button',
|
||||||
|
}}
|
||||||
|
anchorOrigin={{
|
||||||
|
vertical: 'top',
|
||||||
|
horizontal: 'right',
|
||||||
|
}}
|
||||||
|
transformOrigin={{
|
||||||
|
vertical: 'top',
|
||||||
|
horizontal: 'left',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem onClick={() => handleLanguageSelect("en")}>English</MenuItem>
|
||||||
|
<MenuItem onClick={() => handleLanguageSelect("hi")}>Hindi</MenuItem>
|
||||||
|
<MenuItem onClick={() => handleLanguageSelect("ta")}>Tamil</MenuItem>
|
||||||
|
<MenuItem onClick={() => handleLanguageSelect("te")}>Telugu</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Sidebar */}
|
||||||
|
<Drawer
|
||||||
|
variant="temporary"
|
||||||
|
open={mobileSidebarOpen}
|
||||||
|
onClose={toggleMobileSidebar}
|
||||||
|
ModalProps={{
|
||||||
|
keepMounted: true,
|
||||||
|
}}
|
||||||
|
sx={{
|
||||||
|
display: { xs: 'block', lg: 'none' },
|
||||||
|
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: 240 },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box sx={{ p: 2 }}>
|
||||||
|
<List>
|
||||||
|
<ListItemButton onClick={() => { handleHomeClick(); toggleMobileSidebar(); }}>
|
||||||
|
<ListItemIcon><HomeIcon /></ListItemIcon>
|
||||||
|
<ListItemText primary="Home" />
|
||||||
|
</ListItemButton>
|
||||||
|
<ListItemButton onClick={() => { handleSetupClick(); toggleMobileSidebar(); }}>
|
||||||
|
<ListItemIcon><SettingsIcon /></ListItemIcon>
|
||||||
|
<ListItemText primary="Settings" />
|
||||||
|
</ListItemButton>
|
||||||
|
<ListItemButton onClick={() => { navigate('/dashboard/dashboard-runner-all'); toggleMobileSidebar(); }}>
|
||||||
|
<ListItemIcon><GridViewIcon /></ListItemIcon>
|
||||||
|
<ListItemText primary="Dashboard" />
|
||||||
|
</ListItemButton>
|
||||||
|
<ListItemButton onClick={() => { handleReportClick(); toggleMobileSidebar(); }}>
|
||||||
|
<ListItemIcon><BarChartIcon /></ListItemIcon>
|
||||||
|
<ListItemText primary="Reports" />
|
||||||
|
</ListItemButton>
|
||||||
|
|
||||||
|
</List>
|
||||||
|
</Box>
|
||||||
|
</Drawer>
|
||||||
|
|
||||||
|
{/* Main content area below navbar */}
|
||||||
|
<div className="flex flex-1 overflow-hidden">
|
||||||
|
{/* Integrated Sidebar */}
|
||||||
|
<Drawer
|
||||||
|
variant="permanent"
|
||||||
|
sx={{
|
||||||
|
display: { xs: 'none', lg: 'block' },
|
||||||
|
width: sidebarCollapsed ? collapsedWidth : drawerWidth,
|
||||||
|
flexShrink: 0,
|
||||||
|
'& .MuiDrawer-paper': {
|
||||||
|
width: sidebarCollapsed ? collapsedWidth : drawerWidth,
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
backgroundColor: theme.palette.grey[200],
|
||||||
|
borderRight: '1px solid rgba(0, 0, 0, 0.12)',
|
||||||
|
transition: theme.transitions.create('width', {
|
||||||
|
easing: theme.transitions.easing.sharp,
|
||||||
|
duration: theme.transitions.duration.enteringScreen,
|
||||||
|
}),
|
||||||
|
overflowX: 'hidden',
|
||||||
|
height: 'calc(100vh - 64px)',
|
||||||
|
position: 'relative',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DrawerHeader>
|
||||||
|
<IconButton onClick={handleSidebarToggle} size="small">
|
||||||
|
{sidebarCollapsed ? <ChevronRight /> : <ChevronLeft />}
|
||||||
|
</IconButton>
|
||||||
|
</DrawerHeader>
|
||||||
|
<Divider />
|
||||||
|
<List>
|
||||||
|
{/* Transaction with submenus */}
|
||||||
|
<ListItem disablePadding>
|
||||||
|
<ListItemButton
|
||||||
|
onClick={handleTransactionToggle}
|
||||||
|
sx={{
|
||||||
|
minHeight: 48,
|
||||||
|
justifyContent: sidebarCollapsed ? 'center' : 'initial',
|
||||||
|
px: 2.5,
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.04)'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ListItemIcon
|
||||||
|
sx={{
|
||||||
|
minWidth: 0,
|
||||||
|
mr: sidebarCollapsed ? 'auto' : 3,
|
||||||
|
justifyContent: 'center',
|
||||||
|
color: 'inherit'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SwapHorizIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
{!sidebarCollapsed && (
|
||||||
|
<>
|
||||||
|
<ListItemText primary="Transaction" />
|
||||||
|
{openTransaction ? <ExpandLess /> : <ExpandMore />}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</ListItemButton>
|
||||||
|
</ListItem>
|
||||||
|
|
||||||
|
{!sidebarCollapsed && (
|
||||||
|
<Collapse in={openTransaction} timeout="auto" unmountOnExit>
|
||||||
|
<List component="div" disablePadding sx={{ backgroundColor: 'rgba(0, 0, 0, 0.02)' }}>
|
||||||
|
<ListItemButton
|
||||||
|
sx={{ pl: 4 }}
|
||||||
|
onClick={() => navigate('/admin/regform')}
|
||||||
|
>
|
||||||
|
<ListItemIcon sx={{ minWidth: 0, mr: 3, justifyContent: 'center' }}>
|
||||||
|
<DescriptionIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary="Regform" />
|
||||||
|
</ListItemButton>
|
||||||
|
<ListItemButton
|
||||||
|
sx={{ pl: 4 }}
|
||||||
|
onClick={() => navigate('/admin/error404')}
|
||||||
|
>
|
||||||
|
<ListItemIcon sx={{ minWidth: 0, mr: 3, justifyContent: 'center' }}>
|
||||||
|
<ErrorIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary="Additional container" />
|
||||||
|
</ListItemButton>
|
||||||
|
</List>
|
||||||
|
</Collapse>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Masters (single item) */}
|
||||||
|
<ListItem disablePadding>
|
||||||
|
<ListItemButton
|
||||||
|
onClick={() => navigate('/admin/masters')}
|
||||||
|
sx={{
|
||||||
|
minHeight: 48,
|
||||||
|
justifyContent: sidebarCollapsed ? 'center' : 'initial',
|
||||||
|
px: 2.5,
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.04)'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ListItemIcon
|
||||||
|
sx={{
|
||||||
|
minWidth: 0,
|
||||||
|
mr: sidebarCollapsed ? 'auto' : 3,
|
||||||
|
justifyContent: 'center',
|
||||||
|
color: 'inherit'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<StorageIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
{!sidebarCollapsed && (
|
||||||
|
<ListItemText primary="Masters" />
|
||||||
|
)}
|
||||||
|
</ListItemButton>
|
||||||
|
</ListItem>
|
||||||
|
|
||||||
|
{/* Dynamic menu items from API */}
|
||||||
|
{menus.map((menu) => (
|
||||||
|
<ListItem key={menu.menuItemId} disablePadding>
|
||||||
|
<ListItemButton
|
||||||
|
onClick={() => handleMenuItemClick(menu)}
|
||||||
|
sx={{
|
||||||
|
minHeight: 48,
|
||||||
|
justifyContent: sidebarCollapsed ? 'center' : 'initial',
|
||||||
|
px: 2.5,
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.04)'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ListItemIcon
|
||||||
|
sx={{
|
||||||
|
minWidth: 0,
|
||||||
|
mr: sidebarCollapsed ? 'auto' : 3,
|
||||||
|
justifyContent: 'center',
|
||||||
|
color: 'inherit'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<StorageIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
{!sidebarCollapsed && (
|
||||||
|
<ListItemText primary={menu.menuItemDesc} />
|
||||||
|
)}
|
||||||
|
</ListItemButton>
|
||||||
|
</ListItem>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
</Drawer>
|
||||||
|
|
||||||
|
{/* Content area */}
|
||||||
|
<Box
|
||||||
|
component="main"
|
||||||
|
sx={{
|
||||||
|
flexGrow: 1,
|
||||||
|
p: 3,
|
||||||
|
width: {
|
||||||
|
xs: '100%',
|
||||||
|
lg: `calc(100% - ${sidebarCollapsed ? collapsedWidth : drawerWidth}px)`
|
||||||
|
},
|
||||||
|
marginLeft: {
|
||||||
|
xs: 0,
|
||||||
|
lg: `${sidebarCollapsed ? collapsedWidth : drawerWidth}px`
|
||||||
|
},
|
||||||
|
transition: theme.transitions.create(['width', 'margin'], {
|
||||||
|
easing: theme.transitions.easing.sharp,
|
||||||
|
duration: theme.transitions.duration.leavingScreen,
|
||||||
|
}),
|
||||||
|
height: 'calc(100vh - 64px)',
|
||||||
|
overflow: 'auto'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Routes>
|
||||||
|
<Route index element={<HomePage />} />
|
||||||
|
<Route path="setup" element={<Setup />}>
|
||||||
|
<Route index element={<div>Select a setup option from the menu</div>} />
|
||||||
|
<Route path="user-maintenance" element={<UserMaintanceComponent />} />
|
||||||
|
<Route path="user-group-maintenance" element={<UserGroupMaintanceComponent />} />
|
||||||
|
<Route path="menu-maintenance" element={<MenuMaintanceComponent />} />
|
||||||
|
<Route path="menu-access-control" element={<MenuAccessControlComponent />} />
|
||||||
|
<Route path="system-parameters" element={<SystemParametersComponent />} />
|
||||||
|
<Route path="access-type" element={<AccessTypeComponent />} />
|
||||||
|
<Route path="api-registry" element={<ApiRegistery />} />
|
||||||
|
<Route path="token-registry" element={<TokenRegistery />} />
|
||||||
|
<Route path="document-sequence" element={<SequenceGenerator />} />
|
||||||
|
<Route path="sub-menu-maintenance/:menuItemId" element={<SubMenuMaintenance/>} />
|
||||||
|
</Route>
|
||||||
|
<Route path="reports" element={<Report />} />
|
||||||
|
<Route path="about" element={<About/>} />
|
||||||
|
<Route path="profile" element={<Profile/>} />
|
||||||
|
<Route path="dashboard-runner-all" element={<DashboardRunnerAll/>}/>
|
||||||
|
<Route path="dashboard-new-all" element={<DashboardNewAll/>}/>
|
||||||
|
<Route path="dashboard-new-add" element={<DashboardNewAdd/>}/>
|
||||||
|
<Route path="dashboard-new-edit/:id" element={<DashboardNewEdit/>}/>
|
||||||
|
<Route path="edit-new-dash/:id" element={<EditNewDash/>}/>
|
||||||
|
<Route path="dashrunner/:id" element={ <DashboardRunner/>}/>
|
||||||
|
|
||||||
|
<Route path="*" element={<div>Page Not Found</div>} />
|
||||||
|
</Routes>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Dashboard;
|
||||||
409
src/components/Dashboard/document sequence/sequencegenerator.js
Normal file
409
src/components/Dashboard/document sequence/sequencegenerator.js
Normal file
@@ -0,0 +1,409 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Dialog,
|
||||||
|
DialogTitle,
|
||||||
|
DialogContent,
|
||||||
|
DialogActions,
|
||||||
|
TextField,
|
||||||
|
MenuItem,
|
||||||
|
IconButton,
|
||||||
|
Menu,
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableContainer,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
Paper,
|
||||||
|
Typography,
|
||||||
|
Card,
|
||||||
|
Alert,
|
||||||
|
Snackbar,
|
||||||
|
InputAdornment,
|
||||||
|
TablePagination,
|
||||||
|
Divider,
|
||||||
|
Chip
|
||||||
|
} from '@mui/material';
|
||||||
|
import {
|
||||||
|
MoreVert as MoreVertIcon,
|
||||||
|
Add as AddIcon,
|
||||||
|
Edit as EditIcon,
|
||||||
|
Delete as DeleteIcon,
|
||||||
|
Close as CloseIcon
|
||||||
|
} from '@mui/icons-material';
|
||||||
|
import SequenceGeneratorAPI from './sequencegeneratorapi';
|
||||||
|
|
||||||
|
const SequenceGenerator = () => {
|
||||||
|
const [sequences, setSequences] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
const [openDialog, setOpenDialog] = useState(false);
|
||||||
|
const [editingId, setEditingId] = useState(null);
|
||||||
|
const [currentSequence, setCurrentSequence] = useState(null);
|
||||||
|
const [anchorEl, setAnchorEl] = useState(null);
|
||||||
|
const [openMenuId, setOpenMenuId] = useState(null);
|
||||||
|
const [page, setPage] = useState(0);
|
||||||
|
const [rowsPerPage, setRowsPerPage] = useState(10);
|
||||||
|
const [snackbarOpen, setSnackbarOpen] = useState(false);
|
||||||
|
const [snackbarMessage, setSnackbarMessage] = useState('');
|
||||||
|
const [snackbarSeverity, setSnackbarSeverity] = useState('success');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchSequences();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const fetchSequences = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const data = await SequenceGeneratorAPI.getAll();
|
||||||
|
setSequences(data);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.response?.data?.message || 'Failed to fetch sequences');
|
||||||
|
showSnackbar(err.response?.data?.message || 'Failed to fetch sequences', 'error');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const showSnackbar = (message, severity) => {
|
||||||
|
setSnackbarMessage(message);
|
||||||
|
setSnackbarSeverity(severity);
|
||||||
|
setSnackbarOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreate = () => {
|
||||||
|
setCurrentSequence(null);
|
||||||
|
setEditingId(null);
|
||||||
|
setOpenDialog(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (record) => {
|
||||||
|
setCurrentSequence(record);
|
||||||
|
setEditingId(record.id);
|
||||||
|
setOpenDialog(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (id) => {
|
||||||
|
try {
|
||||||
|
await SequenceGeneratorAPI.delete(id);
|
||||||
|
showSnackbar('Sequence deleted successfully', 'success');
|
||||||
|
fetchSequences();
|
||||||
|
} catch (err) {
|
||||||
|
showSnackbar(err.response?.data?.message || 'Failed to delete sequence', 'error');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMenuClick = (event, id) => {
|
||||||
|
setAnchorEl(event.currentTarget);
|
||||||
|
setOpenMenuId(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMenuClose = () => {
|
||||||
|
setAnchorEl(null);
|
||||||
|
setOpenMenuId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (event) => {
|
||||||
|
if (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Get form values directly from state or form inputs
|
||||||
|
const form = event?.currentTarget || document.querySelector('form');
|
||||||
|
const formData = new FormData(form);
|
||||||
|
const values = Object.fromEntries(formData.entries());
|
||||||
|
|
||||||
|
// Convert number fields from strings to numbers
|
||||||
|
values.starting_no = Number(values.starting_no);
|
||||||
|
values.current_no = Number(values.current_no);
|
||||||
|
|
||||||
|
if (editingId) {
|
||||||
|
await SequenceGeneratorAPI.update(editingId, values);
|
||||||
|
showSnackbar('Sequence updated successfully', 'success');
|
||||||
|
} else {
|
||||||
|
await SequenceGeneratorAPI.create(values);
|
||||||
|
showSnackbar('Sequence created successfully', 'success');
|
||||||
|
}
|
||||||
|
|
||||||
|
setOpenDialog(false);
|
||||||
|
fetchSequences();
|
||||||
|
} catch (err) {
|
||||||
|
showSnackbar(err.response?.data?.message || 'Operation failed', 'error');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const handleChangePage = (event, newPage) => {
|
||||||
|
setPage(newPage);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChangeRowsPerPage = (event) => {
|
||||||
|
setRowsPerPage(parseInt(event.target.value, 10));
|
||||||
|
setPage(0);
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{ id: 'sequence_name', label: 'Name' },
|
||||||
|
{ id: 'sequence_code', label: 'Sequence Code' },
|
||||||
|
{ id: 'current_no', label: 'Current No' },
|
||||||
|
{ id: 'demonstration', label: 'Demonstration' },
|
||||||
|
{ id: 'actions', label: 'Actions' }
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ p: 3 }}>
|
||||||
|
{/* Error Alert */}
|
||||||
|
{error && (
|
||||||
|
<Alert
|
||||||
|
severity="error"
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
onClose={() => setError(null)}
|
||||||
|
>
|
||||||
|
{error}
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Success/Error Snackbar */}
|
||||||
|
<Snackbar
|
||||||
|
open={snackbarOpen}
|
||||||
|
autoHideDuration={6000}
|
||||||
|
onClose={() => setSnackbarOpen(false)}
|
||||||
|
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
|
||||||
|
>
|
||||||
|
<Alert
|
||||||
|
onClose={() => setSnackbarOpen(false)}
|
||||||
|
severity={snackbarSeverity}
|
||||||
|
sx={{ width: '100%' }}
|
||||||
|
>
|
||||||
|
{snackbarMessage}
|
||||||
|
</Alert>
|
||||||
|
</Snackbar>
|
||||||
|
|
||||||
|
{/* Header and Add Button */}
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
|
||||||
|
<Typography variant="h4" component="h2">
|
||||||
|
Document Sequence
|
||||||
|
</Typography>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
startIcon={<AddIcon />}
|
||||||
|
onClick={handleCreate}
|
||||||
|
>
|
||||||
|
Add Sequence
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Table */}
|
||||||
|
<TableContainer component={Paper} sx={{ boxShadow: 3 }}>
|
||||||
|
<Table>
|
||||||
|
<TableHead sx={{ backgroundColor: 'primary.main' }}>
|
||||||
|
<TableRow>
|
||||||
|
{columns.map((column) => (
|
||||||
|
<TableCell key={column.id} sx={{ color: 'common.white', fontWeight: 'bold' }}>
|
||||||
|
{column.label}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{sequences
|
||||||
|
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
|
||||||
|
.map((row) => (
|
||||||
|
<TableRow key={row.id} hover>
|
||||||
|
<TableCell>{row.sequence_name}</TableCell>
|
||||||
|
<TableCell>{row.sequence_code}</TableCell>
|
||||||
|
<TableCell>{row.current_no}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Chip
|
||||||
|
label={row.demonstration}
|
||||||
|
color="primary"
|
||||||
|
variant="outlined"
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<IconButton
|
||||||
|
aria-label="more"
|
||||||
|
aria-controls={`menu-${row.id}`}
|
||||||
|
aria-haspopup="true"
|
||||||
|
onClick={(e) => handleMenuClick(e, row.id)}
|
||||||
|
>
|
||||||
|
<MoreVertIcon />
|
||||||
|
</IconButton>
|
||||||
|
<Menu
|
||||||
|
id={`menu-${row.id}`}
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
open={openMenuId === row.id}
|
||||||
|
onClose={handleMenuClose}
|
||||||
|
>
|
||||||
|
<MenuItem onClick={() => { handleEdit(row); handleMenuClose(); }}>
|
||||||
|
<EditIcon sx={{ mr: 1 }} /> Edit
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
handleDelete(row.id);
|
||||||
|
handleMenuClose();
|
||||||
|
}}
|
||||||
|
sx={{ color: 'error.main' }}
|
||||||
|
>
|
||||||
|
<DeleteIcon sx={{ mr: 1 }} /> Delete
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
<TablePagination
|
||||||
|
rowsPerPageOptions={[5, 10, 25]}
|
||||||
|
component="div"
|
||||||
|
count={sequences.length}
|
||||||
|
rowsPerPage={rowsPerPage}
|
||||||
|
page={page}
|
||||||
|
onPageChange={handleChangePage}
|
||||||
|
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Add/Edit Dialog */}
|
||||||
|
<Dialog
|
||||||
|
open={openDialog}
|
||||||
|
onClose={() => setOpenDialog(false)}
|
||||||
|
maxWidth="md"
|
||||||
|
fullWidth
|
||||||
|
>
|
||||||
|
<DialogTitle>
|
||||||
|
{editingId ? 'Update Sequence Generator' : 'Add New Sequence'}
|
||||||
|
<IconButton
|
||||||
|
aria-label="close"
|
||||||
|
onClick={() => setOpenDialog(false)}
|
||||||
|
sx={{
|
||||||
|
position: 'absolute',
|
||||||
|
right: 8,
|
||||||
|
top: 8,
|
||||||
|
color: (theme) => theme.palette.grey[500],
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogContent dividers>
|
||||||
|
{currentSequence && (
|
||||||
|
<Card variant="outlined" sx={{ mb: 3 }}>
|
||||||
|
<Box sx={{ p: 2 }}>
|
||||||
|
<Typography variant="h6" gutterBottom>
|
||||||
|
Sequence Details
|
||||||
|
</Typography>
|
||||||
|
<Divider sx={{ mb: 2 }} />
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||||
|
<Box sx={{ display: 'flex' }}>
|
||||||
|
<Typography variant="subtitle1" sx={{ width: '30%', fontWeight: 'bold' }}>
|
||||||
|
Sequence ID
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body1">{currentSequence.id}</Typography>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ display: 'flex' }}>
|
||||||
|
<Typography variant="subtitle1" sx={{ width: '30%', fontWeight: 'bold' }}>
|
||||||
|
Demonstration
|
||||||
|
</Typography>
|
||||||
|
<Chip
|
||||||
|
label={currentSequence.demonstration}
|
||||||
|
color="primary"
|
||||||
|
sx={{ fontWeight: 'bold' }}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Box component="form" id="sequence-form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="Name*"
|
||||||
|
name="sequence_name"
|
||||||
|
defaultValue={currentSequence?.sequence_name || ''}
|
||||||
|
required
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="Sequence Code"
|
||||||
|
name="sequence_code"
|
||||||
|
defaultValue={currentSequence?.sequence_code || ''}
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="Prefix*"
|
||||||
|
name="prefix"
|
||||||
|
defaultValue={currentSequence?.prefix || ''}
|
||||||
|
required
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="Suffix"
|
||||||
|
name="suffix"
|
||||||
|
defaultValue={currentSequence?.suffix || ''}
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="Separator"
|
||||||
|
name="seperator"
|
||||||
|
defaultValue={currentSequence?.seperator || ''}
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="Starting No"
|
||||||
|
name="starting_no"
|
||||||
|
type="number"
|
||||||
|
defaultValue={currentSequence?.starting_no || 1}
|
||||||
|
InputProps={{ inputProps: { min: 1 } }}
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
margin="normal"
|
||||||
|
fullWidth
|
||||||
|
label="Current No"
|
||||||
|
name="current_no"
|
||||||
|
type="number"
|
||||||
|
defaultValue={currentSequence?.current_no || 1}
|
||||||
|
InputProps={{ inputProps: { min: 1 } }}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={() => setOpenDialog(false)}>Cancel</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
type="submit"
|
||||||
|
form="sequence-form" // Associate with the form
|
||||||
|
>
|
||||||
|
{editingId ? 'Update' : 'Create'}
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SequenceGenerator;
|
||||||
@@ -0,0 +1,104 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
import { getToken } from '../../../utils/tokenService.js';
|
||||||
|
|
||||||
|
// Use REACT_APP_API_BASE_URL instead of REACT_APP_API_URL
|
||||||
|
const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || 'http://localhost:8080'; // Default to localhost if not set
|
||||||
|
|
||||||
|
const api = axios.create({
|
||||||
|
baseURL: API_BASE_URL,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Request interceptor
|
||||||
|
api.interceptors.request.use((config) => {
|
||||||
|
const token = getToken();
|
||||||
|
console.log('[API] Current token:', token);
|
||||||
|
console.log('[API] Making request to:', config.url);
|
||||||
|
|
||||||
|
if (token) {
|
||||||
|
config.headers.Authorization = `Bearer ${token}`;
|
||||||
|
} else {
|
||||||
|
console.warn('No authToken found for request!');
|
||||||
|
}
|
||||||
|
|
||||||
|
return config;
|
||||||
|
}, (error) => {
|
||||||
|
console.error('[API] Request error:', error);
|
||||||
|
return Promise.reject(error);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Response interceptor
|
||||||
|
api.interceptors.response.use((response) => {
|
||||||
|
console.log('[API] Response received:', {
|
||||||
|
status: response.status,
|
||||||
|
url: response.config.url,
|
||||||
|
data: response.data
|
||||||
|
});
|
||||||
|
return response;
|
||||||
|
}, (error) => {
|
||||||
|
console.error('[API] Response error:', {
|
||||||
|
status: error.response?.status,
|
||||||
|
url: error.config?.url,
|
||||||
|
message: error.message,
|
||||||
|
response: error.response?.data
|
||||||
|
});
|
||||||
|
return Promise.reject(error);
|
||||||
|
});
|
||||||
|
|
||||||
|
const SequenceGeneratorAPI = {
|
||||||
|
getAll: async () => {
|
||||||
|
try {
|
||||||
|
console.log('[API] Fetching all sequences');
|
||||||
|
const response = await api.get('/sureserve/sequence/seq');
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[API] Error fetching sequences:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getById: async (id) => {
|
||||||
|
try {
|
||||||
|
console.log(`[API] Fetching sequence with ID: ${id}`);
|
||||||
|
const response = await api.get(`/sureserve/sequence/seq/${id}`);
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`[API] Error fetching sequence ${id}:`, error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
create: async (data) => {
|
||||||
|
try {
|
||||||
|
const response = await api.post('/sureserve/sequence/seq', data);
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[API] Error creating sequence:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
update: async (id, data) => {
|
||||||
|
try {
|
||||||
|
const response = await api.put(`/sureserve/sequence/seq/${id}`, data);
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`[API] Error updating sequence ${id}:`, error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
delete: async (id) => {
|
||||||
|
try {
|
||||||
|
const response = await api.delete(`/sureserve/sequence/seq/${id}`);
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`[API] Error deleting sequence ${id}:`, error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SequenceGeneratorAPI;
|
||||||
53
src/components/Dashboard/dropdown/about.js
Normal file
53
src/components/Dashboard/dropdown/about.js
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
// Example About component with MUI styling
|
||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Typography,
|
||||||
|
CardMedia,
|
||||||
|
useTheme
|
||||||
|
} from "@mui/material";
|
||||||
|
|
||||||
|
const About = () => {
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
p: 4,
|
||||||
|
textAlign: "center"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CardMedia
|
||||||
|
component="img"
|
||||||
|
image="/about-image.png"
|
||||||
|
alt="About Us"
|
||||||
|
sx={{
|
||||||
|
width: 300,
|
||||||
|
height: 200,
|
||||||
|
objectFit: "cover",
|
||||||
|
mb: 4,
|
||||||
|
borderRadius: 1
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Typography variant="h4" component="h1" sx={{ mb: 2, color: theme.palette.primary.main }}>
|
||||||
|
About Our Application
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Typography variant="body1" sx={{ maxWidth: 600, mb: 2 }}>
|
||||||
|
This is a comprehensive dashboard application built with React and Material-UI.
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Typography variant="body1" sx={{ maxWidth: 600 }}>
|
||||||
|
Create new projects for users with appropriate access levels. Contact your administrator
|
||||||
|
if you need additional permissions.
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default About;
|
||||||
207
src/components/Dashboard/dropdown/profile.js
Normal file
207
src/components/Dashboard/dropdown/profile.js
Normal file
@@ -0,0 +1,207 @@
|
|||||||
|
import React, { useState, useRef } from 'react';
|
||||||
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
|
import {
|
||||||
|
Container,
|
||||||
|
Typography,
|
||||||
|
Avatar,
|
||||||
|
Button,
|
||||||
|
TextField,
|
||||||
|
Divider,
|
||||||
|
Box,
|
||||||
|
Stack,
|
||||||
|
IconButton
|
||||||
|
} from '@mui/material';
|
||||||
|
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
|
||||||
|
import CancelIcon from '@mui/icons-material/Cancel';
|
||||||
|
import SaveIcon from '@mui/icons-material/Save';
|
||||||
|
|
||||||
|
const Profile = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [preview, setPreview] = useState(null);
|
||||||
|
const [selectedFile, setSelectedFile] = useState(null);
|
||||||
|
const fileInputRef = useRef(null);
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
localStorage.removeItem("authToken");
|
||||||
|
navigate('/auth/login');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFileChange = (e) => {
|
||||||
|
const file = e.target.files[0];
|
||||||
|
if (file) {
|
||||||
|
setSelectedFile(file);
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onloadend = () => {
|
||||||
|
setPreview(reader.result);
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const triggerFileInput = () => {
|
||||||
|
fileInputRef.current.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
setPreview(null);
|
||||||
|
setSelectedFile(null);
|
||||||
|
fileInputRef.current.value = '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpload = () => {
|
||||||
|
if (!selectedFile) return;
|
||||||
|
alert('Upload functionality would go here');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Container maxWidth="md" sx={{ mt: 4 }}>
|
||||||
|
<Typography variant="h4" gutterBottom>
|
||||||
|
My Profile Settings
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{/* Profile Photo Section */}
|
||||||
|
<Box sx={{ mb: 4 }}>
|
||||||
|
<Typography variant="h6" gutterBottom>
|
||||||
|
PROFILE PHOTO
|
||||||
|
</Typography>
|
||||||
|
<Stack direction="row" alignItems="center" spacing={3} sx={{ mb: 2 }}>
|
||||||
|
<Box>
|
||||||
|
{preview ? (
|
||||||
|
<Avatar
|
||||||
|
src={preview}
|
||||||
|
alt="Profile Preview"
|
||||||
|
sx={{ width: 100, height: 100 }}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Avatar sx={{ width: 100, height: 100, bgcolor: 'grey.300' }} />
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
ref={fileInputRef}
|
||||||
|
onChange={handleFileChange}
|
||||||
|
accept="image/*"
|
||||||
|
style={{ display: 'none' }}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
startIcon={<CloudUploadIcon />}
|
||||||
|
onClick={triggerFileInput}
|
||||||
|
>
|
||||||
|
Choose File
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
{/* Action buttons - shown only when an image is selected */}
|
||||||
|
{preview && (
|
||||||
|
<Stack direction="row" spacing={2} justifyContent="flex-end">
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
startIcon={<CancelIcon />}
|
||||||
|
onClick={handleCancel}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
startIcon={<SaveIcon />}
|
||||||
|
onClick={handleUpload}
|
||||||
|
>
|
||||||
|
Upload
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Profile Form */}
|
||||||
|
<Box component="form" sx={{ mb: 4 }}>
|
||||||
|
<TextField
|
||||||
|
label="Your Full Name"
|
||||||
|
value="sysadmin"
|
||||||
|
fullWidth
|
||||||
|
margin="normal"
|
||||||
|
InputProps={{
|
||||||
|
readOnly: true,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
label="Pronouns"
|
||||||
|
placeholder="Enter Pronouns"
|
||||||
|
fullWidth
|
||||||
|
margin="normal"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
label="Role"
|
||||||
|
placeholder="Enter Role"
|
||||||
|
fullWidth
|
||||||
|
margin="normal"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
label="Department or Team"
|
||||||
|
placeholder="Enter Department"
|
||||||
|
fullWidth
|
||||||
|
margin="normal"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
label="Email"
|
||||||
|
value="sysadmin"
|
||||||
|
fullWidth
|
||||||
|
margin="normal"
|
||||||
|
InputProps={{
|
||||||
|
readOnly: true,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
label="About Me"
|
||||||
|
placeholder="Enter Description"
|
||||||
|
fullWidth
|
||||||
|
margin="normal"
|
||||||
|
multiline
|
||||||
|
rows={4}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
sx={{ mt: 2 }}
|
||||||
|
onClick={() => navigate('/error404')}
|
||||||
|
>
|
||||||
|
Update Profile
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Divider sx={{ my: 3 }} />
|
||||||
|
|
||||||
|
<Typography paragraph>
|
||||||
|
<strong>Password:</strong> Change Password for your account{' '}
|
||||||
|
<Link to="/admin/resetpassword">Change password</Link>
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Divider sx={{ my: 3 }} />
|
||||||
|
|
||||||
|
<Typography paragraph>
|
||||||
|
<strong>Security:</strong> Logout of all sessions except this current browser{' '}
|
||||||
|
<Button color="primary" onClick={handleLogout}>
|
||||||
|
Logout other sessions
|
||||||
|
</Button>
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Divider sx={{ my: 3 }} />
|
||||||
|
|
||||||
|
<Typography paragraph>
|
||||||
|
<strong>Deactivation:</strong> Remove access to all organizations and workspace in CloudnSure{' '}
|
||||||
|
<Button color="primary" onClick={handleLogout}>
|
||||||
|
Deactivate account
|
||||||
|
</Button>
|
||||||
|
</Typography>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Profile;
|
||||||
@@ -1,62 +1,62 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
name: '',
|
name: '',
|
||||||
test: [
|
test: [
|
||||||
{ t1: '', t2: '' } // Initial test2
|
{ t1: '', t2: '' } // Initial test2
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleChange = (e, index) => {
|
const handleChange = (e, index) => {
|
||||||
const { name, value } = e.target;
|
const { name, value } = e.target;
|
||||||
if (name === 'name') {
|
if (name === 'name') {
|
||||||
setFormData({ ...formData, [name]: value });
|
setFormData({ ...formData, [name]: value });
|
||||||
} else {
|
} else {
|
||||||
const updatedTests = [...formData.test];
|
const updatedTests = [...formData.test];
|
||||||
updatedTests[index][name] = value;
|
updatedTests[index][name] = value;
|
||||||
setFormData({ ...formData, test: updatedTests });
|
setFormData({ ...formData, test: updatedTests });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleAddTest = () => {
|
const handleAddTest = () => {
|
||||||
setFormData({
|
setFormData({
|
||||||
...formData,
|
...formData,
|
||||||
test: [...formData.test, { t1: '', t2: '' }]
|
test: [...formData.test, { t1: '', t2: '' }]
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSubmit = (e) => {
|
const handleSubmit = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
console.log(formData);
|
console.log(formData);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label htmlFor="name">Name:</label>
|
<label htmlFor="name">Name:</label>
|
||||||
<input type="text" id="name" name="name" value={formData.name} onChange={handleChange} required />
|
<input type="text" id="name" name="name" value={formData.name} onChange={handleChange} required />
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<h2>Test 2</h2>
|
<h2>Test 2</h2>
|
||||||
{formData.test.map((test, index) => (
|
{formData.test.map((test, index) => (
|
||||||
<div key={index}>
|
<div key={index}>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label htmlFor={`t1-${index}`}>Name:</label>
|
<label htmlFor={`t1-${index}`}>Name:</label>
|
||||||
<input type="text" id={`t1-${index}`} name={`t1-${index}`} value={test.t1} onChange={(e) => handleChange(e, index)} required />
|
<input type="text" id={`t1-${index}`} name={`t1-${index}`} value={test.t1} onChange={(e) => handleChange(e, index)} required />
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label htmlFor={`t2-${index}`}>Description:</label>
|
<label htmlFor={`t2-${index}`}>Description:</label>
|
||||||
<input type="text" id={`t2-${index}`} name={`t2-${index}`} value={test.t2} onChange={(e) => handleChange(e, index)} required />
|
<input type="text" id={`t2-${index}`} name={`t2-${index}`} value={test.t2} onChange={(e) => handleChange(e, index)} required />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
<button type="button" onClick={handleAddTest}>Add Test</button>
|
<button type="button" onClick={handleAddTest}>Add Test</button>
|
||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
@@ -1,73 +1,73 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
function MyForm() {
|
function MyForm() {
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
name: '',
|
name: '',
|
||||||
test2: { name: '', description: '' }
|
test2: { name: '', description: '' }
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleChange = (e) => {
|
const handleChange = (e) => {
|
||||||
const { name, value } = e.target;
|
const { name, value } = e.target;
|
||||||
setFormData({
|
setFormData({
|
||||||
...formData,
|
...formData,
|
||||||
[name]: value
|
[name]: value
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleTest2Change = (e) => {
|
const handleTest2Change = (e) => {
|
||||||
const { name, value } = e.target;
|
const { name, value } = e.target;
|
||||||
setFormData({
|
setFormData({
|
||||||
...formData,
|
...formData,
|
||||||
test2: {
|
test2: {
|
||||||
...formData.test2,
|
...formData.test2,
|
||||||
[name]: value
|
[name]: value
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSubmit = (e) => {
|
const handleSubmit = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
console.log(formData);
|
console.log(formData);
|
||||||
// we can send this data to our server
|
// we can send this data to our server
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<div>
|
<div>
|
||||||
<label htmlFor="name">Name:</label>
|
<label htmlFor="name">Name:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="name"
|
id="name"
|
||||||
name="name"
|
name="name"
|
||||||
value={formData.name}
|
value={formData.name}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<h2>Test 2</h2>
|
<h2>Test 2</h2>
|
||||||
<div>
|
<div>
|
||||||
<label htmlFor="test2Name">Name:</label>
|
<label htmlFor="test2Name">Name:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="test2Name"
|
id="test2Name"
|
||||||
name="name"
|
name="name"
|
||||||
value={formData.test2.name}
|
value={formData.test2.name}
|
||||||
onChange={handleTest2Change}
|
onChange={handleTest2Change}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label htmlFor="test2Description">Description:</label>
|
<label htmlFor="test2Description">Description:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="test2Description"
|
id="test2Description"
|
||||||
name="description"
|
name="description"
|
||||||
value={formData.test2.description}
|
value={formData.test2.description}
|
||||||
onChange={handleTest2Change}
|
onChange={handleTest2Change}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default MyForm;
|
export default MyForm;
|
||||||
|
|||||||
@@ -1,71 +1,71 @@
|
|||||||
/* Report.css */
|
/* Report.css */
|
||||||
|
|
||||||
.app {
|
.app {
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
margin: 20px auto; /* Adjust margin to create space between cards and navbar */
|
margin: 20px auto; /* Adjust margin to create space between cards and navbar */
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-container {
|
.card-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(350px, 1fr) minmax(350px, 1fr) minmax(350px, 1fr) repeat(auto-fill, minmax(250px, 1fr)); /* Ensure first three cards are in the same row and increase their width */
|
grid-template-columns: minmax(350px, 1fr) minmax(350px, 1fr) minmax(350px, 1fr) repeat(auto-fill, minmax(250px, 1fr)); /* Ensure first three cards are in the same row and increase their width */
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
max-width: 100%; /* Limit the maximum width of the card container */
|
max-width: 100%; /* Limit the maximum width of the card container */
|
||||||
margin: 0 auto; /* Center the card container */
|
margin: 0 auto; /* Center the card container */
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border: 1px solid #e0e0e0;
|
border: 1px solid #e0e0e0;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 30px; /* Increase padding for better spacing */
|
padding: 30px; /* Increase padding for better spacing */
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adjust box shadow for a more pronounced effect */
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adjust box shadow for a more pronounced effect */
|
||||||
transition: transform 0.3s ease-in-out;
|
transition: transform 0.3s ease-in-out;
|
||||||
width: 100%; /* Make cards take up full width of their container */
|
width: 100%; /* Make cards take up full width of their container */
|
||||||
height: auto; /* Allow cards to expand vertically based on content */
|
height: auto; /* Allow cards to expand vertically based on content */
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:hover {
|
.card:hover {
|
||||||
transform: translateY(-5px);
|
transform: translateY(-5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card h2 {
|
.card h2 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
color: #333;
|
color: #333;
|
||||||
font-size: 20px; /* Increase font size of card headings */
|
font-size: 20px; /* Increase font size of card headings */
|
||||||
}
|
}
|
||||||
|
|
||||||
.card p {
|
.card p {
|
||||||
margin: 10px 0; /* Increase margin for better spacing */
|
margin: 10px 0; /* Increase margin for better spacing */
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
@media (max-width: 1400px) {
|
||||||
.card-container {
|
.card-container {
|
||||||
grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr) repeat(auto-fill, minmax(250px, 1fr)); /* Adjust columns for smaller screens */
|
grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr) repeat(auto-fill, minmax(250px, 1fr)); /* Adjust columns for smaller screens */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1100px) {
|
@media (max-width: 1100px) {
|
||||||
.card-container {
|
.card-container {
|
||||||
grid-template-columns: minmax(250px, 1fr) repeat(auto-fill, minmax(200px, 1fr)); /* Further adjust columns for even smaller screens */
|
grid-template-columns: minmax(250px, 1fr) repeat(auto-fill, minmax(200px, 1fr)); /* Further adjust columns for even smaller screens */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.card-container {
|
.card-container {
|
||||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjust columns for smaller screens */
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjust columns for smaller screens */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.card-container {
|
.card-container {
|
||||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Adjust columns for smaller screens */
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Adjust columns for smaller screens */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,80 +1,74 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
const Card = ({ report }) => {
|
const Card = ({ report }) => {
|
||||||
return (
|
return (
|
||||||
<div className="bg-white border border-gray-300 rounded-lg shadow-md p-6 m-4 cursor-pointer transition-transform transform hover:scale-105 hover:shadow-lg flex flex-col items-center justify-center text-center">
|
<div className="bg-white border border-gray-300 rounded-lg shadow-md p-6 m-4 cursor-pointer transition-transform transform hover:scale-105 hover:shadow-lg flex flex-col items-center justify-center text-center">
|
||||||
<h2 className="text-lg font-semibold mb-2">{report.reportName}</h2>
|
<h2 className="text-lg font-semibold mb-2">{report.reportName}</h2>
|
||||||
<p className="text-gray-600 mb-2">{report.description}</p>
|
<p className="text-gray-600 mb-2">{report.description}</p>
|
||||||
<p className="text-gray-600 mb-2">
|
<p className="text-gray-600 mb-2">
|
||||||
Active: {report.active ? "Yes" : "No"}
|
Active: {report.active ? "Yes" : "No"}
|
||||||
</p>
|
</p>
|
||||||
<p className="text-gray-600">Is SQL: {report.isSql ? "Yes" : "No"}</p>
|
<p className="text-gray-600">Is SQL: {report.isSql ? "Yes" : "No"}</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Define the API base URL using the environment variable
|
// Define the API base URL using the environment variable
|
||||||
const api = process.env.REACT_APP_API_BASE_URL;
|
const api = process.env.REACT_APP_API_BASE_URL;
|
||||||
|
|
||||||
const Report = () => {
|
const Report = () => {
|
||||||
const [reports, setReports] = useState([]);
|
const [reports, setReports] = useState([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
const token = localStorage.getItem("authToken");
|
const token = localStorage.getItem("authToken");
|
||||||
|
|
||||||
if (!token) {
|
if (!token) {
|
||||||
console.error("No auth token found. Redirecting to login.");
|
console.error("No auth token found. Redirecting to login.");
|
||||||
// You can redirect to the login page here if needed
|
// You can redirect to the login page here if needed
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`${api}/Rpt_builder2/Rpt_builder2`, {
|
const response = await fetch(`${api}/Rpt_builder2/Rpt_builder2`, {
|
||||||
headers: {
|
headers: {
|
||||||
Authorization: `Bearer ${token}`,
|
Authorization: `Bearer ${token}`,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
if (response.status === 401) {
|
if (!response.ok) {
|
||||||
console.error("Unauthorized. Redirecting to login.");
|
throw new Error("Failed to fetch data");
|
||||||
// Redirect to the login page here if needed
|
}
|
||||||
return;
|
|
||||||
}
|
const data = await response.json();
|
||||||
|
setReports(data);
|
||||||
if (!response.ok) {
|
setLoading(false);
|
||||||
throw new Error("Failed to fetch data");
|
} catch (error) {
|
||||||
}
|
console.error("Error fetching data:", error);
|
||||||
|
setLoading(false);
|
||||||
const data = await response.json();
|
}
|
||||||
setReports(data);
|
};
|
||||||
setLoading(false);
|
|
||||||
} catch (error) {
|
fetchData();
|
||||||
console.error("Error fetching data:", error);
|
}, []);
|
||||||
setLoading(false);
|
|
||||||
}
|
return (
|
||||||
};
|
<div className="min-h-screen bg-gray-100 p-4 flex flex-col items-center">
|
||||||
|
<div className="mb-6">
|
||||||
fetchData();
|
<h1 className="text-3xl font-semibold text-gray-700">Reports</h1>
|
||||||
}, []);
|
</div>
|
||||||
|
{loading ? (
|
||||||
return (
|
<p className="text-gray-700">Loading...</p>
|
||||||
<div className="min-h-screen bg-gray-100 p-4 flex flex-col items-center">
|
) : (
|
||||||
<div className="mb-6">
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||||
<h1 className="text-3xl font-semibold text-gray-700">Reports</h1>
|
{reports.map((report) => (
|
||||||
</div>
|
<Card key={report.id} report={report} />
|
||||||
{loading ? (
|
))}
|
||||||
<p className="text-gray-700">Loading...</p>
|
</div>
|
||||||
) : (
|
)}
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
</div>
|
||||||
{reports.map((report) => (
|
);
|
||||||
<Card key={report.id} report={report} />
|
};
|
||||||
))}
|
|
||||||
</div>
|
export default Report;
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Report;
|
|
||||||
701
src/components/Dashboard/reports/reportbuildersql.js
Normal file
701
src/components/Dashboard/reports/reportbuildersql.js
Normal file
@@ -0,0 +1,701 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableContainer,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
Paper,
|
||||||
|
Button,
|
||||||
|
TextField,
|
||||||
|
Dialog,
|
||||||
|
DialogActions,
|
||||||
|
DialogContent,
|
||||||
|
DialogTitle,
|
||||||
|
MenuItem,
|
||||||
|
Select,
|
||||||
|
IconButton,
|
||||||
|
Typography,
|
||||||
|
Box,
|
||||||
|
CircularProgress,
|
||||||
|
Pagination,
|
||||||
|
Chip,
|
||||||
|
FormControlLabel,
|
||||||
|
Checkbox,
|
||||||
|
InputAdornment,
|
||||||
|
Tooltip,
|
||||||
|
Divider
|
||||||
|
} from "@mui/material";
|
||||||
|
import {
|
||||||
|
Add as AddIcon,
|
||||||
|
Edit as EditIcon,
|
||||||
|
Delete as DeleteIcon,
|
||||||
|
Settings as SettingsIcon,
|
||||||
|
ArrowBack as ArrowBackIcon,
|
||||||
|
Search as SearchIcon,
|
||||||
|
Close as CloseIcon,
|
||||||
|
PlayArrow as PlayArrowIcon,
|
||||||
|
ViewColumn as ViewColumnIcon,
|
||||||
|
List as ListIcon,
|
||||||
|
MoreVert as MoreVertIcon
|
||||||
|
} from "@mui/icons-material";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
|
import "react-toastify/dist/ReactToastify.css";
|
||||||
|
import ReportSqlBuilderApi from "APIServices/ReportSQLBuilderAPI";
|
||||||
|
import { addSQLReport } from "APIServices/AddReportSQLBuilderAPI";
|
||||||
|
import { UpdateReportSQLBuilder } from "APIServices/UpdateReportSQLBuilderAPI";
|
||||||
|
import { deleteReportSQL } from "APIServices/DeleteReportSQLAPI";
|
||||||
|
import ConfirmModal from "../../common/ConfirmModal";
|
||||||
|
import ReportBuilderService from "../../../APIServices/ReportBuilderService";
|
||||||
|
|
||||||
|
function UserDetailsView() {
|
||||||
|
const [userDetails, setUserDetails] = useState([]);
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [recordsPerPage, setRecordsPerPage] = useState(10);
|
||||||
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
const [showAddModal, setShowAddModal] = useState(false);
|
||||||
|
const [selectedReport, setSelectedReport] = useState(null);
|
||||||
|
const [editData, setEditData] = useState({
|
||||||
|
reportName: "",
|
||||||
|
description: "",
|
||||||
|
active: false,
|
||||||
|
});
|
||||||
|
const [newData, setNewData] = useState({
|
||||||
|
reportName: "",
|
||||||
|
description: "",
|
||||||
|
active: false,
|
||||||
|
isSql: true,
|
||||||
|
Rpt_builder2_lines: [{ model: "" }],
|
||||||
|
});
|
||||||
|
const [showConfirmModal, setShowConfirmModal] = useState(false);
|
||||||
|
const [deleteItem, setDeleteItem] = useState({ index: null, id: null });
|
||||||
|
const [showReportConfigModal, setShowReportConfigModal] = useState(false);
|
||||||
|
const [reportConfigData, setReportConfigData] = useState({
|
||||||
|
conn_name: "",
|
||||||
|
date_param_req: "",
|
||||||
|
std_param_html: "",
|
||||||
|
adhoc_param_html: "",
|
||||||
|
column_str: "",
|
||||||
|
sql_str: "",
|
||||||
|
id: null
|
||||||
|
});
|
||||||
|
const [databaseConnections, setDatabaseConnections] = useState([]);
|
||||||
|
|
||||||
|
const fetchUserDetails = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const data = await ReportSqlBuilderApi.fetchUserDetails();
|
||||||
|
setUserDetails(data);
|
||||||
|
toast.success('Data fetched successfully!');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching user details:', error);
|
||||||
|
toast.error('Failed to fetch user details.');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchUserDetails();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handlePlayClick = () => {
|
||||||
|
if (selectedReport) {
|
||||||
|
goToRunner(selectedReport);
|
||||||
|
} else {
|
||||||
|
toast.error("No report selected to run.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRecordsPerPageChange = (event) => {
|
||||||
|
setRecordsPerPage(parseInt(event.target.value, 10));
|
||||||
|
setCurrentPage(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputChange = (event) => {
|
||||||
|
const { name, value, checked, type } = event.target;
|
||||||
|
const inputValue = type === "checkbox" ? checked : value;
|
||||||
|
|
||||||
|
if (showModal) {
|
||||||
|
setEditData((prev) => ({ ...prev, [name]: inputValue }));
|
||||||
|
} else if (showAddModal) {
|
||||||
|
setNewData((prev) => ({ ...prev, [name]: inputValue }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
try {
|
||||||
|
const updatedReport = await UpdateReportSQLBuilder(editData.id, editData);
|
||||||
|
toast.success("Report Updated successfully..");
|
||||||
|
const updatedDetails = userDetails.map((detail) =>
|
||||||
|
detail.id === editData.id ? { ...detail, ...editData } : detail
|
||||||
|
);
|
||||||
|
setUserDetails(updatedDetails);
|
||||||
|
setShowModal(false);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error updating the report: ", error);
|
||||||
|
toast.error("Failed to update report");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredUsers = userDetails.filter(
|
||||||
|
(item) =>
|
||||||
|
item.reportName &&
|
||||||
|
item.reportName.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
const slicedUsers = filteredUsers.slice(
|
||||||
|
(currentPage - 1) * recordsPerPage,
|
||||||
|
currentPage * recordsPerPage
|
||||||
|
);
|
||||||
|
|
||||||
|
const totalPages = Math.ceil(filteredUsers.length / recordsPerPage);
|
||||||
|
|
||||||
|
const handlePageChange = (event, page) => {
|
||||||
|
setCurrentPage(page);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGoTo = (data) => {
|
||||||
|
const hasReportData = data.rpt_builder2_lines?.some(line => line.model && line.model.trim() !== "");
|
||||||
|
if (hasReportData) {
|
||||||
|
fetchReportConfiguration(data.id, data);
|
||||||
|
} else {
|
||||||
|
navigate("/admin/reportquery", { state: { id: data.id, reportData: data } });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRowClick = (report) => {
|
||||||
|
fetchReportConfiguration(report.id, report);
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchDatabaseConnections = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const response = await ReportBuilderService.getDatabase();
|
||||||
|
if (response && response.data) {
|
||||||
|
setDatabaseConnections(response.data);
|
||||||
|
} else {
|
||||||
|
setDatabaseConnections([]);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching database connections: ", error);
|
||||||
|
toast.error("Failed to load database connections");
|
||||||
|
setDatabaseConnections([]);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchReportConfiguration = async (reportId, report) => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const response = await ReportBuilderService.getrbLineDetailsById(report.rpt_builder2_lines[0].id);
|
||||||
|
await fetchDatabaseConnections();
|
||||||
|
|
||||||
|
if (response && response.data) {
|
||||||
|
let configData = {};
|
||||||
|
try {
|
||||||
|
if (report.Rpt_builder2_lines && report.Rpt_builder2_lines.length > 0) {
|
||||||
|
const modelData = JSON.parse(report.Rpt_builder2_lines[0].model);
|
||||||
|
configData = {
|
||||||
|
conn_name: modelData.conn_name || "",
|
||||||
|
date_param_req: modelData.date_param_req || "",
|
||||||
|
std_param_html: modelData.std_param_html || "",
|
||||||
|
adhoc_param_html: modelData.adhoc_param_html || "",
|
||||||
|
column_str: modelData.column_str || "",
|
||||||
|
sql_str: modelData.sql_str || "",
|
||||||
|
id: report.rpt_builder2_lines[0].id
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
configData = {
|
||||||
|
conn_name: "",
|
||||||
|
date_param_req: "",
|
||||||
|
std_param_html: "",
|
||||||
|
adhoc_param_html: "",
|
||||||
|
column_str: "",
|
||||||
|
sql_str: "",
|
||||||
|
id: report.rpt_builder2_lines[0].id
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error parsing report configuration: ", error);
|
||||||
|
toast.error("Failed to parse report configuration");
|
||||||
|
configData = {
|
||||||
|
conn_name: "",
|
||||||
|
date_param_req: "",
|
||||||
|
std_param_html: "",
|
||||||
|
adhoc_param_html: "",
|
||||||
|
column_str: "",
|
||||||
|
sql_str: "",
|
||||||
|
id: report.rpt_builder2_lines[0].id
|
||||||
|
};
|
||||||
|
}
|
||||||
|
setReportConfigData(configData);
|
||||||
|
setShowReportConfigModal(true);
|
||||||
|
} else {
|
||||||
|
toast.error("No configuration data found for this report");
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching report configuration: ", error);
|
||||||
|
toast.error("Failed to load report configuration");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReportConfigClose = () => {
|
||||||
|
setShowReportConfigModal(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReportConfigChange = (e) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setReportConfigData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[name]: value
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReportConfigUpdate = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const reportData = {
|
||||||
|
conn_name: reportConfigData.conn_name,
|
||||||
|
sql_str: reportConfigData.sql_str,
|
||||||
|
date_param_req: reportConfigData.date_param_req,
|
||||||
|
column_str: reportConfigData.column_str,
|
||||||
|
adhoc_param_html: reportConfigData.adhoc_param_html,
|
||||||
|
std_param_html: reportConfigData.std_param_html,
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveReportData = {
|
||||||
|
header_id: reportConfigData.id,
|
||||||
|
model: JSON.stringify(reportData),
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await ReportBuilderService.updaterbLineData(saveReportData, reportConfigData.id);
|
||||||
|
toast.success("Report configuration updated successfully");
|
||||||
|
setShowReportConfigModal(false);
|
||||||
|
fetchUserDetails();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error updating report configuration: ", error);
|
||||||
|
toast.error("Failed to update report configuration");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async () => {
|
||||||
|
const { id } = deleteItem;
|
||||||
|
if (!id) {
|
||||||
|
toast.error("Invalid ID. Deletion failed.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const deletedReport = await deleteReportSQL(id);
|
||||||
|
toast.success("Report deleted successfully");
|
||||||
|
setUserDetails(userDetails.filter(item => item.id !== id));
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error in deleting report:", error);
|
||||||
|
toast.error("Failed to delete report");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmDelete = (e, index, id, reportName) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setDeleteItem({ index, id, reportName });
|
||||||
|
setShowConfirmModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (detail) => {
|
||||||
|
setEditData(detail);
|
||||||
|
setShowModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setShowModal(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddClose = () => {
|
||||||
|
setShowAddModal(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddSubmit = async () => {
|
||||||
|
try {
|
||||||
|
const addedReport = await addSQLReport(newData);
|
||||||
|
setUserDetails((prevUserDetails) => [...prevUserDetails, addedReport]);
|
||||||
|
setNewData({
|
||||||
|
reportName: "",
|
||||||
|
description: "",
|
||||||
|
active: false,
|
||||||
|
isSql: true
|
||||||
|
});
|
||||||
|
setShowAddModal(false);
|
||||||
|
toast.success("User report added successfully!");
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Failed to add the user report. Please try again.");
|
||||||
|
console.error("Error adding user report: ", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const goToRunner = (report) => {
|
||||||
|
if (!report || typeof report.isSql === "undefined") {
|
||||||
|
console.error("Invalid report object:", report);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (report.isSql) {
|
||||||
|
navigate(`/admin/report-runner/${report.id}`);
|
||||||
|
} else {
|
||||||
|
navigate(`/admin/report-runner2/${report.id}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ p: 4 }}>
|
||||||
|
<Box sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
mb: 4
|
||||||
|
}}>
|
||||||
|
<Typography variant="h4" component="h2">
|
||||||
|
Report Builder (SQL)
|
||||||
|
</Typography>
|
||||||
|
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
startIcon={<PlayArrowIcon />}
|
||||||
|
onClick={() => navigate('/admin/report-runner')}
|
||||||
|
>
|
||||||
|
Report Runner
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
startIcon={<AddIcon />}
|
||||||
|
onClick={() => setShowAddModal(true)}
|
||||||
|
>
|
||||||
|
Add
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 3 }}>
|
||||||
|
<TextField
|
||||||
|
placeholder="Search"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
InputProps={{
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<SearchIcon />
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
endAdornment: searchQuery && (
|
||||||
|
<InputAdornment position="end">
|
||||||
|
<IconButton onClick={() => setSearchQuery("")}>
|
||||||
|
<CloseIcon fontSize="small" />
|
||||||
|
</IconButton>
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
sx={{ width: '50%' }}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
|
||||||
|
<CircularProgress />
|
||||||
|
</Box>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<TableContainer component={Paper} sx={{ mb: 3 }}>
|
||||||
|
<Table>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow sx={{ backgroundColor: 'primary.main' }}>
|
||||||
|
<TableCell sx={{ color: 'white', fontWeight: 'bold' }}>Go To</TableCell>
|
||||||
|
<TableCell sx={{ color: 'white', fontWeight: 'bold' }}>Report Name</TableCell>
|
||||||
|
<TableCell sx={{ color: 'white', fontWeight: 'bold' }}>Description</TableCell>
|
||||||
|
<TableCell sx={{ color: 'white', fontWeight: 'bold' }}>Status</TableCell>
|
||||||
|
<TableCell sx={{ color: 'white', fontWeight: 'bold' }}>Actions</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{slicedUsers.length === 0 ? (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={5} align="center">
|
||||||
|
No records found.
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
) : (
|
||||||
|
slicedUsers.filter((detail) => detail.isSql).map((detail, index) => (
|
||||||
|
<TableRow
|
||||||
|
key={index}
|
||||||
|
hover
|
||||||
|
onClick={() => handleRowClick(detail)}
|
||||||
|
sx={{ cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
<TableCell>
|
||||||
|
<IconButton
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
handleGoTo(detail);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SettingsIcon color="primary" />
|
||||||
|
</IconButton>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{detail.reportName}</TableCell>
|
||||||
|
<TableCell>{detail.description || "No description available"}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Chip
|
||||||
|
label={detail.active ? "Active" : "Inactive"}
|
||||||
|
color={detail.active ? "success" : "error"}
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<IconButton
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
handleEdit(detail);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<EditIcon color="primary" />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
confirmDelete(e, index, detail.id, detail.reportName);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DeleteIcon color="error" />
|
||||||
|
</IconButton>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||||
|
<Typography variant="body2">
|
||||||
|
Rows per page:
|
||||||
|
</Typography>
|
||||||
|
<Select
|
||||||
|
value={recordsPerPage}
|
||||||
|
onChange={handleRecordsPerPageChange}
|
||||||
|
size="small"
|
||||||
|
sx={{ height: '36px' }}
|
||||||
|
>
|
||||||
|
{[5, 10, 25, 50].map((option) => (
|
||||||
|
<MenuItem key={option} value={option}>
|
||||||
|
{option}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</Box>
|
||||||
|
<Pagination
|
||||||
|
count={totalPages}
|
||||||
|
page={currentPage}
|
||||||
|
onChange={handlePageChange}
|
||||||
|
color="primary"
|
||||||
|
showFirstButton
|
||||||
|
showLastButton
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Edit Dialog */}
|
||||||
|
<Dialog open={showModal} onClose={handleClose} maxWidth="sm" fullWidth>
|
||||||
|
<DialogTitle>Edit User Detail</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 2 }}>
|
||||||
|
<TextField
|
||||||
|
label="Report Name"
|
||||||
|
name="reportName"
|
||||||
|
value={editData.reportName || ""}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Description"
|
||||||
|
name="description"
|
||||||
|
value={editData.description || ""}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
fullWidth
|
||||||
|
multiline
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Checkbox
|
||||||
|
name="active"
|
||||||
|
checked={editData.active || false}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="Active"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={handleClose}>Cancel</Button>
|
||||||
|
<Button onClick={handleSubmit} variant="contained">Save Changes</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Add Dialog */}
|
||||||
|
<Dialog open={showAddModal} onClose={handleAddClose} maxWidth="sm" fullWidth>
|
||||||
|
<DialogTitle>Add New User Detail</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 2 }}>
|
||||||
|
<TextField
|
||||||
|
label="Report Name"
|
||||||
|
name="reportName"
|
||||||
|
value={newData.reportName}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
fullWidth
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Description"
|
||||||
|
name="description"
|
||||||
|
value={newData.description}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
fullWidth
|
||||||
|
multiline
|
||||||
|
rows={3}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Checkbox
|
||||||
|
name="active"
|
||||||
|
checked={newData.active}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="Active"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={handleAddClose}>Cancel</Button>
|
||||||
|
<Button onClick={handleAddSubmit} variant="contained">Add User Detail</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Confirmation Dialog */}
|
||||||
|
<ConfirmModal
|
||||||
|
open={showConfirmModal}
|
||||||
|
onClose={() => setShowConfirmModal(false)}
|
||||||
|
onConfirm={handleDelete}
|
||||||
|
title="Confirm Deletion"
|
||||||
|
message={`Are you sure you want to delete "${deleteItem.reportName || 'this report'}"? This action cannot be undone.`}
|
||||||
|
confirmText="Delete"
|
||||||
|
cancelText="Cancel"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Report Configuration Dialog */}
|
||||||
|
<Dialog open={showReportConfigModal} onClose={handleReportConfigClose} maxWidth="md" fullWidth>
|
||||||
|
<DialogTitle>Report Configuration</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, mt: 2 }}>
|
||||||
|
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||||
|
<Select
|
||||||
|
label="Connection Name"
|
||||||
|
name="conn_name"
|
||||||
|
value={reportConfigData.conn_name}
|
||||||
|
onChange={handleReportConfigChange}
|
||||||
|
fullWidth
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
>
|
||||||
|
<MenuItem value="">Select Database Connection</MenuItem>
|
||||||
|
{databaseConnections.map((db, index) => (
|
||||||
|
<MenuItem key={index} value={db.name}>
|
||||||
|
{db.name}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
<Select
|
||||||
|
label="Date Parameter Required"
|
||||||
|
name="date_param_req"
|
||||||
|
value={reportConfigData.date_param_req}
|
||||||
|
onChange={handleReportConfigChange}
|
||||||
|
fullWidth
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
>
|
||||||
|
<MenuItem value="">Select Option</MenuItem>
|
||||||
|
<MenuItem value="Yes">Yes</MenuItem>
|
||||||
|
<MenuItem value="No">No</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
label="SQL String"
|
||||||
|
name="sql_str"
|
||||||
|
value={reportConfigData.sql_str}
|
||||||
|
onChange={handleReportConfigChange}
|
||||||
|
fullWidth
|
||||||
|
multiline
|
||||||
|
rows={5}
|
||||||
|
sx={{ fontFamily: 'monospace' }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
label="Column String (html)"
|
||||||
|
name="column_str"
|
||||||
|
value={reportConfigData.column_str}
|
||||||
|
onChange={handleReportConfigChange}
|
||||||
|
fullWidth
|
||||||
|
multiline
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||||
|
<TextField
|
||||||
|
label="Standard Parameter String (html)"
|
||||||
|
name="std_param_html"
|
||||||
|
value={reportConfigData.std_param_html}
|
||||||
|
onChange={handleReportConfigChange}
|
||||||
|
fullWidth
|
||||||
|
multiline
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Adhoc Parameter String (html)"
|
||||||
|
name="adhoc_param_html"
|
||||||
|
value={reportConfigData.adhoc_param_html}
|
||||||
|
onChange={handleReportConfigChange}
|
||||||
|
fullWidth
|
||||||
|
multiline
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={handleReportConfigClose}>Cancel</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleReportConfigUpdate}
|
||||||
|
variant="contained"
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? <CircularProgress size={24} /> : 'Update Configuration'}
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default UserDetailsView;
|
||||||
212
src/components/Dashboard/reports/reportrunnerall.js
Normal file
212
src/components/Dashboard/reports/reportrunnerall.js
Normal file
@@ -0,0 +1,212 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
|
import "react-toastify/dist/ReactToastify.css";
|
||||||
|
import { fetchAllReportsApi } from '../../../APIServices/ReportRunnerAPI';
|
||||||
|
|
||||||
|
const ReportRunnerAll = () => {
|
||||||
|
const [gridData, setGridData] = useState([]);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [rowSelected, setRowSelected] = useState(null);
|
||||||
|
const [modalDelete, setModalDelete] = useState(false);
|
||||||
|
const [reports, setReports] = useState([]);
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchAllReports();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const fetchAllReports = async () => {
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
const data = await fetchAllReportsApi();
|
||||||
|
console.log("Fetched all reports:", data);
|
||||||
|
|
||||||
|
setGridData(data);
|
||||||
|
setReports(data);
|
||||||
|
|
||||||
|
if (data.length === 0) {
|
||||||
|
setError("No data available");
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error while fetching reports:", error);
|
||||||
|
setError("Error fetching data.");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const goToAdd = () => navigate("/admin/user-report");
|
||||||
|
const goToAdd2 = () => navigate("/admin/reportbuild2all");
|
||||||
|
|
||||||
|
const goToRunner = (report) => {
|
||||||
|
console.log("at time of navigating reportID: ",report.id, " report: ",report);
|
||||||
|
if (report.isSql) {
|
||||||
|
navigate(`/admin/report-runner1/${report.id}`,{ state: { reportId: report.id, reportData: report}});
|
||||||
|
} else {
|
||||||
|
navigate(`/admin/report-runner2/${report.id}`,{ state: { reportId: report.id, reportData: report}});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (id) => {
|
||||||
|
setModalDelete(false);
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/report-builder/${id}`, { method: "DELETE" });
|
||||||
|
if (response.ok) {
|
||||||
|
toast.success("Deleted successfully");
|
||||||
|
fetchAllReports();
|
||||||
|
} else {
|
||||||
|
toast.error("Error deleting data.");
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
toast.error("Error deleting data.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const openDeleteModal = (row) => {
|
||||||
|
setRowSelected(row);
|
||||||
|
setModalDelete(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container-fluid p-4">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="d-flex justify-content-between align-items-center mb-4">
|
||||||
|
<h3 className="m-0"><strong>All Reports</strong></h3>
|
||||||
|
<div>
|
||||||
|
<button className="btn btn-primary me-2" onClick={goToAdd}>
|
||||||
|
<i className="bi bi-plus me-1"></i> Report Builder SQL
|
||||||
|
</button>
|
||||||
|
<button className="btn btn-primary" onClick={goToAdd2}>
|
||||||
|
<i className="bi bi-plus me-1"></i> Report Builder URL
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Loading Spinner */}
|
||||||
|
{isLoading && (
|
||||||
|
<div className="alert alert-info d-flex align-items-center mt-3">
|
||||||
|
<div className="spinner-border me-2" role="status"></div>
|
||||||
|
Loading...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Report Cards */}
|
||||||
|
{!isLoading && gridData.length > 0 && (
|
||||||
|
<div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-4">
|
||||||
|
{gridData.map((report, index) => (
|
||||||
|
<div className="col" key={index}>
|
||||||
|
<div
|
||||||
|
className="card h-100 shadow-sm border-0"
|
||||||
|
onClick={() => goToRunner(report)}
|
||||||
|
style={{ cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
{/* Card Header */}
|
||||||
|
<div
|
||||||
|
className={`card-header d-flex justify-content-between align-items-center ${report.isSql ? 'bg-primary bg-opacity-10' : 'bg-warning bg-opacity-10'}`}
|
||||||
|
>
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
<div className={`me-2 p-2 rounded ${report.isSql ? 'bg-primary bg-opacity-25' : 'bg-warning bg-opacity-25'}`}>
|
||||||
|
<i className={`bi ${report.isSql ? 'bi-database' : 'bi-link-45deg'} ${report.isSql ? 'text-primary' : 'text-warning'}`}></i>
|
||||||
|
</div>
|
||||||
|
<span className={`fw-semibold ${report.isSql ? 'text-primary' : 'text-warning'}`}>
|
||||||
|
{report.isSql == null ? "N/A" : report.isSql ? "SQL Report" : "URL Report"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span className={`badge ${report.active ? 'bg-success' : 'bg-danger'}`}>
|
||||||
|
{report.active ? "Active" : "Inactive"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card Body */}
|
||||||
|
<div className="card-body">
|
||||||
|
<h5 className="card-title fw-bold text-truncate" title={report.reportName}>
|
||||||
|
{report.reportName}
|
||||||
|
</h5>
|
||||||
|
<p
|
||||||
|
className="card-text text-muted"
|
||||||
|
style={{
|
||||||
|
display: '-webkit-box',
|
||||||
|
WebkitLineClamp: '2',
|
||||||
|
WebkitBoxOrient: 'vertical',
|
||||||
|
overflow: 'hidden',
|
||||||
|
height: '42px'
|
||||||
|
}}
|
||||||
|
title={report.description}
|
||||||
|
>
|
||||||
|
{report.description || "No description available"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card Footer */}
|
||||||
|
<div className="card-footer bg-light">
|
||||||
|
<div className="d-flex justify-content-between align-items-center">
|
||||||
|
<small className="text-muted">
|
||||||
|
<i className="bi bi-clock me-1"></i>
|
||||||
|
Updated: {new Date(report.updatedAt).toLocaleDateString()}
|
||||||
|
</small>
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-outline-secondary"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
openDeleteModal(report);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i className="bi bi-three-dots"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Error */}
|
||||||
|
{error && <div className="alert alert-danger mt-3">{error}</div>}
|
||||||
|
|
||||||
|
{/* Delete Modal */}
|
||||||
|
{modalDelete && (
|
||||||
|
<div className="modal show d-block" tabIndex="-1" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||||||
|
<div className="modal-dialog">
|
||||||
|
<div className="modal-content">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h5 className="modal-title">Delete Confirmation</h5>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn-close"
|
||||||
|
onClick={() => setModalDelete(false)}
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<p>Are you sure you want to delete the report?</p>
|
||||||
|
<h6>{rowSelected?.reportName}</h6>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-secondary"
|
||||||
|
onClick={() => setModalDelete(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-danger"
|
||||||
|
onClick={() => handleDelete(rowSelected.id)}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ReportRunnerAll;
|
||||||
@@ -1,100 +1,118 @@
|
|||||||
/* sidebar.css */
|
/* sidebar.css */
|
||||||
|
|
||||||
/* Common styles */
|
/* Common styles */
|
||||||
.sidebar {
|
.sidebar {
|
||||||
width: 250px; /* Initial width */
|
width: 250px; /* Initial width */
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #778184;
|
background-color: #778184;
|
||||||
color: #0e0e0e;
|
color: #0e0e0e;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
transition: width 0.3s;
|
transition: width 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar.collapsed {
|
.sidebar.collapsed {
|
||||||
width: 60px; /* Collapsed width */
|
width: 60px; /* Collapsed width */
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar .navbar {
|
.sidebar .navbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background-color: #5f6265;
|
background-color: #5f6265;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar .navbar button {
|
.sidebar .navbar button {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar ul {
|
.sidebar ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar li {
|
.sidebar li {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar li:hover {
|
.sidebar li:hover {
|
||||||
background-color: #555;
|
background-color: #555;
|
||||||
}
|
}
|
||||||
|
/* For the main content adjustment */
|
||||||
/* Responsive styles */
|
.main-content {
|
||||||
@media (max-width: 768px) {
|
margin-left: 220px;
|
||||||
.sidebar {
|
transition: margin-left 0.3s ease;
|
||||||
width: 60px; /* Collapsed width for smaller screens */
|
}
|
||||||
}
|
|
||||||
|
.main-content.sidebar-collapsed {
|
||||||
.sidebar.collapsed {
|
margin-left: 60px;
|
||||||
width: 60px; /* Ensure sidebar stays collapsed on smaller screens */
|
}
|
||||||
}
|
|
||||||
|
/* Active menu item style */
|
||||||
.sidebar .navbar h2 {
|
.Mui-selected {
|
||||||
display: none; /* Hide the sidebar title on smaller screens */
|
background-color: #5e72e4 !important;
|
||||||
}
|
color: white !important;
|
||||||
|
}
|
||||||
.sidebar .navbar button {
|
|
||||||
font-size: 1.2em; /* Reduce button size on smaller screens */
|
.Mui-selected:hover {
|
||||||
}
|
background-color: #233dd2 !important;
|
||||||
|
}
|
||||||
.sidebar li {
|
/* Responsive styles */
|
||||||
padding: 8px; /* Reduce padding for menu items on smaller screens */
|
@media (max-width: 768px) {
|
||||||
}
|
.sidebar {
|
||||||
|
width: 60px; /* Collapsed width for smaller screens */
|
||||||
.sidebar ul {
|
}
|
||||||
padding-left: 0; /* Remove left padding for nested UL on smaller screens */
|
|
||||||
}
|
.sidebar.collapsed {
|
||||||
|
width: 60px; /* Ensure sidebar stays collapsed on smaller screens */
|
||||||
.sidebar li div {
|
}
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
.sidebar .navbar h2 {
|
||||||
justify-content: space-between;
|
display: none; /* Hide the sidebar title on smaller screens */
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar li div svg {
|
.sidebar .navbar button {
|
||||||
display: none; /* Hide submenu toggle icons on smaller screens */
|
font-size: 1.2em; /* Reduce button size on smaller screens */
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar li div .submenu-icon {
|
.sidebar li {
|
||||||
display: inline-block; /* Show submenu toggle icon as inline-block */
|
padding: 8px; /* Reduce padding for menu items on smaller screens */
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar li div .submenu-icon svg {
|
.sidebar ul {
|
||||||
margin-left: 5px; /* Add margin to submenu toggle icon */
|
padding-left: 0; /* Remove left padding for nested UL on smaller screens */
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar ul ul {
|
.sidebar li div {
|
||||||
display: none; /* Hide submenus by default on smaller screens */
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
.sidebar ul ul.active {
|
}
|
||||||
display: block; /* Show active submenus on smaller screens */
|
|
||||||
}
|
.sidebar li div svg {
|
||||||
}
|
display: none; /* Hide submenu toggle icons on smaller screens */
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar li div .submenu-icon {
|
||||||
|
display: inline-block; /* Show submenu toggle icon as inline-block */
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar li div .submenu-icon svg {
|
||||||
|
margin-left: 5px; /* Add margin to submenu toggle icon */
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar ul ul {
|
||||||
|
display: none; /* Hide submenus by default on smaller screens */
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar ul ul.active {
|
||||||
|
display: block; /* Show active submenus on smaller screens */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,119 +1,193 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useState } from 'react';
|
||||||
import { FiChevronRight, FiChevronDown, FiSettings } from "react-icons/fi";
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { Link } from "react-router-dom";
|
import {
|
||||||
import { FaChevronRight as FaChevronRightIcon } from "react-icons/fa";
|
Box,
|
||||||
|
Divider,
|
||||||
const Sidebar = ({ menus, handleMenuItemClick, collapsed }) => {
|
Drawer,
|
||||||
const [isOpen, setIsOpen] = useState(true);
|
IconButton,
|
||||||
const [openSubmenu, setOpenSubmenu] = useState(null);
|
List,
|
||||||
const [menuItems, setMenuItems] = useState([]);
|
ListItem,
|
||||||
|
ListItemButton,
|
||||||
useEffect(() => {
|
ListItemIcon,
|
||||||
const fetchMenuItems = async () => {
|
ListItemText,
|
||||||
const token = localStorage.getItem("authToken");
|
styled,
|
||||||
try {
|
Collapse,
|
||||||
const res = await fetch(
|
useTheme
|
||||||
`${process.env.REACT_APP_API_BASE_URL}/fndMenu/menuloadbyuser`,
|
} from '@mui/material';
|
||||||
{
|
import {
|
||||||
headers: {
|
ChevronLeft,
|
||||||
Authorization: `Bearer ${token}`,
|
ChevronRight,
|
||||||
},
|
ExpandMore,
|
||||||
}
|
ExpandLess,
|
||||||
);
|
Description as DescriptionIcon,
|
||||||
const data = await res.json();
|
Error as ErrorIcon,
|
||||||
setMenuItems(data);
|
Storage as StorageIcon,
|
||||||
console.log("Fetched Menu Data:", data);
|
SwapHoriz as SwapHorizIcon
|
||||||
} catch (error) {
|
} from '@mui/icons-material';
|
||||||
console.error("Error fetching menu items:", error);
|
|
||||||
}
|
const drawerWidth = 220;
|
||||||
};
|
const collapsedWidth = 60;
|
||||||
|
|
||||||
fetchMenuItems();
|
const Sidebar = ({ onSidebarToggle }) => {
|
||||||
}, []);
|
const theme = useTheme();
|
||||||
|
const [collapsed, setCollapsed] = useState(true);
|
||||||
const handleToggle = () => setIsOpen(!isOpen);
|
const [openTransaction, setOpenTransaction] = useState(false);
|
||||||
const handleSubmenuToggle = (menu) => {
|
const navigate = useNavigate();
|
||||||
setOpenSubmenu(openSubmenu === menu ? null : menu);
|
|
||||||
};
|
const handleToggle = () => {
|
||||||
|
setCollapsed(!collapsed);
|
||||||
return (
|
if (onSidebarToggle) {
|
||||||
<div
|
onSidebarToggle(!collapsed);
|
||||||
className={`flex flex-col h-screen bg-gray-100 text-black ${isOpen ? "w-64" : "w-20"
|
}
|
||||||
} transition-all duration-300`}
|
};
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between p-4">
|
const handleTransactionToggle = () => {
|
||||||
{isOpen ? (
|
setOpenTransaction(!openTransaction);
|
||||||
<span className="text-lg font-bold">Menu</span>
|
};
|
||||||
) : (
|
|
||||||
<FiSettings
|
const DrawerHeader = styled('div')(({ theme }) => ({
|
||||||
className="text-2xl cursor-pointer"
|
display: 'flex',
|
||||||
onClick={handleToggle}
|
alignItems: 'center',
|
||||||
/>
|
justifyContent: 'flex-end',
|
||||||
)}
|
padding: theme.spacing(0, 1),
|
||||||
<button onClick={handleToggle}>
|
...theme.mixins.toolbar,
|
||||||
<svg
|
}));
|
||||||
className="w-6 h-6"
|
|
||||||
fill="none"
|
return (
|
||||||
stroke="currentColor"
|
<>
|
||||||
viewBox="0 0 24 24"
|
<Drawer
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
variant="permanent"
|
||||||
>
|
sx={{
|
||||||
<path
|
width: collapsed ? collapsedWidth : drawerWidth,
|
||||||
strokeLinecap="round"
|
flexShrink: 0,
|
||||||
strokeLinejoin="round"
|
'& .MuiDrawer-paper': {
|
||||||
strokeWidth="2"
|
width: collapsed ? collapsedWidth : drawerWidth,
|
||||||
d="M4 6h16M4 12h16m-7 6h7"
|
boxSizing: 'border-box',
|
||||||
></path>
|
backgroundColor: theme.palette.grey[200], // Consistent with theme
|
||||||
</svg>
|
borderRight: '1px solid rgba(0, 0, 0, 0.12)',
|
||||||
</button>
|
transition: theme.transitions.create('width', {
|
||||||
</div>
|
easing: theme.transitions.easing.sharp,
|
||||||
{isOpen && (
|
duration: theme.transitions.duration.enteringScreen,
|
||||||
<nav className="flex flex-col mt-4">
|
}),
|
||||||
{menuItems.map((item) => (
|
overflowX: 'hidden',
|
||||||
<div key={item.id} className="relative">
|
height: '100vh',
|
||||||
<button
|
position: 'relative'
|
||||||
className="flex items-center p-4 hover:bg-gray-300 w-full text-left"
|
},
|
||||||
onClick={() => handleSubmenuToggle(item.id)}
|
}}
|
||||||
>
|
>
|
||||||
{item.icon && <item.icon className="w-6 h-6 mr-2" />}
|
<DrawerHeader>
|
||||||
<span>{item.menuItemDesc}</span>
|
<IconButton onClick={handleToggle} size="small">
|
||||||
{!collapsed && (
|
{collapsed ? <ChevronRight /> : <ChevronLeft />}
|
||||||
<FaChevronRightIcon className="w-4 h-4 opacity-0 group-hover:opacity-100 transform group-hover:translate-x-1 transition-all duration-200" />
|
</IconButton>
|
||||||
)}
|
</DrawerHeader>
|
||||||
</button>
|
<Divider />
|
||||||
{/*
|
<List>
|
||||||
<Link to={`${subItem.menuItemDesc}`} ><span className="ml-4">{subItem.menuItemDesc}</span> </Link>
|
{/* Transaction with submenus */}
|
||||||
*/}
|
<ListItem disablePadding>
|
||||||
{item.subMenus && openSubmenu === item.id && (
|
<ListItemButton
|
||||||
<ul className="pl-8 bg-gray-200">
|
onClick={handleTransactionToggle}
|
||||||
{item.subMenus.map((subItem) => (
|
sx={{
|
||||||
<Link to={`/${subItem.menuItemDesc}`} style={{ textDecoration: 'none', }}>
|
minHeight: 48,
|
||||||
<li
|
justifyContent: collapsed ? 'center' : 'initial',
|
||||||
key={subItem.id}
|
px: 2.5,
|
||||||
className="flex items-center p-2 hover:bg-gray-300"
|
'&:hover': {
|
||||||
>
|
backgroundColor: 'rgba(0, 0, 0, 0.04)'
|
||||||
<span className="ml-4">{subItem.menuItemDesc}</span>
|
}
|
||||||
|
}}
|
||||||
{subItem.subMenus && (
|
>
|
||||||
<div className="ml-auto">
|
<ListItemIcon
|
||||||
{openSubmenu === subItem.id ? (
|
sx={{
|
||||||
<FiChevronDown />
|
minWidth: 0,
|
||||||
) : (
|
mr: collapsed ? 'auto' : 3,
|
||||||
<FiChevronRight />
|
justifyContent: 'center',
|
||||||
)}
|
color: 'inherit'
|
||||||
</div>
|
}}
|
||||||
)}
|
>
|
||||||
</li>
|
<SwapHorizIcon />
|
||||||
</Link>
|
</ListItemIcon>
|
||||||
))}
|
{!collapsed && (
|
||||||
</ul>
|
<>
|
||||||
)}
|
<ListItemText primary="Transaction" />
|
||||||
</div>
|
{openTransaction ? <ExpandLess /> : <ExpandMore />}
|
||||||
))}
|
</>
|
||||||
</nav>
|
)}
|
||||||
)}
|
</ListItemButton>
|
||||||
</div>
|
</ListItem>
|
||||||
);
|
|
||||||
};
|
{!collapsed && (
|
||||||
|
<Collapse in={openTransaction} timeout="auto" unmountOnExit>
|
||||||
export default Sidebar;
|
<List component="div" disablePadding sx={{ backgroundColor: 'rgba(0, 0, 0, 0.02)' }}>
|
||||||
|
<ListItemButton
|
||||||
|
sx={{ pl: 4 }}
|
||||||
|
onClick={() => navigate('/admin/regform')}
|
||||||
|
>
|
||||||
|
<ListItemIcon sx={{ minWidth: 0, mr: 3, justifyContent: 'center' }}>
|
||||||
|
<DescriptionIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary="Regform" />
|
||||||
|
</ListItemButton>
|
||||||
|
<ListItemButton
|
||||||
|
sx={{ pl: 4 }}
|
||||||
|
onClick={() => navigate('/admin/error404')}
|
||||||
|
>
|
||||||
|
<ListItemIcon sx={{ minWidth: 0, mr: 3, justifyContent: 'center' }}>
|
||||||
|
<ErrorIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary="Additional container" />
|
||||||
|
</ListItemButton>
|
||||||
|
</List>
|
||||||
|
</Collapse>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Masters (single item) */}
|
||||||
|
<ListItem disablePadding>
|
||||||
|
<ListItemButton
|
||||||
|
onClick={() => navigate('/admin/masters')}
|
||||||
|
sx={{
|
||||||
|
minHeight: 48,
|
||||||
|
justifyContent: collapsed ? 'center' : 'initial',
|
||||||
|
px: 2.5,
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.04)'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ListItemIcon
|
||||||
|
sx={{
|
||||||
|
minWidth: 0,
|
||||||
|
mr: collapsed ? 'auto' : 3,
|
||||||
|
justifyContent: 'center',
|
||||||
|
color: 'inherit'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<StorageIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
{!collapsed && (
|
||||||
|
<ListItemText primary="Masters" />
|
||||||
|
)}
|
||||||
|
</ListItemButton>
|
||||||
|
</ListItem>
|
||||||
|
</List>
|
||||||
|
</Drawer>
|
||||||
|
|
||||||
|
{/* Main content spacer */}
|
||||||
|
<Box
|
||||||
|
component="main"
|
||||||
|
sx={{
|
||||||
|
flexGrow: 1,
|
||||||
|
p: 3,
|
||||||
|
width: `calc(100% - ${collapsed ? collapsedWidth : drawerWidth}px)`,
|
||||||
|
marginLeft: `${collapsed ? collapsedWidth : drawerWidth}px`,
|
||||||
|
transition: theme.transitions.create(['width', 'margin'], {
|
||||||
|
easing: theme.transitions.easing.sharp,
|
||||||
|
duration: theme.transitions.duration.leavingScreen,
|
||||||
|
}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Your main content goes here */}
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Sidebar;
|
||||||
308
src/components/Dashboard/sub menu/submenumaintanence.js
Normal file
308
src/components/Dashboard/sub menu/submenumaintanence.js
Normal file
@@ -0,0 +1,308 @@
|
|||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { useParams } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
getSubmenuItems,
|
||||||
|
addSubmenuItem,
|
||||||
|
updateSubmenuItem,
|
||||||
|
deleteSubmenuItem
|
||||||
|
} from '../../../ApiServices/menumaintananceapi';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableContainer,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
Paper,
|
||||||
|
Button,
|
||||||
|
TextField,
|
||||||
|
Dialog,
|
||||||
|
DialogActions,
|
||||||
|
DialogContent,
|
||||||
|
DialogTitle,
|
||||||
|
MenuItem,
|
||||||
|
Select,
|
||||||
|
IconButton,
|
||||||
|
Typography,
|
||||||
|
Box,
|
||||||
|
CircularProgress
|
||||||
|
} from "@mui/material";
|
||||||
|
import {
|
||||||
|
Add as AddIcon,
|
||||||
|
Edit as EditIcon,
|
||||||
|
Delete as DeleteIcon,
|
||||||
|
MoreVert as MoreVertIcon
|
||||||
|
} from "@mui/icons-material";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
|
|
||||||
|
const SubMenuMaintenance = () => {
|
||||||
|
const { menuItemId } = useParams();
|
||||||
|
const [subMenus, setSubMenus] = useState([]);
|
||||||
|
const [showAddModal, setShowAddModal] = useState(false);
|
||||||
|
const [showEditModal, setShowEditModal] = useState(false);
|
||||||
|
const [currentItem, setCurrentItem] = useState({
|
||||||
|
menuItemId: "",
|
||||||
|
menuItemDesc: "",
|
||||||
|
itemSeq: "",
|
||||||
|
moduleName: "",
|
||||||
|
main_menu_action_name: "#",
|
||||||
|
status: "Enable",
|
||||||
|
main_menu_icon_name: "fa-circle"
|
||||||
|
});
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchSubMenus();
|
||||||
|
}, [menuItemId]);
|
||||||
|
|
||||||
|
const fetchSubMenus = async () => {
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
const data = await getSubmenuItems(menuItemId);
|
||||||
|
setSubMenus(data);
|
||||||
|
} catch (err) {
|
||||||
|
toast.error("Failed to fetch submenu items");
|
||||||
|
console.error(err);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAdd = async () => {
|
||||||
|
try {
|
||||||
|
const addedItem = await addSubmenuItem(menuItemId, currentItem);
|
||||||
|
setSubMenus([...subMenus, addedItem]);
|
||||||
|
resetForm();
|
||||||
|
setShowAddModal(false);
|
||||||
|
toast.success("Submenu added successfully!");
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(err.message || "Failed to add submenu");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (item) => {
|
||||||
|
setCurrentItem({
|
||||||
|
...item,
|
||||||
|
status: item.status ? "Enable" : "Disable"
|
||||||
|
});
|
||||||
|
setShowEditModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdate = async () => {
|
||||||
|
try {
|
||||||
|
const updatedItem = await updateSubmenuItem(currentItem.menuItemId, currentItem);
|
||||||
|
setSubMenus(subMenus.map(item =>
|
||||||
|
item.menuItemId === updatedItem.menuItemId ? updatedItem : item
|
||||||
|
));
|
||||||
|
resetForm();
|
||||||
|
setShowEditModal(false);
|
||||||
|
toast.success("Submenu updated successfully!");
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(err.message || "Failed to update submenu");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (id) => {
|
||||||
|
if (window.confirm("Are you sure you want to delete this submenu?")) {
|
||||||
|
try {
|
||||||
|
await deleteSubmenuItem(id);
|
||||||
|
setSubMenus(subMenus.filter(item => item.menuItemId !== id));
|
||||||
|
toast.success("Submenu deleted successfully!");
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(err.message || "Failed to delete submenu");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
setCurrentItem({
|
||||||
|
menuItemId: "",
|
||||||
|
menuItemDesc: "",
|
||||||
|
itemSeq: "",
|
||||||
|
moduleName: "",
|
||||||
|
main_menu_action_name: "#",
|
||||||
|
status: "Enable",
|
||||||
|
main_menu_icon_name: "fa-circle"
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ p: 4 }}>
|
||||||
|
<Box sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
mb: 4
|
||||||
|
}}>
|
||||||
|
<Typography variant="h4" component="h2">
|
||||||
|
Sub-Menus for Menu ID: {menuItemId}
|
||||||
|
</Typography>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
startIcon={<AddIcon />}
|
||||||
|
onClick={() => setShowAddModal(true)}
|
||||||
|
>
|
||||||
|
ADD NEW
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<TableContainer component={Paper}>
|
||||||
|
<Table>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>No.</TableCell>
|
||||||
|
<TableCell>Sub-Menu Item Name</TableCell>
|
||||||
|
<TableCell>ID</TableCell>
|
||||||
|
<TableCell>Sequence</TableCell>
|
||||||
|
<TableCell>Module Name</TableCell>
|
||||||
|
<TableCell>Menu Action Link</TableCell>
|
||||||
|
<TableCell>Status</TableCell>
|
||||||
|
<TableCell>Actions</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{isLoading ? (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={8} align="center">
|
||||||
|
<CircularProgress />
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
) : subMenus.length === 0 ? (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={8} align="center">
|
||||||
|
No submenus found
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
) : (
|
||||||
|
subMenus.map((item, index) => (
|
||||||
|
<TableRow key={item.menuItemId}>
|
||||||
|
<TableCell>{index + 1}</TableCell>
|
||||||
|
<TableCell>{item.menuItemDesc}</TableCell>
|
||||||
|
<TableCell>{item.menuItemId}</TableCell>
|
||||||
|
<TableCell>{item.itemSeq}</TableCell>
|
||||||
|
<TableCell>{item.moduleName}</TableCell>
|
||||||
|
<TableCell>{item.main_menu_action_name}</TableCell>
|
||||||
|
<TableCell>{item.status ? "Enable" : "Disable"}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<IconButton onClick={() => handleEdit(item)}>
|
||||||
|
<EditIcon />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton onClick={() => handleDelete(item.menuItemId)}>
|
||||||
|
<DeleteIcon color="error" />
|
||||||
|
</IconButton>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
|
||||||
|
{/* Add Submenu Modal */}
|
||||||
|
<Dialog open={showAddModal} onClose={() => setShowAddModal(false)}>
|
||||||
|
<DialogTitle>Add Submenu</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 1 }}>
|
||||||
|
<TextField
|
||||||
|
label="Sub-Menu Item Name"
|
||||||
|
value={currentItem.menuItemDesc}
|
||||||
|
onChange={(e) => setCurrentItem({...currentItem, menuItemDesc: e.target.value})}
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
margin="normal"
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Sequence"
|
||||||
|
type="number"
|
||||||
|
value={currentItem.itemSeq}
|
||||||
|
onChange={(e) => setCurrentItem({...currentItem, itemSeq: e.target.value})}
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
margin="normal"
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Module Name"
|
||||||
|
value={currentItem.moduleName}
|
||||||
|
onChange={(e) => setCurrentItem({...currentItem, moduleName: e.target.value})}
|
||||||
|
fullWidth
|
||||||
|
margin="normal"
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Menu Action Link"
|
||||||
|
value={currentItem.main_menu_action_name}
|
||||||
|
onChange={(e) => setCurrentItem({...currentItem, main_menu_action_name: e.target.value})}
|
||||||
|
fullWidth
|
||||||
|
margin="normal"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={() => setShowAddModal(false)}>CANCEL</Button>
|
||||||
|
<Button onClick={handleAdd} variant="contained">ADD</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Edit Submenu Modal */}
|
||||||
|
<Dialog open={showEditModal} onClose={() => setShowEditModal(false)}>
|
||||||
|
<DialogTitle>Update Sub Menu Maintenance</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 1 }}>
|
||||||
|
<TextField
|
||||||
|
label="Menu ID"
|
||||||
|
value={menuItemId}
|
||||||
|
disabled
|
||||||
|
fullWidth
|
||||||
|
margin="normal"
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Menu Item Name"
|
||||||
|
value={currentItem.menuItemDesc}
|
||||||
|
onChange={(e) => setCurrentItem({...currentItem, menuItemDesc: e.target.value})}
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
margin="normal"
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Sequence"
|
||||||
|
type="number"
|
||||||
|
value={currentItem.itemSeq}
|
||||||
|
onChange={(e) => setCurrentItem({...currentItem, itemSeq: e.target.value})}
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
margin="normal"
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Module Name"
|
||||||
|
value={currentItem.moduleName}
|
||||||
|
onChange={(e) => setCurrentItem({...currentItem, moduleName: e.target.value})}
|
||||||
|
fullWidth
|
||||||
|
margin="normal"
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Menu Action Link"
|
||||||
|
value={currentItem.main_menu_action_name}
|
||||||
|
onChange={(e) => setCurrentItem({...currentItem, main_menu_action_name: e.target.value})}
|
||||||
|
fullWidth
|
||||||
|
margin="normal"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
value={currentItem.status}
|
||||||
|
onChange={(e) => setCurrentItem({...currentItem, status: e.target.value})}
|
||||||
|
fullWidth
|
||||||
|
margin="dense"
|
||||||
|
>
|
||||||
|
<MenuItem value="Enable">Enable</MenuItem>
|
||||||
|
<MenuItem value="Disable">Disable</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</Box>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={() => setShowEditModal(false)}>CANCEL</Button>
|
||||||
|
<Button onClick={handleUpdate} variant="contained">UPDATE</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SubMenuMaintenance;
|
||||||
@@ -1,335 +1,111 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { Eye, EyeOff, User, Lock, Mail, Camera, UserPlus, ArrowLeft, Check } from 'lucide-react';
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { AccountCircle, Visibility, VisibilityOff } from '@mui/icons-material';
|
||||||
// Mock navigation function for demo
|
import './Login.css'; // Import CSS file for custom styling
|
||||||
const mockNavigate = (path) => {
|
|
||||||
console.log(`Navigating to: ${path}`);
|
const CreateAccountPage = () => {
|
||||||
alert(`Would navigate to: ${path}`);
|
const [email, setEmail] = useState('');
|
||||||
};
|
const [password, setPassword] = useState('');
|
||||||
|
const [reEnterPassword, setReEnterPassword] = useState('');
|
||||||
const CreateAccountPage = () => {
|
const [avatarImage, setAvatarImage] = useState(null);
|
||||||
const [email, setEmail] = useState('');
|
const navigate = useNavigate();
|
||||||
const [password, setPassword] = useState('');
|
|
||||||
const [reEnterPassword, setReEnterPassword] = useState('');
|
const handleCreateAccount = (e) => {
|
||||||
const [avatarImage, setAvatarImage] = useState(null);
|
e.preventDefault();
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
// Your create account logic here
|
||||||
const [showReEnterPassword, setShowReEnterPassword] = useState(false);
|
};
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
const [mounted, setMounted] = useState(false);
|
const handleAvatarChange = (e) => {
|
||||||
const [errorMessage, setErrorMessage] = useState('');
|
const file = e.target.files[0];
|
||||||
const [passwordStrength, setPasswordStrength] = useState(0);
|
if (file) {
|
||||||
|
const reader = new FileReader();
|
||||||
useEffect(() => {
|
reader.onload = () => {
|
||||||
setMounted(true);
|
setAvatarImage(reader.result);
|
||||||
}, []);
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
useEffect(() => {
|
}
|
||||||
// Calculate password strength
|
};
|
||||||
let strength = 0;
|
|
||||||
if (password.length >= 8) strength++;
|
return (
|
||||||
if (/[A-Z]/.test(password)) strength++;
|
<div className="relative min-h-screen flex items-center justify-center bg-gray-800">
|
||||||
if (/[0-9]/.test(password)) strength++;
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
if (/[^A-Za-z0-9]/.test(password)) strength++;
|
<div className="text-center text-gray-200 text-9xl font-bold opacity-10">
|
||||||
setPasswordStrength(strength);
|
CLOUDNSURE
|
||||||
}, [password]);
|
</div>
|
||||||
|
</div>
|
||||||
const handleCreateAccount = async (e) => {
|
<div className="relative w-full max-w-md bg-white shadow-md rounded-lg p-6 z-10">
|
||||||
e.preventDefault();
|
<div className="flex items-center justify-center mb-6">
|
||||||
setErrorMessage('');
|
<AccountCircle className="text-7xl text-gray-700" />
|
||||||
setIsLoading(true);
|
</div>
|
||||||
|
<h2 className="text-2xl font-semibold text-center text-gray-800 mb-4">Create Account</h2>
|
||||||
if (!email || !password || !reEnterPassword) {
|
<form onSubmit={handleCreateAccount} className="space-y-4">
|
||||||
setErrorMessage('All fields are required.');
|
<div className="flex items-center justify-center">
|
||||||
setIsLoading(false);
|
<input
|
||||||
return;
|
accept="image/*"
|
||||||
}
|
id="avatar-input"
|
||||||
|
type="file"
|
||||||
if (password !== reEnterPassword) {
|
className="hidden"
|
||||||
setErrorMessage('Passwords do not match.');
|
onChange={handleAvatarChange}
|
||||||
setIsLoading(false);
|
/>
|
||||||
return;
|
<label htmlFor="avatar-input" className="cursor-pointer">
|
||||||
}
|
<img
|
||||||
|
alt="Avatar"
|
||||||
if (password.length < 8) {
|
src={avatarImage || 'https://via.placeholder.com/120'}
|
||||||
setErrorMessage('Password must be at least 8 characters long.');
|
className="w-28 h-28 rounded-full mb-4"
|
||||||
setIsLoading(false);
|
/>
|
||||||
return;
|
</label>
|
||||||
}
|
</div>
|
||||||
|
<div>
|
||||||
// Simulate API call
|
<label className="block text-gray-600">Email</label>
|
||||||
setTimeout(() => {
|
<input
|
||||||
console.log('Account created successfully!');
|
type="email"
|
||||||
alert('Account created successfully!');
|
value={email}
|
||||||
mockNavigate('/login');
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
setIsLoading(false);
|
className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring focus:ring-opacity-50"
|
||||||
}, 2000);
|
/>
|
||||||
};
|
</div>
|
||||||
|
<div>
|
||||||
const handleAvatarChange = (e) => {
|
<label className="block text-gray-600">Password</label>
|
||||||
const file = e.target.files[0];
|
<input
|
||||||
if (file) {
|
type="password"
|
||||||
const reader = new FileReader();
|
value={password}
|
||||||
reader.onload = () => {
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
setAvatarImage(reader.result);
|
className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring focus:ring-opacity-50"
|
||||||
};
|
/>
|
||||||
reader.readAsDataURL(file);
|
</div>
|
||||||
}
|
<div>
|
||||||
};
|
<label className="block text-gray-600">Re-enter Password</label>
|
||||||
|
<input
|
||||||
const getPasswordStrengthColor = () => {
|
type="password"
|
||||||
if (passwordStrength === 0) return 'bg-gray-300';
|
value={reEnterPassword}
|
||||||
if (passwordStrength === 1) return 'bg-red-400';
|
onChange={(e) => setReEnterPassword(e.target.value)}
|
||||||
if (passwordStrength === 2) return 'bg-yellow-400';
|
className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring focus:ring-opacity-50"
|
||||||
if (passwordStrength === 3) return 'bg-blue-400';
|
/>
|
||||||
return 'bg-green-400';
|
</div>
|
||||||
};
|
<div className="text-center">
|
||||||
|
<button
|
||||||
const getPasswordStrengthText = () => {
|
type="submit"
|
||||||
if (passwordStrength === 0) return 'Enter password';
|
className="w-full py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300 transition duration-300 ease-in-out"
|
||||||
if (passwordStrength === 1) return 'Weak';
|
>
|
||||||
if (passwordStrength === 2) return 'Fair';
|
Create Account
|
||||||
if (passwordStrength === 3) return 'Good';
|
</button>
|
||||||
return 'Strong';
|
</div>
|
||||||
};
|
</form>
|
||||||
|
<div className="mt-4 text-center">
|
||||||
return (
|
<p className="text-gray-600">
|
||||||
<div className="min-h-screen bg-gradient-to-br from-purple-50 via-white to-purple-100 relative overflow-hidden">
|
Already have an account?{' '}
|
||||||
{/* Background Elements */}
|
<button
|
||||||
<div className="absolute inset-0">
|
type="button"
|
||||||
{/* Subtle geometric shapes */}
|
onClick={() => navigate('/login')}
|
||||||
<div className="absolute top-20 left-20 w-32 h-32 bg-purple-200 rounded-full opacity-20 animate-pulse"></div>
|
className="text-blue-600 hover:underline focus:outline-none"
|
||||||
<div className="absolute bottom-20 right-20 w-24 h-24 bg-purple-300 rounded-full opacity-20 animate-pulse" style={{ animationDelay: '1s' }}></div>
|
>
|
||||||
<div className="absolute top-1/2 right-10 w-16 h-16 bg-purple-400 rounded-full opacity-15 animate-pulse" style={{ animationDelay: '2s' }}></div>
|
Log in
|
||||||
|
</button>
|
||||||
{/* Grid pattern */}
|
</p>
|
||||||
<div className="absolute inset-0 opacity-5" style={{
|
</div>
|
||||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%236B46C1' fill-opacity='0.4'%3E%3Cpath d='M20 20h20v20H20V20zm-20 0h20v20H0V20z'/%3E%3C/g%3E%3C/svg%3E")`
|
</div>
|
||||||
}}></div>
|
</div>
|
||||||
</div>
|
);
|
||||||
|
};
|
||||||
{/* Main Content */}
|
|
||||||
<div className="relative z-10 min-h-screen flex items-center justify-center p-4">
|
export default CreateAccountPage;
|
||||||
{/* Background Logo */}
|
|
||||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
|
||||||
<div className={`text-center transition-all duration-2000 ${mounted ? 'opacity-5 scale-100' : 'opacity-0 scale-95'}`}>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Create Account Card */}
|
|
||||||
<div className={`relative w-full max-w-lg transition-all duration-1000 ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
|
|
||||||
{/* Card Background */}
|
|
||||||
<div className="bg-white rounded-3xl shadow-2xl border border-purple-100 overflow-hidden">
|
|
||||||
{/* Header Section */}
|
|
||||||
<div className="bg-gradient-to-r from-purple-600 to-purple-700 p-8 text-center relative">
|
|
||||||
<div className="absolute top-4 left-4">
|
|
||||||
<button
|
|
||||||
onClick={() => mockNavigate('/login')}
|
|
||||||
className="p-2 text-white hover:bg-white hover:bg-opacity-20 rounded-xl transition-all duration-200"
|
|
||||||
>
|
|
||||||
<ArrowLeft className="w-5 h-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-white bg-opacity-20 rounded-2xl">
|
|
||||||
<UserPlus className="w-8 h-8 text-white" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h1 className="text-3xl font-bold text-white mb-2">Create Account</h1>
|
|
||||||
<p className="text-purple-100">Join our community today</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Form Section */}
|
|
||||||
<div className="p-8 space-y-6">
|
|
||||||
{/* Error Message */}
|
|
||||||
{errorMessage && (
|
|
||||||
<div className="bg-red-50 border border-red-200 rounded-xl p-4 text-red-700 text-sm">
|
|
||||||
{errorMessage}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Avatar Upload */}
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="relative inline-block">
|
|
||||||
<input
|
|
||||||
accept="image/*"
|
|
||||||
id="avatar-input"
|
|
||||||
type="file"
|
|
||||||
className="hidden"
|
|
||||||
onChange={handleAvatarChange}
|
|
||||||
/>
|
|
||||||
<label htmlFor="avatar-input" className="cursor-pointer group">
|
|
||||||
<div className="relative">
|
|
||||||
<img
|
|
||||||
alt="Avatar"
|
|
||||||
src={avatarImage || 'https://via.placeholder.com/120/E5E7EB/6B7280?text=Photo'}
|
|
||||||
className="w-28 h-28 rounded-full border-4 border-purple-100 group-hover:border-purple-300 transition-all duration-200 object-cover"
|
|
||||||
/>
|
|
||||||
<div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 rounded-full transition-all duration-200 flex items-center justify-center">
|
|
||||||
<Camera className="w-6 h-6 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-gray-500 mt-2">Click to upload your photo</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Form Fields */}
|
|
||||||
<div className="space-y-5">
|
|
||||||
{/* Email Field */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700">Email Address</label>
|
|
||||||
<div className="relative group">
|
|
||||||
<div className="absolute left-4 top-1/2 transform -translate-y-1/2">
|
|
||||||
<Mail className="w-5 h-5 text-gray-400 group-focus-within:text-purple-500 transition-colors" />
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
value={email}
|
|
||||||
onChange={(e) => 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"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Password Field */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700">Password</label>
|
|
||||||
<div className="relative group">
|
|
||||||
<div className="absolute left-4 top-1/2 transform -translate-y-1/2">
|
|
||||||
<Lock className="w-5 h-5 text-gray-400 group-focus-within:text-purple-500 transition-colors" />
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
type={showPassword ? 'text' : 'password'}
|
|
||||||
value={password}
|
|
||||||
onChange={(e) => 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"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
|
||||||
className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
|
|
||||||
>
|
|
||||||
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Password Strength Indicator */}
|
|
||||||
{password && (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<div className="flex-1 bg-gray-200 rounded-full h-2">
|
|
||||||
<div
|
|
||||||
className={`h-2 rounded-full transition-all duration-300 ${getPasswordStrengthColor()}`}
|
|
||||||
style={{ width: `${(passwordStrength / 4) * 100}%` }}
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<span className="text-xs font-medium text-gray-600">
|
|
||||||
{getPasswordStrengthText()}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-500 space-y-1">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<div className={`w-2 h-2 rounded-full ${password.length >= 8 ? 'bg-green-400' : 'bg-gray-300'}`}></div>
|
|
||||||
<span>At least 8 characters</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<div className={`w-2 h-2 rounded-full ${/[A-Z]/.test(password) ? 'bg-green-400' : 'bg-gray-300'}`}></div>
|
|
||||||
<span>One uppercase letter</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<div className={`w-2 h-2 rounded-full ${/[0-9]/.test(password) ? 'bg-green-400' : 'bg-gray-300'}`}></div>
|
|
||||||
<span>One number</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Re-enter Password Field */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700">Confirm Password</label>
|
|
||||||
<div className="relative group">
|
|
||||||
<div className="absolute left-4 top-1/2 transform -translate-y-1/2">
|
|
||||||
<Lock className="w-5 h-5 text-gray-400 group-focus-within:text-purple-500 transition-colors" />
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
type={showReEnterPassword ? 'text' : 'password'}
|
|
||||||
value={reEnterPassword}
|
|
||||||
onChange={(e) => 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"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowReEnterPassword(!showReEnterPassword)}
|
|
||||||
className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
|
|
||||||
>
|
|
||||||
{showReEnterPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
|
||||||
</button>
|
|
||||||
{reEnterPassword && password === reEnterPassword && (
|
|
||||||
<div className="absolute right-12 top-1/2 transform -translate-y-1/2">
|
|
||||||
<Check className="w-5 h-5 text-green-500" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{reEnterPassword && password !== reEnterPassword && (
|
|
||||||
<p className="text-xs text-red-500">Passwords do not match</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Create Account Button */}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleCreateAccount}
|
|
||||||
disabled={isLoading || !email || !password || !reEnterPassword || password !== reEnterPassword}
|
|
||||||
className="w-full py-4 px-6 bg-gradient-to-r from-purple-600 to-purple-700 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:transform-none disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-center space-x-2">
|
|
||||||
{isLoading ? (
|
|
||||||
<>
|
|
||||||
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
|
||||||
<span>Creating Account...</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<UserPlus className="w-5 h-5" />
|
|
||||||
<span>Create Account</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Login Link */}
|
|
||||||
<div className="text-center pt-4 border-t border-gray-100">
|
|
||||||
<p className="text-gray-600 mb-3">Already have an account?</p>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => mockNavigate('/login')}
|
|
||||||
className="inline-flex items-center space-x-2 text-purple-600 hover:text-purple-700 font-semibold transition-colors"
|
|
||||||
>
|
|
||||||
<User className="w-4 h-4" />
|
|
||||||
<span>Sign In</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CreateAccountPage;
|
|
||||||
|
|||||||
@@ -1,194 +1,99 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { Mail, ArrowLeft, Shield, CheckCircle, AlertCircle, Sparkles } from 'lucide-react';
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { AccountCircle } from '@mui/icons-material';
|
||||||
const ForgotPasswordPage = () => {
|
import './Login.css'; // Import CSS file for custom styling
|
||||||
const [email, setEmail] = useState('');
|
|
||||||
const [message, setMessage] = useState('');
|
const API_BASE_URL = process.env.REACT_APP_API_BASE_URL;
|
||||||
const [messageType, setMessageType] = useState('');
|
const API_FORGOT_PASSWORD = `${API_BASE_URL}/backend/api/resources/forgotpassword`;
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
const [mounted, setMounted] = useState(false);
|
const ForgotPasswordPage = () => {
|
||||||
const [particles, setParticles] = useState([]);
|
const [email, setEmail] = useState('');
|
||||||
|
const [message, setMessage] = useState('');
|
||||||
useEffect(() => {
|
const [messageType, setMessageType] = useState(''); // State to manage message type for styling
|
||||||
setMounted(true);
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const newParticles = Array.from({ length: 35 }, (_, i) => ({
|
const handleSubmit = async (e) => {
|
||||||
id: i,
|
e.preventDefault();
|
||||||
x: Math.random() * 100,
|
|
||||||
y: Math.random() * 100,
|
try {
|
||||||
size: Math.random() * 3 + 1,
|
const response = await fetch(API_FORGOT_PASSWORD, {
|
||||||
duration: Math.random() * 4 + 3,
|
method: 'POST',
|
||||||
delay: Math.random() * 2,
|
headers: {
|
||||||
}));
|
'Content-Type': 'application/json',
|
||||||
setParticles(newParticles);
|
},
|
||||||
}, []);
|
body: JSON.stringify({ email }),
|
||||||
|
});
|
||||||
const handleSubmit = async (e) => {
|
|
||||||
e.preventDefault();
|
if (!response.ok) {
|
||||||
setIsLoading(true);
|
const errorText = await response.text();
|
||||||
setMessage('');
|
setMessage(`Reset password failed: ${errorText}`);
|
||||||
setMessageType('');
|
setMessageType('error');
|
||||||
|
return;
|
||||||
try {
|
}
|
||||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
|
||||||
|
setMessage('Reset password email sent successfully. Please check your email.');
|
||||||
if (email.includes('@')) {
|
setMessageType('success');
|
||||||
setMessage('Reset password email sent successfully. Please check your email.');
|
} catch (error) {
|
||||||
setMessageType('success');
|
setMessage(`Error during reset password: ${error.message}`);
|
||||||
setEmail('');
|
setMessageType('error');
|
||||||
} else {
|
console.error('Error during reset password:', error);
|
||||||
setMessage('Please enter a valid email address.');
|
}
|
||||||
setMessageType('error');
|
};
|
||||||
}
|
|
||||||
} catch (error) {
|
return (
|
||||||
setMessage(`Error during reset password: ${error.message}`);
|
<div className="relative min-h-screen flex items-center justify-center bg-gray-800">
|
||||||
setMessageType('error');
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
} finally {
|
<div className="text-center text-gray-200 text-9xl font-bold opacity-10">
|
||||||
setIsLoading(false);
|
CLOUDNSURE
|
||||||
}
|
</div>
|
||||||
};
|
</div>
|
||||||
|
<div className="relative w-full max-w-md bg-white shadow-md rounded-lg p-6 z-10">
|
||||||
const handleBackToLogin = () => {
|
<div className="flex items-center justify-center mb-6">
|
||||||
alert('Back to login functionality would be implemented here');
|
<AccountCircle className="text-7xl text-gray-700" />
|
||||||
};
|
</div>
|
||||||
|
<h2 className="text-2xl font-semibold text-center text-gray-800 mb-4">Forgot Password</h2>
|
||||||
return (
|
<p className="text-center text-gray-600 mb-4">
|
||||||
<div className="min-h-screen relative overflow-hidden bg-gradient-to-br from-gray-50 via-white to-purple-50">
|
Enter your email address and we'll send you a link to reset your password.
|
||||||
<div className="absolute inset-0">
|
</p>
|
||||||
<div className="absolute top-1/4 left-1/4 w-80 h-80 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-40 animate-pulse"></div>
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
<div className="absolute top-1/3 right-1/4 w-96 h-96 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-pulse" style={{ animationDelay: '2s' }}></div>
|
<div>
|
||||||
<div className="absolute bottom-1/4 left-1/3 w-72 h-72 bg-indigo-200 rounded-full mix-blend-multiply filter blur-xl opacity-35 animate-pulse" style={{ animationDelay: '4s' }}></div>
|
<label className="block text-gray-600">Email</label>
|
||||||
|
<input
|
||||||
{particles.map((particle) => (
|
type="email"
|
||||||
<div
|
value={email}
|
||||||
key={particle.id}
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
className="absolute bg-purple-400 rounded-full opacity-20 animate-bounce"
|
className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring focus:ring-opacity-50"
|
||||||
style={{
|
required
|
||||||
left: `${particle.x}%`,
|
autoFocus
|
||||||
top: `${particle.y}%`,
|
/>
|
||||||
width: `${particle.size}px`,
|
</div>
|
||||||
height: `${particle.size}px`,
|
<div className="text-center">
|
||||||
animationDuration: `${particle.duration}s`,
|
<button
|
||||||
animationDelay: `${particle.delay}s`,
|
type="submit"
|
||||||
}}
|
className="w-full py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300 transition duration-300 ease-in-out"
|
||||||
/>
|
>
|
||||||
))}
|
Reset Password
|
||||||
|
</button>
|
||||||
<div className="absolute inset-0 opacity-20" style={{
|
</div>
|
||||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239333ea' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`
|
</form>
|
||||||
}}></div>
|
{message && (
|
||||||
</div>
|
<div className={`mt-4 text-center ${messageType === 'error' ? 'text-red-500' : 'text-green-500'}`}>
|
||||||
|
{message}
|
||||||
<div className="relative z-10 min-h-screen flex items-center justify-center p-4">
|
</div>
|
||||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
)}
|
||||||
<div className={`text-center transition-all duration-2000 ${mounted ? 'opacity-5 scale-100' : 'opacity-0 scale-95'}`}>
|
<p className="mt-4 text-center text-gray-600">
|
||||||
<div className="flex justify-center mt-4 space-x-2">
|
Remember your password?{' '}
|
||||||
{[...Array(5)].map((_, i) => (
|
<button
|
||||||
<Sparkles key={i} className="w-8 h-8 text-purple-300 opacity-30 animate-pulse" style={{ animationDelay: `${i * 0.3}s` }} />
|
type="button"
|
||||||
))}
|
onClick={() => navigate('/login')}
|
||||||
</div>
|
className="text-blue-600 hover:underline focus:outline-none"
|
||||||
</div>
|
>
|
||||||
</div>
|
Log in
|
||||||
|
</button>
|
||||||
<div className={`relative w-full max-w-md transition-all duration-1000 ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
|
</p>
|
||||||
<div className="relative bg-white rounded-3xl shadow-2xl border border-purple-100 overflow-hidden">
|
</div>
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500 via-purple-600 to-indigo-600 opacity-5 rounded-3xl"></div>
|
</div>
|
||||||
|
);
|
||||||
<div className="relative p-8 space-y-6">
|
};
|
||||||
<button
|
|
||||||
onClick={handleBackToLogin}
|
export default ForgotPasswordPage;
|
||||||
className="group absolute top-6 left-6 p-2 text-gray-400 hover:text-purple-600 transition-colors rounded-full hover:bg-purple-50"
|
|
||||||
>
|
|
||||||
<ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div className="text-center space-y-4 pt-8">
|
|
||||||
<div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-2xl shadow-lg transform hover:rotate-12 transition-transform duration-300">
|
|
||||||
<Shield className="w-10 h-10 text-white" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h1 className="text-3xl font-bold text-gray-800 mb-2">Forgot Password?</h1>
|
|
||||||
<p className="text-gray-600 leading-relaxed">Don't worry! Enter your email address and we'll send you a secure link to reset your password.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{message && (
|
|
||||||
<div className={`rounded-xl p-4 text-sm animate-pulse flex items-center space-x-3 ${
|
|
||||||
messageType === 'error'
|
|
||||||
? 'bg-red-50 border border-red-200 text-red-700'
|
|
||||||
: 'bg-green-50 border border-green-200 text-green-700'
|
|
||||||
}`}>
|
|
||||||
{messageType === 'error' ? (
|
|
||||||
<AlertCircle className="w-5 h-5 flex-shrink-0" />
|
|
||||||
) : (
|
|
||||||
<CheckCircle className="w-5 h-5 flex-shrink-0" />
|
|
||||||
)}
|
|
||||||
<span>{message}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-sm font-medium text-gray-700">Email Address</label>
|
|
||||||
<div className="relative group">
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-indigo-500 rounded-xl blur opacity-20 group-hover:opacity-30 transition-opacity"></div>
|
|
||||||
<div className="relative bg-gray-50 border-2 border-gray-200 rounded-xl overflow-hidden focus-within:border-purple-500 focus-within:bg-white transition-all">
|
|
||||||
<div className="absolute left-4 top-1/2 transform -translate-y-1/2">
|
|
||||||
<Mail className="w-5 h-5 text-gray-400" />
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
value={email}
|
|
||||||
onChange={(e) => 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
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
onClick={handleSubmit}
|
|
||||||
disabled={isLoading}
|
|
||||||
className="group relative w-full py-4 px-6 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl hover:from-purple-700 hover:to-indigo-700 transform hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:transform-none overflow-hidden"
|
|
||||||
>
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
|
||||||
<div className="relative flex items-center justify-center space-x-2">
|
|
||||||
{isLoading ? (
|
|
||||||
<>
|
|
||||||
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
|
||||||
<span>Sending Reset Link...</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Mail className="w-5 h-5" />
|
|
||||||
<span>Send Reset Link</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-center pt-4 border-t border-gray-200">
|
|
||||||
<p className="text-gray-600 mb-3">Remember your password?</p>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleBackToLogin}
|
|
||||||
className="group inline-flex items-center space-x-2 text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 font-semibold hover:from-purple-700 hover:to-indigo-700 transition-all"
|
|
||||||
>
|
|
||||||
<ArrowLeft className="w-4 h-4 text-purple-600 group-hover:text-purple-700 group-hover:-translate-x-1 transition-all" />
|
|
||||||
<span>Back to Sign In</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ForgotPasswordPage;
|
|
||||||
|
|||||||
@@ -1,64 +1,64 @@
|
|||||||
/* LoginPage.css */
|
/* LoginPage.css */
|
||||||
|
|
||||||
.login-container {
|
.login-container {
|
||||||
background: linear-gradient(to bottom, #417cd5, white); /* Linear gradient from blue to white */
|
background: linear-gradient(to bottom, #417cd5, white); /* Linear gradient from blue to white */
|
||||||
height: 100vh; /* Full viewport height */
|
height: 100vh; /* Full viewport height */
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.login-box {
|
.login-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-left {
|
.login-left {
|
||||||
background-color: #31c2db;
|
background-color: #31c2db;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 4rem; /* Padding for better spacing */
|
padding: 4rem; /* Padding for better spacing */
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-left img {
|
.login-left img {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-right {
|
.login-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 4rem; /* Padding for better spacing */
|
padding: 4rem; /* Padding for better spacing */
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-form {
|
.login-form {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.forgot-password, .create-account {
|
.forgot-password, .create-account {
|
||||||
margin-top: 1rem; /* Spacing between links and other elements */
|
margin-top: 1rem; /* Spacing between links and other elements */
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-form .MuiButton-root {
|
.login-form .MuiButton-root {
|
||||||
background-color: #1fcf90;
|
background-color: #1fcf90;
|
||||||
color: white;
|
color: white;
|
||||||
margin-top: 1rem; /* Spacing at the top of the button */
|
margin-top: 1rem; /* Spacing at the top of the button */
|
||||||
}
|
}
|
||||||
|
|
||||||
.MuiAlert-root {
|
.MuiAlert-root {
|
||||||
margin-bottom: 1rem; /* Spacing below the alert */
|
margin-bottom: 1rem; /* Spacing below the alert */
|
||||||
}
|
}
|
||||||
.forgot-password {
|
.forgot-password {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin-top: -10px;
|
margin-top: -10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1,238 +1,156 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { Eye, EyeOff, User, Lock, Mail, Sparkles, Shield, ArrowRight } from 'lucide-react';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { AccountCircle, Visibility, VisibilityOff } from '@mui/icons-material';
|
||||||
|
import './Login.css'; // Import CSS file for custom styling
|
||||||
const LoginPage = () => {
|
|
||||||
const navigate = useNavigate();
|
const API_BASE_URL = process.env.REACT_APP_API_BASE_URL;
|
||||||
const [username, setUsername] = useState('');
|
const API_TOKEN_SESSION = `${API_BASE_URL}/token/session`;
|
||||||
const [password, setPassword] = useState('');
|
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
const LoginPage = () => {
|
||||||
const [rememberMe, setRememberMe] = useState(false);
|
const [email, setEmail] = useState('');
|
||||||
const [errorMessage, setErrorMessage] = useState('');
|
const [password, setPassword] = useState('');
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
const [mounted, setMounted] = useState(false);
|
const [rememberMe, setRememberMe] = useState(false);
|
||||||
const [particles, setParticles] = useState([]);
|
const [errorMessage, setErrorMessage] = useState('');
|
||||||
|
const navigate = useNavigate();
|
||||||
useEffect(() => {
|
|
||||||
setMounted(true);
|
const handleLogin = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
const newParticles = Array.from({ length: 40 }, (_, i) => ({
|
setErrorMessage('');
|
||||||
id: i,
|
|
||||||
x: Math.random() * 100,
|
if (!email || !password) {
|
||||||
y: Math.random() * 100,
|
setErrorMessage('Email and password are required.');
|
||||||
size: Math.random() * 3 + 1,
|
return;
|
||||||
duration: Math.random() * 4 + 3,
|
}
|
||||||
delay: Math.random() * 2,
|
|
||||||
}));
|
try {
|
||||||
setParticles(newParticles);
|
const response = await fetch(API_TOKEN_SESSION, {
|
||||||
}, []);
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
const handleLogin = async (e) => {
|
'Content-Type': 'application/json',
|
||||||
e.preventDefault();
|
},
|
||||||
setErrorMessage('');
|
body: JSON.stringify({ email, password }),
|
||||||
setIsLoading(true);
|
});
|
||||||
|
|
||||||
if (!username || !password) {
|
if (!response.ok) {
|
||||||
setErrorMessage('Username and password are required.');
|
const errorText = await response.text();
|
||||||
setIsLoading(false);
|
console.error('Login failed:', errorText);
|
||||||
return;
|
setErrorMessage('Login failed. Please check your credentials.');
|
||||||
}
|
return;
|
||||||
|
}
|
||||||
const storedCredentials = JSON.parse(localStorage.getItem('userCredentials') || '{}');
|
|
||||||
|
const data = await response.json();
|
||||||
if ((username === 'sysadmin' && password === 'test3') ||
|
console.log('Login response:', data);
|
||||||
(storedCredentials[username] && storedCredentials[username] === password)) {
|
|
||||||
localStorage.setItem('authToken', 'dummy-token');
|
if (data.operationStatus !== 'SUCCESS') {
|
||||||
localStorage.setItem('currentUser', username);
|
console.error('Login failed:', data.operationMessage);
|
||||||
navigate('/Dashboard');
|
setErrorMessage(data.operationMessage || 'Login failed. Please try again.');
|
||||||
} else {
|
return;
|
||||||
setErrorMessage('Invalid username or password. Please use sysadmin/test3 or your registered credentials.');
|
}
|
||||||
}
|
|
||||||
|
localStorage.setItem('authToken', data.item.token);
|
||||||
setIsLoading(false);
|
localStorage.setItem('user', JSON.stringify(data.item));
|
||||||
};
|
console.log('Token stored in local storage:', data.item.token);
|
||||||
|
navigate('/dashboard');
|
||||||
const handleForgotPassword = () => {
|
} catch (error) {
|
||||||
navigate('/ForgotPassword');
|
console.error('Error during login:', error);
|
||||||
};
|
setErrorMessage('An error occurred during login. Please try again later.');
|
||||||
|
}
|
||||||
const handleCreateAccount = () => {
|
};
|
||||||
navigate('/CreateAccount');
|
|
||||||
};
|
const handleForgotPassword = () => {
|
||||||
|
navigate('/ForgotPassword');
|
||||||
return (
|
};
|
||||||
<div className="min-h-screen relative overflow-hidden bg-gradient-to-br from-gray-50 via-white to-purple-50">
|
|
||||||
<div className="absolute inset-0">
|
const handleCreateAccount = () => {
|
||||||
<div className="absolute top-1/4 left-1/4 w-80 h-80 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-40 animate-pulse"></div>
|
navigate('/CreateAccount');
|
||||||
<div className="absolute top-1/3 right-1/4 w-96 h-96 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-pulse" style={{ animationDelay: '2s' }}></div>
|
};
|
||||||
<div className="absolute bottom-1/4 left-1/3 w-72 h-72 bg-indigo-200 rounded-full mix-blend-multiply filter blur-xl opacity-35 animate-pulse" style={{ animationDelay: '4s' }}></div>
|
|
||||||
|
return (
|
||||||
{particles.map((particle) => (
|
<div className="relative min-h-screen flex items-center justify-center bg-gray-700">
|
||||||
<div
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
key={particle.id}
|
<div className="text-center text-gray-100 text-9xl font-bold opacity-75">
|
||||||
className="absolute bg-purple-400 rounded-full opacity-20 animate-bounce"
|
CLOUDNSURE
|
||||||
style={{
|
</div>
|
||||||
left: `${particle.x}%`,
|
</div>
|
||||||
top: `${particle.y}%`,
|
<div className="relative w-full max-w-md bg-white shadow-md rounded-lg p-6 z-10 ">
|
||||||
width: `${particle.size}px`,
|
<div className="flex items-center justify-center mb-6">
|
||||||
height: `${particle.size}px`,
|
<AccountCircle className="text-7xl text-gray-700" />
|
||||||
animationDuration: `${particle.duration}s`,
|
</div>
|
||||||
animationDelay: `${particle.delay}s`,
|
<h2 className="text-2xl font-semibold text-center text-gray-800 mb-4 ">Log in</h2>
|
||||||
}}
|
{errorMessage && <div className="mb-4 text-red-600">{errorMessage}</div>}
|
||||||
/>
|
<form onSubmit={handleLogin} className="space-y-4">
|
||||||
))}
|
<div>
|
||||||
|
<label className="block text-gray-600">Email</label>
|
||||||
<div className="absolute inset-0 opacity-20" style={{
|
<input
|
||||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239333ea' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`
|
type="text"
|
||||||
}}></div>
|
value={email}
|
||||||
</div>
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring focus:ring-opacity-50"
|
||||||
<div className="relative z-10 min-h-screen flex items-center justify-center p-4">
|
/>
|
||||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
</div>
|
||||||
<div className={`text-center transition-all duration-2000 ${mounted ? 'opacity-5 scale-100' : 'opacity-0 scale-95'}`}>
|
<div>
|
||||||
<div className="flex justify-center mt-4 space-x-2">
|
<label className="block text-gray-600">Password</label>
|
||||||
{[...Array(5)].map((_, i) => (
|
<div className="relative">
|
||||||
<Sparkles key={i} className="w-8 h-8 text-purple-300 opacity-30 animate-pulse" style={{ animationDelay: `${i * 0.3}s` }} />
|
<input
|
||||||
))}
|
type={showPassword ? 'text' : 'password'}
|
||||||
</div>
|
value={password}
|
||||||
</div>
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
</div>
|
className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring focus:ring-opacity-50"
|
||||||
|
/>
|
||||||
<div className={`relative w-full max-w-md transition-all duration-1000 ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
|
<div className="absolute inset-y-0 right-0 pr-3 flex items-center">
|
||||||
<div className="relative bg-white rounded-3xl shadow-2xl border border-purple-100 overflow-hidden">
|
<button
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500 via-purple-600 to-indigo-600 opacity-5 rounded-3xl"></div>
|
type="button"
|
||||||
|
onClick={() => setShowPassword(!showPassword)}
|
||||||
<div className="relative p-8 space-y-6">
|
className=""
|
||||||
<div className="text-center space-y-4">
|
>
|
||||||
<div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-2xl shadow-lg transform hover:rotate-12 transition-transform duration-300">
|
{showPassword ? <VisibilityOff /> : <Visibility />}
|
||||||
<Shield className="w-10 h-10 text-white" />
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</div>
|
||||||
<h1 className="text-3xl font-bold text-gray-800 mb-2">Welcome Back</h1>
|
</div>
|
||||||
<p className="text-gray-600">Sign in to your account</p>
|
<div className="flex items-center justify-between">
|
||||||
</div>
|
<label className="flex items-center">
|
||||||
</div>
|
<input
|
||||||
|
type="checkbox"
|
||||||
{errorMessage && (
|
checked={rememberMe}
|
||||||
<div className="bg-red-50 border border-red-200 rounded-xl p-4 text-red-700 text-sm animate-pulse">
|
onChange={(e) => setRememberMe(e.target.checked)}
|
||||||
{errorMessage}
|
className="form-checkbox"
|
||||||
</div>
|
/>
|
||||||
)}
|
<span className="ml-2 text-gray-600">Remember Me</span>
|
||||||
|
</label>
|
||||||
<div className="space-y-6">
|
<button
|
||||||
<div className="space-y-2">
|
type="button"
|
||||||
<label className="text-sm font-medium text-gray-700">Username</label>
|
onClick={handleForgotPassword}
|
||||||
<div className="relative group">
|
className="text-sm text-blue-600 hover:underline focus:outline-none"
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-indigo-500 rounded-xl blur opacity-20 group-hover:opacity-30 transition-opacity"></div>
|
>
|
||||||
<div className="relative bg-gray-50 border-2 border-gray-200 rounded-xl overflow-hidden focus-within:border-purple-500 focus-within:bg-white transition-all">
|
Forgot password?
|
||||||
<div className="absolute left-4 top-1/2 transform -translate-y-1/2">
|
</button>
|
||||||
<User className="w-5 h-5 text-gray-400" />
|
</div>
|
||||||
</div>
|
<div className="text-center">
|
||||||
<input
|
<button
|
||||||
type="text"
|
type="submit"
|
||||||
value={username}
|
className="w-full py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300"
|
||||||
onChange={(e) => setUsername(e.target.value)}
|
>
|
||||||
className="w-full pl-12 pr-4 py-4 bg-transparent text-gray-800 placeholder-gray-500 focus:outline-none"
|
Login
|
||||||
placeholder="Enter your username"
|
</button>
|
||||||
/>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
</div>
|
<div className="mt-4 text-center">
|
||||||
</div>
|
<p className="text-gray-600">
|
||||||
|
Don't have an account?{' '}
|
||||||
<div className="space-y-2">
|
<button
|
||||||
<label className="text-sm font-medium text-gray-700">Password</label>
|
type="button"
|
||||||
<div className="relative group">
|
onClick={handleCreateAccount}
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-indigo-500 rounded-xl blur opacity-20 group-hover:opacity-30 transition-opacity"></div>
|
className="text-blue-600 hover:underline focus:outline-none"
|
||||||
<div className="relative bg-gray-50 border-2 border-gray-200 rounded-xl overflow-hidden focus-within:border-purple-500 focus-within:bg-white transition-all">
|
>
|
||||||
<div className="absolute left-4 top-1/2 transform -translate-y-1/2">
|
Create Account
|
||||||
<Lock className="w-5 h-5 text-gray-400" />
|
</button>
|
||||||
</div>
|
</p>
|
||||||
<input
|
</div>
|
||||||
type={showPassword ? 'text' : 'password'}
|
</div>
|
||||||
value={password}
|
</div>
|
||||||
onChange={(e) => 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"
|
|
||||||
/>
|
export default LoginPage;
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
|
||||||
className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-purple-600 transition-colors"
|
|
||||||
>
|
|
||||||
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<label className="flex items-center space-x-3 cursor-pointer group">
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={rememberMe}
|
|
||||||
onChange={(e) => setRememberMe(e.target.checked)}
|
|
||||||
className="sr-only"
|
|
||||||
/>
|
|
||||||
<div className={`w-5 h-5 rounded border-2 transition-all ${rememberMe ? 'bg-gradient-to-r from-purple-500 to-indigo-600 border-purple-500' : 'border-gray-300 group-hover:border-purple-400'}`}>
|
|
||||||
{rememberMe && (
|
|
||||||
<svg className="w-3 h-3 text-white absolute top-0.5 left-0.5" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span className="text-sm text-gray-600 group-hover:text-purple-700 transition-colors">Remember me</span>
|
|
||||||
</label>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleForgotPassword}
|
|
||||||
className="text-sm text-purple-600 hover:text-purple-700 transition-colors font-medium"
|
|
||||||
>
|
|
||||||
Forgot password?
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleLogin}
|
|
||||||
disabled={isLoading}
|
|
||||||
className="group relative w-full py-4 px-6 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl hover:from-purple-700 hover:to-indigo-700 transform hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:transform-none overflow-hidden"
|
|
||||||
>
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
|
||||||
<div className="relative flex items-center justify-center space-x-2">
|
|
||||||
{isLoading ? (
|
|
||||||
<>
|
|
||||||
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
|
||||||
<span>Signing in...</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<span>Sign In</span>
|
|
||||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-center pt-4 border-t border-gray-200">
|
|
||||||
<p className="text-gray-600 mb-3">Don't have an account?</p>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleCreateAccount}
|
|
||||||
className="group inline-flex items-center space-x-2 text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 font-semibold hover:from-purple-700 hover:to-indigo-700 transition-all"
|
|
||||||
>
|
|
||||||
<User className="w-4 h-4 text-purple-600 group-hover:text-purple-700" />
|
|
||||||
<span>Create New Account</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LoginPage;
|
|
||||||
|
|||||||
106
src/components/common/ConfirmModel.js
Normal file
106
src/components/common/ConfirmModel.js
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogTitle,
|
||||||
|
DialogContent,
|
||||||
|
DialogActions,
|
||||||
|
Button,
|
||||||
|
IconButton,
|
||||||
|
Typography,
|
||||||
|
Box
|
||||||
|
} from '@mui/material';
|
||||||
|
import CloseIcon from '@mui/icons-material/Close';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A reusable confirmation modal component using Material-UI
|
||||||
|
* @param {Object} props - Component props
|
||||||
|
* @param {boolean} props.open - Controls modal visibility
|
||||||
|
* @param {Function} props.onClose - Function to call when modal is closed
|
||||||
|
* @param {Function} props.onConfirm - Function to call when action is confirmed
|
||||||
|
* @param {string} props.title - Modal title
|
||||||
|
* @param {string} props.message - Confirmation message
|
||||||
|
* @param {string} props.confirmLabel - Label for the confirm button
|
||||||
|
* @param {string} props.cancelLabel - Label for the cancel button
|
||||||
|
* @param {string} props.confirmColor - Color for the confirm button ('primary', 'secondary', 'error', etc.)
|
||||||
|
*/
|
||||||
|
const ConfirmModal = ({
|
||||||
|
open,
|
||||||
|
onClose,
|
||||||
|
onConfirm,
|
||||||
|
title = "Confirm Action",
|
||||||
|
message = "Are you sure you want to proceed?",
|
||||||
|
confirmLabel = "Confirm",
|
||||||
|
cancelLabel = "Cancel",
|
||||||
|
confirmColor = "error"
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<Dialog
|
||||||
|
open={open}
|
||||||
|
onClose={onClose}
|
||||||
|
maxWidth="sm"
|
||||||
|
fullWidth
|
||||||
|
PaperProps={{
|
||||||
|
sx: {
|
||||||
|
borderRadius: 2
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DialogTitle sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
color: 'primary.main',
|
||||||
|
borderBottom: '1px solid',
|
||||||
|
borderColor: 'divider'
|
||||||
|
}}>
|
||||||
|
{title}
|
||||||
|
<IconButton
|
||||||
|
onClick={onClose}
|
||||||
|
size="small"
|
||||||
|
sx={{
|
||||||
|
color: 'text.secondary',
|
||||||
|
'&:hover': {
|
||||||
|
color: 'text.primary'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
aria-label="close"
|
||||||
|
>
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
</DialogTitle>
|
||||||
|
|
||||||
|
<DialogContent sx={{ pt: 3 }}>
|
||||||
|
<Typography variant="body1">{message}</Typography>
|
||||||
|
</DialogContent>
|
||||||
|
|
||||||
|
<DialogActions sx={{
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
px: 3,
|
||||||
|
py: 2,
|
||||||
|
borderTop: '1px solid',
|
||||||
|
borderColor: 'divider'
|
||||||
|
}}>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
onClick={onClose}
|
||||||
|
sx={{ px: 4 }}
|
||||||
|
>
|
||||||
|
{cancelLabel}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color={confirmColor}
|
||||||
|
onClick={() => {
|
||||||
|
onConfirm();
|
||||||
|
onClose();
|
||||||
|
}}
|
||||||
|
sx={{ px: 4 }}
|
||||||
|
>
|
||||||
|
{confirmLabel}
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ConfirmModal;
|
||||||
159
src/components/dashboardnew/dashboardadd/dashboardbuilderadd.js
Normal file
159
src/components/dashboardnew/dashboardadd/dashboardbuilderadd.js
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
|
import "react-toastify/dist/ReactToastify.css";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
Checkbox,
|
||||||
|
FormControl,
|
||||||
|
FormControlLabel,
|
||||||
|
TextField,
|
||||||
|
Typography,
|
||||||
|
Chip
|
||||||
|
} from '@mui/material';
|
||||||
|
import {
|
||||||
|
Save as SaveIcon,
|
||||||
|
ArrowBack as ArrowBackIcon
|
||||||
|
} from '@mui/icons-material';
|
||||||
|
import DashboardBuilderService from "../../../ApiServices/DashboardBuilderServices";
|
||||||
|
|
||||||
|
const DashboardbuilderAdd = () => {
|
||||||
|
const [moduleId, setModuleId] = useState(null);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { register, handleSubmit, formState: { errors } } = useForm({
|
||||||
|
defaultValues: {
|
||||||
|
dashboard_name: "",
|
||||||
|
description: "",
|
||||||
|
secuirity_profile: "",
|
||||||
|
module_id: null,
|
||||||
|
tech_Stack: "",
|
||||||
|
object_type: "",
|
||||||
|
sub_object_type: "",
|
||||||
|
add_to_home: true,
|
||||||
|
dashbord1_Line: [{
|
||||||
|
model: JSON.stringify({
|
||||||
|
dashboard: [{
|
||||||
|
cols: 4,
|
||||||
|
rows: 5,
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
name: "Radar Chart",
|
||||||
|
component: "Radar Chart",
|
||||||
|
}],
|
||||||
|
})
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setModuleId("exampleModuleId");
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const onSubmit = (data) => {
|
||||||
|
if (!data.dashboard_name || !data.secuirity_profile || !data.description) {
|
||||||
|
toast.error("Please fill out all required fields.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const newDashboard = {
|
||||||
|
...data,
|
||||||
|
};
|
||||||
|
|
||||||
|
DashboardBuilderService.create(newDashboard)
|
||||||
|
.then((response) => {
|
||||||
|
toast.success("Dashboard Added successfully");
|
||||||
|
navigate("/dashboard/dashboard-new-all");
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error(error);
|
||||||
|
toast.error("Error while adding dashboard");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card sx={{ p: 3 }}>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
|
||||||
|
<Typography variant="h5" sx={{ fontWeight: 500 }}>
|
||||||
|
Define Dashboard
|
||||||
|
</Typography>
|
||||||
|
<Chip
|
||||||
|
label="Add Mode"
|
||||||
|
color="primary"
|
||||||
|
size="small"
|
||||||
|
sx={{ ml: 2 }}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box component="form" onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 3, mb: 3 }}>
|
||||||
|
<FormControl fullWidth>
|
||||||
|
<TextField
|
||||||
|
label="Dashboard Name"
|
||||||
|
variant="outlined"
|
||||||
|
{...register("dashboard_name", { required: true })}
|
||||||
|
error={!!errors.dashboard_name}
|
||||||
|
helperText={errors.dashboard_name ? "This field is required" : ""}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<FormControl fullWidth>
|
||||||
|
<TextField
|
||||||
|
label="Security Profile"
|
||||||
|
variant="outlined"
|
||||||
|
{...register("secuirity_profile", { required: true })}
|
||||||
|
error={!!errors.secuirity_profile}
|
||||||
|
helperText={errors.secuirity_profile ? "This field is required" : ""}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<FormControl fullWidth sx={{ gridColumn: '1 / -1' }}>
|
||||||
|
<TextField
|
||||||
|
label="Description"
|
||||||
|
variant="outlined"
|
||||||
|
multiline
|
||||||
|
rows={3}
|
||||||
|
{...register("description", { required: true })}
|
||||||
|
error={!!errors.description}
|
||||||
|
helperText={errors.description ? "This field is required" : ""}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Checkbox
|
||||||
|
defaultChecked
|
||||||
|
{...register("add_to_home")}
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="Add to Dashboard"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'center', gap: 2 }}>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
startIcon={<ArrowBackIcon />}
|
||||||
|
onClick={() => navigate("/dashboard/dashboard-new-all")}
|
||||||
|
>
|
||||||
|
Back
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
startIcon={<SaveIcon />}
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DashboardbuilderAdd;
|
||||||
213
src/components/dashboardnew/dashboardbuildernewall.js
Normal file
213
src/components/dashboardnew/dashboardbuildernewall.js
Normal file
@@ -0,0 +1,213 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { useNavigate, useLocation } from "react-router-dom";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import * as XLSX from "xlsx";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
Typography,
|
||||||
|
CircularProgress,
|
||||||
|
Alert,
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableContainer,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
Paper,
|
||||||
|
IconButton,
|
||||||
|
Modal,
|
||||||
|
Tooltip
|
||||||
|
} from "@mui/material";
|
||||||
|
import {
|
||||||
|
Add as AddIcon,
|
||||||
|
Delete as DeleteIcon,
|
||||||
|
Edit as EditIcon,
|
||||||
|
GridOn as GridIcon,
|
||||||
|
FileDownload as ExportIcon,
|
||||||
|
Schedule as TimeIcon
|
||||||
|
} from "@mui/icons-material";
|
||||||
|
import DashboardBuilderService from "../../../src/ApiServices/DashboardBuilderServices";
|
||||||
|
import ConfirmModal from "../common/ConfirmModel";
|
||||||
|
|
||||||
|
const DashboardNewAll = () => {
|
||||||
|
const { t: translate } = useTranslation();
|
||||||
|
const [data, setData] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
const [showConfirmModal, setShowConfirmModal] = useState(false);
|
||||||
|
const [selectedRow, setSelectedRow] = useState(null);
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchAllDashboards();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const fetchAllDashboards = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const dashboards = await DashboardBuilderService.getAllDash();
|
||||||
|
setData(dashboards);
|
||||||
|
toast.success("Dashboards fetched successfully.");
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching dashboards:', error);
|
||||||
|
toast.error('Failed to fetch dashboards.');
|
||||||
|
setError(error.message);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddClick = () => {
|
||||||
|
navigate("/dashboard/dashboard-new-add");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRunner = () => {
|
||||||
|
navigate("/dashboard/dashboard-runner-all");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditClick = (dashboard) => {
|
||||||
|
navigate(`/dashboard/dashboard-new-edit/${dashboard.id}`, { state: { dashboard } });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteClick = (row) => {
|
||||||
|
setSelectedRow(row);
|
||||||
|
setShowConfirmModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteConfirm = async () => {
|
||||||
|
try {
|
||||||
|
await DashboardBuilderService.deleteField(selectedRow.id);
|
||||||
|
setData(prevData => prevData.filter(dashboard => dashboard.id !== selectedRow.id));
|
||||||
|
toast.success("Dashboard deleted successfully!");
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error deleting dashboard field:", error);
|
||||||
|
toast.error("Failed to delete dashboard. Please try again.");
|
||||||
|
}
|
||||||
|
setShowConfirmModal(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleExport = () => {
|
||||||
|
const workbook = XLSX.utils.book_new();
|
||||||
|
const worksheet = XLSX.utils.json_to_sheet(data);
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, "Dashboards");
|
||||||
|
XLSX.writeFile(workbook, "dashboards_export.xlsx");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSetUp = (id) => {
|
||||||
|
navigate(`/dashboard/edit-new-dash/${id}`, { dashboardId: id });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ p: 3 }}>
|
||||||
|
<Box sx={{ display: "flex", justifyContent: "space-between", mb: 3 }}>
|
||||||
|
<Typography variant="h4">{translate("Dashboard Builder")}</Typography>
|
||||||
|
<Box sx={{ display: "flex", gap: 2 }}>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
startIcon={<GridIcon />}
|
||||||
|
onClick={handleRunner}
|
||||||
|
>
|
||||||
|
{translate("Dashboard_runner")}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
startIcon={<ExportIcon />}
|
||||||
|
onClick={handleExport}
|
||||||
|
>
|
||||||
|
{translate("EXPORT_XLSX")}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
startIcon={<AddIcon />}
|
||||||
|
onClick={handleAddClick}
|
||||||
|
>
|
||||||
|
{translate("ADD")}
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<Box sx={{ display: "flex", justifyContent: "center", my: 4 }}>
|
||||||
|
<CircularProgress />
|
||||||
|
</Box>
|
||||||
|
) : error ? (
|
||||||
|
<Alert severity="error" sx={{ mb: 3 }}>
|
||||||
|
{error}
|
||||||
|
</Alert>
|
||||||
|
) : data.length === 0 ? (
|
||||||
|
<Alert severity="info">No dashboards available.</Alert>
|
||||||
|
) : (
|
||||||
|
<TableContainer component={Paper}>
|
||||||
|
<Table>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>Go To</TableCell>
|
||||||
|
<TableCell>Dashboard Name</TableCell>
|
||||||
|
<TableCell>Description</TableCell>
|
||||||
|
<TableCell>Security Profile</TableCell>
|
||||||
|
<TableCell>Add to Home</TableCell>
|
||||||
|
<TableCell>Actions</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{data.map((dashboard) => (
|
||||||
|
<TableRow key={dashboard.id}>
|
||||||
|
<TableCell>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
size="small"
|
||||||
|
onClick={() => handleSetUp(dashboard.id)}
|
||||||
|
>
|
||||||
|
SET UP
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{dashboard.dashboard_name}</TableCell>
|
||||||
|
<TableCell>{dashboard.description}</TableCell>
|
||||||
|
<TableCell>{dashboard.secuirity_profile}</TableCell>
|
||||||
|
<TableCell>{dashboard.add_to_home ? "Yes" : "No"}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Tooltip title="Edit">
|
||||||
|
<IconButton
|
||||||
|
color="primary"
|
||||||
|
onClick={() => handleEditClick(dashboard)}
|
||||||
|
>
|
||||||
|
<EditIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title="Delete">
|
||||||
|
<IconButton
|
||||||
|
color="error"
|
||||||
|
onClick={() => handleDeleteClick(dashboard)}
|
||||||
|
>
|
||||||
|
<DeleteIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<ConfirmModal
|
||||||
|
open={showConfirmModal}
|
||||||
|
onClose={() => setShowConfirmModal(false)}
|
||||||
|
onConfirm={handleDeleteConfirm}
|
||||||
|
title="Delete Dashboard"
|
||||||
|
message={`Are you sure you want to delete "${selectedRow?.dashboard_name || 'this dashboard'}"?`}
|
||||||
|
confirmText="Delete"
|
||||||
|
cancelText="Cancel"
|
||||||
|
confirmColor="error"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DashboardNewAll;
|
||||||
278
src/components/dashboardnew/dashboardrunner/dashboardrunner.js
Normal file
278
src/components/dashboardnew/dashboardrunner/dashboardrunner.js
Normal file
@@ -0,0 +1,278 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { useParams, useNavigate } from 'react-router-dom';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardHeader,
|
||||||
|
CircularProgress,
|
||||||
|
Typography,
|
||||||
|
useTheme
|
||||||
|
} from '@mui/material';
|
||||||
|
import { ArrowBack as ArrowBackIcon } from '@mui/icons-material';
|
||||||
|
import DashboardBuilderService from "../../../ApiServices/DashboardBuilderServices";
|
||||||
|
|
||||||
|
// Import chart components
|
||||||
|
import LineChartComponent from '../gadgets/linechart';
|
||||||
|
import PieChartComponent from '../gadgets/piechart';
|
||||||
|
import PolarChartComponent from '../gadgets/polarchart';
|
||||||
|
import RadarChartComponent from '../gadgets/radarchart';
|
||||||
|
import BubbleChart from '../gadgets/bubblechart';
|
||||||
|
import BarChart from '../gadgets/barchart';
|
||||||
|
import DoughnutChart from '../gadgets/doughnut';
|
||||||
|
import DynamicChart from '../gadgets/dynamicchart';
|
||||||
|
import FinancialChart from '../gadgets/financialchart';
|
||||||
|
import GridViewComponent from '../gadgets/gridview';
|
||||||
|
import ScatterChartComponent from '../gadgets/scatterchart';
|
||||||
|
import ToDoChartComponent from '../gadgets/todochart';
|
||||||
|
|
||||||
|
const ViewDashboard = () => {
|
||||||
|
const { id } = useParams();
|
||||||
|
const theme = useTheme();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
const [dashboard, setDashboard] = useState(null);
|
||||||
|
const [layout, setLayout] = useState([]);
|
||||||
|
|
||||||
|
const componentMap = {
|
||||||
|
'radar_chart': RadarChartComponent,
|
||||||
|
'polar_chart': PolarChartComponent,
|
||||||
|
'pie_chart': PieChartComponent,
|
||||||
|
'bar_chart': BarChart,
|
||||||
|
'bubble_chart': BubbleChart,
|
||||||
|
'line_chart': LineChartComponent,
|
||||||
|
'doughnut_chart': DoughnutChart,
|
||||||
|
'dynamic_chart': DynamicChart,
|
||||||
|
'financial_chart': FinancialChart,
|
||||||
|
'grid_view': GridViewComponent,
|
||||||
|
'scatter_chart': ScatterChartComponent,
|
||||||
|
'todo_chart': ToDoChartComponent
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchDashboard = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const response = await DashboardBuilderService.getById(id);
|
||||||
|
|
||||||
|
setDashboard({
|
||||||
|
name: response.dashboard_name,
|
||||||
|
dashboardLine: response.dashbord1_Line
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.dashbord1_Line && response.dashbord1_Line[0]?.model) {
|
||||||
|
const modelData = response.dashbord1_Line[0].model;
|
||||||
|
const parsedModel = JSON.parse(modelData);
|
||||||
|
|
||||||
|
if (Array.isArray(parsedModel.dashboard)) {
|
||||||
|
const dashboardLayout = parsedModel.dashboard.map((widget, index) => {
|
||||||
|
const componentName = widget.component || "Unknown";
|
||||||
|
const typeIdentifier = componentName.toLowerCase().replace(' ', '_');
|
||||||
|
const Component = componentMap[typeIdentifier] || null;
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: `widget-${index}`,
|
||||||
|
x: widget.x || 0,
|
||||||
|
y: widget.y || 0,
|
||||||
|
w: widget.cols || 6,
|
||||||
|
h: widget.rows || 8,
|
||||||
|
name: widget.name || componentName,
|
||||||
|
component: Component,
|
||||||
|
chartTitle: widget.chartTitle || widget.name || componentName,
|
||||||
|
showLegend: widget.showLegend !== undefined ? widget.showLegend : true,
|
||||||
|
showLabel: widget.showLabel !== undefined ? widget.showLabel : true,
|
||||||
|
xAxis: widget.xAxis || 'Month',
|
||||||
|
yAxis: widget.yAxis || 'Value'
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
setLayout(dashboardLayout);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching dashboard:", error);
|
||||||
|
setError("Failed to load dashboard. Please try again later.");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (id) {
|
||||||
|
fetchDashboard();
|
||||||
|
}
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
const getWidgetStyle = (widget) => {
|
||||||
|
const columnWidth = 100 / 6;
|
||||||
|
const rowHeight = 40;
|
||||||
|
|
||||||
|
return {
|
||||||
|
position: 'absolute',
|
||||||
|
left: `${widget.x * columnWidth}%`,
|
||||||
|
top: `${widget.y * rowHeight}px`,
|
||||||
|
width: `${widget.w * columnWidth}%`,
|
||||||
|
height: `${widget.h * rowHeight}px`,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
height: '100vh',
|
||||||
|
backgroundColor: theme.palette.background.default
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CircularProgress />
|
||||||
|
<Typography variant="h6" sx={{ ml: 2 }}>
|
||||||
|
Loading Dashboard...
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
height: '100vh',
|
||||||
|
flexDirection: 'column',
|
||||||
|
backgroundColor: theme.palette.background.default
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="h5" color="error" gutterBottom>
|
||||||
|
Error Loading Dashboard
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body1">{error}</Typography>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={() => navigate(-1)}
|
||||||
|
sx={{ mt: 2 }}
|
||||||
|
>
|
||||||
|
Go Back
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{
|
||||||
|
padding: 3,
|
||||||
|
backgroundColor: theme.palette.background.default,
|
||||||
|
minHeight: '100vh'
|
||||||
|
}}>
|
||||||
|
<Box sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
mb: 3
|
||||||
|
}}>
|
||||||
|
<Typography variant="h4" color="text.primary">
|
||||||
|
{dashboard?.name || 'Dashboard View'}
|
||||||
|
</Typography>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
startIcon={<ArrowBackIcon />}
|
||||||
|
onClick={() => navigate(-1)}
|
||||||
|
>
|
||||||
|
Back
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{layout.length === 0 ? (
|
||||||
|
<Card sx={{ textAlign: 'center', p: 5 }}>
|
||||||
|
<Typography variant="h6">No widgets found in this dashboard.</Typography>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: 'relative',
|
||||||
|
minHeight: '800px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{layout.map((widget) => {
|
||||||
|
const Component = widget.component;
|
||||||
|
const style = getWidgetStyle(widget);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
key={widget.id}
|
||||||
|
sx={{
|
||||||
|
...style,
|
||||||
|
padding: 1,
|
||||||
|
boxSizing: 'border-box'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Card sx={{
|
||||||
|
height: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
boxShadow: theme.shadows[2]
|
||||||
|
}}>
|
||||||
|
<CardHeader
|
||||||
|
title={widget.chartTitle}
|
||||||
|
titleTypographyProps={{ variant: 'h6' }}
|
||||||
|
sx={{
|
||||||
|
backgroundColor: theme.palette.background.paper,
|
||||||
|
borderBottom: `1px solid ${theme.palette.divider}`
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<CardContent sx={{
|
||||||
|
flex: 1,
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
p: 2,
|
||||||
|
pt: 1,
|
||||||
|
overflow: 'hidden'
|
||||||
|
}}>
|
||||||
|
{Component ? (
|
||||||
|
<Box sx={{
|
||||||
|
flexGrow: 1,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center'
|
||||||
|
}}>
|
||||||
|
<Component
|
||||||
|
chartTitle={widget.chartTitle}
|
||||||
|
showLegend={widget.showLegend}
|
||||||
|
showLabel={widget.showLabel}
|
||||||
|
xAxis={widget.xAxis}
|
||||||
|
yAxis={widget.yAxis}
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
) : (
|
||||||
|
<Box sx={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
height: '100%'
|
||||||
|
}}>
|
||||||
|
<Typography variant="body2" color="text.secondary">
|
||||||
|
Widget type "{widget.name}" not available
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ViewDashboard;
|
||||||
@@ -0,0 +1,182 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
|
import moment from "moment";
|
||||||
|
import { toast, Toaster } from "react-hot-toast";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardHeader,
|
||||||
|
CardActions,
|
||||||
|
Grid,
|
||||||
|
Typography,
|
||||||
|
CircularProgress,
|
||||||
|
Alert,
|
||||||
|
IconButton,
|
||||||
|
Modal
|
||||||
|
} from "@mui/material";
|
||||||
|
import {
|
||||||
|
Add as AddIcon,
|
||||||
|
CalendarToday as CalendarIcon,
|
||||||
|
AccessTime as TimeIcon,
|
||||||
|
Apps as AppsIcon,
|
||||||
|
Delete as DeleteIcon,
|
||||||
|
Edit as EditIcon
|
||||||
|
} from "@mui/icons-material";
|
||||||
|
import DashboardBuilderService from "../../../ApiServices/DashboardBuilderServices";
|
||||||
|
|
||||||
|
const DashboardRunnerAll = () => {
|
||||||
|
const [data, setData] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
|
||||||
|
const [selectedDashboard, setSelectedDashboard] = useState(null);
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { id } = useParams();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchDashboard();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const fetchDashboard = () => {
|
||||||
|
setLoading(true);
|
||||||
|
DashboardBuilderService.getAllDash()
|
||||||
|
.then((response) => {
|
||||||
|
setData(response);
|
||||||
|
})
|
||||||
|
.catch(() => setError("No data available"))
|
||||||
|
.finally(() => setLoading(false));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (id) => {
|
||||||
|
setDeleteModalOpen(false);
|
||||||
|
// Dashboard3Service.deleteField(id).then(() => {
|
||||||
|
// fetchDashboard();
|
||||||
|
// toast.success("Deleted successfully");
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAdd = () => {
|
||||||
|
navigate("/dashboard/dashboard-new-all");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (id) => {
|
||||||
|
navigate(`../dashrunner/${id}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ p: 3 }}>
|
||||||
|
<Box sx={{ display: "flex", justifyContent: "space-between", mb: 3 }}>
|
||||||
|
<Typography variant="h4">All Dashboards</Typography>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
startIcon={<AddIcon />}
|
||||||
|
onClick={handleAdd}
|
||||||
|
>
|
||||||
|
Dashboard Builder
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{loading && (
|
||||||
|
<Box sx={{ display: "flex", justifyContent: "center", my: 4 }}>
|
||||||
|
<CircularProgress />
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<Alert severity="error" sx={{ mb: 3 }}>
|
||||||
|
{error}
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Grid container spacing={3}>
|
||||||
|
{data.map((app, index) => (
|
||||||
|
<Grid item xs={12} sm={6} md={4} key={index}>
|
||||||
|
<Card
|
||||||
|
sx={{
|
||||||
|
height: "100%",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
cursor: "pointer",
|
||||||
|
"&:hover": {
|
||||||
|
boxShadow: 6,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onClick={() => handleEdit(app.id)}
|
||||||
|
>
|
||||||
|
<CardHeader
|
||||||
|
avatar={<AppsIcon />}
|
||||||
|
title={
|
||||||
|
<Typography noWrap fontWeight="bold">
|
||||||
|
{app.dashboard_name}
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<CardContent sx={{ flexGrow: 1 }}>
|
||||||
|
<Typography variant="body2" color="text.secondary" noWrap>
|
||||||
|
{app.description || "No description available"}
|
||||||
|
</Typography>
|
||||||
|
</CardContent>
|
||||||
|
<CardActions sx={{ justifyContent: "space-between" }}>
|
||||||
|
<Typography variant="caption" color="text.secondary">
|
||||||
|
<TimeIcon fontSize="small" sx={{ verticalAlign: "middle", mr: 0.5 }} />
|
||||||
|
{moment(app.updatedAt).format("DD/MM/YYYY")}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="caption" color="text.secondary">
|
||||||
|
<CalendarIcon fontSize="small" sx={{ verticalAlign: "middle", mr: 0.5 }} />
|
||||||
|
{moment(app.createdAt).format("HH:mm:ss")}
|
||||||
|
</Typography>
|
||||||
|
</CardActions>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Delete Confirmation Modal */}
|
||||||
|
<Modal
|
||||||
|
open={deleteModalOpen}
|
||||||
|
onClose={() => setDeleteModalOpen(false)}
|
||||||
|
>
|
||||||
|
<Box sx={{
|
||||||
|
position: "absolute",
|
||||||
|
top: "50%",
|
||||||
|
left: "50%",
|
||||||
|
transform: "translate(-50%, -50%)",
|
||||||
|
width: 400,
|
||||||
|
bgcolor: "background.paper",
|
||||||
|
boxShadow: 24,
|
||||||
|
p: 4,
|
||||||
|
borderRadius: 1
|
||||||
|
}}>
|
||||||
|
<Typography variant="h6" gutterBottom>
|
||||||
|
Delete Confirmation
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body1" sx={{ mb: 3 }}>
|
||||||
|
Are you sure you want to delete this dashboard?
|
||||||
|
</Typography>
|
||||||
|
<Box sx={{ display: "flex", justifyContent: "flex-end", gap: 2 }}>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
onClick={() => setDeleteModalOpen(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="error"
|
||||||
|
onClick={() => handleDelete(selectedDashboard?.id)}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<Toaster position="top-right" />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DashboardRunnerAll;
|
||||||
548
src/components/dashboardnew/editdashboard/editdashboard.js
Normal file
548
src/components/dashboardnew/editdashboard/editdashboard.js
Normal file
@@ -0,0 +1,548 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
Checkbox,
|
||||||
|
Dialog,
|
||||||
|
DialogActions,
|
||||||
|
DialogContent,
|
||||||
|
DialogTitle,
|
||||||
|
FormControl,
|
||||||
|
FormControlLabel,
|
||||||
|
IconButton,
|
||||||
|
TextField,
|
||||||
|
Typography,
|
||||||
|
useTheme
|
||||||
|
} from '@mui/material';
|
||||||
|
import {
|
||||||
|
DragIndicator as DragIndicatorIcon,
|
||||||
|
Edit as EditIcon,
|
||||||
|
Delete as DeleteIcon,
|
||||||
|
Add as AddIcon,
|
||||||
|
Cancel as CancelIcon,
|
||||||
|
Save as SaveIcon,
|
||||||
|
ArrowBack as ArrowBackIcon
|
||||||
|
} from '@mui/icons-material';
|
||||||
|
import { Responsive, WidthProvider } from 'react-grid-layout';
|
||||||
|
import { useNavigate, useParams } from 'react-router-dom';
|
||||||
|
import DashboardBuilderService from "../../../ApiServices/DashboardBuilderServices";
|
||||||
|
|
||||||
|
// Import chart components
|
||||||
|
import LineChartComponent from '../gadgets/linechart';
|
||||||
|
import PieChartComponent from '../gadgets/piechart';
|
||||||
|
import PolarChartComponent from '../gadgets/polarchart';
|
||||||
|
import RadarChartComponent from '../gadgets/radarchart';
|
||||||
|
import BubbleChart from '../gadgets/bubblechart';
|
||||||
|
import BarChart from '../gadgets/barchart';
|
||||||
|
import DoughnutChart from '../gadgets/doughnut';
|
||||||
|
import DynamicChart from '../gadgets/dynamicchart';
|
||||||
|
import FinancialChart from '../gadgets/financialchart';
|
||||||
|
import GridViewComponent from '../gadgets/gridview';
|
||||||
|
import ScatterChartComponent from '../gadgets/scatterchart';
|
||||||
|
import ToDoChartComponent from '../gadgets/todochart';
|
||||||
|
|
||||||
|
const ResponsiveGridLayout = WidthProvider(Responsive);
|
||||||
|
|
||||||
|
const EditNewDash = () => {
|
||||||
|
const { id } = useParams();
|
||||||
|
const theme = useTheme();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
|
const [editModalOpen, setEditModalOpen] = useState(false);
|
||||||
|
const [currentEditWidget, setCurrentEditWidget] = useState({});
|
||||||
|
const [dashboardName, setDashboardName] = useState('');
|
||||||
|
const [dashboardLine, setDashboardLine] = useState([]);
|
||||||
|
const [dashboardlineId, setDashboardlineId] = useState(null);
|
||||||
|
const [dashboardWidgets, setDashboardWidgets] = useState([]);
|
||||||
|
|
||||||
|
const availableWidgets = [
|
||||||
|
{ identifier: 'radar_chart', name: 'Radar Chart' },
|
||||||
|
{ identifier: 'polar_chart', name: 'Polar Chart' },
|
||||||
|
{ identifier: 'pie_chart', name: 'Pie Chart' },
|
||||||
|
{ identifier: 'bar_chart', name: 'Bar Chart' },
|
||||||
|
{ identifier: 'bubble_chart', name: 'Bubble Chart' },
|
||||||
|
{ identifier: 'line_chart', name: 'Line Chart' },
|
||||||
|
{ identifier: 'doughnut_chart', name: 'Doughnut Chart' },
|
||||||
|
{ identifier: 'dynamic_chart', name: 'Dynamic Chart' },
|
||||||
|
{ identifier: 'financial_chart', name: 'Financial Chart' },
|
||||||
|
{ identifier: 'grid_view', name: 'Grid View' },
|
||||||
|
{ identifier: 'scatter_chart', name: 'Scatter Chart' },
|
||||||
|
{ identifier: 'todo_chart', name: 'Todo Chart' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const componentMap = {
|
||||||
|
'radar_chart': RadarChartComponent,
|
||||||
|
'polar_chart': PolarChartComponent,
|
||||||
|
'pie_chart': PieChartComponent,
|
||||||
|
'bar_chart': BarChart,
|
||||||
|
'bubble_chart': BubbleChart,
|
||||||
|
'line_chart': LineChartComponent,
|
||||||
|
'doughnut_chart': DoughnutChart,
|
||||||
|
'dynamic_chart': DynamicChart,
|
||||||
|
'financial_chart': FinancialChart,
|
||||||
|
'grid_view': GridViewComponent,
|
||||||
|
'scatter_chart': ScatterChartComponent,
|
||||||
|
'todo_chart': ToDoChartComponent
|
||||||
|
};
|
||||||
|
|
||||||
|
const componentNameToIdentifier = {
|
||||||
|
'RadarChartComponent': 'radar_chart',
|
||||||
|
'PolarChartComponent': 'polar_chart',
|
||||||
|
'PieChartComponent': 'pie_chart',
|
||||||
|
'BarChart': 'bar_chart',
|
||||||
|
'BubbleChart': 'bubble_chart',
|
||||||
|
'LineChartComponent': 'line_chart',
|
||||||
|
'DoughnutChart': 'doughnut_chart',
|
||||||
|
'DynamicChart': 'dynamic_chart',
|
||||||
|
'FinancialChart': 'financial_chart',
|
||||||
|
'GridViewComponent': 'grid_view',
|
||||||
|
'ScatterChartComponent': 'scatter_chart',
|
||||||
|
'ToDoChartComponent': 'todo_chart'
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchDashboardData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const fetchDashboardData = async () => {
|
||||||
|
try {
|
||||||
|
const response = await DashboardBuilderService.getById(id);
|
||||||
|
setDashboardlineId(response.dashbord1_Line[0].id);
|
||||||
|
setDashboardName(response.dashboard_name);
|
||||||
|
setDashboardLine(response.dashbord1_Line);
|
||||||
|
|
||||||
|
if (response.dashbord1_Line && response.dashbord1_Line[0]?.model) {
|
||||||
|
const modelData = response.dashbord1_Line[0].model;
|
||||||
|
const parsedModel = JSON.parse(modelData);
|
||||||
|
|
||||||
|
const transformedWidgets = Array.isArray(parsedModel.dashboard)
|
||||||
|
? parsedModel.dashboard.map((widget, index) => {
|
||||||
|
const widgetId = widget.i || `widget-${index}`;
|
||||||
|
const typeIdentifier = widget.type ||
|
||||||
|
(widget.component && typeof widget.component === 'string'
|
||||||
|
? componentNameToIdentifier[widget.component] || widget.component.toLowerCase().replace(' ', '_')
|
||||||
|
: 'unknown');
|
||||||
|
|
||||||
|
const componentRef = componentMap[typeIdentifier] || null;
|
||||||
|
|
||||||
|
return {
|
||||||
|
i: widgetId,
|
||||||
|
x: widget.x || 0,
|
||||||
|
y: widget.y || 0,
|
||||||
|
w: widget.cols || 6,
|
||||||
|
h: widget.rows || 8,
|
||||||
|
type: typeIdentifier,
|
||||||
|
name: widget.name || availableWidgets.find(w => w.identifier === typeIdentifier)?.name || 'Unknown Widget',
|
||||||
|
component: componentRef,
|
||||||
|
chartTitle: widget.chartTitle,
|
||||||
|
showLegend: widget.showLegend,
|
||||||
|
showLabel: widget.showLabel,
|
||||||
|
xAxis: widget.xAxis,
|
||||||
|
yAxis: widget.yAxis
|
||||||
|
};
|
||||||
|
})
|
||||||
|
: [];
|
||||||
|
|
||||||
|
setDashboardWidgets(transformedWidgets);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching dashboard data:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDragStart = (e, widget) => {
|
||||||
|
e.dataTransfer.setData('widgetType', widget.identifier);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDragOver = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDrop = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const widgetType = e.dataTransfer.getData('widgetType');
|
||||||
|
if (!widgetType) return;
|
||||||
|
|
||||||
|
const gridRect = e.currentTarget.getBoundingClientRect();
|
||||||
|
const x = Math.floor((e.clientX - gridRect.left) / 100) * 2;
|
||||||
|
const y = Math.floor((e.clientY - gridRect.top) / 100) * 2;
|
||||||
|
|
||||||
|
const newWidgetId = `widget-${Date.now()}`;
|
||||||
|
const componentRef = componentMap[widgetType] || null;
|
||||||
|
const widgetName = availableWidgets.find(w => w.identifier === widgetType)?.name || 'Unknown Widget';
|
||||||
|
|
||||||
|
const newWidget = {
|
||||||
|
i: newWidgetId,
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
w: 6,
|
||||||
|
h: 8,
|
||||||
|
type: widgetType,
|
||||||
|
name: widgetName,
|
||||||
|
component: componentRef,
|
||||||
|
chartTitle: widgetName,
|
||||||
|
showLegend: true,
|
||||||
|
showLabel: true,
|
||||||
|
xAxis: 'Month',
|
||||||
|
yAxis: 'Value'
|
||||||
|
};
|
||||||
|
|
||||||
|
setDashboardWidgets(prev => [...prev, newWidget]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onLayoutChange = (layout) => {
|
||||||
|
const updatedWidgets = dashboardWidgets.map(widget => {
|
||||||
|
const updatedPosition = layout.find(item => item.i === widget.i);
|
||||||
|
if (updatedPosition) {
|
||||||
|
return { ...widget, x: updatedPosition.x, y: updatedPosition.y, w: updatedPosition.w, h: updatedPosition.h };
|
||||||
|
}
|
||||||
|
return widget;
|
||||||
|
});
|
||||||
|
setDashboardWidgets(updatedWidgets);
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeWidget = (widgetId) => {
|
||||||
|
setDashboardWidgets(prev => prev.filter(widget => widget.i !== widgetId));
|
||||||
|
};
|
||||||
|
|
||||||
|
const editWidget = (widget) => {
|
||||||
|
setCurrentEditWidget(widget);
|
||||||
|
setEditModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveWidgetChanges = () => {
|
||||||
|
setDashboardWidgets(prev =>
|
||||||
|
prev.map(widget =>
|
||||||
|
widget.i === currentEditWidget.i ? { ...widget, ...currentEditWidget } : widget
|
||||||
|
)
|
||||||
|
);
|
||||||
|
setEditModalOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
navigate('/dashboard/dashboard-new-all');
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveDashboard = async () => {
|
||||||
|
try {
|
||||||
|
if (!dashboardWidgets || dashboardWidgets.length === 0) {
|
||||||
|
console.warn("No widgets to save.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const dashboardData = {
|
||||||
|
dashboard: dashboardWidgets.map(widget => ({
|
||||||
|
i: widget.i,
|
||||||
|
x: widget.x ?? 0,
|
||||||
|
y: widget.y ?? 0,
|
||||||
|
w: widget.w ?? 6,
|
||||||
|
h: widget.h ?? 8,
|
||||||
|
type: widget.type,
|
||||||
|
name: widget.name || "Unknown",
|
||||||
|
chartTitle: widget.chartTitle,
|
||||||
|
showLegend: widget.showLegend,
|
||||||
|
showLabel: widget.showLabel,
|
||||||
|
xAxis: widget.xAxis,
|
||||||
|
yAxis: widget.yAxis
|
||||||
|
})),
|
||||||
|
};
|
||||||
|
|
||||||
|
const dashbord1_Line = {
|
||||||
|
model: JSON.stringify(dashboardData)
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await DashboardBuilderService.updateLineData(dashboardlineId, dashbord1_Line);
|
||||||
|
|
||||||
|
if (response) {
|
||||||
|
navigate('/dashboard/dashboard-new-all');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error saving dashboard:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100vh',
|
||||||
|
padding: 3,
|
||||||
|
backgroundColor: theme.palette.background.default
|
||||||
|
}}>
|
||||||
|
{/* Toolbar */}
|
||||||
|
<Box sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
width: '100%',
|
||||||
|
marginBottom: 3
|
||||||
|
}}>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
startIcon={<AddIcon />}
|
||||||
|
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||||
|
sx={{ mr: 2 }}
|
||||||
|
>
|
||||||
|
{sidebarOpen ? 'Hide Components' : 'Add Components'}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Typography variant="h5" color="text.primary">
|
||||||
|
{dashboardName}
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Box>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
startIcon={<ArrowBackIcon />}
|
||||||
|
onClick={goBack}
|
||||||
|
sx={{ mr: 2 }}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
startIcon={<SaveIcon />}
|
||||||
|
onClick={saveDashboard}
|
||||||
|
>
|
||||||
|
Save Dashboard
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Main content */}
|
||||||
|
<Box sx={{
|
||||||
|
display: 'flex',
|
||||||
|
flex: 1,
|
||||||
|
width: '100%',
|
||||||
|
overflow: 'hidden'
|
||||||
|
}}>
|
||||||
|
{/* Sidebar */}
|
||||||
|
{sidebarOpen && (
|
||||||
|
<Box sx={{
|
||||||
|
width: 250,
|
||||||
|
backgroundColor: theme.palette.background.paper,
|
||||||
|
padding: 2,
|
||||||
|
overflowY: 'auto',
|
||||||
|
borderRight: `1px solid ${theme.palette.divider}`,
|
||||||
|
boxShadow: theme.shadows[2]
|
||||||
|
}}>
|
||||||
|
<Typography variant="h6" sx={{ marginBottom: 2 }}>
|
||||||
|
Available Components
|
||||||
|
</Typography>
|
||||||
|
<Box sx={{
|
||||||
|
display: 'grid',
|
||||||
|
gap: 1
|
||||||
|
}}>
|
||||||
|
{availableWidgets.map(widget => (
|
||||||
|
<Card
|
||||||
|
key={widget.identifier}
|
||||||
|
sx={{
|
||||||
|
cursor: 'move',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: theme.palette.action.hover
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
draggable
|
||||||
|
onDragStart={(e) => onDragStart(e, widget)}
|
||||||
|
>
|
||||||
|
<CardContent sx={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: '8px !important'
|
||||||
|
}}>
|
||||||
|
<DragIndicatorIcon sx={{ mr: 1, color: theme.palette.text.secondary }} />
|
||||||
|
<Typography variant="body2">{widget.name}</Typography>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Dashboard grid */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
flex: 1,
|
||||||
|
padding: 2,
|
||||||
|
overflow: 'auto',
|
||||||
|
backgroundColor: theme.palette.background.default
|
||||||
|
}}
|
||||||
|
onDragOver={onDragOver}
|
||||||
|
onDrop={onDrop}
|
||||||
|
>
|
||||||
|
<ResponsiveGridLayout
|
||||||
|
className="layout"
|
||||||
|
draggableCancel=".MuiButton-root, .MuiIconButton-root, button, [role='button']"
|
||||||
|
layouts={{
|
||||||
|
lg: dashboardWidgets.map(widget => ({
|
||||||
|
i: widget.i,
|
||||||
|
x: widget.x,
|
||||||
|
y: widget.y,
|
||||||
|
w: widget.w,
|
||||||
|
h: widget.h,
|
||||||
|
minW: 3,
|
||||||
|
minH: 3
|
||||||
|
}))
|
||||||
|
}}
|
||||||
|
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
|
||||||
|
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
|
||||||
|
rowHeight={30}
|
||||||
|
onLayoutChange={onLayoutChange}
|
||||||
|
isDraggable
|
||||||
|
isResizable
|
||||||
|
margin={[20, 20]}
|
||||||
|
>
|
||||||
|
{dashboardWidgets.map(widget => (
|
||||||
|
<Box key={widget.i} sx={{ overflow: 'hidden' }}>
|
||||||
|
<Card sx={{
|
||||||
|
height: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
boxShadow: theme.shadows[2]
|
||||||
|
}}>
|
||||||
|
<Box sx={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: 1,
|
||||||
|
borderBottom: `1px solid ${theme.palette.divider}`,
|
||||||
|
backgroundColor: theme.palette.background.paper
|
||||||
|
}}>
|
||||||
|
<Typography variant="subtitle1" sx={{ fontWeight: 'bold' }}>
|
||||||
|
{widget.name}
|
||||||
|
</Typography>
|
||||||
|
<Box>
|
||||||
|
<IconButton
|
||||||
|
size="small"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
editWidget(widget);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<EditIcon fontSize="small" />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton
|
||||||
|
size="small"
|
||||||
|
color="error"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
removeWidget(widget.i);
|
||||||
|
}}
|
||||||
|
sx={{ ml: 1 }}
|
||||||
|
>
|
||||||
|
<DeleteIcon fontSize="small" />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<CardContent sx={{
|
||||||
|
flex: 1,
|
||||||
|
padding: 2,
|
||||||
|
overflow: 'hidden',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: 'calc(100% - 50px)'
|
||||||
|
}}>
|
||||||
|
{widget.component && (
|
||||||
|
<Box sx={{
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
overflow: 'hidden'
|
||||||
|
}}>
|
||||||
|
<widget.component
|
||||||
|
chartTitle={widget.chartTitle || widget.name}
|
||||||
|
showLegend={widget.showLegend !== undefined ? widget.showLegend : true}
|
||||||
|
showLabel={widget.showLabel !== undefined ? widget.showLabel : true}
|
||||||
|
xAxis={widget.xAxis || 'Month'}
|
||||||
|
yAxis={widget.yAxis || 'Value'}
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</ResponsiveGridLayout>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Edit widget dialog */}
|
||||||
|
<Dialog open={editModalOpen} onClose={() => setEditModalOpen(false)} maxWidth="sm" fullWidth>
|
||||||
|
<DialogTitle>Edit {currentEditWidget?.name}</DialogTitle>
|
||||||
|
<DialogContent dividers>
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 1 }}>
|
||||||
|
<TextField
|
||||||
|
label="Chart Title"
|
||||||
|
fullWidth
|
||||||
|
value={currentEditWidget?.chartTitle || ''}
|
||||||
|
onChange={(e) =>
|
||||||
|
setCurrentEditWidget((prev) => ({ ...prev, chartTitle: e.target.value }))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="X Axis Label"
|
||||||
|
fullWidth
|
||||||
|
value={currentEditWidget?.xAxis || ''}
|
||||||
|
onChange={(e) =>
|
||||||
|
setCurrentEditWidget((prev) => ({ ...prev, xAxis: e.target.value }))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Y Axis Label"
|
||||||
|
fullWidth
|
||||||
|
value={currentEditWidget?.yAxis || ''}
|
||||||
|
onChange={(e) =>
|
||||||
|
setCurrentEditWidget((prev) => ({ ...prev, yAxis: e.target.value }))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<FormControl>
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Checkbox
|
||||||
|
checked={currentEditWidget?.showLegend ?? true}
|
||||||
|
onChange={(e) =>
|
||||||
|
setCurrentEditWidget((prev) => ({ ...prev, showLegend: e.target.checked }))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="Show Legend"
|
||||||
|
/>
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Checkbox
|
||||||
|
checked={currentEditWidget?.showLabel ?? true}
|
||||||
|
onChange={(e) =>
|
||||||
|
setCurrentEditWidget((prev) => ({ ...prev, showLabel: e.target.checked }))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="Show Labels"
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</Box>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={() => setEditModalOpen(false)} startIcon={<CancelIcon />}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={saveWidgetChanges}
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
startIcon={<SaveIcon />}
|
||||||
|
>
|
||||||
|
Save Changes
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EditNewDash;
|
||||||
162
src/components/dashboardnew/editdashboard/editformdashboard.js
Normal file
162
src/components/dashboardnew/editdashboard/editformdashboard.js
Normal file
@@ -0,0 +1,162 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { useNavigate, useParams, useLocation } from 'react-router-dom';
|
||||||
|
import { toast } from 'react-toastify';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
Checkbox,
|
||||||
|
FormControl,
|
||||||
|
FormControlLabel,
|
||||||
|
TextField,
|
||||||
|
Typography,
|
||||||
|
Chip
|
||||||
|
} from '@mui/material';
|
||||||
|
import {
|
||||||
|
Save as SaveIcon,
|
||||||
|
ArrowBack as ArrowBackIcon
|
||||||
|
} from '@mui/icons-material';
|
||||||
|
import DashboardBuilderService from "../../../../src/ApiServices/DashboardBuilderServices";
|
||||||
|
|
||||||
|
const EditFormNewDash = () => {
|
||||||
|
const { id } = useParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
|
const [header, setHeader] = useState({
|
||||||
|
dashboard_name: '',
|
||||||
|
secuirity_profile: '',
|
||||||
|
description: '',
|
||||||
|
add_to_home: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (location.state?.dashboard) {
|
||||||
|
setHeader(location.state.dashboard);
|
||||||
|
} else {
|
||||||
|
getById(id);
|
||||||
|
}
|
||||||
|
}, [id, location.state]);
|
||||||
|
|
||||||
|
const getById = (id) => {
|
||||||
|
DashboardBuilderService.getById(id)
|
||||||
|
.then((data) => {
|
||||||
|
setHeader(data);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error("Error fetching dashboard by ID:", err);
|
||||||
|
toast.error('Failed to fetch dashboard data.');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputChange = (e) => {
|
||||||
|
const { name, value, type, checked } = e.target;
|
||||||
|
setHeader((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[name]: type === 'checkbox' ? checked : value,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const update = async () => {
|
||||||
|
try {
|
||||||
|
const updatedDashboard = await DashboardBuilderService.updateDash(header);
|
||||||
|
if (updatedDashboard) {
|
||||||
|
toast.success('Dashboard updated successfully');
|
||||||
|
navigate('/dashboard/dashboard-new-all');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error updating dashboard:", error);
|
||||||
|
toast.error('Failed to update dashboard.');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
update();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onBack = () => {
|
||||||
|
navigate('/dashboard/dashboard-new-all');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card sx={{ p: 3 }}>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
|
||||||
|
<Typography variant="h5">Dashboard</Typography>
|
||||||
|
<Chip
|
||||||
|
label="Edit Mode"
|
||||||
|
color="info"
|
||||||
|
size="small"
|
||||||
|
sx={{ ml: 2 }}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box component="form" onSubmit={onSubmit}>
|
||||||
|
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 3, mb: 3 }}>
|
||||||
|
<FormControl fullWidth>
|
||||||
|
<TextField
|
||||||
|
label="Dashboard Name"
|
||||||
|
name="dashboard_name"
|
||||||
|
value={header.dashboard_name || ''}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<FormControl fullWidth>
|
||||||
|
<TextField
|
||||||
|
label="Security Profile"
|
||||||
|
name="secuirity_profile"
|
||||||
|
value={header.secuirity_profile || ''}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<FormControl fullWidth sx={{ gridColumn: '1 / -1' }}>
|
||||||
|
<TextField
|
||||||
|
label="Description"
|
||||||
|
name="description"
|
||||||
|
value={header.description || ''}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
multiline
|
||||||
|
rows={3}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Checkbox
|
||||||
|
name="add_to_home"
|
||||||
|
checked={header.add_to_home || false}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label="Add to Dashboard"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'center', gap: 2 }}>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
startIcon={<ArrowBackIcon />}
|
||||||
|
onClick={onBack}
|
||||||
|
>
|
||||||
|
Back
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
startIcon={<SaveIcon />}
|
||||||
|
>
|
||||||
|
Update
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EditFormNewDash;
|
||||||
39
src/components/dashboardnew/gadgets/barchart.js
Normal file
39
src/components/dashboardnew/gadgets/barchart.js
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Box } from '@mui/material';
|
||||||
|
import { Bar } from 'react-chartjs-2';
|
||||||
|
import { registerChartJS, commonChartOptions } from './chartutils';
|
||||||
|
|
||||||
|
registerChartJS();
|
||||||
|
|
||||||
|
const BarChart = () => {
|
||||||
|
const data = {
|
||||||
|
labels: ['Apple', 'Banana', 'Kiwifruit', 'Blueberry', 'Orange', 'Grapes'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Best Fruits',
|
||||||
|
data: [45, 37, 60, 70, 46, 33],
|
||||||
|
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||||
|
borderColor: 'rgba(75, 192, 192, 1)',
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
...commonChartOptions,
|
||||||
|
plugins: {
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Bar Chart',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ height: 400 }}>
|
||||||
|
<Bar data={data} options={options} />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BarChart;
|
||||||
57
src/components/dashboardnew/gadgets/bubblechart.js
Normal file
57
src/components/dashboardnew/gadgets/bubblechart.js
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Box } from '@mui/material';
|
||||||
|
import { Bubble } from 'react-chartjs-2';
|
||||||
|
import { registerChartJS, commonChartOptions } from './chartutils';
|
||||||
|
|
||||||
|
registerChartJS();
|
||||||
|
|
||||||
|
const BubbleChart = () => {
|
||||||
|
const data = {
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
data: [
|
||||||
|
{ x: 10, y: 10, r: 10 },
|
||||||
|
{ x: 15, y: 5, r: 15 },
|
||||||
|
{ x: 26, y: 12, r: 23 },
|
||||||
|
{ x: 7, y: 8, r: 8 },
|
||||||
|
],
|
||||||
|
label: 'Investment Equities',
|
||||||
|
backgroundColor: 'rgba(255, 0, 0, 0.6)',
|
||||||
|
borderColor: 'blue',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: [
|
||||||
|
{ x: 5, y: 15, r: 12 },
|
||||||
|
{ x: 20, y: 7, r: 8 },
|
||||||
|
{ x: 12, y: 18, r: 15 },
|
||||||
|
{ x: 8, y: 6, r: 10 },
|
||||||
|
],
|
||||||
|
label: 'Investment Bonds',
|
||||||
|
backgroundColor: 'rgba(0, 255, 0, 0.6)',
|
||||||
|
borderColor: 'green',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
...commonChartOptions,
|
||||||
|
plugins: {
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Bubble Chart',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
x: { min: 0, max: 30 },
|
||||||
|
y: { min: 0, max: 30 },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ height: 400 }}>
|
||||||
|
<Bubble data={data} options={options} />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BubbleChart;
|
||||||
28
src/components/dashboardnew/gadgets/chartutils.js
Normal file
28
src/components/dashboardnew/gadgets/chartutils.js
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
// chartUtils.js
|
||||||
|
import {
|
||||||
|
Chart as ChartJS,
|
||||||
|
CategoryScale,
|
||||||
|
LinearScale,
|
||||||
|
PointElement,
|
||||||
|
LineElement,
|
||||||
|
BarElement,
|
||||||
|
ArcElement,
|
||||||
|
RadialLinearScale,
|
||||||
|
Title,
|
||||||
|
Tooltip,
|
||||||
|
Legend,
|
||||||
|
} from '../../../variables/chart';
|
||||||
|
|
||||||
|
// chartutils.js
|
||||||
|
import { Chart } from 'chart.js';
|
||||||
|
import { registerables } from 'chart.js';
|
||||||
|
|
||||||
|
export const registerChartJS = () => {
|
||||||
|
Chart.register(...registerables);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export const commonChartOptions = {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
};
|
||||||
49
src/components/dashboardnew/gadgets/doughnut.js
Normal file
49
src/components/dashboardnew/gadgets/doughnut.js
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Box } from '@mui/material';
|
||||||
|
import { Doughnut } from 'react-chartjs-2';
|
||||||
|
import { registerChartJS, commonChartOptions } from './chartutils';
|
||||||
|
|
||||||
|
registerChartJS();
|
||||||
|
|
||||||
|
const DoughnutChart = () => {
|
||||||
|
const data = {
|
||||||
|
labels: ["Download Sales", "In-Store Sales", "Mail-Order Sales"],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
data: [350, 450, 100],
|
||||||
|
backgroundColor: [
|
||||||
|
'rgba(255, 99, 132, 0.6)',
|
||||||
|
'rgba(54, 162, 235, 0.6)',
|
||||||
|
'rgba(255, 206, 86, 0.6)'
|
||||||
|
],
|
||||||
|
borderColor: [
|
||||||
|
'rgba(255, 99, 132, 1)',
|
||||||
|
'rgba(54, 162, 235, 1)',
|
||||||
|
'rgba(255, 206, 86, 1)'
|
||||||
|
],
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
...commonChartOptions,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
position: 'top',
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Doughnut Chart',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ height: 400 }}>
|
||||||
|
<Doughnut data={data} options={options} />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DoughnutChart;
|
||||||
61
src/components/dashboardnew/gadgets/dynamicchart.js
Normal file
61
src/components/dashboardnew/gadgets/dynamicchart.js
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Box, Button } from '@mui/material';
|
||||||
|
import { Bar } from 'react-chartjs-2';
|
||||||
|
import { registerChartJS, commonChartOptions } from './chartutils';
|
||||||
|
|
||||||
|
registerChartJS();
|
||||||
|
|
||||||
|
const DynamicChart = () => {
|
||||||
|
const [chartType, setChartType] = useState('bar');
|
||||||
|
const labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
labels,
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
data: [65, 59, 90, 81, 56, 55, 40],
|
||||||
|
label: 'Series A',
|
||||||
|
backgroundColor: 'rgba(75, 192, 192, 0.6)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: [28, 48, 40, 19, 96, 27, 100],
|
||||||
|
label: 'Series B',
|
||||||
|
backgroundColor: 'rgba(153, 102, 255, 0.6)'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
...commonChartOptions,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: true,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Dynamic Chart',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const randomize = () => {
|
||||||
|
setChartType(prev => prev === 'bar' ? 'line' : 'bar');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ height: 500 }}>
|
||||||
|
<Bar
|
||||||
|
data={data}
|
||||||
|
options={options}
|
||||||
|
type={chartType}
|
||||||
|
/>
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
|
||||||
|
<Button variant="contained" onClick={randomize}>
|
||||||
|
Toggle Chart Type
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DynamicChart;
|
||||||
63
src/components/dashboardnew/gadgets/financialchart.js
Normal file
63
src/components/dashboardnew/gadgets/financialchart.js
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Box } from '@mui/material';
|
||||||
|
import { Line } from 'react-chartjs-2';
|
||||||
|
import { registerChartJS, commonChartOptions } from './chartutils';
|
||||||
|
|
||||||
|
registerChartJS();
|
||||||
|
|
||||||
|
const FinancialChart = ({ data }) => {
|
||||||
|
const defaultData = [
|
||||||
|
{ date: '2024-03-01', price: 120 },
|
||||||
|
{ date: '2024-03-02', price: 125 },
|
||||||
|
{ date: '2024-03-03', price: 130 },
|
||||||
|
{ date: '2024-03-04', price: 128 },
|
||||||
|
{ date: '2024-03-05', price: 135 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const stockData = data?.length > 0 ? data : defaultData;
|
||||||
|
|
||||||
|
const chartData = {
|
||||||
|
labels: stockData.map(item => item.date),
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Stock Price',
|
||||||
|
data: stockData.map(item => item.price),
|
||||||
|
borderColor: 'rgba(75, 192, 192, 1)',
|
||||||
|
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||||
|
fill: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
...commonChartOptions,
|
||||||
|
plugins: {
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Financial Data Chart',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
callbacks: {
|
||||||
|
label: (tooltipItem) => `$${tooltipItem.raw.toFixed(2)}`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
title: { display: true, text: 'Date' },
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
title: { display: true, text: 'Price (USD)' },
|
||||||
|
ticks: { callback: (value) => `$${value.toFixed(2)}` },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ height: 400 }}>
|
||||||
|
<Line data={chartData} options={options} />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FinancialChart;
|
||||||
107
src/components/dashboardnew/gadgets/gridview.js
Normal file
107
src/components/dashboardnew/gadgets/gridview.js
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableContainer,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
Paper,
|
||||||
|
Pagination,
|
||||||
|
CircularProgress,
|
||||||
|
Typography
|
||||||
|
} from '@mui/material';
|
||||||
|
|
||||||
|
const GridViewComponent = () => {
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [data, setData] = useState([]);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
const [selectedRow, setSelectedRow] = useState(null);
|
||||||
|
|
||||||
|
// Simulated data - replace with actual API call
|
||||||
|
const mockData = [
|
||||||
|
{ usrGrp: 1, groupName: 'Admin', groupDesc: 'Administrators', groupLevel: 1, status: 'Active', updateDateFormated: '2023-01-01' },
|
||||||
|
{ usrGrp: 2, groupName: 'Users', groupDesc: 'Regular users', groupLevel: 2, status: 'Active', updateDateFormated: '2023-01-02' },
|
||||||
|
{ usrGrp: 3, groupName: 'Guests', groupDesc: 'Guest access', groupLevel: 3, status: 'Inactive', updateDateFormated: '2023-01-03' },
|
||||||
|
];
|
||||||
|
|
||||||
|
// Simulate data loading
|
||||||
|
React.useEffect(() => {
|
||||||
|
setLoading(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
setData(mockData);
|
||||||
|
setLoading(false);
|
||||||
|
}, 1000);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handlePageChange = (event, value) => {
|
||||||
|
setPage(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRowClick = (row) => {
|
||||||
|
setSelectedRow(row);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ p: 3 }}>
|
||||||
|
<Typography variant="h4" gutterBottom>
|
||||||
|
User Group Maintenance
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
|
||||||
|
<CircularProgress />
|
||||||
|
</Box>
|
||||||
|
) : error ? (
|
||||||
|
<Typography color="error">{error}</Typography>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<TableContainer component={Paper}>
|
||||||
|
<Table>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>User Group No</TableCell>
|
||||||
|
<TableCell>Group Name</TableCell>
|
||||||
|
<TableCell>Description</TableCell>
|
||||||
|
<TableCell>Group Level</TableCell>
|
||||||
|
<TableCell>Status</TableCell>
|
||||||
|
<TableCell>Updated Date</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{data.map((row) => (
|
||||||
|
<TableRow
|
||||||
|
key={row.usrGrp}
|
||||||
|
hover
|
||||||
|
selected={selectedRow?.usrGrp === row.usrGrp}
|
||||||
|
onClick={() => handleRowClick(row)}
|
||||||
|
>
|
||||||
|
<TableCell>{row.usrGrp}</TableCell>
|
||||||
|
<TableCell>{row.groupName}</TableCell>
|
||||||
|
<TableCell>{row.groupDesc}</TableCell>
|
||||||
|
<TableCell>{row.groupLevel}</TableCell>
|
||||||
|
<TableCell>{row.status}</TableCell>
|
||||||
|
<TableCell>{row.updateDateFormated}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
|
||||||
|
<Pagination
|
||||||
|
count={3}
|
||||||
|
page={page}
|
||||||
|
onChange={handlePageChange}
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default GridViewComponent;
|
||||||
69
src/components/dashboardnew/gadgets/linechart.js
Normal file
69
src/components/dashboardnew/gadgets/linechart.js
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Box, Button } from '@mui/material';
|
||||||
|
import { Line } from 'react-chartjs-2';
|
||||||
|
import { registerChartJS, commonChartOptions } from './chartutils';
|
||||||
|
|
||||||
|
registerChartJS();
|
||||||
|
|
||||||
|
const LineChartComponent = ({
|
||||||
|
chartTitle = 'Line Chart',
|
||||||
|
showLegend = true,
|
||||||
|
showLabel = true,
|
||||||
|
xAxis = 'Category',
|
||||||
|
yAxis = 'Value'
|
||||||
|
}) => {
|
||||||
|
const [data, setData] = useState({
|
||||||
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Series A',
|
||||||
|
data: [65, 59, 80, 81, 56, 55, 40],
|
||||||
|
borderColor: 'rgba(75, 192, 192, 1)',
|
||||||
|
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||||
|
tension: 0.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Series B',
|
||||||
|
data: [28, 48, 40, 19, 86, 27, 90],
|
||||||
|
borderColor: 'rgba(54, 162, 235, 1)',
|
||||||
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
||||||
|
tension: 0.1
|
||||||
|
},
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
...commonChartOptions,
|
||||||
|
plugins: {
|
||||||
|
legend: { display: showLegend },
|
||||||
|
title: { display: true, text: chartTitle },
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
x: { title: { display: showLabel, text: xAxis } },
|
||||||
|
y: { title: { display: showLabel, text: yAxis } }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const randomize = () => {
|
||||||
|
setData(prev => ({
|
||||||
|
...prev,
|
||||||
|
datasets: prev.datasets.map(dataset => ({
|
||||||
|
...dataset,
|
||||||
|
data: Array.from({ length: 7 }, () => Math.floor(Math.random() * 100) + 1)
|
||||||
|
}))
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ height: 400 }}>
|
||||||
|
<Line data={data} options={options} />
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
|
||||||
|
<Button variant="outlined" onClick={randomize}>
|
||||||
|
Randomize Data
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LineChartComponent;
|
||||||
37
src/components/dashboardnew/gadgets/piechart.js
Normal file
37
src/components/dashboardnew/gadgets/piechart.js
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Box } from '@mui/material';
|
||||||
|
import { Pie } from 'react-chartjs-2';
|
||||||
|
import { registerChartJS, commonChartOptions } from './chartutils';
|
||||||
|
|
||||||
|
registerChartJS();
|
||||||
|
|
||||||
|
const PieChartComponent = () => {
|
||||||
|
const data = {
|
||||||
|
labels: ['SciFi', 'Drama', 'Comedy'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
data: [30, 50, 20],
|
||||||
|
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
...commonChartOptions,
|
||||||
|
plugins: {
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Pie Chart',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ height: 400 }}>
|
||||||
|
<Pie data={data} options={options} />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PieChartComponent;
|
||||||
43
src/components/dashboardnew/gadgets/polarchart.js
Normal file
43
src/components/dashboardnew/gadgets/polarchart.js
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Box } from '@mui/material';
|
||||||
|
import { PolarArea } from 'react-chartjs-2';
|
||||||
|
import { registerChartJS, commonChartOptions } from './chartutils';
|
||||||
|
|
||||||
|
registerChartJS();
|
||||||
|
|
||||||
|
const PolarChartComponent = () => {
|
||||||
|
const data = {
|
||||||
|
labels: ['Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
data: [300, 500, 100, 40, 120],
|
||||||
|
backgroundColor: [
|
||||||
|
'rgba(255, 99, 132, 0.6)',
|
||||||
|
'rgba(54, 162, 235, 0.6)',
|
||||||
|
'rgba(255, 206, 86, 0.6)',
|
||||||
|
'rgba(75, 192, 192, 0.6)',
|
||||||
|
'rgba(153, 102, 255, 0.6)',
|
||||||
|
],
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
...commonChartOptions,
|
||||||
|
plugins: {
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Polar Area Chart',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ height: 400 }}>
|
||||||
|
<PolarArea data={data} options={options} />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PolarChartComponent;
|
||||||
44
src/components/dashboardnew/gadgets/radarchart.js
Normal file
44
src/components/dashboardnew/gadgets/radarchart.js
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Box } from '@mui/material';
|
||||||
|
import { Radar } from 'react-chartjs-2';
|
||||||
|
import { registerChartJS, commonChartOptions } from './chartutils';
|
||||||
|
|
||||||
|
registerChartJS();
|
||||||
|
|
||||||
|
const RadarChartComponent = () => {
|
||||||
|
const data = {
|
||||||
|
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Series A',
|
||||||
|
data: [65, 59, 90, 81, 56, 55, 40],
|
||||||
|
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||||
|
borderColor: 'rgba(75, 192, 192, 1)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Series B',
|
||||||
|
data: [28, 48, 40, 19, 96, 27, 100],
|
||||||
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
||||||
|
borderColor: 'rgba(54, 162, 235, 1)',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
...commonChartOptions,
|
||||||
|
plugins: {
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Radar Chart',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ height: 400 }}>
|
||||||
|
<Radar data={data} options={options} />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RadarChartComponent;
|
||||||
45
src/components/dashboardnew/gadgets/scatterchart.js
Normal file
45
src/components/dashboardnew/gadgets/scatterchart.js
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Box } from '@mui/material';
|
||||||
|
import { Scatter } from 'react-chartjs-2';
|
||||||
|
import { registerChartJS, commonChartOptions } from './chartutils';
|
||||||
|
|
||||||
|
registerChartJS();
|
||||||
|
|
||||||
|
const ScatterChartComponent = () => {
|
||||||
|
const data = {
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Scatter Dataset',
|
||||||
|
data: [
|
||||||
|
{ x: 1, y: 1 },
|
||||||
|
{ x: 2, y: 3 },
|
||||||
|
{ x: 3, y: -2 },
|
||||||
|
{ x: 4, y: 4 },
|
||||||
|
{ x: 5, y: -3 },
|
||||||
|
],
|
||||||
|
backgroundColor: 'rgba(255, 99, 132, 0.6)',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
...commonChartOptions,
|
||||||
|
plugins: {
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Scatter Chart',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
x: { type: 'linear', position: 'bottom' },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ height: 400 }}>
|
||||||
|
<Scatter data={data} options={options} />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ScatterChartComponent;
|
||||||
93
src/components/dashboardnew/gadgets/todochart.js
Normal file
93
src/components/dashboardnew/gadgets/todochart.js
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
const ToDoChartComponent = () => {
|
||||||
|
const [todo, setTodo] = useState('');
|
||||||
|
const [todoList, setTodoList] = useState(['todo 1']);
|
||||||
|
|
||||||
|
const addTodo = (newTodo) => {
|
||||||
|
if (newTodo.trim()) {
|
||||||
|
setTodoList([...todoList, newTodo]);
|
||||||
|
setTodo('');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeTodo = (index) => {
|
||||||
|
// Don't allow removing the first item ('todo 1')
|
||||||
|
if (index === 0) return;
|
||||||
|
|
||||||
|
const updatedTodoList = todoList.filter((_, i) => i !== index);
|
||||||
|
setTodoList(updatedTodoList);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ padding: '15px' }}>
|
||||||
|
<table className="table" style={{ width: '100%' }}>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style={{ width: '10%' }}>#</th>
|
||||||
|
<th style={{ width: '70%' }}>Item</th>
|
||||||
|
<th style={{ width: '20%', textAlign: 'right' }}>Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{todoList.map((todoItem, index) => (
|
||||||
|
<tr key={index}>
|
||||||
|
<td>{index + 1}</td>
|
||||||
|
<td>{todoItem}</td>
|
||||||
|
<td style={{ textAlign: 'right' }}>
|
||||||
|
{index !== 0 && ( // Don't show delete button for the first item
|
||||||
|
<button
|
||||||
|
onClick={() => removeTodo(index)}
|
||||||
|
style={{
|
||||||
|
background: 'none',
|
||||||
|
border: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
|
color: '#ff4444'
|
||||||
|
}}
|
||||||
|
title="Remove item"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>
|
||||||
|
<input
|
||||||
|
value={todo}
|
||||||
|
onChange={(e) => setTodo(e.target.value)}
|
||||||
|
placeholder="Add new todo"
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
padding: '8px',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '4px'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td style={{ textAlign: 'right' }}>
|
||||||
|
<button
|
||||||
|
onClick={() => addTodo(todo)}
|
||||||
|
style={{
|
||||||
|
background: 'none',
|
||||||
|
border: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
|
color: '#4CAF50',
|
||||||
|
fontSize: '1.2em'
|
||||||
|
}}
|
||||||
|
title="Add item"
|
||||||
|
disabled={!todo.trim()}
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ToDoChartComponent;
|
||||||
61
src/context/SystemParameterContext.js
Normal file
61
src/context/SystemParameterContext.js
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
import React, { createContext, useContext, useState, useEffect } from 'react';
|
||||||
|
import { getSysParameter } from '../ApiServices/SytemparameterApi';
|
||||||
|
|
||||||
|
const SystemParameterContext = createContext();
|
||||||
|
|
||||||
|
export const useSystemParameters = () => {
|
||||||
|
const context = useContext(SystemParameterContext);
|
||||||
|
if (!context) {
|
||||||
|
throw new Error('useSystemParameters must be used within a SystemParameterProvider');
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SystemParameterProvider = ({ children }) => {
|
||||||
|
const [systemParameters, setSystemParameters] = useState(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchSystemParameters = async () => {
|
||||||
|
try {
|
||||||
|
const data = await getSysParameter(1); // Assuming 1 is the default ID for system parameters
|
||||||
|
setSystemParameters(data);
|
||||||
|
console.log("system parameters data ", data);
|
||||||
|
setError(null);
|
||||||
|
} catch (err) {
|
||||||
|
setError('Failed to fetch system parameters');
|
||||||
|
console.error('Error fetching system parameters:', err);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchSystemParameters();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const value = {
|
||||||
|
systemParameters,
|
||||||
|
loading,
|
||||||
|
error,
|
||||||
|
refetch: async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const data = await getSysParameter(1);
|
||||||
|
setSystemParameters(data);
|
||||||
|
setError(null);
|
||||||
|
} catch (err) {
|
||||||
|
setError('Failed to fetch system parameters');
|
||||||
|
console.error('Error fetching system parameters:', err);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SystemParameterContext.Provider value={value}>
|
||||||
|
{children}
|
||||||
|
</SystemParameterContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -17,5 +17,3 @@ code {
|
|||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||||
monospace;
|
monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
16
src/index.js
16
src/index.js
@@ -1,22 +1,12 @@
|
|||||||
// index.js
|
// index.js
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { createRoot } from 'react-dom/client';
|
import { BrowserRouter as Router } from 'react-router-dom';
|
||||||
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
import './index.css';
|
import './index.css';
|
||||||
import ErrorBoundary from './ErrorBoundary';
|
import ErrorBoundary from './ErrorBoundary';
|
||||||
|
|
||||||
const theme = createTheme({
|
import { createRoot } from 'react-dom/client';
|
||||||
// your theme configuration
|
|
||||||
});
|
|
||||||
|
|
||||||
const container = document.getElementById('root');
|
const container = document.getElementById('root');
|
||||||
const root = createRoot(container);
|
const root = createRoot(container);
|
||||||
|
root.render(<App />);
|
||||||
root.render(
|
|
||||||
<ErrorBoundary>
|
|
||||||
<ThemeProvider theme={theme}>
|
|
||||||
<App />
|
|
||||||
</ThemeProvider>
|
|
||||||
</ErrorBoundary>
|
|
||||||
);
|
|
||||||
@@ -1,19 +1,23 @@
|
|||||||
|
|
||||||
|
|
||||||
const TOKEN_KEY = 'authToken';
|
const TOKEN_KEY = 'CurrentUser';
|
||||||
|
|
||||||
|
|
||||||
export const setToken = (token) => {
|
export const setCurrentUser = (user) => {
|
||||||
localStorage.setItem(TOKEN_KEY, token);
|
localStorage.setItem(TOKEN_KEY, user);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const getCurrentUser = () => {
|
||||||
|
return JSON.parse(localStorage.getItem(TOKEN_KEY));
|
||||||
|
};
|
||||||
|
|
||||||
export const getToken = () => {
|
export const getToken = () => {
|
||||||
return localStorage.getItem(TOKEN_KEY);
|
const userData = localStorage.getItem(TOKEN_KEY);
|
||||||
|
return userData ? JSON.parse(userData).token : null;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export const removeToken = () => {
|
export const removeCurrentUser = () => {
|
||||||
localStorage.removeItem(TOKEN_KEY);
|
localStorage.removeItem(TOKEN_KEY);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -21,3 +25,7 @@ export const removeToken = () => {
|
|||||||
export const isTokenAvailable = () => {
|
export const isTokenAvailable = () => {
|
||||||
return !!localStorage.getItem(TOKEN_KEY); // Returns true if token exists
|
return !!localStorage.getItem(TOKEN_KEY); // Returns true if token exists
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
233
src/variables/chart.js
Normal file
233
src/variables/chart.js
Normal file
@@ -0,0 +1,233 @@
|
|||||||
|
/*!
|
||||||
|
=========================================================
|
||||||
|
* Argon Dashboard React - v1.2.4
|
||||||
|
=========================================================
|
||||||
|
* Product Page: https://www.creative-tim.com/product/argon-dashboard-react
|
||||||
|
* Copyright 2024 Creative Tim (https://www.creative-tim.com)
|
||||||
|
* Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
|
||||||
|
* Coded by Creative Tim
|
||||||
|
=========================================================
|
||||||
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// =========================================================
|
||||||
|
// Chart.js v3+ compatible version - UPDATED
|
||||||
|
// =========================================================
|
||||||
|
|
||||||
|
// Colors
|
||||||
|
const colors = {
|
||||||
|
gray: {
|
||||||
|
100: "#f6f9fc",
|
||||||
|
200: "#e9ecef",
|
||||||
|
300: "#dee2e6",
|
||||||
|
400: "#ced4da",
|
||||||
|
500: "#adb5bd",
|
||||||
|
600: "#8898aa",
|
||||||
|
700: "#525f7f",
|
||||||
|
800: "#32325d",
|
||||||
|
900: "#212529",
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
default: "#172b4d",
|
||||||
|
primary: "#5e72e4",
|
||||||
|
secondary: "#f4f5f7",
|
||||||
|
info: "#11cdef",
|
||||||
|
success: "#2dce89",
|
||||||
|
danger: "#f5365c",
|
||||||
|
warning: "#fb6340",
|
||||||
|
},
|
||||||
|
black: "#12263F",
|
||||||
|
white: "#FFFFFF",
|
||||||
|
transparent: "transparent",
|
||||||
|
};
|
||||||
|
|
||||||
|
// Methods
|
||||||
|
|
||||||
|
// Chart.js global options
|
||||||
|
function chartOptions() {
|
||||||
|
const mode = "light";
|
||||||
|
|
||||||
|
return {
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
mode: "index",
|
||||||
|
intersect: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
scales: {
|
||||||
|
// New scale configuration format for Chart.js v3+
|
||||||
|
y: {
|
||||||
|
grid: {
|
||||||
|
borderDash: [2],
|
||||||
|
borderDashOffset: [2],
|
||||||
|
color: mode === "dark" ? colors.gray[900] : colors.gray[300],
|
||||||
|
drawBorder: false,
|
||||||
|
drawTicks: false,
|
||||||
|
zeroLineColor: mode === "dark" ? colors.gray[900] : colors.gray[300],
|
||||||
|
zeroLineBorderDash: [2],
|
||||||
|
zeroLineBorderDashOffset: [2],
|
||||||
|
},
|
||||||
|
beginAtZero: true,
|
||||||
|
ticks: {
|
||||||
|
padding: 10,
|
||||||
|
callback: function (value) {
|
||||||
|
if (!(value % 10)) {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
x: {
|
||||||
|
grid: {
|
||||||
|
drawBorder: false,
|
||||||
|
drawOnChartArea: false,
|
||||||
|
drawTicks: false,
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
padding: 20,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Parse global options
|
||||||
|
function parseOptions(Chart, options) {
|
||||||
|
// Update defaults for Chart.js v3+
|
||||||
|
Chart.defaults.color = colors.gray[600];
|
||||||
|
Chart.defaults.font.family = 'Open Sans';
|
||||||
|
Chart.defaults.font.size = 13;
|
||||||
|
|
||||||
|
// Apply any additional options
|
||||||
|
if (options) {
|
||||||
|
for (var item in options) {
|
||||||
|
if (typeof options[item] !== "object") {
|
||||||
|
Chart.defaults[item] = options[item];
|
||||||
|
} else {
|
||||||
|
parseOptions(Chart.defaults[item], options[item]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Example 1 of Chart inside src/views/Index.js (Sales value - Card)
|
||||||
|
const chartExample1 = {
|
||||||
|
options: {
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
grid: {
|
||||||
|
color: colors.gray[900],
|
||||||
|
zeroLineColor: colors.gray[900],
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
callback: function (value) {
|
||||||
|
if (!(value % 10)) {
|
||||||
|
return "$" + value + "k";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
tooltip: {
|
||||||
|
callbacks: {
|
||||||
|
label: function (context) {
|
||||||
|
var label = context.dataset.label || "";
|
||||||
|
var yLabel = context.parsed.y;
|
||||||
|
var content = "";
|
||||||
|
|
||||||
|
if (context.chart.data.datasets.length > 1) {
|
||||||
|
content += label;
|
||||||
|
}
|
||||||
|
|
||||||
|
content += "$" + yLabel + "k";
|
||||||
|
return content;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data1: {
|
||||||
|
labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: "Performance",
|
||||||
|
data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
|
||||||
|
borderColor: colors.theme.primary,
|
||||||
|
backgroundColor: "rgba(94, 114, 228, 0.1)",
|
||||||
|
tension: 0.4,
|
||||||
|
fill: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
data2: {
|
||||||
|
labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: "Performance",
|
||||||
|
data: [0, 20, 5, 25, 10, 30, 15, 40, 40],
|
||||||
|
borderColor: colors.theme.primary,
|
||||||
|
backgroundColor: "rgba(94, 114, 228, 0.1)",
|
||||||
|
tension: 0.4,
|
||||||
|
fill: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// Example 2 of Chart inside src/views/Index.js (Total orders - Card)
|
||||||
|
const chartExample2 = {
|
||||||
|
options: {
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
ticks: {
|
||||||
|
callback: function (value) {
|
||||||
|
if (!(value % 10)) {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
tooltip: {
|
||||||
|
callbacks: {
|
||||||
|
label: function (context) {
|
||||||
|
var label = context.dataset.label || "";
|
||||||
|
var yLabel = context.parsed.y;
|
||||||
|
var content = "";
|
||||||
|
if (context.chart.data.datasets.length > 1) {
|
||||||
|
content += label;
|
||||||
|
}
|
||||||
|
content += yLabel;
|
||||||
|
return content;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
labels: ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: "Sales",
|
||||||
|
data: [25, 20, 30, 22, 17, 29],
|
||||||
|
backgroundColor: colors.theme.warning,
|
||||||
|
borderRadius: 6,
|
||||||
|
maxBarThickness: 10,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
chartOptions, // used inside src/views/Index.js
|
||||||
|
parseOptions, // used inside src/views/Index.js
|
||||||
|
chartExample1, // used inside src/views/Index.js
|
||||||
|
chartExample2, // used inside src/views/Index.js
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user