Add ChargeManagement and ChargeEdit components; implement charge management functionality with form validation and routing updates

src/components/Button.jsx

@@ -1,13 +1,15 @@
 import PropTypes from 'prop-types';
 import { motion } from 'motion/react';
+import clsx from 'clsx';
 
-function Button({text, onClick}) {
+function Button({text, onClick, disabled}) {
     return (
         <motion.button 
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            className="px-12 py-2 text-lg text-white dark:text-primary-dark rounded-full bg-primary dark:bg-secondary-dark" 
+            whileHover={!disabled && { scale: 1.05 }}
+            whileTap={!disabled && { scale: 0.95 }}
+            className={clsx("px-12 py-2 text-lg text-white dark:text-primary-dark rounded-full bg-primary dark:bg-secondary-dark", disabled && "bg-[#ccc] dark:bg-[#ccc]")}
             onClick={onClick}
+            disabled={disabled}
         >
             {text}
         </motion.button>
@@ -16,7 +18,8 @@ function Button({text, onClick}) {
 
 Button.propTypes = {
     text: PropTypes.string.isRequired,
-    onClick: PropTypes.func.isRequired
+    onClick: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
 };
 
 export default Button;

src/components/FormField.jsx

@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import { motion } from "motion/react";
+import clsx from "clsx";
 
 function FormField({ label, children, icon }) {
   return (
@@ -13,9 +14,10 @@ function FormField({ label, children, icon }) {
             <motion.div 
                 whileHover={{ scale: 1.1 }}
                 whileTap={{ scale: 0.9 }}
-                className="bg-primary rounded-full p-2 text-white cursor-pointer"
+                className={clsx(icon.mode === "plain" ? "text-[#444]" : "bg-primary rounded-full p-2 text-white cursor-pointer")}
+                onClick={icon.onClick}
             >
-                {icon}
+                {icon.icon}
             </motion.div>
         )}
       </div>
@@ -27,7 +29,7 @@ function FormField({ label, children, icon }) {
 FormField.propTypes = {
   label: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
-    icon: PropTypes.node,
+    icon: PropTypes.object.isRequired,
 };
 
 export default FormField;