Merge pull request #11 from MYSTICxSAM/profile

1.Added reset option at login page 2.Added a profile page which works on clicking profile page"

Author: 092vk

src/App.css

@@ -40,3 +40,4 @@
 .read-the-docs {
   color: #888;
 }
+

src/App.tsx

@@ -15,6 +15,8 @@ import Blogs from "./pages/Blogs"
 import AboutUs from "./pages/AboutUs";
 import ContactUs from "./pages/ContactUs";
 import ScrollToTop from "./components/ScrollToTop";
+import Profile from "./pages/Profile";
+import ForgotPassword from "./pages/auth/Forgot";
 
 // Import i18n configuration
 import './i18n';
@@ -32,9 +34,12 @@ const AppRoutes = () => {
       <Route path="/blog" element={<Blogs user_role={userRole} />} />
       <Route path="/about" element={<AboutUs />} />
       <Route path="/contact" element={<ContactUs />} />
+      <Route path="/profile" element={<Profile />} />
       <Route path="/auth" element={<AuthLayout />}>
         <Route path="login" element={<Login />} />
         <Route path="register" element={<Register />} />
+        <Route path="Forgot" element={<ForgotPassword />} />
+        
       </Route>
       {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
       <Route path="*" element={<NotFound />} />

src/components/Footer.tsx

@@ -117,7 +117,7 @@ const Footer: React.FC = () => {
             © {new Date().getFullYear()} GoBuild. All rights reserved.
           </p>
           <div className="flex space-x-6">
-            <Link to="/" className="text-gray-400 hover:text-white text-sm">Privacy Policy</Link>
+            <Link to="/policy" className="text-gray-400 hover:text-white text-sm">Privacy Policy</Link>
             <Link to="/" className="text-gray-400 hover:text-white text-sm">Terms of Service</Link>
             <Link to="/" className="text-gray-400 hover:text-white text-sm">Cookies</Link>
           </div>

src/components/UserProfileMenu.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { useNavigate } from 'react-router-dom';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,7 +17,7 @@ import { useTranslation } from 'react-i18next';
 const UserProfileMenu = () => {
   const { user, signOut } = useAuth();
   const { t } = useTranslation();
-
+  const navigate = useNavigate();
   if (!user) {
     return null;
   }
@@ -42,7 +43,7 @@ const UserProfileMenu = () => {
           {user.user_metadata.full_name || user.email}
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        <DropdownMenuItem className="cursor-pointer">
+        <DropdownMenuItem className="cursor-pointer" onClick={() => navigate('/profile')}>
           <User className="mr-2 h-4 w-4" />
           <span>{t('common.profile')}</span>
         </DropdownMenuItem>

src/index.css

@@ -246,4 +246,33 @@
   .animate-pulse-line-reverse {
     animation: pulseBackward 3s ease-in-out infinite;
   }
+  @keyframes slideInFromRight {
+    0% {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideOutToRight {
+    0% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    100% {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+  }
+
+  .animate-slideInFromRight {
+    animation: slideInFromRight 0.3s ease-out forwards;
+  }
+
+  .animate-slideOutToRight {
+    animation: slideOutToRight 0.3s ease-in forwards;
+  }
 }

src/pages/Policy.tsx

@@ -0,0 +1,222 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
+import Navbar from '@/components/Navbar';
+
+const accentColor = 'text-blue-600';
+
+const Profile: React.FC = () => {
+    
+  const { user } = useAuth();
+  const [tab, setTab] = useState<'active' | 'history'>('active');
+  const [showDeletePopup, setShowDeletePopup] = useState(false);
+  const [popupAnimatingOut, setPopupAnimatingOut] = useState(false);
+  const [deleteReason, setDeleteReason] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [deleting, setDeleting] = useState(false);
+
+  const navigate = useNavigate();
+
+  const activeRequests = [{name:"Mason",status:"Doing",id:1234},{name:"Plumber",status:"Doing",id:1234}]; //is format me data dalna hai 
+  const serviceHistory = [{name:"Mason",status:"Done",id:1234}]; //is format me data dalna hai 
+  const displayName = user?.user_metadata?.full_name || user?.email || 'User';
+
+  const openDeletePopup = () => {
+    setDeleteReason('');
+    setEmail('');
+    setPassword('');
+    setShowDeletePopup(true);
+  };
+  useEffect(()=>{
+    if(!user){
+        navigate("/auth/login")
+    }
+  })
+  const closeDeletePopup = () => {
+    setPopupAnimatingOut(true);
+    setTimeout(() => {
+      setPopupAnimatingOut(false);
+      setShowDeletePopup(false);
+    }, 300); // duration matches CSS animation of 0.3s
+  };
+
+  const canDelete = deleteReason.trim() !== '' && email.trim() !== '' && password.trim() !== '';
+
+  const handleDeleteAccount = () => {
+    if (!canDelete) return;
+
+    if (window.confirm('Are you sure you want to delete your account? This action cannot be undone.')) {
+      setDeleting(true);
+      // TODO: Implement backend call for actual delete with re-authentication and reason
+      setTimeout(() => {
+        setDeleting(false);
+        setShowDeletePopup(false);
+        alert('Account deleted successfully.');
+      }, 2000);
+    }
+  };
+
+  return (
+    <div className="bg-white min-h-screen py-8 px-4 sm:px-6 md:px-16 font-sans relative">
+        <Navbar />
+      <div className="max-w-5xl mx-auto w-full mt-14">
+        {/* Header */}
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6 mb-12 px-4 md:px-0">
+          <div>
+            <h1 className="text-3xl sm:text-4xl font-extrabold mb-3">
+              <span className={accentColor}>{displayName}</span>
+              <span className="text-gray-900">’s Dashboard</span>
+            </h1>
+            <p className="text-gray-500 text-base sm:text-lg font-medium max-w-xl">
+              Manage your <span className={accentColor}>service requests</span> and track their progress.
+            </p>
+          </div>
+          <button
+            className="bg-blue-600 text-white px-4 py-3 rounded-lg font-bold flex items-center justify-center gap-3 hover:bg-blue-700 transition text-base sm:text-lg shadow-lg min-w-[180px]"
+            onClick={() => navigate('/services')}
+          >
+            <span className="text-3xl font-extrabold leading-none">+</span> New Service Request
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex bg-gray-100 rounded-lg overflow-hidden shadow mb-10 text-base md:text-lg font-semibold border border-gray-300">
+          <button
+            className={`flex-1 py-4 transition duration-200 ${tab === 'active' ? `bg-white ${accentColor} border-b-6 border-blue-600 shadow-inner` : 'text-gray-400 hover:text-blue-600'}`}
+            onClick={() => setTab('active')}
+            aria-selected={tab === 'active'}
+            role="tab"
+          >
+            Active Requests ({activeRequests.length})
+          </button>
+          <button
+            className={`flex-1 py-4 transition duration-200 ${tab === 'history' ? `bg-white ${accentColor} border-b-6 border-blue-600 shadow-inner` : 'text-gray-400 hover:text-blue-600'}`}
+            onClick={() => setTab('history')}
+            aria-selected={tab === 'history'}
+            role="tab"
+          >
+            Service History ({serviceHistory.length})
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="bg-white rounded-xl shadow-xl p-6 md:p-8 min-h-[260px]">
+          {tab === 'active' ? (
+            activeRequests.length > 0 ? (
+              activeRequests.map((req) => (
+                <div key={req.id} className="border-b last:border-none py-4 flex flex-col md:flex-row justify-between md:items-center">
+                  <div>
+                    <h3 className="font-semibold text-xl md:text-2xl">{req.name}</h3>
+                    <p className="text-gray-600 mt-2 md:text-lg">
+                      Status: <span className="text-blue-700 font-semibold">{req.status}</span>
+                    </p>
+                  </div>
+                  <button className="mt-5 md:mt-0 bg-gray-100 hover:bg-gray-200 text-blue-700 font-semibold px-6 py-3 rounded-lg transition text-lg whitespace-nowrap">
+                    Track Progress
+                  </button>
+                </div>
+              ))
+            ) : (
+              <div className="flex flex-col items-center justify-center h-48 md:h-64 text-center text-blue-100">
+                <div className="text-3xl font-bold mb-2 text-gray-700">No Active Requests</div>
+                <div className="text-gray-500 text-xl">You haven't requested any services yet.</div>
+              </div>
+            )
+          ) : serviceHistory.length > 0 ? (
+            serviceHistory.map((req) => (
+              <div key={req.id} className="border-b last:border-none py-6">
+                <div className="font-semibold text-2xl">{req.name}</div>
+                <div className="text-gray-600 mt-1 text-lg">
+                  Status: <span className="text-green-700 font-semibold">{req.status}</span>
+                </div>
+              </div>
+            ))
+          ) : (
+            <div className="flex flex-col items-center justify-center h-48 md:h-64 text-center text-blue-100">
+              <div className="text-3xl font-bold mb-2 text-gray-700">No Service History</div>
+              <div className="text-gray-500 text-xl">You haven't completed any services yet.</div>
+            </div>
+          )}
+        </div>
+
+        {/* Delete Account */}
+        <div className="mt-14 flex justify-center px-4 md:px-0">
+          <button
+            onClick={openDeletePopup}
+            className="bg-red-600 text-white px-8 py-4 rounded-lg font-bold hover:bg-red-700 transition shadow-lg max-w-md w-full"
+          >
+            Delete My Account
+          </button>
+        </div>
+
+        {/* Delete Reason Popup */}
+        {showDeletePopup && (
+          <div
+            className={`fixed top-0 right-0 z-50 w-full sm:w-96 h-full bg-white shadow-xl p-6 flex flex-col
+              ${popupAnimatingOut ? 'animate-slideOutToRight' : 'animate-slideInFromRight'}`}
+            style={{ animationDuration: '0.3s', animationFillMode: 'forwards' }}
+          >
+            <div className="flex justify-between items-center mb-6">
+              <h2 className="text-xl font-bold text-gray-800">Why are you deleting your account?</h2>
+              <button
+                onClick={closeDeletePopup}
+                className="text-gray-600 hover:text-gray-900 text-2xl font-bold leading-none"
+                aria-label="Close popup"
+              >
+                &times;
+              </button>
+            </div>
+
+            <textarea
+              className="border border-gray-300 rounded p-3 resize-none w-full h-24 focus:outline-blue-500 mb-4"
+              placeholder="Please provide a brief reason..."
+              value={deleteReason}
+              onChange={(e) => setDeleteReason(e.target.value)}
+            />
+
+            <input
+              type="email"
+              className="border border-gray-300 rounded p-3 mb-4 w-full focus:outline-blue-500"
+              placeholder="Enter your email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              aria-label="Email"
+            />
+
+            <div className="flex items-center mb-6">
+              <input
+                type="password"
+                className="border border-gray-300 rounded p-3 w-full focus:outline-blue-500"
+                placeholder="Enter your password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                aria-label="Password"
+              />
+              <Link
+                to="pages/auth/ForgotPassword.tsx"
+                className="text-blue-600 ml-3 whitespace-nowrap hover:underline"
+              >
+                Forgot?
+              </Link>
+            </div>
+
+            <button
+              onClick={handleDeleteAccount}
+              disabled={!(deleteReason.trim() && email.trim() && password.trim()) || deleting}
+              className={`mt-auto py-3 rounded-lg font-bold text-white w-full transition ${
+                !(deleteReason.trim() && email.trim() && password.trim()) || deleting
+                  ? 'bg-gray-300 cursor-not-allowed'
+                  : 'bg-red-600 hover:bg-red-700 cursor-pointer'
+              }`}
+            >
+              {deleting ? 'Deleting Account...' : 'Delete Account'}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Profile;