fix:frontend: fix some ui and layout

.env

@@ -1,2 +1 @@
-NEXT_PUBLIC_API_BASE_URL=http://localhost:5000/api
 NEXT_PUBLIC_IMGBB_API=468a47d5f64ecfb9b135bba4c38d559d

.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.vercel

README.md

@@ -1,36 +1,131 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Lost & Found Frontend
+
+## Overview
+
+The Lost & Found website is a community-driven platform designed to help individuals report and reclaim lost items. This repository contains the frontend code for the Lost & Found website.
+
+## Technologies Used
+
+- Next.js
+- TypeScript
+- Tailwind CSS
+- React
+- Redux Toolkit
+- API Integration with Backend
+
+## Live Demo
+
+[Frontend Live Link](https://the-missing-place.vercel.app/)
 
 ## Getting Started
 
-First, run the development server:
+### Prerequisites
+
+- Node.js (v14 or higher)
+- npm (v6 or higher) or yarn (v1.22 or higher)
+
+### Installation
+
+1. Clone the repository:
+
+   ```sh
+
+   ```
+
+# git clone https://github.com/mdrianislam0or1/lost-and-found-frontend.git
+
+    Navigate to the project directory:
+
+    sh
+
+```
+
+cd lost-and-found-frontend
+
+Install dependencies:
+
+sh
+
+ npm install
+ # or
+ yarn install
+
+Running the Development Server
+
+sh
 
-```bash
 npm run dev
+
 # or
+
 yarn dev
+
+# Open http://localhost:3000 with your browser to see the result.
+Building for Production
+
+sh
+
+npm run build
+
 # or
-pnpm dev
+
+yarn build
+
+Running the Production Server
+
+After building the project, you can start the production server with:
+
+sh
+
+npm start
+
 # or
-bun dev
-```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+yarn start
+
+# Project Structure
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+ pages/ - Contains all the Next.js pages.
+ components/ - Contains reusable React components.
+ styles/ - Contains global and component-specific styles.
+ redux/ - Contains Redux slices and store configuration.
+ public/ - Contains static assets.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+# Features
 
-## Learn More
+ Home Page/Landing Page:
+     Header with navigation links.
+     Hero section with headline and buttons to report lost or found items.
+     About section with purpose and mission of the website.
+     Display of recent lost item reports.
 
-To learn more about Next.js, take a look at the following resources:
+# Login & Registration:
+     Login and registration forms with validation.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+#Submit Lost Items:
+     Form to submit lost items with details like category, description, date, and location.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+# Submit Found Items:
+     Form to submit found items with details like category, description, date, and location.
 
-## Deploy on Vercel
+# My Profile:
+     User account information with options to edit profile and change password.
+     Sections for claim requests, lost items, and found items reported by the user.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+# Admin Dashboard:
+     User management and website activity monitoring features for administrators.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+# View Recent Posts:
+     List of recently reported lost and found items with filters and search functionality.
+# Change Password Page:
+     Form to change the user's password.
+
+# Contribution
+
+Feel free to contribute to this project by opening issues and submitting pull requests.
+License
+
+# Contact
+
+For any inquiries, please contact us at rianislamrian@gmail.com.
+```

src/app/(withCommonLayout)/about/page.tsx

@@ -1,3 +1,4 @@
+"use client";
 import Image from "next/image";
 
 export default function About() {

src/app/(withCommonLayout)/changePassword/page.tsx

@@ -4,6 +4,8 @@ import { useState } from "react";
 import { useChangePasswordMutation } from "@/redux/api/profileApi";
 import { useRouter } from "next/navigation";
 import { removeUser } from "@/services/auth.service";
+import { deleteCookies } from "@/services/actions/deleteCookies";
+import { authKey } from "@/constants/authKey";
 
 export default function ChangePassword() {
   const [changePassword, { isLoading }] = useChangePasswordMutation();
@@ -21,6 +23,13 @@ export default function ChangePassword() {
     }));
   };
 
