From 8d25a69effa5ab63e80e03f97787d4c6c15065a8 Mon Sep 17 00:00:00 2001
From: Ikki <vivekprakash.st@gmail.com>
Date: Sun, 10 Nov 2024 16:00:52 +0530
Subject: [PATCH 1/2] profile_edit

---
 .../components/Pages/Admin-Dashboard.jsx      |   2 +
 .../Pages/components/PasswordForm.jsx         |  94 +++++++++++++++
 .../Pages/components/PersonalInfo.jsx         |  86 ++++++++++++++
 .../Pages/components/ProfileManage.jsx        | 107 ++++++++++++++++++
 .../components/Pages/components/TabNav.jsx    |  30 +++++
 5 files changed, 319 insertions(+)
 create mode 100644 frontend/src/AgroShopAI/components/Pages/components/PasswordForm.jsx
 create mode 100644 frontend/src/AgroShopAI/components/Pages/components/PersonalInfo.jsx
 create mode 100644 frontend/src/AgroShopAI/components/Pages/components/ProfileManage.jsx
 create mode 100644 frontend/src/AgroShopAI/components/Pages/components/TabNav.jsx

diff --git a/frontend/src/AgroShopAI/components/Pages/Admin-Dashboard.jsx b/frontend/src/AgroShopAI/components/Pages/Admin-Dashboard.jsx
index 61dbc155..b61a8644 100644
--- a/frontend/src/AgroShopAI/components/Pages/Admin-Dashboard.jsx
+++ b/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>
   );
diff --git a/frontend/src/AgroShopAI/components/Pages/components/PasswordForm.jsx b/frontend/src/AgroShopAI/components/Pages/components/PasswordForm.jsx
new file mode 100644
index 00000000..5ca96497
--- /dev/null
+++ b/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;
diff --git a/frontend/src/AgroShopAI/components/Pages/components/PersonalInfo.jsx b/frontend/src/AgroShopAI/components/Pages/components/PersonalInfo.jsx
new file mode 100644
index 00000000..0e52afd6
--- /dev/null
+++ b/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;
diff --git a/frontend/src/AgroShopAI/components/Pages/components/ProfileManage.jsx b/frontend/src/AgroShopAI/components/Pages/components/ProfileManage.jsx
new file mode 100644
index 00000000..d534201b
--- /dev/null
+++ b/frontend/src/AgroShopAI/components/Pages/components/ProfileManage.jsx
@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import TabNav from "./TabNav";
+import PersonalInfo from "./PersonalInfo";
+import PasswordForm from "./PasswordForm";
+import Notifications from "./Notifications";
+import SecuritySettings from "./SecuritySettings";
+import ActivityLog from "./ActivityLog";
+import ActiveSessions from "./ActiveSessions";
+import Message from "./Message";
+
+export default function ProfileEdit() {
+  const [activeTab, setActiveTab] = useState("personal");
+  const [personalInfo, setPersonalInfo] = useState({
+    name: "John Doe",
+    email: "john.doe@agroshop.com",
+    profilePicture: "/placeholder.svg?height=100&width=100",
+  });
+  const [password, setPassword] = useState({
+    current: "",
+    new: "",
+    confirm: "",
+  });
+  const [notifications, setNotifications] = useState({
+    email: true,
+    sms: false,
+    app: true,
+    newOrders: true,
+    lowInventory: false,
+  });
+  const [securitySettings, setSecuritySettings] = useState({
+    securityQuestion: "What was your first pet's name?",
+    securityAnswer: "",
+    accountLockout: true,
+  });
+  const [activityLog] = useState([
+    {
+      type: "login",
+      date: "2023-11-10 09:30:00",
+      details: "Logged in from Chrome on Windows",
+    },
+    {
+      type: "profile_update",
+      date: "2023-11-09 14:15:00",
+      details: "Updated email address",
+    },
+    {
+      type: "password_change",
+      date: "2023-11-08 11:00:00",
+      details: "Changed password",
+    },
+  ]);
+  const [activeSessions] = useState([
+    { device: "Chrome on Windows", lastActive: "2023-11-10 10:30:00" },
+    { device: "Safari on iPhone", lastActive: "2023-11-10 09:45:00" },
+  ]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [message, setMessage] = useState({ type: "", text: "" });
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold text-green-700 mb-6">Profile Edit</h1>
+
+      <TabNav activeTab={activeTab} setActiveTab={setActiveTab} />
+
+      {message.text && <Message message={message} />}
+
+      {activeTab === "personal" && (
+        <PersonalInfo
+          personalInfo={personalInfo}
+          setPersonalInfo={setPersonalInfo}
+          isLoading={isLoading}
+          setIsLoading={setIsLoading}
+          setMessage={setMessage}
+        />
+      )}
+      {activeTab === "password" && (
+        <PasswordForm
+          password={password}
+          setPassword={setPassword}
+          isLoading={isLoading}
+          setIsLoading={setIsLoading}
+          setMessage={setMessage}
+        />
+      )}
+      {activeTab === "notifications" && (
+        <Notifications
+          notifications={notifications}
+          setNotifications={setNotifications}
+          isLoading={isLoading}
+          setIsLoading={setIsLoading}
+        />
+      )}
+      {activeTab === "security" && (
+        <SecuritySettings
+          securitySettings={securitySettings}
+          setSecuritySettings={setSecuritySettings}
+          isLoading={isLoading}
+          setIsLoading={setIsLoading}
+        />
+      )}
+      {activeTab === "activity" && <ActivityLog activityLog={activityLog} />}
+      {activeTab === "sessions" && (
+        <ActiveSessions activeSessions={activeSessions} />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/AgroShopAI/components/Pages/components/TabNav.jsx b/frontend/src/AgroShopAI/components/Pages/components/TabNav.jsx
new file mode 100644
index 00000000..4177288f
--- /dev/null
+++ b/frontend/src/AgroShopAI/components/Pages/components/TabNav.jsx
@@ -0,0 +1,30 @@
+const TabNav = ({ activeTab, setActiveTab }) => {
+  return (
+    <div className="mb-4">
+      <nav className="flex border-b border-green-500">
+        {[
+          "personal",
+          "password",
+          "notifications",
+          "security",
+          "activity",
+          "sessions",
+        ].map((tab) => (
+          <button
+            key={tab}
+            className={`py-2 px-4 ${
+              activeTab === tab
+                ? "border-b-2 border-green-500 text-green-700"
+                : "text-gray-500"
+            }`}
+            onClick={() => setActiveTab(tab)}
+          >
+            {tab.charAt(0).toUpperCase() + tab.slice(1)}
+          </button>
+        ))}
+      </nav>
+    </div>
+  );
+};
+
+export default TabNav;

From 9184c384cd590170a37270ee62719736a60ad97e Mon Sep 17 00:00:00 2001
From: Ikki <vivekprakash.st@gmail.com>
Date: Sun, 10 Nov 2024 16:07:36 +0530
Subject: [PATCH 2/2] moe_components

---
 .../Pages/components/ActiveSessions.jsx       | 33 +++++++
 .../Pages/components/ActivityLog.jsx          | 22 +++++
 .../components/Pages/components/Message.jsx   | 12 +++
 .../Pages/components/Notifications.jsx        | 86 +++++++++++++++++++
 .../Pages/components/SecuritySettings.jsx     | 36 ++++++++
 5 files changed, 189 insertions(+)
 create mode 100644 frontend/src/AgroShopAI/components/Pages/components/ActiveSessions.jsx
 create mode 100644 frontend/src/AgroShopAI/components/Pages/components/ActivityLog.jsx
 create mode 100644 frontend/src/AgroShopAI/components/Pages/components/Message.jsx
 create mode 100644 frontend/src/AgroShopAI/components/Pages/components/Notifications.jsx
 create mode 100644 frontend/src/AgroShopAI/components/Pages/components/SecuritySettings.jsx

diff --git a/frontend/src/AgroShopAI/components/Pages/components/ActiveSessions.jsx b/frontend/src/AgroShopAI/components/Pages/components/ActiveSessions.jsx
new file mode 100644
index 00000000..2cc037cd
--- /dev/null
+++ b/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;
diff --git a/frontend/src/AgroShopAI/components/Pages/components/ActivityLog.jsx b/frontend/src/AgroShopAI/components/Pages/components/ActivityLog.jsx
new file mode 100644
index 00000000..45a46cad
--- /dev/null
+++ b/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;
diff --git a/frontend/src/AgroShopAI/components/Pages/components/Message.jsx b/frontend/src/AgroShopAI/components/Pages/components/Message.jsx
new file mode 100644
index 00000000..e6a15b7a
--- /dev/null
+++ b/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;
+
diff --git a/frontend/src/AgroShopAI/components/Pages/components/Notifications.jsx b/frontend/src/AgroShopAI/components/Pages/components/Notifications.jsx
new file mode 100644
index 00000000..f5233936
--- /dev/null
+++ b/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;
diff --git a/frontend/src/AgroShopAI/components/Pages/components/SecuritySettings.jsx b/frontend/src/AgroShopAI/components/Pages/components/SecuritySettings.jsx
new file mode 100644
index 00000000..d388a5d7
--- /dev/null
+++ b/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;