- {message.split(":").map((msg, index) => {
+ {message.split(':').map((msg, index) => {
return index === 1 ? (
{msg}
@@ -29,11 +29,11 @@ function Notification({ message, type }) {
{msg}
);
})}
- {message.split(":")[1] && (
+ {message.split(':')[1] && (
)}
diff --git a/src/components/ProductListTable.jsx b/src/components/ProductListTable.jsx
index 08b85c5..9be90e5 100644
--- a/src/components/ProductListTable.jsx
+++ b/src/components/ProductListTable.jsx
@@ -1,5 +1,5 @@
-import clsx from "clsx";
-import PropTypes from "prop-types";
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
function ProductListTable({ productInfo, onSelectProduct }) {
return (
@@ -29,32 +29,32 @@ function ProductListTable({ productInfo, onSelectProduct }) {
>
{prod.productCode}
|
{prod.productCodeDescription}
|
{prod.interestCategory}
|
{prod.interestCategoryDescription}
diff --git a/src/components/ProductModal.jsx b/src/components/ProductModal.jsx
index c17619f..bbb6309 100644
--- a/src/components/ProductModal.jsx
+++ b/src/components/ProductModal.jsx
@@ -1,6 +1,6 @@
-import { motion } from "motion/react";
-import ProductListTable from "./ProductListTable";
-import PropTypes from "prop-types";
+import { motion } from 'motion/react';
+import ProductListTable from './ProductListTable';
+import PropTypes from 'prop-types';
function ProductModal({ productInfo, handleProductSelect }) {
return (
@@ -18,10 +18,7 @@ function ProductModal({ productInfo, handleProductSelect }) {
className="flex flex-col items-center bg-white p-4 py-8 rounded-3xl w-[60%] max-h-[80%] overflow-auto font-body"
>
Select Product
-
+
);
diff --git a/src/components/Separator.jsx b/src/components/Separator.jsx
index 070e3b0..5826441 100644
--- a/src/components/Separator.jsx
+++ b/src/components/Separator.jsx
@@ -3,7 +3,7 @@ function Separator() {
- )
+ );
}
-export default Separator;
\ No newline at end of file
+export default Separator;
diff --git a/src/contexts/Loading.jsx b/src/contexts/Loading.jsx
index 707e5ae..b66fb0a 100644
--- a/src/contexts/Loading.jsx
+++ b/src/contexts/Loading.jsx
@@ -16,4 +16,3 @@ export function LoadingProvider({ children }) {
LoadingProvider.propTypes = {
children: PropTypes.node.isRequired,
};
-
diff --git a/src/contexts/Toast.jsx b/src/contexts/Toast.jsx
index f8ce57c..e29d716 100644
--- a/src/contexts/Toast.jsx
+++ b/src/contexts/Toast.jsx
@@ -1,22 +1,22 @@
-import { createContext, useState } from "react";
-import { CircleAlert, X, CircleX, Check } from "lucide-react";
-import { toTitleCase } from "../util/util";
+import { createContext, useState } from 'react';
+import { CircleAlert, X, CircleX, Check } from 'lucide-react';
+import { toTitleCase } from '../util/util';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
export const ToastContext = createContext();
export const ToastProvider = ({ children }) => {
- const [toast, setToast] = useState({ show: false, message: "", type: "" });
+ const [toast, setToast] = useState({ show: false, message: '', type: '' });
const playAudio = (type) => {
let audioSrc;
- if(type === "warning") audioSrc = "/audio/warning.mp3";
- else if (type === "error") audioSrc = "/audio/error.mp3";
+ if (type === 'warning') audioSrc = '/audio/warning.mp3';
+ else if (type === 'error') audioSrc = '/audio/error.mp3';
if (audioSrc) {
const audio = new Audio(audioSrc);
- audio.play().catch((error) => console.error("Error playing audio:", error));
+ audio.play().catch((error) => console.error('Error playing audio:', error));
}
};
@@ -24,31 +24,31 @@ export const ToastProvider = ({ children }) => {
playAudio(type);
setToast({ show: true, message, type });
setTimeout(() => {
- setToast({ show: false, message: "", type: "" });
+ setToast({ show: false, message: '', type: '' });
}, 7000);
};
let toastIcon;
let surfaceColor;
let borderColor;
- if(toast.type === "warning") {
+ if (toast.type === 'warning') {
toastIcon = ;
- surfaceColor = "bg-warning-surface";
- borderColor = "border-warning";
- } else if(toast.type === "success") {
- toastIcon = ;
- surfaceColor = "bg-success-surface";
- borderColor = "border-success";
- } else if (toast.type === "error") {
+ surfaceColor = 'bg-warning-surface';
+ borderColor = 'border-warning';
+ } else if (toast.type === 'success') {
+ toastIcon = ;
+ surfaceColor = 'bg-success-surface';
+ borderColor = 'border-success';
+ } else if (toast.type === 'error') {
toastIcon = ;
- surfaceColor = "bg-error-surface";
- borderColor = "border-error";
+ surfaceColor = 'bg-error-surface';
+ borderColor = 'border-error';
}
return (
-
+
{children}
{toast.show && (
-
@@ -57,7 +57,7 @@ export const ToastProvider = ({ children }) => {
{toTitleCase(toast.type)}
{toast.message}
- setToast({ show: false, message: "", type: "" })}/>
+ setToast({ show: false, message: '', type: '' })} />
)}
diff --git a/src/hooks/useLoading.js b/src/hooks/useLoading.js
index 5236d07..e1284c3 100644
--- a/src/hooks/useLoading.js
+++ b/src/hooks/useLoading.js
@@ -1,4 +1,4 @@
-import { useContext } from "react";
-import { LoadingContext } from "../contexts/Loading";
+import { useContext } from 'react';
+import { LoadingContext } from '../contexts/Loading';
-export const useLoading = () => useContext(LoadingContext);
\ No newline at end of file
+export const useLoading = () => useContext(LoadingContext);
diff --git a/src/hooks/useToast.js b/src/hooks/useToast.js
index 7d49462..f48726e 100644
--- a/src/hooks/useToast.js
+++ b/src/hooks/useToast.js
@@ -1,4 +1,4 @@
-import { useContext } from "react";
-import { ToastContext } from "../contexts/Toast";
+import { useContext } from 'react';
+import { ToastContext } from '../contexts/Toast';
export const useToast = () => useContext(ToastContext);
diff --git a/src/i18n.js b/src/i18n.js
index dbe58cc..86e8189 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -16,4 +16,4 @@ i18n
},
});
-export default i18n;
\ No newline at end of file
+export default i18n;
diff --git a/src/main.jsx b/src/main.jsx
index 4e7e128..05c615d 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,25 +1,25 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
-import "./index.css";
-import "./i18n";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import Home from "./pages/Home.jsx";
-import CabinetMaintenace from "./pages/CabinetMaintenance.jsx";
-import CabinetCreation from "./pages/CabinetCreation.jsx";
-import LockersRegistration from "./pages/LockersRegistration.jsx";
-import AccountCreation from "./pages/AccountCreation.jsx";
-import LockerMaintenance from "./pages/LockerMaintenance.jsx";
-import LockerStatus from "./pages/LockerStatus.jsx";
-import KeySwap from "./pages/KeySwap.jsx";
-import ChargeManagement from "./pages/ChargeManagement.jsx";
-import ChargeEdit from "./pages/ChargeEdit.jsx";
-import CheckInOutManagement from "./pages/CheckInOutManagement.jsx";
-import CheckInOutLog from "./pages/CheckInOutLog.jsx";
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './index.css';
+import './i18n';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import Home from './pages/Home.jsx';
+import CabinetMaintenace from './pages/CabinetMaintenance.jsx';
+import CabinetCreation from './pages/CabinetCreation.jsx';
+import LockersRegistration from './pages/LockersRegistration.jsx';
+import AccountCreation from './pages/AccountCreation.jsx';
+import LockerMaintenance from './pages/LockerMaintenance.jsx';
+import LockerStatus from './pages/LockerStatus.jsx';
+import KeySwap from './pages/KeySwap.jsx';
+import ChargeManagement from './pages/ChargeManagement.jsx';
+import ChargeEdit from './pages/ChargeEdit.jsx';
+import CheckInOutManagement from './pages/CheckInOutManagement.jsx';
+import CheckInOutLog from './pages/CheckInOutLog.jsx';
const router = createBrowserRouter([
{
- path: "/",
+ path: '/',
element: ,
children: [
{
@@ -27,54 +27,54 @@ const router = createBrowserRouter([
element: ,
},
{
- path: "operation/cabinet",
+ path: 'operation/cabinet',
element: ,
},
{
- path: "operation/cabinet/create",
+ path: 'operation/cabinet/create',
element: ,
},
{
- path: "operation/cabinet/create/register-lockers",
+ path: 'operation/cabinet/create/register-lockers',
element: ,
},
{
- path: "operation/account",
+ path: 'operation/account',
element: ,
},
{
- path: "operation/locker",
+ path: 'operation/locker',
element: ,
},
{
- path: "operation/locker/status",
+ path: 'operation/locker/status',
element: ,
},
{
- path: "operation/locker/key-swap",
+ path: 'operation/locker/key-swap',
element: ,
},
{
- path: "operation/charge-management",
+ path: 'operation/charge-management',
element: ,
},
{
- path: "operation/charge-management/change",
+ path: 'operation/charge-management/change',
element: ,
},
{
- path: "operation/check-in-out",
- element:
+ path: 'operation/check-in-out',
+ element: ,
},
{
- path: "operation/check-in-out/log",
- element:
- }
+ path: 'operation/check-in-out/log',
+ element: ,
+ },
],
},
]);
-createRoot(document.getElementById("root")).render(
+createRoot(document.getElementById('root')).render(
diff --git a/src/pages/AccountCreation.jsx b/src/pages/AccountCreation.jsx
index 8fb2e3c..0bf9c62 100644
--- a/src/pages/AccountCreation.jsx
+++ b/src/pages/AccountCreation.jsx
@@ -1,33 +1,33 @@
-import { AnimatePresence } from "motion/react";
-import { PackageSearch, UserSearch } from "lucide-react";
-import { useState } from "react";
-import FormBox from "../components/FormBox";
-import { useTranslation } from "react-i18next";
-import FormField from "../components/FormField";
-import FormInput from "../components/FormInput";
-import FormSelect from "../components/FormSelect";
-import Button from "../components/Button";
-import productInfo from "../util/productList";
-import Notification from "../components/Notification";
-import ProductModal from "../components/ProductModal";
-import FormHeader from "../components/FormHeader";
-import FieldsWrapper from "../components/FieldsWrapper";
+import { AnimatePresence } from 'motion/react';
+import { PackageSearch, UserSearch } from 'lucide-react';
+import { useState } from 'react';
+import FormBox from '../components/FormBox';
+import { useTranslation } from 'react-i18next';
+import FormField from '../components/FormField';
+import FormInput from '../components/FormInput';
+import FormSelect from '../components/FormSelect';
+import Button from '../components/Button';
+import productInfo from '../util/productList';
+import Notification from '../components/Notification';
+import ProductModal from '../components/ProductModal';
+import FormHeader from '../components/FormHeader';
+import FieldsWrapper from '../components/FieldsWrapper';
function AccountCreation() {
const { t } = useTranslation();
- const [notification] = useState({ message: "", type: "" });
+ const [notification] = useState({ message: '', type: '' });
const [showProductModal, setShowProductModal] = useState(false);
const [accountDetails, setAccountDetails] = useState({
- productCode: "",
- interestCategory: "",
- segmentCode: "",
- accountHolderType: "",
- primaryCifNumber: "",
- nomineeCifNumber: "",
- activityCode: "",
- customerType: "",
- collateralFDAccount: "",
- rentPayAccount: "",
+ productCode: '',
+ interestCategory: '',
+ segmentCode: '',
+ accountHolderType: '',
+ primaryCifNumber: '',
+ nomineeCifNumber: '',
+ activityCode: '',
+ customerType: '',
+ collateralFDAccount: '',
+ rentPayAccount: '',
productCodeValid: true,
interestCategoryValid: true,
segmentCodeValid: true,
@@ -52,107 +52,107 @@ function AccountCreation() {
const accountDetailsFields = [
{
- label: t("productCode"),
- name: "productCode",
- type: "input",
- subType: "number",
+ label: t('productCode'),
+ name: 'productCode',
+ type: 'input',
+ subType: 'number',
readOnly: true,
- validate: (value) => value !== "",
+ validate: (value) => value !== '',
icon: {
icon: ,
onClick: () => setShowProductModal(true),
},
},
{
- label: t("interestCategory"),
- name: "interestCategory",
- type: "input",
- subType: "number",
+ label: t('interestCategory'),
+ name: 'interestCategory',
+ type: 'input',
+ subType: 'number',
readOnly: true,
- validate: (value) => value !== "",
+ validate: (value) => value !== '',
},
{
- label: t("segmentCode"),
- name: "segmentCode",
- type: "select",
+ label: t('segmentCode'),
+ name: 'segmentCode',
+ type: 'select',
options: [
- { value: "0706", label: "0706: Individual" },
- { value: "0306", label: "0306: Staff" },
- { value: "5003", label: "5003: Senior Citizen" },
- { value: "5010", label: "5010: SHG" },
- { value: "5000", label: "5000: Bank" },
- { value: "5009", label: "5009: Institutions" },
- { value: "5050", label: "5050: Others" },
- { value: "5007", label: "5007: Society" },
+ { value: '0706', label: '0706: Individual' },
+ { value: '0306', label: '0306: Staff' },
+ { value: '5003', label: '5003: Senior Citizen' },
+ { value: '5010', label: '5010: SHG' },
+ { value: '5000', label: '5000: Bank' },
+ { value: '5009', label: '5009: Institutions' },
+ { value: '5050', label: '5050: Others' },
+ { value: '5007', label: '5007: Society' },
],
- validate: (value) => value !== "",
+ validate: (value) => value !== '',
},
{
- label: t("accountHolderType"),
- name: "accountHolderType",
- type: "select",
+ label: t('accountHolderType'),
+ name: 'accountHolderType',
+ type: 'select',
options: [
- { value: "1", label: "Single" },
- { value: "2", label: "Joint" },
+ { value: '1', label: 'Single' },
+ { value: '2', label: 'Joint' },
],
- validate: (value) => value === "1" || value === "2",
+ validate: (value) => value === '1' || value === '2',
},
{
- label: t("primaryCifNumber"),
- name: "primaryCifNumber",
- type: "input",
- subType: "number",
+ label: t('primaryCifNumber'),
+ name: 'primaryCifNumber',
+ type: 'input',
+ subType: 'number',
maxLength: 17,
validate: (value) => /^[0-9]{17}$/.test(value),
icon: { icon: },
},
{
- label: t("nomineeCifNumber"),
- name: "nomineeCifNumber",
- type: "input",
- subType: "number",
+ label: t('nomineeCifNumber'),
+ name: 'nomineeCifNumber',
+ type: 'input',
+ subType: 'number',
maxLength: 17,
validate: (value) => /^[0-9]{17}$/.test(value),
},
];
const additionalDetailsFields = [
{
- label: t("activityCode"),
- name: "activityCode",
- type: "select",
+ label: t('activityCode'),
+ name: 'activityCode',
+ type: 'select',
options: [
- { value: "0701", label: "Direct Agriculture" },
- { value: "0702", label: "Indirect Agriculture" },
- { value: "0703", label: "Agricultural Services Unit" },
- { value: "0704", label: "Farm Irrigation" },
- { value: "0705", label: "Fruits & Vegetables" },
- { value: "0706", label: "Non-Agriculture" },
+ { value: '0701', label: 'Direct Agriculture' },
+ { value: '0702', label: 'Indirect Agriculture' },
+ { value: '0703', label: 'Agricultural Services Unit' },
+ { value: '0704', label: 'Farm Irrigation' },
+ { value: '0705', label: 'Fruits & Vegetables' },
+ { value: '0706', label: 'Non-Agriculture' },
],
- validate: (value) => value !== "",
+ validate: (value) => value !== '',
},
{
- label: t("customerType"),
- name: "customerType",
- type: "select",
+ label: t('customerType'),
+ name: 'customerType',
+ type: 'select',
options: [
- { value: "0709", label: "Individual" },
- { value: "0701", label: "Corporate" },
+ { value: '0709', label: 'Individual' },
+ { value: '0701', label: 'Corporate' },
],
- validate: (value) => value === "0709" || value === "0701",
+ validate: (value) => value === '0709' || value === '0701',
},
{
- label: t("collateralFDAccount"),
- name: "collateralFDAccount",
- type: "input",
- subType: "number",
+ label: t('collateralFDAccount'),
+ name: 'collateralFDAccount',
+ type: 'input',
+ subType: 'number',
maxLength: 17,
validate: (value) => /^[0-9]{17}$/.test(value),
},
{
- label: t("rentPayAccount"),
- name: "rentPayAccount",
- type: "input",
- subType: "number",
+ label: t('rentPayAccount'),
+ name: 'rentPayAccount',
+ type: 'input',
+ subType: 'number',
maxLength: 17,
validate: (value) => /^[0-9]{17}$/.test(value),
},
@@ -177,7 +177,7 @@ function AccountCreation() {
if (!isValid) {
return;
}
- console.log("Form is valid", accountDetails);
+ console.log('Form is valid', accountDetails);
};
const renderField = (field) => {
@@ -197,14 +197,10 @@ function AccountCreation() {
return (
- {field.type === "input" ? (
+ {field.type === 'input' ? (
) : (
-
+
)}
);
@@ -213,26 +209,23 @@ function AccountCreation() {
return (
- {notification.message !== "" && }
+ {notification.message !== '' && }
{showProductModal && (
-
+
)}
-
+
{accountDetailsFields.map(renderField)}
-
+
{additionalDetailsFields.map(renderField)}
-
+
);
diff --git a/src/pages/CabinetCreation.jsx b/src/pages/CabinetCreation.jsx
index 0a4d913..96a40b5 100644
--- a/src/pages/CabinetCreation.jsx
+++ b/src/pages/CabinetCreation.jsx
@@ -1,21 +1,21 @@
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import FormBox from "../components/FormBox";
-import Button from "../components/Button";
-import { useNavigate } from "react-router-dom";
-import FieldsWrapper from "../components/FieldsWrapper";
-import FormField from "../components/FormField";
-import FormInput from "../components/FormInput";
-import FormSelect from "../components/FormSelect";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import FormBox from '../components/FormBox';
+import Button from '../components/Button';
+import { useNavigate } from 'react-router-dom';
+import FieldsWrapper from '../components/FieldsWrapper';
+import FormField from '../components/FormField';
+import FormInput from '../components/FormInput';
+import FormSelect from '../components/FormSelect';
function CabinetCreation() {
const { t } = useTranslation();
const navigate = useNavigate();
const [cabinetDetails, setCabinetDetails] = useState({
- cabinetId: "",
+ cabinetId: '',
cabinetIdValid: true,
- cabinetKeyId: "",
+ cabinetKeyId: '',
cabinetKeyIdValid: true,
noOfLockers: 0,
noOfLockersValid: true,
@@ -24,21 +24,21 @@ function CabinetCreation() {
const handleNext = (e) => {
e.preventDefault();
let isFormValid = true;
- const newValues = {...cabinetDetails};
- formFields.forEach(field => {
- if(field.validate) {
- const isFieldValid = field.validate(cabinetDetails[field.name])
+ const newValues = { ...cabinetDetails };
+ formFields.forEach((field) => {
+ if (field.validate) {
+ const isFieldValid = field.validate(cabinetDetails[field.name]);
newValues[`${field.name}Valid`] = isFieldValid;
- if(!isFieldValid) isFormValid = false;
+ if (!isFieldValid) isFormValid = false;
}
});
-
- if(!isFormValid) {
+
+ if (!isFormValid) {
setCabinetDetails(newValues);
return;
}
- navigate("register-lockers", {
+ navigate('register-lockers', {
state: {
cabinetId: cabinetDetails.cabinetId,
cabinetKeyId: cabinetDetails.cabinetKeyId,
@@ -49,25 +49,25 @@ function CabinetCreation() {
const formFields = [
{
- name: "cabinetId",
- label: t("cabinetId"),
- type: "input",
+ name: 'cabinetId',
+ label: t('cabinetId'),
+ type: 'input',
maxLength: 6,
- validate: v => /^\w{2}\d{4}$/.test(v)
+ validate: (v) => /^\w{2}\d{4}$/.test(v),
},
{
- name: "cabinetKeyId",
- label: t("cabinetKeyId"),
- type: "input",
+ name: 'cabinetKeyId',
+ label: t('cabinetKeyId'),
+ type: 'input',
maxLength: 6,
- validate: v => /^\w{2}\d{4}$/.test(v)
+ validate: (v) => /^\w{2}\d{4}$/.test(v),
},
{
- name: "noOfLockers",
- label: t("noOfLockers"),
- type: "input",
- subType: "number",
- validate: v => parseInt(v) > 0
+ name: 'noOfLockers',
+ label: t('noOfLockers'),
+ type: 'input',
+ subType: 'number',
+ validate: (v) => parseInt(v) > 0,
},
];
@@ -87,24 +87,18 @@ function CabinetCreation() {
return (
- {field.type === "input" ? (
+ {field.type === 'input' ? (
) : (
-
+
)}
);
};
return (
-
-
- {formFields.map(renderField)}
-
+
+ {formFields.map(renderField)}
);
diff --git a/src/pages/CabinetMaintenance.jsx b/src/pages/CabinetMaintenance.jsx
index f832ce2..a276889 100644
--- a/src/pages/CabinetMaintenance.jsx
+++ b/src/pages/CabinetMaintenance.jsx
@@ -1,21 +1,21 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import FormBox from "../components/FormBox";
-import Button from "../components/Button";
-import FormInput from "../components/FormInput";
-import FormSelect from "../components/FormSelect";
-import FieldsWrapper from "../components/FieldsWrapper";
-import FormField from "../components/FormField";
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import FormBox from '../components/FormBox';
+import Button from '../components/Button';
+import FormInput from '../components/FormInput';
+import FormSelect from '../components/FormSelect';
+import FieldsWrapper from '../components/FieldsWrapper';
+import FormField from '../components/FormField';
function CabinetMaintenace() {
const navigate = useNavigate();
const { t } = useTranslation();
- const [operation, setOperation] = useState({ value: "", valid: true });
+ const [operation, setOperation] = useState({ value: '', valid: true });
const handleNext = (e) => {
e.preventDefault();
- if (operation.value === "") {
+ if (operation.value === '') {
setOperation({ value: operation.value, valid: false });
}
navigate(operation.value);
@@ -23,10 +23,10 @@ function CabinetMaintenace() {
const formFields = [
{
- name: "value",
- label: t("operation"),
- options: [{ label: t("create"), value: "create" }],
- type: "select",
+ name: 'value',
+ label: t('operation'),
+ options: [{ label: t('create'), value: 'create' }],
+ type: 'select',
},
];
@@ -43,7 +43,7 @@ function CabinetMaintenace() {
const options = field.options;
return (
- {field.type === "input" ? (
+ {field.type === 'input' ? (
) : (
@@ -54,9 +54,9 @@ function CabinetMaintenace() {
return (
-
+
{formFields.map(renderField)}
-
);
diff --git a/src/pages/ChargeEdit.jsx b/src/pages/ChargeEdit.jsx
index 3c727a4..efd4097 100644
--- a/src/pages/ChargeEdit.jsx
+++ b/src/pages/ChargeEdit.jsx
@@ -1,27 +1,27 @@
-import { useState, useEffect } from "react";
-import { useLoading } from "../hooks/useLoading";
-import FormField from "../components/FormField";
-import FormInput from "../components/FormInput";
-import FormSelect from "../components/FormSelect";
-import Button from "../components/Button";
-import FormBox from "../components/FormBox";
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-import { lockerService } from "../services/locker.service";
-import { AnimatePresence } from "motion/react";
-import { Pencil } from "lucide-react";
-import Notification from "../components/Notification";
-import FieldsWrapper from "../components/FieldsWrapper";
+import { useState, useEffect } from 'react';
+import { useLoading } from '../hooks/useLoading';
+import FormField from '../components/FormField';
+import FormInput from '../components/FormInput';
+import FormSelect from '../components/FormSelect';
+import Button from '../components/Button';
+import FormBox from '../components/FormBox';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import { lockerService } from '../services/locker.service';
+import { AnimatePresence } from 'motion/react';
+import { Pencil } from 'lucide-react';
+import Notification from '../components/Notification';
+import FieldsWrapper from '../components/FieldsWrapper';
function ChargeEdit() {
const [chargeDetails, setChargeDetails] = useState({
- rentAmount: "",
+ rentAmount: '',
rentAmountEdit: false,
- penaltyAmount: "",
+ penaltyAmount: '',
penaltyAmountEdit: false,
});
- const [notification, setNotification] = useState({ message: "", type: "" });
+ const [notification, setNotification] = useState({ message: '', type: '' });
const { setIsLoading } = useLoading();
const { t } = useTranslation();
@@ -33,10 +33,7 @@ function ChargeEdit() {
const fetchCharges = async () => {
try {
setIsLoading(true);
- const response = await lockerService.getCharges(
- productCode,
- interestCategory
- );
+ const response = await lockerService.getCharges(productCode, interestCategory);
if (response.status === 200) {
const { rent, penalty } = response.data;
setChargeDetails({
@@ -48,14 +45,14 @@ function ChargeEdit() {
} else {
setNotification({
message: response.data.message,
- type: "error",
+ type: 'error',
});
}
} catch (error) {
console.error(error);
setNotification({
message: error.message,
- type: "error",
+ type: 'error',
});
} finally {
setIsLoading(false);
@@ -70,28 +67,28 @@ function ChargeEdit() {
const formFields = [
{
- name: "rentAmount",
- label: "Rent Amount",
- type: "input",
- subType: "number",
+ name: 'rentAmount',
+ label: 'Rent Amount',
+ type: 'input',
+ subType: 'number',
readOnly: !chargeDetails.rentAmountEdit,
icon: {
icon: ,
- mode: "plain",
+ mode: 'plain',
onClick: () => {
setChargeDetails({ ...chargeDetails, rentAmountEdit: true });
},
},
},
{
- name: "penaltyAmount",
- label: "Penalty Amount",
- type: "input",
- subType: "number",
+ name: 'penaltyAmount',
+ label: 'Penalty Amount',
+ type: 'input',
+ subType: 'number',
readOnly: !chargeDetails.penaltyAmountEdit,
icon: {
icon: ,
- mode: "plain",
+ mode: 'plain',
onClick: () => {
setChargeDetails({ ...chargeDetails, penaltyAmountEdit: true });
},
@@ -113,19 +110,19 @@ function ChargeEdit() {
if (response.status === 200) {
setNotification({
message: response.data.message,
- type: "success",
+ type: 'success',
});
} else {
setNotification({
message: response.data.message,
- type: "error",
+ type: 'error',
});
}
} catch (error) {
console.error(error);
setNotification({
message: error.message,
- type: "error",
+ type: 'error',
});
} finally {
setIsLoading(false);
@@ -145,17 +142,13 @@ function ChargeEdit() {
type: field.subType,
};
- const className = field.readOnly ? "bg-grey/[0.3]" : "";
+ const className = field.readOnly ? 'bg-grey/[0.3]' : '';
return (
- {field.type === "input" ? (
+ {field.type === 'input' ? (
) : (
-
+
)}
);
@@ -164,19 +157,17 @@ function ChargeEdit() {
return (
- {notification.message !== "" && }
+ {notification.message !== '' && }
-
-
- {formFields.map(renderField)}
-
-
+
+
+ {formFields.map(renderField)}
+
+
);
}
diff --git a/src/pages/ChargeManagement.jsx b/src/pages/ChargeManagement.jsx
index badafd6..945a719 100644
--- a/src/pages/ChargeManagement.jsx
+++ b/src/pages/ChargeManagement.jsx
@@ -1,13 +1,13 @@
-import { useTranslation } from "react-i18next";
-import FormField from "../components/FormField";
-import FormInput from "../components/FormInput";
-import FormSelect from "../components/FormSelect";
-import Button from "../components/Button";
-import FormBox from "../components/FormBox";
-import { useNavigate } from "react-router-dom";
-import { useState } from "react";
-import { useToast } from "../hooks/useToast";
-import FieldsWrapper from "../components/FieldsWrapper";
+import { useTranslation } from 'react-i18next';
+import FormField from '../components/FormField';
+import FormInput from '../components/FormInput';
+import FormSelect from '../components/FormSelect';
+import Button from '../components/Button';
+import FormBox from '../components/FormBox';
+import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+import { useToast } from '../hooks/useToast';
+import FieldsWrapper from '../components/FieldsWrapper';
function ChargeManagement() {
const { t } = useTranslation();
@@ -15,26 +15,26 @@ function ChargeManagement() {
const showToast = useToast();
const [productDetails, setProductDetails] = useState({
- productCode: "",
- interestCategory: "",
+ productCode: '',
+ interestCategory: '',
productCodeValid: true,
interestCategoryValid: true,
});
const formFields = [
{
- name: "productCode",
- label: t("productCode"),
- type: "input",
- subType: "number",
+ name: 'productCode',
+ label: t('productCode'),
+ type: 'input',
+ subType: 'number',
maxLength: 4,
validate: (value) => /^[0-9]{4}/.test(value),
},
{
- name: "interestCategory",
- label: t("interestCategory"),
- type: "input",
- subType: "number",
+ name: 'interestCategory',
+ label: t('interestCategory'),
+ type: 'input',
+ subType: 'number',
maxLength: 4,
validate: (value) => /^[0-9]{4}/.test(value),
},
@@ -54,11 +54,11 @@ function ChargeManagement() {
if (!isValid) {
setProductDetails(newProductDetails);
- showToast(t("highlightedFieldsInvalid"), "error");
+ showToast(t('highlightedFieldsInvalid'), 'error');
return;
}
- navigate("change", {
+ navigate('change', {
state: {
productCode: productDetails.productCode,
interestCategory: productDetails.interestCategory,
@@ -71,8 +71,8 @@ function ChargeManagement() {
value: productDetails[field.name],
onChange: (e) => {
const newLockerDetails = { ...productDetails };
- if (field.subType === "number") {
- e.target.value = e.target.value.replace(/\D/g, "");
+ if (field.subType === 'number') {
+ e.target.value = e.target.value.replace(/\D/g, '');
if (e.target.value.length > field.maxLength) {
return;
}
@@ -89,11 +89,8 @@ function ChargeManagement() {
const valid = productDetails[`${field.name}Valid`];
return (
- {field.type === "input" ? (
-
+ {field.type === 'input' ? (
+
) : (
)}
@@ -102,11 +99,9 @@ function ChargeManagement() {
};
return (
-
-
- {formFields.map(renderField)}
-
-
+
+ {formFields.map(renderField)}
+
);
}
diff --git a/src/pages/CheckInOutLog.jsx b/src/pages/CheckInOutLog.jsx
index ecb28b1..28f179a 100644
--- a/src/pages/CheckInOutLog.jsx
+++ b/src/pages/CheckInOutLog.jsx
@@ -1,16 +1,16 @@
-import { useState } from "react";
-import { useLocation } from "react-router-dom";
-import FormBox from "../components/FormBox";
-import Button from "../components/Button";
-import Notification from "../components/Notification";
-import { lockerService } from "../services/locker.service";
-import { useToast } from "../hooks/useToast";
-import { useLoading } from "../hooks/useLoading";
+import { useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import FormBox from '../components/FormBox';
+import Button from '../components/Button';
+import Notification from '../components/Notification';
+import { lockerService } from '../services/locker.service';
+import { useToast } from '../hooks/useToast';
+import { useLoading } from '../hooks/useLoading';
function CheckInOutLog() {
const [time, setTime] = useState(null);
- const [checkType, setCheckType] = useState("");
- const [notification, setNotification] = useState({ message: "", type: "" });
+ const [checkType, setCheckType] = useState('');
+ const [notification, setNotification] = useState({ message: '', type: '' });
const location = useLocation();
const showToast = useToast();
@@ -19,27 +19,23 @@ function CheckInOutLog() {
const handleSubmit = async (e) => {
e.preventDefault();
- if (time === null || checkType === "") {
- showToast("Please fill in all fields", "error");
+ if (time === null || checkType === '') {
+ showToast('Please fill in all fields', 'error');
return;
}
// Add your logic here
try {
setIsLoading(true);
- const response = await lockerService.checkInOut(
- accountNumber,
- time,
- checkType
- );
+ const response = await lockerService.checkInOut(accountNumber, time, checkType);
if (response.status === 200) {
- setNotification({ message: response.data.message, type: "success" });
+ setNotification({ message: response.data.message, type: 'success' });
} else {
console.log(response);
- setNotification({ message: response.data.message, type: "error" });
+ setNotification({ message: response.data.message, type: 'error' });
}
} catch (error) {
console.log(error);
- setNotification({ message: error.message, type: "error" });
+ setNotification({ message: error.message, type: 'error' });
} finally {
setIsLoading(false);
}
@@ -47,16 +43,14 @@ function CheckInOutLog() {
return (
- {notification.message !== "" && }
+ {notification.message !== '' && }
{accountNumber}
-
+
{
e.preventDefault();
- if (accountNumber === "") {
- showToast("Account Number is required", "error");
+ if (accountNumber === '') {
+ showToast('Account Number is required', 'error');
return;
}
try {
@@ -33,26 +33,26 @@ function CheckInOutManagement() {
if (response.status === 200) {
const data = response.data;
if (data.code === 1) {
- navigate("log", { state: { accountNumber } });
+ navigate('log', { state: { accountNumber } });
} else if (data.code === 2) {
setNotification({
visible: true,
message:
- "Monthly access limit exceeded. A fine will be charged for each additional access.",
- type: "warning",
+ 'Monthly access limit exceeded. A fine will be charged for each additional access.',
+ type: 'warning',
});
} else if (data.code === 3) {
setNotification({
visible: true,
message:
- "Rent for this account is due. Please pay the rent amount in full to access the locker.",
- type: "error",
+ 'Rent for this account is due. Please pay the rent amount in full to access the locker.',
+ type: 'error',
});
}
}
} catch (error) {
console.log(error);
- setNotification(error.message, "error");
+ setNotification(error.message, 'error');
} finally {
setIsLoading(false);
}
@@ -60,7 +60,7 @@ function CheckInOutManagement() {
return (
- { notification.message !== "" && }
+ {notification.message !== '' && }
@@ -70,7 +70,7 @@ function CheckInOutManagement() {
>
setAccountNumber(e.target.value),
}}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 4b3e73c..827b10b 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,11 +1,20 @@
-import FormBox from "../components/FormBox";
-import { useTranslation } from "react-i18next";
-import { getUserInfoFromSession } from "../util/util";
+import FormBox from '../components/FormBox';
+import { useTranslation } from 'react-i18next';
+import { getUserInfoFromSession } from '../util/util';
function Home() {
const { t } = useTranslation();
- const holidayList = [{ date: '23 May, 2024', name: 'Buddha Purnima' }, { date: '15 June, 2024', name: 'Raja Sankranti' }];
- const homePageNotifications = ['hpn_complete_before_31', 'hpn_npa', 'hpn_helpdesk_contact', 'hpn_rupay_kcc_time', 'hpn_rupay_kcc_atm'];
+ const holidayList = [
+ { date: '23 May, 2024', name: 'Buddha Purnima' },
+ { date: '15 June, 2024', name: 'Raja Sankranti' },
+ ];
+ const homePageNotifications = [
+ 'hpn_complete_before_31',
+ 'hpn_npa',
+ 'hpn_helpdesk_contact',
+ 'hpn_rupay_kcc_time',
+ 'hpn_rupay_kcc_atm',
+ ];
const userInformation = getUserInfoFromSession();
return (
@@ -15,7 +24,12 @@ function Home() {
{holidayList.map((holiday, index) => (
- - {t(holiday.date)} - {t(holiday.name)}
+ -
+ {t(holiday.date)} - {t(holiday.name)}
+
))}
@@ -23,11 +37,14 @@ function Home() {
- {
- Object.keys(userInformation).map((key, index) => (
- - {t(key)}: {t(userInformation[key])}
- ))
- }
+ {Object.keys(userInformation).map((key, index) => (
+ -
+ {t(key)}: {t(userInformation[key])}
+
+ ))}
@@ -37,7 +54,12 @@ function Home() {
{homePageNotifications.map((notification, index) => (
- - {t(notification)}
+ -
+ {t(notification)}
+
))}
@@ -47,4 +69,4 @@ function Home() {
);
}
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/src/pages/KeySwap.jsx b/src/pages/KeySwap.jsx
index 76fb4fb..b3692b1 100644
--- a/src/pages/KeySwap.jsx
+++ b/src/pages/KeySwap.jsx
@@ -1,29 +1,29 @@
-import { useState } from "react";
-import { AnimatePresence } from "motion/react";
-import { useTranslation } from "react-i18next";
-import { useToast } from "../hooks/useToast";
-import { useLoading } from "../hooks/useLoading";
-import FormField from "../components/FormField";
-import FormInput from "../components/FormInput";
-import FormSelect from "../components/FormSelect";
-import Button from "../components/Button";
-import { lockerService } from "../services/locker.service";
-import FormBox from "../components/FormBox";
-import Notification from "../components/Notification";
-import FieldsWrapper from "../components/FieldsWrapper";
+import { useState } from 'react';
+import { AnimatePresence } from 'motion/react';
+import { useTranslation } from 'react-i18next';
+import { useToast } from '../hooks/useToast';
+import { useLoading } from '../hooks/useLoading';
+import FormField from '../components/FormField';
+import FormInput from '../components/FormInput';
+import FormSelect from '../components/FormSelect';
+import Button from '../components/Button';
+import { lockerService } from '../services/locker.service';
+import FormBox from '../components/FormBox';
+import Notification from '../components/Notification';
+import FieldsWrapper from '../components/FieldsWrapper';
function KeySwap() {
const { t } = useTranslation();
const showToast = useToast();
const { isLoading, setIsLoading } = useLoading();
- const [notification, setNotification] = useState({ message: "", type: "" });
+ const [notification, setNotification] = useState({ message: '', type: '' });
const [keySwapDetails, setKeySwapDetails] = useState({
- cabinetId: "",
- lockerId: "",
- reason: "",
- oldKey: "",
- newKey: "",
- newKeyConfirm: "",
+ cabinetId: '',
+ lockerId: '',
+ reason: '',
+ oldKey: '',
+ newKey: '',
+ newKeyConfirm: '',
cabinetIdValid: true,
lockerIdValid: true,
reasonValid: true,
@@ -34,52 +34,52 @@ function KeySwap() {
const formFields = [
{
- name: "cabinetId",
- label: t("cabinetId"),
- type: "input",
+ name: 'cabinetId',
+ label: t('cabinetId'),
+ type: 'input',
maxLength: 6,
readOnly: isLoading,
validate: (value) => /^[A-Z]{2}[0-9]{4}/.test(value),
},
{
- name: "lockerId",
- label: t("lockerId"),
- type: "input",
+ name: 'lockerId',
+ label: t('lockerId'),
+ type: 'input',
maxLength: 6,
readOnly: isLoading,
validate: (value) => /^[A-Z]{2}[0-9]{4}/.test(value),
},
{
- name: "reason",
- label: t("reasonForChange"),
- type: "input",
+ name: 'reason',
+ label: t('reasonForChange'),
+ type: 'input',
maxLength: 50,
readOnly: isLoading,
- validate: (value) => value !== "",
+ validate: (value) => value !== '',
},
{
- name: "oldKey",
- label: t("oldKeyId"),
- type: "input",
+ name: 'oldKey',
+ label: t('oldKeyId'),
+ type: 'input',
maxLength: 6,
readOnly: isLoading,
validate: (value) => /^[A-Z]{2}[0-9]{4}/.test(value),
},
{
- name: "newKey",
- label: t("newKeyId"),
- type: "input",
+ name: 'newKey',
+ label: t('newKeyId'),
+ type: 'input',
maxLength: 6,
readOnly: isLoading,
validate: (value) => /^[A-Z]{2}[0-9]{4}/.test(value),
},
{
- name: "newKeyConfirm",
- label: t("confirmNewKeyId"),
- type: "input",
+ name: 'newKeyConfirm',
+ label: t('confirmNewKeyId'),
+ type: 'input',
maxLength: 6,
readOnly: isLoading,
- validate: (value) => value !== "" && value === keySwapDetails.newKey,
+ validate: (value) => value !== '' && value === keySwapDetails.newKey,
},
];
@@ -98,7 +98,7 @@ function KeySwap() {
}
if (!valid) {
- showToast(t("highlightedFieldsInvalid"), "error");
+ showToast(t('highlightedFieldsInvalid'), 'error');
return;
}
@@ -114,18 +114,18 @@ function KeySwap() {
if (response.status === 200) {
setNotification({
message: response.data.message,
- type: "success",
+ type: 'success',
});
} else {
setNotification({
message: response.data.message,
- type: "error",
+ type: 'error',
});
}
} catch (error) {
setNotification({
message: error.message,
- type: "error",
+ type: 'error',
});
} finally {
setIsLoading(false);
@@ -148,14 +148,10 @@ function KeySwap() {
const valid = keySwapDetails[`${field.name}Valid`];
return (
- {field.type === "input" ? (
+ {field.type === 'input' ? (
) : (
-
+
)}
);
@@ -164,11 +160,11 @@ function KeySwap() {
return (
- {notification.message !== "" && }
+ {notification.message !== '' && }
-
+
{formFields.map(renderField)}
-
+
);
diff --git a/src/pages/LockerMaintenance.jsx b/src/pages/LockerMaintenance.jsx
index 02af027..eba9e05 100644
--- a/src/pages/LockerMaintenance.jsx
+++ b/src/pages/LockerMaintenance.jsx
@@ -1,21 +1,21 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import FormBox from "../components/FormBox";
-import Button from "../components/Button";
-import FormField from "../components/FormField";
-import FormInput from "../components/FormInput";
-import FormSelect from "../components/FormSelect";
-import FieldsWrapper from "../components/FieldsWrapper";
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import FormBox from '../components/FormBox';
+import Button from '../components/Button';
+import FormField from '../components/FormField';
+import FormInput from '../components/FormInput';
+import FormSelect from '../components/FormSelect';
+import FieldsWrapper from '../components/FieldsWrapper';
function LockerMaintenance() {
const navigate = useNavigate();
const { t } = useTranslation();
- const [operation, setOperation] = useState({ value: "", valid: true });
+ const [operation, setOperation] = useState({ value: '', valid: true });
const handleNext = (e) => {
e.preventDefault();
- if (operation.value === "") {
+ if (operation.value === '') {
setOperation({ value: operation.value, valid: false });
}
navigate(operation.value);
@@ -23,13 +23,13 @@ function LockerMaintenance() {
const formFields = [
{
- name: "value",
- label: t("operation"),
+ name: 'value',
+ label: t('operation'),
options: [
- { label: t("status"), value: "status" },
- { label: t("keySwap"), value: "key-swap" },
+ { label: t('status'), value: 'status' },
+ { label: t('keySwap'), value: 'key-swap' },
],
- type: "select",
+ type: 'select',
},
];
@@ -46,7 +46,7 @@ function LockerMaintenance() {
const options = field.options;
return (
- {field.type === "input" ? (
+ {field.type === 'input' ? (
) : (
@@ -57,9 +57,9 @@ function LockerMaintenance() {
return (
-
+
{formFields.map(renderField)}
- handleNext(e)} />
+ handleNext(e)} />
);
diff --git a/src/pages/LockerStatus.jsx b/src/pages/LockerStatus.jsx
index 22a807b..07c2425 100644
--- a/src/pages/LockerStatus.jsx
+++ b/src/pages/LockerStatus.jsx
@@ -1,56 +1,56 @@
-import FormBox from "../components/FormBox";
-import FormField from "../components/FormField";
-import FormInput from "../components/FormInput";
-import FormSelect from "../components/FormSelect";
-import { useTranslation } from "react-i18next";
-import { useState } from "react";
-import Button from "../components/Button";
-import { lockerService } from "../services/locker.service";
-import { useLoading } from "../hooks/useLoading";
-import { AnimatePresence } from "motion/react";
-import Notification from "../components/Notification";
-import FieldsWrapper from "../components/FieldsWrapper";
+import FormBox from '../components/FormBox';
+import FormField from '../components/FormField';
+import FormInput from '../components/FormInput';
+import FormSelect from '../components/FormSelect';
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import Button from '../components/Button';
+import { lockerService } from '../services/locker.service';
+import { useLoading } from '../hooks/useLoading';
+import { AnimatePresence } from 'motion/react';
+import Notification from '../components/Notification';
+import FieldsWrapper from '../components/FieldsWrapper';
function LockerStatus() {
const { t } = useTranslation();
const [lockerDetails, setLockerDetails] = useState({
- cabinetId: "",
- lockerId: "",
- status: "",
+ cabinetId: '',
+ lockerId: '',
+ status: '',
cabinetIdValid: true,
lockerIdValid: true,
statusValid: true,
});
const { isLoading, setIsLoading } = useLoading();
- const [notification, setNotification] = useState({ message: "", type: "" });
+ const [notification, setNotification] = useState({ message: '', type: '' });
const formFields = [
{
- name: "cabinetId",
- label: t("cabinetId"),
- type: "input",
+ name: 'cabinetId',
+ label: t('cabinetId'),
+ type: 'input',
maxLength: 6,
readOnly: isLoading,
validate: (value) => /^[A-Z]{2}[0-9]{4}/.test(value),
},
{
- name: "lockerId",
- label: t("lockerId"),
- type: "input",
+ name: 'lockerId',
+ label: t('lockerId'),
+ type: 'input',
maxLength: 6,
readOnly: isLoading,
validate: (value) => /^[A-Z]{2}[0-9]{4}/.test(value),
},
{
- name: "status",
- label: t("status"),
- type: "select",
+ name: 'status',
+ label: t('status'),
+ type: 'select',
readOnly: isLoading,
options: [
- { value: "open", label: t("open") },
- { value: "close", label: t("close") },
+ { value: 'open', label: t('open') },
+ { value: 'close', label: t('close') },
],
- validate: (value) => value !== "",
+ validate: (value) => value !== '',
},
];
@@ -83,12 +83,12 @@ function LockerStatus() {
);
setNotification({
message: response.data.message,
- type: "success",
+ type: 'success',
});
} catch (error) {
setNotification({
message: error.message,
- type: "error",
+ type: 'error',
});
} finally {
setIsLoading(false);
@@ -111,7 +111,7 @@ function LockerStatus() {
const valid = lockerDetails[`${field.name}Valid`];
return (
- {field.type === "input" ? (
+ {field.type === 'input' ? (
) : (
@@ -123,12 +123,12 @@ function LockerStatus() {
return (
- {notification.message !== "" && }
+ {notification.message !== '' && }
-
+
{formFields.map(renderField)}
-
+
);
diff --git a/src/pages/LockersRegistration.jsx b/src/pages/LockersRegistration.jsx
index bf5b8c8..6702d66 100644
--- a/src/pages/LockersRegistration.jsx
+++ b/src/pages/LockersRegistration.jsx
@@ -1,21 +1,21 @@
-import { useLocation } from "react-router-dom";
-import { useState } from "react";
-import { useLoading } from "../hooks/useLoading";
-import FormBox from "../components/FormBox";
-import Button from "../components/Button";
-import { lockerService } from "../services/locker.service";
-import { AnimatePresence } from "motion/react";
-import Notification from "../components/Notification";
-import FormField from "../components/FormField";
-import FormInput from "../components/FormInput";
-import FormSelect from "../components/FormSelect";
-import FormHeader from "../components/FormHeader";
-import FieldsWrapper from "../components/FieldsWrapper";
+import { useLocation } from 'react-router-dom';
+import { useState } from 'react';
+import { useLoading } from '../hooks/useLoading';
+import FormBox from '../components/FormBox';
+import Button from '../components/Button';
+import { lockerService } from '../services/locker.service';
+import { AnimatePresence } from 'motion/react';
+import Notification from '../components/Notification';
+import FormField from '../components/FormField';
+import FormInput from '../components/FormInput';
+import FormSelect from '../components/FormSelect';
+import FormHeader from '../components/FormHeader';
+import FieldsWrapper from '../components/FieldsWrapper';
function LockersRegistration() {
const location = useLocation();
const { setIsLoading } = useLoading();
- const [notification, setNotification] = useState({ message: "", type: "" });
+ const [notification, setNotification] = useState({ message: '', type: '' });
const noOfLockers = location.state?.noOfLockers;
const cabinetId = location.state?.cabinetId;
@@ -23,9 +23,9 @@ function LockersRegistration() {
const initLockers = Array(noOfLockers)
.fill()
.map(() => ({
- id: "",
- size: "",
- keyId: "",
+ id: '',
+ size: '',
+ keyId: '',
idValid: true,
sizeValid: true,
keyIdValid: true,
@@ -49,18 +49,14 @@ function LockersRegistration() {
};
// Find duplicates
- const duplicateLockerIds = findDuplicates(lockerValues, "id");
- const duplicateKeyIds = findDuplicates(lockerValues, "keyId");
+ const duplicateLockerIds = findDuplicates(lockerValues, 'id');
+ const duplicateKeyIds = findDuplicates(lockerValues, 'keyId');
const newValues = lockerValues.map((locker) => {
const newLocker = { ...locker };
// Check ID
- if (
- locker.id === "" ||
- !idRegex.test(locker.id) ||
- duplicateLockerIds.includes(locker.id)
- ) {
+ if (locker.id === '' || !idRegex.test(locker.id) || duplicateLockerIds.includes(locker.id)) {
newLocker.idValid = false;
valid = false;
} else {
@@ -68,7 +64,7 @@ function LockersRegistration() {
}
// Check size
- if (locker.size === "") {
+ if (locker.size === '') {
newLocker.sizeValid = false;
valid = false;
} else {
@@ -77,7 +73,7 @@ function LockersRegistration() {
// Check keyId
if (
- locker.keyId === "" ||
+ locker.keyId === '' ||
!idRegex.test(locker.keyId) ||
duplicateKeyIds.includes(locker.keyId)
) {
@@ -98,19 +94,16 @@ function LockersRegistration() {
try {
setIsLoading(true);
- const response = await lockerService.registerLockers(
- cabinetId,
- lockerValues
- );
+ const response = await lockerService.registerLockers(cabinetId, lockerValues);
setNotification({
message: `Cabinet creation successful. Cabinet ID: ${response.data.cabinetId}`,
- type: "success",
+ type: 'success',
});
} catch (error) {
console.error(error);
setNotification({
message: `Error registering lockers. ${error.message}`,
- type: "error",
+ type: 'error',
});
return;
} finally {
@@ -120,29 +113,29 @@ function LockersRegistration() {
const formRow = [
{
- label: "Locker ID",
- type: "input",
- subType: "text",
- name: "id",
+ label: 'Locker ID',
+ type: 'input',
+ subType: 'text',
+ name: 'id',
maxLength: 6,
validate: (value) => /^[A-Z]{2}[0-9]{4}$/.test(value),
},
{
- label: "Size",
- type: "select",
- subType: "text",
- name: "size",
+ label: 'Size',
+ type: 'select',
+ subType: 'text',
+ name: 'size',
options: [
- { label: "Small", value: "1" },
- { label: "Medium", value: "2" },
- { label: "Large", value: "3" },
+ { label: 'Small', value: '1' },
+ { label: 'Medium', value: '2' },
+ { label: 'Large', value: '3' },
],
},
{
- label: "Key ID",
- type: "input",
- subType: "text",
- name: "keyId",
+ label: 'Key ID',
+ type: 'input',
+ subType: 'text',
+ name: 'keyId',
maxLength: 6,
validate: (value) => /^[A-Z]{2}[0-9]{4}$/.test(value),
},
@@ -162,7 +155,7 @@ function LockersRegistration() {
const valid = lockerValues[`${field.name}Valid`];
- return field.type === "input" ? (
+ return field.type === 'input' ? (
) : (
@@ -181,17 +174,15 @@ function LockersRegistration() {
return (
- {notification.message !== "" && }
+ {notification.message !== '' && }
- {notification.type === "success" && (
+ {notification.type === 'success' && (
)}
-
- {formFields.map(renderFormFields)}
-
+ {formFields.map(renderFormFields)}
diff --git a/src/services/api.js b/src/services/api.js
index 4aa5678..68b8f03 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -1,10 +1,10 @@
import axios from 'axios';
const api = axios.create({
- baseURL: "http://localhost:8081/api/v1",
+ baseURL: 'http://localhost:8081/api/v1',
headers: {
- 'Content-Type': 'application/json'
- }
+ 'Content-Type': 'application/json',
+ },
});
-export default api;
\ No newline at end of file
+export default api;
diff --git a/src/services/locker.service.js b/src/services/locker.service.js
index 2e61a00..83e638e 100644
--- a/src/services/locker.service.js
+++ b/src/services/locker.service.js
@@ -1,8 +1,8 @@
-import api from "./api";
+import api from './api';
export const lockerService = {
registerLockers: async (cabinetId, lockers) => {
- return api.post("/cabinet", {
+ return api.post('/cabinet', {
cabinetId,
lockers: lockers.map(({ id, size, keyId }) => ({
id,
diff --git a/src/util/productList.js b/src/util/productList.js
index b754701..13b0876 100644
--- a/src/util/productList.js
+++ b/src/util/productList.js
@@ -1,8 +1,43 @@
const productInfo = [
- { productCode: '3001', productCodeDescription: 'RECURRING DEPOSIT', interestCategory: '1004', interestCategoryDescription: 'NON MEMBER - SENIOR CITIZEN', payableGl: '16010', paidGl: '62110' },
- { productCode: '1101', productCodeDescription: 'CURRENT ACCOUNT', interestCategory: '1009', interestCategoryDescription: 'GENERAL', payableGl: '16018', paidGl: '62115' },
- { productCode: '1101', productCodeDescription: 'SAVINGS DEPOSIT', interestCategory: '1007', interestCategoryDescription: 'NON MEMBER', payableGl: '16301', paidGl: '62117' },
- { productCode: '2002', productCodeDescription: 'CASH CERTIFICATE -GENERAL', interestCategory: '1047', interestCategoryDescription: 'COMPOUNDING', payableGl: '16011', paidGl: '62111' },
- { productCode: '2002', productCodeDescription: 'CASH CERTIFICATE', interestCategory: '1005', interestCategoryDescription: 'NON MEMBER - SENIOR CITIZEN', payableGl: '16011', paidGl: '62111' },
-]
- export default productInfo;
\ No newline at end of file
+ {
+ productCode: '3001',
+ productCodeDescription: 'RECURRING DEPOSIT',
+ interestCategory: '1004',
+ interestCategoryDescription: 'NON MEMBER - SENIOR CITIZEN',
+ payableGl: '16010',
+ paidGl: '62110',
+ },
+ {
+ productCode: '1101',
+ productCodeDescription: 'CURRENT ACCOUNT',
+ interestCategory: '1009',
+ interestCategoryDescription: 'GENERAL',
+ payableGl: '16018',
+ paidGl: '62115',
+ },
+ {
+ productCode: '1101',
+ productCodeDescription: 'SAVINGS DEPOSIT',
+ interestCategory: '1007',
+ interestCategoryDescription: 'NON MEMBER',
+ payableGl: '16301',
+ paidGl: '62117',
+ },
+ {
+ productCode: '2002',
+ productCodeDescription: 'CASH CERTIFICATE -GENERAL',
+ interestCategory: '1047',
+ interestCategoryDescription: 'COMPOUNDING',
+ payableGl: '16011',
+ paidGl: '62111',
+ },
+ {
+ productCode: '2002',
+ productCodeDescription: 'CASH CERTIFICATE',
+ interestCategory: '1005',
+ interestCategoryDescription: 'NON MEMBER - SENIOR CITIZEN',
+ payableGl: '16011',
+ paidGl: '62111',
+ },
+];
+export default productInfo;
diff --git a/src/util/util.js b/src/util/util.js
index d7ab1cb..2ac256a 100644
--- a/src/util/util.js
+++ b/src/util/util.js
@@ -1,14 +1,16 @@
const getUserInfoFromSession = () => {
- return {
- username: "Rajesh Kumar",
- pacsName: "Demo SKUS Ltd.",
- userType: "pacsTeller",
- moduleName: "locker",
- }
-}
+ return {
+ username: 'Rajesh Kumar',
+ pacsName: 'Demo SKUS Ltd.',
+ userType: 'pacsTeller',
+ moduleName: 'locker',
+ };
+};
const toTitleCase = (str) => {
- return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
-}
+ return str.replace(/\w\S*/g, function (txt) {
+ return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+ });
+};
-export { getUserInfoFromSession, toTitleCase };
\ No newline at end of file
+export { getUserInfoFromSession, toTitleCase };
diff --git a/tailwind.config.js b/tailwind.config.js
index 17c6fe1..dd12d3c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,6 @@
/** @type {import('tailwindcss').Config} */
export default {
- content: [
- "./index.html",
- "./src/**/*.{js,ts,jsx,tsx}",
- ],
+ content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'selector',
theme: {
colors: {
@@ -13,7 +10,7 @@ export default {
error: {
DEFAULT: '#A14444',
dark: '#E5254B',
- surface: {DEFAULT: '#D26464', dark: '#FCE9ED'}
+ surface: { DEFAULT: '#D26464', dark: '#FCE9ED' },
},
onToast: {
DEFAULT: '#646564',
@@ -22,22 +19,22 @@ export default {
warning: {
DEFAULT: '#A5A513',
dark: '#EA7000',
- surface: {DEFAULT: '#C8C820', dark: '#FDF1E5'}
+ surface: { DEFAULT: '#C8C820', dark: '#FDF1E5' },
},
success: {
DEFAULT: '#038100',
dark: '#038100',
- surface: {DEFAULT: '#E6F2E5', dark: '#E6F2E5'}
+ surface: { DEFAULT: '#E6F2E5', dark: '#E6F2E5' },
},
transparent: 'transparent',
primary: {
DEFAULT: '#008C46',
- dark: '#E6F4E1'
+ dark: '#E6F4E1',
},
secondary: {
DEFAULT: '#B1E1B3',
dark: '#7DBD80',
- variant: {DEFAULT: '#80AE82', dark: '#5B875D'}
+ variant: { DEFAULT: '#80AE82', dark: '#5B875D' },
},
tertiary: {
DEFAULT: '#f2f2df',
@@ -46,17 +43,16 @@ export default {
surface: {
DEFAULT: '#F6F6F6',
dark: '#2d332d',
- variant: {DEFAULT: '#F4FFF4', dark: '#2b372c'}
+ variant: { DEFAULT: '#F4FFF4', dark: '#2b372c' },
},
-
},
fontFamily: {
display: ['Montserrat', 'sans-serif'],
- body: ['Rubik', 'Noto Sans','Noto Sans Bengali', 'sans-serif'],
+ body: ['Rubik', 'Noto Sans', 'Noto Sans Bengali', 'sans-serif'],
},
extend: {
borderWidth: {
- '3': '3px',
+ 3: '3px',
},
fontSize: {
title: '40px',
@@ -75,7 +71,7 @@ export default {
'30%': { width: '30%' },
'80%': { width: '10%' },
'100%': { left: '100%' },
- }
+ },
},
},
},
@@ -84,5 +80,4 @@ export default {
addVariant('second-last', '&:nth-last-child(2)');
},
],
-}
-
+};
diff --git a/vite.config.js b/vite.config.js
index 5a33944..627a319 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
-})
+});
|