moe_components

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/SecuritySettings.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+
+const SecuritySettings = () => {
+  const [twoFactorAuth, setTwoFactorAuth] = useState(false);
+  const [changePassword, setChangePassword] = useState(false);
+
+  const handleToggle2FA = () => {
+    setTwoFactorAuth(!twoFactorAuth);
+  };
+
+  const handleChangePassword = () => {
+    setChangePassword(true);
+    // Implement password change functionality here
+  };
+
+  return (
+    <div className="security-settings">
+      <h3>Security Settings</h3>
+      <div className="setting">
+        <label>
+          <input
+            type="checkbox"
+            checked={twoFactorAuth}
+            onChange={handleToggle2FA}
+          />
+          Enable Two-Factor Authentication
+        </label>
+      </div>
+      <div className="setting">
+        <button onClick={handleChangePassword}>Change Password</button>
+      </div>
+    </div>
+  );
+};
+
+export default SecuritySettings;