" create new project of subscription admin panel"
commit
1df8ac4cf8
|
|
@ -0,0 +1,23 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
# Getting Started with Create React App
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,71 @@
|
|||
{
|
||||
"name": "daily-legder-subscription",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.11.4",
|
||||
"@emotion/styled": "^11.11.5",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.6.0",
|
||||
"@fortawesome/react-fontawesome": "^0.2.2",
|
||||
"@mui/icons-material": "^5.15.20",
|
||||
"@mui/material": "^5.15.21",
|
||||
"@mui/styled-engine-sc": "^6.0.0-alpha.18",
|
||||
"@mui/x-data-grid": "^7.7.0",
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^16.0.1",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"apexcharts": "^3.49.1",
|
||||
"axios": "^1.7.2",
|
||||
"chart.js": "^4.4.3",
|
||||
"date-fns": "^3.6.0",
|
||||
"emoji-picker-react": "^4.9.4",
|
||||
"gsap": "^3.12.5",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"react": "^18.3.1",
|
||||
"react-apexcharts": "^1.4.1",
|
||||
"react-beautiful-dnd": "^13.1.1",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-datetime-picker": "^6.0.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.2.1",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-modern-drawer": "^1.3.1",
|
||||
"react-router-dom": "^6.23.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-select": "^5.8.0",
|
||||
"react-toastify": "^10.0.6",
|
||||
"socket.io-client": "^4.7.5",
|
||||
"styled-components": "^6.1.11",
|
||||
"sweetalert2": "^11.11.0",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.19",
|
||||
"postcss": "^8.4.38",
|
||||
"tailwindcss": "^3.4.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||
<title>React App</title>
|
||||
|
||||
<!-- <style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
|
||||
</style> -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
# ---> Node
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
.cache
|
||||
|
||||
# Docusaurus cache and generated files
|
||||
.docusaurus
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import React from "react";
|
||||
import "./App.css";
|
||||
import { BrowserRouter as Router } from "react-router-dom";
|
||||
import RouteManager from "./utils/secure-route/routeManager/RouteManager";
|
||||
import { AuthProvider } from "./utils/secure-route/AuthContext";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
import Footer from "./utils/secure-route/components/Footer";
|
||||
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<>
|
||||
<ToastContainer />
|
||||
<Router>
|
||||
<AuthProvider>
|
||||
<RouteManager />
|
||||
</AuthProvider>
|
||||
<Footer />
|
||||
</Router>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
# crud-manager-v1
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import APIManager from "../../utils/api-manager/APIManager";
|
||||
import schema from "../Schema/Feature.json";
|
||||
|
||||
function Features() {
|
||||
return (
|
||||
<div className="container mt-5 mb-5">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<APIManager
|
||||
data={schema}
|
||||
actionBtnName="New Features "
|
||||
createFormTitle="Add Features"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Features;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react'
|
||||
|
||||
function HomePage() {
|
||||
return (
|
||||
<div style={{justifyContent:'center' , textAlign:'center' , alignItems:'center', fontSize:'20px', fontWeight:'700'} }>Welcome to Home Page</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HomePage
|
||||
|
|
@ -0,0 +1,422 @@
|
|||
import React from 'react';
|
||||
|
||||
|
||||
|
||||
const containerStyle = {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(3, 1fr)',
|
||||
gap: '20px',
|
||||
padding: '20px',
|
||||
};
|
||||
|
||||
const sectionStyle = {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
border: '1px solid #e0e0e0',
|
||||
borderRadius: '10px',
|
||||
backgroundColor: '#f9f9f9',
|
||||
padding: '20px',
|
||||
};
|
||||
|
||||
const tableStyle = {
|
||||
width: '100%',
|
||||
borderCollapse: 'collapse',
|
||||
marginTop: '10px',
|
||||
};
|
||||
|
||||
const thStyle = {
|
||||
backgroundColor: '#f1f1f1',
|
||||
fontWeight: 'bold',
|
||||
border: '1px solid #ddd',
|
||||
padding: '8px',
|
||||
};
|
||||
|
||||
const tdStyle = {
|
||||
border: '1px solid #ddd',
|
||||
padding: '8px',
|
||||
};
|
||||
|
||||
const titleStyle = {
|
||||
justifyContent: 'center', textAlign: 'center', alignItems: 'center', fontSize: '20px', color: '#2084e9'
|
||||
};
|
||||
|
||||
const totalStyle = { backgroundColor: "#d6ebff", fontWeight: "bold", border: "1px solid #ccc", padding: "8px" };
|
||||
|
||||
|
||||
const data = {
|
||||
dailyCashOut: [
|
||||
{ name: 'Business on report', amount: '$0.00' },
|
||||
{ name: 'Tax on Report', amount: '$0.00' },
|
||||
{ name: 'Taxable Sales', amount: '$0.00' },
|
||||
{ name: 'Non-Taxable Sales', amount: '$0.00' },
|
||||
],
|
||||
Others: [
|
||||
{ name: 'Total payout', amount: '$0.00' },
|
||||
{ name: 'Total other', amount: '$0.00' },
|
||||
{ name: 'Refund', amount: '$0.00' },
|
||||
{ name: 'Check', amount: '$0.00' },
|
||||
{ name: 'Credit card', amount: '$0.00' },
|
||||
{ name: 'Customer credits', amount: '$0.00' },
|
||||
{ name: 'Customer debits', amount: '$0.00' },
|
||||
{ name: 'Register cash to account for', amount: '$0.00' },
|
||||
{ name: 'Actaul register cash', amount: '$0.00' },
|
||||
{ name: 'Business over/short', amount: '$0.00' },
|
||||
],
|
||||
lotteryTickets: [
|
||||
{ no: 545, value: 10, gameName: 'WIN $4000000', gameNumber: 42, bookNumber: 5, yesterday: 200, today: 150, soldQty: 10, todaySold: 5 },
|
||||
{ no: 546, value: 10, gameName: 'WIN $4000000', gameNumber: 42, bookNumber: 5, yesterday: 200, today: 150, soldQty: 10, todaySold: 5 },
|
||||
{ no: 54, soldQty: 10, todaySold: 5 },
|
||||
],
|
||||
ActiveBooks: [
|
||||
{ no: 1, gameNumber: '56', bookNumber: '42', Count: '1', $value: '10' }
|
||||
],
|
||||
|
||||
ReturedBooks: [
|
||||
{ no: 1, gameNumber: '54', TicketNumber: '37', $value: '5' }
|
||||
],
|
||||
GasDailyReport: [
|
||||
{ Gas: "Premium", Gallon: 0, Price: '$0.00', Revenue: '$0.00' },
|
||||
{ Gas: "Regular", Gallon: 0, Price: '$0.00', Revenue: '$0.00' },
|
||||
{ Gas: "Diesel", Gallon: 0, Price: '$0.00', Revenue: '$0.00' },
|
||||
{ Gas: "Total", Gallon: 0, Price: '-', Revenue: '$0.00' }
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function ReportUI() {
|
||||
const dailyLotteryReportData = [
|
||||
{
|
||||
todayInvoice: "Online Net Sale: $0.00",
|
||||
yesterdayInvoice: "$0.00",
|
||||
debitCreditCard: "Debit/Credit Card: $0.00",
|
||||
},
|
||||
{
|
||||
todayInvoice: "Online Cashing: $0.00",
|
||||
yesterdayInvoice: "$0.00",
|
||||
debitCreditCard: "Credits Sale: $0.00",
|
||||
},
|
||||
{
|
||||
todayInvoice: "Instant Cashing: $0.00",
|
||||
yesterdayInvoice: "$0.00",
|
||||
debitCreditCard: "Debits Sale: $0.00",
|
||||
},
|
||||
{
|
||||
todayInvoice: "Instant Sale: $0.00",
|
||||
yesterdayInvoice: "$0.00",
|
||||
debitCreditCard: "Instant Balance: $0.00",
|
||||
},
|
||||
{
|
||||
todayInvoice: "",
|
||||
yesterdayInvoice: "",
|
||||
debitCreditCard: "Online Balance: $0.00",
|
||||
},
|
||||
];
|
||||
|
||||
// Footer rows for totals
|
||||
const dailyLotteryReportFooter = [
|
||||
{
|
||||
todayInvoice: "Total Lottery Sales ($0.00)",
|
||||
yesterdayInvoice: "$0.00",
|
||||
debitCreditCard: "Total Balance: $0.00",
|
||||
},
|
||||
{
|
||||
todayInvoice: "Total Lottery Cashing ($0.00)",
|
||||
yesterdayInvoice: "$0.00",
|
||||
debitCreditCard: "Over/Short: $0.00",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<div style={{ padding: '20px', backgroundColor: '#f2f2f2' }} >
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
// boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
|
||||
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
borderRadius: '30px',
|
||||
marginBottom: '20px',
|
||||
width: '1364px',
|
||||
height: '37.86px',
|
||||
padding: '0 20px',
|
||||
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.3)',
|
||||
background: '#ffffff',
|
||||
}}
|
||||
>
|
||||
|
||||
<h6 style={{ margin: 0 }}>Humbingo Store</h6>
|
||||
|
||||
|
||||
<p style={{ margin: 0, fontWeight: 'bold' }}>Shift: 1</p>
|
||||
|
||||
|
||||
<p style={{ margin: 0 }}>Report Date: 25/11/2024</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div style={containerStyle}>
|
||||
{/* DAILY REGISTER CASH OUT */}
|
||||
<div style={sectionStyle}>
|
||||
<h3 style={titleStyle}>💵 DAILY REGISTER CASH OUT</h3>
|
||||
<table style={tableStyle}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={thStyle}>Name</th>
|
||||
<th style={thStyle}>Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.dailyCashOut.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td style={tdStyle}>{item.name}</td>
|
||||
<td style={tdStyle}>{item.amount}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* Cash Purchase/Expense Section */}
|
||||
<div
|
||||
style={{
|
||||
marginTop: '20px',
|
||||
padding: '10px',
|
||||
border: '1px solid #e0e0e0',
|
||||
borderRadius: '5px',
|
||||
backgroundColor: '#ffffff',
|
||||
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
|
||||
}}
|
||||
>
|
||||
<h4 style={titleStyle}>💸 Cash Purchase/Expense</h4>
|
||||
<table style={tableStyle}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={thStyle}>No.</th>
|
||||
<th style={thStyle}>Vendor</th>
|
||||
<th style={thStyle}>Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<div style={sectionStyle}>
|
||||
<h3 style={titleStyle}>Others</h3>
|
||||
<table style={tableStyle}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={thStyle}>Name</th>
|
||||
<th style={thStyle}>Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.Others.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td style={tdStyle}>{item.name}</td>
|
||||
<td style={tdStyle}>{item.amount}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* DAILY LOTTERY REPORT */}
|
||||
<div style={sectionStyle}>
|
||||
<h3 style={titleStyle}>🎰 DAILY LOTTERY REPORT</h3>
|
||||
<table style={tableStyle}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={thStyle}>Today Invoice</th>
|
||||
<th style={thStyle}>Yesterday Invoice</th>
|
||||
<th style={thStyle}>Debit/Credit Card</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
{dailyLotteryReportData.map((row, index) => (
|
||||
<tr key={index}>
|
||||
<td style={tdStyle}>{row.todayInvoice}</td>
|
||||
<td style={tdStyle}>{row.yesterdayInvoice}</td>
|
||||
<td style={tdStyle}>{row.debitCreditCard}</td>
|
||||
</tr>
|
||||
))}
|
||||
|
||||
{/* Footer rows */}
|
||||
{dailyLotteryReportFooter.map((row, index) => (
|
||||
<tr key={`footer-${index}`}>
|
||||
<td style={totalStyle}>{row.todayInvoice}</td>
|
||||
<td style={totalStyle}>{row.yesterdayInvoice}</td>
|
||||
<td style={totalStyle}>{row.debitCreditCard}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<h4 style={titleStyle}>📗 ACTIVATED BOOKS</h4>
|
||||
<table style={tableStyle}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={thStyle}>Game Number</th>
|
||||
<th style={thStyle}>Book Number</th>
|
||||
<th style={thStyle}>Count</th>
|
||||
<th style={thStyle}>$value</th>
|
||||
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.ActiveBooks.map((Book, index) => (
|
||||
<tr key={index}>
|
||||
|
||||
<td style={tdStyle}>{Book.gameNumber}</td>
|
||||
<td style={tdStyle}>{Book.bookNumber}</td>
|
||||
<td style={tdStyle}>{Book.Count}</td>
|
||||
<td style={tdStyle}>{Book.$value}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h4 style={titleStyle}>📕 RETURNED BOOKS</h4>
|
||||
<table style={tableStyle}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={thStyle}>Game Number</th>
|
||||
<th style={thStyle}>Ticket Number</th>
|
||||
|
||||
<th style={thStyle}>$value</th>
|
||||
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.ReturedBooks.map((ReturedBook, index) => (
|
||||
<tr key={index}>
|
||||
|
||||
<td style={tdStyle}>{ReturedBook.gameNumber}</td>
|
||||
<td style={tdStyle}>{ReturedBook.TicketNumber}</td>
|
||||
|
||||
<td style={tdStyle}>{ReturedBook.$value}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* GAS DAILY REPORT */}
|
||||
<div style={sectionStyle}>
|
||||
<h3 style={titleStyle}>⛽ GAS DAILY REPORT</h3>
|
||||
<table style={tableStyle}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={thStyle}>Gas</th>
|
||||
<th style={thStyle}>Gallon</th>
|
||||
<th style={thStyle}>Price</th>
|
||||
<th style={thStyle}>Revenue</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.GasDailyReport.map((Gas, index) => (
|
||||
<tr key={index}>
|
||||
<td style={tdStyle}>{Gas.Gas}</td>
|
||||
<td style={tdStyle}>{Gas.Gallon}</td>
|
||||
<td style={tdStyle}>{Gas.Price}</td>
|
||||
<td style={tdStyle}>{Gas.Revenue}</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr>
|
||||
<td colSpan={4} style={tdStyle}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<span><strong>Cash</strong></span>
|
||||
<span><strong>{0}</strong></span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={4} style={tdStyle}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<span><strong>DCR payments</strong></span>
|
||||
<span><strong>{0}</strong></span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={4} style={tdStyle}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<span><strong>Credit Card</strong></span>
|
||||
<span><strong>{0}</strong></span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* LOTTERY TICKETS */}
|
||||
<div style={sectionStyle}>
|
||||
<h3 style={titleStyle}>🎟 LOTTERY TICKETS</h3>
|
||||
<table style={tableStyle}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={thStyle}>No.</th>
|
||||
<th style={thStyle}>Value</th>
|
||||
<th style={thStyle}>Game Name</th>
|
||||
<th style={thStyle}>Game Number</th>
|
||||
<th style={thStyle}>Book Number</th>
|
||||
<th style={thStyle}>Yesterday</th>
|
||||
<th style={thStyle}>Today</th>
|
||||
<th style={thStyle}>Quantity Sold</th>
|
||||
<th style={thStyle}>Today Sold</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.lotteryTickets.map((ticket, index) => (
|
||||
<tr key={index}>
|
||||
<td style={tdStyle}>{ticket.no}</td>
|
||||
<td style={tdStyle}>{ticket.value}</td>
|
||||
<td style={tdStyle}>{ticket.gameName}</td>
|
||||
<td style={tdStyle}>{ticket.gameNumber}</td>
|
||||
<td style={tdStyle}>{ticket.bookNumber}</td>
|
||||
<td style={tdStyle}>{ticket.yesterday}</td>
|
||||
<td style={tdStyle}>{ticket.today}</td>
|
||||
<td style={tdStyle}>{ticket.soldQty}</td>
|
||||
<td style={tdStyle}>{ticket.todaySold}</td>
|
||||
</tr>
|
||||
))}
|
||||
|
||||
<tr>
|
||||
<td colSpan={7} style={{ ...tdStyle, textAlign: 'right', fontWeight: 'bold' }}>Grand Total</td>
|
||||
<td style={tdStyle}><strong>20</strong></td>
|
||||
<td style={tdStyle}><strong>10</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ReportUI;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
{
|
||||
"api": "featureData",
|
||||
"showField": [
|
||||
{
|
||||
"label": "Title",
|
||||
"key": "title"
|
||||
},
|
||||
{
|
||||
"label": "Description",
|
||||
"key": "description"
|
||||
}
|
||||
],
|
||||
"createField": [
|
||||
{
|
||||
"label": "Title",
|
||||
"type": "text",
|
||||
"varient": "standard",
|
||||
"name": "title"
|
||||
},
|
||||
{
|
||||
"label": "Details",
|
||||
"type": "text",
|
||||
"varient": "standard",
|
||||
"name": "details"
|
||||
}
|
||||
],
|
||||
"editField": [
|
||||
{
|
||||
"label": "Title",
|
||||
"type": "text",
|
||||
"varient": "standard",
|
||||
"name": "title"
|
||||
},
|
||||
{
|
||||
"label": "Description",
|
||||
"type": "text",
|
||||
"varient": "standard",
|
||||
"name": "description"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
{
|
||||
"api": "subscriptionsData",
|
||||
"showField": [
|
||||
{
|
||||
"label": "Title",
|
||||
"key": "title"
|
||||
},
|
||||
{
|
||||
"label": "Details",
|
||||
"key": "details"
|
||||
},
|
||||
{
|
||||
"label": "Amount",
|
||||
"key": "amount"
|
||||
},
|
||||
{
|
||||
"label": "inc features",
|
||||
"key": "inc_features_titles"
|
||||
},
|
||||
{
|
||||
"label": "Enable",
|
||||
"key": "enable"
|
||||
},
|
||||
{
|
||||
"label": "Default",
|
||||
"key": "default"
|
||||
}
|
||||
],
|
||||
"createField": [
|
||||
{
|
||||
"label": "Title",
|
||||
"type": "text",
|
||||
"varient": "standard",
|
||||
"name": "title"
|
||||
},
|
||||
{
|
||||
"label": "Details",
|
||||
"type": "text",
|
||||
"varient": "standard",
|
||||
"name": "details"
|
||||
},
|
||||
{
|
||||
"label": "Enable",
|
||||
"type": "text",
|
||||
"varient": "standard",
|
||||
"name": "enable"
|
||||
},
|
||||
{
|
||||
"label": "Default",
|
||||
"type": "text",
|
||||
"varient": "standard",
|
||||
"name": "default"
|
||||
},
|
||||
{
|
||||
"label": "Amount",
|
||||
"type": "number",
|
||||
"varient": "standard",
|
||||
"name": "amount"
|
||||
},
|
||||
{
|
||||
"label": "inc features",
|
||||
"type": "multi-select",
|
||||
"varient": "standard",
|
||||
"name": "inc_features",
|
||||
"search": {
|
||||
"api": "featureData",
|
||||
"label": "title",
|
||||
"key": "id"
|
||||
}
|
||||
}
|
||||
],
|
||||
"editField": [
|
||||
{
|
||||
"label": "Title",
|
||||
"type": "text",
|
||||
"varient": "standard",
|
||||
"name": "title"
|
||||
},
|
||||
{
|
||||
"label": "Details",
|
||||
"type": "text",
|
||||
"varient": "standard",
|
||||
"name": "details"
|
||||
},
|
||||
{
|
||||
"label": "Enable",
|
||||
"type": "text",
|
||||
"varient": "standard",
|
||||
"name": "enable"
|
||||
},
|
||||
{
|
||||
"label": "Default",
|
||||
"type": "text",
|
||||
"varient": "standard",
|
||||
"name": "default"
|
||||
},
|
||||
{
|
||||
"label": "Amount",
|
||||
"type": "number",
|
||||
"varient": "standard",
|
||||
"name": "amount"
|
||||
},
|
||||
{
|
||||
"label": "inc features",
|
||||
"type": "multi-select",
|
||||
"varient": "standard",
|
||||
"name": "inc_features",
|
||||
"search": {
|
||||
"api": "featureData",
|
||||
"label": "title",
|
||||
"key": "id"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import APIManager from "../../utils/api-manager/APIManager";
|
||||
import schema from "../Schema/Subscription.json";
|
||||
|
||||
function Subscription() {
|
||||
return (
|
||||
<div className="container mt-5 mb-5">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<APIManager
|
||||
data={schema}
|
||||
actionBtnName="New Subscription "
|
||||
createFormTitle="Add Subscription"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Subscription;
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
import React, { useState, useContext } from 'react';
|
||||
import { TextField, Button, Container, Typography, Grid, Paper, IconButton, InputAdornment } from '@mui/material';
|
||||
import { Visibility, VisibilityOff } from '@mui/icons-material';
|
||||
import { toast } from 'react-toastify';
|
||||
import AuthContext from '../utils/secure-route/AuthContext';
|
||||
import useApi from '../utils/api-manager/Helper/useApi';
|
||||
import {jwtDecode} from "jwt-decode";
|
||||
|
||||
|
||||
const ChangePassword = () => {
|
||||
const { authToken } = useContext(AuthContext);
|
||||
const { Post } = useApi();
|
||||
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [showNewPassword, setShowNewPassword] = useState(false);
|
||||
const [errors, setErrors] = useState({ newPassword: '' });
|
||||
|
||||
const validate = () => {
|
||||
let isValid = true;
|
||||
const newErrors = { newPassword: '' };
|
||||
|
||||
if (!newPassword) {
|
||||
newErrors.newPassword = 'New password is required.';
|
||||
isValid = false;
|
||||
} else if (newPassword.length < 6) {
|
||||
newErrors.newPassword = 'New password must be at least 6 characters long.';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return isValid;
|
||||
};
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!validate()) return;
|
||||
|
||||
try {
|
||||
const userId = authToken ? jwtDecode(authToken.access).user_id : null;
|
||||
if (!userId) {
|
||||
toast.error('User ID not found. Please log in again.');
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
userId,
|
||||
new_password: newPassword
|
||||
};
|
||||
|
||||
await Post(
|
||||
'changeMyPassword',
|
||||
payload,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${authToken.access}`
|
||||
}
|
||||
}
|
||||
);
|
||||
toast.success('Password changed successfully.');
|
||||
setNewPassword('');
|
||||
} catch (error) {
|
||||
if (error.response) {
|
||||
console.error('Server response:', error.response);
|
||||
toast.error(error.response.data.message || 'Error changing password.');
|
||||
} else {
|
||||
toast.error('Error changing password.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container component="main" maxWidth="xs">
|
||||
<Paper elevation={3} style={{ padding: '16px' }}>
|
||||
|
||||
<Typography variant="h5" gutterBottom>Change Password</Typography>
|
||||
{/* <h1>Plaese enter your new password. we will set new password for this account. </h1> */}
|
||||
<form onSubmit={handleSubmit} noValidate>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
required
|
||||
fullWidth
|
||||
label="New Password"
|
||||
type={showNewPassword ? 'text' : 'password'}
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
error={!!errors.newPassword}
|
||||
helperText={errors.newPassword}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
edge="end"
|
||||
onClick={() => setShowNewPassword(prev => !prev)}
|
||||
aria-label="toggle password visibility"
|
||||
>
|
||||
{showNewPassword ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
>
|
||||
Change Account Password
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChangePassword;
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import Subscription from "../components/Subscription/Subscription";
|
||||
import HomePage from '../components/Home/HomePage'
|
||||
import Login from "../utils/secure-route/components/Login";
|
||||
|
||||
import PasswordResetConfirm from '../config/PasswordResetConfirms'
|
||||
import ForgotPassword from '../config/ForgotPassword'
|
||||
import Report from "../components/Report/Report";
|
||||
import Features from "../components/Feature/Features";
|
||||
|
||||
|
||||
const routes = [
|
||||
{
|
||||
"path": "/",
|
||||
"component": HomePage,
|
||||
"auth": true,
|
||||
},
|
||||
{
|
||||
"path": "/login",
|
||||
"component": Login,
|
||||
"auth":true,
|
||||
},
|
||||
{
|
||||
"path": "/forgot-password",
|
||||
"component": ForgotPassword,
|
||||
"auth":false,
|
||||
},
|
||||
{
|
||||
"path":"/pass-reset/:temp_token",
|
||||
"component": PasswordResetConfirm,
|
||||
"auth":false,
|
||||
},
|
||||
{
|
||||
"path": "/subscription",
|
||||
"component": Subscription,
|
||||
"auth":true,
|
||||
},
|
||||
|
||||
{
|
||||
"path": "/feature",
|
||||
"component": Features,
|
||||
"auth":true,
|
||||
}
|
||||
]
|
||||
export const getRoutes = () => routes;
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
import React, { useState } from "react";
|
||||
import { Container, TextField, Typography, Paper, Button } from "@mui/material";
|
||||
import logo from "../utils/secure-route/logo.png";
|
||||
import { toast } from "react-toastify";
|
||||
import axios from "axios";
|
||||
import config from "../config/Global.json";
|
||||
import { validateEmail } from "../utils/api-manager/Helper/helper";
|
||||
|
||||
const ForgotPassword = () => {
|
||||
const [email, setEmail] = useState("");
|
||||
const [emailError, setEmailError] = useState("");
|
||||
|
||||
|
||||
const apiBaseUrl = config.api.host;
|
||||
const passwordResetEndpoint = config.api.PasswordReset;
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!validateEmail(email)) {
|
||||
setEmailError("Please enter a valid email address.");
|
||||
return;
|
||||
}
|
||||
|
||||
setEmailError("");
|
||||
|
||||
|
||||
// console.log("Request URL:", `${apiBaseUrl}${passwordResetEndpoint}`);
|
||||
// console.log("Sending payload:", { email });
|
||||
|
||||
try {
|
||||
const response = await axios.post(
|
||||
`${apiBaseUrl}${passwordResetEndpoint}`,
|
||||
{ email }
|
||||
);
|
||||
|
||||
|
||||
console.log("Response:", response.data);
|
||||
toast.success("Password reset request sent successfully.");
|
||||
setEmail("");
|
||||
} catch (error) {
|
||||
|
||||
// console.error("Request failed:", error.response ? error.response.data : error.message);
|
||||
toast.error("Failed to send password reset request. Please try again.");
|
||||
}
|
||||
|
||||
|
||||
if (validateEmail(email)) {
|
||||
setEmailError("");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container component="main" maxWidth="xs">
|
||||
<Paper
|
||||
elevation={3}
|
||||
sx={{
|
||||
marginTop: 8,
|
||||
padding: 4,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{/* Logo */}
|
||||
<img
|
||||
src={logo}
|
||||
alt="Logo"
|
||||
style={{ height: 100, width: 150, marginBottom: 20 }}
|
||||
/>
|
||||
<Typography component="h1" variant="h5">
|
||||
Forgot Password
|
||||
</Typography>
|
||||
<form style={{ width: "100%" }} onSubmit={handleSubmit}>
|
||||
<TextField
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
name="email"
|
||||
label="Email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
error={!!emailError}
|
||||
helperText={emailError}
|
||||
/>
|
||||
<br />
|
||||
<Button variant="contained" color="primary" fullWidth type="submit">
|
||||
Forgot Password
|
||||
</Button>
|
||||
</form>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default ForgotPassword;
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"api": {
|
||||
"host": "http://192.168.29.221:8000",
|
||||
|
||||
"token": "/auth/token/",
|
||||
"refreshToken": "/auth/token/refresh/",
|
||||
"PasswordReset":"/api/v1/passwordReset/",
|
||||
"confirmPassword": "/auth/pass-reset/",
|
||||
"changeMyPassword":"/api/v1/changeMyPassword/",
|
||||
"getUserRoles":"/api/v1/getUserRoles/",
|
||||
"checkUserType": "/api/v1/isSuperUser/",
|
||||
|
||||
|
||||
"subscriptionsData":"/api/v1/subscriptionsData/",
|
||||
"featureData":"/api/v1/featureData/"
|
||||
},
|
||||
"debug": true,
|
||||
"appName":"Project Manager App"
|
||||
}
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
Container,
|
||||
TextField,
|
||||
Typography,
|
||||
Paper,
|
||||
Button,
|
||||
IconButton,
|
||||
InputAdornment,
|
||||
FormHelperText,
|
||||
} from "@mui/material";
|
||||
import logo from "../utils/secure-route/logo.png";
|
||||
import { Visibility, VisibilityOff } from "@mui/icons-material";
|
||||
import { toast } from "react-toastify";
|
||||
import axios from "axios";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import config from "../config/Global.json";
|
||||
import { validatePassword } from "../utils/api-manager/Helper/helper";
|
||||
|
||||
|
||||
function ConfirmPassword() {
|
||||
const { temp_token } = useParams();
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||
const [touched, setTouched] = useState({
|
||||
newPassword: false,
|
||||
confirmPassword: false,
|
||||
});
|
||||
const [errors, setErrors] = useState({});
|
||||
let navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
|
||||
console.log(temp_token)
|
||||
setErrors({});
|
||||
}, [temp_token]);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
const passwordErrors = validatePassword(newPassword);
|
||||
if (Object.keys(passwordErrors).length > 0) {
|
||||
setErrors(passwordErrors);
|
||||
return;
|
||||
}
|
||||
if (newPassword !== confirmPassword) {
|
||||
toast.error("Passwords does not match");
|
||||
return;
|
||||
}
|
||||
const apiBaseUrl = config.api.host;
|
||||
const confirmPasswordEndpoint = config.api.confirmPassword;
|
||||
try {
|
||||
const url = `${apiBaseUrl}${confirmPasswordEndpoint}${temp_token}/`;
|
||||
// console.log("Request URL:", url);
|
||||
await axios.post(url, { new_password: newPassword });
|
||||
toast.success("Password has been reset successfully");
|
||||
navigate("/login");
|
||||
} catch (error) {
|
||||
toast.error("Failed to reset password");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleBlur = (field) => {
|
||||
setTouched((prev) => ({ ...prev, [field]: true }));
|
||||
};
|
||||
const handleClickShowPassword = () => {
|
||||
setShowPassword((prev) => !prev);
|
||||
};
|
||||
const handleMouseDownPassword = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
const handleClickConfirmPassword = () => {
|
||||
setShowConfirmPassword((prev) => !prev);
|
||||
};
|
||||
const getPasswordErrors = () => {
|
||||
if (touched.newPassword) {
|
||||
return validatePassword(newPassword);
|
||||
}
|
||||
return {};
|
||||
};
|
||||
const passwordErrors = getPasswordErrors();
|
||||
const isPasswordMatchError =
|
||||
touched.confirmPassword && newPassword !== confirmPassword;
|
||||
return (
|
||||
<Container component="main" maxWidth="xs">
|
||||
<Paper
|
||||
elevation={3}
|
||||
sx={{
|
||||
marginTop: 8,
|
||||
padding: 4,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={logo}
|
||||
alt="Logo"
|
||||
style={{ height: 100, width: 150, marginBottom: 20 }}
|
||||
/>
|
||||
<Typography component="h1" variant="h5">
|
||||
Confirm Password
|
||||
</Typography>
|
||||
<form style={{ width: "100%",marginTop:"20px" }} onSubmit={handleSubmit}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="New Password"
|
||||
variant="outlined"
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
onBlur={() => handleBlur("newPassword")}
|
||||
required
|
||||
style={{ marginBottom: "5px" }}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
onClick={handleClickShowPassword}
|
||||
onMouseDown={handleMouseDownPassword}
|
||||
>
|
||||
{showPassword ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
error={Boolean(Object.keys(passwordErrors).length)}
|
||||
helperText={
|
||||
Object.keys(passwordErrors).length > 0 && touched.newPassword
|
||||
? Object.values(passwordErrors).map((error, index) => (
|
||||
<FormHelperText key={index} error>
|
||||
{error}
|
||||
</FormHelperText>
|
||||
))
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<TextField
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
name="confirmPassword"
|
||||
label="Confirm Password"
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
onBlur={() => handleBlur("confirmPassword")}
|
||||
type={showConfirmPassword ? "text" : "password"}
|
||||
error={Boolean(isPasswordMatchError)}
|
||||
helperText={isPasswordMatchError ? "Passwords do not match" : ""}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
onClick={handleClickConfirmPassword}
|
||||
onMouseDown={handleMouseDownPassword}
|
||||
>
|
||||
{showConfirmPassword ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<br />
|
||||
<Button variant="contained" color="primary" fullWidth type="submit">
|
||||
Confirm Password
|
||||
</Button>
|
||||
</form>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
export default ConfirmPassword;
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
{
|
||||
"roleBased": {
|
||||
"isRoleBased": true,
|
||||
"roleQue": ["superuser"]
|
||||
},
|
||||
"menu": {
|
||||
"superuser": [
|
||||
{
|
||||
"title": "Home",
|
||||
"url": "/",
|
||||
"icon": "fa-house"
|
||||
},
|
||||
{
|
||||
"title": "Subscription",
|
||||
"url": "/subscription",
|
||||
"icon": "fa-house"
|
||||
},
|
||||
{
|
||||
"title": "Feature",
|
||||
"url": "/feature",
|
||||
"icon": "fa-house"
|
||||
}
|
||||
]
|
||||
},
|
||||
"topBar": {
|
||||
"icon": "fa-gear",
|
||||
"notification": {
|
||||
"active": false,
|
||||
"icon": "fa-bell"
|
||||
},
|
||||
"search": {
|
||||
"active": false,
|
||||
"icon": "fa-search",
|
||||
"iconStyle": "",
|
||||
"style": {
|
||||
"height": "45px",
|
||||
"border": "2px solid white",
|
||||
"width": "300px",
|
||||
"borderRadius": "10px"
|
||||
}
|
||||
},
|
||||
"menu": [
|
||||
|
||||
{
|
||||
"title": "Signout",
|
||||
"url": "logout",
|
||||
"icon": "fa-power-off"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<App />
|
||||
);
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue