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

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;