Add AccountCreation component and product list functionality; update routing and translations

src/components/BannerInfo.jsx

@@ -6,7 +6,7 @@ function BannerInfo({info}) {
     const {t} = useTranslation();
 
     const infoElements = Object.keys(info).map((key) => (
-        <BannerInfoElement key={key} title={t(key)} description={t(info[key])} />    
+        <BannerInfoElement key={key} title={t(key)} description={info[key]} />    
     ))
     infoElements.push(
         <BannerInfoElement 

src/components/FormField.jsx

@@ -0,0 +1,33 @@
+import PropTypes from "prop-types";
+import { motion } from "motion/react";
+
+function FormField({ label, children, icon }) {
+  return (
+    <div className="flex">
+      <label className="mr-4 text-lg text-black dark:text-primary-dark w-[17%]">
+        {label}
+      </label>
+      <div className="flex w-full gap-4 items-center">
+        {children}
+        {icon && (
+            <motion.div 
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.9 }}
+                className="bg-primary rounded-full p-2 text-white cursor-pointer"
+            >
+                {icon}
+            </motion.div>
+        )}
+      </div>
+      
+    </div>
+  );
+}
+
+FormField.propTypes = {
+  label: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+    icon: PropTypes.node,
+};
+
+export default FormField;

src/components/FormInput.jsx

@@ -0,0 +1,32 @@
+import PropTypes from "prop-types";
+
+function FormInput({
+  value,
+  onChange,
+  maxLength=17,
+  readOnly = false,
+  className = "",
+  type = "text",
+}) {
+  return (
+    <input
+      readOnly={readOnly}
+      value={value}
+      className={`w-1/4 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 text-grey focus:outline-grey ${className}`}
+      onChange={onChange}
+      type={type}
+      maxLength={maxLength}
+    />
+  );
+}
+
+FormInput.propTypes = {
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool,
+  className: PropTypes.string,
+  type: PropTypes.string,
+  maxLength: PropTypes.number,
+};
+
+export default FormInput;

src/components/FormSelect.jsx

@@ -0,0 +1,37 @@
+import PropTypes from "prop-types";
+
+function FormSelect({ value, onChange, options, className }) {
+  return (
+    <select
+      value={value}
+      className={
+        "w-1/4 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 text-grey focus:outline-grey " +
+        className
+      }
+      onChange={onChange}
+    >
+      <option disabled value="">
+        Select
+      </option>
+      {options.map(({ value, label }) => (
+        <option key={value} value={value}>
+          {label}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+FormSelect.propTypes = {
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+};
+
+export default FormSelect;

src/components/Header.jsx

@@ -24,7 +24,7 @@ function Header() {
     {
       name: "lockerOperation",
       submenu: [
-        { name: "accountCreation", path: "account-creation" },
+        { name: "accountCreation", path: "operation/account" },
         { name: "cabinetMaintenance", path: "operation/cabinet" },
         { name: "lockerMaintenance", path: "locker-maintenance" },
         { name: "rentPenaltyCollection", path: "rent-collection" },

src/components/ProductListTable.jsx

@@ -0,0 +1,74 @@
+import clsx from "clsx";
+import PropTypes from "prop-types";
+
+function ProductListTable({ productInfo, onSelectProduct }) {
+  return (
+    <table className="w-11/12 border-separate border-spacing-0 rounded-2xl overflow-hidden">
+      <thead>
+        <tr>
+          <th className="border border-t-2 border-l-2 border-primary bg-secondary rounded-ss-2xl font-medium text-[#111]">
+            Product Code
+          </th>
+          <th className="border border-t-2 p-2 border-primary bg-secondary font-medium text-[#111]">
+            Description
+          </th>
+          <th className="border border-t-2 p-2 border-primary bg-secondary font-medium text-[#111]">
+            Interest Category
+          </th>
+          <th className="border border-t-2 border-r-2 p-2 border-primary bg-secondary rounded-se-2xl font-medium text-[#111]">
+            Description
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {productInfo.map((prod, idx) => (
+          <tr
+            key={idx}
+            className="cursor-pointer hover:bg-grey/[0.2] border-b"
+            onClick={() => onSelectProduct(prod)}
+          >
+            <td
+              className={clsx(
+                "border border-l-2 border-primary p-2",
+                idx === productInfo.length - 1 && "rounded-bl-2xl border-b-2"
+              )}
+            >
+              {prod.productCode}
+            </td>
+            <td
+              className={clsx(
+                "border border-primary p-2",
+                idx === productInfo.length - 1 && "border-b-2"
+              )}
+            >
+              {prod.productCodeDescription}
+            </td>
+            <td
+              className={clsx(
+                "border border-primary p-2",
+                idx === productInfo.length - 1 && "border-b-2"
+              )}
+            >
+              {prod.interestCategory}
+            </td>
+            <td
+              className={clsx(
+                "border border-r-2 border-primary p-2",
+                idx === productInfo.length - 1 && "rounded-br-2xl border-b-2"
+              )}
+            >
+              {prod.interestCategoryDescription}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+ProductListTable.propTypes = {
+  productInfo: PropTypes.array.isRequired,
+  onSelectProduct: PropTypes.func.isRequired,
+};
+
+export default ProductListTable;