Create Profile Edit Page (Admin) with Multiple Features

frontend/src/AgroShopAI/components/Pages/Admin-Dashboard.jsx

@@ -6,6 +6,7 @@ import { useState } from "react";
 import StatisticComponent from "./components/StatisticComponent";
 import ReturnPanel from "./components/ReturnPage";
 import AdminProductManagement from "./ProductManagement";
+import ProfileEdit from "./components/ProfileManage";
 export default function AdminDashboard() {
   const [activeView, setActiveView] = useState("dashboard"); // Track active view
 
@@ -25,6 +26,7 @@ export default function AdminDashboard() {
         {activeView === "analytics" && <StatisticComponent />}
         {activeView === "return" && <ReturnPanel/>}
         {activeView === "product" && <AdminProductManagement/>}
+        {activeView === "settings" && <ProfileEdit/>}
       </main>
     </div>
   );

frontend/src/AgroShopAI/components/Pages/components/ActiveSessions.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+
+const ActiveSessions = () => {
+  const [sessions, setSessions] = useState([
+    { id: 1, device: 'MacBook Pro', location: 'New York', lastActive: '10 minutes ago' },
+    { id: 2, device: 'iPhone', location: 'Los Angeles', lastActive: '1 hour ago' },
+  ]);
+
+  const handleLogout = (id) => {
+    setSessions(sessions.filter(session => session.id !== id));
+  };
+
+  return (
+    <div className="active-sessions">
+      <h3>Active Sessions</h3>
+      {sessions.length === 0 ? (
+        <p>No active sessions.</p>
+      ) : (
+        <ul>
+          {sessions.map((session) => (
+            <li key={session.id}>
+              <span>{session.device} ({session.location})</span>
+              <span>{session.lastActive}</span>
+              <button onClick={() => handleLogout(session.id)}>Log Out</button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default ActiveSessions;

frontend/src/AgroShopAI/components/Pages/components/ActivityLog.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const ActivityLog = () => {
+  const activities = [
+    'Logged in from a new device',
+    'Changed email address',
+    'Password updated',
+  ];
+
+  return (
+    <div className="activity-log">
+      <h3>Activity Log</h3>
+      <ul>
+        {activities.map((activity, index) => (
+          <li key={index}>{activity}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default ActivityLog;

frontend/src/AgroShopAI/components/Pages/components/Message.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Message = ({ message }) => {
+  return (
+    <div className="message">
+      <p>{message}</p>
+    </div>
+  );
+};
+
+export default Message;
+

frontend/src/AgroShopAI/components/Pages/components/Notifications.jsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+
+const Notifications = () => {
+  // State for managing notification preferences
+  const [emailNotifications, setEmailNotifications] = useState(true);
+  const [smsNotifications, setSmsNotifications] = useState(false);
+  const [appNotifications, setAppNotifications] = useState(true);
+  const [orderNotifications, setOrderNotifications] = useState(true);
+  const [inventoryNotifications, setInventoryNotifications] = useState(false);
+
+  const handleToggle = (setting, setter) => {
+    setter(!setting);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle the form submission for saving the changes
+    alert('Notification preferences saved!');
+  };
+
+  return (
+    <div className="notifications-settings">
+      <h3>Notification Settings</h3>
+      <form onSubmit={handleSubmit}>
+        <div className="notification-setting">
+          <label>
+            <input
+              type="checkbox"
+              checked={emailNotifications}
+              onChange={() => handleToggle(emailNotifications, setEmailNotifications)}
+            />
+            Email Notifications
+          </label>
+        </div>
+
+        <div className="notification-setting">
+          <label>
+            <input
+              type="checkbox"
+              checked={smsNotifications}
+              onChange={() => handleToggle(smsNotifications, setSmsNotifications)}
+            />
+            SMS Notifications
+          </label>
+        </div>
+
+        <div className="notification-setting">
+          <label>
+            <input
+              type="checkbox"
+              checked={appNotifications}
+              onChange={() => handleToggle(appNotifications, setAppNotifications)}
+            />
+            App Notifications
+          </label>
+        </div>
+
+        <div className="notification-setting">
+          <label>
+            <input
+              type="checkbox"
+              checked={orderNotifications}
+              onChange={() => handleToggle(orderNotifications, setOrderNotifications)}
+            />
+            Order Notifications
+          </label>
+        </div>
+
+        <div className="notification-setting">
+          <label>
+            <input
+              type="checkbox"
+              checked={inventoryNotifications}
+              onChange={() => handleToggle(inventoryNotifications, setInventoryNotifications)}
+            />
+            Inventory Notifications
+          </label>
+        </div>
+
+        <button type="submit" className="save-btn">Save Changes</button>
+      </form>
+    </div>
+  );
+};
+
+export default Notifications;

frontend/src/AgroShopAI/components/Pages/components/PasswordForm.jsx

@@ -0,0 +1,94 @@
+const PasswordForm = ({
+  password,
+  setPassword,
+  isLoading,
+  setIsLoading,
+  setMessage,
+}) => {
+  const handlePasswordChange = (e) => {
+    setPassword({ ...password, [e.target.name]: e.target.value });
+  };
+
+  const handlePasswordSubmit = (e) => {
+    e.preventDefault();
+    if (password.new !== password.confirm) {
+      setMessage({ type: "error", text: "New passwords do not match!" });
+      return;
+    }
+    setIsLoading(true);
+    // Simulate API call
+    setTimeout(() => {
+      setIsLoading(false);
+      setMessage({ type: "success", text: "Password changed successfully!" });
+      setPassword({ current: "", new: "", confirm: "" });
+    }, 1500);
+  };
+
+  return (
+    <form onSubmit={handlePasswordSubmit} className="space-y-4">
+      <div>
+        <label
+          htmlFor="current"
+          className="block text-sm font-medium text-gray-700"
+        >
+          Current Password
+        </label>
+        <input
+          type="password"
+          id="current"
+          name="current"
+          value={password.current}
+          onChange={handlePasswordChange}
+          className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
+          required
+        />
+      </div>
+      <div>
+        <label
+          htmlFor="new"
+          className="block text-sm font-medium text-gray-700"
+        >
+          New Password
+        </label>
+        <input
+          type="password"
+          id="new"
+          name="new"
+          value={password.new}
+          onChange={handlePasswordChange}
+          className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
+          required
+          minLength={8}
+        />
+      </div>
+      <div>
+        <label
+          htmlFor="confirm"
+          className="block text-sm font-medium text-gray-700"
+        >
+          Confirm New Password
+        </label>
+        <input
+          type="password"
+          id="confirm"
+          name="confirm"
+          value={password.confirm}
+          onChange={handlePasswordChange}
+          className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
+          required
+        />
+      </div>
+      <div>
+        <button
+          type="submit"
+          className="bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600"
+          disabled={isLoading}
+        >
+          {isLoading ? "Changing..." : "Change Password"}
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default PasswordForm;

frontend/src/AgroShopAI/components/Pages/components/PersonalInfo.jsx

@@ -0,0 +1,86 @@
+const PersonalInfo = ({
+  personalInfo,
+  setPersonalInfo,
+  isLoading,
+  setIsLoading,
+  setMessage,
+}) => {
+  const handlePersonalInfoChange = (e) => {
+    setPersonalInfo({ ...personalInfo, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    // Simulate API call
+    setTimeout(() => {
+      setIsLoading(false);
+      setMessage({ type: "success", text: "Profile updated successfully!" });
+    }, 1500);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label
+          htmlFor="name"
+          className="block text-sm font-medium text-gray-700"
+        >
+          Name
+        </label>
+        <input
+          type="text"
+          id="name"
+          name="name"
+          value={personalInfo.name}
+          onChange={handlePersonalInfoChange}
+          className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
+          required
+        />
+      </div>
+      <div>
+        <label
+          htmlFor="email"
+          className="block text-sm font-medium text-gray-700"
+        >
+          Email
+        </label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          value={personalInfo.email}
+          onChange={handlePersonalInfoChange}
+          className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
+          required
+        />
+      </div>
+      <div>
+        <label
+          htmlFor="profilePicture"
+          className="block text-sm font-medium text-gray-700"
+        >
+          Profile Picture
+        </label>
+        <input
+          type="file"
+          id="profilePicture"
+          name="profilePicture"
+          className="mt-1 block w-full"
+          accept="image/*"
+        />
+      </div>
+      <div>
+        <button
+          type="submit"
+          className="bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600"
+          disabled={isLoading}
+        >
+          {isLoading ? "Saving..." : "Save Changes"}
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default PersonalInfo;