+  // const handleLogout = () => {
+  //   removeUser();
+  //   deleteCookies(authKey);
+  //   router.refresh();
+  //   router.push("/");
+  // };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
@@ -31,7 +40,12 @@ export default function ChangePassword() {
 
     try {
       await changePassword(formData).unwrap();
+      // removeUser();
+      // router.push("/");
+
       removeUser();
+      deleteCookies(authKey);
+      router.refresh();
       router.push("/");
       alert("Password changed successfully!");
     } catch (error: any) {

src/app/(withCommonLayout)/claimItem/page.tsx

@@ -45,7 +45,7 @@ export default function ClaimItem() {
       const formData = new FormData();
       formData.append("image", file);
       const response = await axios.post(
-        `https://api.imgbb.com/1/upload?key=${process.env.NEXT_PUBLIC_IMGBB_API}`,
+        `https://api.imgbb.com/1/upload?key=468a47d5f64ecfb9b135bba4c38d559d`,
         formData
       );
       uploadedPhotos.push(response.data.data.url);

src/app/(withCommonLayout)/editProfile/page.tsx

@@ -5,27 +5,13 @@ import {
   useGetMyProfileQuery,
   useUpdateProfileMutation,
 } from "@/redux/api/profileApi";
-import "tailwindcss/tailwind.css";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
 import Loading from "@/components/UI/StyleComponent/Loading";
 
-interface ProfileData {
-  name: string;
-  email: string;
-  profile: {
-    bio: string;
-    age: string;
-    profilePicture: string;
-  };
-}
-
 export default function EditProfile() {
   const { data: profileData, isLoading } = useGetMyProfileQuery({});
   const [updateProfile, { isLoading: isUpdating }] = useUpdateProfileMutation();
 
-  const router = useRouter();
-
   const [formData, setFormData] = useState({
     name: "",
     email: "",
@@ -34,8 +20,6 @@ export default function EditProfile() {
     profilePicture: "",
   });
 
-  const [imageFile, setImageFile] = useState<File | null>(null);
-
   useEffect(() => {
     if (profileData) {
       setFormData({
@@ -48,53 +32,33 @@ export default function EditProfile() {
     }
   }, [profileData]);
 
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
+  const handleChange = (e: React.ChangeEvent<any>) => {
     const { name, value } = e.target;
     setFormData((prevData) => ({
       ...prevData,
       [name]: value,
     }));
   };
 
-  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setImageFile(e.target.files?.[0] || null);
-  };
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
-    let profilePictureUrl = formData.profilePicture;
-    if (imageFile) {
-      try {
-        profilePictureUrl = await uploadImage(imageFile);
-      } catch (error: any) {
-        console.error("Failed to upload image:", error);
-        alert(`Failed to upload image: ${error.message}`);
-        return;
-      }
-    }
-
     try {
-      await updateProfile({
-        ...formData,
-        profilePicture: profilePictureUrl,
-      }).unwrap();
+      await updateProfile(formData).unwrap();
       alert("Profile updated successfully!");
-      router.refresh();
     } catch (error: any) {
-      console.error("Failed to update profile:", error);
-      alert(`Failed to update profile: ${error.message}`);
+      //   console.error("Failed to update profile:", error);
+      //   alert(`Failed to update profile: ${error.message}`);
     }
   };
 
-  if (isLoading)
-    return (
-      <div>
-        <Loading />
-      </div>
-    );
+  //   if (isLoading) {
+  //     return (
+  //       <div>
+  //         <Loading />
+  //       </div>
+  //     );
+  //   }
 
   return (
     <div className="container my-10 mx-auto p-6 bg-white rounded-lg shadow-lg">
@@ -163,11 +127,11 @@ export default function EditProfile() {
           <label className="block text-sm font-medium text-gray-700">
             Profile Picture:
             <input
-              type="file"
+              type="text"
               name="profilePicture"
-              onChange={handleImageChange}
-              className="mt-1 block w-full text-sm text-gray-500"
-              accept="image/*"
+              value={formData.profilePicture}
+              onChange={handleChange}
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-500 focus:ring-opacity-50"
             />
           </label>
         </div>
@@ -182,24 +146,3 @@ export default function EditProfile() {
     </div>
   );
 }
-
-const uploadImage = async (imageFile: File): Promise<string> => {
-  const formData = new FormData();
-  formData.append("image", imageFile);
-
-  const response = await fetch(
-    `https://api.imgbb.com/1/upload?key=${process.env.NEXT_PUBLIC_IMGBB_API}`,
-    {
-      method: "POST",
-      body: formData,
-    }
-  );
-
-  if (!response.ok) {
-    const errorResponse = await response.json();
-    throw new Error(errorResponse.error.message || "Failed to upload image");
-  }
-
-  const data = await response.json();
-  return data.data.url;
-};

src/app/(withCommonLayout)/submitLostItem/page.tsx

@@ -44,7 +44,7 @@ export default function SubmitLostItem() {
 
       try {
         const response = await axios.post(
-          `https://api.imgbb.com/1/upload?key=${process.env.NEXT_PUBLIC_IMGBB_API}`,
+          `https://api.imgbb.com/1/upload?key=468a47d5f64ecfb9b135bba4c38d559d`,
           formData
         );
         imageUrls.push(response.data.data.url);